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

package/dist/lib/components/message/message-item.component.js

@@ -1,13 +1,16 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { UserInfoEngine } from '@memberjunction/core-entities';
 import { RunView, CompositeKey, KeyValuePair } from '@memberjunction/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { AIEngineBase } from '@memberjunction/ai-engine-base';
 import { ConversationUtility, MJAIAgentRunEntityExtended } from '@memberjunction/ai-core-plus';
 import { FormResponseUtils } from '@memberjunction/ng-forms';
+import { FormatAgentFailureForDisplay } from '../../utils/agent-failure-display';
+import { SavePinState } from '../../utils/pin-state';
 import { PlanModePreference } from '../../utils/plan-mode-preference';
 import { MentionAutocompleteService } from '../../services/mention-autocomplete.service';
 import { BeforeResponseFormSubmittedEventArgs, AfterResponseFormSubmittedEventArgs, BeforeStopClickedEventArgs, } from '../../events/chat-events';
-import { ExcludeByUUIDs, UUIDsEqual } from '@memberjunction/global';
+import { ExcludeByUUIDs, UUIDsEqual, UUIDSet } from '@memberjunction/global';
 import { ConversationsRuntime } from '@memberjunction/conversations-runtime';
 import { BadgeTextForAttachment } from '../../util/attachment-badge';
 import { EMPTY_FORK_CHIPS, ForkChipAriaLabel, ForkChipIcon, ForkChipOpenRequestOf } from '../../utils/conversation-forks';
@@ -27,11 +30,12 @@ import * as i11 from "./actionable-commands.component";
 import * as i12 from "./conversation-message-rating.component";
 import * as i13 from "../tasks/task-widget.component";
 const _c0 = (a0, a1) => ({ $implicit: a0, message: a1 });
-const _forTrack0 = ($index, $item) => $item.artifact.ID;
-const _forTrack1 = ($index, $item) => $item.artifactId;
-const _forTrack2 = ($index, $item) => $item.id;
-const _forTrack3 = ($index, $item) => $item.Kind + ($item.BranchID ?? "");
-const _forTrack4 = ($index, $item) => $item.Kind + $item.ID;
+const _forTrack0 = ($index, $item) => $item.artifactId;
+const _forTrack1 = ($index, $item) => $item.id;
+const _forTrack2 = ($index, $item) => $item.ID;
+const _forTrack3 = ($index, $item) => $item.artifact.ID;
+const _forTrack4 = ($index, $item) => $item.Kind + ($item.BranchID ?? "");
+const _forTrack5 = ($index, $item) => $item.Kind + $item.ID;
 function MessageItemComponent_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 21);
 } if (rf & 2) {
@@ -106,7 +110,7 @@ function MessageItemComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("in-progress", ctx_r0.isInProgressAIMessage)("active", !ctx_r0.isInProgressAIMessage && ctx_r0.isAgentRunActive)("complete", !ctx_r0.isInProgressAIMessage && !ctx_r0.isAgentRunActive && ctx_r0.messageStatus === "Complete" && !ctx_r0.IsStoppedRun)("stopped", ctx_r0.IsStoppedRun && ctx_r0.messageStatus !== "Error")("failed", ctx_r0.messageStatus === "Error")("checking", ctx_r0.LivenessState === "checking")("stalled", ctx_r0.LivenessState === "stalled");
+    i0.ɵɵclassProp("in-progress", ctx_r0.isInProgressAIMessage)("active", !ctx_r0.isInProgressAIMessage && (ctx_r0.isAgentRunActive || ctx_r0.HasActiveWorkflowTasks))("complete", !ctx_r0.isInProgressAIMessage && !ctx_r0.isAgentRunActive && !ctx_r0.HasActiveWorkflowTasks && ctx_r0.messageStatus === "Complete" && !ctx_r0.IsStoppedRun)("stopped", ctx_r0.IsStoppedRun && ctx_r0.messageStatus !== "Error")("failed", ctx_r0.messageStatus === "Error")("checking", ctx_r0.LivenessState === "checking")("stalled", ctx_r0.LivenessState === "stalled");
     i0.ɵɵproperty("title", ctx_r0.LivenessState === "stalled" ? "No progress reported for several minutes" : ctx_r0.LivenessState === "checking" ? "No recent progress \u2014 re-checking" : "");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.LivenessState !== "live" ? "fa-exclamation-triangle" : ctx_r0.IsStoppedRun ? "fa-stop" : "fa-clock");
@@ -224,14 +228,39 @@ function MessageItemComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r0.hasRatings() ? 2 : -1);
 } }
-function MessageItemComponent_Conditional_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 51);
-    i0.ɵɵtext(1, "(edited)");
+function MessageItemComponent_Conditional_19_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 61);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Conditional_0_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.ScrollToOriginatingWorkflow($event)); });
+    i0.ɵɵelementStart(1, "span", 62);
+    i0.ɵɵelement(2, "i", 63);
+    i0.ɵɵelementStart(3, "span", 64);
+    i0.ɵɵtext(4, "Completed workflow");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 65);
+    i0.ɵɵtext(6, "\u00B7");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 66);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "span", 67)(10, "span");
+    i0.ɵɵtext(11, "View workflow");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(12, "i", 68);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(ctx_r0.OriginatingWorkflowTask.Name);
 } }
 function MessageItemComponent_Conditional_19_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 52);
-    i0.ɵɵelement(1, "i", 58);
+    i0.ɵɵelementStart(0, "span", 52);
+    i0.ɵɵtext(1, "(edited)");
+    i0.ɵɵelementEnd();
+} }
+function MessageItemComponent_Conditional_19_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 53);
+    i0.ɵɵelement(1, "i", 69);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -239,156 +268,545 @@ function MessageItemComponent_Conditional_19_Conditional_3_Template(rf, ctx) { i
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r0.StoppedLineText);
 } }
-function MessageItemComponent_Conditional_19_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 53)(1, "button", 59);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Conditional_4_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnContinueClick()); });
-    i0.ɵɵelement(2, "i", 60);
+function MessageItemComponent_Conditional_19_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 54)(1, "button", 70);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Conditional_5_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnContinueClick()); });
+    i0.ɵɵelement(2, "i", 71);
     i0.ɵɵtext(3, " Continue ");
     i0.ɵɵelementEnd()();
 } }
-function MessageItemComponent_Conditional_19_Conditional_5_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function MessageItemComponent_Conditional_19_Conditional_6_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function MessageItemComponent_Conditional_19_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, MessageItemComponent_Conditional_19_Conditional_5_ng_container_0_Template, 1, 0, "ng-container", 61);
+function MessageItemComponent_Conditional_19_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MessageItemComponent_Conditional_19_Conditional_6_ng_container_0_Template, 1, 0, "ng-container", 72);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.messageExtraTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c0, ctx_r0.message, ctx_r0.message));
 } }
-function MessageItemComponent_Conditional_19_Conditional_6_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 64);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Conditional_6_For_2_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r10); const attachment_r11 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAttachmentClick(attachment_r11)); });
-    i0.ɵɵelement(1, "img", 65);
-    i0.ɵɵelementStart(2, "div", 66);
-    i0.ɵɵelement(3, "i", 67);
+function MessageItemComponent_Conditional_19_Conditional_7_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 75);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Conditional_7_For_2_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const attachment_r13 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAttachmentClick(attachment_r13)); });
+    i0.ɵɵelement(1, "img", 76);
+    i0.ɵɵelementStart(2, "div", 77);
+    i0.ɵɵelement(3, "i", 78);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const attachment_r11 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("title", attachment_r11.fileName || "Image attachment");
+    const attachment_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", attachment_r13.fileName || "Image attachment");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("src", attachment_r11.thumbnailUrl || attachment_r11.contentUrl, i0.ɵɵsanitizeUrl)("alt", attachment_r11.fileName || "Image attachment");
+    i0.ɵɵproperty("src", attachment_r13.thumbnailUrl || attachment_r13.contentUrl, i0.ɵɵsanitizeUrl)("alt", attachment_r13.fileName || "Image attachment");
 } }
-function MessageItemComponent_Conditional_19_Conditional_6_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 68);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Conditional_6_For_2_Conditional_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const attachment_r11 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAttachmentClick(attachment_r11)); });
-    i0.ɵɵelementStart(1, "div", 69);
+function MessageItemComponent_Conditional_19_Conditional_7_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 79);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Conditional_7_For_2_Conditional_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const attachment_r13 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAttachmentClick(attachment_r13)); });
+    i0.ɵɵelementStart(1, "div", 80);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 70)(4, "span", 71);
+    i0.ɵɵelementStart(3, "div", 81)(4, "span", 82);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 72);
+    i0.ɵɵelementStart(6, "span", 83);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const attachment_r11 = i0.ɵɵnextContext().$implicit;
+    const attachment_r13 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("is-artifact", !!attachment_r11.artifactTypeName);
-    i0.ɵɵproperty("title", attachment_r11.fileName || "File");
+    i0.ɵɵclassProp("is-artifact", !!attachment_r13.artifactTypeName);
+    i0.ɵɵproperty("title", attachment_r13.fileName || "File");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.badgeTextFor(attachment_r11));
+    i0.ɵɵtextInterpolate(ctx_r0.badgeTextFor(attachment_r13));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(attachment_r11.fileName || "File");
+    i0.ɵɵtextInterpolate(attachment_r13.fileName || "File");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.formatFileSize(attachment_r11.sizeBytes));
+    i0.ɵɵtextInterpolate(ctx_r0.formatFileSize(attachment_r13.sizeBytes));
 } }
-function MessageItemComponent_Conditional_19_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MessageItemComponent_Conditional_19_Conditional_6_For_2_Conditional_0_Template, 4, 3, "div", 62)(1, MessageItemComponent_Conditional_19_Conditional_6_For_2_Conditional_1_Template, 8, 6, "div", 63);
+function MessageItemComponent_Conditional_19_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MessageItemComponent_Conditional_19_Conditional_7_For_2_Conditional_0_Template, 4, 3, "div", 73)(1, MessageItemComponent_Conditional_19_Conditional_7_For_2_Conditional_1_Template, 8, 6, "div", 74);
 } if (rf & 2) {
-    const attachment_r11 = ctx.$implicit;
-    i0.ɵɵconditional(attachment_r11.type === "Image" ? 0 : 1);
+    const attachment_r13 = ctx.$implicit;
+    i0.ɵɵconditional(attachment_r13.type === "Image" ? 0 : 1);
 } }
-function MessageItemComponent_Conditional_19_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵrepeaterCreate(1, MessageItemComponent_Conditional_19_Conditional_6_For_2_Template, 2, 1, null, null, _forTrack2);
+function MessageItemComponent_Conditional_19_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55);
+    i0.ɵɵrepeaterCreate(1, MessageItemComponent_Conditional_19_Conditional_7_For_2_Template, 2, 1, null, null, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.attachments);
 } }
-function MessageItemComponent_Conditional_19_For_8_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 73)(1, "mj-artifact-message-card", 74);
-    i0.ɵɵlistener("actionPerformed", function MessageItemComponent_Conditional_19_For_8_Template_mj_artifact_message_card_actionPerformed_1_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onArtifactActionPerformed($event)); });
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 88);
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 89);
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 90);
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 91);
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Running ");
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Completed ");
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.WorkflowStatus, " ");
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 97);
+    i0.ɵɵtext(1, "\u00B7");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 106);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ctx_r0.WorkflowSkippedStepCount, " skipped (conditional)");
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 107);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Conditional_8_Conditional_25_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OpenTaskGraphPanel($event)); });
+    i0.ɵɵelement(1, "i", 108);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Task Graph");
+    i0.ɵɵelementEnd()();
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 109);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Conditional_8_Conditional_30_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.ToggleWorkflowStepsExpanded($event)); });
+    i0.ɵɵelementStart(1, "span", 110);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "i", 111);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("title", ctx_r0.IsWorkflowStepsExpanded ? "Collapse workflow steps" : "Expand workflow steps");
+    i0.ɵɵattribute("aria-expanded", ctx_r0.IsWorkflowStepsExpanded);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.IsWorkflowStepsExpanded ? "Collapse" : "Expand");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("rotated", ctx_r0.IsWorkflowStepsExpanded);
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 116);
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 117);
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 118);
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 119);
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 91);
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 120);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ɵ$index_272_r19 = i0.ɵɵnextContext().$index;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ɵ$index_272_r19 + 1);
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 132);
+} if (rf & 2) {
+    const step_r20 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassProp("is-complete", step_r20.Status === "Complete");
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 126);
+    i0.ɵɵelement(1, "i", 133);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const step_r20 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(step_r20.Agent);
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 134);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const step_r20 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassProp("is-skipped", step_r20.Status === "Skipped");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx);
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 135);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_18_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r21); const step_r20 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OpenWorkflowStepAgentRun(step_r20, $event)); });
+    i0.ɵɵelement(1, "i", 136);
+    i0.ɵɵelementEnd();
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 137);
+} if (rf & 2) {
+    const step_r20 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("rotated", ctx_r0.IsWorkflowStepExpanded(step_r20.ID));
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 131);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx, " ");
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 113)(1, "div", 114)(2, "div", 115);
+    i0.ɵɵconditionalCreate(3, MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_3_Template, 1, 0, "i", 116)(4, MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_4_Template, 1, 0, "i", 117)(5, MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_5_Template, 1, 0, "i", 118)(6, MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_6_Template, 1, 0, "i", 119)(7, MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_7_Template, 1, 0, "i", 91)(8, MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_8_Template, 2, 1, "span", 120);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(9, MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_9_Template, 1, 2, "div", 121);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "div", 122);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Template_div_click_10_listener() { const step_r20 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.ToggleWorkflowStepExpand(step_r20.ID)); });
+    i0.ɵɵelementStart(11, "div", 123)(12, "div", 124)(13, "span", 125);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(15, MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_15_Template, 4, 1, "span", 126);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "div", 127);
+    i0.ɵɵconditionalCreate(17, MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_17_Template, 2, 3, "span", 128);
+    i0.ɵɵconditionalCreate(18, MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_18_Template, 2, 0, "button", 129);
+    i0.ɵɵconditionalCreate(19, MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_19_Template, 1, 2, "i", 130);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(20, MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Conditional_20_Template, 2, 1, "div", 131);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    let tmp_21_0;
+    let tmp_24_0;
+    const step_r20 = ctx.$implicit;
+    const ɵ$index_272_r19 = ctx.$index;
+    const ɵ$count_272_r22 = ctx.$count;
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassMap("step-status-" + (step_r20.Status || "Pending").toLowerCase().replace(" ", "-"));
+    i0.ɵɵclassProp("is-expanded", ctx_r0.IsWorkflowStepExpanded(step_r20.ID));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(step_r20.Status === "In Progress" ? 3 : step_r20.Status === "Complete" ? 4 : step_r20.Status === "Failed" ? 5 : step_r20.Status === "Skipped" ? 6 : step_r20.Status === "Cancelled" ? 7 : 8);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(!(ɵ$index_272_r19 === ɵ$count_272_r22 - 1) ? 9 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(step_r20.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(step_r20.Agent ? 15 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((tmp_21_0 = ctx_r0.FormatWorkflowStepDuration(step_r20)) ? 17 : -1, tmp_21_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(step_r20.AgentRunID ? 18 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.GetWorkflowStepSummary(step_r20) ? 19 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_24_0 = ctx_r0.IsWorkflowStepExpanded(step_r20.ID) && ctx_r0.GetWorkflowStepSummary(step_r20)) ? 20 : -1, tmp_24_0);
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 105);
+    i0.ɵɵrepeaterCreate(1, MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_For_2_Template, 21, 12, "div", 112, _forTrack2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.WorkflowSteps);
+} }
+function MessageItemComponent_Conditional_19_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 84)(1, "div", 85);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Conditional_8_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.ToggleWorkflowStepsExpanded($event)); });
+    i0.ɵɵelementStart(2, "div", 86)(3, "div", 87);
+    i0.ɵɵconditionalCreate(4, MessageItemComponent_Conditional_19_Conditional_8_Conditional_4_Template, 1, 0, "i", 88)(5, MessageItemComponent_Conditional_19_Conditional_8_Conditional_5_Template, 1, 0, "i", 89)(6, MessageItemComponent_Conditional_19_Conditional_8_Conditional_6_Template, 1, 0, "i", 90)(7, MessageItemComponent_Conditional_19_Conditional_8_Conditional_7_Template, 1, 0, "i", 91);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 92)(9, "div", 93)(10, "span", 94);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "span", 95);
+    i0.ɵɵconditionalCreate(13, MessageItemComponent_Conditional_19_Conditional_8_Conditional_13_Template, 1, 0)(14, MessageItemComponent_Conditional_19_Conditional_8_Conditional_14_Template, 1, 0)(15, MessageItemComponent_Conditional_19_Conditional_8_Conditional_15_Template, 1, 1);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "div", 96)(17, "span");
+    i0.ɵɵtext(18);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(19, MessageItemComponent_Conditional_19_Conditional_8_Conditional_19_Template, 4, 1);
+    i0.ɵɵelementStart(20, "span", 97);
+    i0.ɵɵtext(21, "\u00B7");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "span");
+    i0.ɵɵtext(23);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(24, "div", 98);
+    i0.ɵɵconditionalCreate(25, MessageItemComponent_Conditional_19_Conditional_8_Conditional_25_Template, 4, 0, "button", 99);
+    i0.ɵɵelementStart(26, "span", 100);
+    i0.ɵɵelement(27, "i", 101);
+    i0.ɵɵelementStart(28, "span");
+    i0.ɵɵtext(29);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(30, MessageItemComponent_Conditional_19_Conditional_8_Conditional_30_Template, 4, 5, "button", 102);
     i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(31, "div", 103);
+    i0.ɵɵelement(32, "div", 104);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(33, MessageItemComponent_Conditional_19_Conditional_8_Conditional_33_Template, 3, 0, "div", 105);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const a_r14 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("system-artifact", a_r14.artifact.Visibility === "System Only");
+    i0.ɵɵclassMap("workflow-status-" + ctx_r0.WorkflowStatus.toLowerCase());
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("is-collapsible", ctx_r0.WorkflowStatus !== "Running");
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.WorkflowStatus === "Running" ? 4 : ctx_r0.WorkflowStatus === "Complete" ? 5 : ctx_r0.WorkflowStatus === "Failed" ? 6 : 7);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r0.WorkflowTitle);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap("badge-" + ctx_r0.WorkflowStatus.toLowerCase());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.WorkflowStatus === "Running" ? 13 : ctx_r0.WorkflowStatus === "Complete" ? 14 : 15);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate3("", ctx_r0.WorkflowCompletedStepCount, " of ", ctx_r0.WorkflowSteps.length, " ", ctx_r0.WorkflowSteps.length === 1 ? "step" : "steps", " complete");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.WorkflowSkippedStepCount > 0 ? 19 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("", ctx_r0.WorkflowProgressPercent, "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.WorkflowParentTaskID ? 25 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.WorkflowDurationDisplay);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.WorkflowStatus !== "Running" ? 30 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-valuenow", ctx_r0.WorkflowProgressPercent);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("artifactId", a_r14.artifact.ID)("artifact", a_r14.artifact)("artifactVersion", a_r14.version)("currentUser", ctx_r0.currentUser);
+    i0.ɵɵstyleProp("width", ctx_r0.WorkflowProgressPercent, "%");
+    i0.ɵɵclassProp("is-running", ctx_r0.WorkflowStatus === "Running");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.WorkflowStatus === "Running" || ctx_r0.IsWorkflowStepsExpanded ? 33 : -1);
 } }
-function MessageItemComponent_Conditional_19_For_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 73)(1, "div", 75);
-    i0.ɵɵelement(2, "mj-loading", 76);
+function MessageItemComponent_Conditional_19_Conditional_9_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 138)(1, "mj-artifact-message-card", 139);
+    i0.ɵɵlistener("actionPerformed", function MessageItemComponent_Conditional_19_Conditional_9_For_1_Template_mj_artifact_message_card_actionPerformed_1_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onArtifactActionPerformed($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const pending_r15 = ctx.$implicit;
+    const a_r24 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("system-artifact", a_r24.artifact.Visibility === "System Only");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("artifactId", a_r24.artifact.ID)("artifact", a_r24.artifact)("artifactVersion", a_r24.version)("currentUser", ctx_r0.currentUser);
+} }
+function MessageItemComponent_Conditional_19_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, MessageItemComponent_Conditional_19_Conditional_9_For_1_Template, 2, 6, "div", 58, _forTrack3);
+} if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("system-artifact", pending_r15.visibility === "System Only");
+    i0.ɵɵrepeater(ctx_r0.displayArtifacts);
+} }
+function MessageItemComponent_Conditional_19_Conditional_10_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 152);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const a_r26 = ctx.$implicit;
+    const ɵ$index_362_r27 = ctx.$index;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("#", ɵ$index_362_r27 + 1, " ", (a_r26.version == null ? null : a_r26.version.Name) || a_r26.artifact.Name);
+} }
+function MessageItemComponent_Conditional_19_Conditional_10_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 146);
+    i0.ɵɵrepeaterCreate(1, MessageItemComponent_Conditional_19_Conditional_10_Conditional_9_For_2_Template, 2, 2, "span", 152, _forTrack3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.SupportingArtifacts);
+} }
+function MessageItemComponent_Conditional_19_Conditional_10_Conditional_14_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 154)(1, "span", 155);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "mj-artifact-message-card", 139);
+    i0.ɵɵlistener("actionPerformed", function MessageItemComponent_Conditional_19_Conditional_10_Conditional_14_For_2_Template_mj_artifact_message_card_actionPerformed_3_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.onArtifactActionPerformed($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const a_r29 = ctx.$implicit;
+    const ɵ$index_376_r30 = ctx.$index;
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("system-artifact", a_r29.artifact.Visibility === "System Only");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", "Supporting artifact #" + (ɵ$index_376_r30 + 1));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("#", ɵ$index_376_r30 + 1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("artifactId", a_r29.artifact.ID)("artifact", a_r29.artifact)("artifactVersion", a_r29.version)("currentUser", ctx_r0.currentUser);
+} }
+function MessageItemComponent_Conditional_19_Conditional_10_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 150);
+    i0.ɵɵrepeaterCreate(1, MessageItemComponent_Conditional_19_Conditional_10_Conditional_14_For_2_Template, 4, 8, "div", 153, _forTrack3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.SupportingArtifacts);
+} }
+function MessageItemComponent_Conditional_19_Conditional_10_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 151)(1, "div", 156);
+    i0.ɵɵelement(2, "i", 157);
+    i0.ɵɵelementStart(3, "span", 158);
+    i0.ɵɵtext(4, "Final Artifact");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 159);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 160)(8, "mj-artifact-message-card", 139);
+    i0.ɵɵlistener("actionPerformed", function MessageItemComponent_Conditional_19_Conditional_10_Conditional_15_Template_mj_artifact_message_card_actionPerformed_8_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onArtifactActionPerformed($event)); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const primary_r32 = ctx;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate1("#", ctx_r0.displayArtifacts.length);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("system-artifact", primary_r32.artifact.Visibility === "System Only");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("artifactId", primary_r32.artifact.ID)("artifact", primary_r32.artifact)("artifactVersion", primary_r32.version)("currentUser", ctx_r0.currentUser);
+} }
+function MessageItemComponent_Conditional_19_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 57)(1, "div", 140)(2, "button", 141);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Conditional_10_Template_button_click_2_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.ToggleSupportingArtifacts($event)); });
+    i0.ɵɵelementStart(3, "span", 142);
+    i0.ɵɵelement(4, "i", 143);
+    i0.ɵɵelementStart(5, "span", 144);
+    i0.ɵɵtext(6, "Supporting Artifacts");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 145);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(9, MessageItemComponent_Conditional_19_Conditional_10_Conditional_9_Template, 3, 0, "span", 146);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span", 147)(11, "span", 148);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(13, "i", 149);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(14, MessageItemComponent_Conditional_19_Conditional_10_Conditional_14_Template, 3, 0, "div", 150);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(15, MessageItemComponent_Conditional_19_Conditional_10_Conditional_15_Template, 9, 7, "div", 151);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_9_0;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("is-collapsed", !ctx_r0.IsSupportingArtifactsExpanded);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-expanded", ctx_r0.IsSupportingArtifactsExpanded);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r0.SupportingArtifacts.length);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r0.IsSupportingArtifactsExpanded ? 9 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.IsSupportingArtifactsExpanded ? "Collapse" : "Expand");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("rotated", ctx_r0.IsSupportingArtifactsExpanded);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.IsSupportingArtifactsExpanded ? 14 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_9_0 = ctx_r0.PrimaryArtifact) ? 15 : -1, tmp_9_0);
+} }
+function MessageItemComponent_Conditional_19_For_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 138)(1, "div", 161);
+    i0.ɵɵelement(2, "mj-loading", 162);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const pending_r33 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("system-artifact", pending_r33.visibility === "System Only");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("text", ctx_r0.pendingLabel(pending_r15));
+    i0.ɵɵproperty("text", ctx_r0.pendingLabel(pending_r33));
 } }
-function MessageItemComponent_Conditional_19_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-dynamic-form", 77);
-    i0.ɵɵlistener("FormSubmitted", function MessageItemComponent_Conditional_19_Conditional_11_Template_mj_dynamic_form_FormSubmitted_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onFormSubmitted($event)); });
+function MessageItemComponent_Conditional_19_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dynamic-form", 163);
+    i0.ɵɵlistener("FormSubmitted", function MessageItemComponent_Conditional_19_Conditional_13_Template_mj_dynamic_form_FormSubmitted_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onFormSubmitted($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("FormDefinition", ctx_r0.responseForm)("Disabled", ctx_r0.isProcessing);
 } }
-function MessageItemComponent_Conditional_19_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-actionable-commands", 78);
-    i0.ɵɵlistener("commandExecuted", function MessageItemComponent_Conditional_19_Conditional_12_Template_mj_actionable_commands_commandExecuted_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onCommandExecuted($event)); });
+function MessageItemComponent_Conditional_19_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-actionable-commands", 164);
+    i0.ɵɵlistener("commandExecuted", function MessageItemComponent_Conditional_19_Conditional_14_Template_mj_actionable_commands_commandExecuted_0_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onCommandExecuted($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("commands", ctx_r0.actionableCommands)("disabled", ctx_r0.isProcessing)("isLastMessage", ctx_r0.isLastMessageInConversation)("isConversationOwner", ctx_r0.isConversationOwner);
 } }
 function MessageItemComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵelement(1, "mj-markdown", 50);
-    i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_19_Conditional_2_Template, 2, 0, "span", 51);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, MessageItemComponent_Conditional_19_Conditional_3_Template, 3, 1, "div", 52);
-    i0.ɵɵconditionalCreate(4, MessageItemComponent_Conditional_19_Conditional_4_Template, 4, 0, "div", 53);
-    i0.ɵɵconditionalCreate(5, MessageItemComponent_Conditional_19_Conditional_5_Template, 1, 5, "ng-container");
-    i0.ɵɵconditionalCreate(6, MessageItemComponent_Conditional_19_Conditional_6_Template, 3, 0, "div", 54);
-    i0.ɵɵrepeaterCreate(7, MessageItemComponent_Conditional_19_For_8_Template, 2, 6, "div", 55, _forTrack0);
-    i0.ɵɵrepeaterCreate(9, MessageItemComponent_Conditional_19_For_10_Template, 3, 3, "div", 55, _forTrack1);
-    i0.ɵɵconditionalCreate(11, MessageItemComponent_Conditional_19_Conditional_11_Template, 1, 2, "mj-dynamic-form", 56);
-    i0.ɵɵconditionalCreate(12, MessageItemComponent_Conditional_19_Conditional_12_Template, 1, 4, "mj-actionable-commands", 57);
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, MessageItemComponent_Conditional_19_Conditional_0_Template, 13, 1, "button", 49);
+    i0.ɵɵelementStart(1, "div", 50)(2, "mj-markdown", 51);
+    i0.ɵɵlistener("ImageClicked", function MessageItemComponent_Conditional_19_Template_mj_markdown_ImageClicked_2_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnMarkdownImageClicked($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, MessageItemComponent_Conditional_19_Conditional_3_Template, 2, 0, "span", 52);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, MessageItemComponent_Conditional_19_Conditional_4_Template, 3, 1, "div", 53);
+    i0.ɵɵconditionalCreate(5, MessageItemComponent_Conditional_19_Conditional_5_Template, 4, 0, "div", 54);
+    i0.ɵɵconditionalCreate(6, MessageItemComponent_Conditional_19_Conditional_6_Template, 1, 5, "ng-container");
+    i0.ɵɵconditionalCreate(7, MessageItemComponent_Conditional_19_Conditional_7_Template, 3, 0, "div", 55);
+    i0.ɵɵconditionalCreate(8, MessageItemComponent_Conditional_19_Conditional_8_Template, 34, 23, "div", 56);
+    i0.ɵɵconditionalCreate(9, MessageItemComponent_Conditional_19_Conditional_9_Template, 2, 0)(10, MessageItemComponent_Conditional_19_Conditional_10_Template, 16, 10, "div", 57);
+    i0.ɵɵrepeaterCreate(11, MessageItemComponent_Conditional_19_For_12_Template, 3, 3, "div", 58, _forTrack0);
+    i0.ɵɵconditionalCreate(13, MessageItemComponent_Conditional_19_Conditional_13_Template, 1, 2, "mj-dynamic-form", 59);
+    i0.ɵɵconditionalCreate(14, MessageItemComponent_Conditional_19_Conditional_14_Template, 1, 4, "mj-actionable-commands", 60);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.OriginatingWorkflowTask ? 0 : -1);
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("data", ctx_r0.displayMessage)("enableCollapsibleHeadings", true);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.isMessageEdited ? 2 : -1);
+    i0.ɵɵconditional(ctx_r0.isMessageEdited ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.StoppedLineText ? 3 : -1);
+    i0.ɵɵconditional(ctx_r0.StoppedLineText ? 4 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.CanContinueStoppedRun ? 4 : -1);
+    i0.ɵɵconditional(ctx_r0.CanContinueStoppedRun ? 5 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.messageExtraTemplate ? 5 : -1);
+    i0.ɵɵconditional(ctx_r0.messageExtraTemplate ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.hasAttachments ? 6 : -1);
+    i0.ɵɵconditional(ctx_r0.hasAttachments ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.displayArtifacts);
+    i0.ɵɵconditional(ctx_r0.WorkflowSteps.length > 0 ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.displayArtifacts.length === 1 ? 9 : ctx_r0.displayArtifacts.length > 1 ? 10 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r0.pendingArtifactPlaceholders);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(!ctx_r0.ReadOnly && ctx_r0.isLastMessageInConversation && ctx_r0.isConversationOwner && ctx_r0.responseForm ? 11 : -1);
+    i0.ɵɵconditional(!ctx_r0.ReadOnly && ctx_r0.isLastMessageInConversation && ctx_r0.isConversationOwner && ctx_r0.responseForm ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r0.ReadOnly && ctx_r0.isLastMessageInConversation && ctx_r0.isConversationOwner && ctx_r0.actionableCommands.length > 0 ? 12 : -1);
+    i0.ɵɵconditional(!ctx_r0.ReadOnly && ctx_r0.isLastMessageInConversation && ctx_r0.isConversationOwner && ctx_r0.actionableCommands.length > 0 ? 14 : -1);
 } }
 function MessageItemComponent_Conditional_20_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 85);
+    i0.ɵɵelementStart(0, "span", 171);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -397,24 +815,24 @@ function MessageItemComponent_Conditional_20_Conditional_9_Template(rf, ctx) { i
     i0.ɵɵtextInterpolate(ctx_r0.EditNote);
 } }
 function MessageItemComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "textarea", 79);
-    i0.ɵɵtwoWayListener("ngModelChange", function MessageItemComponent_Conditional_20_Template_textarea_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.editedText, $event) || (ctx_r0.editedText = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("keydown", function MessageItemComponent_Conditional_20_Template_textarea_keydown_1_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onEditKeydown($event)); });
+    const _r36 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "textarea", 165);
+    i0.ɵɵtwoWayListener("ngModelChange", function MessageItemComponent_Conditional_20_Template_textarea_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.editedText, $event) || (ctx_r0.editedText = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown", function MessageItemComponent_Conditional_20_Template_textarea_keydown_1_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onEditKeydown($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 80)(3, "button", 81);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_20_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SaveEdit()); });
-    i0.ɵɵelement(4, "i", 82);
+    i0.ɵɵelementStart(2, "div", 166)(3, "button", 167);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_20_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r36); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SaveEdit()); });
+    i0.ɵɵelement(4, "i", 168);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 83);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_20_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.CancelEditing()); });
-    i0.ɵɵelement(7, "i", 84);
+    i0.ɵɵelementStart(6, "button", 169);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_20_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r36); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.CancelEditing()); });
+    i0.ɵɵelement(7, "i", 170);
     i0.ɵɵtext(8, " Cancel ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, MessageItemComponent_Conditional_20_Conditional_9_Template, 2, 1, "span", 85);
+    i0.ɵɵconditionalCreate(9, MessageItemComponent_Conditional_20_Conditional_9_Template, 2, 1, "span", 171);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 86);
+    i0.ɵɵelementStart(10, "div", 172);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -431,101 +849,101 @@ function MessageItemComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(ctx_r0.EditHint);
 } }
 function MessageItemComponent_Conditional_21_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 89);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_21_For_2_Conditional_0_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r19); const chip_r20 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnForkChipClick(chip_r20, $event)); });
-    i0.ɵɵelement(1, "i", 82);
-    i0.ɵɵelementStart(2, "span", 90);
+    const _r37 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 175);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_21_For_2_Conditional_0_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r37); const chip_r38 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnForkChipClick(chip_r38, $event)); });
+    i0.ɵɵelement(1, "i", 168);
+    i0.ɵɵelementStart(2, "span", 176);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 91);
+    i0.ɵɵelementStart(4, "span", 177);
     i0.ɵɵtext(5, "\u00B7 original");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const chip_r20 = i0.ɵɵnextContext().$implicit;
+    const chip_r38 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵattribute("aria-label", ctx_r0.ChipAriaLabel(chip_r20));
+    i0.ɵɵattribute("aria-label", ctx_r0.ChipAriaLabel(chip_r38));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap("fork-chip-icon " + ctx_r0.ChipIcon(chip_r20));
+    i0.ɵɵclassMap("fork-chip-icon " + ctx_r0.ChipIcon(chip_r38));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(chip_r20.DisplayName);
+    i0.ɵɵtextInterpolate(chip_r38.DisplayName);
 } }
 function MessageItemComponent_Conditional_21_For_2_Conditional_1_Conditional_2_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 96);
+    i0.ɵɵelement(0, "img", 182);
 } if (rf & 2) {
-    const avatar_r22 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("src", avatar_r22.ImageURL, i0.ɵɵsanitizeUrl);
+    const avatar_r40 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("src", avatar_r40.ImageURL, i0.ɵɵsanitizeUrl);
 } }
 function MessageItemComponent_Conditional_21_For_2_Conditional_1_Conditional_2_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
-    const avatar_r22 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassMap(avatar_r22.IconClass);
+    const avatar_r40 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap(avatar_r40.IconClass);
 } }
 function MessageItemComponent_Conditional_21_For_2_Conditional_1_Conditional_2_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const avatar_r22 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵtextInterpolate1(" ", avatar_r22.Initials, " ");
+    const avatar_r40 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" ", avatar_r40.Initials, " ");
 } }
 function MessageItemComponent_Conditional_21_For_2_Conditional_1_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 95);
-    i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_21_For_2_Conditional_1_Conditional_2_For_2_Conditional_1_Template, 1, 1, "img", 96)(2, MessageItemComponent_Conditional_21_For_2_Conditional_1_Conditional_2_For_2_Conditional_2_Template, 1, 2, "i", 22)(3, MessageItemComponent_Conditional_21_For_2_Conditional_1_Conditional_2_For_2_Conditional_3_Template, 1, 1);
+    i0.ɵɵelementStart(0, "span", 181);
+    i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_21_For_2_Conditional_1_Conditional_2_For_2_Conditional_1_Template, 1, 1, "img", 182)(2, MessageItemComponent_Conditional_21_For_2_Conditional_1_Conditional_2_For_2_Conditional_2_Template, 1, 2, "i", 22)(3, MessageItemComponent_Conditional_21_For_2_Conditional_1_Conditional_2_For_2_Conditional_3_Template, 1, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const avatar_r22 = ctx.$implicit;
-    i0.ɵɵproperty("title", avatar_r22.Label);
+    const avatar_r40 = ctx.$implicit;
+    i0.ɵɵproperty("title", avatar_r40.Label);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(avatar_r22.ImageURL ? 1 : avatar_r22.IconClass ? 2 : 3);
+    i0.ɵɵconditional(avatar_r40.ImageURL ? 1 : avatar_r40.IconClass ? 2 : 3);
 } }
 function MessageItemComponent_Conditional_21_For_2_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 93);
-    i0.ɵɵrepeaterCreate(1, MessageItemComponent_Conditional_21_For_2_Conditional_1_Conditional_2_For_2_Template, 4, 2, "span", 95, _forTrack4);
+    i0.ɵɵelementStart(0, "span", 179);
+    i0.ɵɵrepeaterCreate(1, MessageItemComponent_Conditional_21_For_2_Conditional_1_Conditional_2_For_2_Template, 4, 2, "span", 181, _forTrack5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const chip_r20 = i0.ɵɵnextContext(2).$implicit;
+    const chip_r38 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(chip_r20.Avatars);
+    i0.ɵɵrepeater(chip_r38.Avatars);
 } }
 function MessageItemComponent_Conditional_21_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 92);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_21_For_2_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r21); const chip_r20 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnForkChipClick(chip_r20, $event)); });
-    i0.ɵɵelement(1, "i", 82);
-    i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_21_For_2_Conditional_1_Conditional_2_Template, 3, 0, "span", 93);
-    i0.ɵɵelementStart(3, "span", 94);
+    const _r39 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 178);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_21_For_2_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r39); const chip_r38 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnForkChipClick(chip_r38, $event)); });
+    i0.ɵɵelement(1, "i", 168);
+    i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_21_For_2_Conditional_1_Conditional_2_Template, 3, 0, "span", 179);
+    i0.ɵɵelementStart(3, "span", 180);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 90);
+    i0.ɵɵelementStart(5, "span", 176);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 91);
+    i0.ɵɵelementStart(7, "span", 177);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const chip_r20 = i0.ɵɵnextContext().$implicit;
+    const chip_r38 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵattribute("data-kind", chip_r20.Kind)("aria-label", ctx_r0.ChipAriaLabel(chip_r20));
+    i0.ɵɵattribute("data-kind", chip_r38.Kind)("aria-label", ctx_r0.ChipAriaLabel(chip_r38));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap("fork-chip-icon " + ctx_r0.ChipIcon(chip_r20));
+    i0.ɵɵclassMap("fork-chip-icon " + ctx_r0.ChipIcon(chip_r38));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(chip_r20.Avatars.length > 0 ? 2 : -1);
+    i0.ɵɵconditional(chip_r38.Avatars.length > 0 ? 2 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(chip_r20.MessageLabel);
+    i0.ɵɵtextInterpolate(chip_r38.MessageLabel);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(chip_r20.DisplayName);
+    i0.ɵɵtextInterpolate(chip_r38.DisplayName);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("\u00B7 ", chip_r20.ActivityLabel);
+    i0.ɵɵtextInterpolate1("\u00B7 ", chip_r38.ActivityLabel);
 } }
 function MessageItemComponent_Conditional_21_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MessageItemComponent_Conditional_21_For_2_Conditional_0_Template, 6, 4, "button", 87)(1, MessageItemComponent_Conditional_21_For_2_Conditional_1_Template, 9, 8, "button", 88);
+    i0.ɵɵconditionalCreate(0, MessageItemComponent_Conditional_21_For_2_Conditional_0_Template, 6, 4, "button", 173)(1, MessageItemComponent_Conditional_21_For_2_Conditional_1_Template, 9, 8, "button", 174);
 } if (rf & 2) {
-    const chip_r20 = ctx.$implicit;
-    i0.ɵɵconditional(chip_r20.Kind === "Original" ? 0 : 1);
+    const chip_r38 = ctx.$implicit;
+    i0.ɵɵconditional(chip_r38.Kind === "Original" ? 0 : 1);
 } }
 function MessageItemComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵrepeaterCreate(1, MessageItemComponent_Conditional_21_For_2_Template, 2, 1, null, null, _forTrack3);
+    i0.ɵɵrepeaterCreate(1, MessageItemComponent_Conditional_21_For_2_Template, 2, 1, null, null, _forTrack4);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -533,16 +951,16 @@ function MessageItemComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeater(ctx_r0.ForkChips);
 } }
 function MessageItemComponent_Conditional_22_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 99);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_22_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onDeleteClick()); });
-    i0.ɵɵelement(1, "i", 100);
+    const _r41 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 185);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_22_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r41); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onDeleteClick()); });
+    i0.ɵɵelement(1, "i", 186);
     i0.ɵɵelementEnd();
 } }
 function MessageItemComponent_Conditional_22_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 102);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_22_Conditional_2_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnRegenerateClick()); });
+    const _r42 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 188);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_22_Conditional_2_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r42); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnRegenerateClick()); });
     i0.ɵɵelement(1, "i", 45);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Regenerate");
@@ -552,16 +970,16 @@ function MessageItemComponent_Conditional_22_Conditional_2_Conditional_1_Templat
     i0.ɵɵproperty("title", ctx_r0.RegenerateTitle);
 } }
 function MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-conversation-message-rating", 103);
+    i0.ɵɵelement(0, "mj-conversation-message-rating", 189);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("conversationDetailId", ctx_r0.message.ID)("currentUser", ctx_r0.currentUser)("ratingEntityName", ctx_r0.message.EntityInfo.Name || "MJ: Conversation Details")("ratingsData", ctx_r0.ratings)("canEdit", ctx_r0.isConversationOwner && !ctx_r0.ReadOnly);
 } }
 function MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 105);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.PinMessage()); });
-    i0.ɵɵelement(1, "i", 106);
+    const _r43 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 191);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r43); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.PinMessage()); });
+    i0.ɵɵelement(1, "i", 192);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
@@ -569,8 +987,8 @@ function MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Conditi
     i0.ɵɵproperty("title", ctx_r0.message.IsPinned ? "Unpin message" : "Pin message");
 } }
 function MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Conditional_0_Template, 1, 5, "mj-conversation-message-rating", 103);
-    i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Conditional_1_Template, 2, 3, "button", 104);
+    i0.ɵɵconditionalCreate(0, MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Conditional_0_Template, 1, 5, "mj-conversation-message-rating", 189);
+    i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Conditional_1_Template, 2, 3, "button", 190);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional(ctx_r0.showMessageRating ? 0 : -1);
@@ -578,8 +996,8 @@ function MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Templat
     i0.ɵɵconditional(ctx_r0.allowPinning ? 1 : -1);
 } }
 function MessageItemComponent_Conditional_22_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 98);
-    i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_22_Conditional_2_Conditional_1_Template, 4, 1, "button", 101);
+    i0.ɵɵelementStart(0, "div", 184);
+    i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_22_Conditional_2_Conditional_1_Template, 4, 1, "button", 187);
     i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Template, 2, 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -591,8 +1009,8 @@ function MessageItemComponent_Conditional_22_Conditional_2_Template(rf, ctx) { i
 } }
 function MessageItemComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_22_Conditional_1_Template, 2, 0, "button", 97);
-    i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_22_Conditional_2_Template, 3, 2, "div", 98);
+    i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_22_Conditional_1_Template, 2, 0, "button", 183);
+    i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_22_Conditional_2_Template, 3, 2, "div", 184);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -602,10 +1020,10 @@ function MessageItemComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(ctx_r0.isAIMessage && (ctx_r0.messageStatus === "Complete" || ctx_r0.ShowsFooterRegenerate) ? 2 : -1);
 } }
 function MessageItemComponent_Conditional_24_Conditional_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 114)(1, "span", 115);
+    i0.ɵɵelementStart(0, "div", 200)(1, "span", 201);
     i0.ɵɵtext(2, "Steps:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 116);
+    i0.ɵɵelementStart(3, "span", 202);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -614,10 +1032,10 @@ function MessageItemComponent_Conditional_24_Conditional_1_Conditional_15_Templa
     i0.ɵɵtextInterpolate(ctx_r0.agentRunStepCount);
 } }
 function MessageItemComponent_Conditional_24_Conditional_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 114)(1, "span", 115);
+    i0.ɵɵelementStart(0, "div", 200)(1, "span", 201);
     i0.ɵɵtext(2, "Tokens:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 116);
+    i0.ɵɵelementStart(3, "span", 202);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -626,10 +1044,10 @@ function MessageItemComponent_Conditional_24_Conditional_1_Conditional_16_Templa
     i0.ɵɵtextInterpolate(ctx_r0.formatNumber(ctx_r0.agentRunTotalTokens));
 } }
 function MessageItemComponent_Conditional_24_Conditional_1_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 114)(1, "span", 115);
+    i0.ɵɵelementStart(0, "div", 200)(1, "span", 201);
     i0.ɵɵtext(2, "Cost:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 116);
+    i0.ɵɵelementStart(3, "span", 202);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -638,10 +1056,10 @@ function MessageItemComponent_Conditional_24_Conditional_1_Conditional_17_Templa
     i0.ɵɵtextInterpolate1("\\$", ctx_r0.agentRunTotalCost.toFixed(4));
 } }
 function MessageItemComponent_Conditional_24_Conditional_1_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 114)(1, "span", 115);
+    i0.ɵɵelementStart(0, "div", 200)(1, "span", 201);
     i0.ɵɵtext(2, "Status:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 119);
+    i0.ɵɵelementStart(3, "span", 205);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -652,27 +1070,27 @@ function MessageItemComponent_Conditional_24_Conditional_1_Conditional_18_Templa
     i0.ɵɵtextInterpolate1(" ", ctx_r0.agentRun.Status, " ");
 } }
 function MessageItemComponent_Conditional_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 107)(1, "div", 110);
-    i0.ɵɵelement(2, "i", 111);
-    i0.ɵɵelementStart(3, "span")(4, "a", 112);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_24_Conditional_1_Template_a_click_4_listener() { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openAgentRecord()); });
+    const _r44 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 193)(1, "div", 196);
+    i0.ɵɵelement(2, "i", 197);
+    i0.ɵɵelementStart(3, "span")(4, "a", 198);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_24_Conditional_1_Template_a_click_4_listener() { i0.ɵɵrestoreView(_r44); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openAgentRecord()); });
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(6, " Run Details ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 113)(8, "div", 114)(9, "span", 115);
+    i0.ɵɵelementStart(7, "div", 199)(8, "div", 200)(9, "span", 201);
     i0.ɵɵtext(10, "Run ID:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 116)(12, "a", 117);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_24_Conditional_1_Template_a_click_12_listener() { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openAgentRunRecord()); });
+    i0.ɵɵelementStart(11, "span", 202)(12, "a", 203);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_24_Conditional_1_Template_a_click_12_listener() { i0.ɵɵrestoreView(_r44); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openAgentRunRecord()); });
     i0.ɵɵtext(13);
-    i0.ɵɵelement(14, "i", 118);
+    i0.ɵɵelement(14, "i", 204);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(15, MessageItemComponent_Conditional_24_Conditional_1_Conditional_15_Template, 5, 1, "div", 114);
-    i0.ɵɵconditionalCreate(16, MessageItemComponent_Conditional_24_Conditional_1_Conditional_16_Template, 5, 1, "div", 114);
-    i0.ɵɵconditionalCreate(17, MessageItemComponent_Conditional_24_Conditional_1_Conditional_17_Template, 5, 1, "div", 114);
-    i0.ɵɵconditionalCreate(18, MessageItemComponent_Conditional_24_Conditional_1_Conditional_18_Template, 5, 3, "div", 114);
+    i0.ɵɵconditionalCreate(15, MessageItemComponent_Conditional_24_Conditional_1_Conditional_15_Template, 5, 1, "div", 200);
+    i0.ɵɵconditionalCreate(16, MessageItemComponent_Conditional_24_Conditional_1_Conditional_16_Template, 5, 1, "div", 200);
+    i0.ɵɵconditionalCreate(17, MessageItemComponent_Conditional_24_Conditional_1_Conditional_17_Template, 5, 1, "div", 200);
+    i0.ɵɵconditionalCreate(18, MessageItemComponent_Conditional_24_Conditional_1_Conditional_18_Template, 5, 3, "div", 200);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -690,23 +1108,23 @@ function MessageItemComponent_Conditional_24_Conditional_1_Template(rf, ctx) { i
     i0.ɵɵconditional(ctx_r0.agentRun.Status ? 18 : -1);
 } }
 function MessageItemComponent_Conditional_24_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 121);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_24_Conditional_2_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onDeleteClick()); });
-    i0.ɵɵelement(1, "i", 100);
+    const _r45 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 207);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_24_Conditional_2_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r45); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onDeleteClick()); });
+    i0.ɵɵelement(1, "i", 186);
     i0.ɵɵelementEnd();
 } }
 function MessageItemComponent_Conditional_24_Conditional_2_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-conversation-message-rating", 122);
+    i0.ɵɵelement(0, "mj-conversation-message-rating", 208);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("conversationDetailId", ctx_r0.message.ID)("currentUser", ctx_r0.currentUser)("ratingsData", ctx_r0.ratings)("canEdit", ctx_r0.isConversationOwner && !ctx_r0.ReadOnly);
 } }
 function MessageItemComponent_Conditional_24_Conditional_2_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 105);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_24_Conditional_2_Conditional_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.PinMessage()); });
-    i0.ɵɵelement(1, "i", 106);
+    const _r46 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 191);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_24_Conditional_2_Conditional_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r46); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.PinMessage()); });
+    i0.ɵɵelement(1, "i", 192);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
@@ -714,9 +1132,9 @@ function MessageItemComponent_Conditional_24_Conditional_2_Conditional_2_Conditi
     i0.ɵɵproperty("title", ctx_r0.message.IsPinned ? "Unpin message" : "Pin message");
 } }
 function MessageItemComponent_Conditional_24_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 98);
-    i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_24_Conditional_2_Conditional_2_Conditional_1_Template, 1, 4, "mj-conversation-message-rating", 122);
-    i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_24_Conditional_2_Conditional_2_Conditional_2_Template, 2, 3, "button", 104);
+    i0.ɵɵelementStart(0, "div", 184);
+    i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_24_Conditional_2_Conditional_2_Conditional_1_Template, 1, 4, "mj-conversation-message-rating", 208);
+    i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_24_Conditional_2_Conditional_2_Conditional_2_Template, 2, 3, "button", 190);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -726,10 +1144,10 @@ function MessageItemComponent_Conditional_24_Conditional_2_Conditional_2_Templat
     i0.ɵɵconditional(ctx_r0.allowPinning ? 2 : -1);
 } }
 function MessageItemComponent_Conditional_24_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 105);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_24_Conditional_2_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r29); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.PinMessage()); });
-    i0.ɵɵelement(1, "i", 106);
+    const _r47 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 191);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_24_Conditional_2_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r47); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.PinMessage()); });
+    i0.ɵɵelement(1, "i", 192);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -737,9 +1155,9 @@ function MessageItemComponent_Conditional_24_Conditional_2_Conditional_3_Templat
     i0.ɵɵproperty("title", ctx_r0.message.IsPinned ? "Unpin message" : "Pin message");
 } }
 function MessageItemComponent_Conditional_24_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 108);
-    i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_24_Conditional_2_Conditional_1_Template, 2, 0, "button", 120);
-    i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_24_Conditional_2_Conditional_2_Template, 3, 2, "div", 98)(3, MessageItemComponent_Conditional_24_Conditional_2_Conditional_3_Template, 2, 3, "button", 104);
+    i0.ɵɵelementStart(0, "div", 194);
+    i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_24_Conditional_2_Conditional_1_Template, 2, 0, "button", 206);
+    i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_24_Conditional_2_Conditional_2_Template, 3, 2, "div", 184)(3, MessageItemComponent_Conditional_24_Conditional_2_Conditional_3_Template, 2, 3, "button", 190);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -749,32 +1167,32 @@ function MessageItemComponent_Conditional_24_Conditional_2_Template(rf, ctx) { i
     i0.ɵɵconditional(ctx_r0.messageStatus === "Complete" ? 2 : ctx_r0.allowPinning ? 3 : -1);
 } }
 function MessageItemComponent_Conditional_24_Conditional_3_For_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-task-widget", 126);
+    i0.ɵɵelement(0, "mj-task-widget", 212);
 } if (rf & 2) {
-    const task_r30 = ctx.$implicit;
-    i0.ɵɵproperty("task", task_r30)("compact", false)("clickable", false)("showProgress", true)("showDuration", true);
+    const task_r48 = ctx.$implicit;
+    i0.ɵɵproperty("task", task_r48)("compact", false)("clickable", false)("showProgress", true)("showDuration", true);
 } }
 function MessageItemComponent_Conditional_24_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 109)(1, "div", 123);
-    i0.ɵɵelement(2, "i", 124);
+    i0.ɵɵelementStart(0, "div", 195)(1, "div", 209);
+    i0.ɵɵelement(2, "i", 210);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 125);
-    i0.ɵɵrepeaterCreate(6, MessageItemComponent_Conditional_24_Conditional_3_For_7_Template, 1, 5, "mj-task-widget", 126, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(5, "div", 211);
+    i0.ɵɵrepeaterCreate(6, MessageItemComponent_Conditional_24_Conditional_3_For_7_Template, 1, 5, "mj-task-widget", 212, _forTrack2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("Associated Tasks (", ctx_r0.detailTasks.length, ")");
+    i0.ɵɵtextInterpolate1("Associated Tasks (", ctx_r0.WorkflowSteps.length, ")");
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r0.detailTasks);
+    i0.ɵɵrepeater(ctx_r0.WorkflowSteps);
 } }
 function MessageItemComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_24_Conditional_1_Template, 19, 6, "div", 107);
-    i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_24_Conditional_2_Template, 4, 2, "div", 108);
-    i0.ɵɵconditionalCreate(3, MessageItemComponent_Conditional_24_Conditional_3_Template, 8, 1, "div", 109);
+    i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_24_Conditional_1_Template, 19, 6, "div", 193);
+    i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_24_Conditional_2_Template, 4, 2, "div", 194);
+    i0.ɵɵconditionalCreate(3, MessageItemComponent_Conditional_24_Conditional_3_Template, 8, 1, "div", 195);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -783,30 +1201,30 @@ function MessageItemComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r0.isLastMessage ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.detailTasks.length > 0 ? 3 : -1);
+    i0.ɵɵconditional(ctx_r0.WorkflowSteps.length > 0 ? 3 : -1);
 } }
 function MessageItemComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19)(1, "button", 127);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_25_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleReaction("like")); });
-    i0.ɵɵelement(2, "i", 128);
-    i0.ɵɵelementStart(3, "span", 129);
+    const _r49 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19)(1, "button", 213);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_25_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r49); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleReaction("like")); });
+    i0.ɵɵelement(2, "i", 214);
+    i0.ɵɵelementStart(3, "span", 215);
     i0.ɵɵtext(4, "0");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "button", 127);
-    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_25_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleReaction("comment")); });
-    i0.ɵɵelement(6, "i", 130);
-    i0.ɵɵelementStart(7, "span", 129);
+    i0.ɵɵelementStart(5, "button", 213);
+    i0.ɵɵlistener("click", function MessageItemComponent_Conditional_25_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r49); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleReaction("comment")); });
+    i0.ɵɵelement(6, "i", 216);
+    i0.ɵɵelementStart(7, "span", 215);
     i0.ɵɵtext(8, "0");
     i0.ɵɵelementEnd()()();
 } }
 function MessageItemComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵelement(1, "i", 41);
-    i0.ɵɵelementStart(2, "span", 131);
+    i0.ɵɵelementStart(2, "span", 217);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "span", 132);
+    i0.ɵɵelement(4, "span", 218);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -1158,8 +1576,9 @@ export class MessageItemComponent extends BaseAngularComponent {
     /** Hides the response form and actionable commands on this message. */
     ReadOnly = false;
     /**
-     * Whether the Stop control is offered on an in-progress agent reply. A host can turn stopping
-     * off for a surface without making the conversation read-only. Default true.
+     * Whether the Stop control is offered on an in-progress agent reply, and the Continue control on
+     * a stopped one. A host can turn stopping off for a surface without making the conversation
+     * read-only. Default true.
      */
     AllowStopRun = true;
     /**
@@ -1392,6 +1811,21 @@ export class MessageItemComponent extends BaseAngularComponent {
      * its `AfterStopClicked` with the outcome.
      */
     StopRequested = new EventEmitter();
+    /**
+     * Fired when the user clicks the Task Graph button on the inline workflow card to view
+     * the visual `<mj-task-graph-run-view>` flowchart in the conversation's right-side panel.
+     */
+    TaskGraphPanelRequested = new EventEmitter();
+    /** @deprecated Use {@link TaskGraphPanelRequested}. */
+    taskGraphPanelRequested = this.TaskGraphPanelRequested;
+    /**
+     * Fired when the user clicks the Workflow Context Header chip to jump to the originating
+     * workflow message (`message.ParentID`). Allows the virtualized message list / chat area to
+     * materialize off-screen messages before scrolling and highlighting.
+     */
+    ScrollToMessageRequested = new EventEmitter();
+    /** @deprecated Use {@link ScrollToMessageRequested}. */
+    scrollToMessageRequested = this.ScrollToMessageRequested;
     /**
      * True from the moment Stop was clicked until the message leaves In-Progress, so the button
      * reads "Stopping…" and cannot be clicked twice while the server catches up. Falls back to
@@ -1476,6 +1910,18 @@ export class MessageItemComponent extends BaseAngularComponent {
         this.DetailTasks = value;
     }
     tasksLoaded = false;
+    _tasksLoadInFlight = false;
+    _tasksReloadQueued = false;
+    _taskGraphSub = null;
+    _taskPollCounter = 0;
+    WorkflowElapsedFormatted = '0:00';
+    ExpandedWorkflowStepIds = new Set();
+    /**
+     * When this message is a bottom continuation reply (`this.message.ParentID` points to the
+     * originating workflow message), holds the root `MJ: Tasks` row for that workflow so the UI
+     * can render a relational Workflow Context Header without string-parsing.
+     */
+    OriginatingWorkflowTask = null;
     // Memoization for mention parsing to prevent repeated parsing on change detection
     _cachedDisplayMessage = '';
     /** The raw Message the cached display text was computed from. */
@@ -1501,13 +1947,38 @@ export class MessageItemComponent extends BaseAngularComponent {
         // on first render. Fire-and-forget — the getter returns false until cached,
         // matching the pre-PR-2 behavior of the previous hardcoded check.
         void this.agentService.getConversationManagerAgent();
+        // Auto-load associated workflow tasks for AI messages so the inline workflow
+        // execution card renders immediately without requiring the user to open the gear icon.
+        if (this.IsAIMessage && this.message?.ID) {
+            void this.loadTasks();
+            this.subscribeToTaskGraphEvents();
+        }
         // Execute automatic commands if present
         await this.executeAutomaticCommands();
     }
+    subscribeToTaskGraphEvents() {
+        if (this._taskGraphSub) {
+            return;
+        }
+        this._taskGraphSub = ConversationsRuntime.Instance.Streaming.TaskGraphEvents$.subscribe((evt) => {
+            if (!this.IsAIMessage || !this.message?.ID) {
+                return;
+            }
+            const matchesMessage = evt.conversationDetailId && UUIDsEqual(evt.conversationDetailId, this.message.ID);
+            const matchesTask = this.DetailTasks.length > 0 &&
+                this.DetailTasks.some((t) => (evt.ParentTaskID && (UUIDsEqual(t.ID, evt.ParentTaskID) || UUIDsEqual(t.ParentID, evt.ParentTaskID))) ||
+                    (evt.TaskID && UUIDsEqual(t.ID, evt.TaskID)));
+            if (matchesMessage || matchesTask || (this.DetailTasks.length === 0 && this.IsLastMessageInConversation)) {
+                void this.loadTasks();
+            }
+        });
+    }
     ngOnChanges(_changes) {
-        // No longer need to manage timer for agentRun changes
-        // Parent's 1-second timer + agentRunDuration getter handles all agent run timing
-        // Component's timer only runs for temporary messages (handled in ngAfterViewInit)
+        // Reload tasks if message ID is present on an AI message and hasn't loaded yet
+        if (this.IsAIMessage && this.message?.ID && !this.tasksLoaded) {
+            void this.loadTasks();
+            this.subscribeToTaskGraphEvents();
+        }
     }
     /**
      * DoCheck lifecycle hook - detects changes to message properties
@@ -1521,7 +1992,13 @@ export class MessageItemComponent extends BaseAngularComponent {
         const currentStatus = this.message.Status;
         // Check if status changed from non-Complete to Complete
         if (this._previousMessageStatus !== 'Complete' && currentStatus === 'Complete') {
-            this.stopElapsedTimeUpdater();
+            // When an AI turn finishes, check if it submitted a durable task graph for this message
+            if (this.IsAIMessage && this.message.ID) {
+                void this.loadTasks();
+            }
+            if (!this.HasActiveWorkflowTasks) {
+                this.stopElapsedTimeUpdater();
+            }
             // Force immediate synchronous change detection for dynamically created components
             // markForCheck() only schedules a check which may not run for dynamic components
             // detectChanges() forces immediate view update so UI shows timer stopped right away
@@ -1544,15 +2021,16 @@ export class MessageItemComponent extends BaseAngularComponent {
         // Nothing in flight means nothing to watch — restart the clock so a run that begins later is
         // measured from when it began, not from when this component was created.
         const inFlight = this.isLivenessInFlight();
+        const needsTimer = inFlight || this.HasActiveWorkflowTasks;
         this.refreshLivenessState();
         // Re-arm the elapsed timer here, not only in ngAfterViewInit. A message that becomes
         // in-progress AFTER the view initialised — the common case, since the row is rendered before
         // the agent starts — otherwise never got an interval, so its pill never ticked and its liveness
         // state was never recomputed on a schedule.
-        if (inFlight && this._elapsedTimeInterval === null) {
+        if (needsTimer && this._elapsedTimeInterval === null) {
             this.startElapsedTimeUpdater();
         }
-        else if (!inFlight) {
+        else if (!needsTimer) {
             this.stopElapsedTimeUpdater();
         }
     }
@@ -1672,6 +2150,10 @@ export class MessageItemComponent extends BaseAngularComponent {
     ngOnDestroy() {
         this.stopElapsedTimeUpdater();
         this.clearStopRetryTimer();
+        if (this._taskGraphSub) {
+            this._taskGraphSub.unsubscribe();
+            this._taskGraphSub = null;
+        }
     }
     /**
      * Handles clicks on the message bubble.
@@ -1723,14 +2205,11 @@ export class MessageItemComponent extends BaseAngularComponent {
         this.OpenEntityRecord.emit({ entityName, compositeKey });
     }
     /**
-     * Starts the elapsed time updater interval for temporary messages only
-     * For agent runs with IDs, the parent's timer + agentRunDuration getter handles updates
-     * Updates every second for temporary messages that use _elapsedTimeFormatted
+     * Starts the elapsed time updater interval for temporary messages, active agent runs,
+     * and active durable workflow task graphs.
      */
     startElapsedTimeUpdater() {
-        // Start timer for temporary messages (in-progress, no ID) OR active agent runs
-        // Both need periodic updates to _elapsedTimeFormatted / _agentRunDurationFormatted
-        if (this.IsInProgressAIMessage || this.IsAgentRunActive) {
+        if (this.IsInProgressAIMessage || this.IsAgentRunActive || this.HasActiveWorkflowTasks) {
             // Initial update
             this.updateTimers();
             this.cdRef.markForCheck();
@@ -1757,22 +2236,56 @@ export class MessageItemComponent extends BaseAngularComponent {
      * Called every second by the interval timer
      */
     updateTimers() {
+        const currentStatus = this.message?.Status;
+        this._stableIsInProgressAIMessage = this.IsAIMessage && currentStatus === 'In-Progress';
+        this._stableDisplayMessage = this.computeDisplayMessage();
+        this._messageClasses = this.buildMessageClasses();
+        if (this._previousMessageStatus !== 'Complete' && currentStatus === 'Complete') {
+            this._previousMessageStatus = 'Complete';
+            if (this.IsAIMessage && this.message?.ID) {
+                void this.loadTasks();
+            }
+        }
         // Update temporary message elapsed time
         if (this.IsInProgressAIMessage) {
             this.ElapsedTimeFormatted = this.formatElapsedTime(this.ElapsedTimeSinceLoad);
         }
-        // Update agent run duration for active runs
-        if (this.IsAgentRunActive && this.AgentRun?.__mj_CreatedAt) {
-            const createdAt = new Date(this.AgentRun.__mj_CreatedAt);
-            const now = new Date();
-            const diffMs = now.getTime() - createdAt.getTime();
-            this.AgentRunDurationFormatted = this.formatDurationFromMs(diffMs);
+        // Update agent run duration for active runs or while child workflow tasks are still running
+        if (this.IsAgentRunActive || this.HasActiveWorkflowTasks) {
+            const startCandidates = [];
+            if (this.AgentRun?.__mj_CreatedAt) {
+                const t = new Date(this.AgentRun.__mj_CreatedAt).getTime();
+                if (!Number.isNaN(t)) {
+                    startCandidates.push(t);
+                }
+            }
+            for (const task of (this.DetailTasks ?? [])) {
+                const raw = task.StartedAt || task.__mj_CreatedAt;
+                if (raw) {
+                    const t = new Date(raw).getTime();
+                    if (!Number.isNaN(t)) {
+                        startCandidates.push(t);
+                    }
+                }
+            }
+            if (startCandidates.length > 0) {
+                const earliestStart = Math.min(...startCandidates);
+                this.AgentRunDurationFormatted = this.formatDurationFromMs(Math.max(0, Date.now() - earliestStart));
+            }
+        }
+        // Update active workflow elapsed timer and poll task rows every 3s for real-time status updates
+        if (this.HasActiveWorkflowTasks) {
+            this.WorkflowElapsedFormatted = this.computeWorkflowElapsedFormatted();
+            this._taskPollCounter = (this._taskPollCounter + 1) % 3;
+            if (this._taskPollCounter === 0) {
+                void this.loadTasks();
+            }
         }
         // Silence only grows with time, so it has to be re-evaluated on the clock rather than on
         // change detection. This is the only path that runs while the transport is dead.
         this.refreshLivenessState();
         // The tick stops itself: change detection does not reliably reach this row once it finishes.
-        if (!this.isLivenessInFlight()) {
+        if (!this.isLivenessInFlight() && !this.HasActiveWorkflowTasks && !this._tasksLoadInFlight) {
             this.stopElapsedTimeUpdater();
         }
     }
@@ -1791,7 +2304,7 @@ export class MessageItemComponent extends BaseAngularComponent {
         if (diffMs <= 0) {
             return '0:00';
         }
-        let seconds = Math.floor(diffMs / 1000);
+        let seconds = Math.max(1, Math.floor(diffMs / 1000));
         let minutes = Math.floor(seconds / 60);
         seconds = seconds % 60;
         let hours = Math.floor(minutes / 60);
@@ -1801,8 +2314,15 @@ export class MessageItemComponent extends BaseAngularComponent {
             (seconds < 10 ? '0' : '') + seconds;
         return formattedTime;
     }
+    /**
+     * Time since the message was created: its server creation time once it has one, else when it was first shown. An
+     * agent's reply first renders as a local placeholder, before the server acknowledges the run; it takes the reply
+     * row's creation time when the acknowledgement arrives, so the timer counts from when the server's row began.
+     */
     get ElapsedTimeSinceLoad() {
-        return Date.now() - this._loadTime;
+        const createdAt = this.message?.__mj_CreatedAt;
+        // Never negative: the server's clock can run ahead of this browser's.
+        return Math.max(0, Date.now() - (createdAt ? new Date(createdAt).getTime() : this._loadTime));
     }
     /** @deprecated Use {@link ElapsedTimeSinceLoad}. */
     get elapsedTimeSinceLoad() {
@@ -1842,8 +2362,8 @@ export class MessageItemComponent extends BaseAngularComponent {
         // Get agent ID from denormalized field (populated when message is created)
         const agentID = this.message.AgentID;
         // Look up agent from AIEngineBase cache
-        if (agentID && AIEngineBase.Instance?.Agents) {
-            const agent = AIEngineBase.Instance.Agents.find(a => UUIDsEqual(a.ID, agentID));
+        if (agentID) {
+            const agent = AIEngineBase.Instance.ReadableAgents.find(a => UUIDsEqual(a.ID, agentID));
             if (agent) {
                 return {
                     name: agent.Name || 'AI Assistant',
@@ -1951,7 +2471,7 @@ export class MessageItemComponent extends BaseAngularComponent {
      * ngDoCheck to snapshot the value; templates read _stableDisplayMessage.
      */
     computeDisplayMessage() {
-        const raw = this.message.Message || '';
+        const raw = this.displaySourceText();
         // ngDoCheck calls this every pass; an unchanged Message is the same string object, so this
         // compare is a pointer check and nothing below runs until the text changes.
         if (raw === this._cachedRawText && this._cachedDisplayMessage) {
@@ -1971,6 +2491,17 @@ export class MessageItemComponent extends BaseAngularComponent {
         this._cachedDisplayMessage = transformed;
         return transformed;
     }
+    /**
+     * The text the bubble renders from: the stored message, with a failed agent reply formatted as the chat has always
+     * shown one (see {@link FormatAgentFailureForDisplay}). Display only: the entity's text is never changed.
+     */
+    displaySourceText() {
+        const raw = this.message.Message || '';
+        if (this.IsAIMessage && this.message.Status === 'Error') {
+            return FormatAgentFailureForDisplay(raw, this.AiAgentInfo?.name ?? 'Agent');
+        }
+        return raw;
+    }
     /**
      * Transform @mentions in text to HTML badge elements
      * Supports both JSON format (@{type:"agent",id:"uuid",...}) and legacy text format (@AgentName)
@@ -2080,7 +2611,7 @@ export class MessageItemComponent extends BaseAngularComponent {
             : '';
         // Generate HTML based on whether we have an icon
         if (logoURL) {
-            return `<span class="mention-badge ${typeClass}"${inlineStyle}${recordAttrs}><img src="${this.escapeHtml(logoURL)}" alt="" />${escapedName}${presetIndicator}</span>`;
+            return `<span class="mention-badge ${typeClass}"${inlineStyle}${recordAttrs}><img src="${this.escapeHtml(logoURL)}" alt="" role="presentation" />${escapedName}${presetIndicator}</span>`;
         }
         else if (iconClass) {
             return `<span class="mention-badge ${typeClass}"${inlineStyle}${recordAttrs}><i class="${this.escapeHtml(iconClass)}" aria-hidden="true"></i>${escapedName}${presetIndicator}</span>`;
@@ -2344,24 +2875,106 @@ export class MessageItemComponent extends BaseAngularComponent {
     shouldShowInlineActions() {
         return this.ShouldShowInlineActions();
     }
+    static SUPPORTING_ARTIFACTS_EXPANDED_SETTING_KEY = 'mj.conversations.supportingArtifactsExpanded';
+    static EMPTY_ARTIFACTS = [];
+    _lastArtifactsInput = null;
+    _sortedDisplayArtifactsCache = MessageItemComponent.EMPTY_ARTIFACTS;
+    _supportingArtifactsCache = MessageItemComponent.EMPTY_ARTIFACTS;
+    _lastSingleArtifact = null;
+    _lastSingleArtifactVersion = null;
+    _singleArtifactCache = MessageItemComponent.EMPTY_ARTIFACTS;
     /**
-     * The artifacts to render under this message, one card each. Prefers the
-     * `artifacts` array; falls back to the legacy single `artifact`/`artifactVersion`
+     * Whether the Supporting Artifacts grid is expanded when a message has multiple artifacts.
+     * Defaults to `false` (collapsed) when unset and persists the user's global preference via `UserInfoEngine`.
+     */
+    IsSupportingArtifactsExpanded = MessageItemComponent.readSupportingArtifactsExpandedPref();
+    static readSupportingArtifactsExpandedPref() {
+        try {
+            const raw = UserInfoEngine.Instance?.GetSetting(MessageItemComponent.SUPPORTING_ARTIFACTS_EXPANDED_SETTING_KEY);
+            if (raw === 'true') {
+                return true;
+            }
+            if (raw === 'false') {
+                return false;
+            }
+        }
+        catch {
+            // Fallback when UserInfoEngine is not initialized (e.g., unit test harnesses)
+        }
+        return false;
+    }
+    ToggleSupportingArtifacts(event) {
+        event?.stopPropagation();
+        this.IsSupportingArtifactsExpanded = !this.IsSupportingArtifactsExpanded;
+        try {
+            UserInfoEngine.Instance?.SetSettingDebounced(MessageItemComponent.SUPPORTING_ARTIFACTS_EXPANDED_SETTING_KEY, String(this.IsSupportingArtifactsExpanded));
+        }
+        catch {
+            // Ignore in test harnesses without UserInfoEngine
+        }
+        this.cdRef.detectChanges();
+    }
+    /**
+     * The artifacts to render under this message, one card each, ordered chronologically
+     * (`version.__mj_CreatedAt` / `artifact.__mj_CreatedAt` ascending) so intermediate
+     * step outputs appear first and the final deliverable appears last.
+     * Prefers the `artifacts` array; falls back to the legacy single `artifact`/`artifactVersion`
      * inputs so older callers that set only those keep working.
      */
     get DisplayArtifacts() {
         if (this.Artifacts && this.Artifacts.length > 0) {
-            return this.Artifacts;
+            if (this.Artifacts.length === 1) {
+                return this.Artifacts;
+            }
+            if (this._lastArtifactsInput !== this.Artifacts) {
+                this._lastArtifactsInput = this.Artifacts;
+                const indexed = this.Artifacts.map((item, idx) => {
+                    const rawDate = item.version?.__mj_CreatedAt ?? item.artifact?.__mj_CreatedAt ?? null;
+                    const timeMs = rawDate ? new Date(rawDate).getTime() : NaN;
+                    return { item, idx, timeMs };
+                });
+                indexed.sort((a, b) => {
+                    if (!Number.isNaN(a.timeMs) && !Number.isNaN(b.timeMs) && a.timeMs !== b.timeMs) {
+                        return a.timeMs - b.timeMs;
+                    }
+                    return a.idx - b.idx;
+                });
+                this._sortedDisplayArtifactsCache = indexed.map((entry) => entry.item);
+                this._supportingArtifactsCache = this._sortedDisplayArtifactsCache.slice(0, -1);
+            }
+            return this._sortedDisplayArtifactsCache;
         }
         if (this.Artifact && this.artifactVersion) {
-            return [{ artifact: this.Artifact, version: this.artifactVersion }];
+            if (this._lastSingleArtifact !== this.Artifact ||
+                this._lastSingleArtifactVersion !== this.artifactVersion) {
+                this._lastSingleArtifact = this.Artifact;
+                this._lastSingleArtifactVersion = this.artifactVersion;
+                this._singleArtifactCache = [{ artifact: this.Artifact, version: this.artifactVersion }];
+            }
+            return this._singleArtifactCache;
         }
-        return [];
+        return MessageItemComponent.EMPTY_ARTIFACTS;
     }
     /** @deprecated Use {@link DisplayArtifacts}. */
     get displayArtifacts() {
         return this.DisplayArtifacts;
     }
+    /**
+     * Earlier step-output artifacts (`#1 .. #N-1`) when this message carries multiple artifacts.
+     * Rendered in a compact, collapsible 2-column grid above the featured final deliverable.
+     */
+    get SupportingArtifacts() {
+        const all = this.DisplayArtifacts;
+        return all.length > 1 ? this._supportingArtifactsCache : MessageItemComponent.EMPTY_ARTIFACTS;
+    }
+    /**
+     * The final deliverable artifact (created last) when this message carries multiple artifacts,
+     * or the sole artifact when there is only one.
+     */
+    get PrimaryArtifact() {
+        const all = this.DisplayArtifacts;
+        return all.length > 0 ? all[all.length - 1] : null;
+    }
     get HasArtifact() {
         return this.DisplayArtifacts.length > 0;
     }
@@ -2421,8 +3034,8 @@ export class MessageItemComponent extends BaseAngularComponent {
      * Unified time pill text for all AI message states
      * Returns the appropriate time display based on message state:
      * - Temporary messages (in-progress): Live elapsed time
-     * - Active agent runs: Live agent run duration (calculated on-demand)
-     * - Completed messages: Final generation time
+     * - Active agent runs / active workflow task graphs: Live duration (updated every second)
+     * - Completed messages: Final generation time (including any child workflow task graph)
      * - Failed messages: Time before failure
      */
     get TimePillText() {
@@ -2449,10 +3062,11 @@ export class MessageItemComponent extends BaseAngularComponent {
     }
     /**
      * Whether the Continue control is offered: the last message in the conversation is a reply the
-     * user stopped, and the viewer may write. Any message resumes the run; this one says so.
+     * user stopped, the viewer may write, and the host allows stopping ({@link AllowStopRun}). Any
+     * message resumes the run; this one says so.
      */
     get CanContinueStoppedRun() {
-        return this.WasStoppedByUser && this.IsLastMessageInConversation && !this.ReadOnly;
+        return this.WasStoppedByUser && this.IsLastMessageInConversation && !this.ReadOnly && this.AllowStopRun !== false;
     }
     /** The Continue control: sends {@link ContinueMessage} the way a suggested response is sent. */
     OnContinueClick() {
@@ -2478,17 +3092,18 @@ export class MessageItemComponent extends BaseAngularComponent {
         if (this.IsInProgressAIMessage) {
             return this.ElapsedTimeFormatted;
         }
-        // For active agent runs, calculate live duration from agentRun timestamps
-        // This getter recalculates every time using new Date(), so it updates smoothly
-        if (this.IsAgentRunActive && this.AgentRun?.__mj_CreatedAt) {
-            return this.AgentRunDuration;
+        // For active agent runs or active child workflow task graphs, keep the pill ticking live
+        if (this.IsAgentRunActive || this.HasActiveWorkflowTasks) {
+            return this.AgentRunDuration ?? this.WorkflowDurationDisplay;
         }
-        // For completed/failed messages with an agent run, use agentRun timestamps.
-        // These are set when the run finishes and never change, so pin/edit saves on the
-        // message entity cannot corrupt the displayed duration.
+        // For completed/failed messages with an agent run (and optional child workflow tasks),
+        // use the combined agentRun + workflow task span.
         if (this.AgentRun?.__mj_CreatedAt && this.AgentRun?.__mj_UpdatedAt) {
             return this.AgentRunDuration;
         }
+        if ((this.DetailTasks?.length ?? 0) > 0) {
+            return this.WorkflowDurationDisplay;
+        }
         // No agent run — fall back to message entity timestamps.
         const fromMessage = this.FormattedGenerationTime;
         if (fromMessage) {
@@ -2698,7 +3313,7 @@ export class MessageItemComponent extends BaseAngularComponent {
         const previousValue = this.message.IsPinned;
         this.message.IsPinned = !previousValue;
         this.cdRef.detectChanges();
-        const saved = await this.message.Save();
+        const saved = await SavePinState(this.ProviderToUse, this.message.ID, !previousValue);
         if (!saved) {
             // Revert on failure
             this.message.IsPinned = previousValue;
@@ -2864,6 +3479,20 @@ export class MessageItemComponent extends BaseAngularComponent {
     onAttachmentClick(attachment) {
         return this.OnAttachmentClick(attachment);
     }
+    /**
+     * An image in the message text was clicked: open it in the chat's image viewer, the way an
+     * attachment thumbnail opens there.
+     */
+    OnMarkdownImageClicked(image) {
+        this.AttachmentClicked.emit({
+            id: image.Src,
+            type: 'Image',
+            mimeType: '',
+            fileName: image.Alt || null,
+            sizeBytes: 0,
+            contentUrl: image.Src,
+        });
+    }
     /**
      * Check if message has any attachments
      */
@@ -2981,47 +3610,511 @@ export class MessageItemComponent extends BaseAngularComponent {
      * Load tasks associated with this conversation detail
      */
     async loadTasks() {
-        if (!this.message?.ID) {
+        if (!this.message?.ID || !this.CurrentUser) {
+            return;
+        }
+        if (this._tasksLoadInFlight) {
+            this._tasksReloadQueued = true;
             return;
         }
+        this._tasksLoadInFlight = true;
         try {
+            const safeMsgId = this.message.ID.replace(/'/g, "''");
+            const safeParentId = this.message.ParentID ? this.message.ParentID.replace(/'/g, "''") : null;
+            const extraFilter = safeParentId
+                ? `ConversationDetailID='${safeMsgId}' OR (ConversationDetailID='${safeParentId}' AND ParentID IS NULL)`
+                : `ConversationDetailID='${safeMsgId}'`;
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
             const result = await rv.RunView({
                 EntityName: 'MJ: Tasks',
-                ExtraFilter: `ConversationDetailID='${this.message.ID}'`,
-                OrderBy: '__mj_CreatedAt DESC',
-                ResultType: 'entity_object'
+                ExtraFilter: extraFilter,
+                OrderBy: '__mj_CreatedAt ASC',
+                ResultType: 'entity_object',
+                BypassCache: true
             }, this.CurrentUser);
             if (result.Success) {
-                this.DetailTasks = result.Results || [];
+                const allTasks = result.Results || [];
+                if (safeParentId) {
+                    this.DetailTasks = allTasks.filter((t) => UUIDsEqual(t.ConversationDetailID, this.message.ID));
+                    this.OriginatingWorkflowTask =
+                        allTasks.find((t) => !t.ParentID && UUIDsEqual(t.ConversationDetailID, this.message.ParentID)) || null;
+                }
+                else {
+                    this.DetailTasks = allTasks;
+                    this.OriginatingWorkflowTask = null;
+                }
                 this.tasksLoaded = true;
+                this.WorkflowElapsedFormatted = this.computeWorkflowElapsedFormatted();
+                if (this.HasActiveWorkflowTasks) {
+                    this.AgentRunDurationFormatted = this.WorkflowElapsedFormatted;
+                    if (this._elapsedTimeInterval === null) {
+                        this.startElapsedTimeUpdater();
+                    }
+                }
+                this.cdRef?.detectChanges();
             }
         }
         catch (error) {
             console.error('Failed to load tasks for conversation detail:', error);
         }
+        finally {
+            this._tasksLoadInFlight = false;
+            if (this._tasksReloadQueued) {
+                this._tasksReloadQueued = false;
+                void this.loadTasks();
+            }
+        }
+    }
+    static EMPTY_WORKFLOW_TASKS = [];
+    _workflowCacheFingerprint = null;
+    _workflowParentTaskCache = null;
+    _workflowStepsCache = MessageItemComponent.EMPTY_WORKFLOW_TASKS;
+    _workflowTitleCache = 'Agent Workflow';
+    _workflowStatusCache = 'Complete';
+    _workflowCompletedStepCountCache = 0;
+    _workflowSkippedStepCountCache = 0;
+    _workflowProgressPercentCache = 0;
+    _workflowParentTaskIdCache = null;
+    _workflowStepSummariesCache = new Map();
+    computeWorkflowFingerprint(tasks) {
+        if (!tasks || tasks.length === 0) {
+            return '';
+        }
+        let fp = `${tasks.length}`;
+        for (let i = 0; i < tasks.length; i++) {
+            const t = tasks[i];
+            fp += `|${t.ID ?? ''}:${t.ParentID ?? ''}:${t.AgentID ?? ''}:${t.Name ?? ''}:${t.Status ?? ''}:${t.PercentComplete ?? ''}:${String(t.__mj_CreatedAt ?? '')}:${t.Description ?? ''}:${t.OutputPayload?.length ?? 0}:${t.OutputPayload?.slice(0, 64) ?? ''}`;
+        }
+        return fp;
+    }
+    ensureWorkflowCache() {
+        const tasks = this.DetailTasks;
+        const fp = this.computeWorkflowFingerprint(tasks);
+        if (this._workflowCacheFingerprint === fp && this._workflowStepsCache) {
+            return;
+        }
+        this._workflowCacheFingerprint = fp;
+        if (!this._workflowStepSummariesCache) {
+            this._workflowStepSummariesCache = new Map();
+        }
+        else {
+            this._workflowStepSummariesCache.clear();
+        }
+        if (!tasks || tasks.length === 0) {
+            this._workflowParentTaskCache = null;
+            this._workflowStepsCache = MessageItemComponent.EMPTY_WORKFLOW_TASKS;
+            this._workflowTitleCache = 'Agent Workflow';
+            this._workflowStatusCache = 'Complete';
+            this._workflowCompletedStepCountCache = 0;
+            this._workflowSkippedStepCountCache = 0;
+            this._workflowProgressPercentCache = 0;
+            this._workflowParentTaskIdCache = null;
+            return;
+        }
+        // 1. Parent container task detection
+        let parent = null;
+        if (tasks.length > 1) {
+            const parentIdsWithChildren = new UUIDSet(tasks.map((child) => child.ParentID));
+            const parentCandidate = tasks.find((t) => !t.ParentID && parentIdsWithChildren.Has(t.ID));
+            if (parentCandidate) {
+                parent = parentCandidate;
+            }
+            else {
+                parent = tasks.find((t) => !t.ParentID && !t.AgentID) ?? null;
+            }
+        }
+        this._workflowParentTaskCache = parent;
+        // 2. Ordered executable steps
+        const steps = parent
+            ? tasks.filter((t) => !UUIDsEqual(t.ID, parent.ID))
+            : [...tasks];
+        steps.sort((a, b) => {
+            const aTime = a.__mj_CreatedAt ? new Date(a.__mj_CreatedAt).getTime() : 0;
+            const bTime = b.__mj_CreatedAt ? new Date(b.__mj_CreatedAt).getTime() : 0;
+            return aTime - bTime;
+        });
+        this._workflowStepsCache = steps;
+        // 3. Title & ParentTaskID
+        if (parent?.Name) {
+            this._workflowTitleCache = parent.Name;
+        }
+        else if (steps.length === 1) {
+            this._workflowTitleCache = steps[0].Name || 'Agent Task';
+        }
+        else {
+            this._workflowTitleCache = 'Agent Workflow';
+        }
+        this._workflowParentTaskIdCache =
+            parent?.ID ??
+                tasks.find((t) => !!t.ParentID)?.ParentID ??
+                null;
+        // 4. Status, counts, and progress percent in one pass
+        if (steps.length === 0) {
+            this._workflowStatusCache = 'Complete';
+            this._workflowCompletedStepCountCache = 0;
+            this._workflowSkippedStepCountCache = 0;
+            this._workflowProgressPercentCache = 0;
+        }
+        else {
+            let hasFailed = false;
+            let hasRunning = false;
+            let allCancelled = true;
+            let completedCount = 0;
+            let skippedCount = 0;
+            let progressSum = 0;
+            for (const step of steps) {
+                const status = step.Status;
+                if (status !== 'Cancelled') {
+                    allCancelled = false;
+                }
+                if (status === 'Failed') {
+                    hasFailed = true;
+                }
+                else if (status === 'In Progress' || status === 'Pending' || status === 'Deferred') {
+                    hasRunning = true;
+                }
+                if (status === 'Complete') {
+                    completedCount++;
+                    progressSum += 100;
+                }
+                else if (status === 'Skipped') {
+                    skippedCount++;
+                    progressSum += 100;
+                }
+                else if (status === 'In Progress') {
+                    progressSum += Math.max(15, Math.min(95, step.PercentComplete || 50));
+                }
+            }
+            if (hasFailed) {
+                this._workflowStatusCache = 'Failed';
+            }
+            else if (hasRunning) {
+                this._workflowStatusCache = 'Running';
+            }
+            else if (allCancelled) {
+                this._workflowStatusCache = 'Cancelled';
+            }
+            else {
+                this._workflowStatusCache = 'Complete';
+            }
+            this._workflowCompletedStepCountCache = completedCount;
+            this._workflowSkippedStepCountCache = skippedCount;
+            this._workflowProgressPercentCache = Math.round(progressSum / steps.length);
+        }
+        // 5. Single forward pass O(S * K) step summary computation with running seenUpstream map
+        const seenUpstream = new Map();
+        for (const step of steps) {
+            const { summary, parsedPayload } = this.computeSingleStepSummary(step, seenUpstream);
+            if (step.ID) {
+                this._workflowStepSummariesCache.set(step.ID, summary);
+            }
+            if (parsedPayload) {
+                for (const [k, v] of Object.entries(parsedPayload)) {
+                    seenUpstream.set(k, JSON.stringify(v));
+                }
+            }
+        }
+    }
+    computeSingleStepSummary(step, seenUpstream) {
+        let parsedPayload = null;
+        const rawPayload = step.OutputPayload?.trim();
+        if (rawPayload) {
+            try {
+                const parsed = JSON.parse(rawPayload);
+                if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+                    parsedPayload = parsed;
+                }
+            }
+            catch {
+                // Non-JSON payload handled as raw string below
+            }
+        }
+        const desc = step.Description || '';
+        const outputMarker = desc.indexOf('--- Output ---');
+        if (outputMarker !== -1) {
+            const rawOutput = desc.slice(outputMarker + '--- Output ---'.length).trim();
+            if (rawOutput.length > 0 && !rawOutput.startsWith('output available (')) {
+                const summary = rawOutput.length > 360 ? rawOutput.slice(0, 360) + '…' : rawOutput;
+                return { summary, parsedPayload };
+            }
+        }
+        if (rawPayload) {
+            const deltaText = this.formatStepPayloadPreview(rawPayload, parsedPayload, seenUpstream);
+            if (deltaText) {
+                const summary = deltaText.length > 360 ? deltaText.slice(0, 360) + '…' : deltaText;
+                return { summary, parsedPayload };
+            }
+        }
+        const cleanDesc = desc.trim();
+        if (step.Status === 'Skipped') {
+            const summary = cleanDesc.length > 0
+                ? `Skipped (conditional prerequisite not met) — ${cleanDesc}`
+                : 'Skipped (conditional prerequisite not met)';
+            return { summary, parsedPayload };
+        }
+        return { summary: cleanDesc.length > 0 ? cleanDesc : null, parsedPayload };
+    }
+    formatStepPayloadPreview(rawPayload, parsedPayload, seenUpstream) {
+        if (!rawPayload) {
+            return null;
+        }
+        if (!parsedPayload) {
+            return rawPayload;
+        }
+        const delta = {};
+        for (const [k, v] of Object.entries(parsedPayload)) {
+            if (seenUpstream.get(k) !== JSON.stringify(v)) {
+                delta[k] = v;
+            }
+        }
+        const source = Object.keys(delta).length > 0 ? delta : parsedPayload;
+        const synthesis = (typeof source.synthesis === 'object' && source.synthesis !== null && !Array.isArray(source.synthesis))
+            ? source.synthesis
+            : undefined;
+        const report = (typeof source.report === 'object' && source.report !== null && !Array.isArray(source.report))
+            ? source.report
+            : undefined;
+        const candidate = source.summary ??
+            source.message ??
+            source.explanation ??
+            source.analysis ??
+            synthesis?.executiveSummary ??
+            report?.description ??
+            report?.name ??
+            source.title ??
+            source.queryName;
+        if (typeof candidate === 'string' && candidate.trim()) {
+            return candidate.trim();
+        }
+        return JSON.stringify(source);
     }
     /**
-     * Get formatted duration for the agent run
-     * For active runs: Calculate from created to NOW (live updates)
-     * For completed runs: Calculate from created to updated timestamp (static)
+     * Smoothly scrolls the chat viewport to the originating workflow message (`this.message.ParentID`)
+     * and briefly highlights it when the user clicks the Workflow Context Header chip.
+     */
+    ScrollToOriginatingWorkflow(event) {
+        event.stopPropagation();
+        if (!this.message?.ParentID) {
+            return;
+        }
+        const targetId = this.message.ParentID;
+        if (this.ScrollToMessageRequested.observed) {
+            this.ScrollToMessageRequested.emit(targetId);
+            return;
+        }
+        if (typeof document === 'undefined') {
+            return;
+        }
+        const candidates = Array.from(document.querySelectorAll('[data-message-id]'));
+        const targetEl = candidates.find((el) => UUIDsEqual(el.getAttribute('data-message-id'), targetId));
+        if (targetEl) {
+            targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            targetEl.classList.add('workflow-origin-highlight');
+            setTimeout(() => targetEl.classList.remove('workflow-origin-highlight'), 2200);
+        }
+    }
+    /**
+     * Returns the parent workflow container task when `DetailTasks` contains a parent-child hierarchy.
+     * Prevents rendering the container parent task as a duplicate step card alongside its child steps.
+     */
+    get WorkflowParentTask() {
+        this.ensureWorkflowCache();
+        return this._workflowParentTaskCache;
+    }
+    /**
+     * Ordered executable workflow steps for this message (excluding the container parent row).
+     */
+    get WorkflowSteps() {
+        this.ensureWorkflowCache();
+        return this._workflowStepsCache;
+    }
+    /** Title shown in the inline Workflow Execution Card header. */
+    get WorkflowTitle() {
+        this.ensureWorkflowCache();
+        return this._workflowTitleCache;
+    }
+    /** Aggregate status of the workflow ('Running' | 'Complete' | 'Failed' | 'Cancelled'). */
+    get WorkflowStatus() {
+        this.ensureWorkflowCache();
+        return this._workflowStatusCache;
+    }
+    /** Whether any workflow step is still pending or actively executing. */
+    get HasActiveWorkflowTasks() {
+        this.ensureWorkflowCache();
+        return this._workflowStepsCache.length > 0 && this._workflowStatusCache === 'Running';
+    }
+    /** Number of completed workflow steps. */
+    get WorkflowCompletedStepCount() {
+        this.ensureWorkflowCache();
+        return this._workflowCompletedStepCountCache;
+    }
+    /** Number of conditionally skipped workflow steps. */
+    get WorkflowSkippedStepCount() {
+        this.ensureWorkflowCache();
+        return this._workflowSkippedStepCountCache;
+    }
+    /** Overall completion percentage (0-100) across all workflow steps. */
+    get WorkflowProgressPercent() {
+        this.ensureWorkflowCache();
+        return this._workflowProgressPercentCache;
+    }
+    /** Formatted total duration for the workflow execution card. */
+    get WorkflowDurationDisplay() {
+        if (this.HasActiveWorkflowTasks) {
+            return this.WorkflowElapsedFormatted;
+        }
+        return this.computeWorkflowElapsedFormatted();
+    }
+    computeWorkflowElapsedFormatted() {
+        const tasks = this.DetailTasks ?? [];
+        if (tasks.length === 0) {
+            return '0:00';
+        }
+        const startTimes = tasks
+            .map((t) => (t.StartedAt ? new Date(t.StartedAt).getTime() : t.__mj_CreatedAt ? new Date(t.__mj_CreatedAt).getTime() : NaN))
+            .filter((n) => !Number.isNaN(n));
+        if (startTimes.length === 0) {
+            return '0:00';
+        }
+        const earliest = Math.min(...startTimes);
+        if (this.HasActiveWorkflowTasks) {
+            return this.formatDurationFromMs(Math.max(0, Date.now() - earliest));
+        }
+        const endTimes = tasks
+            .map((t) => (t.CompletedAt ? new Date(t.CompletedAt).getTime() : t.__mj_UpdatedAt ? new Date(t.__mj_UpdatedAt).getTime() : NaN))
+            .filter((n) => !Number.isNaN(n));
+        const latest = endTimes.length > 0 ? Math.max(...endTimes) : Date.now();
+        return this.formatDurationFromMs(Math.max(1000, latest - earliest));
+    }
+    /** Parent task ID for opening `<mj-task-graph-run-view>` in the right-side panel. */
+    get WorkflowParentTaskID() {
+        this.ensureWorkflowCache();
+        return this._workflowParentTaskIdCache;
+    }
+    /** Whether the completed workflow step list is expanded (always expanded while Running). */
+    IsWorkflowStepsExpanded = true;
+    ToggleWorkflowStepsExpanded(event) {
+        event?.stopPropagation();
+        if (this.WorkflowStatus === 'Running') {
+            return;
+        }
+        this.IsWorkflowStepsExpanded = !this.IsWorkflowStepsExpanded;
+        this.cdRef.detectChanges();
+    }
+    OpenTaskGraphPanel(event) {
+        event?.stopPropagation();
+        const parentId = this.WorkflowParentTaskID;
+        if (!parentId) {
+            return;
+        }
+        this.TaskGraphPanelRequested.emit({
+            parentTaskId: parentId,
+            workflowTitle: this.WorkflowTitle,
+            workflowName: this.WorkflowTitle,
+            isRunning: this.WorkflowStatus === 'Running',
+        });
+    }
+    ToggleWorkflowStepExpand(stepId) {
+        if (this.ExpandedWorkflowStepIds.has(stepId)) {
+            this.ExpandedWorkflowStepIds.delete(stepId);
+        }
+        else {
+            this.ExpandedWorkflowStepIds.add(stepId);
+        }
+        this.cdRef.detectChanges();
+    }
+    IsWorkflowStepExpanded(stepId) {
+        return this.ExpandedWorkflowStepIds.has(stepId);
+    }
+    FormatWorkflowStepDuration(step) {
+        if (step.Status === 'Skipped') {
+            return 'Skipped';
+        }
+        if (step.Status === 'Cancelled') {
+            return 'Cancelled';
+        }
+        const startRaw = step.StartedAt || step.__mj_CreatedAt;
+        if (!startRaw) {
+            return null;
+        }
+        const startMs = new Date(startRaw).getTime();
+        if (Number.isNaN(startMs)) {
+            return null;
+        }
+        if (step.Status === 'In Progress') {
+            return this.formatDurationFromMs(Math.max(0, Date.now() - startMs));
+        }
+        if (step.Status === 'Pending') {
+            return 'Queued';
+        }
+        const endRaw = step.CompletedAt || step.__mj_UpdatedAt;
+        if (!endRaw) {
+            return null;
+        }
+        const endMs = new Date(endRaw).getTime();
+        if (Number.isNaN(endMs) || endMs < startMs) {
+            return null;
+        }
+        return this.formatDurationFromMs(Math.max(1000, endMs - startMs));
+    }
+    GetWorkflowStepSummary(step) {
+        this.ensureWorkflowCache();
+        if (step?.ID && this._workflowStepSummariesCache.has(step.ID)) {
+            return this._workflowStepSummariesCache.get(step.ID) ?? null;
+        }
+        return this.computeSingleStepSummary(step, new Map()).summary;
+    }
+    OpenWorkflowStepAgentRun(step, event) {
+        event.stopPropagation();
+        if (!step.AgentRunID) {
+            return;
+        }
+        const entityName = 'MJ: AI Agent Runs';
+        const compositeKey = CompositeKey.FromID(step.AgentRunID);
+        this.OpenEntityRecord.emit({ entityName, compositeKey });
+    }
+    /**
+     * Get formatted duration for the agent run (including any child workflow task graph).
+     * For active runs or active workflow task graphs: returns the 1s interval-updated string.
+     * For completed runs: spans from earliest start (agentRun or task) to latest end (agentRun or task).
      */
     get AgentRunDuration() {
+        const detailTasks = this.DetailTasks ?? [];
         if (!this.AgentRun || !this.AgentRun.__mj_CreatedAt) {
-            return null;
+            return detailTasks.length > 0 ? this.WorkflowDurationDisplay : null;
         }
-        // For active runs, return the interval-updated field to avoid
-        // ExpressionChangedAfterItHasBeenCheckedError (new Date() changes between CD cycles)
-        if (this.IsAgentRunActive) {
-            return this.AgentRunDurationFormatted;
+        // For active runs or active child workflow task graphs, return the interval-updated field
+        // to avoid ExpressionChangedAfterItHasBeenCheckedError
+        if (this.IsAgentRunActive || this.HasActiveWorkflowTasks) {
+            return this.AgentRunDurationFormatted !== '0:00'
+                ? this.AgentRunDurationFormatted
+                : this.WorkflowElapsedFormatted;
         }
-        // For completed runs, calculate static duration from timestamps
+        // For completed runs, calculate static duration spanning the agent run and any child workflow tasks
         if (!this.AgentRun.__mj_UpdatedAt) {
-            return null;
+            return detailTasks.length > 0 ? this.WorkflowDurationDisplay : null;
+        }
+        const startCandidates = [new Date(this.AgentRun.__mj_CreatedAt).getTime()];
+        const endCandidates = [new Date(this.AgentRun.__mj_UpdatedAt).getTime()];
+        for (const task of detailTasks) {
+            const sRaw = task.StartedAt || task.__mj_CreatedAt;
+            if (sRaw) {
+                const sMs = new Date(sRaw).getTime();
+                if (!Number.isNaN(sMs)) {
+                    startCandidates.push(sMs);
+                }
+            }
+            const eRaw = task.CompletedAt || task.__mj_UpdatedAt;
+            if (eRaw) {
+                const eMs = new Date(eRaw).getTime();
+                if (!Number.isNaN(eMs)) {
+                    endCandidates.push(eMs);
+                }
+            }
         }
-        const createdAt = new Date(this.AgentRun.__mj_CreatedAt);
-        const endTime = new Date(this.AgentRun.__mj_UpdatedAt);
-        const diffMs = endTime.getTime() - createdAt.getTime();
+        const earliestStart = Math.min(...startCandidates.filter((n) => !Number.isNaN(n)));
+        const latestEnd = Math.max(...endCandidates.filter((n) => !Number.isNaN(n)));
+        const diffMs = latestEnd - earliestStart;
         if (diffMs <= 0) {
             return null;
         }
@@ -3335,7 +4428,7 @@ export class MessageItemComponent extends BaseAngularComponent {
         return option?.label;
     }
     static ɵfac = function MessageItemComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MessageItemComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.MentionParserService), i0.ɵɵdirectiveInject(i2.UICommandHandlerService), i0.ɵɵdirectiveInject(i3.ConversationAgentService), i0.ɵɵdirectiveInject(i4.MarkdownService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MessageItemComponent, selectors: [["mj-conversation-message-item"]], inputs: { message: "message", Conversation: "Conversation", conversation: "conversation", CurrentUser: "CurrentUser", currentUser: "currentUser", AllMessages: "AllMessages", allMessages: "allMessages", ForkChips: "ForkChips", ForkRail: "ForkRail", ForkMarkerText: "ForkMarkerText", CanFork: "CanFork", InPlaceRole: "InPlaceRole", IsLatestTurn: "IsLatestTurn", EditOpenElsewhere: "EditOpenElsewhere", PendingReplace: "PendingReplace", IsProcessing: "IsProcessing", IsStreaming: "IsStreaming", isProcessing: "isProcessing", Artifact: "Artifact", artifact: "artifact", artifactVersion: "artifactVersion", Artifacts: "Artifacts", artifacts: "artifacts", AgentRun: "AgentRun", agentRun: "agentRun", UserAvatarMap: "UserAvatarMap", userAvatarMap: "userAvatarMap", Ratings: "Ratings", ratings: "ratings", IsLastMessage: "IsLastMessage", isLastMessage: "isLastMessage", Attachments: "Attachments", attachments: "attachments", PendingArtifacts: "PendingArtifacts", pendingArtifacts: "pendingArtifacts", MessageExtraTemplate: "MessageExtraTemplate", messageExtraTemplate: "messageExtraTemplate", ShowAgentRunDetails: "ShowAgentRunDetails", showAgentRunDetails: "showAgentRunDetails", ShowReactions: "ShowReactions", showReactions: "showReactions", ShowMessageRating: "ShowMessageRating", showMessageRating: "showMessageRating", AllowPinning: "AllowPinning", allowPinning: "allowPinning", AllowMessageEdit: "AllowMessageEdit", allowMessageEdit: "allowMessageEdit", AllowMessageDelete: "AllowMessageDelete", allowMessageDelete: "allowMessageDelete", ReadOnly: "ReadOnly", AllowStopRun: "AllowStopRun", InFlightCount: "InFlightCount", AssistantDisplayName: "AssistantDisplayName", assistantDisplayName: "assistantDisplayName", AssistantAvatarUrl: "AssistantAvatarUrl", assistantAvatarUrl: "assistantAvatarUrl" }, outputs: { ForkOpenRequested: "ForkOpenRequested", ResendInPlaceRequested: "ResendInPlaceRequested", EditingChanged: "EditingChanged", EditClicked: "EditClicked", editClicked: "editClicked", DeleteClicked: "DeleteClicked", deleteClicked: "deleteClicked", RegenerateRequested: "RegenerateRequested", RetryClicked: "RetryClicked", retryClicked: "retryClicked", TestFeedbackClicked: "TestFeedbackClicked", testFeedbackClicked: "testFeedbackClicked", ArtifactClicked: "ArtifactClicked", artifactClicked: "artifactClicked", ArtifactActionPerformed: "ArtifactActionPerformed", artifactActionPerformed: "artifactActionPerformed", MessageEdited: "MessageEdited", messageEdited: "messageEdited", OpenEntityRecord: "OpenEntityRecord", openEntityRecord: "openEntityRecord", SuggestedResponseSelected: "SuggestedResponseSelected", suggestedResponseSelected: "suggestedResponseSelected", AttachmentClicked: "AttachmentClicked", attachmentClicked: "attachmentClicked", DiagnosticRequested: "DiagnosticRequested", diagnosticRequested: "diagnosticRequested", MessagePinToggled: "MessagePinToggled", messagePinToggled: "messagePinToggled", LivenessCheckRequested: "LivenessCheckRequested", BeforeResponseFormSubmitted: "BeforeResponseFormSubmitted", beforeResponseFormSubmitted: "beforeResponseFormSubmitted", AfterResponseFormSubmitted: "AfterResponseFormSubmitted", afterResponseFormSubmitted: "afterResponseFormSubmitted", EditResendRequested: "EditResendRequested", ForkRequested: "ForkRequested", BeforeStopClicked: "BeforeStopClicked", StopRequested: "StopRequested" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 27, vars: 29, consts: [[3, "click"], [1, "message-avatar"], [1, "avatar-circle"], [1, "message-content"], [1, "message-header"], [1, "message-sender", 3, "title"], [1, "message-time"], [1, "message-status", 3, "error"], [1, "time-pill", 3, "in-progress", "active", "complete", "stopped", "failed", "checking", "stalled", "title"], ["type", "button", 1, "stop-run-pill", 3, "disabled", "title"], ["title", "Provide Test Feedback", 1, "test-feedback-icon"], ["role", "group", "aria-label", "Message actions", 1, "message-action-group", 3, "labeled"], [1, "agent-run-icon", 3, "expanded", "title"], [1, "message-body"], [1, "message-edit-container"], [1, "message-fork-chips"], [1, "message-footer"], [1, "agent-details-section"], [1, "agent-details-panel"], [1, "message-reactions"], ["role", "note", 1, "fork-marker"], ["alt", "User avatar", 1, "avatar-image", 3, "src"], [3, "class"], [1, "fas", "fa-user"], ["alt", "Assistant avatar", 1, "avatar-image", 3, "src"], [1, "fas", 3, "ngClass"], ["alt", "Assistant avatar", 1, "avatar-image", 3, "error", "src"], [1, "message-status"], [1, "status-text"], [1, "time-pill", 3, "title"], [1, "liveness-label"], ["type", "button", 1, "stop-run-pill", 3, "click", "disabled", "title"], ["title", "Provide Test Feedback", 1, "test-feedback-icon", 3, "click"], [1, "fas", "fa-flask"], ["role", "group", "aria-label", "Message actions", 1, "message-action-group"], ["type", "button", "title", "Edit message", "aria-label", "Edit message", 1, "message-header-action", "message-action-edit"], ["type", "button", "title", "Fork from here", "aria-label", "Fork from here", 1, "message-header-action", "message-action-fork"], ["type", "button", 1, "message-header-action", "message-action-regenerate", 3, "title"], ["type", "button", "title", "Edit message", "aria-label", "Edit message", 1, "message-header-action", "message-action-edit", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-pen"], ["type", "button", "title", "Fork from here", "aria-label", "Fork from here", 1, "message-header-action", "message-action-fork", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-code-branch"], [1, "action-label-long"], [1, "action-label-short"], ["type", "button", 1, "message-header-action", "message-action-regenerate", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-rotate-left"], [1, "agent-run-icon", 3, "click", "title"], [1, "fas", "fa-cog"], [1, "rating-badge"], [1, "message-text"], [3, "data", "enableCollapsibleHeadings"], [1, "edited-badge"], [1, "stopped-line"], [1, "stopped-actions"], [1, "message-attachments"], [1, "artifact-wrapper", 3, "system-artifact"], [3, "FormDefinition", "Disabled"], [3, "commands", "disabled", "isLastMessage", "isConversationOwner"], ["aria-hidden", "true", 1, "fa-solid", "fa-stop"], ["mjButton", "", "Variant", "outline", "Size", "sm", "type", "button", "title", "Continue where you left off", 1, "continue-run", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-play"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "attachment-item", "image-attachment", 3, "title"], [1, "attachment-strip", 3, "is-artifact", "title"], [1, "attachment-item", "image-attachment", 3, "click", "title"], ["loading", "lazy", 1, "attachment-thumbnail", 3, "src", "alt"], [1, "attachment-overlay"], [1, "fas", "fa-expand"], [1, "attachment-strip", 3, "click", "title"], [1, "attachment-badge"], [1, "attachment-meta"], [1, "file-name"], [1, "file-size"], [1, "artifact-wrapper"], [3, "actionPerformed", "artifactId", "artifact", "artifactVersion", "currentUser"], [1, "artifact-pending"], ["size", "small", 3, "text"], [3, "FormSubmitted", "FormDefinition", "Disabled"], [3, "commandExecuted", "commands", "disabled", "isLastMessage", "isConversationOwner"], ["rows", "4", "placeholder", "Edit your message...", 1, "message-edit-textarea", 3, "ngModelChange", "keydown", "ngModel"], [1, "edit-actions"], ["mjButton", "", "Variant", "primary", "Size", "sm", 3, "click"], ["aria-hidden", "true"], ["mjButton", "", "Variant", "secondary", "Size", "sm", 3, "click"], ["aria-hidden", "true", 1, "fas", "fa-times"], [1, "edit-note"], [1, "edit-hint"], ["mjButton", "", "Variant", "flat", "Size", "sm", "data-kind", "Original", 1, "fork-chip"], ["mjButton", "", "Variant", "flat", "Size", "sm", 1, "fork-chip"], ["mjButton", "", "Variant", "flat", "Size", "sm", "data-kind", "Original", 1, "fork-chip", 3, "click"], [1, "fork-chip-name"], [1, "fork-chip-time"], ["mjButton", "", "Variant", "flat", "Size", "sm", 1, "fork-chip", 3, "click"], ["aria-hidden", "true", 1, "fork-chip-avatars"], [1, "fork-chip-messages"], [1, "fork-chip-avatar", 3, "title"], ["alt", "", 3, "src"], ["title", "Delete this message and all messages below it", 1, "action-bar-btn", "danger", "inline-delete"], [1, "ai-message-actions"], ["title", "Delete this message and all messages below it", 1, "action-bar-btn", "danger", "inline-delete", 3, "click"], [1, "fas", "fa-trash"], ["type", "button", 1, "action-bar-btn", "labeled", "regenerate-btn", 3, "title"], ["type", "button", 1, "action-bar-btn", "labeled", "regenerate-btn", 3, "click", "title"], [3, "conversationDetailId", "currentUser", "ratingEntityName", "ratingsData", "canEdit"], ["type", "button", 1, "action-bar-btn", "pin-btn", 3, "pinned", "title"], ["type", "button", 1, "action-bar-btn", "pin-btn", 3, "click", "title"], [1, "fas", "fa-thumbtack"], [1, "agent-details-content"], [1, "agent-panel-actions"], [1, "agent-details-tasks"], [1, "agent-details-header"], [1, "fas", "fa-chart-line"], ["title", "Open agent details", 1, "agent-name-link", 3, "click"], [1, "agent-details-grid"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], ["title", "Open agent run details", 1, "run-id-link", 3, "click"], [1, "fas", "fa-external-link-alt"], [1, "detail-value", "status-badge"], ["title", "Delete this message and all messages below it", 1, "action-bar-btn", "danger"], ["title", "Delete this message and all messages below it", 1, "action-bar-btn", "danger", 3, "click"], [3, "conversationDetailId", "currentUser", "ratingsData", "canEdit"], [1, "tasks-section-header"], [1, "fas", "fa-tasks"], [1, "tasks-list"], [3, "task", "compact", "clickable", "showProgress", "showDuration"], [1, "reaction-btn", 3, "click"], [1, "far", "fa-thumbs-up"], [1, "reaction-count"], [1, "far", "fa-comment"], [1, "fork-marker-text"], ["aria-hidden", "true", 1, "fork-marker-line"]], template: function MessageItemComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MessageItemComponent, selectors: [["mj-conversation-message-item"]], inputs: { message: "message", Conversation: "Conversation", conversation: "conversation", CurrentUser: "CurrentUser", currentUser: "currentUser", AllMessages: "AllMessages", allMessages: "allMessages", ForkChips: "ForkChips", ForkRail: "ForkRail", ForkMarkerText: "ForkMarkerText", CanFork: "CanFork", InPlaceRole: "InPlaceRole", IsLatestTurn: "IsLatestTurn", EditOpenElsewhere: "EditOpenElsewhere", PendingReplace: "PendingReplace", IsProcessing: "IsProcessing", IsStreaming: "IsStreaming", isProcessing: "isProcessing", Artifact: "Artifact", artifact: "artifact", artifactVersion: "artifactVersion", Artifacts: "Artifacts", artifacts: "artifacts", AgentRun: "AgentRun", agentRun: "agentRun", UserAvatarMap: "UserAvatarMap", userAvatarMap: "userAvatarMap", Ratings: "Ratings", ratings: "ratings", IsLastMessage: "IsLastMessage", isLastMessage: "isLastMessage", Attachments: "Attachments", attachments: "attachments", PendingArtifacts: "PendingArtifacts", pendingArtifacts: "pendingArtifacts", MessageExtraTemplate: "MessageExtraTemplate", messageExtraTemplate: "messageExtraTemplate", ShowAgentRunDetails: "ShowAgentRunDetails", showAgentRunDetails: "showAgentRunDetails", ShowReactions: "ShowReactions", showReactions: "showReactions", ShowMessageRating: "ShowMessageRating", showMessageRating: "showMessageRating", AllowPinning: "AllowPinning", allowPinning: "allowPinning", AllowMessageEdit: "AllowMessageEdit", allowMessageEdit: "allowMessageEdit", AllowMessageDelete: "AllowMessageDelete", allowMessageDelete: "allowMessageDelete", ReadOnly: "ReadOnly", AllowStopRun: "AllowStopRun", InFlightCount: "InFlightCount", AssistantDisplayName: "AssistantDisplayName", assistantDisplayName: "assistantDisplayName", AssistantAvatarUrl: "AssistantAvatarUrl", assistantAvatarUrl: "assistantAvatarUrl" }, outputs: { ForkOpenRequested: "ForkOpenRequested", ResendInPlaceRequested: "ResendInPlaceRequested", EditingChanged: "EditingChanged", EditClicked: "EditClicked", editClicked: "editClicked", DeleteClicked: "DeleteClicked", deleteClicked: "deleteClicked", RegenerateRequested: "RegenerateRequested", RetryClicked: "RetryClicked", retryClicked: "retryClicked", TestFeedbackClicked: "TestFeedbackClicked", testFeedbackClicked: "testFeedbackClicked", ArtifactClicked: "ArtifactClicked", artifactClicked: "artifactClicked", ArtifactActionPerformed: "ArtifactActionPerformed", artifactActionPerformed: "artifactActionPerformed", MessageEdited: "MessageEdited", messageEdited: "messageEdited", OpenEntityRecord: "OpenEntityRecord", openEntityRecord: "openEntityRecord", SuggestedResponseSelected: "SuggestedResponseSelected", suggestedResponseSelected: "suggestedResponseSelected", AttachmentClicked: "AttachmentClicked", attachmentClicked: "attachmentClicked", DiagnosticRequested: "DiagnosticRequested", diagnosticRequested: "diagnosticRequested", MessagePinToggled: "MessagePinToggled", messagePinToggled: "messagePinToggled", LivenessCheckRequested: "LivenessCheckRequested", BeforeResponseFormSubmitted: "BeforeResponseFormSubmitted", beforeResponseFormSubmitted: "beforeResponseFormSubmitted", AfterResponseFormSubmitted: "AfterResponseFormSubmitted", afterResponseFormSubmitted: "afterResponseFormSubmitted", EditResendRequested: "EditResendRequested", ForkRequested: "ForkRequested", BeforeStopClicked: "BeforeStopClicked", StopRequested: "StopRequested", TaskGraphPanelRequested: "TaskGraphPanelRequested", taskGraphPanelRequested: "taskGraphPanelRequested", ScrollToMessageRequested: "ScrollToMessageRequested", scrollToMessageRequested: "scrollToMessageRequested" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 27, vars: 29, consts: [[3, "click"], [1, "message-avatar"], [1, "avatar-circle"], [1, "message-content"], [1, "message-header"], [1, "message-sender", 3, "title"], [1, "message-time"], [1, "message-status", 3, "error"], [1, "time-pill", 3, "in-progress", "active", "complete", "stopped", "failed", "checking", "stalled", "title"], ["type", "button", 1, "stop-run-pill", 3, "disabled", "title"], ["title", "Provide Test Feedback", 1, "test-feedback-icon"], ["role", "group", "aria-label", "Message actions", 1, "message-action-group", 3, "labeled"], [1, "agent-run-icon", 3, "expanded", "title"], [1, "message-body"], [1, "message-edit-container"], [1, "message-fork-chips"], [1, "message-footer"], [1, "agent-details-section"], [1, "agent-details-panel"], [1, "message-reactions"], ["role", "note", 1, "fork-marker"], ["alt", "User avatar", 1, "avatar-image", 3, "src"], [3, "class"], [1, "fas", "fa-user"], ["alt", "Assistant avatar", 1, "avatar-image", 3, "src"], [1, "fas", 3, "ngClass"], ["alt", "Assistant avatar", 1, "avatar-image", 3, "error", "src"], [1, "message-status"], [1, "status-text"], [1, "time-pill", 3, "title"], [1, "liveness-label"], ["type", "button", 1, "stop-run-pill", 3, "click", "disabled", "title"], ["title", "Provide Test Feedback", 1, "test-feedback-icon", 3, "click"], [1, "fas", "fa-flask"], ["role", "group", "aria-label", "Message actions", 1, "message-action-group"], ["type", "button", "title", "Edit message", "aria-label", "Edit message", 1, "message-header-action", "message-action-edit"], ["type", "button", "title", "Fork from here", "aria-label", "Fork from here", 1, "message-header-action", "message-action-fork"], ["type", "button", 1, "message-header-action", "message-action-regenerate", 3, "title"], ["type", "button", "title", "Edit message", "aria-label", "Edit message", 1, "message-header-action", "message-action-edit", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-pen"], ["type", "button", "title", "Fork from here", "aria-label", "Fork from here", 1, "message-header-action", "message-action-fork", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-code-branch"], [1, "action-label-long"], [1, "action-label-short"], ["type", "button", 1, "message-header-action", "message-action-regenerate", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-rotate-left"], [1, "agent-run-icon", 3, "click", "title"], [1, "fas", "fa-cog"], [1, "rating-badge"], ["type", "button", "title", "Scroll to originating workflow card and step artifacts", 1, "workflow-continuation-banner"], [1, "message-text"], [3, "ImageClicked", "data", "enableCollapsibleHeadings"], [1, "edited-badge"], [1, "stopped-line"], [1, "stopped-actions"], [1, "message-attachments"], [1, "workflow-execution-card", 3, "class"], [1, "multi-artifact-showcase"], [1, "artifact-wrapper", 3, "system-artifact"], [3, "FormDefinition", "Disabled"], [3, "commands", "disabled", "isLastMessage", "isConversationOwner"], ["type", "button", "title", "Scroll to originating workflow card and step artifacts", 1, "workflow-continuation-banner", 3, "click"], [1, "continuation-banner-left"], ["aria-hidden", "true", 1, "fa-solid", "fa-diagram-project", "continuation-banner-icon"], [1, "continuation-banner-label"], [1, "continuation-banner-sep"], [1, "continuation-banner-name"], [1, "continuation-banner-jump"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrow-up-long"], ["aria-hidden", "true", 1, "fa-solid", "fa-stop"], ["mjButton", "", "Variant", "outline", "Size", "sm", "type", "button", "title", "Continue where you left off", 1, "continue-run", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-play"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "attachment-item", "image-attachment", 3, "title"], [1, "attachment-strip", 3, "is-artifact", "title"], [1, "attachment-item", "image-attachment", 3, "click", "title"], ["loading", "lazy", 1, "attachment-thumbnail", 3, "src", "alt"], [1, "attachment-overlay"], [1, "fas", "fa-expand"], [1, "attachment-strip", 3, "click", "title"], [1, "attachment-badge"], [1, "attachment-meta"], [1, "file-name"], [1, "file-size"], [1, "workflow-execution-card"], [1, "workflow-card-header", 3, "click"], [1, "workflow-header-left"], [1, "workflow-status-icon"], [1, "fa-solid", "fa-circle-notch", "fa-spin"], [1, "fa-solid", "fa-circle-check"], [1, "fa-solid", "fa-circle-exclamation"], [1, "fa-solid", "fa-ban"], [1, "workflow-title-group"], [1, "workflow-title-row"], [1, "workflow-title"], [1, "workflow-badge"], [1, "workflow-subtitle"], [1, "workflow-dot"], [1, "workflow-header-right"], ["type", "button", "title", "View visual task graph in side panel", 1, "workflow-graph-btn"], ["title", "Workflow execution time", 1, "workflow-duration-pill"], [1, "fa-regular", "fa-clock"], ["type", "button", 1, "workflow-collapse-btn", 3, "title"], ["role", "progressbar", "aria-valuemin", "0", "aria-valuemax", "100", 1, "workflow-progress-track"], [1, "workflow-progress-fill"], [1, "workflow-steps-pipeline"], [1, "workflow-skipped-count"], ["type", "button", "title", "View visual task graph in side panel", 1, "workflow-graph-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-diagram-project"], ["type", "button", 1, "workflow-collapse-btn", 3, "click", "title"], [1, "workflow-collapse-label"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down", "workflow-collapse-chevron"], [1, "workflow-step-item", 3, "class", "is-expanded"], [1, "workflow-step-item"], [1, "workflow-step-rail"], [1, "workflow-step-node"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-check"], [1, "fa-solid", "fa-xmark"], ["title", "Skipped (conditional prerequisite not met)", 1, "fa-solid", "fa-forward-step"], [1, "step-index-num"], [1, "workflow-step-connector", 3, "is-complete"], [1, "workflow-step-content", 3, "click"], [1, "workflow-step-main-row"], [1, "workflow-step-identity"], [1, "workflow-step-name"], [1, "workflow-step-agent-chip"], [1, "workflow-step-meta"], [1, "workflow-step-duration", 3, "is-skipped"], ["type", "button", "title", "Open AI Agent Run record", 1, "workflow-step-run-btn"], [1, "fa-solid", "fa-chevron-down", "workflow-step-chevron", 3, "rotated"], [1, "workflow-step-details"], [1, "workflow-step-connector"], [1, "fa-solid", "fa-robot"], [1, "workflow-step-duration"], ["type", "button", "title", "Open AI Agent Run record", 1, "workflow-step-run-btn", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "fa-solid", "fa-chevron-down", "workflow-step-chevron"], [1, "artifact-wrapper"], [3, "actionPerformed", "artifactId", "artifact", "artifactVersion", "currentUser"], [1, "multi-artifact-supporting-section"], ["type", "button", 1, "supporting-artifacts-header", 3, "click"], [1, "supporting-header-left"], ["aria-hidden", "true", 1, "fa-solid", "fa-layer-group", "supporting-header-icon"], [1, "supporting-header-title"], [1, "supporting-header-count"], [1, "supporting-collapsed-preview"], [1, "supporting-header-right"], [1, "supporting-toggle-hint"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down", "supporting-chevron"], [1, "supporting-artifacts-grid"], [1, "multi-artifact-primary-section"], [1, "supporting-preview-pill"], [1, "artifact-wrapper", "supporting-artifact-cell", 3, "system-artifact"], [1, "artifact-wrapper", "supporting-artifact-cell"], [1, "supporting-step-badge", 3, "title"], [1, "primary-artifact-header"], ["aria-hidden", "true", 1, "fa-solid", "fa-star", "primary-header-icon"], [1, "primary-header-title"], [1, "primary-step-badge"], [1, "artifact-wrapper", "primary-artifact-card"], [1, "artifact-pending"], ["size", "small", 3, "text"], [3, "FormSubmitted", "FormDefinition", "Disabled"], [3, "commandExecuted", "commands", "disabled", "isLastMessage", "isConversationOwner"], ["rows", "4", "placeholder", "Edit your message...", 1, "message-edit-textarea", 3, "ngModelChange", "keydown", "ngModel"], [1, "edit-actions"], ["mjButton", "", "Variant", "primary", "Size", "sm", 3, "click"], ["aria-hidden", "true"], ["mjButton", "", "Variant", "secondary", "Size", "sm", 3, "click"], ["aria-hidden", "true", 1, "fas", "fa-times"], [1, "edit-note"], [1, "edit-hint"], ["mjButton", "", "Variant", "flat", "Size", "sm", "data-kind", "Original", 1, "fork-chip"], ["mjButton", "", "Variant", "flat", "Size", "sm", 1, "fork-chip"], ["mjButton", "", "Variant", "flat", "Size", "sm", "data-kind", "Original", 1, "fork-chip", 3, "click"], [1, "fork-chip-name"], [1, "fork-chip-time"], ["mjButton", "", "Variant", "flat", "Size", "sm", 1, "fork-chip", 3, "click"], ["aria-hidden", "true", 1, "fork-chip-avatars"], [1, "fork-chip-messages"], [1, "fork-chip-avatar", 3, "title"], ["alt", "", 3, "src"], ["title", "Delete this message and all messages below it", 1, "action-bar-btn", "danger", "inline-delete"], [1, "ai-message-actions"], ["title", "Delete this message and all messages below it", 1, "action-bar-btn", "danger", "inline-delete", 3, "click"], [1, "fas", "fa-trash"], ["type", "button", 1, "action-bar-btn", "labeled", "regenerate-btn", 3, "title"], ["type", "button", 1, "action-bar-btn", "labeled", "regenerate-btn", 3, "click", "title"], [3, "conversationDetailId", "currentUser", "ratingEntityName", "ratingsData", "canEdit"], ["type", "button", 1, "action-bar-btn", "pin-btn", 3, "pinned", "title"], ["type", "button", 1, "action-bar-btn", "pin-btn", 3, "click", "title"], [1, "fas", "fa-thumbtack"], [1, "agent-details-content"], [1, "agent-panel-actions"], [1, "agent-details-tasks"], [1, "agent-details-header"], [1, "fas", "fa-chart-line"], ["title", "Open agent details", 1, "agent-name-link", 3, "click"], [1, "agent-details-grid"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], ["title", "Open agent run details", 1, "run-id-link", 3, "click"], [1, "fas", "fa-external-link-alt"], [1, "detail-value", "status-badge"], ["title", "Delete this message and all messages below it", 1, "action-bar-btn", "danger"], ["title", "Delete this message and all messages below it", 1, "action-bar-btn", "danger", 3, "click"], [3, "conversationDetailId", "currentUser", "ratingsData", "canEdit"], [1, "tasks-section-header"], [1, "fas", "fa-tasks"], [1, "tasks-list"], [3, "task", "compact", "clickable", "showProgress", "showDuration"], [1, "reaction-btn", 3, "click"], [1, "far", "fa-thumbs-up"], [1, "reaction-count"], [1, "far", "fa-comment"], [1, "fork-marker-text"], ["aria-hidden", "true", 1, "fork-marker-line"]], template: function MessageItemComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("click", function MessageItemComponent_Template_div_click_0_listener($event) { return ctx.onMessageBubbleClick($event); });
             i0.ɵɵelementStart(1, "div", 1)(2, "div", 2);
@@ -3356,7 +4449,7 @@ export class MessageItemComponent extends BaseAngularComponent {
             i0.ɵɵconditionalCreate(17, MessageItemComponent_Conditional_17_Template, 3, 4, "span", 12);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(18, "div", 13);
-            i0.ɵɵconditionalCreate(19, MessageItemComponent_Conditional_19_Template, 13, 9);
+            i0.ɵɵconditionalCreate(19, MessageItemComponent_Conditional_19_Template, 15, 12);
             i0.ɵɵconditionalCreate(20, MessageItemComponent_Conditional_20_Template, 12, 6, "div", 14);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(21, MessageItemComponent_Conditional_21_Template, 3, 0, "div", 15);
@@ -3406,11 +4499,11 @@ export class MessageItemComponent extends BaseAngularComponent {
             i0.ɵɵconditional(ctx.showReactions && !ctx.isProcessing && !ctx.isInProgressAIMessage && !ctx.isEditing ? 25 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.ForkMarkerText ? 26 : -1);
-        } }, dependencies: [i5.NgClass, i5.NgTemplateOutlet, i6.DefaultValueAccessor, i6.NgControlStatus, i6.NgModel, i7.MJButtonDirective, i8.ArtifactMessageCardComponent, i9.LoadingComponent, i4.MarkdownComponent, i10.DynamicFormComponent, i11.ActionableCommandsComponent, i12.ConversationMessageRatingComponent, i13.TaskWidgetComponent, i5.DatePipe], styles: [".message-item[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  padding: 8px 24px;\n  transition: background-color 150ms ease;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease;\n  position: relative;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.message-item.ai-message[_ngcontent-%COMP%] {\n  background-color: transparent;\n}\n\n.message-item.user-message[_ngcontent-%COMP%] {\n  background-color: transparent;\n}\n\n\n.message-item.pin-beacon[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_pinBeacon 1.5s ease-out forwards;\n}\n\n@keyframes _ngcontent-%COMP%_pinBeacon {\n  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-warning) 60%, transparent); }\n  20%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--mj-status-warning) 35%, transparent); }\n  50%  { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-status-warning) 15%, transparent); }\n  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mj-status-warning) 20%, transparent); }\n  100% { box-shadow: none; }\n}\n\n\n.message-item.search-hit-highlight[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_searchHitHighlight 2s ease-out forwards;\n}\n\n@keyframes _ngcontent-%COMP%_searchHitHighlight {\n  0%   { background-color: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent); }\n  70%  { background-color: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); }\n  100% { background-color: transparent; }\n}\n\n.message-item.in-progress[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  border-left: 3px solid var(--mj-brand-primary);\n  position: relative;\n}\n\n@keyframes _ngcontent-%COMP%_shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n\n\n.message-item.in-progress[_ngcontent-%COMP%]   .message-text[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: 500;\n  max-height: 150px;\n  overflow-y: auto;\n  display: block;\n}\n\n\n\n\n\n\n.message-item.in-progress.streaming[_ngcontent-%COMP%]   .message-text[_ngcontent-%COMP%] {\n  max-height: none;\n  overflow-y: visible;\n  font-weight: inherit;\n}\n\n\n\n.message-item.in-progress[_ngcontent-%COMP%]   .avatar-circle[_ngcontent-%COMP%] {\n  box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-brand-primary) 70%, transparent);\n  animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-brand-primary) 70%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 0%, transparent);\n  }\n}\n\n.message-item[_ngcontent-%COMP%]:hover {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 2%, transparent);\n}\n\n\n[_nghost-%COMP%]     .mention-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 12px;\n  margin: 0 3px;\n  border-radius: 16px;\n  font-weight: 600;\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n\n[_nghost-%COMP%]     .mention-badge.agent {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n}\n\n[_nghost-%COMP%]     .mention-badge.user {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n}\n\n[_nghost-%COMP%]     .mention-badge.entity {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n}\n\n[_nghost-%COMP%]     .mention-badge.query {\n  background: var(--mj-status-warning);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n}\n\n[_nghost-%COMP%]     .mention-badge.record {\n  background: var(--mj-color-info, #2563eb);\n  color: var(--mj-text-inverse, #fff);\n  border: 2px solid color-mix(in srgb, var(--mj-color-info, #2563eb) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n  text-decoration: none;\n}\n\n\n[_nghost-%COMP%]     .mention-badge.record.icon-only {\n  padding: 4px 7px;\n  gap: 0;\n  min-width: 1.65em;\n  justify-content: center;\n}\n\n\n\n\n[_nghost-%COMP%]     .mention-badge.skill {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-text-inverse) 35%, transparent);\n  border-radius: 4px;\n  box-shadow: var(--mj-shadow-md);\n}\n\n[_nghost-%COMP%]     .mention-badge i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n\n\n[_nghost-%COMP%]     .mention-badge i[class^=\"mj-icon-\"], \n[_nghost-%COMP%]     .mention-badge i[class*=\" mj-icon-\"] {\n  width: 16px;\n  height: 16px;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  vertical-align: middle;\n  font-size: inherit;\n}\n\n\n[_nghost-%COMP%]     .mention-badge i.mj-icon-skip {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E\");\n}\n\n\n[_nghost-%COMP%]     .mention-badge i.mj-icon-betty {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23FF6B6B'/%3E%3Ctext x='50' y='65' text-anchor='middle' font-size='40' fill='white' font-family='Arial, sans-serif' font-weight='bold'%3EB%3C/text%3E%3C/svg%3E\");\n}\n\n\n[_nghost-%COMP%]     .mention-badge i.mj-icon-izzy {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 204 180'%3E%3Cpath d='M0 0 C3.61144774 3.08477828 4.84942137 4.90830493 5.5 9.625 C5 13 5 13 3.5 14.9375 C1.74432121 17.35155834 1.83578869 18.21944114 1.90625 21.12890625 C1.9371875 22.40636719 1.968125 23.68382813 2 25 C3.18335937 24.72285156 4.36671875 24.44570313 5.5859375 24.16015625 C22.44010416 20.26839867 22.44010416 20.26839867 30 20 C31.80210938 19.92265625 31.80210938 19.92265625 33.640625 19.84375 C47.49356199 19.44904163 61.73614427 20.86627802 75 25 C75.53596907 19.64244551 75.53596907 19.64244551 73.5 15 C71.5549761 12.4066348 71.45048389 10.16629658 71.59375 6.97265625 C72.33633815 3.36681955 74.01253991 1.99164006 77 0 C79.80907914 -0.63997166 82.18961327 -0.63020793 85 0 C87.8100346 1.79363911 89.50940468 3.01880935 91 6 C90.984375 8.05859375 90.984375 8.05859375 90.75 10.4375 C90.68296875 11.21996094 90.6159375 12.00242187 90.546875 12.80859375 C90 15 90 15 88.49609375 16.3984375 C86.25734576 18.79500846 86.4852344 20.97464008 86.3125 24.1875 C86.21388672 25.81751953 86.21388672 25.81751953 86.11328125 27.48046875 C86.07589844 28.31191406 86.03851563 29.14335937 86 30 C86.67675781 30.0825 87.35351562 30.165 88.05078125 30.25 C91.82333306 31.20937741 94.89353787 32.99425194 98.1875 35 C99.18052124 35.60448975 99.18052124 35.60448975 100.19360352 36.22119141 C111.98050012 43.58460075 121.17745776 53.2687532 127 66 C127 66.66 127 67.32 127 68 C127.721875 68.0825 128.44375 68.165 129.1875 68.25 C133.81406141 69.48374971 136.2179022 71.66516963 138.625 75.7734375 C140.97801199 81.55147269 140.43210927 87.87027126 140.375 94 C140.38660156 95.24523437 140.39820313 96.49046875 140.41015625 97.7734375 C140.3675701 111.08870765 140.3675701 111.08870765 135.5 116.7421875 C131.62323281 119.66995439 128.8523137 121.14337998 124 121.125 C122.9790625 121.12886719 122.9790625 121.12886719 121.9375 121.1328125 C120 121 120 121 117 120 C116.74347656 120.65226562 116.48695313 121.30453125 116.22265625 121.9765625 C115.83980469 122.85054688 115.45695313 123.72453125 115.0625 124.625 C114.70285156 125.48351562 114.34320313 126.34203125 113.97265625 127.2265625 C108.57908063 134.80960941 99.56813916 137.59212379 91.0625 140.375 C90.02287109 140.72949219 88.98324219 141.08398438 87.91210938 141.44921875 C80.34347852 144 80.34347852 144 78 144 C78.02094727 144.65484375 78.04189453 145.3096875 78.06347656 145.984375 C78.14730383 148.98942328 78.19886895 151.99422464 78.25 155 C78.28351563 156.02996094 78.31703125 157.05992187 78.3515625 158.12109375 C78.43361416 164.56214867 77.93369275 169.71304442 74 175 C68.75523423 179.17440541 64.68195675 180.53237245 58 180 C55.12653443 178.963898 52.49379495 177.58020045 49.8125 176.125 C49.11447266 175.76019531 48.41644531 175.39539063 47.69726562 175.01953125 C46.39868999 174.33997216 45.10309803 173.65465367 43.81176758 172.96142578 C43.21388428 172.64415527 42.61600098 172.32688477 42 172 C41.34290039 171.59402588 40.68580078 171.18805176 40.00878906 170.76977539 C38.03672401 169.77639533 38.03672401 169.77639533 36.12475586 170.58325195 C35.49448486 170.96441162 34.86421387 171.34557129 34.21484375 171.73828125 C33.17166992 172.35026367 33.17166992 172.35026367 32.10742188 172.97460938 C31.39134766 173.41611328 30.67527344 173.85761719 29.9375 174.3125 C28.51029236 175.1647359 27.08194984 176.01507485 25.65234375 176.86328125 C25.02320068 177.24782471 24.39405762 177.63236816 23.74584961 178.02856445 C19.79572932 180.2265128 16.44037501 180.296025 12 180 C6.82155197 178.33236419 3.95074467 176.59004726 1 172 C-0.72417326 168.34258111 -1.2403609 165.51230089 -1.1953125 161.48046875 C-1.18886719 160.45888672 -1.18242188 159.43730469 -1.17578125 158.38476562 C-1.15902344 157.32966797 -1.14226563 156.27457031 -1.125 155.1875 C-1.11597656 154.11306641 -1.10695312 153.03863281 -1.09765625 151.93164062 C-1.07415306 149.28753146 -1.04129575 146.64388128 -1 144 C-1.63196289 143.81171631 -2.26392578 143.62343262 -2.91503906 143.42944336 C-8.20708475 141.84808949 -13.49207901 140.2541307 -18.75 138.5625 C-19.98234375 138.17191406 -21.2146875 137.78132812 -22.484375 137.37890625 C-29.06200008 134.79901552 -34.12925122 130.90130551 -38 125 C-38.875 121.5625 -38.875 121.5625 -39 119 C-39.495 119.33 -39.99 119.66 -40.5 120 C-45.24354984 121.89741993 -49.49426304 121.53143657 -54.1875 119.875 C-58.42051121 117.05299253 -61.35909664 113.92271008 -63 109 C-63.22709306 104.92471184 -63.22828659 100.8492307 -63.24023438 96.76806641 C-63.2498982 94.77103695 -63.28108516 92.77414948 -63.3125 90.77734375 C-63.36188158 78.59243786 -63.36188158 78.59243786 -60 73 C-57.7509823 70.86631654 -55.88785241 69.35340008 -53.0078125 68.20703125 C-50.3010212 66.57979679 -49.65488803 64.83796148 -48.3125 62 C-45.06106922 55.7428385 -40.95735135 50.97447519 -36 46 C-35.40832031 45.38511719 -34.81664063 44.77023438 -34.20703125 44.13671875 C-28.97373562 39.11136864 -17.47215548 30 -10 30 C-10.08733973 27.91589342 -10.19552278 25.83265331 -10.3125 23.75 C-10.37050781 22.58984375 -10.42851563 21.4296875 -10.48828125 20.234375 C-11.02905532 16.81635262 -11.84853545 15.59874271 -14 13 C-14.54046356 8.75350057 -14.48376179 6.74176808 -12.125 3.125 C-8.57275398 -0.42724602 -4.8825369 -0.970906 0 0 Z M5 35 C4.30245605 35.21962402 3.60491211 35.43924805 2.88623047 35.66552734 C-14.1501062 41.15773444 -29.02751477 50.81254544 -39 66 C-39.33 66.99 -39.66 67.98 -40 69 C-37.525 70.98 -37.525 70.98 -35 73 C-34.52691406 72.29875 -34.05382812 71.5975 -33.56640625 70.875 C-21.08320269 52.96537462 -2.17172019 42.38052109 19.26171875 38.5078125 C46.97805996 34.9959591 75.10426623 38.71529466 97.73046875 56.09765625 C103.53827054 61.07953766 107.9264808 66.53902088 112 73 C113.32 72.01 114.64 71.02 116 70 C115.01713954 61.60788376 107.55262518 55.04847712 101.375 49.8125 C82.80696113 35.82916208 61.35998978 30.59265576 38.375 30.625 C37.71836365 30.62554382 37.06172729 30.62608765 36.38519287 30.62664795 C25.42439402 30.66823796 15.42390121 31.62072499 5 35 Z' fill='%234E3B78' transform='translate(63,0)'/%3E%3Cpath d='M0 0 C5.27957047 5.78547525 9.31612861 13.25448014 10 21.125 C9.69743213 24.83293961 8.77676366 26.8914086 6.1875 29.5625 C-2.04152489 35.76003038 -13.60917874 39.6270706 -23.875 38.8125 C-24.535 38.1525 -25.195 37.4925 -25.875 36.8125 C-28.97847254 36.48234335 -31.03281176 36.30718706 -33.75 37.9375 C-35.40354531 40.69340884 -35.26865568 42.66325452 -34.875 45.8125 C-33.95833333 47.89583333 -33.95833333 47.89583333 -31.875 48.8125 C-28.29166667 48.89583333 -28.29166667 48.89583333 -24.875 47.8125 C-24.57086182 47.16466553 -24.26672363 46.51683105 -23.95336914 45.84936523 C-22.875 43.8125 -22.875 43.8125 -20.77124023 42.88696289 C-19.91731689 42.6883667 -19.06339355 42.48977051 -18.18359375 42.28515625 C-17.23806641 42.04990234 -16.29253906 41.81464844 -15.31835938 41.57226562 C-14.32642578 41.34216797 -13.33449219 41.11207031 -12.3125 40.875 C-4.77934417 39.10870895 1.54823541 36.95205932 8.125 32.8125 C7.81647145 40.06292099 4.56245219 45.32546918 -0.5 50.4609375 C-5.29811284 54.61130511 -8.83216751 54.86916719 -15 55 C-21.13677833 55.26569953 -25.04589225 56.51893716 -29.890625 60.31640625 C-39.17633501 67.31724667 -52.82450605 66.52799961 -63.875 65.8125 C-71.37432145 64.60538489 -79.4496824 61.2378176 -84.875 55.8125 C-86.81199027 55.70419517 -88.75076074 55.60687514 -90.69067383 55.58691406 C-97.68300211 55.51299157 -103.12007731 55.4392364 -108.44140625 50.40234375 C-108.91449219 49.87769531 -109.38757813 49.35304688 -109.875 48.8125 C-110.6175 48.090625 -111.36 47.36875 -112.125 46.625 C-118.35765562 36.60823203 -119.69570866 25.34707186 -117.25 13.8828125 C-113.47065738 3.0509466 -104.76645407 -4.0120534 -94.875 -9.1875 C-91.26850975 -10.75400624 -87.62602625 -12.0153043 -83.875 -13.1875 C-83.029375 -13.47496094 -82.18375 -13.76242188 -81.3125 -14.05859375 C-56.0861494 -22.29657387 -20.04377266 -18.06142152 0 0 Z' fill='%23FDFDFD' transform='translate(155.875,64.1875)'/%3E%3Cpath d='M0 0 C5.24479788 1.58079188 9.51172656 4.60408712 14.06640625 7.58984375 C18.37837094 10.28462973 18.37837094 10.28462973 23.30859375 11.1328125 C28.49696048 9.20971132 33.08639658 6.29555589 37.79882812 3.42578125 C43.66838131 -0.00837477 43.66838131 -0.00837477 47.27734375 0.078125 C49.34375 1.0078125 49.34375 1.0078125 51.34375 3.0078125 C51.82984303 7.30136192 51.71414913 11.62739332 51.71875 15.9453125 C51.74324219 17.15123047 51.76773438 18.35714844 51.79296875 19.59960938 C51.79876953 21.33114258 51.79876953 21.33114258 51.8046875 23.09765625 C51.81290527 24.15847412 51.82112305 25.21929199 51.82958984 26.31225586 C51.34375 29.0078125 51.34375 29.0078125 49.48461914 30.87670898 C46.29658529 32.56106989 44.78123809 32.062357 41.34375 31.0078125 C37.60135447 29.03986817 34.07891261 26.72386924 30.53320312 24.42578125 C26.44214688 21.80182316 26.44214688 21.80182316 21.77734375 20.921875 C17.60401055 22.78413283 13.85973006 25.2663764 10.046875 27.76953125 C5.85335687 30.41401513 2.44659272 31.9581498 -2.65625 32.0078125 C-4.33203125 30.87695312 -4.33203125 30.87695312 -5.65625 29.0078125 C-6.04443359 26.328125 -6.04443359 26.328125 -6.0546875 23.1328125 C-6.05855469 21.98296875 -6.06242187 20.833125 -6.06640625 19.6484375 C-6.05480469 18.44703125 -6.04320313 17.245625 -6.03125 16.0078125 C-6.04285156 14.80640625 -6.05445312 13.605 -6.06640625 12.3671875 C-6.06253906 11.21734375 -6.05867188 10.0675 -6.0546875 8.8828125 C-6.05130371 7.82835937 -6.04791992 6.77390625 -6.04443359 5.6875 C-5.65625 3.0078125 -5.65625 3.0078125 -4.29736328 1.14111328 C-2.65625 0.0078125 -2.65625 0.0078125 0 0 Z' fill='%23FCFCFD' transform='translate(78.65625,136.9921875)'/%3E%3Cpath d='M0 0 C2.5 0.625 2.5 0.625 4.8125 2.625 C6.96830116 6.4575354 7.24792603 9.32007692 6.5 13.625 C5.34367254 15.98793002 4.35016245 17.77483755 2.5 19.625 C0.1875 20 0.1875 20 -2.5 19.625 C-5.06638215 17.47478793 -6.29103188 15.79226637 -6.88671875 12.46484375 C-7.08084032 8.45522921 -6.77549931 6.12498023 -4.8125 2.5625 C-2.5 0.625 -2.5 0.625 0 0 Z' fill='%2353417C' transform='translate(138.5,67.375)'/%3E%3Cpath d='M0 0 C2.5 0.6875 2.5 0.6875 4.8125 2.625 C7.08407605 6.74748987 7.32547179 10.07653131 6.5 14.6875 C4.8125 17.75 4.8125 17.75 2.5 19.6875 C-0.0625 20.25 -0.0625 20.25 -2.5 19.6875 C-5.30401904 17.38419865 -5.84979387 14.76309142 -6.4375 11.3125 C-6.72853275 7.71913649 -6.44645777 6.57011897 -4.875 3.125 C-2.5 0.6875 -2.5 0.6875 0 0 Z' fill='%23523F7B' transform='translate(64.5,67.3125)'/%3E%3Cpath d='M0 0 C8.91 0 17.82 0 27 0 C24.81183076 5.47042311 24.169236 6.55141452 19 9 C14.08609728 9.94526984 9.88605617 10.13992406 5.51171875 7.49609375 C3.4733513 5.76185217 1.65854906 4.10051199 0 2 C0 1.34 0 0.68 0 0 Z' fill='%23574680' transform='translate(88,95)'/%3E%3C/svg%3E\");\n}\n\n\n[_nghost-%COMP%]     .mention-badge img {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  object-fit: cover;\n  vertical-align: middle;\n}\n\n[_nghost-%COMP%]     .mention-badge:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-lg);\n}\n\n\n\n[_nghost-%COMP%]     .mention-badge .preset-indicator {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;\n  background: rgba(255, 255, 255, 0.25);\n  padding: 2px 6px;\n  border-radius: 4px;\n  margin-left: 4px;\n  letter-spacing: 0.3px;\n  text-transform: uppercase;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n}\n\n.message-avatar[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.avatar-circle[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  color: var(--mj-text-inverse);\n}\n\n\n.avatar-circle.user-avatar[_ngcontent-%COMP%] {\n  border-radius: 50%;\n  background-color: var(--mj-text-primary);\n}\n\n\n.avatar-circle.ai-avatar[_ngcontent-%COMP%] {\n  border-radius: 8px;\n  background-color: var(--mj-brand-primary); \n}\n\n\n\n\n\n\n.avatar-circle.ai-avatar.avatar-has-image[_ngcontent-%COMP%] {\n  background-color: transparent;\n  overflow: hidden;\n}\n.avatar-circle.ai-avatar[_ngcontent-%COMP%]   .avatar-image[_ngcontent-%COMP%] {\n  border-radius: inherit;\n}\n\n.avatar-image[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n\n\n.artifact-pending[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n}\n\n\n.artifact-wrapper.system-artifact[_ngcontent-%COMP%] {\n  opacity: 0.85;\n  position: relative;\n}\n\n.artifact-wrapper.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.message-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  position: relative;\n}\n\n.message-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 4px;\n  font-size: 13px;\n}\n\n.message-sender[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n\n.agent-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 10px;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.message-time[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  font-weight: 400;\n}\n\n\n\n\n\n\n\n.time-pill[_ngcontent-%COMP%], \n.test-feedback-icon[_ngcontent-%COMP%], \n.message-action-group[_ngcontent-%COMP%], \n.agent-run-icon[_ngcontent-%COMP%] {\n  margin-left: auto;\n}\n.time-pill[_ngcontent-%COMP%]    ~ .test-feedback-icon[_ngcontent-%COMP%], \n.time-pill[_ngcontent-%COMP%]    ~ .message-action-group[_ngcontent-%COMP%], \n.time-pill[_ngcontent-%COMP%]    ~ .agent-run-icon[_ngcontent-%COMP%], \n.test-feedback-icon[_ngcontent-%COMP%]    ~ .message-action-group[_ngcontent-%COMP%], \n.test-feedback-icon[_ngcontent-%COMP%]    ~ .agent-run-icon[_ngcontent-%COMP%], \n.message-action-group[_ngcontent-%COMP%]    ~ .agent-run-icon[_ngcontent-%COMP%] {\n  margin-left: 8px;\n}\n\n\n\n.message-action-group[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n}\n\n.message-action-group.labeled[_ngcontent-%COMP%] {\n  gap: var(--mj-space-4);\n}\n.message-header-action[_ngcontent-%COMP%] {\n  gap: var(--mj-space-2);\n  min-width: 20px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  font: inherit;\n  font-size: 12px;\n}\n.message-header-action[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n.message-header-action[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  border-radius: var(--mj-radius-sm);\n  box-shadow: var(--mj-focus-ring);\n}\n\n.message-item.fork-rail-inherited[_ngcontent-%COMP%]   .message-header-action[_ngcontent-%COMP%]:not(:hover), \n.message-item.fork-rail-inherited[_ngcontent-%COMP%]   .agent-run-icon[_ngcontent-%COMP%]:not(:hover):not(.expanded) {\n  color: var(--mj-text-secondary);\n}\n.message-action-group[_ngcontent-%COMP%]   .action-label-short[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n.time-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  transition: all 0.3s ease;\n}\n\n.time-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n\n.stop-run-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  border: 1px solid transparent;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: inherit;\n  cursor: pointer;\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n  transition: all 0.2s ease;\n}\n\n.stop-run-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.stop-run-pill[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: var(--mj-status-error);\n}\n\n.stop-run-pill[_ngcontent-%COMP%]:disabled {\n  cursor: default;\n  opacity: 0.7;\n}\n\n\n.time-pill.complete[_ngcontent-%COMP%] {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-status-info-text);\n}\n\n\n\n.time-pill.stopped[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-secondary);\n}\n\n\n.time-pill.in-progress[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n\n.time-pill.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n\n\n\n.time-pill.checking[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  color: var(--mj-status-warning-text);\n}\n\n.time-pill.stalled[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n}\n\n.time-pill[_ngcontent-%COMP%]   .liveness-label[_ngcontent-%COMP%] {\n  font-weight: 400;\n  opacity: 0.85;\n}\n\n\n.time-pill.failed[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n}\n\n@keyframes _ngcontent-%COMP%_pillPulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.85;\n  }\n}\n\n\n.stopped-line[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-2);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n.stopped-line[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n.stopped-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-2);\n}\n\n\n.generation-time[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  background: var(--mj-status-info-bg);\n  border-radius: 10px;\n  font-size: 11px;\n  color: var(--mj-status-info-text);\n  font-weight: 500;\n  margin-left: auto;\n}\n\n.generation-time[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n.message-elapsed[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-style: italic;\n}\n\n.message-body[_ngcontent-%COMP%] {\n  margin-bottom: 0;\n}\n\n.message-text[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  line-height: 1.5;\n  word-wrap: break-word;\n}\n\n\n.message-text[_ngcontent-%COMP%]   mj-markdown[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child, \n.message-text[_ngcontent-%COMP%]     .mj-markdown-container > :first-child {\n  margin-top: 0;\n}\n\n.message-text[_ngcontent-%COMP%]   mj-markdown[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:last-child, \n.message-text[_ngcontent-%COMP%]     .mj-markdown-container > :last-child {\n  margin-bottom: 0;\n}\n\n\n.message-item.user-message[_ngcontent-%COMP%]   .message-content[_ngcontent-%COMP%] {\n  border-radius: 12px 12px 12px 4px;\n}\n\n.message-item.ai-message[_ngcontent-%COMP%]   .message-content[_ngcontent-%COMP%] {\n  border-radius: 4px 12px 12px 12px;\n}\n\n\n.message-reactions[_ngcontent-%COMP%] {\n  display: none; \n}\n\n\n.artifact-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-top: 12px;\n  padding: 16px;\n  border: 1px solid color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n  border-radius: 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  max-width: 500px;\n  box-shadow: var(--mj-shadow-sm);\n  position: relative;\n  overflow: hidden;\n}\n\n.artifact-card[_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background: var(--mj-brand-primary);\n  opacity: 1;\n}\n\n.artifact-card[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-1px);\n}\n\n.artifact-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n}\n\n.artifact-card-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  border-radius: 6px;\n  transition: all 0.2s ease;\n}\n\n.artifact-card[_ngcontent-%COMP%]:hover   .artifact-card-icon[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  transform: scale(1.05);\n}\n\n.artifact-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n}\n\n.artifact-card-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-card-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  letter-spacing: -0.01em;\n  margin-bottom: 4px;\n}\n\n.artifact-card-description[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n}\n\n\n.thread-indicator[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  margin-top: 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  border-radius: 16px;\n  cursor: pointer;\n  transition: all 150ms ease;\n  font-size: 12px;\n  color: var(--mj-brand-primary-hover);\n  font-weight: 500;\n}\n\n.thread-indicator[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.thread-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.thread-count[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n\n\n.message-item.editing[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning-bg);\n  border-left: 3px solid var(--mj-status-warning);\n}\n\n.message-edit-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.message-edit-textarea[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  font-family: inherit;\n  font-size: 14px;\n  line-height: 1.6;\n  resize: vertical;\n  min-height: 80px;\n  transition: border-color 150ms ease;\n}\n\n.message-edit-textarea[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.edit-actions[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n}\n\n\n.edit-note[_ngcontent-%COMP%] {\n  margin-left: auto;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n\n\n.message-item.pending-replace[_ngcontent-%COMP%]   .message-body[_ngcontent-%COMP%] {\n  opacity: 0.6;\n}\n\n.edit-hint[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.edited-badge[_ngcontent-%COMP%] {\n  margin-left: 8px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n  font-weight: normal;\n}\n\n\n.message-action-bar[_ngcontent-%COMP%] {\n  margin-top: 12px;\n  margin-bottom: 8px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 12px;\n}\n\n.action-bar-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.action-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  margin-left: 16px;\n  padding-left: 16px;\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.action-bar-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 10px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-text-muted);\n  border-radius: 6px;\n  font-size: 16px;\n  line-height: 1;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s;\n  min-width: 36px;\n  height: 32px;\n  opacity: 0.6;\n}\n\n.action-bar-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  line-height: 1;\n}\n\n\n.action-bar-btn.labeled[_ngcontent-%COMP%] {\n  gap: var(--mj-space-2);\n  min-width: 0;\n  padding: 6px 12px;\n  font-size: 13px;\n}\n\n.action-bar-btn.labeled[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.action-bar-btn[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n  border-color: var(--mj-text-secondary);\n}\n\n.action-bar-btn.danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.action-bar-btn.danger[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n.action-bar-btn[_ngcontent-%COMP%]   i.pinned[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.action-bar-btn.test-feedback[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.action-bar-btn.test-feedback[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n}\n\n\n.message-status[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  padding: 2px 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  margin-left: 8px;\n  animation: _ngcontent-%COMP%_statusPulse 2s ease-in-out infinite;\n}\n\n.message-status[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n}\n\n.message-status.error[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n}\n\n.message-status.error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.status-text[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n@keyframes _ngcontent-%COMP%_statusPulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.7; }\n}\n\n\n\n\n\n\n\n\n\n.agent-run-icon[_ngcontent-%COMP%], \n.message-header-action[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  user-select: none;\n}\n\n.agent-run-icon[_ngcontent-%COMP%] {\n  width: 20px;\n}\n\n.agent-run-icon[_ngcontent-%COMP%]   i.fa-cog[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n.agent-run-icon[_ngcontent-%COMP%]:hover, \n.message-header-action[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.agent-run-icon.expanded[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  transform: scale(1.1);\n}\n\n\n\n.test-feedback-icon[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  user-select: none;\n}\n\n.test-feedback-icon[_ngcontent-%COMP%]   i.fa-flask[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n.test-feedback-icon[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary); \n  transform: scale(1.1);\n}\n\n@keyframes _ngcontent-%COMP%_rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n\n.agent-details-panel[_ngcontent-%COMP%] {\n  margin-top: 12px;\n  padding: 16px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  animation: _ngcontent-%COMP%_slideDown 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n.agent-details-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n}\n\n.agent-details-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n.agent-details-error[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-status-error);\n  font-size: 13px;\n}\n\n.agent-details-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n.agent-details-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.agent-details-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.agent-name-link[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  text-decoration: none;\n  font-weight: 600;\n  transition: all 0.2s ease;\n}\n\n.agent-name-link[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n\n.agent-details-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 12px;\n  margin-bottom: 12px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;\n}\n\n\n.status-badge[_ngcontent-%COMP%] {\n  padding: 3px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.status-pending[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  color: var(--mj-status-warning-text);\n}\n\n.status-badge.status-running[_ngcontent-%COMP%] {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-status-info-text);\n}\n\n.status-badge.status-complete[_ngcontent-%COMP%] {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n}\n\n.status-badge.status-failed[_ngcontent-%COMP%], \n.status-badge.status-error[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n}\n\n.status-badge.status-cancelled[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n\n.run-id-link[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  transition: all 0.2s ease;\n}\n\n.run-id-link[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n.run-id-link[_ngcontent-%COMP%]   i.fa-external-link-alt[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0.7;\n}\n\n\n.agent-details-tasks[_ngcontent-%COMP%] {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.tasks-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-weight: 600;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.tasks-section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n}\n\n.tasks-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.tasks-list[_ngcontent-%COMP%]   mj-task-widget[_ngcontent-%COMP%] {\n  display: block;\n}\n\n\n.artifact-version-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  margin-left: 8px;\n  padding: 2px 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: 11px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n  vertical-align: middle;\n}\n\n\n.message-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.rating-counts[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.rating-count[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.rating-count.thumbs-up[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.rating-count.thumbs-down[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.rating-total[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n\n.inline-delete[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n.message-item.pinned[_ngcontent-%COMP%] {\n  border-left: 3px solid var(--mj-status-warning);\n  background-color: color-mix(in srgb, var(--mj-status-warning) 8%, transparent);\n}\n\n\n.ai-message-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-left: auto;\n}\n\n.action-bar-btn.pin-btn[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.action-bar-btn.pin-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-warning);\n  border-color: var(--mj-status-warning);\n}\n\n.action-bar-btn.pin-btn.pinned[_ngcontent-%COMP%] {\n  opacity: 1;\n  color: var(--mj-status-warning);\n  border-color: var(--mj-status-warning-border);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n}\n\n\n.agent-panel-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 0 0;\n  margin-top: 8px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n\n.agent-details-section[_ngcontent-%COMP%] {\n  margin-top: 8px;\n}\n\n\n@media (max-width: 768px) {\n  .message-item[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    gap: 8px;\n  }\n\n  .avatar-circle[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n  }\n\n  .artifact-card[_ngcontent-%COMP%] {\n    max-width: 90vw;\n    padding: 12px;\n  }\n\n  .artifact-card-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n  }\n\n  .artifact-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n  }\n\n  .message-header[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .message-sender[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .message-time[_ngcontent-%COMP%] {\n    font-size: 11px;\n  }\n\n  .agent-badge[_ngcontent-%COMP%] {\n    font-size: 10px;\n    padding: 1px 6px;\n  }\n\n  .time-pill[_ngcontent-%COMP%] {\n    font-size: 10px;\n    padding: 2px 6px;\n  }\n\n  \n  .message-action-group[_ngcontent-%COMP%]   .action-label-long[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .message-action-group[_ngcontent-%COMP%]   .action-label-short[_ngcontent-%COMP%] {\n    display: inline;\n  }\n}\n\n\n@media (max-width: 480px) {\n  .message-item[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    gap: 6px;\n  }\n\n  .avatar-circle[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    font-size: 12px;\n  }\n\n  .avatar-circle.ai-avatar[_ngcontent-%COMP%] {\n    border-radius: 6px;\n  }\n\n  .artifact-card[_ngcontent-%COMP%] {\n    padding: 10px;\n    margin-top: 8px;\n  }\n\n  .artifact-card-header[_ngcontent-%COMP%] {\n    gap: 8px;\n  }\n\n  .artifact-card-icon[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n  }\n\n  .artifact-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n\n  .artifact-card-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n  }\n\n  .artifact-card-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .message-header[_ngcontent-%COMP%] {\n    font-size: 11px;\n    gap: 6px;\n  }\n\n  .message-sender[_ngcontent-%COMP%] {\n    font-size: 11px;\n  }\n\n  .message-time[_ngcontent-%COMP%] {\n    font-size: 10px;\n  }\n\n  .agent-badge[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 1px 5px;\n  }\n\n  .time-pill[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 1px 5px;\n  }\n\n  .thread-indicator[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    font-size: 11px;\n    margin-top: 6px;\n  }\n\n  .agent-details-panel[_ngcontent-%COMP%] {\n    padding: 12px;\n    margin-top: 8px;\n  }\n\n  .agent-details-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 8px;\n  }\n\n  .detail-row[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n  }\n\n  .detail-label[_ngcontent-%COMP%], \n   .detail-value[_ngcontent-%COMP%] {\n    font-size: 11px;\n  }\n}\n\n\n[_nghost-%COMP%]     .form-response-pill {\n  margin: 0 3px;\n  transition: all 0.2s ease;\n}\n\n\n[_nghost-%COMP%]     .form-response-pill.single-field {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n  gap: 6px;\n  padding: 4px 12px;\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  border-radius: 16px;\n  font-size: 13px;\n  font-weight: 600;\n  box-shadow: var(--mj-shadow-md);\n  cursor: default;\n  white-space: nowrap;\n}\n\n\n[_nghost-%COMP%]     .form-response-pill.multi-field {\n  display: inline-block;\n  max-width: min(800px, 100%);\n  width: auto;\n  min-width: 400px;\n  margin: 8px 0;\n  vertical-align: top;\n}\n\n[_nghost-%COMP%]     .form-response-pill.single-field i {\n  font-size: 11px;\n  opacity: 0.95;\n}\n\n[_nghost-%COMP%]     .form-response-pill.single-field strong {\n  font-weight: 600;\n  margin-right: 4px;\n}\n\n\n[_nghost-%COMP%]     .form-response-pill .pill-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  font-weight: 600;\n  font-size: 13px;\n  border-radius: 12px 12px 0 0;\n  border: 2px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  border-bottom: none;\n  box-shadow: var(--mj-shadow-md);\n}\n\n[_nghost-%COMP%]     .form-response-pill .pill-header i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n\n[_nghost-%COMP%]     .form-response-pill .pill-fields {\n  padding: 10px 12px;\n  background: color-mix(in srgb, var(--mj-status-success) 8%, transparent);\n  border: 2px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  border-top: none;\n  border-radius: 0 0 12px 12px;\n}\n\n[_nghost-%COMP%]     .form-response-pill .pill-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px 0;\n  font-size: 13px;\n}\n\n[_nghost-%COMP%]     .form-response-pill .pill-field:not(:last-child) {\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n  padding-bottom: 12px;\n  margin-bottom: 0;\n}\n\n[_nghost-%COMP%]     .form-response-pill .field-question {\n  font-weight: 600;\n  color: var(--mj-status-success);\n  font-size: 12px;\n  line-height: 1.4;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  opacity: 0.9;\n}\n\n[_nghost-%COMP%]     .form-response-pill .field-answer {\n  color: var(--mj-text-primary);\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 1.6;\n  padding: 8px 0 8px 12px;\n  background: transparent;\n  border-left: 3px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  font-style: italic;\n}\n\n\n\n[_nghost-%COMP%]     .form-response-pill.single-field:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-lg);\n}\n\n[_nghost-%COMP%]     .form-response-pill.multi-field:hover {\n  transform: translateY(-1px);\n}\n\n[_nghost-%COMP%]     .form-response-pill.multi-field:hover .pill-header {\n  box-shadow: var(--mj-shadow-lg);\n}\n\n\n@media (max-width: 600px) {\n  [_nghost-%COMP%]     .form-response-pill.multi-field {\n    min-width: 300px;\n  }\n}\n\n@media (max-width: 400px) {\n  [_nghost-%COMP%]     .form-response-pill.multi-field {\n    min-width: 100%;\n  }\n\n  [_nghost-%COMP%]     .form-response-pill .field-question {\n    font-size: 11px;\n  }\n\n  [_nghost-%COMP%]     .form-response-pill .field-answer {\n    font-size: 14px;\n    padding: 6px 0 6px 10px;\n  }\n}\n\n\n\n.message-attachments[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 12px;\n  margin-bottom: 8px;\n}\n\n.attachment-item[_ngcontent-%COMP%] {\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\n  transition: transform 0.2s, box-shadow 0.2s;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n\n.attachment-item[_ngcontent-%COMP%]:hover {\n  transform: scale(1.02);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.attachment-item.image-attachment[_ngcontent-%COMP%] {\n  width: 200px;\n  height: 150px;\n}\n\n.attachment-thumbnail[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n.attachment-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n.attachment-item[_ngcontent-%COMP%]:hover   .attachment-overlay[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.attachment-overlay[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n\n\n\n.attachment-strip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 12px 8px 8px;\n  width: 320px;\n  max-width: 100%;\n  min-height: 56px;\n  cursor: pointer;\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.attachment-strip[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.attachment-badge[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  min-width: 48px;\n  height: 48px;\n  padding: 0 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  font-weight: 700;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-subtle);\n  user-select: none;\n  text-align: center;\n  line-height: 1;\n  white-space: nowrap;\n}\n\n.attachment-strip.is-artifact[_ngcontent-%COMP%]   .attachment-badge[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.attachment-meta[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0; \n  gap: 2px;\n}\n\n.attachment-strip[_ngcontent-%COMP%]   .file-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.attachment-strip[_ngcontent-%COMP%]   .file-size[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n\n@media (max-width: 600px) {\n  .attachment-item.image-attachment[_ngcontent-%COMP%] {\n    width: 150px;\n    height: 112px;\n  }\n\n  .attachment-strip[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n}\n\n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown {\n  font-style: normal; \n  font-size: 13.5px;\n  line-height: 1.6;\n  color: var(--mj-text-primary);\n}\n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown h1, \n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown h2, \n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown h3, \n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown h4 {\n  font-size: 13.5px;\n  font-weight: 700;\n  margin: 10px 0 4px;\n  color: var(--mj-text-primary);\n}\n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown p {\n  margin: 6px 0;\n}\n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown ul, \n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown ol {\n  margin: 6px 0;\n  padding-left: 22px;\n}\n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown li {\n  margin: 3px 0;\n}\n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown code {\n  font-size: 12px;\n  padding: 1px 5px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--mj-status-success) 12%, transparent);\n}\n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown table {\n  border-collapse: collapse;\n  margin: 8px 0;\n}\n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown th, \n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown td {\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n  padding: 4px 10px;\n  font-size: 12.5px;\n}\n\n\n.message-fork-chips[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-2);\n}\n.message-fork-chips[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  max-width: 100%;\n  min-width: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: var(--mj-text-xs);\n}\n.message-fork-chips[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.message-fork-chips[_ngcontent-%COMP%]   .fork-chip-icon[_ngcontent-%COMP%] {\n  color: var(--mj-status-info);\n}\n.message-fork-chips[_ngcontent-%COMP%]    > button[data-kind='Edit'][_ngcontent-%COMP%]   .fork-chip-icon[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n.message-fork-chips[_ngcontent-%COMP%]    > button[data-kind='Regenerate'][_ngcontent-%COMP%]   .fork-chip-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-tertiary);\n}\n.fork-chip-avatars[_ngcontent-%COMP%] {\n  display: inline-flex;\n}\n.fork-chip-avatar[_ngcontent-%COMP%] {\n  width: 20px;\n  height: 20px;\n  margin-left: -6px;\n  border: 2px solid var(--mj-bg-surface);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 9px;\n  font-weight: 600;\n  overflow: hidden;\n}\n.fork-chip-avatar[_ngcontent-%COMP%]:first-child {\n  margin-left: 0;\n}\n.fork-chip-avatar[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.fork-chip-messages[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-link);\n}\n\n.fork-chip-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.fork-chip-time[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n\n\n.message-item.fork-rail-inherited[_ngcontent-%COMP%] {\n  border-left: 2px dashed var(--mj-border-strong);\n  padding-left: var(--mj-space-4);\n}\n.message-item.fork-rail-inherited[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n  opacity: 0.7;\n}\n.message-item.fork-rail-own[_ngcontent-%COMP%] {\n  border-left: 2px solid var(--mj-brand-primary);\n  padding-left: var(--mj-space-4);\n}\n\n\n.fork-marker[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-2) var(--mj-space-6);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n.fork-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-info);\n}\n.fork-marker-line[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 1px;\n  background: var(--mj-border-default);\n}\n\n@media (max-width: 768px) {\n  .fork-marker[_ngcontent-%COMP%] {\n    padding: var(--mj-space-2) var(--mj-space-3);\n  }\n}\n@media (max-width: 480px) {\n  .fork-marker[_ngcontent-%COMP%] {\n    padding: var(--mj-space-2);\n  }\n\n  \n  .edit-note[_ngcontent-%COMP%] {\n    flex-basis: 100%;\n    margin-left: 0;\n  }\n}", "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n[class^=\"mj-icon-\"][_ngcontent-%COMP%], \n[class*=\" mj-icon-\"][_ngcontent-%COMP%] {\n  font-style: normal;\n  font-variant: normal;\n  text-rendering: auto;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  font-size: inherit;\n  line-height: 1;\n}\n\n\n\n\n\n\n\n\n\n.mj-icon-skip[_ngcontent-%COMP%] {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  \n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n\n\n\n\n.mj-icon-skip-lightning[_ngcontent-%COMP%]::before {\n  content: \"\u26A1\";\n  color: var(--mj-brand-primary);\n  font-size: 1.1em;\n}\n\n\n\n\n\n.mj-icon-skip-brain[_ngcontent-%COMP%]::before {\n  content: \"\uD83E\uDDE0\";\n  font-size: 1.2em;\n}\n\n\n\n\n\n.mj-icon-betty[_ngcontent-%COMP%] {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  \n  background-image: url(\"data:image/svg+xml,%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Cpath d='M64.96,60.23h75.12c10.58,0,20.24,4.31,27.2,11.32,7.01,6.95,11.32,16.61,11.32,27.19s-4.31,20.24-11.32,27.19c-6.95,7.02-16.61,11.32-27.2,11.32h-75.12c-10.58,0-20.24-4.31-27.19-11.32-2.65-2.64-4.92-5.6-6.71-8.92-.24,0-.49.06-.74.06-2.46,0-4.67-1.05-6.34-2.65-1.6-1.66-2.58-3.87-2.58-6.34v-18.7c0-2.46.98-4.74,2.58-6.34,1.66-1.66,3.87-2.65,6.34-2.65.25,0,.49,0,.74.06,1.79-3.32,4.06-6.34,6.71-8.92,6.95-7.01,16.61-11.32,27.19-11.32' fill='%233d1252'/%3E%3Cpath d='M132.33,68.36h0c0,1.72-.74,3.32-1.91,4.49-1.11,1.17-2.71,1.84-4.49,1.84h-13.29c-1.78,0-3.32-.68-4.49-1.84-1.17-1.17-1.91-2.77-1.91-4.49h-12.92c-8.37,0-15.94,3.44-21.47,8.92-5.47,5.54-8.92,13.1-8.92,21.47v1.17l.06.37v.37l.06.43v.37l.06.37v.37l.06.37.06.43.06.37.06.37.06.37.06.37c0,.12.06.25.06.37l.06.37.12.37.06.37.12.37.06.37.12.37.12.31.06.37.12.37.12.37.12.31.12.37.12.37.19.31.12.37.12.37.12.31.18.37.12.31.19.31.18.37.12.31.18.31.19.37.18.31.18.31.19.31.18.31c.12.24.25.43.37.68l.19.25.24.31.19.31c.43.62.86,1.23,1.35,1.79l.18.24c.49.62.99,1.17,1.48,1.66.19.19.31.37.49.56.19.12.37.31.56.49.49.49,1.04.98,1.6,1.47l.31.19c.56.49,1.17.92,1.79,1.35.18.12.37.25.55.37l.31.25.31.18.31.19.37.18.31.18.31.19.31.18.31.19.37.12.31.19.31.18c.12.06.24.12.37.12l.31.19.37.12.31.19.37.12.31.12.37.19.37.12.31.12.37.12.37.12.37.06c.24.12.43.18.68.25l.37.12.37.06.37.12c.12,0,.25.06.37.06l.37.06.37.12.37.06.37.06.37.06.37.06.37.06.37.06.43.06h.37l.37.06h.37l.37.06h.8l.37.06h47.56c8.37,0,15.94-3.44,21.47-8.92,5.48-5.54,8.92-13.1,8.92-21.47s-3.44-15.94-8.92-21.47c-5.54-5.48-13.1-8.92-21.47-8.92h-7.75Z' fill='%23fff'/%3E%3Cpolygon points='54.93 12.74 85.57 55.25 106.12 55.25 106.12 34.89 106.12 34.7 105.75 34.7 54.93 12.74' fill='%233aba91'/%3E%3Cpolygon points='111.1 55.25 124.76 55.25 145 27.07 111.35 41.59 111.1 41.59 111.1 41.72 111.1 55.25' fill='%233aba91'/%3E%3Cpath d='M94.55,82.81c3.75,0,6.83,3.81,7.57,8.92.06.74-.31,1.35-.98,1.66-.61.31-1.35.18-1.84-.37-1.29-1.48-2.96-2.34-4.74-2.34s-3.38.86-4.67,2.34c-.49.55-1.23.68-1.91.37-.68-.31-1.05-.92-.92-1.66.68-5.11,3.81-8.92,7.51-8.92' fill='%233d1252'/%3E%3Cpath d='M132.08,115.24c-.31,1.05-.86,2.03-1.66,2.77-1.11,1.17-2.71,1.84-4.49,1.84h-13.29c-1.79,0-3.32-.68-4.49-1.84-.8-.74-1.36-1.72-1.66-2.77-.19-.68.06-1.41.68-1.84.56-.43,1.35-.49,1.97-.06.98.68,2.21,1.05,3.51,1.05h13.29c1.29,0,2.52-.37,3.51-1.05.61-.43,1.41-.37,1.97.06.62.43.86,1.17.68,1.84' fill='%233d1252'/%3E%3Cpath d='M144.02,82.81c3.69,0,6.83,3.81,7.51,8.92.12.74-.24,1.35-.92,1.66-.68.31-1.41.18-1.91-.37-1.29-1.48-2.89-2.34-4.67-2.34s-3.44.86-4.74,2.34c-.49.55-1.23.68-1.84.37-.68-.31-1.05-.92-.98-1.66.74-5.11,3.81-8.92,7.57-8.92' fill='%233d1252'/%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n\n\n\n\n.mj-icon-izzy[_ngcontent-%COMP%] {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  \n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 204 180'%3E%3Cpath d='M0 0 C3.61144774 3.08477828 4.84942137 4.90830493 5.5 9.625 C5 13 5 13 3.5 14.9375 C1.74432121 17.35155834 1.83578869 18.21944114 1.90625 21.12890625 C1.9371875 22.40636719 1.968125 23.68382813 2 25 C3.18335937 24.72285156 4.36671875 24.44570313 5.5859375 24.16015625 C22.44010416 20.26839867 22.44010416 20.26839867 30 20 C31.80210938 19.92265625 31.80210938 19.92265625 33.640625 19.84375 C47.49356199 19.44904163 61.73614427 20.86627802 75 25 C75.53596907 19.64244551 75.53596907 19.64244551 73.5 15 C71.5549761 12.4066348 71.45048389 10.16629658 71.59375 6.97265625 C72.33633815 3.36681955 74.01253991 1.99164006 77 0 C79.80907914 -0.63997166 82.18961327 -0.63020793 85 0 C87.8100346 1.79363911 89.50940468 3.01880935 91 6 C90.984375 8.05859375 90.984375 8.05859375 90.75 10.4375 C90.68296875 11.21996094 90.6159375 12.00242187 90.546875 12.80859375 C90 15 90 15 88.49609375 16.3984375 C86.25734576 18.79500846 86.4852344 20.97464008 86.3125 24.1875 C86.21388672 25.81751953 86.21388672 25.81751953 86.11328125 27.48046875 C86.07589844 28.31191406 86.03851563 29.14335937 86 30 C86.67675781 30.0825 87.35351562 30.165 88.05078125 30.25 C91.82333306 31.20937741 94.89353787 32.99425194 98.1875 35 C99.18052124 35.60448975 99.18052124 35.60448975 100.19360352 36.22119141 C111.98050012 43.58460075 121.17745776 53.2687532 127 66 C127 66.66 127 67.32 127 68 C127.721875 68.0825 128.44375 68.165 129.1875 68.25 C133.81406141 69.48374971 136.2179022 71.66516963 138.625 75.7734375 C140.97801199 81.55147269 140.43210927 87.87027126 140.375 94 C140.38660156 95.24523437 140.39820313 96.49046875 140.41015625 97.7734375 C140.3675701 111.08870765 140.3675701 111.08870765 135.5 116.7421875 C131.62323281 119.66995439 128.8523137 121.14337998 124 121.125 C122.9790625 121.12886719 122.9790625 121.12886719 121.9375 121.1328125 C120 121 120 121 117 120 C116.74347656 120.65226562 116.48695313 121.30453125 116.22265625 121.9765625 C115.83980469 122.85054688 115.45695313 123.72453125 115.0625 124.625 C114.70285156 125.48351562 114.34320313 126.34203125 113.97265625 127.2265625 C108.57908063 134.80960941 99.56813916 137.59212379 91.0625 140.375 C90.02287109 140.72949219 88.98324219 141.08398438 87.91210938 141.44921875 C80.34347852 144 80.34347852 144 78 144 C78.02094727 144.65484375 78.04189453 145.3096875 78.06347656 145.984375 C78.14730383 148.98942328 78.19886895 151.99422464 78.25 155 C78.28351563 156.02996094 78.31703125 157.05992187 78.3515625 158.12109375 C78.43361416 164.56214867 77.93369275 169.71304442 74 175 C68.75523423 179.17440541 64.68195675 180.53237245 58 180 C55.12653443 178.963898 52.49379495 177.58020045 49.8125 176.125 C49.11447266 175.76019531 48.41644531 175.39539063 47.69726562 175.01953125 C46.39868999 174.33997216 45.10309803 173.65465367 43.81176758 172.96142578 C43.21388428 172.64415527 42.61600098 172.32688477 42 172 C41.34290039 171.59402588 40.68580078 171.18805176 40.00878906 170.76977539 C38.03672401 169.77639533 38.03672401 169.77639533 36.12475586 170.58325195 C35.49448486 170.96441162 34.86421387 171.34557129 34.21484375 171.73828125 C33.17166992 172.35026367 33.17166992 172.35026367 32.10742188 172.97460938 C31.39134766 173.41611328 30.67527344 173.85761719 29.9375 174.3125 C28.51029236 175.1647359 27.08194984 176.01507485 25.65234375 176.86328125 C25.02320068 177.24782471 24.39405762 177.63236816 23.74584961 178.02856445 C19.79572932 180.2265128 16.44037501 180.296025 12 180 C6.82155197 178.33236419 3.95074467 176.59004726 1 172 C-0.72417326 168.34258111 -1.2403609 165.51230089 -1.1953125 161.48046875 C-1.18886719 160.45888672 -1.18242188 159.43730469 -1.17578125 158.38476562 C-1.15902344 157.32966797 -1.14226563 156.27457031 -1.125 155.1875 C-1.11597656 154.11306641 -1.10695312 153.03863281 -1.09765625 151.93164062 C-1.07415306 149.28753146 -1.04129575 146.64388128 -1 144 C-1.63196289 143.81171631 -2.26392578 143.62343262 -2.91503906 143.42944336 C-8.20708475 141.84808949 -13.49207901 140.2541307 -18.75 138.5625 C-19.98234375 138.17191406 -21.2146875 137.78132812 -22.484375 137.37890625 C-29.06200008 134.79901552 -34.12925122 130.90130551 -38 125 C-38.875 121.5625 -38.875 121.5625 -39 119 C-39.495 119.33 -39.99 119.66 -40.5 120 C-45.24354984 121.89741993 -49.49426304 121.53143657 -54.1875 119.875 C-58.42051121 117.05299253 -61.35909664 113.92271008 -63 109 C-63.22709306 104.92471184 -63.22828659 100.8492307 -63.24023438 96.76806641 C-63.2498982 94.77103695 -63.28108516 92.77414948 -63.3125 90.77734375 C-63.36188158 78.59243786 -63.36188158 78.59243786 -60 73 C-57.7509823 70.86631654 -55.88785241 69.35340008 -53.0078125 68.20703125 C-50.3010212 66.57979679 -49.65488803 64.83796148 -48.3125 62 C-45.06106922 55.7428385 -40.95735135 50.97447519 -36 46 C-35.40832031 45.38511719 -34.81664063 44.77023438 -34.20703125 44.13671875 C-28.97373562 39.11136864 -17.47215548 30 -10 30 C-10.08733973 27.91589342 -10.19552278 25.83265331 -10.3125 23.75 C-10.37050781 22.58984375 -10.42851563 21.4296875 -10.48828125 20.234375 C-11.02905532 16.81635262 -11.84853545 15.59874271 -14 13 C-14.54046356 8.75350057 -14.48376179 6.74176808 -12.125 3.125 C-8.57275398 -0.42724602 -4.8825369 -0.970906 0 0 Z M5 35 C4.30245605 35.21962402 3.60491211 35.43924805 2.88623047 35.66552734 C-14.1501062 41.15773444 -29.02751477 50.81254544 -39 66 C-39.33 66.99 -39.66 67.98 -40 69 C-37.525 70.98 -37.525 70.98 -35 73 C-34.52691406 72.29875 -34.05382812 71.5975 -33.56640625 70.875 C-21.08320269 52.96537462 -2.17172019 42.38052109 19.26171875 38.5078125 C46.97805996 34.9959591 75.10426623 38.71529466 97.73046875 56.09765625 C103.53827054 61.07953766 107.9264808 66.53902088 112 73 C113.32 72.01 114.64 71.02 116 70 C115.01713954 61.60788376 107.55262518 55.04847712 101.375 49.8125 C82.80696113 35.82916208 61.35998978 30.59265576 38.375 30.625 C37.71836365 30.62554382 37.06172729 30.62608765 36.38519287 30.62664795 C25.42439402 30.66823796 15.42390121 31.62072499 5 35 Z' fill='%234E3B78' transform='translate(63,0)'/%3E%3Cpath d='M0 0 C5.27957047 5.78547525 9.31612861 13.25448014 10 21.125 C9.69743213 24.83293961 8.77676366 26.8914086 6.1875 29.5625 C-2.04152489 35.76003038 -13.60917874 39.6270706 -23.875 38.8125 C-24.535 38.1525 -25.195 37.4925 -25.875 36.8125 C-28.97847254 36.48234335 -31.03281176 36.30718706 -33.75 37.9375 C-35.40354531 40.69340884 -35.26865568 42.66325452 -34.875 45.8125 C-33.95833333 47.89583333 -33.95833333 47.89583333 -31.875 48.8125 C-28.29166667 48.89583333 -28.29166667 48.89583333 -24.875 47.8125 C-24.57086182 47.16466553 -24.26672363 46.51683105 -23.95336914 45.84936523 C-22.875 43.8125 -22.875 43.8125 -20.77124023 42.88696289 C-19.91731689 42.6883667 -19.06339355 42.48977051 -18.18359375 42.28515625 C-17.23806641 42.04990234 -16.29253906 41.81464844 -15.31835938 41.57226562 C-14.32642578 41.34216797 -13.33449219 41.11207031 -12.3125 40.875 C-4.77934417 39.10870895 1.54823541 36.95205932 8.125 32.8125 C7.81647145 40.06292099 4.56245219 45.32546918 -0.5 50.4609375 C-5.29811284 54.61130511 -8.83216751 54.86916719 -15 55 C-21.13677833 55.26569953 -25.04589225 56.51893716 -29.890625 60.31640625 C-39.17633501 67.31724667 -52.82450605 66.52799961 -63.875 65.8125 C-71.37432145 64.60538489 -79.4496824 61.2378176 -84.875 55.8125 C-86.81199027 55.70419517 -88.75076074 55.60687514 -90.69067383 55.58691406 C-97.68300211 55.51299157 -103.12007731 55.4392364 -108.44140625 50.40234375 C-108.91449219 49.87769531 -109.38757813 49.35304688 -109.875 48.8125 C-110.6175 48.090625 -111.36 47.36875 -112.125 46.625 C-118.35765562 36.60823203 -119.69570866 25.34707186 -117.25 13.8828125 C-113.47065738 3.0509466 -104.76645407 -4.0120534 -94.875 -9.1875 C-91.26850975 -10.75400624 -87.62602625 -12.0153043 -83.875 -13.1875 C-83.029375 -13.47496094 -82.18375 -13.76242188 -81.3125 -14.05859375 C-56.0861494 -22.29657387 -20.04377266 -18.06142152 0 0 Z' fill='%23FDFDFD' transform='translate(155.875,64.1875)'/%3E%3Cpath d='M0 0 C5.24479788 1.58079188 9.51172656 4.60408712 14.06640625 7.58984375 C18.37837094 10.28462973 18.37837094 10.28462973 23.30859375 11.1328125 C28.49696048 9.20971132 33.08639658 6.29555589 37.79882812 3.42578125 C43.66838131 -0.00837477 43.66838131 -0.00837477 47.27734375 0.078125 C49.34375 1.0078125 49.34375 1.0078125 51.34375 3.0078125 C51.82984303 7.30136192 51.71414913 11.62739332 51.71875 15.9453125 C51.74324219 17.15123047 51.76773438 18.35714844 51.79296875 19.59960938 C51.79876953 21.33114258 51.79876953 21.33114258 51.8046875 23.09765625 C51.81290527 24.15847412 51.82112305 25.21929199 51.82958984 26.31225586 C51.34375 29.0078125 51.34375 29.0078125 49.48461914 30.87670898 C46.29658529 32.56106989 44.78123809 32.062357 41.34375 31.0078125 C37.60135447 29.03986817 34.07891261 26.72386924 30.53320312 24.42578125 C26.44214688 21.80182316 26.44214688 21.80182316 21.77734375 20.921875 C17.60401055 22.78413283 13.85973006 25.2663764 10.046875 27.76953125 C5.85335687 30.41401513 2.44659272 31.9581498 -2.65625 32.0078125 C-4.33203125 30.87695312 -4.33203125 30.87695312 -5.65625 29.0078125 C-6.04443359 26.328125 -6.04443359 26.328125 -6.0546875 23.1328125 C-6.05855469 21.98296875 -6.06242187 20.833125 -6.06640625 19.6484375 C-6.05480469 18.44703125 -6.04320313 17.245625 -6.03125 16.0078125 C-6.04285156 14.80640625 -6.05445312 13.605 -6.06640625 12.3671875 C-6.06253906 11.21734375 -6.05867188 10.0675 -6.0546875 8.8828125 C-6.05130371 7.82835937 -6.04791992 6.77390625 -6.04443359 5.6875 C-5.65625 3.0078125 -5.65625 3.0078125 -4.29736328 1.14111328 C-2.65625 0.0078125 -2.65625 0.0078125 0 0 Z' fill='%23FCFCFD' transform='translate(78.65625,136.9921875)'/%3E%3Cpath d='M0 0 C2.5 0.625 2.5 0.625 4.8125 2.625 C6.96830116 6.4575354 7.24792603 9.32007692 6.5 13.625 C5.34367254 15.98793002 4.35016245 17.77483755 2.5 19.625 C0.1875 20 0.1875 20 -2.5 19.625 C-5.06638215 17.47478793 -6.29103188 15.79226637 -6.88671875 12.46484375 C-7.08084032 8.45522921 -6.77549931 6.12498023 -4.8125 2.5625 C-2.5 0.625 -2.5 0.625 0 0 Z' fill='%2353417C' transform='translate(138.5,67.375)'/%3E%3Cpath d='M0 0 C2.5 0.6875 2.5 0.6875 4.8125 2.625 C7.08407605 6.74748987 7.32547179 10.07653131 6.5 14.6875 C4.8125 17.75 4.8125 17.75 2.5 19.6875 C-0.0625 20.25 -0.0625 20.25 -2.5 19.6875 C-5.30401904 17.38419865 -5.84979387 14.76309142 -6.4375 11.3125 C-6.72853275 7.71913649 -6.44645777 6.57011897 -4.875 3.125 C-2.5 0.6875 -2.5 0.6875 0 0 Z' fill='%23523F7B' transform='translate(64.5,67.3125)'/%3E%3Cpath d='M0 0 C8.91 0 17.82 0 27 0 C24.81183076 5.47042311 24.169236 6.55141452 19 9 C14.08609728 9.94526984 9.88605617 10.13992406 5.51171875 7.49609375 C3.4733513 5.76185217 1.65854906 4.10051199 0 2 C0 1.34 0 0.68 0 0 Z' fill='%23574680' transform='translate(88,95)'/%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n\n\n\n\n\n\n\n.mj-icon-data-analyst[_ngcontent-%COMP%]::before {\n  content: \"\uD83D\uDCCA\";\n  font-size: 1.1em;\n}\n\n\n\n\n.mj-icon-api[_ngcontent-%COMP%]::before {\n  content: \"\uD83D\uDD0C\";\n  font-size: 1.1em;\n}\n\n\n\n\n.mj-icon-processing[_ngcontent-%COMP%]::before {\n  content: \"\u2699\uFE0F\";\n  display: inline-block;\n  animation: _ngcontent-%COMP%_rotate-icon 2s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_rotate-icon {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n\n\n\n\n.mj-icon-monogram-s[_ngcontent-%COMP%]::before {\n  content: \"S\";\n  font-weight: 800;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 1.1em;\n  color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"] });
+        } }, dependencies: [i5.NgClass, i5.NgTemplateOutlet, i6.DefaultValueAccessor, i6.NgControlStatus, i6.NgModel, i7.MJButtonDirective, i8.ArtifactMessageCardComponent, i9.LoadingComponent, i4.MarkdownComponent, i10.DynamicFormComponent, i11.ActionableCommandsComponent, i12.ConversationMessageRatingComponent, i13.TaskWidgetComponent, i5.DatePipe], styles: [".message-item[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  padding: 8px 24px;\n  transition: background-color 150ms ease;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease;\n  position: relative;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.message-item.ai-message[_ngcontent-%COMP%] {\n  background-color: transparent;\n}\n\n.message-item.user-message[_ngcontent-%COMP%] {\n  background-color: transparent;\n}\n\n\n.message-item.pin-beacon[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_pinBeacon 1.5s ease-out forwards;\n}\n\n@keyframes _ngcontent-%COMP%_pinBeacon {\n  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-warning) 60%, transparent); }\n  20%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--mj-status-warning) 35%, transparent); }\n  50%  { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-status-warning) 15%, transparent); }\n  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mj-status-warning) 20%, transparent); }\n  100% { box-shadow: none; }\n}\n\n\n.message-item.search-hit-highlight[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_searchHitHighlight 2s ease-out forwards;\n}\n\n@keyframes _ngcontent-%COMP%_searchHitHighlight {\n  0%   { background-color: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent); }\n  70%  { background-color: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); }\n  100% { background-color: transparent; }\n}\n\n.message-item.in-progress[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  border-left: 3px solid var(--mj-brand-primary);\n  position: relative;\n}\n\n@keyframes _ngcontent-%COMP%_shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n\n\n.message-item.in-progress[_ngcontent-%COMP%]   .message-text[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: 500;\n  max-height: 150px;\n  overflow-y: auto;\n  display: block;\n}\n\n\n\n\n\n\n.message-item.in-progress.streaming[_ngcontent-%COMP%]   .message-text[_ngcontent-%COMP%] {\n  max-height: none;\n  overflow-y: visible;\n  font-weight: inherit;\n}\n\n\n\n.message-item.in-progress[_ngcontent-%COMP%]   .avatar-circle[_ngcontent-%COMP%] {\n  box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-brand-primary) 70%, transparent);\n  animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-brand-primary) 70%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 0%, transparent);\n  }\n}\n\n.message-item[_ngcontent-%COMP%]:hover {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 2%, transparent);\n}\n\n\n[_nghost-%COMP%]     .mention-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 12px;\n  margin: 0 3px;\n  border-radius: 16px;\n  font-weight: 600;\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n\n[_nghost-%COMP%]     .mention-badge.agent {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n}\n\n[_nghost-%COMP%]     .mention-badge.user {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n}\n\n[_nghost-%COMP%]     .mention-badge.entity {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n}\n\n[_nghost-%COMP%]     .mention-badge.query {\n  background: var(--mj-status-warning);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n}\n\n[_nghost-%COMP%]     .mention-badge.record {\n  background: var(--mj-color-info, #2563eb);\n  color: var(--mj-text-inverse, #fff);\n  border: 2px solid color-mix(in srgb, var(--mj-color-info, #2563eb) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n  text-decoration: none;\n}\n\n\n[_nghost-%COMP%]     .mention-badge.record.icon-only {\n  padding: 4px 7px;\n  gap: 0;\n  min-width: 1.65em;\n  justify-content: center;\n}\n\n\n\n\n[_nghost-%COMP%]     .mention-badge.skill {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-text-inverse) 35%, transparent);\n  border-radius: 4px;\n  box-shadow: var(--mj-shadow-md);\n}\n\n[_nghost-%COMP%]     .mention-badge i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n\n\n[_nghost-%COMP%]     .mention-badge i[class^=\"mj-icon-\"], \n[_nghost-%COMP%]     .mention-badge i[class*=\" mj-icon-\"] {\n  width: 16px;\n  height: 16px;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  vertical-align: middle;\n  font-size: inherit;\n}\n\n\n[_nghost-%COMP%]     .mention-badge i.mj-icon-skip {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E\");\n}\n\n\n[_nghost-%COMP%]     .mention-badge i.mj-icon-betty {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23FF6B6B'/%3E%3Ctext x='50' y='65' text-anchor='middle' font-size='40' fill='white' font-family='Arial, sans-serif' font-weight='bold'%3EB%3C/text%3E%3C/svg%3E\");\n}\n\n\n[_nghost-%COMP%]     .mention-badge i.mj-icon-izzy {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 204 180'%3E%3Cpath d='M0 0 C3.61144774 3.08477828 4.84942137 4.90830493 5.5 9.625 C5 13 5 13 3.5 14.9375 C1.74432121 17.35155834 1.83578869 18.21944114 1.90625 21.12890625 C1.9371875 22.40636719 1.968125 23.68382813 2 25 C3.18335937 24.72285156 4.36671875 24.44570313 5.5859375 24.16015625 C22.44010416 20.26839867 22.44010416 20.26839867 30 20 C31.80210938 19.92265625 31.80210938 19.92265625 33.640625 19.84375 C47.49356199 19.44904163 61.73614427 20.86627802 75 25 C75.53596907 19.64244551 75.53596907 19.64244551 73.5 15 C71.5549761 12.4066348 71.45048389 10.16629658 71.59375 6.97265625 C72.33633815 3.36681955 74.01253991 1.99164006 77 0 C79.80907914 -0.63997166 82.18961327 -0.63020793 85 0 C87.8100346 1.79363911 89.50940468 3.01880935 91 6 C90.984375 8.05859375 90.984375 8.05859375 90.75 10.4375 C90.68296875 11.21996094 90.6159375 12.00242187 90.546875 12.80859375 C90 15 90 15 88.49609375 16.3984375 C86.25734576 18.79500846 86.4852344 20.97464008 86.3125 24.1875 C86.21388672 25.81751953 86.21388672 25.81751953 86.11328125 27.48046875 C86.07589844 28.31191406 86.03851563 29.14335937 86 30 C86.67675781 30.0825 87.35351562 30.165 88.05078125 30.25 C91.82333306 31.20937741 94.89353787 32.99425194 98.1875 35 C99.18052124 35.60448975 99.18052124 35.60448975 100.19360352 36.22119141 C111.98050012 43.58460075 121.17745776 53.2687532 127 66 C127 66.66 127 67.32 127 68 C127.721875 68.0825 128.44375 68.165 129.1875 68.25 C133.81406141 69.48374971 136.2179022 71.66516963 138.625 75.7734375 C140.97801199 81.55147269 140.43210927 87.87027126 140.375 94 C140.38660156 95.24523437 140.39820313 96.49046875 140.41015625 97.7734375 C140.3675701 111.08870765 140.3675701 111.08870765 135.5 116.7421875 C131.62323281 119.66995439 128.8523137 121.14337998 124 121.125 C122.9790625 121.12886719 122.9790625 121.12886719 121.9375 121.1328125 C120 121 120 121 117 120 C116.74347656 120.65226562 116.48695313 121.30453125 116.22265625 121.9765625 C115.83980469 122.85054688 115.45695313 123.72453125 115.0625 124.625 C114.70285156 125.48351562 114.34320313 126.34203125 113.97265625 127.2265625 C108.57908063 134.80960941 99.56813916 137.59212379 91.0625 140.375 C90.02287109 140.72949219 88.98324219 141.08398438 87.91210938 141.44921875 C80.34347852 144 80.34347852 144 78 144 C78.02094727 144.65484375 78.04189453 145.3096875 78.06347656 145.984375 C78.14730383 148.98942328 78.19886895 151.99422464 78.25 155 C78.28351563 156.02996094 78.31703125 157.05992187 78.3515625 158.12109375 C78.43361416 164.56214867 77.93369275 169.71304442 74 175 C68.75523423 179.17440541 64.68195675 180.53237245 58 180 C55.12653443 178.963898 52.49379495 177.58020045 49.8125 176.125 C49.11447266 175.76019531 48.41644531 175.39539063 47.69726562 175.01953125 C46.39868999 174.33997216 45.10309803 173.65465367 43.81176758 172.96142578 C43.21388428 172.64415527 42.61600098 172.32688477 42 172 C41.34290039 171.59402588 40.68580078 171.18805176 40.00878906 170.76977539 C38.03672401 169.77639533 38.03672401 169.77639533 36.12475586 170.58325195 C35.49448486 170.96441162 34.86421387 171.34557129 34.21484375 171.73828125 C33.17166992 172.35026367 33.17166992 172.35026367 32.10742188 172.97460938 C31.39134766 173.41611328 30.67527344 173.85761719 29.9375 174.3125 C28.51029236 175.1647359 27.08194984 176.01507485 25.65234375 176.86328125 C25.02320068 177.24782471 24.39405762 177.63236816 23.74584961 178.02856445 C19.79572932 180.2265128 16.44037501 180.296025 12 180 C6.82155197 178.33236419 3.95074467 176.59004726 1 172 C-0.72417326 168.34258111 -1.2403609 165.51230089 -1.1953125 161.48046875 C-1.18886719 160.45888672 -1.18242188 159.43730469 -1.17578125 158.38476562 C-1.15902344 157.32966797 -1.14226563 156.27457031 -1.125 155.1875 C-1.11597656 154.11306641 -1.10695312 153.03863281 -1.09765625 151.93164062 C-1.07415306 149.28753146 -1.04129575 146.64388128 -1 144 C-1.63196289 143.81171631 -2.26392578 143.62343262 -2.91503906 143.42944336 C-8.20708475 141.84808949 -13.49207901 140.2541307 -18.75 138.5625 C-19.98234375 138.17191406 -21.2146875 137.78132812 -22.484375 137.37890625 C-29.06200008 134.79901552 -34.12925122 130.90130551 -38 125 C-38.875 121.5625 -38.875 121.5625 -39 119 C-39.495 119.33 -39.99 119.66 -40.5 120 C-45.24354984 121.89741993 -49.49426304 121.53143657 -54.1875 119.875 C-58.42051121 117.05299253 -61.35909664 113.92271008 -63 109 C-63.22709306 104.92471184 -63.22828659 100.8492307 -63.24023438 96.76806641 C-63.2498982 94.77103695 -63.28108516 92.77414948 -63.3125 90.77734375 C-63.36188158 78.59243786 -63.36188158 78.59243786 -60 73 C-57.7509823 70.86631654 -55.88785241 69.35340008 -53.0078125 68.20703125 C-50.3010212 66.57979679 -49.65488803 64.83796148 -48.3125 62 C-45.06106922 55.7428385 -40.95735135 50.97447519 -36 46 C-35.40832031 45.38511719 -34.81664063 44.77023438 -34.20703125 44.13671875 C-28.97373562 39.11136864 -17.47215548 30 -10 30 C-10.08733973 27.91589342 -10.19552278 25.83265331 -10.3125 23.75 C-10.37050781 22.58984375 -10.42851563 21.4296875 -10.48828125 20.234375 C-11.02905532 16.81635262 -11.84853545 15.59874271 -14 13 C-14.54046356 8.75350057 -14.48376179 6.74176808 -12.125 3.125 C-8.57275398 -0.42724602 -4.8825369 -0.970906 0 0 Z M5 35 C4.30245605 35.21962402 3.60491211 35.43924805 2.88623047 35.66552734 C-14.1501062 41.15773444 -29.02751477 50.81254544 -39 66 C-39.33 66.99 -39.66 67.98 -40 69 C-37.525 70.98 -37.525 70.98 -35 73 C-34.52691406 72.29875 -34.05382812 71.5975 -33.56640625 70.875 C-21.08320269 52.96537462 -2.17172019 42.38052109 19.26171875 38.5078125 C46.97805996 34.9959591 75.10426623 38.71529466 97.73046875 56.09765625 C103.53827054 61.07953766 107.9264808 66.53902088 112 73 C113.32 72.01 114.64 71.02 116 70 C115.01713954 61.60788376 107.55262518 55.04847712 101.375 49.8125 C82.80696113 35.82916208 61.35998978 30.59265576 38.375 30.625 C37.71836365 30.62554382 37.06172729 30.62608765 36.38519287 30.62664795 C25.42439402 30.66823796 15.42390121 31.62072499 5 35 Z' fill='%234E3B78' transform='translate(63,0)'/%3E%3Cpath d='M0 0 C5.27957047 5.78547525 9.31612861 13.25448014 10 21.125 C9.69743213 24.83293961 8.77676366 26.8914086 6.1875 29.5625 C-2.04152489 35.76003038 -13.60917874 39.6270706 -23.875 38.8125 C-24.535 38.1525 -25.195 37.4925 -25.875 36.8125 C-28.97847254 36.48234335 -31.03281176 36.30718706 -33.75 37.9375 C-35.40354531 40.69340884 -35.26865568 42.66325452 -34.875 45.8125 C-33.95833333 47.89583333 -33.95833333 47.89583333 -31.875 48.8125 C-28.29166667 48.89583333 -28.29166667 48.89583333 -24.875 47.8125 C-24.57086182 47.16466553 -24.26672363 46.51683105 -23.95336914 45.84936523 C-22.875 43.8125 -22.875 43.8125 -20.77124023 42.88696289 C-19.91731689 42.6883667 -19.06339355 42.48977051 -18.18359375 42.28515625 C-17.23806641 42.04990234 -16.29253906 41.81464844 -15.31835938 41.57226562 C-14.32642578 41.34216797 -13.33449219 41.11207031 -12.3125 40.875 C-4.77934417 39.10870895 1.54823541 36.95205932 8.125 32.8125 C7.81647145 40.06292099 4.56245219 45.32546918 -0.5 50.4609375 C-5.29811284 54.61130511 -8.83216751 54.86916719 -15 55 C-21.13677833 55.26569953 -25.04589225 56.51893716 -29.890625 60.31640625 C-39.17633501 67.31724667 -52.82450605 66.52799961 -63.875 65.8125 C-71.37432145 64.60538489 -79.4496824 61.2378176 -84.875 55.8125 C-86.81199027 55.70419517 -88.75076074 55.60687514 -90.69067383 55.58691406 C-97.68300211 55.51299157 -103.12007731 55.4392364 -108.44140625 50.40234375 C-108.91449219 49.87769531 -109.38757813 49.35304688 -109.875 48.8125 C-110.6175 48.090625 -111.36 47.36875 -112.125 46.625 C-118.35765562 36.60823203 -119.69570866 25.34707186 -117.25 13.8828125 C-113.47065738 3.0509466 -104.76645407 -4.0120534 -94.875 -9.1875 C-91.26850975 -10.75400624 -87.62602625 -12.0153043 -83.875 -13.1875 C-83.029375 -13.47496094 -82.18375 -13.76242188 -81.3125 -14.05859375 C-56.0861494 -22.29657387 -20.04377266 -18.06142152 0 0 Z' fill='%23FDFDFD' transform='translate(155.875,64.1875)'/%3E%3Cpath d='M0 0 C5.24479788 1.58079188 9.51172656 4.60408712 14.06640625 7.58984375 C18.37837094 10.28462973 18.37837094 10.28462973 23.30859375 11.1328125 C28.49696048 9.20971132 33.08639658 6.29555589 37.79882812 3.42578125 C43.66838131 -0.00837477 43.66838131 -0.00837477 47.27734375 0.078125 C49.34375 1.0078125 49.34375 1.0078125 51.34375 3.0078125 C51.82984303 7.30136192 51.71414913 11.62739332 51.71875 15.9453125 C51.74324219 17.15123047 51.76773438 18.35714844 51.79296875 19.59960938 C51.79876953 21.33114258 51.79876953 21.33114258 51.8046875 23.09765625 C51.81290527 24.15847412 51.82112305 25.21929199 51.82958984 26.31225586 C51.34375 29.0078125 51.34375 29.0078125 49.48461914 30.87670898 C46.29658529 32.56106989 44.78123809 32.062357 41.34375 31.0078125 C37.60135447 29.03986817 34.07891261 26.72386924 30.53320312 24.42578125 C26.44214688 21.80182316 26.44214688 21.80182316 21.77734375 20.921875 C17.60401055 22.78413283 13.85973006 25.2663764 10.046875 27.76953125 C5.85335687 30.41401513 2.44659272 31.9581498 -2.65625 32.0078125 C-4.33203125 30.87695312 -4.33203125 30.87695312 -5.65625 29.0078125 C-6.04443359 26.328125 -6.04443359 26.328125 -6.0546875 23.1328125 C-6.05855469 21.98296875 -6.06242187 20.833125 -6.06640625 19.6484375 C-6.05480469 18.44703125 -6.04320313 17.245625 -6.03125 16.0078125 C-6.04285156 14.80640625 -6.05445312 13.605 -6.06640625 12.3671875 C-6.06253906 11.21734375 -6.05867188 10.0675 -6.0546875 8.8828125 C-6.05130371 7.82835937 -6.04791992 6.77390625 -6.04443359 5.6875 C-5.65625 3.0078125 -5.65625 3.0078125 -4.29736328 1.14111328 C-2.65625 0.0078125 -2.65625 0.0078125 0 0 Z' fill='%23FCFCFD' transform='translate(78.65625,136.9921875)'/%3E%3Cpath d='M0 0 C2.5 0.625 2.5 0.625 4.8125 2.625 C6.96830116 6.4575354 7.24792603 9.32007692 6.5 13.625 C5.34367254 15.98793002 4.35016245 17.77483755 2.5 19.625 C0.1875 20 0.1875 20 -2.5 19.625 C-5.06638215 17.47478793 -6.29103188 15.79226637 -6.88671875 12.46484375 C-7.08084032 8.45522921 -6.77549931 6.12498023 -4.8125 2.5625 C-2.5 0.625 -2.5 0.625 0 0 Z' fill='%2353417C' transform='translate(138.5,67.375)'/%3E%3Cpath d='M0 0 C2.5 0.6875 2.5 0.6875 4.8125 2.625 C7.08407605 6.74748987 7.32547179 10.07653131 6.5 14.6875 C4.8125 17.75 4.8125 17.75 2.5 19.6875 C-0.0625 20.25 -0.0625 20.25 -2.5 19.6875 C-5.30401904 17.38419865 -5.84979387 14.76309142 -6.4375 11.3125 C-6.72853275 7.71913649 -6.44645777 6.57011897 -4.875 3.125 C-2.5 0.6875 -2.5 0.6875 0 0 Z' fill='%23523F7B' transform='translate(64.5,67.3125)'/%3E%3Cpath d='M0 0 C8.91 0 17.82 0 27 0 C24.81183076 5.47042311 24.169236 6.55141452 19 9 C14.08609728 9.94526984 9.88605617 10.13992406 5.51171875 7.49609375 C3.4733513 5.76185217 1.65854906 4.10051199 0 2 C0 1.34 0 0.68 0 0 Z' fill='%23574680' transform='translate(88,95)'/%3E%3C/svg%3E\");\n}\n\n\n[_nghost-%COMP%]     .mention-badge img {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  object-fit: cover;\n  vertical-align: middle;\n}\n\n[_nghost-%COMP%]     .mention-badge:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-lg);\n}\n\n\n\n[_nghost-%COMP%]     .mention-badge .preset-indicator {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;\n  background: rgba(255, 255, 255, 0.25);\n  padding: 2px 6px;\n  border-radius: 4px;\n  margin-left: 4px;\n  letter-spacing: 0.3px;\n  text-transform: uppercase;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n}\n\n.message-avatar[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.avatar-circle[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  color: var(--mj-text-inverse);\n}\n\n\n.avatar-circle.user-avatar[_ngcontent-%COMP%] {\n  border-radius: 50%;\n  background-color: var(--mj-text-primary);\n}\n\n\n.avatar-circle.ai-avatar[_ngcontent-%COMP%] {\n  border-radius: 8px;\n  background-color: var(--mj-brand-primary); \n}\n\n\n\n\n\n\n.avatar-circle.ai-avatar.avatar-has-image[_ngcontent-%COMP%] {\n  background-color: transparent;\n  overflow: hidden;\n}\n.avatar-circle.ai-avatar[_ngcontent-%COMP%]   .avatar-image[_ngcontent-%COMP%] {\n  border-radius: inherit;\n}\n\n.avatar-image[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n\n\n.artifact-pending[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n}\n\n\n.artifact-wrapper.system-artifact[_ngcontent-%COMP%] {\n  opacity: 0.85;\n  position: relative;\n}\n\n.artifact-wrapper.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\n.multi-artifact-showcase[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-top: 12px;\n}\n\n\n\n.multi-artifact-showcase[_ngcontent-%COMP%]     .artifact-message-card {\n  margin: 0;\n}\n\n.multi-artifact-supporting-section[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n.supporting-artifacts-header[_ngcontent-%COMP%] {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 14px;\n  background: color-mix(in srgb, var(--mj-bg-surface-sunken) 65%, var(--mj-bg-surface-card));\n  border: none;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n  font-weight: 600;\n  text-align: left;\n  transition: background-color 0.15s ease;\n}\n\n.multi-artifact-supporting-section.is-collapsed[_ngcontent-%COMP%]   .supporting-artifacts-header[_ngcontent-%COMP%] {\n  border-bottom: none;\n}\n\n.supporting-artifacts-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.supporting-header-left[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  flex-wrap: wrap;\n}\n\n.supporting-header-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.supporting-header-title[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  letter-spacing: 0.01em;\n}\n\n.supporting-header-count[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 6px;\n  border-radius: 999px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.supporting-collapsed-preview[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  margin-left: 4px;\n  flex-wrap: wrap;\n  min-width: 0;\n}\n\n.supporting-preview-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  max-width: 220px;\n  padding: 2px 8px;\n  border-radius: 999px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.supporting-preview-index[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n}\n\n.supporting-header-right[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-weight: 500;\n  flex-shrink: 0;\n}\n\n.supporting-chevron[_ngcontent-%COMP%] {\n  font-size: 10px;\n  transition: transform 0.18s ease;\n}\n\n.supporting-chevron.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.supporting-artifacts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n  gap: 10px;\n  padding: 12px 14px;\n}\n\n.supporting-artifact-cell[_ngcontent-%COMP%] {\n  position: relative;\n  min-width: 0;\n}\n\n.supporting-artifact-cell[_ngcontent-%COMP%]     .artifact-info-bar {\n  padding: 10px 44px 10px 12px;\n  border-radius: 8px;\n}\n\n.supporting-step-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 50%;\n  right: 12px;\n  transform: translateY(-50%);\n  z-index: 5;\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 6px;\n  border-radius: 999px;\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n  pointer-events: none;\n}\n\n.multi-artifact-primary-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 10px 14px 12px 14px;\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 7%, var(--mj-bg-surface-card));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 38%, var(--mj-border-default));\n  box-shadow: 0 2px 10px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.primary-artifact-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--mj-brand-primary);\n}\n\n.primary-header-icon[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.primary-step-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 1px 7px;\n  border-radius: 999px;\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 32%, var(--mj-border-subtle));\n}\n\n.primary-artifact-card[_ngcontent-%COMP%] {\n  min-width: 0;\n}\n\n.primary-artifact-card[_ngcontent-%COMP%]     .artifact-info-bar {\n  background: color-mix(in srgb, var(--mj-brand-primary) 11%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 38%, var(--mj-border-default));\n  border-radius: 8px;\n}\n\n.primary-artifact-card[_ngcontent-%COMP%]     .artifact-info-bar:hover {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.primary-artifact-card[_ngcontent-%COMP%]     .artifact-icon {\n  background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface-sunken));\n  color: var(--mj-brand-primary);\n}\n\n.message-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  position: relative;\n}\n\n.message-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 4px;\n  font-size: 13px;\n}\n\n.message-sender[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n\n.agent-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 10px;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.message-time[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  font-weight: 400;\n}\n\n\n\n\n\n\n\n.time-pill[_ngcontent-%COMP%], \n.test-feedback-icon[_ngcontent-%COMP%], \n.message-action-group[_ngcontent-%COMP%], \n.agent-run-icon[_ngcontent-%COMP%] {\n  margin-left: auto;\n}\n.time-pill[_ngcontent-%COMP%]    ~ .test-feedback-icon[_ngcontent-%COMP%], \n.time-pill[_ngcontent-%COMP%]    ~ .message-action-group[_ngcontent-%COMP%], \n.time-pill[_ngcontent-%COMP%]    ~ .agent-run-icon[_ngcontent-%COMP%], \n.test-feedback-icon[_ngcontent-%COMP%]    ~ .message-action-group[_ngcontent-%COMP%], \n.test-feedback-icon[_ngcontent-%COMP%]    ~ .agent-run-icon[_ngcontent-%COMP%], \n.message-action-group[_ngcontent-%COMP%]    ~ .agent-run-icon[_ngcontent-%COMP%] {\n  margin-left: 8px;\n}\n\n\n\n.message-action-group[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n}\n\n.message-action-group.labeled[_ngcontent-%COMP%] {\n  gap: var(--mj-space-4);\n}\n.message-header-action[_ngcontent-%COMP%] {\n  gap: var(--mj-space-2);\n  min-width: 20px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  font: inherit;\n  font-size: 12px;\n}\n.message-header-action[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n.message-header-action[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  border-radius: var(--mj-radius-sm);\n  box-shadow: var(--mj-focus-ring);\n}\n\n.message-item.fork-rail-inherited[_ngcontent-%COMP%]   .message-header-action[_ngcontent-%COMP%]:not(:hover), \n.message-item.fork-rail-inherited[_ngcontent-%COMP%]   .agent-run-icon[_ngcontent-%COMP%]:not(:hover):not(.expanded) {\n  color: var(--mj-text-secondary);\n}\n.message-action-group[_ngcontent-%COMP%]   .action-label-short[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n.time-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  transition: all 0.3s ease;\n}\n\n.time-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n\n.stop-run-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  border: 1px solid transparent;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: inherit;\n  cursor: pointer;\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n  transition: all 0.2s ease;\n}\n\n.stop-run-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.stop-run-pill[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: var(--mj-status-error);\n}\n\n.stop-run-pill[_ngcontent-%COMP%]:disabled {\n  cursor: default;\n  opacity: 0.7;\n}\n\n\n.time-pill.complete[_ngcontent-%COMP%] {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-status-info-text);\n}\n\n\n\n.time-pill.stopped[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-secondary);\n}\n\n\n.time-pill.in-progress[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n\n.time-pill.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n\n\n\n.time-pill.checking[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  color: var(--mj-status-warning-text);\n}\n\n.time-pill.stalled[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n}\n\n.time-pill[_ngcontent-%COMP%]   .liveness-label[_ngcontent-%COMP%] {\n  font-weight: 400;\n  opacity: 0.85;\n}\n\n\n.time-pill.failed[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n}\n\n@keyframes _ngcontent-%COMP%_pillPulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.85;\n  }\n}\n\n\n.stopped-line[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-2);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n.stopped-line[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n.stopped-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-2);\n}\n\n\n.generation-time[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  background: var(--mj-status-info-bg);\n  border-radius: 10px;\n  font-size: 11px;\n  color: var(--mj-status-info-text);\n  font-weight: 500;\n  margin-left: auto;\n}\n\n.generation-time[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n.message-elapsed[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-style: italic;\n}\n\n.message-body[_ngcontent-%COMP%] {\n  margin-bottom: 0;\n}\n\n.message-text[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  line-height: 1.5;\n  word-wrap: break-word;\n}\n\n\n.message-text[_ngcontent-%COMP%]   mj-markdown[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child, \n.message-text[_ngcontent-%COMP%]     .mj-markdown-container > :first-child {\n  margin-top: 0;\n}\n\n.message-text[_ngcontent-%COMP%]   mj-markdown[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:last-child, \n.message-text[_ngcontent-%COMP%]     .mj-markdown-container > :last-child {\n  margin-bottom: 0;\n}\n\n\n.message-item.user-message[_ngcontent-%COMP%]   .message-content[_ngcontent-%COMP%] {\n  border-radius: 12px 12px 12px 4px;\n}\n\n.message-item.ai-message[_ngcontent-%COMP%]   .message-content[_ngcontent-%COMP%] {\n  border-radius: 4px 12px 12px 12px;\n}\n\n\n.message-reactions[_ngcontent-%COMP%] {\n  display: none; \n}\n\n\n.artifact-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-top: 12px;\n  padding: 16px;\n  border: 1px solid color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n  border-radius: 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  max-width: 500px;\n  box-shadow: var(--mj-shadow-sm);\n  position: relative;\n  overflow: hidden;\n}\n\n.artifact-card[_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background: var(--mj-brand-primary);\n  opacity: 1;\n}\n\n.artifact-card[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-1px);\n}\n\n.artifact-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n}\n\n.artifact-card-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  border-radius: 6px;\n  transition: all 0.2s ease;\n}\n\n.artifact-card[_ngcontent-%COMP%]:hover   .artifact-card-icon[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  transform: scale(1.05);\n}\n\n.artifact-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n}\n\n.artifact-card-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-card-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  letter-spacing: -0.01em;\n  margin-bottom: 4px;\n}\n\n.artifact-card-description[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n}\n\n\n.thread-indicator[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  margin-top: 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  border-radius: 16px;\n  cursor: pointer;\n  transition: all 150ms ease;\n  font-size: 12px;\n  color: var(--mj-brand-primary-hover);\n  font-weight: 500;\n}\n\n.thread-indicator[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.thread-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.thread-count[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n\n\n.message-item.editing[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning-bg);\n  border-left: 3px solid var(--mj-status-warning);\n}\n\n.message-edit-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.message-edit-textarea[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  font-family: inherit;\n  font-size: 14px;\n  line-height: 1.6;\n  resize: vertical;\n  min-height: 80px;\n  transition: border-color 150ms ease;\n}\n\n.message-edit-textarea[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.edit-actions[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n}\n\n\n.edit-note[_ngcontent-%COMP%] {\n  margin-left: auto;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n\n\n.message-item.pending-replace[_ngcontent-%COMP%]   .message-body[_ngcontent-%COMP%] {\n  opacity: 0.6;\n}\n\n.edit-hint[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.edited-badge[_ngcontent-%COMP%] {\n  margin-left: 8px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n  font-weight: normal;\n}\n\n\n.message-action-bar[_ngcontent-%COMP%] {\n  margin-top: 12px;\n  margin-bottom: 8px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 12px;\n}\n\n.action-bar-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.action-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  margin-left: 16px;\n  padding-left: 16px;\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.action-bar-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 10px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-text-muted);\n  border-radius: 6px;\n  font-size: 16px;\n  line-height: 1;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s;\n  min-width: 36px;\n  height: 32px;\n  opacity: 0.6;\n}\n\n.action-bar-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  line-height: 1;\n}\n\n\n.action-bar-btn.labeled[_ngcontent-%COMP%] {\n  gap: var(--mj-space-2);\n  min-width: 0;\n  padding: 6px 12px;\n  font-size: 13px;\n}\n\n.action-bar-btn.labeled[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.action-bar-btn[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n  border-color: var(--mj-text-secondary);\n}\n\n.action-bar-btn.danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.action-bar-btn.danger[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n.action-bar-btn[_ngcontent-%COMP%]   i.pinned[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.action-bar-btn.test-feedback[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.action-bar-btn.test-feedback[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n}\n\n\n.message-status[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  padding: 2px 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  margin-left: 8px;\n  animation: _ngcontent-%COMP%_statusPulse 2s ease-in-out infinite;\n}\n\n.message-status[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n}\n\n.message-status.error[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n}\n\n.message-status.error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.status-text[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n@keyframes _ngcontent-%COMP%_statusPulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.7; }\n}\n\n\n\n\n\n\n\n\n\n.agent-run-icon[_ngcontent-%COMP%], \n.message-header-action[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  user-select: none;\n}\n\n.agent-run-icon[_ngcontent-%COMP%] {\n  width: 20px;\n}\n\n.agent-run-icon[_ngcontent-%COMP%]   i.fa-cog[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n.agent-run-icon[_ngcontent-%COMP%]:hover, \n.message-header-action[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.agent-run-icon.expanded[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  transform: scale(1.1);\n}\n\n\n\n.test-feedback-icon[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  user-select: none;\n}\n\n.test-feedback-icon[_ngcontent-%COMP%]   i.fa-flask[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n.test-feedback-icon[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary); \n  transform: scale(1.1);\n}\n\n@keyframes _ngcontent-%COMP%_rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n\n.agent-details-panel[_ngcontent-%COMP%] {\n  margin-top: 12px;\n  padding: 16px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  animation: _ngcontent-%COMP%_slideDown 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n.agent-details-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n}\n\n.agent-details-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n.agent-details-error[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-status-error);\n  font-size: 13px;\n}\n\n.agent-details-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n.agent-details-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.agent-details-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.agent-name-link[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  text-decoration: none;\n  font-weight: 600;\n  transition: all 0.2s ease;\n}\n\n.agent-name-link[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n\n.agent-details-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 12px;\n  margin-bottom: 12px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;\n}\n\n\n.status-badge[_ngcontent-%COMP%] {\n  padding: 3px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.status-pending[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  color: var(--mj-status-warning-text);\n}\n\n.status-badge.status-running[_ngcontent-%COMP%] {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-status-info-text);\n}\n\n.status-badge.status-complete[_ngcontent-%COMP%] {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n}\n\n.status-badge.status-failed[_ngcontent-%COMP%], \n.status-badge.status-error[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n}\n\n.status-badge.status-cancelled[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n\n.run-id-link[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  transition: all 0.2s ease;\n}\n\n.run-id-link[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n.run-id-link[_ngcontent-%COMP%]   i.fa-external-link-alt[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0.7;\n}\n\n\n.agent-details-tasks[_ngcontent-%COMP%] {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.tasks-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-weight: 600;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.tasks-section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n}\n\n.tasks-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.tasks-list[_ngcontent-%COMP%]   mj-task-widget[_ngcontent-%COMP%] {\n  display: block;\n}\n\n\n.artifact-version-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  margin-left: 8px;\n  padding: 2px 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: 11px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n  vertical-align: middle;\n}\n\n\n.message-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.rating-counts[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.rating-count[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.rating-count.thumbs-up[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.rating-count.thumbs-down[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.rating-total[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n\n.inline-delete[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n.message-item.pinned[_ngcontent-%COMP%] {\n  border-left: 3px solid var(--mj-status-warning);\n  background-color: color-mix(in srgb, var(--mj-status-warning) 8%, transparent);\n}\n\n\n.ai-message-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-left: auto;\n}\n\n.action-bar-btn.pin-btn[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.action-bar-btn.pin-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-warning);\n  border-color: var(--mj-status-warning);\n}\n\n.action-bar-btn.pin-btn.pinned[_ngcontent-%COMP%] {\n  opacity: 1;\n  color: var(--mj-status-warning);\n  border-color: var(--mj-status-warning-border);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n}\n\n\n.agent-panel-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 0 0;\n  margin-top: 8px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n\n.agent-details-section[_ngcontent-%COMP%] {\n  margin-top: 8px;\n}\n\n\n@media (max-width: 768px) {\n  .message-item[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    gap: 8px;\n  }\n\n  .avatar-circle[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n  }\n\n  .artifact-card[_ngcontent-%COMP%] {\n    max-width: 90vw;\n    padding: 12px;\n  }\n\n  .artifact-card-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n  }\n\n  .artifact-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n  }\n\n  .message-header[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .message-sender[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .message-time[_ngcontent-%COMP%] {\n    font-size: 11px;\n  }\n\n  .agent-badge[_ngcontent-%COMP%] {\n    font-size: 10px;\n    padding: 1px 6px;\n  }\n\n  .time-pill[_ngcontent-%COMP%] {\n    font-size: 10px;\n    padding: 2px 6px;\n  }\n\n  \n  .message-action-group[_ngcontent-%COMP%]   .action-label-long[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .message-action-group[_ngcontent-%COMP%]   .action-label-short[_ngcontent-%COMP%] {\n    display: inline;\n  }\n}\n\n\n@media (max-width: 480px) {\n  .message-item[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    gap: 6px;\n  }\n\n  .avatar-circle[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    font-size: 12px;\n  }\n\n  .avatar-circle.ai-avatar[_ngcontent-%COMP%] {\n    border-radius: 6px;\n  }\n\n  .artifact-card[_ngcontent-%COMP%] {\n    padding: 10px;\n    margin-top: 8px;\n  }\n\n  .artifact-card-header[_ngcontent-%COMP%] {\n    gap: 8px;\n  }\n\n  .artifact-card-icon[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n  }\n\n  .artifact-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n\n  .artifact-card-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n  }\n\n  .artifact-card-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .message-header[_ngcontent-%COMP%] {\n    font-size: 11px;\n    gap: 6px;\n  }\n\n  .message-sender[_ngcontent-%COMP%] {\n    font-size: 11px;\n  }\n\n  .message-time[_ngcontent-%COMP%] {\n    font-size: 10px;\n  }\n\n  .agent-badge[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 1px 5px;\n  }\n\n  .time-pill[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 1px 5px;\n  }\n\n  .thread-indicator[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    font-size: 11px;\n    margin-top: 6px;\n  }\n\n  .agent-details-panel[_ngcontent-%COMP%] {\n    padding: 12px;\n    margin-top: 8px;\n  }\n\n  .agent-details-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 8px;\n  }\n\n  .detail-row[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n  }\n\n  .detail-label[_ngcontent-%COMP%], \n   .detail-value[_ngcontent-%COMP%] {\n    font-size: 11px;\n  }\n}\n\n\n[_nghost-%COMP%]     .form-response-pill {\n  margin: 0 3px;\n  transition: all 0.2s ease;\n}\n\n\n[_nghost-%COMP%]     .form-response-pill.single-field {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n  gap: 6px;\n  padding: 4px 12px;\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  border-radius: 16px;\n  font-size: 13px;\n  font-weight: 600;\n  box-shadow: var(--mj-shadow-md);\n  cursor: default;\n  white-space: nowrap;\n}\n\n\n[_nghost-%COMP%]     .form-response-pill.multi-field {\n  display: inline-block;\n  max-width: min(800px, 100%);\n  width: auto;\n  min-width: 400px;\n  margin: 8px 0;\n  vertical-align: top;\n}\n\n[_nghost-%COMP%]     .form-response-pill.single-field i {\n  font-size: 11px;\n  opacity: 0.95;\n}\n\n[_nghost-%COMP%]     .form-response-pill.single-field strong {\n  font-weight: 600;\n  margin-right: 4px;\n}\n\n\n[_nghost-%COMP%]     .form-response-pill .pill-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  font-weight: 600;\n  font-size: 13px;\n  border-radius: 12px 12px 0 0;\n  border: 2px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  border-bottom: none;\n  box-shadow: var(--mj-shadow-md);\n}\n\n[_nghost-%COMP%]     .form-response-pill .pill-header i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n\n[_nghost-%COMP%]     .form-response-pill .pill-fields {\n  padding: 10px 12px;\n  background: color-mix(in srgb, var(--mj-status-success) 8%, transparent);\n  border: 2px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  border-top: none;\n  border-radius: 0 0 12px 12px;\n}\n\n[_nghost-%COMP%]     .form-response-pill .pill-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px 0;\n  font-size: 13px;\n}\n\n[_nghost-%COMP%]     .form-response-pill .pill-field:not(:last-child) {\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n  padding-bottom: 12px;\n  margin-bottom: 0;\n}\n\n[_nghost-%COMP%]     .form-response-pill .field-question {\n  font-weight: 600;\n  color: var(--mj-status-success);\n  font-size: 12px;\n  line-height: 1.4;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  opacity: 0.9;\n}\n\n[_nghost-%COMP%]     .form-response-pill .field-answer {\n  color: var(--mj-text-primary);\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 1.6;\n  padding: 8px 0 8px 12px;\n  background: transparent;\n  border-left: 3px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  font-style: italic;\n}\n\n\n\n[_nghost-%COMP%]     .form-response-pill.single-field:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-lg);\n}\n\n[_nghost-%COMP%]     .form-response-pill.multi-field:hover {\n  transform: translateY(-1px);\n}\n\n[_nghost-%COMP%]     .form-response-pill.multi-field:hover .pill-header {\n  box-shadow: var(--mj-shadow-lg);\n}\n\n\n@media (max-width: 600px) {\n  [_nghost-%COMP%]     .form-response-pill.multi-field {\n    min-width: 300px;\n  }\n}\n\n@media (max-width: 400px) {\n  [_nghost-%COMP%]     .form-response-pill.multi-field {\n    min-width: 100%;\n  }\n\n  [_nghost-%COMP%]     .form-response-pill .field-question {\n    font-size: 11px;\n  }\n\n  [_nghost-%COMP%]     .form-response-pill .field-answer {\n    font-size: 14px;\n    padding: 6px 0 6px 10px;\n  }\n}\n\n\n\n.message-attachments[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 12px;\n  margin-bottom: 8px;\n}\n\n.attachment-item[_ngcontent-%COMP%] {\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\n  transition: transform 0.2s, box-shadow 0.2s;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n\n.attachment-item[_ngcontent-%COMP%]:hover {\n  transform: scale(1.02);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.attachment-item.image-attachment[_ngcontent-%COMP%] {\n  width: 200px;\n  height: 150px;\n}\n\n.attachment-thumbnail[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n.attachment-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n.attachment-item[_ngcontent-%COMP%]:hover   .attachment-overlay[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.attachment-overlay[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n\n\n\n.attachment-strip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 12px 8px 8px;\n  width: 320px;\n  max-width: 100%;\n  min-height: 56px;\n  cursor: pointer;\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.attachment-strip[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.attachment-badge[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  min-width: 48px;\n  height: 48px;\n  padding: 0 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  font-weight: 700;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-subtle);\n  user-select: none;\n  text-align: center;\n  line-height: 1;\n  white-space: nowrap;\n}\n\n.attachment-strip.is-artifact[_ngcontent-%COMP%]   .attachment-badge[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.attachment-meta[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0; \n  gap: 2px;\n}\n\n.attachment-strip[_ngcontent-%COMP%]   .file-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.attachment-strip[_ngcontent-%COMP%]   .file-size[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n\n@media (max-width: 600px) {\n  .attachment-item.image-attachment[_ngcontent-%COMP%] {\n    width: 150px;\n    height: 112px;\n  }\n\n  .attachment-strip[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n}\n\n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown {\n  font-style: normal; \n  font-size: 13.5px;\n  line-height: 1.6;\n  color: var(--mj-text-primary);\n}\n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown h1, \n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown h2, \n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown h3, \n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown h4 {\n  font-size: 13.5px;\n  font-weight: 700;\n  margin: 10px 0 4px;\n  color: var(--mj-text-primary);\n}\n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown p {\n  margin: 6px 0;\n}\n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown ul, \n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown ol {\n  margin: 6px 0;\n  padding-left: 22px;\n}\n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown li {\n  margin: 3px 0;\n}\n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown code {\n  font-size: 12px;\n  padding: 1px 5px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--mj-status-success) 12%, transparent);\n}\n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown table {\n  border-collapse: collapse;\n  margin: 8px 0;\n}\n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown th, \n[_nghost-%COMP%]     .form-response-pill .field-answer-markdown td {\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n  padding: 4px 10px;\n  font-size: 12.5px;\n}\n\n\n.message-fork-chips[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-2);\n}\n.message-fork-chips[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  max-width: 100%;\n  min-width: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: var(--mj-text-xs);\n}\n.message-fork-chips[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.message-fork-chips[_ngcontent-%COMP%]   .fork-chip-icon[_ngcontent-%COMP%] {\n  color: var(--mj-status-info);\n}\n.message-fork-chips[_ngcontent-%COMP%]    > button[data-kind='Edit'][_ngcontent-%COMP%]   .fork-chip-icon[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n.message-fork-chips[_ngcontent-%COMP%]    > button[data-kind='Regenerate'][_ngcontent-%COMP%]   .fork-chip-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-tertiary);\n}\n.fork-chip-avatars[_ngcontent-%COMP%] {\n  display: inline-flex;\n}\n.fork-chip-avatar[_ngcontent-%COMP%] {\n  width: 20px;\n  height: 20px;\n  margin-left: -6px;\n  border: 2px solid var(--mj-bg-surface);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 9px;\n  font-weight: 600;\n  overflow: hidden;\n}\n.fork-chip-avatar[_ngcontent-%COMP%]:first-child {\n  margin-left: 0;\n}\n.fork-chip-avatar[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.fork-chip-messages[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-link);\n}\n\n.fork-chip-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.fork-chip-time[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n\n\n.message-item.fork-rail-inherited[_ngcontent-%COMP%] {\n  border-left: 2px dashed var(--mj-border-strong);\n  padding-left: var(--mj-space-4);\n}\n.message-item.fork-rail-inherited[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n  opacity: 0.7;\n}\n.message-item.fork-rail-own[_ngcontent-%COMP%] {\n  border-left: 2px solid var(--mj-brand-primary);\n  padding-left: var(--mj-space-4);\n}\n\n\n.fork-marker[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-2) var(--mj-space-6);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n.fork-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-info);\n}\n.fork-marker-line[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 1px;\n  background: var(--mj-border-default);\n}\n\n@media (max-width: 768px) {\n  .fork-marker[_ngcontent-%COMP%] {\n    padding: var(--mj-space-2) var(--mj-space-3);\n  }\n}\n@media (max-width: 480px) {\n  .fork-marker[_ngcontent-%COMP%] {\n    padding: var(--mj-space-2);\n  }\n\n  \n  .edit-note[_ngcontent-%COMP%] {\n    flex-basis: 100%;\n    margin-left: 0;\n  }\n}\n\n\n.workflow-execution-card[_ngcontent-%COMP%] {\n  margin-top: 14px;\n  margin-bottom: 10px;\n  border-radius: 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n  overflow: hidden;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n}\n\n.workflow-execution-card.workflow-status-running[_ngcontent-%COMP%] {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-border-default));\n  box-shadow: 0 2px 12px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.workflow-execution-card.workflow-status-complete[_ngcontent-%COMP%] {\n  border-color: color-mix(in srgb, var(--mj-status-success) 35%, var(--mj-border-default));\n}\n\n.workflow-execution-card.workflow-status-failed[_ngcontent-%COMP%] {\n  border-color: color-mix(in srgb, var(--mj-status-error) 45%, var(--mj-border-default));\n}\n\n.workflow-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 16px;\n  background: color-mix(in srgb, var(--mj-bg-surface-sunken) 55%, var(--mj-bg-surface-card));\n}\n\n.workflow-card-header.is-collapsible[_ngcontent-%COMP%] {\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.workflow-card-header.is-collapsible[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.workflow-header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n\n.workflow-status-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 15px;\n  flex-shrink: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.workflow-status-complete[_ngcontent-%COMP%]   .workflow-status-icon[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 14%, transparent);\n  color: var(--mj-status-success);\n}\n\n.workflow-status-failed[_ngcontent-%COMP%]   .workflow-status-icon[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 14%, transparent);\n  color: var(--mj-status-error);\n}\n\n.workflow-title-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.workflow-title-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.workflow-title[_ngcontent-%COMP%] {\n  font-size: 13.5px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.workflow-badge[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 999px;\n  letter-spacing: 0.2px;\n}\n\n.workflow-badge.badge-running[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.workflow-badge.badge-complete[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 14%, transparent);\n  color: var(--mj-status-success);\n}\n\n.workflow-badge.badge-failed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 14%, transparent);\n  color: var(--mj-status-error);\n}\n\n.workflow-subtitle[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11.5px;\n  color: var(--mj-text-muted);\n}\n\n.workflow-dot[_ngcontent-%COMP%] {\n  opacity: 0.6;\n}\n\n.workflow-header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.workflow-duration-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 9px;\n  border-radius: 999px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  font-size: 11.5px;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: var(--mj-text-secondary);\n}\n\n.workflow-graph-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-border-subtle));\n  color: var(--mj-brand-primary);\n  font-size: 11.5px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;\n}\n\n.workflow-graph-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n.workflow-collapse-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 9px;\n  border-radius: 999px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n\n.workflow-collapse-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.workflow-collapse-chevron[_ngcontent-%COMP%] {\n  font-size: 10px;\n  transition: transform 0.18s ease;\n}\n\n.workflow-collapse-chevron.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.workflow-progress-track[_ngcontent-%COMP%] {\n  height: 3px;\n  width: 100%;\n  background: var(--mj-border-subtle);\n  overflow: hidden;\n}\n\n.workflow-progress-fill[_ngcontent-%COMP%] {\n  height: 100%;\n  background: var(--mj-status-success);\n  transition: width 0.35s ease;\n}\n\n.workflow-progress-fill.is-running[_ngcontent-%COMP%] {\n  background: linear-gradient(90deg, var(--mj-brand-primary), var(--mj-status-info));\n}\n\n.workflow-status-failed[_ngcontent-%COMP%]   .workflow-progress-fill[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n}\n\n.workflow-steps-pipeline[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 10px 14px;\n}\n\n.workflow-step-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: stretch;\n  gap: 12px;\n}\n\n.workflow-step-rail[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 24px;\n  flex-shrink: 0;\n}\n\n.workflow-step-node[_ngcontent-%COMP%] {\n  width: 22px;\n  height: 22px;\n  border-radius: 999px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10.5px;\n  font-weight: 700;\n  margin-top: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1.5px solid var(--mj-border-default);\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.step-status-in-progress[_ngcontent-%COMP%]   .workflow-step-node[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.step-status-complete[_ngcontent-%COMP%]   .workflow-step-node[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 16%, var(--mj-bg-surface));\n  border-color: var(--mj-status-success);\n  color: var(--mj-status-success);\n}\n\n.step-status-failed[_ngcontent-%COMP%]   .workflow-step-node[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 16%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.step-status-skipped[_ngcontent-%COMP%]   .workflow-step-node[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  border-style: dashed;\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-muted);\n}\n\n.step-status-skipped[_ngcontent-%COMP%]   .workflow-step-name[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.workflow-skipped-count[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.workflow-step-connector[_ngcontent-%COMP%] {\n  flex: 1;\n  width: 2px;\n  min-height: 12px;\n  background: var(--mj-border-default);\n  margin: 2px 0;\n}\n\n.workflow-step-connector.is-complete[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 55%, var(--mj-border-default));\n}\n\n.workflow-step-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  padding: 6px 10px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.workflow-step-content[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.workflow-step-main-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.workflow-step-identity[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  flex-wrap: wrap;\n}\n\n.workflow-step-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.workflow-step-agent-chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 7px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 500;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n\n.workflow-step-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.workflow-step-duration[_ngcontent-%COMP%] {\n  font-size: 11.5px;\n  font-variant-numeric: tabular-nums;\n  color: var(--mj-text-muted);\n}\n\n.workflow-step-duration.is-skipped[_ngcontent-%COMP%] {\n  padding: 1px 7px;\n  border-radius: 999px;\n  font-size: 10.5px;\n  font-weight: 600;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px dashed var(--mj-border-strong);\n  color: var(--mj-text-muted);\n}\n\n.workflow-step-run-btn[_ngcontent-%COMP%] {\n  border: none;\n  background: transparent;\n  color: var(--mj-text-muted);\n  padding: 2px 5px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 11px;\n  transition: color 0.15s, background 0.15s;\n}\n\n.workflow-step-run-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.workflow-step-chevron[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  transition: transform 0.2s ease;\n}\n\n.workflow-step-chevron.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.workflow-step-details[_ngcontent-%COMP%] {\n  margin-top: 6px;\n  padding: 8px 10px;\n  border-radius: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border-left: 2px solid var(--mj-brand-primary);\n  font-size: 12px;\n  line-height: 1.5;\n  color: var(--mj-text-secondary);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n\n\n.workflow-continuation-banner[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  width: 100%;\n  max-width: 100%;\n  margin-bottom: 10px;\n  padding: 6px 12px;\n  border-radius: 8px;\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 26%, var(--mj-border-default));\n  background: color-mix(in srgb, var(--mj-brand-primary) 7%, var(--mj-bg-surface-sunken));\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n  line-height: 1.35;\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;\n}\n\n.workflow-continuation-banner[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 13%, var(--mj-bg-surface-sunken));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-border-default));\n}\n\n.continuation-banner-left[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.continuation-banner-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.continuation-banner-label[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.continuation-banner-sep[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.continuation-banner-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.continuation-banner-jump[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 11.5px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.message-item.workflow-origin-highlight[_ngcontent-%COMP%] {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n  border-radius: 12px;\n  transition: outline-color 0.3s ease;\n}", "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n[class^=\"mj-icon-\"][_ngcontent-%COMP%], \n[class*=\" mj-icon-\"][_ngcontent-%COMP%] {\n  font-style: normal;\n  font-variant: normal;\n  text-rendering: auto;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  font-size: inherit;\n  line-height: 1;\n}\n\n\n\n\n\n\n\n\n\n.mj-icon-skip[_ngcontent-%COMP%] {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  \n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n\n\n\n\n.mj-icon-skip-lightning[_ngcontent-%COMP%]::before {\n  content: \"\u26A1\";\n  color: var(--mj-brand-primary);\n  font-size: 1.1em;\n}\n\n\n\n\n\n.mj-icon-skip-brain[_ngcontent-%COMP%]::before {\n  content: \"\uD83E\uDDE0\";\n  font-size: 1.2em;\n}\n\n\n\n\n\n.mj-icon-betty[_ngcontent-%COMP%] {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  \n  background-image: url(\"data:image/svg+xml,%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Cpath d='M64.96,60.23h75.12c10.58,0,20.24,4.31,27.2,11.32,7.01,6.95,11.32,16.61,11.32,27.19s-4.31,20.24-11.32,27.19c-6.95,7.02-16.61,11.32-27.2,11.32h-75.12c-10.58,0-20.24-4.31-27.19-11.32-2.65-2.64-4.92-5.6-6.71-8.92-.24,0-.49.06-.74.06-2.46,0-4.67-1.05-6.34-2.65-1.6-1.66-2.58-3.87-2.58-6.34v-18.7c0-2.46.98-4.74,2.58-6.34,1.66-1.66,3.87-2.65,6.34-2.65.25,0,.49,0,.74.06,1.79-3.32,4.06-6.34,6.71-8.92,6.95-7.01,16.61-11.32,27.19-11.32' fill='%233d1252'/%3E%3Cpath d='M132.33,68.36h0c0,1.72-.74,3.32-1.91,4.49-1.11,1.17-2.71,1.84-4.49,1.84h-13.29c-1.78,0-3.32-.68-4.49-1.84-1.17-1.17-1.91-2.77-1.91-4.49h-12.92c-8.37,0-15.94,3.44-21.47,8.92-5.47,5.54-8.92,13.1-8.92,21.47v1.17l.06.37v.37l.06.43v.37l.06.37v.37l.06.37.06.43.06.37.06.37.06.37.06.37c0,.12.06.25.06.37l.06.37.12.37.06.37.12.37.06.37.12.37.12.31.06.37.12.37.12.37.12.31.12.37.12.37.19.31.12.37.12.37.12.31.18.37.12.31.19.31.18.37.12.31.18.31.19.37.18.31.18.31.19.31.18.31c.12.24.25.43.37.68l.19.25.24.31.19.31c.43.62.86,1.23,1.35,1.79l.18.24c.49.62.99,1.17,1.48,1.66.19.19.31.37.49.56.19.12.37.31.56.49.49.49,1.04.98,1.6,1.47l.31.19c.56.49,1.17.92,1.79,1.35.18.12.37.25.55.37l.31.25.31.18.31.19.37.18.31.18.31.19.31.18.31.19.37.12.31.19.31.18c.12.06.24.12.37.12l.31.19.37.12.31.19.37.12.31.12.37.19.37.12.31.12.37.12.37.12.37.06c.24.12.43.18.68.25l.37.12.37.06.37.12c.12,0,.25.06.37.06l.37.06.37.12.37.06.37.06.37.06.37.06.37.06.37.06.43.06h.37l.37.06h.37l.37.06h.8l.37.06h47.56c8.37,0,15.94-3.44,21.47-8.92,5.48-5.54,8.92-13.1,8.92-21.47s-3.44-15.94-8.92-21.47c-5.54-5.48-13.1-8.92-21.47-8.92h-7.75Z' fill='%23fff'/%3E%3Cpolygon points='54.93 12.74 85.57 55.25 106.12 55.25 106.12 34.89 106.12 34.7 105.75 34.7 54.93 12.74' fill='%233aba91'/%3E%3Cpolygon points='111.1 55.25 124.76 55.25 145 27.07 111.35 41.59 111.1 41.59 111.1 41.72 111.1 55.25' fill='%233aba91'/%3E%3Cpath d='M94.55,82.81c3.75,0,6.83,3.81,7.57,8.92.06.74-.31,1.35-.98,1.66-.61.31-1.35.18-1.84-.37-1.29-1.48-2.96-2.34-4.74-2.34s-3.38.86-4.67,2.34c-.49.55-1.23.68-1.91.37-.68-.31-1.05-.92-.92-1.66.68-5.11,3.81-8.92,7.51-8.92' fill='%233d1252'/%3E%3Cpath d='M132.08,115.24c-.31,1.05-.86,2.03-1.66,2.77-1.11,1.17-2.71,1.84-4.49,1.84h-13.29c-1.79,0-3.32-.68-4.49-1.84-.8-.74-1.36-1.72-1.66-2.77-.19-.68.06-1.41.68-1.84.56-.43,1.35-.49,1.97-.06.98.68,2.21,1.05,3.51,1.05h13.29c1.29,0,2.52-.37,3.51-1.05.61-.43,1.41-.37,1.97.06.62.43.86,1.17.68,1.84' fill='%233d1252'/%3E%3Cpath d='M144.02,82.81c3.69,0,6.83,3.81,7.51,8.92.12.74-.24,1.35-.92,1.66-.68.31-1.41.18-1.91-.37-1.29-1.48-2.89-2.34-4.67-2.34s-3.44.86-4.74,2.34c-.49.55-1.23.68-1.84.37-.68-.31-1.05-.92-.98-1.66.74-5.11,3.81-8.92,7.57-8.92' fill='%233d1252'/%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n\n\n\n\n.mj-icon-izzy[_ngcontent-%COMP%] {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  \n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 204 180'%3E%3Cpath d='M0 0 C3.61144774 3.08477828 4.84942137 4.90830493 5.5 9.625 C5 13 5 13 3.5 14.9375 C1.74432121 17.35155834 1.83578869 18.21944114 1.90625 21.12890625 C1.9371875 22.40636719 1.968125 23.68382813 2 25 C3.18335937 24.72285156 4.36671875 24.44570313 5.5859375 24.16015625 C22.44010416 20.26839867 22.44010416 20.26839867 30 20 C31.80210938 19.92265625 31.80210938 19.92265625 33.640625 19.84375 C47.49356199 19.44904163 61.73614427 20.86627802 75 25 C75.53596907 19.64244551 75.53596907 19.64244551 73.5 15 C71.5549761 12.4066348 71.45048389 10.16629658 71.59375 6.97265625 C72.33633815 3.36681955 74.01253991 1.99164006 77 0 C79.80907914 -0.63997166 82.18961327 -0.63020793 85 0 C87.8100346 1.79363911 89.50940468 3.01880935 91 6 C90.984375 8.05859375 90.984375 8.05859375 90.75 10.4375 C90.68296875 11.21996094 90.6159375 12.00242187 90.546875 12.80859375 C90 15 90 15 88.49609375 16.3984375 C86.25734576 18.79500846 86.4852344 20.97464008 86.3125 24.1875 C86.21388672 25.81751953 86.21388672 25.81751953 86.11328125 27.48046875 C86.07589844 28.31191406 86.03851563 29.14335937 86 30 C86.67675781 30.0825 87.35351562 30.165 88.05078125 30.25 C91.82333306 31.20937741 94.89353787 32.99425194 98.1875 35 C99.18052124 35.60448975 99.18052124 35.60448975 100.19360352 36.22119141 C111.98050012 43.58460075 121.17745776 53.2687532 127 66 C127 66.66 127 67.32 127 68 C127.721875 68.0825 128.44375 68.165 129.1875 68.25 C133.81406141 69.48374971 136.2179022 71.66516963 138.625 75.7734375 C140.97801199 81.55147269 140.43210927 87.87027126 140.375 94 C140.38660156 95.24523437 140.39820313 96.49046875 140.41015625 97.7734375 C140.3675701 111.08870765 140.3675701 111.08870765 135.5 116.7421875 C131.62323281 119.66995439 128.8523137 121.14337998 124 121.125 C122.9790625 121.12886719 122.9790625 121.12886719 121.9375 121.1328125 C120 121 120 121 117 120 C116.74347656 120.65226562 116.48695313 121.30453125 116.22265625 121.9765625 C115.83980469 122.85054688 115.45695313 123.72453125 115.0625 124.625 C114.70285156 125.48351562 114.34320313 126.34203125 113.97265625 127.2265625 C108.57908063 134.80960941 99.56813916 137.59212379 91.0625 140.375 C90.02287109 140.72949219 88.98324219 141.08398438 87.91210938 141.44921875 C80.34347852 144 80.34347852 144 78 144 C78.02094727 144.65484375 78.04189453 145.3096875 78.06347656 145.984375 C78.14730383 148.98942328 78.19886895 151.99422464 78.25 155 C78.28351563 156.02996094 78.31703125 157.05992187 78.3515625 158.12109375 C78.43361416 164.56214867 77.93369275 169.71304442 74 175 C68.75523423 179.17440541 64.68195675 180.53237245 58 180 C55.12653443 178.963898 52.49379495 177.58020045 49.8125 176.125 C49.11447266 175.76019531 48.41644531 175.39539063 47.69726562 175.01953125 C46.39868999 174.33997216 45.10309803 173.65465367 43.81176758 172.96142578 C43.21388428 172.64415527 42.61600098 172.32688477 42 172 C41.34290039 171.59402588 40.68580078 171.18805176 40.00878906 170.76977539 C38.03672401 169.77639533 38.03672401 169.77639533 36.12475586 170.58325195 C35.49448486 170.96441162 34.86421387 171.34557129 34.21484375 171.73828125 C33.17166992 172.35026367 33.17166992 172.35026367 32.10742188 172.97460938 C31.39134766 173.41611328 30.67527344 173.85761719 29.9375 174.3125 C28.51029236 175.1647359 27.08194984 176.01507485 25.65234375 176.86328125 C25.02320068 177.24782471 24.39405762 177.63236816 23.74584961 178.02856445 C19.79572932 180.2265128 16.44037501 180.296025 12 180 C6.82155197 178.33236419 3.95074467 176.59004726 1 172 C-0.72417326 168.34258111 -1.2403609 165.51230089 -1.1953125 161.48046875 C-1.18886719 160.45888672 -1.18242188 159.43730469 -1.17578125 158.38476562 C-1.15902344 157.32966797 -1.14226563 156.27457031 -1.125 155.1875 C-1.11597656 154.11306641 -1.10695312 153.03863281 -1.09765625 151.93164062 C-1.07415306 149.28753146 -1.04129575 146.64388128 -1 144 C-1.63196289 143.81171631 -2.26392578 143.62343262 -2.91503906 143.42944336 C-8.20708475 141.84808949 -13.49207901 140.2541307 -18.75 138.5625 C-19.98234375 138.17191406 -21.2146875 137.78132812 -22.484375 137.37890625 C-29.06200008 134.79901552 -34.12925122 130.90130551 -38 125 C-38.875 121.5625 -38.875 121.5625 -39 119 C-39.495 119.33 -39.99 119.66 -40.5 120 C-45.24354984 121.89741993 -49.49426304 121.53143657 -54.1875 119.875 C-58.42051121 117.05299253 -61.35909664 113.92271008 -63 109 C-63.22709306 104.92471184 -63.22828659 100.8492307 -63.24023438 96.76806641 C-63.2498982 94.77103695 -63.28108516 92.77414948 -63.3125 90.77734375 C-63.36188158 78.59243786 -63.36188158 78.59243786 -60 73 C-57.7509823 70.86631654 -55.88785241 69.35340008 -53.0078125 68.20703125 C-50.3010212 66.57979679 -49.65488803 64.83796148 -48.3125 62 C-45.06106922 55.7428385 -40.95735135 50.97447519 -36 46 C-35.40832031 45.38511719 -34.81664063 44.77023438 -34.20703125 44.13671875 C-28.97373562 39.11136864 -17.47215548 30 -10 30 C-10.08733973 27.91589342 -10.19552278 25.83265331 -10.3125 23.75 C-10.37050781 22.58984375 -10.42851563 21.4296875 -10.48828125 20.234375 C-11.02905532 16.81635262 -11.84853545 15.59874271 -14 13 C-14.54046356 8.75350057 -14.48376179 6.74176808 -12.125 3.125 C-8.57275398 -0.42724602 -4.8825369 -0.970906 0 0 Z M5 35 C4.30245605 35.21962402 3.60491211 35.43924805 2.88623047 35.66552734 C-14.1501062 41.15773444 -29.02751477 50.81254544 -39 66 C-39.33 66.99 -39.66 67.98 -40 69 C-37.525 70.98 -37.525 70.98 -35 73 C-34.52691406 72.29875 -34.05382812 71.5975 -33.56640625 70.875 C-21.08320269 52.96537462 -2.17172019 42.38052109 19.26171875 38.5078125 C46.97805996 34.9959591 75.10426623 38.71529466 97.73046875 56.09765625 C103.53827054 61.07953766 107.9264808 66.53902088 112 73 C113.32 72.01 114.64 71.02 116 70 C115.01713954 61.60788376 107.55262518 55.04847712 101.375 49.8125 C82.80696113 35.82916208 61.35998978 30.59265576 38.375 30.625 C37.71836365 30.62554382 37.06172729 30.62608765 36.38519287 30.62664795 C25.42439402 30.66823796 15.42390121 31.62072499 5 35 Z' fill='%234E3B78' transform='translate(63,0)'/%3E%3Cpath d='M0 0 C5.27957047 5.78547525 9.31612861 13.25448014 10 21.125 C9.69743213 24.83293961 8.77676366 26.8914086 6.1875 29.5625 C-2.04152489 35.76003038 -13.60917874 39.6270706 -23.875 38.8125 C-24.535 38.1525 -25.195 37.4925 -25.875 36.8125 C-28.97847254 36.48234335 -31.03281176 36.30718706 -33.75 37.9375 C-35.40354531 40.69340884 -35.26865568 42.66325452 -34.875 45.8125 C-33.95833333 47.89583333 -33.95833333 47.89583333 -31.875 48.8125 C-28.29166667 48.89583333 -28.29166667 48.89583333 -24.875 47.8125 C-24.57086182 47.16466553 -24.26672363 46.51683105 -23.95336914 45.84936523 C-22.875 43.8125 -22.875 43.8125 -20.77124023 42.88696289 C-19.91731689 42.6883667 -19.06339355 42.48977051 -18.18359375 42.28515625 C-17.23806641 42.04990234 -16.29253906 41.81464844 -15.31835938 41.57226562 C-14.32642578 41.34216797 -13.33449219 41.11207031 -12.3125 40.875 C-4.77934417 39.10870895 1.54823541 36.95205932 8.125 32.8125 C7.81647145 40.06292099 4.56245219 45.32546918 -0.5 50.4609375 C-5.29811284 54.61130511 -8.83216751 54.86916719 -15 55 C-21.13677833 55.26569953 -25.04589225 56.51893716 -29.890625 60.31640625 C-39.17633501 67.31724667 -52.82450605 66.52799961 -63.875 65.8125 C-71.37432145 64.60538489 -79.4496824 61.2378176 -84.875 55.8125 C-86.81199027 55.70419517 -88.75076074 55.60687514 -90.69067383 55.58691406 C-97.68300211 55.51299157 -103.12007731 55.4392364 -108.44140625 50.40234375 C-108.91449219 49.87769531 -109.38757813 49.35304688 -109.875 48.8125 C-110.6175 48.090625 -111.36 47.36875 -112.125 46.625 C-118.35765562 36.60823203 -119.69570866 25.34707186 -117.25 13.8828125 C-113.47065738 3.0509466 -104.76645407 -4.0120534 -94.875 -9.1875 C-91.26850975 -10.75400624 -87.62602625 -12.0153043 -83.875 -13.1875 C-83.029375 -13.47496094 -82.18375 -13.76242188 -81.3125 -14.05859375 C-56.0861494 -22.29657387 -20.04377266 -18.06142152 0 0 Z' fill='%23FDFDFD' transform='translate(155.875,64.1875)'/%3E%3Cpath d='M0 0 C5.24479788 1.58079188 9.51172656 4.60408712 14.06640625 7.58984375 C18.37837094 10.28462973 18.37837094 10.28462973 23.30859375 11.1328125 C28.49696048 9.20971132 33.08639658 6.29555589 37.79882812 3.42578125 C43.66838131 -0.00837477 43.66838131 -0.00837477 47.27734375 0.078125 C49.34375 1.0078125 49.34375 1.0078125 51.34375 3.0078125 C51.82984303 7.30136192 51.71414913 11.62739332 51.71875 15.9453125 C51.74324219 17.15123047 51.76773438 18.35714844 51.79296875 19.59960938 C51.79876953 21.33114258 51.79876953 21.33114258 51.8046875 23.09765625 C51.81290527 24.15847412 51.82112305 25.21929199 51.82958984 26.31225586 C51.34375 29.0078125 51.34375 29.0078125 49.48461914 30.87670898 C46.29658529 32.56106989 44.78123809 32.062357 41.34375 31.0078125 C37.60135447 29.03986817 34.07891261 26.72386924 30.53320312 24.42578125 C26.44214688 21.80182316 26.44214688 21.80182316 21.77734375 20.921875 C17.60401055 22.78413283 13.85973006 25.2663764 10.046875 27.76953125 C5.85335687 30.41401513 2.44659272 31.9581498 -2.65625 32.0078125 C-4.33203125 30.87695312 -4.33203125 30.87695312 -5.65625 29.0078125 C-6.04443359 26.328125 -6.04443359 26.328125 -6.0546875 23.1328125 C-6.05855469 21.98296875 -6.06242187 20.833125 -6.06640625 19.6484375 C-6.05480469 18.44703125 -6.04320313 17.245625 -6.03125 16.0078125 C-6.04285156 14.80640625 -6.05445312 13.605 -6.06640625 12.3671875 C-6.06253906 11.21734375 -6.05867188 10.0675 -6.0546875 8.8828125 C-6.05130371 7.82835937 -6.04791992 6.77390625 -6.04443359 5.6875 C-5.65625 3.0078125 -5.65625 3.0078125 -4.29736328 1.14111328 C-2.65625 0.0078125 -2.65625 0.0078125 0 0 Z' fill='%23FCFCFD' transform='translate(78.65625,136.9921875)'/%3E%3Cpath d='M0 0 C2.5 0.625 2.5 0.625 4.8125 2.625 C6.96830116 6.4575354 7.24792603 9.32007692 6.5 13.625 C5.34367254 15.98793002 4.35016245 17.77483755 2.5 19.625 C0.1875 20 0.1875 20 -2.5 19.625 C-5.06638215 17.47478793 -6.29103188 15.79226637 -6.88671875 12.46484375 C-7.08084032 8.45522921 -6.77549931 6.12498023 -4.8125 2.5625 C-2.5 0.625 -2.5 0.625 0 0 Z' fill='%2353417C' transform='translate(138.5,67.375)'/%3E%3Cpath d='M0 0 C2.5 0.6875 2.5 0.6875 4.8125 2.625 C7.08407605 6.74748987 7.32547179 10.07653131 6.5 14.6875 C4.8125 17.75 4.8125 17.75 2.5 19.6875 C-0.0625 20.25 -0.0625 20.25 -2.5 19.6875 C-5.30401904 17.38419865 -5.84979387 14.76309142 -6.4375 11.3125 C-6.72853275 7.71913649 -6.44645777 6.57011897 -4.875 3.125 C-2.5 0.6875 -2.5 0.6875 0 0 Z' fill='%23523F7B' transform='translate(64.5,67.3125)'/%3E%3Cpath d='M0 0 C8.91 0 17.82 0 27 0 C24.81183076 5.47042311 24.169236 6.55141452 19 9 C14.08609728 9.94526984 9.88605617 10.13992406 5.51171875 7.49609375 C3.4733513 5.76185217 1.65854906 4.10051199 0 2 C0 1.34 0 0.68 0 0 Z' fill='%23574680' transform='translate(88,95)'/%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n\n\n\n\n\n\n\n.mj-icon-data-analyst[_ngcontent-%COMP%]::before {\n  content: \"\uD83D\uDCCA\";\n  font-size: 1.1em;\n}\n\n\n\n\n.mj-icon-api[_ngcontent-%COMP%]::before {\n  content: \"\uD83D\uDD0C\";\n  font-size: 1.1em;\n}\n\n\n\n\n.mj-icon-processing[_ngcontent-%COMP%]::before {\n  content: \"\u2699\uFE0F\";\n  display: inline-block;\n  animation: _ngcontent-%COMP%_rotate-icon 2s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_rotate-icon {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n\n\n\n\n.mj-icon-monogram-s[_ngcontent-%COMP%]::before {\n  content: \"S\";\n  font-weight: 800;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 1.1em;\n  color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MessageItemComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-conversation-message-item', template: "<div [class]=\"messageClasses\" [attr.data-message-id]=\"message.ID\" (click)=\"onMessageBubbleClick($event)\">\n  <div class=\"message-avatar\">\n    <div class=\"avatar-circle\" [class.ai-avatar]=\"isAIMessage\" [class.user-avatar]=\"isUserMessage\"\n         [class.avatar-has-image]=\"isAIMessage && effectiveAssistantAvatarUrl !== null\">\n      @if (isUserMessage) {\n        @if (userAvatarUrl) {\n          <img [src]=\"userAvatarUrl\" alt=\"User avatar\" class=\"avatar-image\" />\n        } @else if (userAvatarIconClass) {\n          <i [class]=\"userAvatarIconClass\"></i>\n        } @else {\n          <i class=\"fas fa-user\"></i>\n        }\n      } @else if (isAIMessage) {\n        @if (effectiveAssistantAvatarUrl) {\n          <img [src]=\"effectiveAssistantAvatarUrl\" alt=\"Assistant avatar\" class=\"avatar-image\"\n               (error)=\"assistantAvatarFailed = true\" />\n        } @else {\n          <i class=\"fas\" [ngClass]=\"aiAgentInfo?.iconClass || 'fa-robot'\"></i>\n        }\n      }\n    </div>\n  </div>\n\n  <div class=\"message-content\">\n    <div class=\"message-header\">\n      <span class=\"message-sender\" [title]=\"isAIMessage ? (aiAgentInfo?.role || 'AI Assistant') : ''\">\n        {{ isAIMessage ? (aiAgentInfo?.name || 'AI Assistant') : messageSenderName }}\n      </span>\n      <span class=\"message-time\">{{ message.__mj_CreatedAt | date:'short' }}</span>\n\n      <!-- Status indicator for user messages -->\n      @if (isUserMessage && messageStatus !== 'Complete') {\n        <span class=\"message-status\" [class.error]=\"messageStatus === 'Error'\">\n          <i class=\"fas\" [ngClass]=\"messageStatus === 'Error' ? 'fa-exclamation-triangle' : 'fa-circle-notch fa-spin'\"></i>\n          <span class=\"status-text\">{{ getStatusText() }}</span>\n        </span>\n      }\n\n      <!-- Time pill - shows for AI messages in all states (in-progress, active, complete, failed) -->\n      @if (!isUserMessage && timePillText) {\n        <span\n          class=\"time-pill\"\n          [class.in-progress]=\"isInProgressAIMessage\"\n          [class.active]=\"!isInProgressAIMessage && isAgentRunActive\"\n          [class.complete]=\"!isInProgressAIMessage && !isAgentRunActive && messageStatus === 'Complete' && !IsStoppedRun\"\n          [class.stopped]=\"IsStoppedRun && messageStatus !== 'Error'\"\n          [class.failed]=\"messageStatus === 'Error'\"\n          [class.checking]=\"LivenessState === 'checking'\"\n          [class.stalled]=\"LivenessState === 'stalled'\"\n          [title]=\"LivenessState === 'stalled' ? 'No progress reported for several minutes' : (LivenessState === 'checking' ? 'No recent progress \u2014 re-checking' : '')\">\n          <i class=\"fas\" [ngClass]=\"LivenessState !== 'live' ? 'fa-exclamation-triangle' : (IsStoppedRun ? 'fa-stop' : 'fa-clock')\"></i>\n          {{ timePillText }}\n          @if (LivenessState === 'checking') {\n            <span class=\"liveness-label\">checking\u2026</span>\n          } @else if (LivenessState === 'stalled') {\n            <span class=\"liveness-label\">no response</span>\n          }\n        </span>\n      }\n\n      <!-- Stop control for an in-flight agent reply. Marks the run Cancelled; the owning\n           server process aborts the in-flight step and finalizes the run as stopped. -->\n      @if (CanStopRun) {\n        <button\n          type=\"button\"\n          class=\"stop-run-pill\"\n          [disabled]=\"IsStopping\"\n          (click)=\"OnStopClick()\"\n          [title]=\"IsStopping ? 'Stopping the run\u2026' : 'Stop this run'\">\n          <i class=\"fas\" [ngClass]=\"IsStopping ? 'fa-circle-notch fa-spin' : 'fa-stop'\"></i>\n          {{ IsStopping ? 'Stopping\u2026' : 'Stop' }}\n        </button>\n      }\n\n      <!-- Test feedback icon (appears for test runs only) -->\n      @if (message.TestRunID) {\n        <span\n          class=\"test-feedback-icon\"\n          (click)=\"onTestFeedbackClick()\"\n          title=\"Provide Test Feedback\">\n          <i class=\"fas fa-flask\"></i>\n        </span>\n      }\n\n      <!-- Action group, always visible, styled like the gear: Edit and Fork from here on a user message,\n           Regenerate on an older answer (the last answer carries it in its footer). Labeled on the latest\n           turn, icons elsewhere. -->\n      @if (ShowsActionGroup) {\n        <span class=\"message-action-group\" [class.labeled]=\"IsLatestTurn\" role=\"group\" aria-label=\"Message actions\">\n          @if (CanEdit) {\n            <button type=\"button\" class=\"message-header-action message-action-edit\"\n                    (click)=\"OnEditClick()\" title=\"Edit message\" aria-label=\"Edit message\">\n              <i class=\"fa-solid fa-pen\" aria-hidden=\"true\"></i>\n              @if (IsLatestTurn) {\n                <span>Edit</span>\n              }\n            </button>\n          }\n          @if (CanStartFork) {\n            <button type=\"button\" class=\"message-header-action message-action-fork\"\n                    (click)=\"OnForkClick($event)\" title=\"Fork from here\" aria-label=\"Fork from here\">\n              <i class=\"fa-solid fa-code-branch\" aria-hidden=\"true\"></i>\n              @if (IsLatestTurn) {\n                <span class=\"action-label-long\">Fork from here</span>\n                <span class=\"action-label-short\">Fork</span>\n              }\n            </button>\n          }\n          @if (ShowsHeaderRegenerate) {\n            <button type=\"button\" class=\"message-header-action message-action-regenerate\"\n                    (click)=\"OnRegenerateClick()\" [title]=\"RegenerateTitle\" [attr.aria-label]=\"RegenerateTitle\">\n              <i class=\"fa-solid fa-rotate-left\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </span>\n      }\n\n      <!-- Agent run icon (clickable to expand details) - always rightmost when present.\n           Rendered only when its panel would actually have content, so it never\n           appears as a dead control opening an empty popup (e.g. a white-label\n           surface with showAgentRunDetails=false and no message actions). -->\n      @if (hasAgentRun && hasAgentDetailsPanelContent) {\n        <span\n          class=\"agent-run-icon\"\n          (click)=\"toggleAgentDetails()\"\n          [class.expanded]=\"isAgentDetailsExpanded\"\n          [title]=\"hasRatings() ? 'Agent details & ' + getRatingCount() + ' rating(s)' : 'Click to view agent execution details'\">\n          <i class=\"fas fa-cog\"></i>\n          @if (hasRatings()) {\n            <span class=\"rating-badge\">{{ getRatingCount() }}</span>\n          }\n        </span>\n      }\n    </div>\n\n    <div class=\"message-body\">\n      @if (!isEditing) {\n        <div class=\"message-text\">\n          <mj-markdown [data]=\"displayMessage\" [enableCollapsibleHeadings]=\"true\"></mj-markdown>\n          @if (isMessageEdited) {\n            <span class=\"edited-badge\">(edited)</span>\n          }\n        </div>\n\n        <!-- A stopped reply: what the run kept, and the way to pick it up again. Any message\n             resumes the stopped run; the Continue control just sends one that says so. -->\n        @if (StoppedLineText) {\n          <div class=\"stopped-line\"><i class=\"fa-solid fa-stop\" aria-hidden=\"true\"></i>{{ StoppedLineText }}</div>\n        }\n        @if (CanContinueStoppedRun) {\n          <div class=\"stopped-actions\">\n            <button mjButton Variant=\"outline\" Size=\"sm\" type=\"button\" class=\"continue-run\" (click)=\"OnContinueClick()\" title=\"Continue where you left off\">\n              <i class=\"fa-solid fa-play\" aria-hidden=\"true\"></i> Continue\n            </button>\n          </div>\n        }\n\n        <!-- messageExtra slot \u2014 per-message additive decoration projected by the\n             consumer via `mjChatSlot=\"messageExtra\"`. Renders after the message\n             content, before attachments. Receives the message as $implicit. -->\n        @if (messageExtraTemplate) {\n          <ng-container *ngTemplateOutlet=\"messageExtraTemplate; context: {\n            $implicit: message,\n            message: message\n          }\"></ng-container>\n        }\n\n        <!-- Message Attachments -->\n        @if (hasAttachments) {\n          <div class=\"message-attachments\">\n            @for (attachment of attachments; track attachment.id) {\n              @if (attachment.type === 'Image') {\n                <div class=\"attachment-item image-attachment\"\n                  (click)=\"onAttachmentClick(attachment)\"\n                  [title]=\"attachment.fileName || 'Image attachment'\">\n                  <img\n                    [src]=\"attachment.thumbnailUrl || attachment.contentUrl\"\n                    [alt]=\"attachment.fileName || 'Image attachment'\"\n                    class=\"attachment-thumbnail\"\n                    loading=\"lazy\">\n                  <div class=\"attachment-overlay\">\n                    <i class=\"fas fa-expand\"></i>\n                  </div>\n                </div>\n              } @else {\n                <div class=\"attachment-strip\"\n                  [class.is-artifact]=\"!!attachment.artifactTypeName\"\n                  (click)=\"onAttachmentClick(attachment)\"\n                  [title]=\"attachment.fileName || 'File'\">\n                  <div class=\"attachment-badge\">{{ badgeTextFor(attachment) }}</div>\n                  <div class=\"attachment-meta\">\n                    <span class=\"file-name\">{{ attachment.fileName || 'File' }}</span>\n                    <span class=\"file-size\">{{ formatFileSize(attachment.sizeBytes) }}</span>\n                  </div>\n                </div>\n              }\n            }\n          </div>\n        }\n\n        <!-- Artifact Message Cards \u2014 one per distinct artifact on this message -->\n        @for (a of displayArtifacts; track a.artifact.ID) {\n          <div class=\"artifact-wrapper\" [class.system-artifact]=\"a.artifact.Visibility === 'System Only'\">\n            <mj-artifact-message-card\n              [artifactId]=\"a.artifact.ID\"\n              [artifact]=\"a.artifact\"\n              [artifactVersion]=\"a.version\"\n              [currentUser]=\"currentUser\"\n              (actionPerformed)=\"onArtifactActionPerformed($event)\">\n            </mj-artifact-message-card>\n          </div>\n        }\n\n        <!-- One per attached artifact whose rows are still loading. Rendered AFTER the loaded\n             cards, so an artifact arriving appends rather than reordering what is already on\n             screen. Carries the same system-artifact de-emphasis as the card it becomes. -->\n        @for (pending of pendingArtifactPlaceholders; track pending.artifactId) {\n          <div class=\"artifact-wrapper\" [class.system-artifact]=\"pending.visibility === 'System Only'\">\n            <div class=\"artifact-pending\">\n              <mj-loading [text]=\"pendingLabel(pending)\" size=\"small\"></mj-loading>\n            </div>\n          </div>\n        }\n\n        <!-- Agent Response Form (shown only for last message by owner) -->\n        @if (!ReadOnly && isLastMessageInConversation && isConversationOwner && responseForm) {\n          <mj-dynamic-form\n            [FormDefinition]=\"responseForm\"\n            [Disabled]=\"isProcessing\"\n            (FormSubmitted)=\"onFormSubmitted($event)\">\n          </mj-dynamic-form>\n        }\n\n        <!-- Actionable Commands (shown only for last message by owner) -->\n        @if (!ReadOnly && isLastMessageInConversation && isConversationOwner && actionableCommands.length > 0) {\n          <mj-actionable-commands\n            [commands]=\"actionableCommands\"\n            [disabled]=\"isProcessing\"\n            [isLastMessage]=\"isLastMessageInConversation\"\n            [isConversationOwner]=\"isConversationOwner\"\n            (commandExecuted)=\"onCommandExecuted($event)\">\n          </mj-actionable-commands>\n        }\n      }\n\n      @if (isEditing) {\n        <div class=\"message-edit-container\">\n          <textarea\n            class=\"message-edit-textarea\"\n            [(ngModel)]=\"editedText\"\n            (keydown)=\"onEditKeydown($event)\"\n            rows=\"4\"\n          placeholder=\"Edit your message...\"></textarea>\n          <div class=\"edit-actions\">\n            <button mjButton Variant=\"primary\" Size=\"sm\" (click)=\"SaveEdit()\">\n              <i [class]=\"EditSaveIcon\" aria-hidden=\"true\"></i>\n              {{ EditSaveLabel }}\n            </button>\n            <button mjButton Variant=\"secondary\" Size=\"sm\" (click)=\"CancelEditing()\">\n              <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n              Cancel\n            </button>\n            @if (EditNote) {\n              <span class=\"edit-note\">{{ EditNote }}</span>\n            }\n          </div>\n          <div class=\"edit-hint\">{{ EditHint }}</div>\n        </div>\n      }\n    </div>\n\n    @if (ForkChips.length > 0 && !isEditing) {\n      <div class=\"message-fork-chips\">\n        @for (chip of ForkChips; track chip.Kind + (chip.BranchID ?? '')) {\n          @if (chip.Kind === 'Original') {\n            <button mjButton Variant=\"flat\" Size=\"sm\" class=\"fork-chip\" data-kind=\"Original\"\n                    (click)=\"OnForkChipClick(chip, $event)\"\n                    [attr.aria-label]=\"ChipAriaLabel(chip)\">\n              <i [class]=\"'fork-chip-icon ' + ChipIcon(chip)\" aria-hidden=\"true\"></i>\n              <span class=\"fork-chip-name\">{{ chip.DisplayName }}</span>\n              <span class=\"fork-chip-time\">\u00B7 original</span>\n            </button>\n          } @else {\n            <button mjButton Variant=\"flat\" Size=\"sm\" class=\"fork-chip\" [attr.data-kind]=\"chip.Kind\"\n                    (click)=\"OnForkChipClick(chip, $event)\"\n                    [attr.aria-label]=\"ChipAriaLabel(chip)\">\n              <i [class]=\"'fork-chip-icon ' + ChipIcon(chip)\" aria-hidden=\"true\"></i>\n              @if (chip.Avatars.length > 0) {\n                <span class=\"fork-chip-avatars\" aria-hidden=\"true\">\n                  @for (avatar of chip.Avatars; track avatar.Kind + avatar.ID) {\n                    <span class=\"fork-chip-avatar\" [title]=\"avatar.Label\">\n                      @if (avatar.ImageURL) {\n                        <img [src]=\"avatar.ImageURL\" alt=\"\" />\n                      } @else if (avatar.IconClass) {\n                        <i [class]=\"avatar.IconClass\"></i>\n                      } @else {\n                        {{ avatar.Initials }}\n                      }\n                    </span>\n                  }\n                </span>\n              }\n              <span class=\"fork-chip-messages\">{{ chip.MessageLabel }}</span>\n              <span class=\"fork-chip-name\">{{ chip.DisplayName }}</span>\n              <span class=\"fork-chip-time\">\u00B7 {{ chip.ActivityLabel }}</span>\n            </button>\n          }\n        }\n      </div>\n    }\n\n    <!-- Message Footer: only rendered on the last message, and hidden while any message of the view is edited.\n         Non-last messages have no footer \u2014 pin/delete/rating live in the gear panel. -->\n    @if (ShowsFooter) {\n      <div class=\"message-footer\">\n        @if (allowMessageDelete && isConversationOwner) {\n          <button class=\"action-bar-btn danger inline-delete\" (click)=\"onDeleteClick()\" title=\"Delete this message and all messages below it\">\n            <i class=\"fas fa-trash\"></i>\n          </button>\n        }\n        @if (isAIMessage && (messageStatus === 'Complete' || ShowsFooterRegenerate)) {\n          <div class=\"ai-message-actions\">\n            @if (ShowsFooterRegenerate) {\n              <button class=\"action-bar-btn labeled regenerate-btn\" type=\"button\" (click)=\"OnRegenerateClick()\" [title]=\"RegenerateTitle\">\n                <i class=\"fa-solid fa-rotate-left\" aria-hidden=\"true\"></i>\n                <span>Regenerate</span>\n              </button>\n            }\n            @if (messageStatus === 'Complete') {\n              <!-- Rating sits between Regenerate and Pin on the latest AI message -->\n              @if (showMessageRating) {\n                <mj-conversation-message-rating\n                  [conversationDetailId]=\"message.ID\"\n                  [currentUser]=\"currentUser\"\n                  [ratingEntityName]=\"message.EntityInfo.Name || 'MJ: Conversation Details'\"\n                  [ratingsData]=\"ratings\"\n                  [canEdit]=\"isConversationOwner && !ReadOnly\">\n                </mj-conversation-message-rating>\n              }\n              @if (allowPinning) {\n                <button\n                  class=\"action-bar-btn pin-btn\"\n                  [class.pinned]=\"message.IsPinned\"\n                  (click)=\"PinMessage()\"\n                  [title]=\"message.IsPinned ? 'Unpin message' : 'Pin message'\"\n                  type=\"button\">\n                  <i class=\"fas fa-thumbtack\"></i>\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Agent details content section -->\n    <div class=\"agent-details-section\">\n      <!-- Agent Run Details Panel (expandable) -->\n      @if (isAgentDetailsExpanded && hasAgentRun) {\n        <!-- Agent Run Details Panel -->\n        <div class=\"agent-details-panel\">\n          @if (agentRun && showAgentRunDetails) {\n            <div class=\"agent-details-content\">\n              <div class=\"agent-details-header\">\n                <i class=\"fas fa-chart-line\"></i>\n                <span>\n                  <!-- Deliberately the ENGINE-resolved name: this header labels the real\n                       agent's diagnostics, and the link opens the real agent record \u2014 a\n                       host assistantDisplayName override must not relabel either. -->\n                  <a class=\"agent-name-link\" (click)=\"openAgentRecord()\" title=\"Open agent details\">\n                    {{ engineAgentInfo?.name || 'Agent' }}\n                  </a>\n                  Run Details\n                </span>\n              </div>\n\n              <!-- Run-detail grid (run ID, step/token counts, $ cost, status) \u2014 developer/\n                   observability data. The whole run-details section (this grid AND its\n                   header above) is gated on showAgentRunDetails at the panel root, so a\n                   white-labeled surface hides all of it; the delete/pin/rating overflow\n                   below is a sibling block (outside this @if) and still renders. -->\n              <div class=\"agent-details-grid\">\n                <div class=\"detail-row\">\n                  <span class=\"detail-label\">Run ID:</span>\n                  <span class=\"detail-value\">\n                    <a class=\"run-id-link\" (click)=\"openAgentRunRecord()\" title=\"Open agent run details\">\n                      {{ agentRun.ID }}\n                      <i class=\"fas fa-external-link-alt\"></i>\n                    </a>\n                  </span>\n                </div>\n\n                @if (agentRunStepCount > 0) {\n                  <div class=\"detail-row\">\n                    <span class=\"detail-label\">Steps:</span>\n                    <span class=\"detail-value\">{{ agentRunStepCount }}</span>\n                  </div>\n                }\n\n                @if (agentRunTotalTokens > 0) {\n                  <div class=\"detail-row\">\n                    <span class=\"detail-label\">Tokens:</span>\n                    <span class=\"detail-value\">{{ formatNumber(agentRunTotalTokens) }}</span>\n                  </div>\n                }\n\n                @if (agentRunTotalCost > 0) {\n                  <div class=\"detail-row\">\n                    <span class=\"detail-label\">Cost:</span>\n                    <span class=\"detail-value\">\\${{ agentRunTotalCost.toFixed(4) }}</span>\n                  </div>\n                }\n\n                @if (agentRun.Status) {\n                  <div class=\"detail-row\">\n                    <span class=\"detail-label\">Status:</span>\n                    <span class=\"detail-value status-badge\" [class]=\"'status-' + agentRun.Status.toLowerCase()\">\n                      {{ agentRun.Status }}\n                    </span>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n\n          <!-- Delete + Rating + Pin in gear panel for non-last messages \u2014 mirrors last-message footer layout -->\n          @if (!isLastMessage) {\n            <div class=\"agent-panel-actions\">\n              @if (allowMessageDelete && isConversationOwner) {\n                <button class=\"action-bar-btn danger\" (click)=\"onDeleteClick()\" title=\"Delete this message and all messages below it\">\n                  <i class=\"fas fa-trash\"></i>\n                </button>\n              }\n              @if (messageStatus === 'Complete') {\n                <div class=\"ai-message-actions\">\n                  @if (showMessageRating) {\n                    <mj-conversation-message-rating\n                      [conversationDetailId]=\"message.ID\"\n                      [currentUser]=\"currentUser\"\n                      [ratingsData]=\"ratings\"\n                      [canEdit]=\"isConversationOwner && !ReadOnly\">\n                    </mj-conversation-message-rating>\n                  }\n                  @if (allowPinning) {\n                    <button\n                      class=\"action-bar-btn pin-btn\"\n                      [class.pinned]=\"message.IsPinned\"\n                      (click)=\"PinMessage()\"\n                      [title]=\"message.IsPinned ? 'Unpin message' : 'Pin message'\"\n                      type=\"button\">\n                      <i class=\"fas fa-thumbtack\"></i>\n                    </button>\n                  }\n                </div>\n              } @else if (allowPinning) {\n                <button\n                  class=\"action-bar-btn pin-btn\"\n                  [class.pinned]=\"message.IsPinned\"\n                  (click)=\"PinMessage()\"\n                  [title]=\"message.IsPinned ? 'Unpin message' : 'Pin message'\"\n                  type=\"button\">\n                  <i class=\"fas fa-thumbtack\"></i>\n                </button>\n              }\n            </div>\n          }\n\n          <!-- Tasks Section -->\n          @if (detailTasks.length > 0) {\n            <div class=\"agent-details-tasks\">\n              <div class=\"tasks-section-header\">\n                <i class=\"fas fa-tasks\"></i>\n                <span>Associated Tasks ({{ detailTasks.length }})</span>\n              </div>\n              <div class=\"tasks-list\">\n                @for (task of detailTasks; track task) {\n                  <mj-task-widget\n                    [task]=\"task\"\n                    [compact]=\"false\"\n                    [clickable]=\"false\"\n                    [showProgress]=\"true\"\n                    [showDuration]=\"true\">\n                  </mj-task-widget>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Reaction Buttons -->\n    @if (showReactions && !isProcessing && !isInProgressAIMessage && !isEditing) {\n      <div class=\"message-reactions\">\n        <button class=\"reaction-btn\" (click)=\"toggleReaction('like')\">\n          <i class=\"far fa-thumbs-up\"></i>\n          <span class=\"reaction-count\">0</span>\n        </button>\n        <button class=\"reaction-btn\" (click)=\"toggleReaction('comment')\">\n          <i class=\"far fa-comment\"></i>\n          <span class=\"reaction-count\">0</span>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n<!-- Fork marker: a separate element under the row, outside its rail and fade -->\n@if (ForkMarkerText) {\n  <div class=\"fork-marker\" role=\"note\">\n    <i class=\"fa-solid fa-code-branch\" aria-hidden=\"true\"></i>\n    <span class=\"fork-marker-text\">{{ ForkMarkerText }}</span>\n    <span class=\"fork-marker-line\" aria-hidden=\"true\"></span>\n  </div>\n}\n", styles: [".message-item {\n  display: flex;\n  gap: 12px;\n  padding: 8px 24px;\n  transition: background-color 150ms ease;\n  animation: fadeIn 0.3s ease;\n  position: relative;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.message-item.ai-message {\n  background-color: transparent;\n}\n\n.message-item.user-message {\n  background-color: transparent;\n}\n\n/* Jump-to beacon: pulsed amber glow applied programmatically after scroll */\n.message-item.pin-beacon {\n  animation: pinBeacon 1.5s ease-out forwards;\n}\n\n@keyframes pinBeacon {\n  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-warning) 60%, transparent); }\n  20%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--mj-status-warning) 35%, transparent); }\n  50%  { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-status-warning) 15%, transparent); }\n  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mj-status-warning) 20%, transparent); }\n  100% { box-shadow: none; }\n}\n\n/* Search hit: a highlight applied programmatically for 2 s after a search result opens */\n.message-item.search-hit-highlight {\n  animation: searchHitHighlight 2s ease-out forwards;\n}\n\n@keyframes searchHitHighlight {\n  0%   { background-color: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent); }\n  70%  { background-color: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); }\n  100% { background-color: transparent; }\n}\n\n.message-item.in-progress {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  border-left: 3px solid var(--mj-brand-primary);\n  position: relative;\n}\n\n@keyframes shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n\n/* Progress message styling - make it visually distinct */\n.message-item.in-progress .message-text {\n  color: var(--mj-text-primary);\n  font-weight: 500;\n  max-height: 150px;\n  overflow-y: auto;\n  display: block;\n}\n\n/* A streamed reply is not a status line. While the bubble shows streamed reply text the item\n   adds `streaming` (IsStreaming, set by the list's in-place refresh): the cap above would box\n   the growing reply into a 150px scroller of its own, and the status weight would re-wrap every\n   line when the settled message drops it on completion, so the reply is set at its settled weight\n   from the first frame. */\n.message-item.in-progress.streaming .message-text {\n  max-height: none;\n  overflow-y: visible;\n  font-weight: inherit;\n}\n\n\n/* Pulse effect for avatar */\n.message-item.in-progress .avatar-circle {\n  box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-brand-primary) 70%, transparent);\n  animation: pulse 2s ease-in-out infinite;\n}\n\n@keyframes pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-brand-primary) 70%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 0%, transparent);\n  }\n}\n\n.message-item:hover {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 2%, transparent);\n}\n\n/* Mention Pills - Match new editor chip style */\n:host ::ng-deep .mention-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 12px;\n  margin: 0 3px;\n  border-radius: 16px;\n  font-weight: 600;\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n\n:host ::ng-deep .mention-badge.agent {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n}\n\n:host ::ng-deep .mention-badge.user {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n}\n\n:host ::ng-deep .mention-badge.entity {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n}\n\n:host ::ng-deep .mention-badge.query {\n  background: var(--mj-status-warning);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n}\n\n:host ::ng-deep .mention-badge.record {\n  background: var(--mj-color-info, #2563eb);\n  color: var(--mj-text-inverse, #fff);\n  border: 2px solid color-mix(in srgb, var(--mj-color-info, #2563eb) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n  text-decoration: none;\n}\n\n/* Icon-only record citation: surrounding prose already named the row. */\n:host ::ng-deep .mention-badge.record.icon-only {\n  padding: 4px 7px;\n  gap: 0;\n  min-width: 1.65em;\n  justify-content: center;\n}\n\n/* Skills: standard green fallback (AISkill.Color overrides via inline style) + sharp-cornered\n   rectangle \u2014 the shape differentiates skills from the rounded agent/user/entity pills.\n   Keep color + shape in sync with the composer chip (mention-editor's createMentionChip). */\n:host ::ng-deep .mention-badge.skill {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-text-inverse) 35%, transparent);\n  border-radius: 4px;\n  box-shadow: var(--mj-shadow-md);\n}\n\n:host ::ng-deep .mention-badge i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n\n/* Support for custom icon classes with background-image (like mj-icon-skip) */\n:host ::ng-deep .mention-badge i[class^=\"mj-icon-\"],\n:host ::ng-deep .mention-badge i[class*=\" mj-icon-\"] {\n  width: 16px;\n  height: 16px;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  vertical-align: middle;\n  font-size: inherit;\n}\n\n/* Skip icon - must use ::ng-deep for dynamically injected HTML */\n:host ::ng-deep .mention-badge i.mj-icon-skip {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E\");\n}\n\n/* Betty icon */\n:host ::ng-deep .mention-badge i.mj-icon-betty {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23FF6B6B'/%3E%3Ctext x='50' y='65' text-anchor='middle' font-size='40' fill='white' font-family='Arial, sans-serif' font-weight='bold'%3EB%3C/text%3E%3C/svg%3E\");\n}\n\n/* Izzy icon */\n:host ::ng-deep .mention-badge i.mj-icon-izzy {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 204 180'%3E%3Cpath d='M0 0 C3.61144774 3.08477828 4.84942137 4.90830493 5.5 9.625 C5 13 5 13 3.5 14.9375 C1.74432121 17.35155834 1.83578869 18.21944114 1.90625 21.12890625 C1.9371875 22.40636719 1.968125 23.68382813 2 25 C3.18335937 24.72285156 4.36671875 24.44570313 5.5859375 24.16015625 C22.44010416 20.26839867 22.44010416 20.26839867 30 20 C31.80210938 19.92265625 31.80210938 19.92265625 33.640625 19.84375 C47.49356199 19.44904163 61.73614427 20.86627802 75 25 C75.53596907 19.64244551 75.53596907 19.64244551 73.5 15 C71.5549761 12.4066348 71.45048389 10.16629658 71.59375 6.97265625 C72.33633815 3.36681955 74.01253991 1.99164006 77 0 C79.80907914 -0.63997166 82.18961327 -0.63020793 85 0 C87.8100346 1.79363911 89.50940468 3.01880935 91 6 C90.984375 8.05859375 90.984375 8.05859375 90.75 10.4375 C90.68296875 11.21996094 90.6159375 12.00242187 90.546875 12.80859375 C90 15 90 15 88.49609375 16.3984375 C86.25734576 18.79500846 86.4852344 20.97464008 86.3125 24.1875 C86.21388672 25.81751953 86.21388672 25.81751953 86.11328125 27.48046875 C86.07589844 28.31191406 86.03851563 29.14335937 86 30 C86.67675781 30.0825 87.35351562 30.165 88.05078125 30.25 C91.82333306 31.20937741 94.89353787 32.99425194 98.1875 35 C99.18052124 35.60448975 99.18052124 35.60448975 100.19360352 36.22119141 C111.98050012 43.58460075 121.17745776 53.2687532 127 66 C127 66.66 127 67.32 127 68 C127.721875 68.0825 128.44375 68.165 129.1875 68.25 C133.81406141 69.48374971 136.2179022 71.66516963 138.625 75.7734375 C140.97801199 81.55147269 140.43210927 87.87027126 140.375 94 C140.38660156 95.24523437 140.39820313 96.49046875 140.41015625 97.7734375 C140.3675701 111.08870765 140.3675701 111.08870765 135.5 116.7421875 C131.62323281 119.66995439 128.8523137 121.14337998 124 121.125 C122.9790625 121.12886719 122.9790625 121.12886719 121.9375 121.1328125 C120 121 120 121 117 120 C116.74347656 120.65226562 116.48695313 121.30453125 116.22265625 121.9765625 C115.83980469 122.85054688 115.45695313 123.72453125 115.0625 124.625 C114.70285156 125.48351562 114.34320313 126.34203125 113.97265625 127.2265625 C108.57908063 134.80960941 99.56813916 137.59212379 91.0625 140.375 C90.02287109 140.72949219 88.98324219 141.08398438 87.91210938 141.44921875 C80.34347852 144 80.34347852 144 78 144 C78.02094727 144.65484375 78.04189453 145.3096875 78.06347656 145.984375 C78.14730383 148.98942328 78.19886895 151.99422464 78.25 155 C78.28351563 156.02996094 78.31703125 157.05992187 78.3515625 158.12109375 C78.43361416 164.56214867 77.93369275 169.71304442 74 175 C68.75523423 179.17440541 64.68195675 180.53237245 58 180 C55.12653443 178.963898 52.49379495 177.58020045 49.8125 176.125 C49.11447266 175.76019531 48.41644531 175.39539063 47.69726562 175.01953125 C46.39868999 174.33997216 45.10309803 173.65465367 43.81176758 172.96142578 C43.21388428 172.64415527 42.61600098 172.32688477 42 172 C41.34290039 171.59402588 40.68580078 171.18805176 40.00878906 170.76977539 C38.03672401 169.77639533 38.03672401 169.77639533 36.12475586 170.58325195 C35.49448486 170.96441162 34.86421387 171.34557129 34.21484375 171.73828125 C33.17166992 172.35026367 33.17166992 172.35026367 32.10742188 172.97460938 C31.39134766 173.41611328 30.67527344 173.85761719 29.9375 174.3125 C28.51029236 175.1647359 27.08194984 176.01507485 25.65234375 176.86328125 C25.02320068 177.24782471 24.39405762 177.63236816 23.74584961 178.02856445 C19.79572932 180.2265128 16.44037501 180.296025 12 180 C6.82155197 178.33236419 3.95074467 176.59004726 1 172 C-0.72417326 168.34258111 -1.2403609 165.51230089 -1.1953125 161.48046875 C-1.18886719 160.45888672 -1.18242188 159.43730469 -1.17578125 158.38476562 C-1.15902344 157.32966797 -1.14226563 156.27457031 -1.125 155.1875 C-1.11597656 154.11306641 -1.10695312 153.03863281 -1.09765625 151.93164062 C-1.07415306 149.28753146 -1.04129575 146.64388128 -1 144 C-1.63196289 143.81171631 -2.26392578 143.62343262 -2.91503906 143.42944336 C-8.20708475 141.84808949 -13.49207901 140.2541307 -18.75 138.5625 C-19.98234375 138.17191406 -21.2146875 137.78132812 -22.484375 137.37890625 C-29.06200008 134.79901552 -34.12925122 130.90130551 -38 125 C-38.875 121.5625 -38.875 121.5625 -39 119 C-39.495 119.33 -39.99 119.66 -40.5 120 C-45.24354984 121.89741993 -49.49426304 121.53143657 -54.1875 119.875 C-58.42051121 117.05299253 -61.35909664 113.92271008 -63 109 C-63.22709306 104.92471184 -63.22828659 100.8492307 -63.24023438 96.76806641 C-63.2498982 94.77103695 -63.28108516 92.77414948 -63.3125 90.77734375 C-63.36188158 78.59243786 -63.36188158 78.59243786 -60 73 C-57.7509823 70.86631654 -55.88785241 69.35340008 -53.0078125 68.20703125 C-50.3010212 66.57979679 -49.65488803 64.83796148 -48.3125 62 C-45.06106922 55.7428385 -40.95735135 50.97447519 -36 46 C-35.40832031 45.38511719 -34.81664063 44.77023438 -34.20703125 44.13671875 C-28.97373562 39.11136864 -17.47215548 30 -10 30 C-10.08733973 27.91589342 -10.19552278 25.83265331 -10.3125 23.75 C-10.37050781 22.58984375 -10.42851563 21.4296875 -10.48828125 20.234375 C-11.02905532 16.81635262 -11.84853545 15.59874271 -14 13 C-14.54046356 8.75350057 -14.48376179 6.74176808 -12.125 3.125 C-8.57275398 -0.42724602 -4.8825369 -0.970906 0 0 Z M5 35 C4.30245605 35.21962402 3.60491211 35.43924805 2.88623047 35.66552734 C-14.1501062 41.15773444 -29.02751477 50.81254544 -39 66 C-39.33 66.99 -39.66 67.98 -40 69 C-37.525 70.98 -37.525 70.98 -35 73 C-34.52691406 72.29875 -34.05382812 71.5975 -33.56640625 70.875 C-21.08320269 52.96537462 -2.17172019 42.38052109 19.26171875 38.5078125 C46.97805996 34.9959591 75.10426623 38.71529466 97.73046875 56.09765625 C103.53827054 61.07953766 107.9264808 66.53902088 112 73 C113.32 72.01 114.64 71.02 116 70 C115.01713954 61.60788376 107.55262518 55.04847712 101.375 49.8125 C82.80696113 35.82916208 61.35998978 30.59265576 38.375 30.625 C37.71836365 30.62554382 37.06172729 30.62608765 36.38519287 30.62664795 C25.42439402 30.66823796 15.42390121 31.62072499 5 35 Z' fill='%234E3B78' transform='translate(63,0)'/%3E%3Cpath d='M0 0 C5.27957047 5.78547525 9.31612861 13.25448014 10 21.125 C9.69743213 24.83293961 8.77676366 26.8914086 6.1875 29.5625 C-2.04152489 35.76003038 -13.60917874 39.6270706 -23.875 38.8125 C-24.535 38.1525 -25.195 37.4925 -25.875 36.8125 C-28.97847254 36.48234335 -31.03281176 36.30718706 -33.75 37.9375 C-35.40354531 40.69340884 -35.26865568 42.66325452 -34.875 45.8125 C-33.95833333 47.89583333 -33.95833333 47.89583333 -31.875 48.8125 C-28.29166667 48.89583333 -28.29166667 48.89583333 -24.875 47.8125 C-24.57086182 47.16466553 -24.26672363 46.51683105 -23.95336914 45.84936523 C-22.875 43.8125 -22.875 43.8125 -20.77124023 42.88696289 C-19.91731689 42.6883667 -19.06339355 42.48977051 -18.18359375 42.28515625 C-17.23806641 42.04990234 -16.29253906 41.81464844 -15.31835938 41.57226562 C-14.32642578 41.34216797 -13.33449219 41.11207031 -12.3125 40.875 C-4.77934417 39.10870895 1.54823541 36.95205932 8.125 32.8125 C7.81647145 40.06292099 4.56245219 45.32546918 -0.5 50.4609375 C-5.29811284 54.61130511 -8.83216751 54.86916719 -15 55 C-21.13677833 55.26569953 -25.04589225 56.51893716 -29.890625 60.31640625 C-39.17633501 67.31724667 -52.82450605 66.52799961 -63.875 65.8125 C-71.37432145 64.60538489 -79.4496824 61.2378176 -84.875 55.8125 C-86.81199027 55.70419517 -88.75076074 55.60687514 -90.69067383 55.58691406 C-97.68300211 55.51299157 -103.12007731 55.4392364 -108.44140625 50.40234375 C-108.91449219 49.87769531 -109.38757813 49.35304688 -109.875 48.8125 C-110.6175 48.090625 -111.36 47.36875 -112.125 46.625 C-118.35765562 36.60823203 -119.69570866 25.34707186 -117.25 13.8828125 C-113.47065738 3.0509466 -104.76645407 -4.0120534 -94.875 -9.1875 C-91.26850975 -10.75400624 -87.62602625 -12.0153043 -83.875 -13.1875 C-83.029375 -13.47496094 -82.18375 -13.76242188 -81.3125 -14.05859375 C-56.0861494 -22.29657387 -20.04377266 -18.06142152 0 0 Z' fill='%23FDFDFD' transform='translate(155.875,64.1875)'/%3E%3Cpath d='M0 0 C5.24479788 1.58079188 9.51172656 4.60408712 14.06640625 7.58984375 C18.37837094 10.28462973 18.37837094 10.28462973 23.30859375 11.1328125 C28.49696048 9.20971132 33.08639658 6.29555589 37.79882812 3.42578125 C43.66838131 -0.00837477 43.66838131 -0.00837477 47.27734375 0.078125 C49.34375 1.0078125 49.34375 1.0078125 51.34375 3.0078125 C51.82984303 7.30136192 51.71414913 11.62739332 51.71875 15.9453125 C51.74324219 17.15123047 51.76773438 18.35714844 51.79296875 19.59960938 C51.79876953 21.33114258 51.79876953 21.33114258 51.8046875 23.09765625 C51.81290527 24.15847412 51.82112305 25.21929199 51.82958984 26.31225586 C51.34375 29.0078125 51.34375 29.0078125 49.48461914 30.87670898 C46.29658529 32.56106989 44.78123809 32.062357 41.34375 31.0078125 C37.60135447 29.03986817 34.07891261 26.72386924 30.53320312 24.42578125 C26.44214688 21.80182316 26.44214688 21.80182316 21.77734375 20.921875 C17.60401055 22.78413283 13.85973006 25.2663764 10.046875 27.76953125 C5.85335687 30.41401513 2.44659272 31.9581498 -2.65625 32.0078125 C-4.33203125 30.87695312 -4.33203125 30.87695312 -5.65625 29.0078125 C-6.04443359 26.328125 -6.04443359 26.328125 -6.0546875 23.1328125 C-6.05855469 21.98296875 -6.06242187 20.833125 -6.06640625 19.6484375 C-6.05480469 18.44703125 -6.04320313 17.245625 -6.03125 16.0078125 C-6.04285156 14.80640625 -6.05445312 13.605 -6.06640625 12.3671875 C-6.06253906 11.21734375 -6.05867188 10.0675 -6.0546875 8.8828125 C-6.05130371 7.82835937 -6.04791992 6.77390625 -6.04443359 5.6875 C-5.65625 3.0078125 -5.65625 3.0078125 -4.29736328 1.14111328 C-2.65625 0.0078125 -2.65625 0.0078125 0 0 Z' fill='%23FCFCFD' transform='translate(78.65625,136.9921875)'/%3E%3Cpath d='M0 0 C2.5 0.625 2.5 0.625 4.8125 2.625 C6.96830116 6.4575354 7.24792603 9.32007692 6.5 13.625 C5.34367254 15.98793002 4.35016245 17.77483755 2.5 19.625 C0.1875 20 0.1875 20 -2.5 19.625 C-5.06638215 17.47478793 -6.29103188 15.79226637 -6.88671875 12.46484375 C-7.08084032 8.45522921 -6.77549931 6.12498023 -4.8125 2.5625 C-2.5 0.625 -2.5 0.625 0 0 Z' fill='%2353417C' transform='translate(138.5,67.375)'/%3E%3Cpath d='M0 0 C2.5 0.6875 2.5 0.6875 4.8125 2.625 C7.08407605 6.74748987 7.32547179 10.07653131 6.5 14.6875 C4.8125 17.75 4.8125 17.75 2.5 19.6875 C-0.0625 20.25 -0.0625 20.25 -2.5 19.6875 C-5.30401904 17.38419865 -5.84979387 14.76309142 -6.4375 11.3125 C-6.72853275 7.71913649 -6.44645777 6.57011897 -4.875 3.125 C-2.5 0.6875 -2.5 0.6875 0 0 Z' fill='%23523F7B' transform='translate(64.5,67.3125)'/%3E%3Cpath d='M0 0 C8.91 0 17.82 0 27 0 C24.81183076 5.47042311 24.169236 6.55141452 19 9 C14.08609728 9.94526984 9.88605617 10.13992406 5.51171875 7.49609375 C3.4733513 5.76185217 1.65854906 4.10051199 0 2 C0 1.34 0 0.68 0 0 Z' fill='%23574680' transform='translate(88,95)'/%3E%3C/svg%3E\");\n}\n\n/* Support for image tags in mention badges */\n:host ::ng-deep .mention-badge img {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  object-fit: cover;\n  vertical-align: middle;\n}\n\n:host ::ng-deep .mention-badge:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-lg);\n}\n\n/* Configuration preset indicator for agent mentions with non-default presets */\n/* Matches the styling from mention-editor.component.ts (lines 432-444) */\n:host ::ng-deep .mention-badge .preset-indicator {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;\n  background: rgba(255, 255, 255, 0.25);\n  padding: 2px 6px;\n  border-radius: 4px;\n  margin-left: 4px;\n  letter-spacing: 0.3px;\n  text-transform: uppercase;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n}\n\n.message-avatar {\n  flex-shrink: 0;\n}\n\n.avatar-circle {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  color: var(--mj-text-inverse);\n}\n\n/* User avatars are circular */\n.avatar-circle.user-avatar {\n  border-radius: 50%;\n  background-color: var(--mj-text-primary);\n}\n\n/* Agent avatars are square with rounded corners */\n.avatar-circle.ai-avatar {\n  border-radius: 8px;\n  background-color: var(--mj-brand-primary); /* Brand color for agents */\n}\n\n/* Avatar images (for users with uploaded photos or URLs) */\n/* Host-supplied assistant avatar: the AI tile is a rounded SQUARE (8px, brand\n   fill), so the image must clip to the tile's radius \u2014 not the user avatar's\n   50% circle \u2014 and the brand fill must drop so nothing peeks out at the\n   corners or behind a transparent image. */\n.avatar-circle.ai-avatar.avatar-has-image {\n  background-color: transparent;\n  overflow: hidden;\n}\n.avatar-circle.ai-avatar .avatar-image {\n  border-radius: inherit;\n}\n\n.avatar-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n/* Container for the standard mj-loading indicator while an artifact's rows load. Layout only \u2014\n   the indicator owns its own animation, so there is no bespoke shimmer to keep re-themed. */\n.artifact-pending {\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n}\n\n/* System artifact styling - subtle visual distinction */\n.artifact-wrapper.system-artifact {\n  opacity: 0.85;\n  position: relative;\n}\n\n.artifact-wrapper.system-artifact::before {\n  content: 'SYSTEM';\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.message-content {\n  flex: 1;\n  min-width: 0;\n  position: relative;\n}\n\n.message-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 4px;\n  font-size: 13px;\n}\n\n.message-sender {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n/* Agent role badge */\n.agent-badge {\n  display: inline-block;\n  padding: 2px 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 10px;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.message-time {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  font-weight: 400;\n}\n\n/* Right-side cluster anchoring.\n   The first of these siblings that actually renders absorbs the\n   `margin-left: auto`, pushing the whole cluster right. Subsequent siblings\n   then sit next to it (relying on the flex container's `gap`). This used to\n   live only on .time-pill, which broke when timePillText returned null after\n   agent completion \u2014 the gear icon would shift to the left. */\n.time-pill,\n.test-feedback-icon,\n.message-action-group,\n.agent-run-icon {\n  margin-left: auto;\n}\n.time-pill ~ .test-feedback-icon,\n.time-pill ~ .message-action-group,\n.time-pill ~ .agent-run-icon,\n.test-feedback-icon ~ .message-action-group,\n.test-feedback-icon ~ .agent-run-icon,\n.message-action-group ~ .agent-run-icon {\n  margin-left: 8px;\n}\n\n/* Message actions: always visible at the right end of the header, in DOM order (no overlay),\n   with the same look as the gear (.agent-run-icon). */\n.message-action-group {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n}\n/* Labeled actions on the latest turn need more room between them than icons do */\n.message-action-group.labeled {\n  gap: var(--mj-space-4);\n}\n.message-header-action {\n  gap: var(--mj-space-2);\n  min-width: 20px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  font: inherit;\n  font-size: 12px;\n}\n.message-header-action i {\n  font-size: 13px;\n}\n.message-header-action:focus-visible {\n  outline: none;\n  border-radius: var(--mj-radius-sm);\n  box-shadow: var(--mj-focus-ring);\n}\n/* Inherited rows fade to 70%; the stronger color keeps the header icons at 3:1 against the surface */\n.message-item.fork-rail-inherited .message-header-action:not(:hover),\n.message-item.fork-rail-inherited .agent-run-icon:not(:hover):not(.expanded) {\n  color: var(--mj-text-secondary);\n}\n.message-action-group .action-label-short {\n  display: none;\n}\n\n/* Time pill - unified styling for all AI message states */\n.time-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  transition: all 0.3s ease;\n}\n\n.time-pill i {\n  font-size: 10px;\n}\n\n/* Stop control beside the in-progress time pill \u2014 same pill geometry, error palette so it\n   reads as the one destructive control in the header. */\n.stop-run-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  border: 1px solid transparent;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: inherit;\n  cursor: pointer;\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n  transition: all 0.2s ease;\n}\n\n.stop-run-pill i {\n  font-size: 10px;\n}\n\n.stop-run-pill:hover:not(:disabled) {\n  border-color: var(--mj-status-error);\n}\n\n.stop-run-pill:disabled {\n  cursor: default;\n  opacity: 0.7;\n}\n\n/* Complete state - light blue (default) */\n.time-pill.complete {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-status-info-text);\n}\n\n/* Stopped state - neutral: a stopped run is neither a success nor an error, and the error\n   palette belongs to the stalled state. Follows .complete so it wins on equal specificity. */\n.time-pill.stopped {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-secondary);\n}\n\n/* In-progress state - brand color with subtle pulse */\n.time-pill.in-progress {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n/* Active agent run state - brand color with subtle pulse */\n.time-pill.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n/* Liveness states (MJ #4222) \u2014 the run may no longer be progressing, so the pill stops\n   presenting the elapsed time as healthy progress. These follow .in-progress/.active in the\n   stylesheet so they win on equal specificity. */\n.time-pill.checking {\n  background: var(--mj-status-warning-bg);\n  color: var(--mj-status-warning-text);\n}\n\n.time-pill.stalled {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n}\n\n.time-pill .liveness-label {\n  font-weight: 400;\n  opacity: 0.85;\n}\n\n/* Failed state - red */\n.time-pill.failed {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n}\n\n@keyframes pillPulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.85;\n  }\n}\n\n/* A stopped reply: the kept-step line and the Continue control under the reply text */\n.stopped-line {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-2);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n.stopped-line i {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n.stopped-actions {\n  display: flex;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-2);\n}\n\n/* Deprecated - keeping for backward compatibility but no longer used */\n.generation-time {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  background: var(--mj-status-info-bg);\n  border-radius: 10px;\n  font-size: 11px;\n  color: var(--mj-status-info-text);\n  font-weight: 500;\n  margin-left: auto;\n}\n\n.generation-time i {\n  font-size: 10px;\n}\n\n/* Deprecated - keeping for backward compatibility but no longer used */\n.message-elapsed {\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-style: italic;\n}\n\n.message-body {\n  margin-bottom: 0;\n}\n\n.message-text {\n  color: var(--mj-text-primary);\n  line-height: 1.5;\n  word-wrap: break-word;\n}\n\n/* Remove extra margin from markdown paragraphs */\n.message-text mj-markdown > :first-child,\n.message-text ::ng-deep .mj-markdown-container > :first-child {\n  margin-top: 0;\n}\n\n.message-text mj-markdown > :last-child,\n.message-text ::ng-deep .mj-markdown-container > :last-child {\n  margin-bottom: 0;\n}\n\n/* Asymmetric bubble shapes for message content */\n.message-item.user-message .message-content {\n  border-radius: 12px 12px 12px 4px;\n}\n\n.message-item.ai-message .message-content {\n  border-radius: 4px 12px 12px 12px;\n}\n\n/* Reaction Buttons */\n.message-reactions {\n  display: none; /* Hide reactions for now - not implemented */\n}\n\n/* Artifact Card - Claude.ai Style */\n.artifact-card {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-top: 12px;\n  padding: 16px;\n  border: 1px solid color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n  border-radius: 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  max-width: 500px;\n  box-shadow: var(--mj-shadow-sm);\n  position: relative;\n  overflow: hidden;\n}\n\n.artifact-card::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background: var(--mj-brand-primary);\n  opacity: 1;\n}\n\n.artifact-card:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-1px);\n}\n\n.artifact-card-header {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n}\n\n.artifact-card-icon {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  border-radius: 6px;\n  transition: all 0.2s ease;\n}\n\n.artifact-card:hover .artifact-card-icon {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  transform: scale(1.05);\n}\n\n.artifact-card-icon i {\n  font-size: 18px;\n}\n\n.artifact-card-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-card-label {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  letter-spacing: -0.01em;\n  margin-bottom: 4px;\n}\n\n.artifact-card-description {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n}\n\n/* Thread indicator badge */\n.thread-indicator {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  margin-top: 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  border-radius: 16px;\n  cursor: pointer;\n  transition: all 150ms ease;\n  font-size: 12px;\n  color: var(--mj-brand-primary-hover);\n  font-weight: 500;\n}\n\n.thread-indicator:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.thread-indicator i {\n  font-size: 14px;\n}\n\n.thread-count {\n  font-weight: 600;\n}\n\n/* Edit mode styles */\n.message-item.editing {\n  background-color: var(--mj-status-warning-bg);\n  border-left: 3px solid var(--mj-status-warning);\n}\n\n.message-edit-container {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.message-edit-textarea {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  font-family: inherit;\n  font-size: 14px;\n  line-height: 1.6;\n  resize: vertical;\n  min-height: 80px;\n  transition: border-color 150ms ease;\n}\n\n.message-edit-textarea:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.edit-actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n}\n\n/* What the save does, at the right end of the button row */\n.edit-note {\n  margin-left: auto;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n\n/* The answer \"Save and resend\" will replace dims while that edit is open */\n.message-item.pending-replace .message-body {\n  opacity: 0.6;\n}\n\n.edit-hint {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.edited-badge {\n  margin-left: 8px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n  font-weight: normal;\n}\n\n/* Message Action Bar (separate panel above agent details) */\n.message-action-bar {\n  margin-top: 12px;\n  margin-bottom: 8px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 12px;\n}\n\n.action-bar-container {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.action-buttons {\n  display: flex;\n  gap: 4px;\n  margin-left: 16px;\n  padding-left: 16px;\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.action-bar-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 10px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-text-muted);\n  border-radius: 6px;\n  font-size: 16px;\n  line-height: 1;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s;\n  min-width: 36px;\n  height: 32px;\n  opacity: 0.6;\n}\n\n.action-bar-btn i {\n  font-size: 16px;\n  line-height: 1;\n}\n\n/* A footer button with a text label (Regenerate) */\n.action-bar-btn.labeled {\n  gap: var(--mj-space-2);\n  min-width: 0;\n  padding: 6px 12px;\n  font-size: 13px;\n}\n\n.action-bar-btn.labeled i {\n  font-size: 14px;\n}\n\n.action-bar-btn:hover {\n  opacity: 1;\n  border-color: var(--mj-text-secondary);\n}\n\n.action-bar-btn.danger {\n  color: var(--mj-status-error);\n}\n\n.action-bar-btn.danger:hover {\n  opacity: 1;\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n.action-bar-btn i.pinned {\n  color: var(--mj-brand-primary);\n}\n\n.action-bar-btn.test-feedback {\n  color: var(--mj-status-warning);\n}\n\n.action-bar-btn.test-feedback:hover {\n  opacity: 1;\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n}\n\n/* Message status indicator */\n.message-status {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  padding: 2px 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  margin-left: 8px;\n  animation: statusPulse 2s ease-in-out infinite;\n}\n\n.message-status i {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n}\n\n.message-status.error {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n}\n\n.message-status.error i {\n  color: var(--mj-status-error);\n}\n\n.status-text {\n  font-weight: 500;\n}\n\n@keyframes statusPulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.7; }\n}\n\n/* ============================================\n   Agent Run Icon & Details Panel\n   ============================================ */\n\n/* Agent run gear icon in header - muted style for power users.\n   Left-margin is governed by the right-side cluster rules above so the gear\n   stays right-anchored whether or not the time pill / test-feedback icon\n   renders alongside it. */\n.agent-run-icon,\n.message-header-action {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  user-select: none;\n}\n\n.agent-run-icon {\n  width: 20px;\n}\n\n.agent-run-icon i.fa-cog {\n  font-size: 13px;\n}\n\n.agent-run-icon:hover,\n.message-header-action:hover {\n  color: var(--mj-text-secondary);\n}\n\n.agent-run-icon.expanded {\n  color: var(--mj-brand-primary);\n  transform: scale(1.1);\n}\n\n/* Test feedback icon in header - appears for test runs.\n   Left-margin handled by the right-side cluster rules above. */\n.test-feedback-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  user-select: none;\n}\n\n.test-feedback-icon i.fa-flask {\n  font-size: 13px;\n}\n\n.test-feedback-icon:hover {\n  color: var(--mj-brand-primary); /* Blue color for test feedback */\n  transform: scale(1.1);\n}\n\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Agent details panel */\n.agent-details-panel {\n  margin-top: 12px;\n  padding: 16px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  animation: slideDown 0.2s ease;\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Loading state */\n.agent-details-loading {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n}\n\n.agent-details-loading i {\n  color: var(--mj-brand-primary);\n}\n\n/* Error state */\n.agent-details-error {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-status-error);\n  font-size: 13px;\n}\n\n.agent-details-error i {\n  color: var(--mj-status-error);\n}\n\n/* Content header */\n.agent-details-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.agent-details-header i {\n  color: var(--mj-brand-primary);\n}\n\n.agent-name-link {\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  text-decoration: none;\n  font-weight: 600;\n  transition: all 0.2s ease;\n}\n\n.agent-name-link:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n/* Details grid */\n.agent-details-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 12px;\n  margin-bottom: 12px;\n}\n\n.detail-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-label {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.detail-value {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;\n}\n\n/* Status badge in details */\n.status-badge {\n  padding: 3px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.status-pending {\n  background: var(--mj-status-warning-bg);\n  color: var(--mj-status-warning-text);\n}\n\n.status-badge.status-running {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-status-info-text);\n}\n\n.status-badge.status-complete {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n}\n\n.status-badge.status-failed,\n.status-badge.status-error {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n}\n\n.status-badge.status-cancelled {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n/* Run ID link styling */\n.run-id-link {\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  transition: all 0.2s ease;\n}\n\n.run-id-link:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n.run-id-link i.fa-external-link-alt {\n  font-size: 10px;\n  opacity: 0.7;\n}\n\n/* Tasks section in agent details */\n.agent-details-tasks {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.tasks-section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-weight: 600;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.tasks-section-header i {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n}\n\n.tasks-list {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.tasks-list mj-task-widget {\n  display: block;\n}\n\n/* Artifact version badge */\n.artifact-version-badge {\n  display: inline-block;\n  margin-left: 8px;\n  padding: 2px 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: 11px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n  vertical-align: middle;\n}\n\n/* Message Footer (rating counts and inline actions) */\n.message-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.rating-counts {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.rating-count {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.rating-count.thumbs-up {\n  color: var(--mj-status-success);\n}\n\n.rating-count.thumbs-down {\n  color: var(--mj-status-error);\n}\n\n.rating-total {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n/* Delete button \u2014 always visible on the last message, no hover required */\n.inline-delete {\n  display: flex;\n  align-items: center;\n}\n\n.message-item.pinned {\n  border-left: 3px solid var(--mj-status-warning);\n  background-color: color-mix(in srgb, var(--mj-status-warning) 8%, transparent);\n}\n\n/* Wraps pin button + rating component on the right side of the footer */\n.ai-message-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-left: auto;\n}\n\n.action-bar-btn.pin-btn {\n  color: var(--mj-text-muted);\n}\n\n.action-bar-btn.pin-btn:hover {\n  color: var(--mj-status-warning);\n  border-color: var(--mj-status-warning);\n}\n\n.action-bar-btn.pin-btn.pinned {\n  opacity: 1;\n  color: var(--mj-status-warning);\n  border-color: var(--mj-status-warning-border);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n}\n\n/* Delete + Rating + Pin in gear panel for non-last messages \u2014 mirrors .message-footer layout */\n.agent-panel-actions {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 0 0;\n  margin-top: 8px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n/* Agent details section wrapper */\n.agent-details-section {\n  margin-top: 8px;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .message-item {\n    padding: 8px 12px;\n    gap: 8px;\n  }\n\n  .avatar-circle {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n  }\n\n  .artifact-card {\n    max-width: 90vw;\n    padding: 12px;\n  }\n\n  .artifact-card-icon {\n    width: 32px;\n    height: 32px;\n  }\n\n  .artifact-card-icon i {\n    font-size: 16px;\n  }\n\n  .message-header {\n    font-size: 12px;\n  }\n\n  .message-sender {\n    font-size: 12px;\n  }\n\n  .message-time {\n    font-size: 11px;\n  }\n\n  .agent-badge {\n    font-size: 10px;\n    padding: 1px 6px;\n  }\n\n  .time-pill {\n    font-size: 10px;\n    padding: 2px 6px;\n  }\n\n  /* The latest turn's Fork from here shortens to \"Fork\" */\n  .message-action-group .action-label-long {\n    display: none;\n  }\n\n  .message-action-group .action-label-short {\n    display: inline;\n  }\n}\n\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .message-item {\n    padding: 6px 8px;\n    gap: 6px;\n  }\n\n  .avatar-circle {\n    width: 28px;\n    height: 28px;\n    font-size: 12px;\n  }\n\n  .avatar-circle.ai-avatar {\n    border-radius: 6px;\n  }\n\n  .artifact-card {\n    padding: 10px;\n    margin-top: 8px;\n  }\n\n  .artifact-card-header {\n    gap: 8px;\n  }\n\n  .artifact-card-icon {\n    width: 28px;\n    height: 28px;\n  }\n\n  .artifact-card-icon i {\n    font-size: 14px;\n  }\n\n  .artifact-card-label {\n    font-size: 13px;\n  }\n\n  .artifact-card-description {\n    font-size: 12px;\n  }\n\n  .message-header {\n    font-size: 11px;\n    gap: 6px;\n  }\n\n  .message-sender {\n    font-size: 11px;\n  }\n\n  .message-time {\n    font-size: 10px;\n  }\n\n  .agent-badge {\n    font-size: 9px;\n    padding: 1px 5px;\n  }\n\n  .time-pill {\n    font-size: 9px;\n    padding: 1px 5px;\n  }\n\n  .thread-indicator {\n    padding: 4px 8px;\n    font-size: 11px;\n    margin-top: 6px;\n  }\n\n  .agent-details-panel {\n    padding: 12px;\n    margin-top: 8px;\n  }\n\n  .agent-details-grid {\n    grid-template-columns: 1fr;\n    gap: 8px;\n  }\n\n  .detail-row {\n    padding: 6px 8px;\n  }\n\n  .detail-label,\n  .detail-value {\n    font-size: 11px;\n  }\n}\n\n/* Form Response Pills */\n:host ::ng-deep .form-response-pill {\n  margin: 0 3px;\n  transition: all 0.2s ease;\n}\n\n/* Single field form - inline pill (similar to mention badges) */\n:host ::ng-deep .form-response-pill.single-field {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n  gap: 6px;\n  padding: 4px 12px;\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  border-radius: 16px;\n  font-size: 13px;\n  font-weight: 600;\n  box-shadow: var(--mj-shadow-md);\n  cursor: default;\n  white-space: nowrap;\n}\n\n/* Multi-field form - card-style (block display) */\n:host ::ng-deep .form-response-pill.multi-field {\n  display: inline-block;\n  max-width: min(800px, 100%);\n  width: auto;\n  min-width: 400px;\n  margin: 8px 0;\n  vertical-align: top;\n}\n\n:host ::ng-deep .form-response-pill.single-field i {\n  font-size: 11px;\n  opacity: 0.95;\n}\n\n:host ::ng-deep .form-response-pill.single-field strong {\n  font-weight: 600;\n  margin-right: 4px;\n}\n\n/* Multi-field form - card-style pill */\n:host ::ng-deep .form-response-pill .pill-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  font-weight: 600;\n  font-size: 13px;\n  border-radius: 12px 12px 0 0;\n  border: 2px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  border-bottom: none;\n  box-shadow: var(--mj-shadow-md);\n}\n\n:host ::ng-deep .form-response-pill .pill-header i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n\n:host ::ng-deep .form-response-pill .pill-fields {\n  padding: 10px 12px;\n  background: color-mix(in srgb, var(--mj-status-success) 8%, transparent);\n  border: 2px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  border-top: none;\n  border-radius: 0 0 12px 12px;\n}\n\n:host ::ng-deep .form-response-pill .pill-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px 0;\n  font-size: 13px;\n}\n\n:host ::ng-deep .form-response-pill .pill-field:not(:last-child) {\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n  padding-bottom: 12px;\n  margin-bottom: 0;\n}\n\n:host ::ng-deep .form-response-pill .field-question {\n  font-weight: 600;\n  color: var(--mj-status-success);\n  font-size: 12px;\n  line-height: 1.4;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  opacity: 0.9;\n}\n\n:host ::ng-deep .form-response-pill .field-answer {\n  color: var(--mj-text-primary);\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 1.6;\n  padding: 8px 0 8px 12px;\n  background: transparent;\n  border-left: 3px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  font-style: italic;\n}\n\n\n/* Hover effect for form pills */\n:host ::ng-deep .form-response-pill.single-field:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-lg);\n}\n\n:host ::ng-deep .form-response-pill.multi-field:hover {\n  transform: translateY(-1px);\n}\n\n:host ::ng-deep .form-response-pill.multi-field:hover .pill-header {\n  box-shadow: var(--mj-shadow-lg);\n}\n\n/* Responsive adjustments for multi-field forms */\n@media (max-width: 600px) {\n  :host ::ng-deep .form-response-pill.multi-field {\n    min-width: 300px;\n  }\n}\n\n@media (max-width: 400px) {\n  :host ::ng-deep .form-response-pill.multi-field {\n    min-width: 100%;\n  }\n\n  :host ::ng-deep .form-response-pill .field-question {\n    font-size: 11px;\n  }\n\n  :host ::ng-deep .form-response-pill .field-answer {\n    font-size: 14px;\n    padding: 6px 0 6px 10px;\n  }\n}\n\n/* ==================== Message Attachments ==================== */\n\n.message-attachments {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 12px;\n  margin-bottom: 8px;\n}\n\n.attachment-item {\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\n  transition: transform 0.2s, box-shadow 0.2s;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n\n.attachment-item:hover {\n  transform: scale(1.02);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.attachment-item.image-attachment {\n  width: 200px;\n  height: 150px;\n}\n\n.attachment-thumbnail {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n.attachment-overlay {\n  position: absolute;\n  inset: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n.attachment-item:hover .attachment-overlay {\n  opacity: 1;\n}\n\n.attachment-overlay i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n/* Non-image attachment tile: horizontal strip with UPPERCASE type badge,\n   filename, and size. Artifact-typed attachments get a brand-primary tinted\n   badge to distinguish them from plain uploads. */\n.attachment-strip {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 12px 8px 8px;\n  width: 320px;\n  max-width: 100%;\n  min-height: 56px;\n  cursor: pointer;\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.attachment-strip:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.attachment-badge {\n  flex: 0 0 auto;\n  min-width: 48px;\n  height: 48px;\n  padding: 0 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  font-weight: 700;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-subtle);\n  user-select: none;\n  text-align: center;\n  line-height: 1;\n  white-space: nowrap;\n}\n\n.attachment-strip.is-artifact .attachment-badge {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.attachment-meta {\n  display: flex;\n  flex-direction: column;\n  min-width: 0; /* allow ellipsis inside flex child */\n  gap: 2px;\n}\n\n.attachment-strip .file-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.attachment-strip .file-size {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n/* Responsive attachments */\n@media (max-width: 600px) {\n  .attachment-item.image-attachment {\n    width: 150px;\n    height: 112px;\n  }\n\n  .attachment-strip {\n    width: 100%;\n  }\n}\n/* \u2500\u2500 Markdown-rendered textarea values inside submitted form pills (e.g. the approved Plan) \u2500\u2500 */\n:host ::ng-deep .form-response-pill .field-answer-markdown {\n  font-style: normal; /* the pill's default italic reads poorly on multi-line formatted content */\n  font-size: 13.5px;\n  line-height: 1.6;\n  color: var(--mj-text-primary);\n}\n:host ::ng-deep .form-response-pill .field-answer-markdown h1,\n:host ::ng-deep .form-response-pill .field-answer-markdown h2,\n:host ::ng-deep .form-response-pill .field-answer-markdown h3,\n:host ::ng-deep .form-response-pill .field-answer-markdown h4 {\n  font-size: 13.5px;\n  font-weight: 700;\n  margin: 10px 0 4px;\n  color: var(--mj-text-primary);\n}\n:host ::ng-deep .form-response-pill .field-answer-markdown p {\n  margin: 6px 0;\n}\n:host ::ng-deep .form-response-pill .field-answer-markdown ul,\n:host ::ng-deep .form-response-pill .field-answer-markdown ol {\n  margin: 6px 0;\n  padding-left: 22px;\n}\n:host ::ng-deep .form-response-pill .field-answer-markdown li {\n  margin: 3px 0;\n}\n:host ::ng-deep .form-response-pill .field-answer-markdown code {\n  font-size: 12px;\n  padding: 1px 5px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--mj-status-success) 12%, transparent);\n}\n:host ::ng-deep .form-response-pill .field-answer-markdown table {\n  border-collapse: collapse;\n  margin: 8px 0;\n}\n:host ::ng-deep .form-response-pill .field-answer-markdown th,\n:host ::ng-deep .form-response-pill .field-answer-markdown td {\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n  padding: 4px 10px;\n  font-size: 12.5px;\n}\n\n/* Fork chips: one per fork placed under the message */\n.message-fork-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-2);\n}\n.message-fork-chips > button {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  max-width: 100%;\n  min-width: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: var(--mj-text-xs);\n}\n.message-fork-chips > button:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.message-fork-chips .fork-chip-icon {\n  color: var(--mj-status-info);\n}\n.message-fork-chips > button[data-kind='Edit'] .fork-chip-icon {\n  color: var(--mj-status-warning);\n}\n.message-fork-chips > button[data-kind='Regenerate'] .fork-chip-icon {\n  color: var(--mj-brand-tertiary);\n}\n.fork-chip-avatars {\n  display: inline-flex;\n}\n.fork-chip-avatar {\n  width: 20px;\n  height: 20px;\n  margin-left: -6px;\n  border: 2px solid var(--mj-bg-surface);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 9px;\n  font-weight: 600;\n  overflow: hidden;\n}\n.fork-chip-avatar:first-child {\n  margin-left: 0;\n}\n.fork-chip-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.fork-chip-messages {\n  font-weight: 600;\n  color: var(--mj-text-link);\n}\n/* The name is the part of a chip that shrinks: a long name ends in an ellipsis inside a narrow column. */\n.fork-chip-name {\n  font-weight: 500;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.fork-chip-time {\n  color: var(--mj-text-muted);\n}\n\n/* Fork view rails: inherited rows faded on a dashed rail, the fork's own rows on a solid rail.\n   The row's children fade, not the row, so the row's fade-in animation ends at the faded state. */\n.message-item.fork-rail-inherited {\n  border-left: 2px dashed var(--mj-border-strong);\n  padding-left: var(--mj-space-4);\n}\n.message-item.fork-rail-inherited > * {\n  opacity: 0.7;\n}\n.message-item.fork-rail-own {\n  border-left: 2px solid var(--mj-brand-primary);\n  padding-left: var(--mj-space-4);\n}\n\n/* Fork marker: a full-opacity divider under the last inherited row of a fork view, outside both rails */\n.fork-marker {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-2) var(--mj-space-6);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n.fork-marker i {\n  color: var(--mj-status-info);\n}\n.fork-marker-line {\n  flex: 1;\n  height: 1px;\n  background: var(--mj-border-default);\n}\n/* The marker lines up with the row padding of narrow screens */\n@media (max-width: 768px) {\n  .fork-marker {\n    padding: var(--mj-space-2) var(--mj-space-3);\n  }\n}\n@media (max-width: 480px) {\n  .fork-marker {\n    padding: var(--mj-space-2);\n  }\n\n  /* The editor note wraps under the buttons */\n  .edit-note {\n    flex-basis: 100%;\n    margin-left: 0;\n  }\n}\n", "/**\n * Custom Agent Icons for MemberJunction\n *\n * This file contains custom icon definitions for agents that need unique branding\n * beyond Font Awesome icons. Icons can be CSS-based (emoji, Unicode, SVG data URIs)\n * or reference external image files.\n *\n * USAGE IN AGENT METADATA:\n * \"IconClass\": \"mj-icon-skip\"  (references .mj-icon-skip class below)\n *\n * EXTENSIBILITY FOR 3RD PARTY DEVELOPERS:\n * Third-party developers have TWO options:\n *\n * 1. CSS CLASS APPROACH (Recommended for developers):\n *    - Add your own global CSS with custom icon classes\n *    - Reference your class in agent metadata: \"IconClass\": \"your-custom-class\"\n *    - Works with any CSS available to the application\n *    - Example: If you have a global stylesheet with .acme-icon-analyzer { ... }\n *      then use \"IconClass\": \"acme-icon-analyzer\"\n *\n * 2. LOGO URL APPROACH (Recommended for end users):\n *    - Use the LogoURL field in agent metadata\n *    - Provide a URL or data URI: \"LogoURL\": \"https://example.com/logo.png\"\n *    - Supports: HTTP URLs, data URIs (data:image/png;base64,...)\n *    - LogoURL takes precedence over IconClass in the UI\n *    - Perfect for non-technical users or external/uploaded images\n *\n * BEST PRACTICES:\n * - Use mj-icon-* prefix for MJ core icons\n * - Use your own prefix for 3rd party icons (e.g., acme-icon-*)\n * - Keep icons simple and recognizable at 16-36px sizes\n * - Test in both light and dark themes\n * - Prefer CSS classes over LogoURL for version-controlled icons\n */\n\n/* ============================================\n   BASE STYLES FOR CUSTOM ICONS\n   ============================================ */\n\n/* Base styling for all custom MJ icons */\n[class^=\"mj-icon-\"],\n[class*=\" mj-icon-\"] {\n  font-style: normal;\n  font-variant: normal;\n  text-rendering: auto;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  font-size: inherit;\n  line-height: 1;\n}\n\n/* ============================================\n   MJ CORE ICONS\n   ============================================ */\n\n/**\n * Skip Brain Icon - Analytics/Intelligence Agent\n * Official Skip logo from Skip SaaS branding\n */\n.mj-icon-skip {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  /* Official Skip logo SVG */\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n/**\n * Alternative Skip Icon - Lightning Bolt\n * Simple emoji-based icon for quick setup\n */\n.mj-icon-skip-lightning::before {\n  content: \"\u26A1\";\n  color: var(--mj-brand-primary);\n  font-size: 1.1em;\n}\n\n/**\n * Skip Icon - Brain Emoji\n * Fallback emoji option\n */\n.mj-icon-skip-brain::before {\n  content: \"\uD83E\uDDE0\";\n  font-size: 1.2em;\n}\n\n/**\n * Betty Icon - AI Assistant\n * Official Betty logo (face icon only)\n */\n.mj-icon-betty {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  /* Official Betty face icon SVG */\n  background-image: url(\"data:image/svg+xml,%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Cpath d='M64.96,60.23h75.12c10.58,0,20.24,4.31,27.2,11.32,7.01,6.95,11.32,16.61,11.32,27.19s-4.31,20.24-11.32,27.19c-6.95,7.02-16.61,11.32-27.2,11.32h-75.12c-10.58,0-20.24-4.31-27.19-11.32-2.65-2.64-4.92-5.6-6.71-8.92-.24,0-.49.06-.74.06-2.46,0-4.67-1.05-6.34-2.65-1.6-1.66-2.58-3.87-2.58-6.34v-18.7c0-2.46.98-4.74,2.58-6.34,1.66-1.66,3.87-2.65,6.34-2.65.25,0,.49,0,.74.06,1.79-3.32,4.06-6.34,6.71-8.92,6.95-7.01,16.61-11.32,27.19-11.32' fill='%233d1252'/%3E%3Cpath d='M132.33,68.36h0c0,1.72-.74,3.32-1.91,4.49-1.11,1.17-2.71,1.84-4.49,1.84h-13.29c-1.78,0-3.32-.68-4.49-1.84-1.17-1.17-1.91-2.77-1.91-4.49h-12.92c-8.37,0-15.94,3.44-21.47,8.92-5.47,5.54-8.92,13.1-8.92,21.47v1.17l.06.37v.37l.06.43v.37l.06.37v.37l.06.37.06.43.06.37.06.37.06.37.06.37c0,.12.06.25.06.37l.06.37.12.37.06.37.12.37.06.37.12.37.12.31.06.37.12.37.12.37.12.31.12.37.12.37.19.31.12.37.12.37.12.31.18.37.12.31.19.31.18.37.12.31.18.31.19.37.18.31.18.31.19.31.18.31c.12.24.25.43.37.68l.19.25.24.31.19.31c.43.62.86,1.23,1.35,1.79l.18.24c.49.62.99,1.17,1.48,1.66.19.19.31.37.49.56.19.12.37.31.56.49.49.49,1.04.98,1.6,1.47l.31.19c.56.49,1.17.92,1.79,1.35.18.12.37.25.55.37l.31.25.31.18.31.19.37.18.31.18.31.19.31.18.31.19.37.12.31.19.31.18c.12.06.24.12.37.12l.31.19.37.12.31.19.37.12.31.12.37.19.37.12.31.12.37.12.37.12.37.06c.24.12.43.18.68.25l.37.12.37.06.37.12c.12,0,.25.06.37.06l.37.06.37.12.37.06.37.06.37.06.37.06.37.06.37.06.43.06h.37l.37.06h.37l.37.06h.8l.37.06h47.56c8.37,0,15.94-3.44,21.47-8.92,5.48-5.54,8.92-13.1,8.92-21.47s-3.44-15.94-8.92-21.47c-5.54-5.48-13.1-8.92-21.47-8.92h-7.75Z' fill='%23fff'/%3E%3Cpolygon points='54.93 12.74 85.57 55.25 106.12 55.25 106.12 34.89 106.12 34.7 105.75 34.7 54.93 12.74' fill='%233aba91'/%3E%3Cpolygon points='111.1 55.25 124.76 55.25 145 27.07 111.35 41.59 111.1 41.59 111.1 41.72 111.1 55.25' fill='%233aba91'/%3E%3Cpath d='M94.55,82.81c3.75,0,6.83,3.81,7.57,8.92.06.74-.31,1.35-.98,1.66-.61.31-1.35.18-1.84-.37-1.29-1.48-2.96-2.34-4.74-2.34s-3.38.86-4.67,2.34c-.49.55-1.23.68-1.91.37-.68-.31-1.05-.92-.92-1.66.68-5.11,3.81-8.92,7.51-8.92' fill='%233d1252'/%3E%3Cpath d='M132.08,115.24c-.31,1.05-.86,2.03-1.66,2.77-1.11,1.17-2.71,1.84-4.49,1.84h-13.29c-1.79,0-3.32-.68-4.49-1.84-.8-.74-1.36-1.72-1.66-2.77-.19-.68.06-1.41.68-1.84.56-.43,1.35-.49,1.97-.06.98.68,2.21,1.05,3.51,1.05h13.29c1.29,0,2.52-.37,3.51-1.05.61-.43,1.41-.37,1.97.06.62.43.86,1.17.68,1.84' fill='%233d1252'/%3E%3Cpath d='M144.02,82.81c3.69,0,6.83,3.81,7.51,8.92.12.74-.24,1.35-.92,1.66-.68.31-1.41.18-1.91-.37-1.29-1.48-2.89-2.34-4.67-2.34s-3.44.86-4.74,2.34c-.49.55-1.23.68-1.84.37-.68-.31-1.05-.92-.98-1.66.74-5.11,3.81-8.92,7.57-8.92' fill='%233d1252'/%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n/**\n * Izzy Icon - AI Assistant\n * Official Izzy logo (mark only)\n */\n.mj-icon-izzy {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  /* Official Izzy mark icon SVG */\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 204 180'%3E%3Cpath d='M0 0 C3.61144774 3.08477828 4.84942137 4.90830493 5.5 9.625 C5 13 5 13 3.5 14.9375 C1.74432121 17.35155834 1.83578869 18.21944114 1.90625 21.12890625 C1.9371875 22.40636719 1.968125 23.68382813 2 25 C3.18335937 24.72285156 4.36671875 24.44570313 5.5859375 24.16015625 C22.44010416 20.26839867 22.44010416 20.26839867 30 20 C31.80210938 19.92265625 31.80210938 19.92265625 33.640625 19.84375 C47.49356199 19.44904163 61.73614427 20.86627802 75 25 C75.53596907 19.64244551 75.53596907 19.64244551 73.5 15 C71.5549761 12.4066348 71.45048389 10.16629658 71.59375 6.97265625 C72.33633815 3.36681955 74.01253991 1.99164006 77 0 C79.80907914 -0.63997166 82.18961327 -0.63020793 85 0 C87.8100346 1.79363911 89.50940468 3.01880935 91 6 C90.984375 8.05859375 90.984375 8.05859375 90.75 10.4375 C90.68296875 11.21996094 90.6159375 12.00242187 90.546875 12.80859375 C90 15 90 15 88.49609375 16.3984375 C86.25734576 18.79500846 86.4852344 20.97464008 86.3125 24.1875 C86.21388672 25.81751953 86.21388672 25.81751953 86.11328125 27.48046875 C86.07589844 28.31191406 86.03851563 29.14335937 86 30 C86.67675781 30.0825 87.35351562 30.165 88.05078125 30.25 C91.82333306 31.20937741 94.89353787 32.99425194 98.1875 35 C99.18052124 35.60448975 99.18052124 35.60448975 100.19360352 36.22119141 C111.98050012 43.58460075 121.17745776 53.2687532 127 66 C127 66.66 127 67.32 127 68 C127.721875 68.0825 128.44375 68.165 129.1875 68.25 C133.81406141 69.48374971 136.2179022 71.66516963 138.625 75.7734375 C140.97801199 81.55147269 140.43210927 87.87027126 140.375 94 C140.38660156 95.24523437 140.39820313 96.49046875 140.41015625 97.7734375 C140.3675701 111.08870765 140.3675701 111.08870765 135.5 116.7421875 C131.62323281 119.66995439 128.8523137 121.14337998 124 121.125 C122.9790625 121.12886719 122.9790625 121.12886719 121.9375 121.1328125 C120 121 120 121 117 120 C116.74347656 120.65226562 116.48695313 121.30453125 116.22265625 121.9765625 C115.83980469 122.85054688 115.45695313 123.72453125 115.0625 124.625 C114.70285156 125.48351562 114.34320313 126.34203125 113.97265625 127.2265625 C108.57908063 134.80960941 99.56813916 137.59212379 91.0625 140.375 C90.02287109 140.72949219 88.98324219 141.08398438 87.91210938 141.44921875 C80.34347852 144 80.34347852 144 78 144 C78.02094727 144.65484375 78.04189453 145.3096875 78.06347656 145.984375 C78.14730383 148.98942328 78.19886895 151.99422464 78.25 155 C78.28351563 156.02996094 78.31703125 157.05992187 78.3515625 158.12109375 C78.43361416 164.56214867 77.93369275 169.71304442 74 175 C68.75523423 179.17440541 64.68195675 180.53237245 58 180 C55.12653443 178.963898 52.49379495 177.58020045 49.8125 176.125 C49.11447266 175.76019531 48.41644531 175.39539063 47.69726562 175.01953125 C46.39868999 174.33997216 45.10309803 173.65465367 43.81176758 172.96142578 C43.21388428 172.64415527 42.61600098 172.32688477 42 172 C41.34290039 171.59402588 40.68580078 171.18805176 40.00878906 170.76977539 C38.03672401 169.77639533 38.03672401 169.77639533 36.12475586 170.58325195 C35.49448486 170.96441162 34.86421387 171.34557129 34.21484375 171.73828125 C33.17166992 172.35026367 33.17166992 172.35026367 32.10742188 172.97460938 C31.39134766 173.41611328 30.67527344 173.85761719 29.9375 174.3125 C28.51029236 175.1647359 27.08194984 176.01507485 25.65234375 176.86328125 C25.02320068 177.24782471 24.39405762 177.63236816 23.74584961 178.02856445 C19.79572932 180.2265128 16.44037501 180.296025 12 180 C6.82155197 178.33236419 3.95074467 176.59004726 1 172 C-0.72417326 168.34258111 -1.2403609 165.51230089 -1.1953125 161.48046875 C-1.18886719 160.45888672 -1.18242188 159.43730469 -1.17578125 158.38476562 C-1.15902344 157.32966797 -1.14226563 156.27457031 -1.125 155.1875 C-1.11597656 154.11306641 -1.10695312 153.03863281 -1.09765625 151.93164062 C-1.07415306 149.28753146 -1.04129575 146.64388128 -1 144 C-1.63196289 143.81171631 -2.26392578 143.62343262 -2.91503906 143.42944336 C-8.20708475 141.84808949 -13.49207901 140.2541307 -18.75 138.5625 C-19.98234375 138.17191406 -21.2146875 137.78132812 -22.484375 137.37890625 C-29.06200008 134.79901552 -34.12925122 130.90130551 -38 125 C-38.875 121.5625 -38.875 121.5625 -39 119 C-39.495 119.33 -39.99 119.66 -40.5 120 C-45.24354984 121.89741993 -49.49426304 121.53143657 -54.1875 119.875 C-58.42051121 117.05299253 -61.35909664 113.92271008 -63 109 C-63.22709306 104.92471184 -63.22828659 100.8492307 -63.24023438 96.76806641 C-63.2498982 94.77103695 -63.28108516 92.77414948 -63.3125 90.77734375 C-63.36188158 78.59243786 -63.36188158 78.59243786 -60 73 C-57.7509823 70.86631654 -55.88785241 69.35340008 -53.0078125 68.20703125 C-50.3010212 66.57979679 -49.65488803 64.83796148 -48.3125 62 C-45.06106922 55.7428385 -40.95735135 50.97447519 -36 46 C-35.40832031 45.38511719 -34.81664063 44.77023438 -34.20703125 44.13671875 C-28.97373562 39.11136864 -17.47215548 30 -10 30 C-10.08733973 27.91589342 -10.19552278 25.83265331 -10.3125 23.75 C-10.37050781 22.58984375 -10.42851563 21.4296875 -10.48828125 20.234375 C-11.02905532 16.81635262 -11.84853545 15.59874271 -14 13 C-14.54046356 8.75350057 -14.48376179 6.74176808 -12.125 3.125 C-8.57275398 -0.42724602 -4.8825369 -0.970906 0 0 Z M5 35 C4.30245605 35.21962402 3.60491211 35.43924805 2.88623047 35.66552734 C-14.1501062 41.15773444 -29.02751477 50.81254544 -39 66 C-39.33 66.99 -39.66 67.98 -40 69 C-37.525 70.98 -37.525 70.98 -35 73 C-34.52691406 72.29875 -34.05382812 71.5975 -33.56640625 70.875 C-21.08320269 52.96537462 -2.17172019 42.38052109 19.26171875 38.5078125 C46.97805996 34.9959591 75.10426623 38.71529466 97.73046875 56.09765625 C103.53827054 61.07953766 107.9264808 66.53902088 112 73 C113.32 72.01 114.64 71.02 116 70 C115.01713954 61.60788376 107.55262518 55.04847712 101.375 49.8125 C82.80696113 35.82916208 61.35998978 30.59265576 38.375 30.625 C37.71836365 30.62554382 37.06172729 30.62608765 36.38519287 30.62664795 C25.42439402 30.66823796 15.42390121 31.62072499 5 35 Z' fill='%234E3B78' transform='translate(63,0)'/%3E%3Cpath d='M0 0 C5.27957047 5.78547525 9.31612861 13.25448014 10 21.125 C9.69743213 24.83293961 8.77676366 26.8914086 6.1875 29.5625 C-2.04152489 35.76003038 -13.60917874 39.6270706 -23.875 38.8125 C-24.535 38.1525 -25.195 37.4925 -25.875 36.8125 C-28.97847254 36.48234335 -31.03281176 36.30718706 -33.75 37.9375 C-35.40354531 40.69340884 -35.26865568 42.66325452 -34.875 45.8125 C-33.95833333 47.89583333 -33.95833333 47.89583333 -31.875 48.8125 C-28.29166667 48.89583333 -28.29166667 48.89583333 -24.875 47.8125 C-24.57086182 47.16466553 -24.26672363 46.51683105 -23.95336914 45.84936523 C-22.875 43.8125 -22.875 43.8125 -20.77124023 42.88696289 C-19.91731689 42.6883667 -19.06339355 42.48977051 -18.18359375 42.28515625 C-17.23806641 42.04990234 -16.29253906 41.81464844 -15.31835938 41.57226562 C-14.32642578 41.34216797 -13.33449219 41.11207031 -12.3125 40.875 C-4.77934417 39.10870895 1.54823541 36.95205932 8.125 32.8125 C7.81647145 40.06292099 4.56245219 45.32546918 -0.5 50.4609375 C-5.29811284 54.61130511 -8.83216751 54.86916719 -15 55 C-21.13677833 55.26569953 -25.04589225 56.51893716 -29.890625 60.31640625 C-39.17633501 67.31724667 -52.82450605 66.52799961 -63.875 65.8125 C-71.37432145 64.60538489 -79.4496824 61.2378176 -84.875 55.8125 C-86.81199027 55.70419517 -88.75076074 55.60687514 -90.69067383 55.58691406 C-97.68300211 55.51299157 -103.12007731 55.4392364 -108.44140625 50.40234375 C-108.91449219 49.87769531 -109.38757813 49.35304688 -109.875 48.8125 C-110.6175 48.090625 -111.36 47.36875 -112.125 46.625 C-118.35765562 36.60823203 -119.69570866 25.34707186 -117.25 13.8828125 C-113.47065738 3.0509466 -104.76645407 -4.0120534 -94.875 -9.1875 C-91.26850975 -10.75400624 -87.62602625 -12.0153043 -83.875 -13.1875 C-83.029375 -13.47496094 -82.18375 -13.76242188 -81.3125 -14.05859375 C-56.0861494 -22.29657387 -20.04377266 -18.06142152 0 0 Z' fill='%23FDFDFD' transform='translate(155.875,64.1875)'/%3E%3Cpath d='M0 0 C5.24479788 1.58079188 9.51172656 4.60408712 14.06640625 7.58984375 C18.37837094 10.28462973 18.37837094 10.28462973 23.30859375 11.1328125 C28.49696048 9.20971132 33.08639658 6.29555589 37.79882812 3.42578125 C43.66838131 -0.00837477 43.66838131 -0.00837477 47.27734375 0.078125 C49.34375 1.0078125 49.34375 1.0078125 51.34375 3.0078125 C51.82984303 7.30136192 51.71414913 11.62739332 51.71875 15.9453125 C51.74324219 17.15123047 51.76773438 18.35714844 51.79296875 19.59960938 C51.79876953 21.33114258 51.79876953 21.33114258 51.8046875 23.09765625 C51.81290527 24.15847412 51.82112305 25.21929199 51.82958984 26.31225586 C51.34375 29.0078125 51.34375 29.0078125 49.48461914 30.87670898 C46.29658529 32.56106989 44.78123809 32.062357 41.34375 31.0078125 C37.60135447 29.03986817 34.07891261 26.72386924 30.53320312 24.42578125 C26.44214688 21.80182316 26.44214688 21.80182316 21.77734375 20.921875 C17.60401055 22.78413283 13.85973006 25.2663764 10.046875 27.76953125 C5.85335687 30.41401513 2.44659272 31.9581498 -2.65625 32.0078125 C-4.33203125 30.87695312 -4.33203125 30.87695312 -5.65625 29.0078125 C-6.04443359 26.328125 -6.04443359 26.328125 -6.0546875 23.1328125 C-6.05855469 21.98296875 -6.06242187 20.833125 -6.06640625 19.6484375 C-6.05480469 18.44703125 -6.04320313 17.245625 -6.03125 16.0078125 C-6.04285156 14.80640625 -6.05445312 13.605 -6.06640625 12.3671875 C-6.06253906 11.21734375 -6.05867188 10.0675 -6.0546875 8.8828125 C-6.05130371 7.82835937 -6.04791992 6.77390625 -6.04443359 5.6875 C-5.65625 3.0078125 -5.65625 3.0078125 -4.29736328 1.14111328 C-2.65625 0.0078125 -2.65625 0.0078125 0 0 Z' fill='%23FCFCFD' transform='translate(78.65625,136.9921875)'/%3E%3Cpath d='M0 0 C2.5 0.625 2.5 0.625 4.8125 2.625 C6.96830116 6.4575354 7.24792603 9.32007692 6.5 13.625 C5.34367254 15.98793002 4.35016245 17.77483755 2.5 19.625 C0.1875 20 0.1875 20 -2.5 19.625 C-5.06638215 17.47478793 -6.29103188 15.79226637 -6.88671875 12.46484375 C-7.08084032 8.45522921 -6.77549931 6.12498023 -4.8125 2.5625 C-2.5 0.625 -2.5 0.625 0 0 Z' fill='%2353417C' transform='translate(138.5,67.375)'/%3E%3Cpath d='M0 0 C2.5 0.6875 2.5 0.6875 4.8125 2.625 C7.08407605 6.74748987 7.32547179 10.07653131 6.5 14.6875 C4.8125 17.75 4.8125 17.75 2.5 19.6875 C-0.0625 20.25 -0.0625 20.25 -2.5 19.6875 C-5.30401904 17.38419865 -5.84979387 14.76309142 -6.4375 11.3125 C-6.72853275 7.71913649 -6.44645777 6.57011897 -4.875 3.125 C-2.5 0.6875 -2.5 0.6875 0 0 Z' fill='%23523F7B' transform='translate(64.5,67.3125)'/%3E%3Cpath d='M0 0 C8.91 0 17.82 0 27 0 C24.81183076 5.47042311 24.169236 6.55141452 19 9 C14.08609728 9.94526984 9.88605617 10.13992406 5.51171875 7.49609375 C3.4733513 5.76185217 1.65854906 4.10051199 0 2 C0 1.34 0 0.68 0 0 Z' fill='%23574680' transform='translate(88,95)'/%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n/* ============================================\n   EXAMPLE CUSTOM ICONS FOR OTHER AGENTS\n   ============================================ */\n\n/**\n * Data Analysis Icon - Chart emoji\n */\n.mj-icon-data-analyst::before {\n  content: \"\uD83D\uDCCA\";\n  font-size: 1.1em;\n}\n\n/**\n * API/Integration Icon - Plug emoji\n */\n.mj-icon-api::before {\n  content: \"\uD83D\uDD0C\";\n  font-size: 1.1em;\n}\n\n/**\n * Processing/Workflow Icon - Gear emoji with animation\n */\n.mj-icon-processing::before {\n  content: \"\u2699\uFE0F\";\n  display: inline-block;\n  animation: rotate-icon 2s linear infinite;\n}\n\n@keyframes rotate-icon {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/**\n * Text/Letter-based Icon\n * Simple monogram icon\n */\n.mj-icon-monogram-s::before {\n  content: \"S\";\n  font-weight: 800;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 1.1em;\n  color: var(--mj-brand-primary);\n}\n\n/* ============================================\n   TEMPLATE FOR NEW ICONS\n   ============================================ */\n\n/*\n// EMOJI-BASED ICON (Simplest)\n.mj-icon-my-agent::before {\n  content: \"\uD83C\uDFAF\";  // Use any emoji\n  font-size: 1.2em;\n}\n\n// UNICODE SYMBOL ICON\n.mj-icon-my-agent::before {\n  content: \"\\2022\";  // Unicode character\n  font-size: 1.2em;\n  color: #667eea;\n}\n\n// TEXT/LETTER ICON\n.mj-icon-my-agent::before {\n  content: \"MA\";  // Initials/text\n  font-weight: 800;\n  font-size: 0.9em;\n  color: #667eea;\n}\n\n// SVG DATA URI ICON (Most Control)\n.mj-icon-my-agent {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-image: url('data:image/svg+xml;utf8,<svg>...</svg>');\n  vertical-align: middle;\n}\n\n// EXTERNAL IMAGE FILE (For existing assets)\n.mj-icon-my-agent {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-image: url('/assets/icons/my-agent.svg');\n  vertical-align: middle;\n}\n\n// GRADIENT TEXT ICON\n.mj-icon-my-agent::before {\n  content: \"\u26A1\";\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n*/\n\n/* ============================================\n   3RD PARTY EXAMPLES\n   These would typically be in EXTERNAL CSS files\n   ============================================ */\n\n/*\n// Example: Acme Corp custom agent icons\n// This would be in acme-corp-styles.css loaded by the application\n\n.acme-icon-analyzer {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-image: url('https://acme.com/icons/analyzer.svg');\n}\n\n.acme-icon-reporter::before {\n  content: \"A\";\n  font-weight: 800;\n  color: #FF6B35;\n}\n*/\n"] }]
+        args: [{ standalone: false, selector: 'mj-conversation-message-item', template: "<div [class]=\"messageClasses\" [attr.data-message-id]=\"message.ID\" (click)=\"onMessageBubbleClick($event)\">\n  <div class=\"message-avatar\">\n    <div class=\"avatar-circle\" [class.ai-avatar]=\"isAIMessage\" [class.user-avatar]=\"isUserMessage\"\n         [class.avatar-has-image]=\"isAIMessage && effectiveAssistantAvatarUrl !== null\">\n      @if (isUserMessage) {\n        @if (userAvatarUrl) {\n          <img [src]=\"userAvatarUrl\" alt=\"User avatar\" class=\"avatar-image\" />\n        } @else if (userAvatarIconClass) {\n          <i [class]=\"userAvatarIconClass\"></i>\n        } @else {\n          <i class=\"fas fa-user\"></i>\n        }\n      } @else if (isAIMessage) {\n        @if (effectiveAssistantAvatarUrl) {\n          <img [src]=\"effectiveAssistantAvatarUrl\" alt=\"Assistant avatar\" class=\"avatar-image\"\n               (error)=\"assistantAvatarFailed = true\" />\n        } @else {\n          <i class=\"fas\" [ngClass]=\"aiAgentInfo?.iconClass || 'fa-robot'\"></i>\n        }\n      }\n    </div>\n  </div>\n\n  <div class=\"message-content\">\n    <div class=\"message-header\">\n      <span class=\"message-sender\" [title]=\"isAIMessage ? (aiAgentInfo?.role || 'AI Assistant') : ''\">\n        {{ isAIMessage ? (aiAgentInfo?.name || 'AI Assistant') : messageSenderName }}\n      </span>\n      <span class=\"message-time\">{{ message.__mj_CreatedAt | date:'short' }}</span>\n\n      <!-- Status indicator for user messages -->\n      @if (isUserMessage && messageStatus !== 'Complete') {\n        <span class=\"message-status\" [class.error]=\"messageStatus === 'Error'\">\n          <i class=\"fas\" [ngClass]=\"messageStatus === 'Error' ? 'fa-exclamation-triangle' : 'fa-circle-notch fa-spin'\"></i>\n          <span class=\"status-text\">{{ getStatusText() }}</span>\n        </span>\n      }\n\n      <!-- Time pill - shows for AI messages in all states (in-progress, active, complete, failed) -->\n      @if (!isUserMessage && timePillText) {\n        <span\n          class=\"time-pill\"\n          [class.in-progress]=\"isInProgressAIMessage\"\n          [class.active]=\"!isInProgressAIMessage && (isAgentRunActive || HasActiveWorkflowTasks)\"\n          [class.complete]=\"!isInProgressAIMessage && !isAgentRunActive && !HasActiveWorkflowTasks && messageStatus === 'Complete' && !IsStoppedRun\"\n          [class.stopped]=\"IsStoppedRun && messageStatus !== 'Error'\"\n          [class.failed]=\"messageStatus === 'Error'\"\n          [class.checking]=\"LivenessState === 'checking'\"\n          [class.stalled]=\"LivenessState === 'stalled'\"\n          [title]=\"LivenessState === 'stalled' ? 'No progress reported for several minutes' : (LivenessState === 'checking' ? 'No recent progress \u2014 re-checking' : '')\">\n          <i class=\"fas\" [ngClass]=\"LivenessState !== 'live' ? 'fa-exclamation-triangle' : (IsStoppedRun ? 'fa-stop' : 'fa-clock')\"></i>\n          {{ timePillText }}\n          @if (LivenessState === 'checking') {\n            <span class=\"liveness-label\">checking\u2026</span>\n          } @else if (LivenessState === 'stalled') {\n            <span class=\"liveness-label\">no response</span>\n          }\n        </span>\n      }\n\n      <!-- Stop control for an in-flight agent reply. Marks the run Cancelled; the owning\n           server process aborts the in-flight step and finalizes the run as stopped. -->\n      @if (CanStopRun) {\n        <button\n          type=\"button\"\n          class=\"stop-run-pill\"\n          [disabled]=\"IsStopping\"\n          (click)=\"OnStopClick()\"\n          [title]=\"IsStopping ? 'Stopping the run\u2026' : 'Stop this run'\">\n          <i class=\"fas\" [ngClass]=\"IsStopping ? 'fa-circle-notch fa-spin' : 'fa-stop'\"></i>\n          {{ IsStopping ? 'Stopping\u2026' : 'Stop' }}\n        </button>\n      }\n\n      <!-- Test feedback icon (appears for test runs only) -->\n      @if (message.TestRunID) {\n        <span\n          class=\"test-feedback-icon\"\n          (click)=\"onTestFeedbackClick()\"\n          title=\"Provide Test Feedback\">\n          <i class=\"fas fa-flask\"></i>\n        </span>\n      }\n\n      <!-- Action group, always visible, styled like the gear: Edit and Fork from here on a user message,\n           Regenerate on an older answer (the last answer carries it in its footer). Labeled on the latest\n           turn, icons elsewhere. -->\n      @if (ShowsActionGroup) {\n        <span class=\"message-action-group\" [class.labeled]=\"IsLatestTurn\" role=\"group\" aria-label=\"Message actions\">\n          @if (CanEdit) {\n            <button type=\"button\" class=\"message-header-action message-action-edit\"\n                    (click)=\"OnEditClick()\" title=\"Edit message\" aria-label=\"Edit message\">\n              <i class=\"fa-solid fa-pen\" aria-hidden=\"true\"></i>\n              @if (IsLatestTurn) {\n                <span>Edit</span>\n              }\n            </button>\n          }\n          @if (CanStartFork) {\n            <button type=\"button\" class=\"message-header-action message-action-fork\"\n                    (click)=\"OnForkClick($event)\" title=\"Fork from here\" aria-label=\"Fork from here\">\n              <i class=\"fa-solid fa-code-branch\" aria-hidden=\"true\"></i>\n              @if (IsLatestTurn) {\n                <span class=\"action-label-long\">Fork from here</span>\n                <span class=\"action-label-short\">Fork</span>\n              }\n            </button>\n          }\n          @if (ShowsHeaderRegenerate) {\n            <button type=\"button\" class=\"message-header-action message-action-regenerate\"\n                    (click)=\"OnRegenerateClick()\" [title]=\"RegenerateTitle\" [attr.aria-label]=\"RegenerateTitle\">\n              <i class=\"fa-solid fa-rotate-left\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </span>\n      }\n\n      <!-- Agent run icon (clickable to expand details) - always rightmost when present.\n           Rendered only when its panel would actually have content, so it never\n           appears as a dead control opening an empty popup (e.g. a white-label\n           surface with showAgentRunDetails=false and no message actions). -->\n      @if (hasAgentRun && hasAgentDetailsPanelContent) {\n        <span\n          class=\"agent-run-icon\"\n          (click)=\"toggleAgentDetails()\"\n          [class.expanded]=\"isAgentDetailsExpanded\"\n          [title]=\"hasRatings() ? 'Agent details & ' + getRatingCount() + ' rating(s)' : 'Click to view agent execution details'\">\n          <i class=\"fas fa-cog\"></i>\n          @if (hasRatings()) {\n            <span class=\"rating-badge\">{{ getRatingCount() }}</span>\n          }\n        </span>\n      }\n    </div>\n\n    <div class=\"message-body\">\n      @if (!isEditing) {\n        @if (OriginatingWorkflowTask) {\n          <button\n            type=\"button\"\n            class=\"workflow-continuation-banner\"\n            (click)=\"ScrollToOriginatingWorkflow($event)\"\n            title=\"Scroll to originating workflow card and step artifacts\">\n            <span class=\"continuation-banner-left\">\n              <i class=\"fa-solid fa-diagram-project continuation-banner-icon\" aria-hidden=\"true\"></i>\n              <span class=\"continuation-banner-label\">Completed workflow</span>\n              <span class=\"continuation-banner-sep\">\u00B7</span>\n              <span class=\"continuation-banner-name\">{{ OriginatingWorkflowTask.Name }}</span>\n            </span>\n            <span class=\"continuation-banner-jump\">\n              <span>View workflow</span>\n              <i class=\"fa-solid fa-arrow-up-long\" aria-hidden=\"true\"></i>\n            </span>\n          </button>\n        }\n        <div class=\"message-text\">\n          <mj-markdown [data]=\"displayMessage\" [enableCollapsibleHeadings]=\"true\" (ImageClicked)=\"OnMarkdownImageClicked($event)\"></mj-markdown>\n          @if (isMessageEdited) {\n            <span class=\"edited-badge\">(edited)</span>\n          }\n        </div>\n\n        <!-- A stopped reply: what the run kept, and the way to pick it up again. Any message\n             resumes the stopped run; the Continue control just sends one that says so. -->\n        @if (StoppedLineText) {\n          <div class=\"stopped-line\"><i class=\"fa-solid fa-stop\" aria-hidden=\"true\"></i>{{ StoppedLineText }}</div>\n        }\n        @if (CanContinueStoppedRun) {\n          <div class=\"stopped-actions\">\n            <button mjButton Variant=\"outline\" Size=\"sm\" type=\"button\" class=\"continue-run\" (click)=\"OnContinueClick()\" title=\"Continue where you left off\">\n              <i class=\"fa-solid fa-play\" aria-hidden=\"true\"></i> Continue\n            </button>\n          </div>\n        }\n\n        <!-- messageExtra slot \u2014 per-message additive decoration projected by the\n             consumer via `mjChatSlot=\"messageExtra\"`. Renders after the message\n             content, before attachments. Receives the message as $implicit. -->\n        @if (messageExtraTemplate) {\n          <ng-container *ngTemplateOutlet=\"messageExtraTemplate; context: {\n            $implicit: message,\n            message: message\n          }\"></ng-container>\n        }\n\n        <!-- Message Attachments -->\n        @if (hasAttachments) {\n          <div class=\"message-attachments\">\n            @for (attachment of attachments; track attachment.id) {\n              @if (attachment.type === 'Image') {\n                <div class=\"attachment-item image-attachment\"\n                  (click)=\"onAttachmentClick(attachment)\"\n                  [title]=\"attachment.fileName || 'Image attachment'\">\n                  <img\n                    [src]=\"attachment.thumbnailUrl || attachment.contentUrl\"\n                    [alt]=\"attachment.fileName || 'Image attachment'\"\n                    class=\"attachment-thumbnail\"\n                    loading=\"lazy\">\n                  <div class=\"attachment-overlay\">\n                    <i class=\"fas fa-expand\"></i>\n                  </div>\n                </div>\n              } @else {\n                <div class=\"attachment-strip\"\n                  [class.is-artifact]=\"!!attachment.artifactTypeName\"\n                  (click)=\"onAttachmentClick(attachment)\"\n                  [title]=\"attachment.fileName || 'File'\">\n                  <div class=\"attachment-badge\">{{ badgeTextFor(attachment) }}</div>\n                  <div class=\"attachment-meta\">\n                    <span class=\"file-name\">{{ attachment.fileName || 'File' }}</span>\n                    <span class=\"file-size\">{{ formatFileSize(attachment.sizeBytes) }}</span>\n                  </div>\n                </div>\n              }\n            }\n          </div>\n        }\n\n        <!-- Inline Workflow Execution Card \u2014 visible directly in the message body whenever workflow steps exist -->\n        @if (WorkflowSteps.length > 0) {\n          <div class=\"workflow-execution-card\" [class]=\"'workflow-status-' + WorkflowStatus.toLowerCase()\">\n            <div class=\"workflow-card-header\"\n                 [class.is-collapsible]=\"WorkflowStatus !== 'Running'\"\n                 (click)=\"ToggleWorkflowStepsExpanded($event)\">\n              <div class=\"workflow-header-left\">\n                <div class=\"workflow-status-icon\">\n                  @if (WorkflowStatus === 'Running') {\n                    <i class=\"fa-solid fa-circle-notch fa-spin\"></i>\n                  } @else if (WorkflowStatus === 'Complete') {\n                    <i class=\"fa-solid fa-circle-check\"></i>\n                  } @else if (WorkflowStatus === 'Failed') {\n                    <i class=\"fa-solid fa-circle-exclamation\"></i>\n                  } @else {\n                    <i class=\"fa-solid fa-ban\"></i>\n                  }\n                </div>\n                <div class=\"workflow-title-group\">\n                  <div class=\"workflow-title-row\">\n                    <span class=\"workflow-title\">{{ WorkflowTitle }}</span>\n                    <span class=\"workflow-badge\" [class]=\"'badge-' + WorkflowStatus.toLowerCase()\">\n                      @if (WorkflowStatus === 'Running') {\n                        Running\n                      } @else if (WorkflowStatus === 'Complete') {\n                        Completed\n                      } @else {\n                        {{ WorkflowStatus }}\n                      }\n                    </span>\n                  </div>\n                  <div class=\"workflow-subtitle\">\n                    <span>{{ WorkflowCompletedStepCount }} of {{ WorkflowSteps.length }} {{ WorkflowSteps.length === 1 ? 'step' : 'steps' }} complete</span>\n                    @if (WorkflowSkippedStepCount > 0) {\n                      <span class=\"workflow-dot\">\u00B7</span>\n                      <span class=\"workflow-skipped-count\">{{ WorkflowSkippedStepCount }} skipped (conditional)</span>\n                    }\n                    <span class=\"workflow-dot\">\u00B7</span>\n                    <span>{{ WorkflowProgressPercent }}%</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"workflow-header-right\">\n                @if (WorkflowParentTaskID) {\n                  <button type=\"button\"\n                          class=\"workflow-graph-btn\"\n                          (click)=\"OpenTaskGraphPanel($event)\"\n                          title=\"View visual task graph in side panel\">\n                    <i class=\"fa-solid fa-diagram-project\" aria-hidden=\"true\"></i>\n                    <span>Task Graph</span>\n                  </button>\n                }\n                <span class=\"workflow-duration-pill\" title=\"Workflow execution time\">\n                  <i class=\"fa-regular fa-clock\"></i>\n                  <span>{{ WorkflowDurationDisplay }}</span>\n                </span>\n                @if (WorkflowStatus !== 'Running') {\n                  <button type=\"button\"\n                          class=\"workflow-collapse-btn\"\n                          (click)=\"ToggleWorkflowStepsExpanded($event)\"\n                          [attr.aria-expanded]=\"IsWorkflowStepsExpanded\"\n                          [title]=\"IsWorkflowStepsExpanded ? 'Collapse workflow steps' : 'Expand workflow steps'\">\n                    <span class=\"workflow-collapse-label\">{{ IsWorkflowStepsExpanded ? 'Collapse' : 'Expand' }}</span>\n                    <i class=\"fa-solid fa-chevron-down workflow-collapse-chevron\" [class.rotated]=\"IsWorkflowStepsExpanded\" aria-hidden=\"true\"></i>\n                  </button>\n                }\n              </div>\n            </div>\n\n            <div class=\"workflow-progress-track\" role=\"progressbar\"\n                 [attr.aria-valuenow]=\"WorkflowProgressPercent\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n              <div class=\"workflow-progress-fill\"\n                   [class.is-running]=\"WorkflowStatus === 'Running'\"\n                   [style.width.%]=\"WorkflowProgressPercent\"></div>\n            </div>\n\n            @if (WorkflowStatus === 'Running' || IsWorkflowStepsExpanded) {\n              <div class=\"workflow-steps-pipeline\">\n                @for (step of WorkflowSteps; track step.ID; let idx = $index; let isLast = $last) {\n                  <div class=\"workflow-step-item\"\n                       [class]=\"'step-status-' + (step.Status || 'Pending').toLowerCase().replace(' ', '-')\"\n                       [class.is-expanded]=\"IsWorkflowStepExpanded(step.ID)\">\n                    <div class=\"workflow-step-rail\">\n                      <div class=\"workflow-step-node\">\n                        @if (step.Status === 'In Progress') {\n                          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                        } @else if (step.Status === 'Complete') {\n                          <i class=\"fa-solid fa-check\"></i>\n                        } @else if (step.Status === 'Failed') {\n                          <i class=\"fa-solid fa-xmark\"></i>\n                        } @else if (step.Status === 'Skipped') {\n                          <i class=\"fa-solid fa-forward-step\" title=\"Skipped (conditional prerequisite not met)\"></i>\n                        } @else if (step.Status === 'Cancelled') {\n                          <i class=\"fa-solid fa-ban\"></i>\n                        } @else {\n                          <span class=\"step-index-num\">{{ idx + 1 }}</span>\n                        }\n                      </div>\n                      @if (!isLast) {\n                        <div class=\"workflow-step-connector\" [class.is-complete]=\"step.Status === 'Complete'\"></div>\n                      }\n                    </div>\n\n                    <div class=\"workflow-step-content\" (click)=\"ToggleWorkflowStepExpand(step.ID)\">\n                      <div class=\"workflow-step-main-row\">\n                        <div class=\"workflow-step-identity\">\n                          <span class=\"workflow-step-name\">{{ step.Name }}</span>\n                          @if (step.Agent) {\n                            <span class=\"workflow-step-agent-chip\">\n                              <i class=\"fa-solid fa-robot\"></i>\n                              <span>{{ step.Agent }}</span>\n                            </span>\n                          }\n                        </div>\n                        <div class=\"workflow-step-meta\">\n                          @if (FormatWorkflowStepDuration(step); as stepDur) {\n                            <span class=\"workflow-step-duration\" [class.is-skipped]=\"step.Status === 'Skipped'\">{{ stepDur }}</span>\n                          }\n                          @if (step.AgentRunID) {\n                            <button type=\"button\"\n                                    class=\"workflow-step-run-btn\"\n                                    (click)=\"OpenWorkflowStepAgentRun(step, $event)\"\n                                    title=\"Open AI Agent Run record\">\n                              <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                            </button>\n                          }\n                          @if (GetWorkflowStepSummary(step)) {\n                            <i class=\"fa-solid fa-chevron-down workflow-step-chevron\"\n                               [class.rotated]=\"IsWorkflowStepExpanded(step.ID)\"></i>\n                          }\n                        </div>\n                      </div>\n\n                      @if (IsWorkflowStepExpanded(step.ID) && GetWorkflowStepSummary(step); as summaryText) {\n                        <div class=\"workflow-step-details\">\n                          {{ summaryText }}\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Artifact Message Cards \u2014 single card when 1, or Supporting Artifacts grid + Final Artifact when > 1 -->\n        @if (displayArtifacts.length === 1) {\n          @for (a of displayArtifacts; track a.artifact.ID) {\n            <div class=\"artifact-wrapper\" [class.system-artifact]=\"a.artifact.Visibility === 'System Only'\">\n              <mj-artifact-message-card\n                [artifactId]=\"a.artifact.ID\"\n                [artifact]=\"a.artifact\"\n                [artifactVersion]=\"a.version\"\n                [currentUser]=\"currentUser\"\n                (actionPerformed)=\"onArtifactActionPerformed($event)\">\n              </mj-artifact-message-card>\n            </div>\n          }\n        } @else if (displayArtifacts.length > 1) {\n          <div class=\"multi-artifact-showcase\">\n            <div class=\"multi-artifact-supporting-section\" [class.is-collapsed]=\"!IsSupportingArtifactsExpanded\">\n              <button\n                type=\"button\"\n                class=\"supporting-artifacts-header\"\n                (click)=\"ToggleSupportingArtifacts($event)\"\n                [attr.aria-expanded]=\"IsSupportingArtifactsExpanded\">\n                <span class=\"supporting-header-left\">\n                  <i class=\"fa-solid fa-layer-group supporting-header-icon\" aria-hidden=\"true\"></i>\n                  <span class=\"supporting-header-title\">Supporting Artifacts</span>\n                  <span class=\"supporting-header-count\">{{ SupportingArtifacts.length }}</span>\n                  @if (!IsSupportingArtifactsExpanded) {\n                    <span class=\"supporting-collapsed-preview\">\n                      @for (a of SupportingArtifacts; track a.artifact.ID; let stepIdx = $index) {\n                        <span class=\"supporting-preview-pill\">#{{ stepIdx + 1 }} {{ a.version?.Name || a.artifact.Name }}</span>\n                      }\n                    </span>\n                  }\n                </span>\n                <span class=\"supporting-header-right\">\n                  <span class=\"supporting-toggle-hint\">{{ IsSupportingArtifactsExpanded ? 'Collapse' : 'Expand' }}</span>\n                  <i class=\"fa-solid fa-chevron-down supporting-chevron\" [class.rotated]=\"IsSupportingArtifactsExpanded\" aria-hidden=\"true\"></i>\n                </span>\n              </button>\n\n              @if (IsSupportingArtifactsExpanded) {\n                <div class=\"supporting-artifacts-grid\">\n                  @for (a of SupportingArtifacts; track a.artifact.ID; let stepIdx = $index) {\n                    <div class=\"artifact-wrapper supporting-artifact-cell\" [class.system-artifact]=\"a.artifact.Visibility === 'System Only'\">\n                      <span class=\"supporting-step-badge\" [title]=\"'Supporting artifact #' + (stepIdx + 1)\">#{{ stepIdx + 1 }}</span>\n                      <mj-artifact-message-card\n                        [artifactId]=\"a.artifact.ID\"\n                        [artifact]=\"a.artifact\"\n                        [artifactVersion]=\"a.version\"\n                        [currentUser]=\"currentUser\"\n                        (actionPerformed)=\"onArtifactActionPerformed($event)\">\n                      </mj-artifact-message-card>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n\n            @if (PrimaryArtifact; as primary) {\n              <div class=\"multi-artifact-primary-section\">\n                <div class=\"primary-artifact-header\">\n                  <i class=\"fa-solid fa-star primary-header-icon\" aria-hidden=\"true\"></i>\n                  <span class=\"primary-header-title\">Final Artifact</span>\n                  <span class=\"primary-step-badge\">#{{ displayArtifacts.length }}</span>\n                </div>\n                <div class=\"artifact-wrapper primary-artifact-card\" [class.system-artifact]=\"primary.artifact.Visibility === 'System Only'\">\n                  <mj-artifact-message-card\n                    [artifactId]=\"primary.artifact.ID\"\n                    [artifact]=\"primary.artifact\"\n                    [artifactVersion]=\"primary.version\"\n                    [currentUser]=\"currentUser\"\n                    (actionPerformed)=\"onArtifactActionPerformed($event)\">\n                  </mj-artifact-message-card>\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- One per attached artifact whose rows are still loading. Rendered AFTER the loaded\n             cards, so an artifact arriving appends rather than reordering what is already on\n             screen. Carries the same system-artifact de-emphasis as the card it becomes. -->\n        @for (pending of pendingArtifactPlaceholders; track pending.artifactId) {\n          <div class=\"artifact-wrapper\" [class.system-artifact]=\"pending.visibility === 'System Only'\">\n            <div class=\"artifact-pending\">\n              <mj-loading [text]=\"pendingLabel(pending)\" size=\"small\"></mj-loading>\n            </div>\n          </div>\n        }\n\n        <!-- Agent Response Form (shown only for last message by owner) -->\n        @if (!ReadOnly && isLastMessageInConversation && isConversationOwner && responseForm) {\n          <mj-dynamic-form\n            [FormDefinition]=\"responseForm\"\n            [Disabled]=\"isProcessing\"\n            (FormSubmitted)=\"onFormSubmitted($event)\">\n          </mj-dynamic-form>\n        }\n\n        <!-- Actionable Commands (shown only for last message by owner) -->\n        @if (!ReadOnly && isLastMessageInConversation && isConversationOwner && actionableCommands.length > 0) {\n          <mj-actionable-commands\n            [commands]=\"actionableCommands\"\n            [disabled]=\"isProcessing\"\n            [isLastMessage]=\"isLastMessageInConversation\"\n            [isConversationOwner]=\"isConversationOwner\"\n            (commandExecuted)=\"onCommandExecuted($event)\">\n          </mj-actionable-commands>\n        }\n      }\n\n      @if (isEditing) {\n        <div class=\"message-edit-container\">\n          <textarea\n            class=\"message-edit-textarea\"\n            [(ngModel)]=\"editedText\"\n            (keydown)=\"onEditKeydown($event)\"\n            rows=\"4\"\n          placeholder=\"Edit your message...\"></textarea>\n          <div class=\"edit-actions\">\n            <button mjButton Variant=\"primary\" Size=\"sm\" (click)=\"SaveEdit()\">\n              <i [class]=\"EditSaveIcon\" aria-hidden=\"true\"></i>\n              {{ EditSaveLabel }}\n            </button>\n            <button mjButton Variant=\"secondary\" Size=\"sm\" (click)=\"CancelEditing()\">\n              <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n              Cancel\n            </button>\n            @if (EditNote) {\n              <span class=\"edit-note\">{{ EditNote }}</span>\n            }\n          </div>\n          <div class=\"edit-hint\">{{ EditHint }}</div>\n        </div>\n      }\n    </div>\n\n    @if (ForkChips.length > 0 && !isEditing) {\n      <div class=\"message-fork-chips\">\n        @for (chip of ForkChips; track chip.Kind + (chip.BranchID ?? '')) {\n          @if (chip.Kind === 'Original') {\n            <button mjButton Variant=\"flat\" Size=\"sm\" class=\"fork-chip\" data-kind=\"Original\"\n                    (click)=\"OnForkChipClick(chip, $event)\"\n                    [attr.aria-label]=\"ChipAriaLabel(chip)\">\n              <i [class]=\"'fork-chip-icon ' + ChipIcon(chip)\" aria-hidden=\"true\"></i>\n              <span class=\"fork-chip-name\">{{ chip.DisplayName }}</span>\n              <span class=\"fork-chip-time\">\u00B7 original</span>\n            </button>\n          } @else {\n            <button mjButton Variant=\"flat\" Size=\"sm\" class=\"fork-chip\" [attr.data-kind]=\"chip.Kind\"\n                    (click)=\"OnForkChipClick(chip, $event)\"\n                    [attr.aria-label]=\"ChipAriaLabel(chip)\">\n              <i [class]=\"'fork-chip-icon ' + ChipIcon(chip)\" aria-hidden=\"true\"></i>\n              @if (chip.Avatars.length > 0) {\n                <span class=\"fork-chip-avatars\" aria-hidden=\"true\">\n                  @for (avatar of chip.Avatars; track avatar.Kind + avatar.ID) {\n                    <span class=\"fork-chip-avatar\" [title]=\"avatar.Label\">\n                      @if (avatar.ImageURL) {\n                        <img [src]=\"avatar.ImageURL\" alt=\"\" />\n                      } @else if (avatar.IconClass) {\n                        <i [class]=\"avatar.IconClass\"></i>\n                      } @else {\n                        {{ avatar.Initials }}\n                      }\n                    </span>\n                  }\n                </span>\n              }\n              <span class=\"fork-chip-messages\">{{ chip.MessageLabel }}</span>\n              <span class=\"fork-chip-name\">{{ chip.DisplayName }}</span>\n              <span class=\"fork-chip-time\">\u00B7 {{ chip.ActivityLabel }}</span>\n            </button>\n          }\n        }\n      </div>\n    }\n\n    <!-- Message Footer: only rendered on the last message, and hidden while any message of the view is edited.\n         Non-last messages have no footer \u2014 pin/delete/rating live in the gear panel. -->\n    @if (ShowsFooter) {\n      <div class=\"message-footer\">\n        @if (allowMessageDelete && isConversationOwner) {\n          <button class=\"action-bar-btn danger inline-delete\" (click)=\"onDeleteClick()\" title=\"Delete this message and all messages below it\">\n            <i class=\"fas fa-trash\"></i>\n          </button>\n        }\n        @if (isAIMessage && (messageStatus === 'Complete' || ShowsFooterRegenerate)) {\n          <div class=\"ai-message-actions\">\n            @if (ShowsFooterRegenerate) {\n              <button class=\"action-bar-btn labeled regenerate-btn\" type=\"button\" (click)=\"OnRegenerateClick()\" [title]=\"RegenerateTitle\">\n                <i class=\"fa-solid fa-rotate-left\" aria-hidden=\"true\"></i>\n                <span>Regenerate</span>\n              </button>\n            }\n            @if (messageStatus === 'Complete') {\n              <!-- Rating sits between Regenerate and Pin on the latest AI message -->\n              @if (showMessageRating) {\n                <mj-conversation-message-rating\n                  [conversationDetailId]=\"message.ID\"\n                  [currentUser]=\"currentUser\"\n                  [ratingEntityName]=\"message.EntityInfo.Name || 'MJ: Conversation Details'\"\n                  [ratingsData]=\"ratings\"\n                  [canEdit]=\"isConversationOwner && !ReadOnly\">\n                </mj-conversation-message-rating>\n              }\n              @if (allowPinning) {\n                <button\n                  class=\"action-bar-btn pin-btn\"\n                  [class.pinned]=\"message.IsPinned\"\n                  (click)=\"PinMessage()\"\n                  [title]=\"message.IsPinned ? 'Unpin message' : 'Pin message'\"\n                  type=\"button\">\n                  <i class=\"fas fa-thumbtack\"></i>\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Agent details content section -->\n    <div class=\"agent-details-section\">\n      <!-- Agent Run Details Panel (expandable) -->\n      @if (isAgentDetailsExpanded && hasAgentRun) {\n        <!-- Agent Run Details Panel -->\n        <div class=\"agent-details-panel\">\n          @if (agentRun && showAgentRunDetails) {\n            <div class=\"agent-details-content\">\n              <div class=\"agent-details-header\">\n                <i class=\"fas fa-chart-line\"></i>\n                <span>\n                  <!-- Deliberately the ENGINE-resolved name: this header labels the real\n                       agent's diagnostics, and the link opens the real agent record \u2014 a\n                       host assistantDisplayName override must not relabel either. -->\n                  <a class=\"agent-name-link\" (click)=\"openAgentRecord()\" title=\"Open agent details\">\n                    {{ engineAgentInfo?.name || 'Agent' }}\n                  </a>\n                  Run Details\n                </span>\n              </div>\n\n              <!-- Run-detail grid (run ID, step/token counts, $ cost, status) \u2014 developer/\n                   observability data. The whole run-details section (this grid AND its\n                   header above) is gated on showAgentRunDetails at the panel root, so a\n                   white-labeled surface hides all of it; the delete/pin/rating overflow\n                   below is a sibling block (outside this @if) and still renders. -->\n              <div class=\"agent-details-grid\">\n                <div class=\"detail-row\">\n                  <span class=\"detail-label\">Run ID:</span>\n                  <span class=\"detail-value\">\n                    <a class=\"run-id-link\" (click)=\"openAgentRunRecord()\" title=\"Open agent run details\">\n                      {{ agentRun.ID }}\n                      <i class=\"fas fa-external-link-alt\"></i>\n                    </a>\n                  </span>\n                </div>\n\n                @if (agentRunStepCount > 0) {\n                  <div class=\"detail-row\">\n                    <span class=\"detail-label\">Steps:</span>\n                    <span class=\"detail-value\">{{ agentRunStepCount }}</span>\n                  </div>\n                }\n\n                @if (agentRunTotalTokens > 0) {\n                  <div class=\"detail-row\">\n                    <span class=\"detail-label\">Tokens:</span>\n                    <span class=\"detail-value\">{{ formatNumber(agentRunTotalTokens) }}</span>\n                  </div>\n                }\n\n                @if (agentRunTotalCost > 0) {\n                  <div class=\"detail-row\">\n                    <span class=\"detail-label\">Cost:</span>\n                    <span class=\"detail-value\">\\${{ agentRunTotalCost.toFixed(4) }}</span>\n                  </div>\n                }\n\n                @if (agentRun.Status) {\n                  <div class=\"detail-row\">\n                    <span class=\"detail-label\">Status:</span>\n                    <span class=\"detail-value status-badge\" [class]=\"'status-' + agentRun.Status.toLowerCase()\">\n                      {{ agentRun.Status }}\n                    </span>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n\n          <!-- Delete + Rating + Pin in gear panel for non-last messages \u2014 mirrors last-message footer layout -->\n          @if (!isLastMessage) {\n            <div class=\"agent-panel-actions\">\n              @if (allowMessageDelete && isConversationOwner) {\n                <button class=\"action-bar-btn danger\" (click)=\"onDeleteClick()\" title=\"Delete this message and all messages below it\">\n                  <i class=\"fas fa-trash\"></i>\n                </button>\n              }\n              @if (messageStatus === 'Complete') {\n                <div class=\"ai-message-actions\">\n                  @if (showMessageRating) {\n                    <mj-conversation-message-rating\n                      [conversationDetailId]=\"message.ID\"\n                      [currentUser]=\"currentUser\"\n                      [ratingsData]=\"ratings\"\n                      [canEdit]=\"isConversationOwner && !ReadOnly\">\n                    </mj-conversation-message-rating>\n                  }\n                  @if (allowPinning) {\n                    <button\n                      class=\"action-bar-btn pin-btn\"\n                      [class.pinned]=\"message.IsPinned\"\n                      (click)=\"PinMessage()\"\n                      [title]=\"message.IsPinned ? 'Unpin message' : 'Pin message'\"\n                      type=\"button\">\n                      <i class=\"fas fa-thumbtack\"></i>\n                    </button>\n                  }\n                </div>\n              } @else if (allowPinning) {\n                <button\n                  class=\"action-bar-btn pin-btn\"\n                  [class.pinned]=\"message.IsPinned\"\n                  (click)=\"PinMessage()\"\n                  [title]=\"message.IsPinned ? 'Unpin message' : 'Pin message'\"\n                  type=\"button\">\n                  <i class=\"fas fa-thumbtack\"></i>\n                </button>\n              }\n            </div>\n          }\n\n          <!-- Tasks Section -->\n          @if (WorkflowSteps.length > 0) {\n            <div class=\"agent-details-tasks\">\n              <div class=\"tasks-section-header\">\n                <i class=\"fas fa-tasks\"></i>\n                <span>Associated Tasks ({{ WorkflowSteps.length }})</span>\n              </div>\n              <div class=\"tasks-list\">\n                @for (task of WorkflowSteps; track task.ID) {\n                  <mj-task-widget\n                    [task]=\"task\"\n                    [compact]=\"false\"\n                    [clickable]=\"false\"\n                    [showProgress]=\"true\"\n                    [showDuration]=\"true\">\n                  </mj-task-widget>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Reaction Buttons -->\n    @if (showReactions && !isProcessing && !isInProgressAIMessage && !isEditing) {\n      <div class=\"message-reactions\">\n        <button class=\"reaction-btn\" (click)=\"toggleReaction('like')\">\n          <i class=\"far fa-thumbs-up\"></i>\n          <span class=\"reaction-count\">0</span>\n        </button>\n        <button class=\"reaction-btn\" (click)=\"toggleReaction('comment')\">\n          <i class=\"far fa-comment\"></i>\n          <span class=\"reaction-count\">0</span>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n<!-- Fork marker: a separate element under the row, outside its rail and fade -->\n@if (ForkMarkerText) {\n  <div class=\"fork-marker\" role=\"note\">\n    <i class=\"fa-solid fa-code-branch\" aria-hidden=\"true\"></i>\n    <span class=\"fork-marker-text\">{{ ForkMarkerText }}</span>\n    <span class=\"fork-marker-line\" aria-hidden=\"true\"></span>\n  </div>\n}\n", styles: [".message-item {\n  display: flex;\n  gap: 12px;\n  padding: 8px 24px;\n  transition: background-color 150ms ease;\n  animation: fadeIn 0.3s ease;\n  position: relative;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.message-item.ai-message {\n  background-color: transparent;\n}\n\n.message-item.user-message {\n  background-color: transparent;\n}\n\n/* Jump-to beacon: pulsed amber glow applied programmatically after scroll */\n.message-item.pin-beacon {\n  animation: pinBeacon 1.5s ease-out forwards;\n}\n\n@keyframes pinBeacon {\n  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-warning) 60%, transparent); }\n  20%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--mj-status-warning) 35%, transparent); }\n  50%  { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-status-warning) 15%, transparent); }\n  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mj-status-warning) 20%, transparent); }\n  100% { box-shadow: none; }\n}\n\n/* Search hit: a highlight applied programmatically for 2 s after a search result opens */\n.message-item.search-hit-highlight {\n  animation: searchHitHighlight 2s ease-out forwards;\n}\n\n@keyframes searchHitHighlight {\n  0%   { background-color: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent); }\n  70%  { background-color: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); }\n  100% { background-color: transparent; }\n}\n\n.message-item.in-progress {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  border-left: 3px solid var(--mj-brand-primary);\n  position: relative;\n}\n\n@keyframes shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n\n/* Progress message styling - make it visually distinct */\n.message-item.in-progress .message-text {\n  color: var(--mj-text-primary);\n  font-weight: 500;\n  max-height: 150px;\n  overflow-y: auto;\n  display: block;\n}\n\n/* A streamed reply is not a status line. While the bubble shows streamed reply text the item\n   adds `streaming` (IsStreaming, set by the list's in-place refresh): the cap above would box\n   the growing reply into a 150px scroller of its own, and the status weight would re-wrap every\n   line when the settled message drops it on completion, so the reply is set at its settled weight\n   from the first frame. */\n.message-item.in-progress.streaming .message-text {\n  max-height: none;\n  overflow-y: visible;\n  font-weight: inherit;\n}\n\n\n/* Pulse effect for avatar */\n.message-item.in-progress .avatar-circle {\n  box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-brand-primary) 70%, transparent);\n  animation: pulse 2s ease-in-out infinite;\n}\n\n@keyframes pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-brand-primary) 70%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 0%, transparent);\n  }\n}\n\n.message-item:hover {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 2%, transparent);\n}\n\n/* Mention Pills - Match new editor chip style */\n:host ::ng-deep .mention-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 12px;\n  margin: 0 3px;\n  border-radius: 16px;\n  font-weight: 600;\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n\n:host ::ng-deep .mention-badge.agent {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n}\n\n:host ::ng-deep .mention-badge.user {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n}\n\n:host ::ng-deep .mention-badge.entity {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n}\n\n:host ::ng-deep .mention-badge.query {\n  background: var(--mj-status-warning);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n}\n\n:host ::ng-deep .mention-badge.record {\n  background: var(--mj-color-info, #2563eb);\n  color: var(--mj-text-inverse, #fff);\n  border: 2px solid color-mix(in srgb, var(--mj-color-info, #2563eb) 40%, transparent);\n  box-shadow: var(--mj-shadow-md);\n  text-decoration: none;\n}\n\n/* Icon-only record citation: surrounding prose already named the row. */\n:host ::ng-deep .mention-badge.record.icon-only {\n  padding: 4px 7px;\n  gap: 0;\n  min-width: 1.65em;\n  justify-content: center;\n}\n\n/* Skills: standard green fallback (AISkill.Color overrides via inline style) + sharp-cornered\n   rectangle \u2014 the shape differentiates skills from the rounded agent/user/entity pills.\n   Keep color + shape in sync with the composer chip (mention-editor's createMentionChip). */\n:host ::ng-deep .mention-badge.skill {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-text-inverse) 35%, transparent);\n  border-radius: 4px;\n  box-shadow: var(--mj-shadow-md);\n}\n\n:host ::ng-deep .mention-badge i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n\n/* Support for custom icon classes with background-image (like mj-icon-skip) */\n:host ::ng-deep .mention-badge i[class^=\"mj-icon-\"],\n:host ::ng-deep .mention-badge i[class*=\" mj-icon-\"] {\n  width: 16px;\n  height: 16px;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  vertical-align: middle;\n  font-size: inherit;\n}\n\n/* Skip icon - must use ::ng-deep for dynamically injected HTML */\n:host ::ng-deep .mention-badge i.mj-icon-skip {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E\");\n}\n\n/* Betty icon */\n:host ::ng-deep .mention-badge i.mj-icon-betty {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23FF6B6B'/%3E%3Ctext x='50' y='65' text-anchor='middle' font-size='40' fill='white' font-family='Arial, sans-serif' font-weight='bold'%3EB%3C/text%3E%3C/svg%3E\");\n}\n\n/* Izzy icon */\n:host ::ng-deep .mention-badge i.mj-icon-izzy {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 204 180'%3E%3Cpath d='M0 0 C3.61144774 3.08477828 4.84942137 4.90830493 5.5 9.625 C5 13 5 13 3.5 14.9375 C1.74432121 17.35155834 1.83578869 18.21944114 1.90625 21.12890625 C1.9371875 22.40636719 1.968125 23.68382813 2 25 C3.18335937 24.72285156 4.36671875 24.44570313 5.5859375 24.16015625 C22.44010416 20.26839867 22.44010416 20.26839867 30 20 C31.80210938 19.92265625 31.80210938 19.92265625 33.640625 19.84375 C47.49356199 19.44904163 61.73614427 20.86627802 75 25 C75.53596907 19.64244551 75.53596907 19.64244551 73.5 15 C71.5549761 12.4066348 71.45048389 10.16629658 71.59375 6.97265625 C72.33633815 3.36681955 74.01253991 1.99164006 77 0 C79.80907914 -0.63997166 82.18961327 -0.63020793 85 0 C87.8100346 1.79363911 89.50940468 3.01880935 91 6 C90.984375 8.05859375 90.984375 8.05859375 90.75 10.4375 C90.68296875 11.21996094 90.6159375 12.00242187 90.546875 12.80859375 C90 15 90 15 88.49609375 16.3984375 C86.25734576 18.79500846 86.4852344 20.97464008 86.3125 24.1875 C86.21388672 25.81751953 86.21388672 25.81751953 86.11328125 27.48046875 C86.07589844 28.31191406 86.03851563 29.14335937 86 30 C86.67675781 30.0825 87.35351562 30.165 88.05078125 30.25 C91.82333306 31.20937741 94.89353787 32.99425194 98.1875 35 C99.18052124 35.60448975 99.18052124 35.60448975 100.19360352 36.22119141 C111.98050012 43.58460075 121.17745776 53.2687532 127 66 C127 66.66 127 67.32 127 68 C127.721875 68.0825 128.44375 68.165 129.1875 68.25 C133.81406141 69.48374971 136.2179022 71.66516963 138.625 75.7734375 C140.97801199 81.55147269 140.43210927 87.87027126 140.375 94 C140.38660156 95.24523437 140.39820313 96.49046875 140.41015625 97.7734375 C140.3675701 111.08870765 140.3675701 111.08870765 135.5 116.7421875 C131.62323281 119.66995439 128.8523137 121.14337998 124 121.125 C122.9790625 121.12886719 122.9790625 121.12886719 121.9375 121.1328125 C120 121 120 121 117 120 C116.74347656 120.65226562 116.48695313 121.30453125 116.22265625 121.9765625 C115.83980469 122.85054688 115.45695313 123.72453125 115.0625 124.625 C114.70285156 125.48351562 114.34320313 126.34203125 113.97265625 127.2265625 C108.57908063 134.80960941 99.56813916 137.59212379 91.0625 140.375 C90.02287109 140.72949219 88.98324219 141.08398438 87.91210938 141.44921875 C80.34347852 144 80.34347852 144 78 144 C78.02094727 144.65484375 78.04189453 145.3096875 78.06347656 145.984375 C78.14730383 148.98942328 78.19886895 151.99422464 78.25 155 C78.28351563 156.02996094 78.31703125 157.05992187 78.3515625 158.12109375 C78.43361416 164.56214867 77.93369275 169.71304442 74 175 C68.75523423 179.17440541 64.68195675 180.53237245 58 180 C55.12653443 178.963898 52.49379495 177.58020045 49.8125 176.125 C49.11447266 175.76019531 48.41644531 175.39539063 47.69726562 175.01953125 C46.39868999 174.33997216 45.10309803 173.65465367 43.81176758 172.96142578 C43.21388428 172.64415527 42.61600098 172.32688477 42 172 C41.34290039 171.59402588 40.68580078 171.18805176 40.00878906 170.76977539 C38.03672401 169.77639533 38.03672401 169.77639533 36.12475586 170.58325195 C35.49448486 170.96441162 34.86421387 171.34557129 34.21484375 171.73828125 C33.17166992 172.35026367 33.17166992 172.35026367 32.10742188 172.97460938 C31.39134766 173.41611328 30.67527344 173.85761719 29.9375 174.3125 C28.51029236 175.1647359 27.08194984 176.01507485 25.65234375 176.86328125 C25.02320068 177.24782471 24.39405762 177.63236816 23.74584961 178.02856445 C19.79572932 180.2265128 16.44037501 180.296025 12 180 C6.82155197 178.33236419 3.95074467 176.59004726 1 172 C-0.72417326 168.34258111 -1.2403609 165.51230089 -1.1953125 161.48046875 C-1.18886719 160.45888672 -1.18242188 159.43730469 -1.17578125 158.38476562 C-1.15902344 157.32966797 -1.14226563 156.27457031 -1.125 155.1875 C-1.11597656 154.11306641 -1.10695312 153.03863281 -1.09765625 151.93164062 C-1.07415306 149.28753146 -1.04129575 146.64388128 -1 144 C-1.63196289 143.81171631 -2.26392578 143.62343262 -2.91503906 143.42944336 C-8.20708475 141.84808949 -13.49207901 140.2541307 -18.75 138.5625 C-19.98234375 138.17191406 -21.2146875 137.78132812 -22.484375 137.37890625 C-29.06200008 134.79901552 -34.12925122 130.90130551 -38 125 C-38.875 121.5625 -38.875 121.5625 -39 119 C-39.495 119.33 -39.99 119.66 -40.5 120 C-45.24354984 121.89741993 -49.49426304 121.53143657 -54.1875 119.875 C-58.42051121 117.05299253 -61.35909664 113.92271008 -63 109 C-63.22709306 104.92471184 -63.22828659 100.8492307 -63.24023438 96.76806641 C-63.2498982 94.77103695 -63.28108516 92.77414948 -63.3125 90.77734375 C-63.36188158 78.59243786 -63.36188158 78.59243786 -60 73 C-57.7509823 70.86631654 -55.88785241 69.35340008 -53.0078125 68.20703125 C-50.3010212 66.57979679 -49.65488803 64.83796148 -48.3125 62 C-45.06106922 55.7428385 -40.95735135 50.97447519 -36 46 C-35.40832031 45.38511719 -34.81664063 44.77023438 -34.20703125 44.13671875 C-28.97373562 39.11136864 -17.47215548 30 -10 30 C-10.08733973 27.91589342 -10.19552278 25.83265331 -10.3125 23.75 C-10.37050781 22.58984375 -10.42851563 21.4296875 -10.48828125 20.234375 C-11.02905532 16.81635262 -11.84853545 15.59874271 -14 13 C-14.54046356 8.75350057 -14.48376179 6.74176808 -12.125 3.125 C-8.57275398 -0.42724602 -4.8825369 -0.970906 0 0 Z M5 35 C4.30245605 35.21962402 3.60491211 35.43924805 2.88623047 35.66552734 C-14.1501062 41.15773444 -29.02751477 50.81254544 -39 66 C-39.33 66.99 -39.66 67.98 -40 69 C-37.525 70.98 -37.525 70.98 -35 73 C-34.52691406 72.29875 -34.05382812 71.5975 -33.56640625 70.875 C-21.08320269 52.96537462 -2.17172019 42.38052109 19.26171875 38.5078125 C46.97805996 34.9959591 75.10426623 38.71529466 97.73046875 56.09765625 C103.53827054 61.07953766 107.9264808 66.53902088 112 73 C113.32 72.01 114.64 71.02 116 70 C115.01713954 61.60788376 107.55262518 55.04847712 101.375 49.8125 C82.80696113 35.82916208 61.35998978 30.59265576 38.375 30.625 C37.71836365 30.62554382 37.06172729 30.62608765 36.38519287 30.62664795 C25.42439402 30.66823796 15.42390121 31.62072499 5 35 Z' fill='%234E3B78' transform='translate(63,0)'/%3E%3Cpath d='M0 0 C5.27957047 5.78547525 9.31612861 13.25448014 10 21.125 C9.69743213 24.83293961 8.77676366 26.8914086 6.1875 29.5625 C-2.04152489 35.76003038 -13.60917874 39.6270706 -23.875 38.8125 C-24.535 38.1525 -25.195 37.4925 -25.875 36.8125 C-28.97847254 36.48234335 -31.03281176 36.30718706 -33.75 37.9375 C-35.40354531 40.69340884 -35.26865568 42.66325452 -34.875 45.8125 C-33.95833333 47.89583333 -33.95833333 47.89583333 -31.875 48.8125 C-28.29166667 48.89583333 -28.29166667 48.89583333 -24.875 47.8125 C-24.57086182 47.16466553 -24.26672363 46.51683105 -23.95336914 45.84936523 C-22.875 43.8125 -22.875 43.8125 -20.77124023 42.88696289 C-19.91731689 42.6883667 -19.06339355 42.48977051 -18.18359375 42.28515625 C-17.23806641 42.04990234 -16.29253906 41.81464844 -15.31835938 41.57226562 C-14.32642578 41.34216797 -13.33449219 41.11207031 -12.3125 40.875 C-4.77934417 39.10870895 1.54823541 36.95205932 8.125 32.8125 C7.81647145 40.06292099 4.56245219 45.32546918 -0.5 50.4609375 C-5.29811284 54.61130511 -8.83216751 54.86916719 -15 55 C-21.13677833 55.26569953 -25.04589225 56.51893716 -29.890625 60.31640625 C-39.17633501 67.31724667 -52.82450605 66.52799961 -63.875 65.8125 C-71.37432145 64.60538489 -79.4496824 61.2378176 -84.875 55.8125 C-86.81199027 55.70419517 -88.75076074 55.60687514 -90.69067383 55.58691406 C-97.68300211 55.51299157 -103.12007731 55.4392364 -108.44140625 50.40234375 C-108.91449219 49.87769531 -109.38757813 49.35304688 -109.875 48.8125 C-110.6175 48.090625 -111.36 47.36875 -112.125 46.625 C-118.35765562 36.60823203 -119.69570866 25.34707186 -117.25 13.8828125 C-113.47065738 3.0509466 -104.76645407 -4.0120534 -94.875 -9.1875 C-91.26850975 -10.75400624 -87.62602625 -12.0153043 -83.875 -13.1875 C-83.029375 -13.47496094 -82.18375 -13.76242188 -81.3125 -14.05859375 C-56.0861494 -22.29657387 -20.04377266 -18.06142152 0 0 Z' fill='%23FDFDFD' transform='translate(155.875,64.1875)'/%3E%3Cpath d='M0 0 C5.24479788 1.58079188 9.51172656 4.60408712 14.06640625 7.58984375 C18.37837094 10.28462973 18.37837094 10.28462973 23.30859375 11.1328125 C28.49696048 9.20971132 33.08639658 6.29555589 37.79882812 3.42578125 C43.66838131 -0.00837477 43.66838131 -0.00837477 47.27734375 0.078125 C49.34375 1.0078125 49.34375 1.0078125 51.34375 3.0078125 C51.82984303 7.30136192 51.71414913 11.62739332 51.71875 15.9453125 C51.74324219 17.15123047 51.76773438 18.35714844 51.79296875 19.59960938 C51.79876953 21.33114258 51.79876953 21.33114258 51.8046875 23.09765625 C51.81290527 24.15847412 51.82112305 25.21929199 51.82958984 26.31225586 C51.34375 29.0078125 51.34375 29.0078125 49.48461914 30.87670898 C46.29658529 32.56106989 44.78123809 32.062357 41.34375 31.0078125 C37.60135447 29.03986817 34.07891261 26.72386924 30.53320312 24.42578125 C26.44214688 21.80182316 26.44214688 21.80182316 21.77734375 20.921875 C17.60401055 22.78413283 13.85973006 25.2663764 10.046875 27.76953125 C5.85335687 30.41401513 2.44659272 31.9581498 -2.65625 32.0078125 C-4.33203125 30.87695312 -4.33203125 30.87695312 -5.65625 29.0078125 C-6.04443359 26.328125 -6.04443359 26.328125 -6.0546875 23.1328125 C-6.05855469 21.98296875 -6.06242187 20.833125 -6.06640625 19.6484375 C-6.05480469 18.44703125 -6.04320313 17.245625 -6.03125 16.0078125 C-6.04285156 14.80640625 -6.05445312 13.605 -6.06640625 12.3671875 C-6.06253906 11.21734375 -6.05867188 10.0675 -6.0546875 8.8828125 C-6.05130371 7.82835937 -6.04791992 6.77390625 -6.04443359 5.6875 C-5.65625 3.0078125 -5.65625 3.0078125 -4.29736328 1.14111328 C-2.65625 0.0078125 -2.65625 0.0078125 0 0 Z' fill='%23FCFCFD' transform='translate(78.65625,136.9921875)'/%3E%3Cpath d='M0 0 C2.5 0.625 2.5 0.625 4.8125 2.625 C6.96830116 6.4575354 7.24792603 9.32007692 6.5 13.625 C5.34367254 15.98793002 4.35016245 17.77483755 2.5 19.625 C0.1875 20 0.1875 20 -2.5 19.625 C-5.06638215 17.47478793 -6.29103188 15.79226637 -6.88671875 12.46484375 C-7.08084032 8.45522921 -6.77549931 6.12498023 -4.8125 2.5625 C-2.5 0.625 -2.5 0.625 0 0 Z' fill='%2353417C' transform='translate(138.5,67.375)'/%3E%3Cpath d='M0 0 C2.5 0.6875 2.5 0.6875 4.8125 2.625 C7.08407605 6.74748987 7.32547179 10.07653131 6.5 14.6875 C4.8125 17.75 4.8125 17.75 2.5 19.6875 C-0.0625 20.25 -0.0625 20.25 -2.5 19.6875 C-5.30401904 17.38419865 -5.84979387 14.76309142 -6.4375 11.3125 C-6.72853275 7.71913649 -6.44645777 6.57011897 -4.875 3.125 C-2.5 0.6875 -2.5 0.6875 0 0 Z' fill='%23523F7B' transform='translate(64.5,67.3125)'/%3E%3Cpath d='M0 0 C8.91 0 17.82 0 27 0 C24.81183076 5.47042311 24.169236 6.55141452 19 9 C14.08609728 9.94526984 9.88605617 10.13992406 5.51171875 7.49609375 C3.4733513 5.76185217 1.65854906 4.10051199 0 2 C0 1.34 0 0.68 0 0 Z' fill='%23574680' transform='translate(88,95)'/%3E%3C/svg%3E\");\n}\n\n/* Support for image tags in mention badges */\n:host ::ng-deep .mention-badge img {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  object-fit: cover;\n  vertical-align: middle;\n}\n\n:host ::ng-deep .mention-badge:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-lg);\n}\n\n/* Configuration preset indicator for agent mentions with non-default presets */\n/* Matches the styling from mention-editor.component.ts (lines 432-444) */\n:host ::ng-deep .mention-badge .preset-indicator {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;\n  background: rgba(255, 255, 255, 0.25);\n  padding: 2px 6px;\n  border-radius: 4px;\n  margin-left: 4px;\n  letter-spacing: 0.3px;\n  text-transform: uppercase;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n}\n\n.message-avatar {\n  flex-shrink: 0;\n}\n\n.avatar-circle {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  color: var(--mj-text-inverse);\n}\n\n/* User avatars are circular */\n.avatar-circle.user-avatar {\n  border-radius: 50%;\n  background-color: var(--mj-text-primary);\n}\n\n/* Agent avatars are square with rounded corners */\n.avatar-circle.ai-avatar {\n  border-radius: 8px;\n  background-color: var(--mj-brand-primary); /* Brand color for agents */\n}\n\n/* Avatar images (for users with uploaded photos or URLs) */\n/* Host-supplied assistant avatar: the AI tile is a rounded SQUARE (8px, brand\n   fill), so the image must clip to the tile's radius \u2014 not the user avatar's\n   50% circle \u2014 and the brand fill must drop so nothing peeks out at the\n   corners or behind a transparent image. */\n.avatar-circle.ai-avatar.avatar-has-image {\n  background-color: transparent;\n  overflow: hidden;\n}\n.avatar-circle.ai-avatar .avatar-image {\n  border-radius: inherit;\n}\n\n.avatar-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n/* Container for the standard mj-loading indicator while an artifact's rows load. Layout only \u2014\n   the indicator owns its own animation, so there is no bespoke shimmer to keep re-themed. */\n.artifact-pending {\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n}\n\n/* System artifact styling - subtle visual distinction */\n.artifact-wrapper.system-artifact {\n  opacity: 0.85;\n  position: relative;\n}\n\n.artifact-wrapper.system-artifact::before {\n  content: 'SYSTEM';\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n/* Multi-artifact showcase: supporting step outputs in a collapsible grid + brand-tinted final deliverable */\n.multi-artifact-showcase {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-top: 12px;\n}\n\n/* Strip the default 12px top/bottom margin from inner <mj-artifact-message-card> when inside the showcase\n   so the grid and Final Deliverable containers control padding and vertical rhythm directly. */\n.multi-artifact-showcase ::ng-deep .artifact-message-card {\n  margin: 0;\n}\n\n.multi-artifact-supporting-section {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n.supporting-artifacts-header {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 14px;\n  background: color-mix(in srgb, var(--mj-bg-surface-sunken) 65%, var(--mj-bg-surface-card));\n  border: none;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n  font-weight: 600;\n  text-align: left;\n  transition: background-color 0.15s ease;\n}\n\n.multi-artifact-supporting-section.is-collapsed .supporting-artifacts-header {\n  border-bottom: none;\n}\n\n.supporting-artifacts-header:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.supporting-header-left {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  flex-wrap: wrap;\n}\n\n.supporting-header-icon {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.supporting-header-title {\n  color: var(--mj-text-primary);\n  letter-spacing: 0.01em;\n}\n\n.supporting-header-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 6px;\n  border-radius: 999px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.supporting-collapsed-preview {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  margin-left: 4px;\n  flex-wrap: wrap;\n  min-width: 0;\n}\n\n.supporting-preview-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  max-width: 220px;\n  padding: 2px 8px;\n  border-radius: 999px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.supporting-preview-index {\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n}\n\n.supporting-header-right {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-weight: 500;\n  flex-shrink: 0;\n}\n\n.supporting-chevron {\n  font-size: 10px;\n  transition: transform 0.18s ease;\n}\n\n.supporting-chevron.rotated {\n  transform: rotate(180deg);\n}\n\n.supporting-artifacts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n  gap: 10px;\n  padding: 12px 14px;\n}\n\n.supporting-artifact-cell {\n  position: relative;\n  min-width: 0;\n}\n\n.supporting-artifact-cell ::ng-deep .artifact-info-bar {\n  padding: 10px 44px 10px 12px;\n  border-radius: 8px;\n}\n\n.supporting-step-badge {\n  position: absolute;\n  top: 50%;\n  right: 12px;\n  transform: translateY(-50%);\n  z-index: 5;\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 6px;\n  border-radius: 999px;\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n  pointer-events: none;\n}\n\n.multi-artifact-primary-section {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 10px 14px 12px 14px;\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 7%, var(--mj-bg-surface-card));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 38%, var(--mj-border-default));\n  box-shadow: 0 2px 10px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.primary-artifact-header {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--mj-brand-primary);\n}\n\n.primary-header-icon {\n  font-size: 11px;\n}\n\n.primary-step-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 1px 7px;\n  border-radius: 999px;\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 32%, var(--mj-border-subtle));\n}\n\n.primary-artifact-card {\n  min-width: 0;\n}\n\n.primary-artifact-card ::ng-deep .artifact-info-bar {\n  background: color-mix(in srgb, var(--mj-brand-primary) 11%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 38%, var(--mj-border-default));\n  border-radius: 8px;\n}\n\n.primary-artifact-card ::ng-deep .artifact-info-bar:hover {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.primary-artifact-card ::ng-deep .artifact-icon {\n  background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface-sunken));\n  color: var(--mj-brand-primary);\n}\n\n.message-content {\n  flex: 1;\n  min-width: 0;\n  position: relative;\n}\n\n.message-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 4px;\n  font-size: 13px;\n}\n\n.message-sender {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n/* Agent role badge */\n.agent-badge {\n  display: inline-block;\n  padding: 2px 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 10px;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.message-time {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  font-weight: 400;\n}\n\n/* Right-side cluster anchoring.\n   The first of these siblings that actually renders absorbs the\n   `margin-left: auto`, pushing the whole cluster right. Subsequent siblings\n   then sit next to it (relying on the flex container's `gap`). This used to\n   live only on .time-pill, which broke when timePillText returned null after\n   agent completion \u2014 the gear icon would shift to the left. */\n.time-pill,\n.test-feedback-icon,\n.message-action-group,\n.agent-run-icon {\n  margin-left: auto;\n}\n.time-pill ~ .test-feedback-icon,\n.time-pill ~ .message-action-group,\n.time-pill ~ .agent-run-icon,\n.test-feedback-icon ~ .message-action-group,\n.test-feedback-icon ~ .agent-run-icon,\n.message-action-group ~ .agent-run-icon {\n  margin-left: 8px;\n}\n\n/* Message actions: always visible at the right end of the header, in DOM order (no overlay),\n   with the same look as the gear (.agent-run-icon). */\n.message-action-group {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n}\n/* Labeled actions on the latest turn need more room between them than icons do */\n.message-action-group.labeled {\n  gap: var(--mj-space-4);\n}\n.message-header-action {\n  gap: var(--mj-space-2);\n  min-width: 20px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  font: inherit;\n  font-size: 12px;\n}\n.message-header-action i {\n  font-size: 13px;\n}\n.message-header-action:focus-visible {\n  outline: none;\n  border-radius: var(--mj-radius-sm);\n  box-shadow: var(--mj-focus-ring);\n}\n/* Inherited rows fade to 70%; the stronger color keeps the header icons at 3:1 against the surface */\n.message-item.fork-rail-inherited .message-header-action:not(:hover),\n.message-item.fork-rail-inherited .agent-run-icon:not(:hover):not(.expanded) {\n  color: var(--mj-text-secondary);\n}\n.message-action-group .action-label-short {\n  display: none;\n}\n\n/* Time pill - unified styling for all AI message states */\n.time-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  transition: all 0.3s ease;\n}\n\n.time-pill i {\n  font-size: 10px;\n}\n\n/* Stop control beside the in-progress time pill \u2014 same pill geometry, error palette so it\n   reads as the one destructive control in the header. */\n.stop-run-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  border: 1px solid transparent;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: inherit;\n  cursor: pointer;\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n  transition: all 0.2s ease;\n}\n\n.stop-run-pill i {\n  font-size: 10px;\n}\n\n.stop-run-pill:hover:not(:disabled) {\n  border-color: var(--mj-status-error);\n}\n\n.stop-run-pill:disabled {\n  cursor: default;\n  opacity: 0.7;\n}\n\n/* Complete state - light blue (default) */\n.time-pill.complete {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-status-info-text);\n}\n\n/* Stopped state - neutral: a stopped run is neither a success nor an error, and the error\n   palette belongs to the stalled state. Follows .complete so it wins on equal specificity. */\n.time-pill.stopped {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-secondary);\n}\n\n/* In-progress state - brand color with subtle pulse */\n.time-pill.in-progress {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n/* Active agent run state - brand color with subtle pulse */\n.time-pill.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n/* Liveness states (MJ #4222) \u2014 the run may no longer be progressing, so the pill stops\n   presenting the elapsed time as healthy progress. These follow .in-progress/.active in the\n   stylesheet so they win on equal specificity. */\n.time-pill.checking {\n  background: var(--mj-status-warning-bg);\n  color: var(--mj-status-warning-text);\n}\n\n.time-pill.stalled {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n}\n\n.time-pill .liveness-label {\n  font-weight: 400;\n  opacity: 0.85;\n}\n\n/* Failed state - red */\n.time-pill.failed {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n}\n\n@keyframes pillPulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.85;\n  }\n}\n\n/* A stopped reply: the kept-step line and the Continue control under the reply text */\n.stopped-line {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-2);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n.stopped-line i {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n.stopped-actions {\n  display: flex;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-2);\n}\n\n/* Deprecated - keeping for backward compatibility but no longer used */\n.generation-time {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  background: var(--mj-status-info-bg);\n  border-radius: 10px;\n  font-size: 11px;\n  color: var(--mj-status-info-text);\n  font-weight: 500;\n  margin-left: auto;\n}\n\n.generation-time i {\n  font-size: 10px;\n}\n\n/* Deprecated - keeping for backward compatibility but no longer used */\n.message-elapsed {\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-style: italic;\n}\n\n.message-body {\n  margin-bottom: 0;\n}\n\n.message-text {\n  color: var(--mj-text-primary);\n  line-height: 1.5;\n  word-wrap: break-word;\n}\n\n/* Remove extra margin from markdown paragraphs */\n.message-text mj-markdown > :first-child,\n.message-text ::ng-deep .mj-markdown-container > :first-child {\n  margin-top: 0;\n}\n\n.message-text mj-markdown > :last-child,\n.message-text ::ng-deep .mj-markdown-container > :last-child {\n  margin-bottom: 0;\n}\n\n/* Asymmetric bubble shapes for message content */\n.message-item.user-message .message-content {\n  border-radius: 12px 12px 12px 4px;\n}\n\n.message-item.ai-message .message-content {\n  border-radius: 4px 12px 12px 12px;\n}\n\n/* Reaction Buttons */\n.message-reactions {\n  display: none; /* Hide reactions for now - not implemented */\n}\n\n/* Artifact Card - Claude.ai Style */\n.artifact-card {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-top: 12px;\n  padding: 16px;\n  border: 1px solid color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n  border-radius: 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  max-width: 500px;\n  box-shadow: var(--mj-shadow-sm);\n  position: relative;\n  overflow: hidden;\n}\n\n.artifact-card::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background: var(--mj-brand-primary);\n  opacity: 1;\n}\n\n.artifact-card:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-1px);\n}\n\n.artifact-card-header {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n}\n\n.artifact-card-icon {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  border-radius: 6px;\n  transition: all 0.2s ease;\n}\n\n.artifact-card:hover .artifact-card-icon {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  transform: scale(1.05);\n}\n\n.artifact-card-icon i {\n  font-size: 18px;\n}\n\n.artifact-card-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-card-label {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  letter-spacing: -0.01em;\n  margin-bottom: 4px;\n}\n\n.artifact-card-description {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n}\n\n/* Thread indicator badge */\n.thread-indicator {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  margin-top: 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  border-radius: 16px;\n  cursor: pointer;\n  transition: all 150ms ease;\n  font-size: 12px;\n  color: var(--mj-brand-primary-hover);\n  font-weight: 500;\n}\n\n.thread-indicator:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.thread-indicator i {\n  font-size: 14px;\n}\n\n.thread-count {\n  font-weight: 600;\n}\n\n/* Edit mode styles */\n.message-item.editing {\n  background-color: var(--mj-status-warning-bg);\n  border-left: 3px solid var(--mj-status-warning);\n}\n\n.message-edit-container {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.message-edit-textarea {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  font-family: inherit;\n  font-size: 14px;\n  line-height: 1.6;\n  resize: vertical;\n  min-height: 80px;\n  transition: border-color 150ms ease;\n}\n\n.message-edit-textarea:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.edit-actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n}\n\n/* What the save does, at the right end of the button row */\n.edit-note {\n  margin-left: auto;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n\n/* The answer \"Save and resend\" will replace dims while that edit is open */\n.message-item.pending-replace .message-body {\n  opacity: 0.6;\n}\n\n.edit-hint {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.edited-badge {\n  margin-left: 8px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n  font-weight: normal;\n}\n\n/* Message Action Bar (separate panel above agent details) */\n.message-action-bar {\n  margin-top: 12px;\n  margin-bottom: 8px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 12px;\n}\n\n.action-bar-container {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.action-buttons {\n  display: flex;\n  gap: 4px;\n  margin-left: 16px;\n  padding-left: 16px;\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.action-bar-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 10px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-text-muted);\n  border-radius: 6px;\n  font-size: 16px;\n  line-height: 1;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s;\n  min-width: 36px;\n  height: 32px;\n  opacity: 0.6;\n}\n\n.action-bar-btn i {\n  font-size: 16px;\n  line-height: 1;\n}\n\n/* A footer button with a text label (Regenerate) */\n.action-bar-btn.labeled {\n  gap: var(--mj-space-2);\n  min-width: 0;\n  padding: 6px 12px;\n  font-size: 13px;\n}\n\n.action-bar-btn.labeled i {\n  font-size: 14px;\n}\n\n.action-bar-btn:hover {\n  opacity: 1;\n  border-color: var(--mj-text-secondary);\n}\n\n.action-bar-btn.danger {\n  color: var(--mj-status-error);\n}\n\n.action-bar-btn.danger:hover {\n  opacity: 1;\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n.action-bar-btn i.pinned {\n  color: var(--mj-brand-primary);\n}\n\n.action-bar-btn.test-feedback {\n  color: var(--mj-status-warning);\n}\n\n.action-bar-btn.test-feedback:hover {\n  opacity: 1;\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n}\n\n/* Message status indicator */\n.message-status {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  padding: 2px 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  margin-left: 8px;\n  animation: statusPulse 2s ease-in-out infinite;\n}\n\n.message-status i {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n}\n\n.message-status.error {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n}\n\n.message-status.error i {\n  color: var(--mj-status-error);\n}\n\n.status-text {\n  font-weight: 500;\n}\n\n@keyframes statusPulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.7; }\n}\n\n/* ============================================\n   Agent Run Icon & Details Panel\n   ============================================ */\n\n/* Agent run gear icon in header - muted style for power users.\n   Left-margin is governed by the right-side cluster rules above so the gear\n   stays right-anchored whether or not the time pill / test-feedback icon\n   renders alongside it. */\n.agent-run-icon,\n.message-header-action {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  user-select: none;\n}\n\n.agent-run-icon {\n  width: 20px;\n}\n\n.agent-run-icon i.fa-cog {\n  font-size: 13px;\n}\n\n.agent-run-icon:hover,\n.message-header-action:hover {\n  color: var(--mj-text-secondary);\n}\n\n.agent-run-icon.expanded {\n  color: var(--mj-brand-primary);\n  transform: scale(1.1);\n}\n\n/* Test feedback icon in header - appears for test runs.\n   Left-margin handled by the right-side cluster rules above. */\n.test-feedback-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  user-select: none;\n}\n\n.test-feedback-icon i.fa-flask {\n  font-size: 13px;\n}\n\n.test-feedback-icon:hover {\n  color: var(--mj-brand-primary); /* Blue color for test feedback */\n  transform: scale(1.1);\n}\n\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Agent details panel */\n.agent-details-panel {\n  margin-top: 12px;\n  padding: 16px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  animation: slideDown 0.2s ease;\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Loading state */\n.agent-details-loading {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n}\n\n.agent-details-loading i {\n  color: var(--mj-brand-primary);\n}\n\n/* Error state */\n.agent-details-error {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-status-error);\n  font-size: 13px;\n}\n\n.agent-details-error i {\n  color: var(--mj-status-error);\n}\n\n/* Content header */\n.agent-details-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.agent-details-header i {\n  color: var(--mj-brand-primary);\n}\n\n.agent-name-link {\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  text-decoration: none;\n  font-weight: 600;\n  transition: all 0.2s ease;\n}\n\n.agent-name-link:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n/* Details grid */\n.agent-details-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 12px;\n  margin-bottom: 12px;\n}\n\n.detail-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-label {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.detail-value {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;\n}\n\n/* Status badge in details */\n.status-badge {\n  padding: 3px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.status-pending {\n  background: var(--mj-status-warning-bg);\n  color: var(--mj-status-warning-text);\n}\n\n.status-badge.status-running {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-status-info-text);\n}\n\n.status-badge.status-complete {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n}\n\n.status-badge.status-failed,\n.status-badge.status-error {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n}\n\n.status-badge.status-cancelled {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n/* Run ID link styling */\n.run-id-link {\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  transition: all 0.2s ease;\n}\n\n.run-id-link:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n.run-id-link i.fa-external-link-alt {\n  font-size: 10px;\n  opacity: 0.7;\n}\n\n/* Tasks section in agent details */\n.agent-details-tasks {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.tasks-section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-weight: 600;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.tasks-section-header i {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n}\n\n.tasks-list {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.tasks-list mj-task-widget {\n  display: block;\n}\n\n/* Artifact version badge */\n.artifact-version-badge {\n  display: inline-block;\n  margin-left: 8px;\n  padding: 2px 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: 11px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n  vertical-align: middle;\n}\n\n/* Message Footer (rating counts and inline actions) */\n.message-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.rating-counts {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.rating-count {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.rating-count.thumbs-up {\n  color: var(--mj-status-success);\n}\n\n.rating-count.thumbs-down {\n  color: var(--mj-status-error);\n}\n\n.rating-total {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n/* Delete button \u2014 always visible on the last message, no hover required */\n.inline-delete {\n  display: flex;\n  align-items: center;\n}\n\n.message-item.pinned {\n  border-left: 3px solid var(--mj-status-warning);\n  background-color: color-mix(in srgb, var(--mj-status-warning) 8%, transparent);\n}\n\n/* Wraps pin button + rating component on the right side of the footer */\n.ai-message-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-left: auto;\n}\n\n.action-bar-btn.pin-btn {\n  color: var(--mj-text-muted);\n}\n\n.action-bar-btn.pin-btn:hover {\n  color: var(--mj-status-warning);\n  border-color: var(--mj-status-warning);\n}\n\n.action-bar-btn.pin-btn.pinned {\n  opacity: 1;\n  color: var(--mj-status-warning);\n  border-color: var(--mj-status-warning-border);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n}\n\n/* Delete + Rating + Pin in gear panel for non-last messages \u2014 mirrors .message-footer layout */\n.agent-panel-actions {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 0 0;\n  margin-top: 8px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n/* Agent details section wrapper */\n.agent-details-section {\n  margin-top: 8px;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .message-item {\n    padding: 8px 12px;\n    gap: 8px;\n  }\n\n  .avatar-circle {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n  }\n\n  .artifact-card {\n    max-width: 90vw;\n    padding: 12px;\n  }\n\n  .artifact-card-icon {\n    width: 32px;\n    height: 32px;\n  }\n\n  .artifact-card-icon i {\n    font-size: 16px;\n  }\n\n  .message-header {\n    font-size: 12px;\n  }\n\n  .message-sender {\n    font-size: 12px;\n  }\n\n  .message-time {\n    font-size: 11px;\n  }\n\n  .agent-badge {\n    font-size: 10px;\n    padding: 1px 6px;\n  }\n\n  .time-pill {\n    font-size: 10px;\n    padding: 2px 6px;\n  }\n\n  /* The latest turn's Fork from here shortens to \"Fork\" */\n  .message-action-group .action-label-long {\n    display: none;\n  }\n\n  .message-action-group .action-label-short {\n    display: inline;\n  }\n}\n\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .message-item {\n    padding: 6px 8px;\n    gap: 6px;\n  }\n\n  .avatar-circle {\n    width: 28px;\n    height: 28px;\n    font-size: 12px;\n  }\n\n  .avatar-circle.ai-avatar {\n    border-radius: 6px;\n  }\n\n  .artifact-card {\n    padding: 10px;\n    margin-top: 8px;\n  }\n\n  .artifact-card-header {\n    gap: 8px;\n  }\n\n  .artifact-card-icon {\n    width: 28px;\n    height: 28px;\n  }\n\n  .artifact-card-icon i {\n    font-size: 14px;\n  }\n\n  .artifact-card-label {\n    font-size: 13px;\n  }\n\n  .artifact-card-description {\n    font-size: 12px;\n  }\n\n  .message-header {\n    font-size: 11px;\n    gap: 6px;\n  }\n\n  .message-sender {\n    font-size: 11px;\n  }\n\n  .message-time {\n    font-size: 10px;\n  }\n\n  .agent-badge {\n    font-size: 9px;\n    padding: 1px 5px;\n  }\n\n  .time-pill {\n    font-size: 9px;\n    padding: 1px 5px;\n  }\n\n  .thread-indicator {\n    padding: 4px 8px;\n    font-size: 11px;\n    margin-top: 6px;\n  }\n\n  .agent-details-panel {\n    padding: 12px;\n    margin-top: 8px;\n  }\n\n  .agent-details-grid {\n    grid-template-columns: 1fr;\n    gap: 8px;\n  }\n\n  .detail-row {\n    padding: 6px 8px;\n  }\n\n  .detail-label,\n  .detail-value {\n    font-size: 11px;\n  }\n}\n\n/* Form Response Pills */\n:host ::ng-deep .form-response-pill {\n  margin: 0 3px;\n  transition: all 0.2s ease;\n}\n\n/* Single field form - inline pill (similar to mention badges) */\n:host ::ng-deep .form-response-pill.single-field {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n  gap: 6px;\n  padding: 4px 12px;\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  border: 2px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  border-radius: 16px;\n  font-size: 13px;\n  font-weight: 600;\n  box-shadow: var(--mj-shadow-md);\n  cursor: default;\n  white-space: nowrap;\n}\n\n/* Multi-field form - card-style (block display) */\n:host ::ng-deep .form-response-pill.multi-field {\n  display: inline-block;\n  max-width: min(800px, 100%);\n  width: auto;\n  min-width: 400px;\n  margin: 8px 0;\n  vertical-align: top;\n}\n\n:host ::ng-deep .form-response-pill.single-field i {\n  font-size: 11px;\n  opacity: 0.95;\n}\n\n:host ::ng-deep .form-response-pill.single-field strong {\n  font-weight: 600;\n  margin-right: 4px;\n}\n\n/* Multi-field form - card-style pill */\n:host ::ng-deep .form-response-pill .pill-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  font-weight: 600;\n  font-size: 13px;\n  border-radius: 12px 12px 0 0;\n  border: 2px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  border-bottom: none;\n  box-shadow: var(--mj-shadow-md);\n}\n\n:host ::ng-deep .form-response-pill .pill-header i {\n  font-size: 12px;\n  opacity: 0.95;\n}\n\n:host ::ng-deep .form-response-pill .pill-fields {\n  padding: 10px 12px;\n  background: color-mix(in srgb, var(--mj-status-success) 8%, transparent);\n  border: 2px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  border-top: none;\n  border-radius: 0 0 12px 12px;\n}\n\n:host ::ng-deep .form-response-pill .pill-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px 0;\n  font-size: 13px;\n}\n\n:host ::ng-deep .form-response-pill .pill-field:not(:last-child) {\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n  padding-bottom: 12px;\n  margin-bottom: 0;\n}\n\n:host ::ng-deep .form-response-pill .field-question {\n  font-weight: 600;\n  color: var(--mj-status-success);\n  font-size: 12px;\n  line-height: 1.4;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  opacity: 0.9;\n}\n\n:host ::ng-deep .form-response-pill .field-answer {\n  color: var(--mj-text-primary);\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 1.6;\n  padding: 8px 0 8px 12px;\n  background: transparent;\n  border-left: 3px solid color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  font-style: italic;\n}\n\n\n/* Hover effect for form pills */\n:host ::ng-deep .form-response-pill.single-field:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-lg);\n}\n\n:host ::ng-deep .form-response-pill.multi-field:hover {\n  transform: translateY(-1px);\n}\n\n:host ::ng-deep .form-response-pill.multi-field:hover .pill-header {\n  box-shadow: var(--mj-shadow-lg);\n}\n\n/* Responsive adjustments for multi-field forms */\n@media (max-width: 600px) {\n  :host ::ng-deep .form-response-pill.multi-field {\n    min-width: 300px;\n  }\n}\n\n@media (max-width: 400px) {\n  :host ::ng-deep .form-response-pill.multi-field {\n    min-width: 100%;\n  }\n\n  :host ::ng-deep .form-response-pill .field-question {\n    font-size: 11px;\n  }\n\n  :host ::ng-deep .form-response-pill .field-answer {\n    font-size: 14px;\n    padding: 6px 0 6px 10px;\n  }\n}\n\n/* ==================== Message Attachments ==================== */\n\n.message-attachments {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 12px;\n  margin-bottom: 8px;\n}\n\n.attachment-item {\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\n  transition: transform 0.2s, box-shadow 0.2s;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n\n.attachment-item:hover {\n  transform: scale(1.02);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.attachment-item.image-attachment {\n  width: 200px;\n  height: 150px;\n}\n\n.attachment-thumbnail {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n.attachment-overlay {\n  position: absolute;\n  inset: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n.attachment-item:hover .attachment-overlay {\n  opacity: 1;\n}\n\n.attachment-overlay i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n/* Non-image attachment tile: horizontal strip with UPPERCASE type badge,\n   filename, and size. Artifact-typed attachments get a brand-primary tinted\n   badge to distinguish them from plain uploads. */\n.attachment-strip {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 12px 8px 8px;\n  width: 320px;\n  max-width: 100%;\n  min-height: 56px;\n  cursor: pointer;\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.attachment-strip:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.attachment-badge {\n  flex: 0 0 auto;\n  min-width: 48px;\n  height: 48px;\n  padding: 0 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  font-weight: 700;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-subtle);\n  user-select: none;\n  text-align: center;\n  line-height: 1;\n  white-space: nowrap;\n}\n\n.attachment-strip.is-artifact .attachment-badge {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.attachment-meta {\n  display: flex;\n  flex-direction: column;\n  min-width: 0; /* allow ellipsis inside flex child */\n  gap: 2px;\n}\n\n.attachment-strip .file-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.attachment-strip .file-size {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n/* Responsive attachments */\n@media (max-width: 600px) {\n  .attachment-item.image-attachment {\n    width: 150px;\n    height: 112px;\n  }\n\n  .attachment-strip {\n    width: 100%;\n  }\n}\n/* \u2500\u2500 Markdown-rendered textarea values inside submitted form pills (e.g. the approved Plan) \u2500\u2500 */\n:host ::ng-deep .form-response-pill .field-answer-markdown {\n  font-style: normal; /* the pill's default italic reads poorly on multi-line formatted content */\n  font-size: 13.5px;\n  line-height: 1.6;\n  color: var(--mj-text-primary);\n}\n:host ::ng-deep .form-response-pill .field-answer-markdown h1,\n:host ::ng-deep .form-response-pill .field-answer-markdown h2,\n:host ::ng-deep .form-response-pill .field-answer-markdown h3,\n:host ::ng-deep .form-response-pill .field-answer-markdown h4 {\n  font-size: 13.5px;\n  font-weight: 700;\n  margin: 10px 0 4px;\n  color: var(--mj-text-primary);\n}\n:host ::ng-deep .form-response-pill .field-answer-markdown p {\n  margin: 6px 0;\n}\n:host ::ng-deep .form-response-pill .field-answer-markdown ul,\n:host ::ng-deep .form-response-pill .field-answer-markdown ol {\n  margin: 6px 0;\n  padding-left: 22px;\n}\n:host ::ng-deep .form-response-pill .field-answer-markdown li {\n  margin: 3px 0;\n}\n:host ::ng-deep .form-response-pill .field-answer-markdown code {\n  font-size: 12px;\n  padding: 1px 5px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--mj-status-success) 12%, transparent);\n}\n:host ::ng-deep .form-response-pill .field-answer-markdown table {\n  border-collapse: collapse;\n  margin: 8px 0;\n}\n:host ::ng-deep .form-response-pill .field-answer-markdown th,\n:host ::ng-deep .form-response-pill .field-answer-markdown td {\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n  padding: 4px 10px;\n  font-size: 12.5px;\n}\n\n/* Fork chips: one per fork placed under the message */\n.message-fork-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-2);\n}\n.message-fork-chips > button {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  max-width: 100%;\n  min-width: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: var(--mj-text-xs);\n}\n.message-fork-chips > button:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.message-fork-chips .fork-chip-icon {\n  color: var(--mj-status-info);\n}\n.message-fork-chips > button[data-kind='Edit'] .fork-chip-icon {\n  color: var(--mj-status-warning);\n}\n.message-fork-chips > button[data-kind='Regenerate'] .fork-chip-icon {\n  color: var(--mj-brand-tertiary);\n}\n.fork-chip-avatars {\n  display: inline-flex;\n}\n.fork-chip-avatar {\n  width: 20px;\n  height: 20px;\n  margin-left: -6px;\n  border: 2px solid var(--mj-bg-surface);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 9px;\n  font-weight: 600;\n  overflow: hidden;\n}\n.fork-chip-avatar:first-child {\n  margin-left: 0;\n}\n.fork-chip-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.fork-chip-messages {\n  font-weight: 600;\n  color: var(--mj-text-link);\n}\n/* The name is the part of a chip that shrinks: a long name ends in an ellipsis inside a narrow column. */\n.fork-chip-name {\n  font-weight: 500;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.fork-chip-time {\n  color: var(--mj-text-muted);\n}\n\n/* Fork view rails: inherited rows faded on a dashed rail, the fork's own rows on a solid rail.\n   The row's children fade, not the row, so the row's fade-in animation ends at the faded state. */\n.message-item.fork-rail-inherited {\n  border-left: 2px dashed var(--mj-border-strong);\n  padding-left: var(--mj-space-4);\n}\n.message-item.fork-rail-inherited > * {\n  opacity: 0.7;\n}\n.message-item.fork-rail-own {\n  border-left: 2px solid var(--mj-brand-primary);\n  padding-left: var(--mj-space-4);\n}\n\n/* Fork marker: a full-opacity divider under the last inherited row of a fork view, outside both rails */\n.fork-marker {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-2) var(--mj-space-6);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n.fork-marker i {\n  color: var(--mj-status-info);\n}\n.fork-marker-line {\n  flex: 1;\n  height: 1px;\n  background: var(--mj-border-default);\n}\n/* The marker lines up with the row padding of narrow screens */\n@media (max-width: 768px) {\n  .fork-marker {\n    padding: var(--mj-space-2) var(--mj-space-3);\n  }\n}\n@media (max-width: 480px) {\n  .fork-marker {\n    padding: var(--mj-space-2);\n  }\n\n  /* The editor note wraps under the buttons */\n  .edit-note {\n    flex-basis: 100%;\n    margin-left: 0;\n  }\n}\n\n/* ==================== Inline Workflow Execution Card ==================== */\n.workflow-execution-card {\n  margin-top: 14px;\n  margin-bottom: 10px;\n  border-radius: 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n  overflow: hidden;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n}\n\n.workflow-execution-card.workflow-status-running {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-border-default));\n  box-shadow: 0 2px 12px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.workflow-execution-card.workflow-status-complete {\n  border-color: color-mix(in srgb, var(--mj-status-success) 35%, var(--mj-border-default));\n}\n\n.workflow-execution-card.workflow-status-failed {\n  border-color: color-mix(in srgb, var(--mj-status-error) 45%, var(--mj-border-default));\n}\n\n.workflow-card-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 16px;\n  background: color-mix(in srgb, var(--mj-bg-surface-sunken) 55%, var(--mj-bg-surface-card));\n}\n\n.workflow-card-header.is-collapsible {\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.workflow-card-header.is-collapsible:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.workflow-header-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n\n.workflow-status-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 15px;\n  flex-shrink: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.workflow-status-complete .workflow-status-icon {\n  background: color-mix(in srgb, var(--mj-status-success) 14%, transparent);\n  color: var(--mj-status-success);\n}\n\n.workflow-status-failed .workflow-status-icon {\n  background: color-mix(in srgb, var(--mj-status-error) 14%, transparent);\n  color: var(--mj-status-error);\n}\n\n.workflow-title-group {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.workflow-title-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.workflow-title {\n  font-size: 13.5px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.workflow-badge {\n  font-size: 11px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 999px;\n  letter-spacing: 0.2px;\n}\n\n.workflow-badge.badge-running {\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.workflow-badge.badge-complete {\n  background: color-mix(in srgb, var(--mj-status-success) 14%, transparent);\n  color: var(--mj-status-success);\n}\n\n.workflow-badge.badge-failed {\n  background: color-mix(in srgb, var(--mj-status-error) 14%, transparent);\n  color: var(--mj-status-error);\n}\n\n.workflow-subtitle {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11.5px;\n  color: var(--mj-text-muted);\n}\n\n.workflow-dot {\n  opacity: 0.6;\n}\n\n.workflow-header-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.workflow-duration-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 9px;\n  border-radius: 999px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  font-size: 11.5px;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: var(--mj-text-secondary);\n}\n\n.workflow-graph-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-border-subtle));\n  color: var(--mj-brand-primary);\n  font-size: 11.5px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;\n}\n\n.workflow-graph-btn:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n.workflow-collapse-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 9px;\n  border-radius: 999px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n\n.workflow-collapse-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.workflow-collapse-chevron {\n  font-size: 10px;\n  transition: transform 0.18s ease;\n}\n\n.workflow-collapse-chevron.rotated {\n  transform: rotate(180deg);\n}\n\n.workflow-progress-track {\n  height: 3px;\n  width: 100%;\n  background: var(--mj-border-subtle);\n  overflow: hidden;\n}\n\n.workflow-progress-fill {\n  height: 100%;\n  background: var(--mj-status-success);\n  transition: width 0.35s ease;\n}\n\n.workflow-progress-fill.is-running {\n  background: linear-gradient(90deg, var(--mj-brand-primary), var(--mj-status-info));\n}\n\n.workflow-status-failed .workflow-progress-fill {\n  background: var(--mj-status-error);\n}\n\n.workflow-steps-pipeline {\n  display: flex;\n  flex-direction: column;\n  padding: 10px 14px;\n}\n\n.workflow-step-item {\n  display: flex;\n  align-items: stretch;\n  gap: 12px;\n}\n\n.workflow-step-rail {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 24px;\n  flex-shrink: 0;\n}\n\n.workflow-step-node {\n  width: 22px;\n  height: 22px;\n  border-radius: 999px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10.5px;\n  font-weight: 700;\n  margin-top: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1.5px solid var(--mj-border-default);\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.step-status-in-progress .workflow-step-node {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.step-status-complete .workflow-step-node {\n  background: color-mix(in srgb, var(--mj-status-success) 16%, var(--mj-bg-surface));\n  border-color: var(--mj-status-success);\n  color: var(--mj-status-success);\n}\n\n.step-status-failed .workflow-step-node {\n  background: color-mix(in srgb, var(--mj-status-error) 16%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.step-status-skipped .workflow-step-node {\n  background: var(--mj-bg-surface-sunken);\n  border-style: dashed;\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-muted);\n}\n\n.step-status-skipped .workflow-step-name {\n  color: var(--mj-text-muted);\n}\n\n.workflow-skipped-count {\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.workflow-step-connector {\n  flex: 1;\n  width: 2px;\n  min-height: 12px;\n  background: var(--mj-border-default);\n  margin: 2px 0;\n}\n\n.workflow-step-connector.is-complete {\n  background: color-mix(in srgb, var(--mj-status-success) 55%, var(--mj-border-default));\n}\n\n.workflow-step-content {\n  flex: 1;\n  min-width: 0;\n  padding: 6px 10px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.workflow-step-content:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.workflow-step-main-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.workflow-step-identity {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  flex-wrap: wrap;\n}\n\n.workflow-step-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.workflow-step-agent-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 7px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 500;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n\n.workflow-step-meta {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.workflow-step-duration {\n  font-size: 11.5px;\n  font-variant-numeric: tabular-nums;\n  color: var(--mj-text-muted);\n}\n\n.workflow-step-duration.is-skipped {\n  padding: 1px 7px;\n  border-radius: 999px;\n  font-size: 10.5px;\n  font-weight: 600;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px dashed var(--mj-border-strong);\n  color: var(--mj-text-muted);\n}\n\n.workflow-step-run-btn {\n  border: none;\n  background: transparent;\n  color: var(--mj-text-muted);\n  padding: 2px 5px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 11px;\n  transition: color 0.15s, background 0.15s;\n}\n\n.workflow-step-run-btn:hover {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.workflow-step-chevron {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  transition: transform 0.2s ease;\n}\n\n.workflow-step-chevron.rotated {\n  transform: rotate(180deg);\n}\n\n.workflow-step-details {\n  margin-top: 6px;\n  padding: 8px 10px;\n  border-radius: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border-left: 2px solid var(--mj-brand-primary);\n  font-size: 12px;\n  line-height: 1.5;\n  color: var(--mj-text-secondary);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* ==================== Workflow Continuation Context Banner ==================== */\n\n.workflow-continuation-banner {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  width: 100%;\n  max-width: 100%;\n  margin-bottom: 10px;\n  padding: 6px 12px;\n  border-radius: 8px;\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 26%, var(--mj-border-default));\n  background: color-mix(in srgb, var(--mj-brand-primary) 7%, var(--mj-bg-surface-sunken));\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n  line-height: 1.35;\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;\n}\n\n.workflow-continuation-banner:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 13%, var(--mj-bg-surface-sunken));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-border-default));\n}\n\n.continuation-banner-left {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.continuation-banner-icon {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.continuation-banner-label {\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.continuation-banner-sep {\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.continuation-banner-name {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.continuation-banner-jump {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 11.5px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.message-item.workflow-origin-highlight {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n  border-radius: 12px;\n  transition: outline-color 0.3s ease;\n}\n\n\n", "/**\n * Custom Agent Icons for MemberJunction\n *\n * This file contains custom icon definitions for agents that need unique branding\n * beyond Font Awesome icons. Icons can be CSS-based (emoji, Unicode, SVG data URIs)\n * or reference external image files.\n *\n * USAGE IN AGENT METADATA:\n * \"IconClass\": \"mj-icon-skip\"  (references .mj-icon-skip class below)\n *\n * EXTENSIBILITY FOR 3RD PARTY DEVELOPERS:\n * Third-party developers have TWO options:\n *\n * 1. CSS CLASS APPROACH (Recommended for developers):\n *    - Add your own global CSS with custom icon classes\n *    - Reference your class in agent metadata: \"IconClass\": \"your-custom-class\"\n *    - Works with any CSS available to the application\n *    - Example: If you have a global stylesheet with .acme-icon-analyzer { ... }\n *      then use \"IconClass\": \"acme-icon-analyzer\"\n *\n * 2. LOGO URL APPROACH (Recommended for end users):\n *    - Use the LogoURL field in agent metadata\n *    - Provide a URL or data URI: \"LogoURL\": \"https://example.com/logo.png\"\n *    - Supports: HTTP URLs, data URIs (data:image/png;base64,...)\n *    - LogoURL takes precedence over IconClass in the UI\n *    - Perfect for non-technical users or external/uploaded images\n *\n * BEST PRACTICES:\n * - Use mj-icon-* prefix for MJ core icons\n * - Use your own prefix for 3rd party icons (e.g., acme-icon-*)\n * - Keep icons simple and recognizable at 16-36px sizes\n * - Test in both light and dark themes\n * - Prefer CSS classes over LogoURL for version-controlled icons\n */\n\n/* ============================================\n   BASE STYLES FOR CUSTOM ICONS\n   ============================================ */\n\n/* Base styling for all custom MJ icons */\n[class^=\"mj-icon-\"],\n[class*=\" mj-icon-\"] {\n  font-style: normal;\n  font-variant: normal;\n  text-rendering: auto;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  font-size: inherit;\n  line-height: 1;\n}\n\n/* ============================================\n   MJ CORE ICONS\n   ============================================ */\n\n/**\n * Skip Brain Icon - Analytics/Intelligence Agent\n * Official Skip logo from Skip SaaS branding\n */\n.mj-icon-skip {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  /* Official Skip logo SVG */\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n/**\n * Alternative Skip Icon - Lightning Bolt\n * Simple emoji-based icon for quick setup\n */\n.mj-icon-skip-lightning::before {\n  content: \"\u26A1\";\n  color: var(--mj-brand-primary);\n  font-size: 1.1em;\n}\n\n/**\n * Skip Icon - Brain Emoji\n * Fallback emoji option\n */\n.mj-icon-skip-brain::before {\n  content: \"\uD83E\uDDE0\";\n  font-size: 1.2em;\n}\n\n/**\n * Betty Icon - AI Assistant\n * Official Betty logo (face icon only)\n */\n.mj-icon-betty {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  /* Official Betty face icon SVG */\n  background-image: url(\"data:image/svg+xml,%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Cpath d='M64.96,60.23h75.12c10.58,0,20.24,4.31,27.2,11.32,7.01,6.95,11.32,16.61,11.32,27.19s-4.31,20.24-11.32,27.19c-6.95,7.02-16.61,11.32-27.2,11.32h-75.12c-10.58,0-20.24-4.31-27.19-11.32-2.65-2.64-4.92-5.6-6.71-8.92-.24,0-.49.06-.74.06-2.46,0-4.67-1.05-6.34-2.65-1.6-1.66-2.58-3.87-2.58-6.34v-18.7c0-2.46.98-4.74,2.58-6.34,1.66-1.66,3.87-2.65,6.34-2.65.25,0,.49,0,.74.06,1.79-3.32,4.06-6.34,6.71-8.92,6.95-7.01,16.61-11.32,27.19-11.32' fill='%233d1252'/%3E%3Cpath d='M132.33,68.36h0c0,1.72-.74,3.32-1.91,4.49-1.11,1.17-2.71,1.84-4.49,1.84h-13.29c-1.78,0-3.32-.68-4.49-1.84-1.17-1.17-1.91-2.77-1.91-4.49h-12.92c-8.37,0-15.94,3.44-21.47,8.92-5.47,5.54-8.92,13.1-8.92,21.47v1.17l.06.37v.37l.06.43v.37l.06.37v.37l.06.37.06.43.06.37.06.37.06.37.06.37c0,.12.06.25.06.37l.06.37.12.37.06.37.12.37.06.37.12.37.12.31.06.37.12.37.12.37.12.31.12.37.12.37.19.31.12.37.12.37.12.31.18.37.12.31.19.31.18.37.12.31.18.31.19.37.18.31.18.31.19.31.18.31c.12.24.25.43.37.68l.19.25.24.31.19.31c.43.62.86,1.23,1.35,1.79l.18.24c.49.62.99,1.17,1.48,1.66.19.19.31.37.49.56.19.12.37.31.56.49.49.49,1.04.98,1.6,1.47l.31.19c.56.49,1.17.92,1.79,1.35.18.12.37.25.55.37l.31.25.31.18.31.19.37.18.31.18.31.19.31.18.31.19.37.12.31.19.31.18c.12.06.24.12.37.12l.31.19.37.12.31.19.37.12.31.12.37.19.37.12.31.12.37.12.37.12.37.06c.24.12.43.18.68.25l.37.12.37.06.37.12c.12,0,.25.06.37.06l.37.06.37.12.37.06.37.06.37.06.37.06.37.06.37.06.43.06h.37l.37.06h.37l.37.06h.8l.37.06h47.56c8.37,0,15.94-3.44,21.47-8.92,5.48-5.54,8.92-13.1,8.92-21.47s-3.44-15.94-8.92-21.47c-5.54-5.48-13.1-8.92-21.47-8.92h-7.75Z' fill='%23fff'/%3E%3Cpolygon points='54.93 12.74 85.57 55.25 106.12 55.25 106.12 34.89 106.12 34.7 105.75 34.7 54.93 12.74' fill='%233aba91'/%3E%3Cpolygon points='111.1 55.25 124.76 55.25 145 27.07 111.35 41.59 111.1 41.59 111.1 41.72 111.1 55.25' fill='%233aba91'/%3E%3Cpath d='M94.55,82.81c3.75,0,6.83,3.81,7.57,8.92.06.74-.31,1.35-.98,1.66-.61.31-1.35.18-1.84-.37-1.29-1.48-2.96-2.34-4.74-2.34s-3.38.86-4.67,2.34c-.49.55-1.23.68-1.91.37-.68-.31-1.05-.92-.92-1.66.68-5.11,3.81-8.92,7.51-8.92' fill='%233d1252'/%3E%3Cpath d='M132.08,115.24c-.31,1.05-.86,2.03-1.66,2.77-1.11,1.17-2.71,1.84-4.49,1.84h-13.29c-1.79,0-3.32-.68-4.49-1.84-.8-.74-1.36-1.72-1.66-2.77-.19-.68.06-1.41.68-1.84.56-.43,1.35-.49,1.97-.06.98.68,2.21,1.05,3.51,1.05h13.29c1.29,0,2.52-.37,3.51-1.05.61-.43,1.41-.37,1.97.06.62.43.86,1.17.68,1.84' fill='%233d1252'/%3E%3Cpath d='M144.02,82.81c3.69,0,6.83,3.81,7.51,8.92.12.74-.24,1.35-.92,1.66-.68.31-1.41.18-1.91-.37-1.29-1.48-2.89-2.34-4.67-2.34s-3.44.86-4.74,2.34c-.49.55-1.23.68-1.84.37-.68-.31-1.05-.92-.98-1.66.74-5.11,3.81-8.92,7.57-8.92' fill='%233d1252'/%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n/**\n * Izzy Icon - AI Assistant\n * Official Izzy logo (mark only)\n */\n.mj-icon-izzy {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  /* Official Izzy mark icon SVG */\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 204 180'%3E%3Cpath d='M0 0 C3.61144774 3.08477828 4.84942137 4.90830493 5.5 9.625 C5 13 5 13 3.5 14.9375 C1.74432121 17.35155834 1.83578869 18.21944114 1.90625 21.12890625 C1.9371875 22.40636719 1.968125 23.68382813 2 25 C3.18335937 24.72285156 4.36671875 24.44570313 5.5859375 24.16015625 C22.44010416 20.26839867 22.44010416 20.26839867 30 20 C31.80210938 19.92265625 31.80210938 19.92265625 33.640625 19.84375 C47.49356199 19.44904163 61.73614427 20.86627802 75 25 C75.53596907 19.64244551 75.53596907 19.64244551 73.5 15 C71.5549761 12.4066348 71.45048389 10.16629658 71.59375 6.97265625 C72.33633815 3.36681955 74.01253991 1.99164006 77 0 C79.80907914 -0.63997166 82.18961327 -0.63020793 85 0 C87.8100346 1.79363911 89.50940468 3.01880935 91 6 C90.984375 8.05859375 90.984375 8.05859375 90.75 10.4375 C90.68296875 11.21996094 90.6159375 12.00242187 90.546875 12.80859375 C90 15 90 15 88.49609375 16.3984375 C86.25734576 18.79500846 86.4852344 20.97464008 86.3125 24.1875 C86.21388672 25.81751953 86.21388672 25.81751953 86.11328125 27.48046875 C86.07589844 28.31191406 86.03851563 29.14335937 86 30 C86.67675781 30.0825 87.35351562 30.165 88.05078125 30.25 C91.82333306 31.20937741 94.89353787 32.99425194 98.1875 35 C99.18052124 35.60448975 99.18052124 35.60448975 100.19360352 36.22119141 C111.98050012 43.58460075 121.17745776 53.2687532 127 66 C127 66.66 127 67.32 127 68 C127.721875 68.0825 128.44375 68.165 129.1875 68.25 C133.81406141 69.48374971 136.2179022 71.66516963 138.625 75.7734375 C140.97801199 81.55147269 140.43210927 87.87027126 140.375 94 C140.38660156 95.24523437 140.39820313 96.49046875 140.41015625 97.7734375 C140.3675701 111.08870765 140.3675701 111.08870765 135.5 116.7421875 C131.62323281 119.66995439 128.8523137 121.14337998 124 121.125 C122.9790625 121.12886719 122.9790625 121.12886719 121.9375 121.1328125 C120 121 120 121 117 120 C116.74347656 120.65226562 116.48695313 121.30453125 116.22265625 121.9765625 C115.83980469 122.85054688 115.45695313 123.72453125 115.0625 124.625 C114.70285156 125.48351562 114.34320313 126.34203125 113.97265625 127.2265625 C108.57908063 134.80960941 99.56813916 137.59212379 91.0625 140.375 C90.02287109 140.72949219 88.98324219 141.08398438 87.91210938 141.44921875 C80.34347852 144 80.34347852 144 78 144 C78.02094727 144.65484375 78.04189453 145.3096875 78.06347656 145.984375 C78.14730383 148.98942328 78.19886895 151.99422464 78.25 155 C78.28351563 156.02996094 78.31703125 157.05992187 78.3515625 158.12109375 C78.43361416 164.56214867 77.93369275 169.71304442 74 175 C68.75523423 179.17440541 64.68195675 180.53237245 58 180 C55.12653443 178.963898 52.49379495 177.58020045 49.8125 176.125 C49.11447266 175.76019531 48.41644531 175.39539063 47.69726562 175.01953125 C46.39868999 174.33997216 45.10309803 173.65465367 43.81176758 172.96142578 C43.21388428 172.64415527 42.61600098 172.32688477 42 172 C41.34290039 171.59402588 40.68580078 171.18805176 40.00878906 170.76977539 C38.03672401 169.77639533 38.03672401 169.77639533 36.12475586 170.58325195 C35.49448486 170.96441162 34.86421387 171.34557129 34.21484375 171.73828125 C33.17166992 172.35026367 33.17166992 172.35026367 32.10742188 172.97460938 C31.39134766 173.41611328 30.67527344 173.85761719 29.9375 174.3125 C28.51029236 175.1647359 27.08194984 176.01507485 25.65234375 176.86328125 C25.02320068 177.24782471 24.39405762 177.63236816 23.74584961 178.02856445 C19.79572932 180.2265128 16.44037501 180.296025 12 180 C6.82155197 178.33236419 3.95074467 176.59004726 1 172 C-0.72417326 168.34258111 -1.2403609 165.51230089 -1.1953125 161.48046875 C-1.18886719 160.45888672 -1.18242188 159.43730469 -1.17578125 158.38476562 C-1.15902344 157.32966797 -1.14226563 156.27457031 -1.125 155.1875 C-1.11597656 154.11306641 -1.10695312 153.03863281 -1.09765625 151.93164062 C-1.07415306 149.28753146 -1.04129575 146.64388128 -1 144 C-1.63196289 143.81171631 -2.26392578 143.62343262 -2.91503906 143.42944336 C-8.20708475 141.84808949 -13.49207901 140.2541307 -18.75 138.5625 C-19.98234375 138.17191406 -21.2146875 137.78132812 -22.484375 137.37890625 C-29.06200008 134.79901552 -34.12925122 130.90130551 -38 125 C-38.875 121.5625 -38.875 121.5625 -39 119 C-39.495 119.33 -39.99 119.66 -40.5 120 C-45.24354984 121.89741993 -49.49426304 121.53143657 -54.1875 119.875 C-58.42051121 117.05299253 -61.35909664 113.92271008 -63 109 C-63.22709306 104.92471184 -63.22828659 100.8492307 -63.24023438 96.76806641 C-63.2498982 94.77103695 -63.28108516 92.77414948 -63.3125 90.77734375 C-63.36188158 78.59243786 -63.36188158 78.59243786 -60 73 C-57.7509823 70.86631654 -55.88785241 69.35340008 -53.0078125 68.20703125 C-50.3010212 66.57979679 -49.65488803 64.83796148 -48.3125 62 C-45.06106922 55.7428385 -40.95735135 50.97447519 -36 46 C-35.40832031 45.38511719 -34.81664063 44.77023438 -34.20703125 44.13671875 C-28.97373562 39.11136864 -17.47215548 30 -10 30 C-10.08733973 27.91589342 -10.19552278 25.83265331 -10.3125 23.75 C-10.37050781 22.58984375 -10.42851563 21.4296875 -10.48828125 20.234375 C-11.02905532 16.81635262 -11.84853545 15.59874271 -14 13 C-14.54046356 8.75350057 -14.48376179 6.74176808 -12.125 3.125 C-8.57275398 -0.42724602 -4.8825369 -0.970906 0 0 Z M5 35 C4.30245605 35.21962402 3.60491211 35.43924805 2.88623047 35.66552734 C-14.1501062 41.15773444 -29.02751477 50.81254544 -39 66 C-39.33 66.99 -39.66 67.98 -40 69 C-37.525 70.98 -37.525 70.98 -35 73 C-34.52691406 72.29875 -34.05382812 71.5975 -33.56640625 70.875 C-21.08320269 52.96537462 -2.17172019 42.38052109 19.26171875 38.5078125 C46.97805996 34.9959591 75.10426623 38.71529466 97.73046875 56.09765625 C103.53827054 61.07953766 107.9264808 66.53902088 112 73 C113.32 72.01 114.64 71.02 116 70 C115.01713954 61.60788376 107.55262518 55.04847712 101.375 49.8125 C82.80696113 35.82916208 61.35998978 30.59265576 38.375 30.625 C37.71836365 30.62554382 37.06172729 30.62608765 36.38519287 30.62664795 C25.42439402 30.66823796 15.42390121 31.62072499 5 35 Z' fill='%234E3B78' transform='translate(63,0)'/%3E%3Cpath d='M0 0 C5.27957047 5.78547525 9.31612861 13.25448014 10 21.125 C9.69743213 24.83293961 8.77676366 26.8914086 6.1875 29.5625 C-2.04152489 35.76003038 -13.60917874 39.6270706 -23.875 38.8125 C-24.535 38.1525 -25.195 37.4925 -25.875 36.8125 C-28.97847254 36.48234335 -31.03281176 36.30718706 -33.75 37.9375 C-35.40354531 40.69340884 -35.26865568 42.66325452 -34.875 45.8125 C-33.95833333 47.89583333 -33.95833333 47.89583333 -31.875 48.8125 C-28.29166667 48.89583333 -28.29166667 48.89583333 -24.875 47.8125 C-24.57086182 47.16466553 -24.26672363 46.51683105 -23.95336914 45.84936523 C-22.875 43.8125 -22.875 43.8125 -20.77124023 42.88696289 C-19.91731689 42.6883667 -19.06339355 42.48977051 -18.18359375 42.28515625 C-17.23806641 42.04990234 -16.29253906 41.81464844 -15.31835938 41.57226562 C-14.32642578 41.34216797 -13.33449219 41.11207031 -12.3125 40.875 C-4.77934417 39.10870895 1.54823541 36.95205932 8.125 32.8125 C7.81647145 40.06292099 4.56245219 45.32546918 -0.5 50.4609375 C-5.29811284 54.61130511 -8.83216751 54.86916719 -15 55 C-21.13677833 55.26569953 -25.04589225 56.51893716 -29.890625 60.31640625 C-39.17633501 67.31724667 -52.82450605 66.52799961 -63.875 65.8125 C-71.37432145 64.60538489 -79.4496824 61.2378176 -84.875 55.8125 C-86.81199027 55.70419517 -88.75076074 55.60687514 -90.69067383 55.58691406 C-97.68300211 55.51299157 -103.12007731 55.4392364 -108.44140625 50.40234375 C-108.91449219 49.87769531 -109.38757813 49.35304688 -109.875 48.8125 C-110.6175 48.090625 -111.36 47.36875 -112.125 46.625 C-118.35765562 36.60823203 -119.69570866 25.34707186 -117.25 13.8828125 C-113.47065738 3.0509466 -104.76645407 -4.0120534 -94.875 -9.1875 C-91.26850975 -10.75400624 -87.62602625 -12.0153043 -83.875 -13.1875 C-83.029375 -13.47496094 -82.18375 -13.76242188 -81.3125 -14.05859375 C-56.0861494 -22.29657387 -20.04377266 -18.06142152 0 0 Z' fill='%23FDFDFD' transform='translate(155.875,64.1875)'/%3E%3Cpath d='M0 0 C5.24479788 1.58079188 9.51172656 4.60408712 14.06640625 7.58984375 C18.37837094 10.28462973 18.37837094 10.28462973 23.30859375 11.1328125 C28.49696048 9.20971132 33.08639658 6.29555589 37.79882812 3.42578125 C43.66838131 -0.00837477 43.66838131 -0.00837477 47.27734375 0.078125 C49.34375 1.0078125 49.34375 1.0078125 51.34375 3.0078125 C51.82984303 7.30136192 51.71414913 11.62739332 51.71875 15.9453125 C51.74324219 17.15123047 51.76773438 18.35714844 51.79296875 19.59960938 C51.79876953 21.33114258 51.79876953 21.33114258 51.8046875 23.09765625 C51.81290527 24.15847412 51.82112305 25.21929199 51.82958984 26.31225586 C51.34375 29.0078125 51.34375 29.0078125 49.48461914 30.87670898 C46.29658529 32.56106989 44.78123809 32.062357 41.34375 31.0078125 C37.60135447 29.03986817 34.07891261 26.72386924 30.53320312 24.42578125 C26.44214688 21.80182316 26.44214688 21.80182316 21.77734375 20.921875 C17.60401055 22.78413283 13.85973006 25.2663764 10.046875 27.76953125 C5.85335687 30.41401513 2.44659272 31.9581498 -2.65625 32.0078125 C-4.33203125 30.87695312 -4.33203125 30.87695312 -5.65625 29.0078125 C-6.04443359 26.328125 -6.04443359 26.328125 -6.0546875 23.1328125 C-6.05855469 21.98296875 -6.06242187 20.833125 -6.06640625 19.6484375 C-6.05480469 18.44703125 -6.04320313 17.245625 -6.03125 16.0078125 C-6.04285156 14.80640625 -6.05445312 13.605 -6.06640625 12.3671875 C-6.06253906 11.21734375 -6.05867188 10.0675 -6.0546875 8.8828125 C-6.05130371 7.82835937 -6.04791992 6.77390625 -6.04443359 5.6875 C-5.65625 3.0078125 -5.65625 3.0078125 -4.29736328 1.14111328 C-2.65625 0.0078125 -2.65625 0.0078125 0 0 Z' fill='%23FCFCFD' transform='translate(78.65625,136.9921875)'/%3E%3Cpath d='M0 0 C2.5 0.625 2.5 0.625 4.8125 2.625 C6.96830116 6.4575354 7.24792603 9.32007692 6.5 13.625 C5.34367254 15.98793002 4.35016245 17.77483755 2.5 19.625 C0.1875 20 0.1875 20 -2.5 19.625 C-5.06638215 17.47478793 -6.29103188 15.79226637 -6.88671875 12.46484375 C-7.08084032 8.45522921 -6.77549931 6.12498023 -4.8125 2.5625 C-2.5 0.625 -2.5 0.625 0 0 Z' fill='%2353417C' transform='translate(138.5,67.375)'/%3E%3Cpath d='M0 0 C2.5 0.6875 2.5 0.6875 4.8125 2.625 C7.08407605 6.74748987 7.32547179 10.07653131 6.5 14.6875 C4.8125 17.75 4.8125 17.75 2.5 19.6875 C-0.0625 20.25 -0.0625 20.25 -2.5 19.6875 C-5.30401904 17.38419865 -5.84979387 14.76309142 -6.4375 11.3125 C-6.72853275 7.71913649 -6.44645777 6.57011897 -4.875 3.125 C-2.5 0.6875 -2.5 0.6875 0 0 Z' fill='%23523F7B' transform='translate(64.5,67.3125)'/%3E%3Cpath d='M0 0 C8.91 0 17.82 0 27 0 C24.81183076 5.47042311 24.169236 6.55141452 19 9 C14.08609728 9.94526984 9.88605617 10.13992406 5.51171875 7.49609375 C3.4733513 5.76185217 1.65854906 4.10051199 0 2 C0 1.34 0 0.68 0 0 Z' fill='%23574680' transform='translate(88,95)'/%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n/* ============================================\n   EXAMPLE CUSTOM ICONS FOR OTHER AGENTS\n   ============================================ */\n\n/**\n * Data Analysis Icon - Chart emoji\n */\n.mj-icon-data-analyst::before {\n  content: \"\uD83D\uDCCA\";\n  font-size: 1.1em;\n}\n\n/**\n * API/Integration Icon - Plug emoji\n */\n.mj-icon-api::before {\n  content: \"\uD83D\uDD0C\";\n  font-size: 1.1em;\n}\n\n/**\n * Processing/Workflow Icon - Gear emoji with animation\n */\n.mj-icon-processing::before {\n  content: \"\u2699\uFE0F\";\n  display: inline-block;\n  animation: rotate-icon 2s linear infinite;\n}\n\n@keyframes rotate-icon {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/**\n * Text/Letter-based Icon\n * Simple monogram icon\n */\n.mj-icon-monogram-s::before {\n  content: \"S\";\n  font-weight: 800;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 1.1em;\n  color: var(--mj-brand-primary);\n}\n\n/* ============================================\n   TEMPLATE FOR NEW ICONS\n   ============================================ */\n\n/*\n// EMOJI-BASED ICON (Simplest)\n.mj-icon-my-agent::before {\n  content: \"\uD83C\uDFAF\";  // Use any emoji\n  font-size: 1.2em;\n}\n\n// UNICODE SYMBOL ICON\n.mj-icon-my-agent::before {\n  content: \"\\2022\";  // Unicode character\n  font-size: 1.2em;\n  color: #667eea;\n}\n\n// TEXT/LETTER ICON\n.mj-icon-my-agent::before {\n  content: \"MA\";  // Initials/text\n  font-weight: 800;\n  font-size: 0.9em;\n  color: #667eea;\n}\n\n// SVG DATA URI ICON (Most Control)\n.mj-icon-my-agent {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-image: url('data:image/svg+xml;utf8,<svg>...</svg>');\n  vertical-align: middle;\n}\n\n// EXTERNAL IMAGE FILE (For existing assets)\n.mj-icon-my-agent {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-image: url('/assets/icons/my-agent.svg');\n  vertical-align: middle;\n}\n\n// GRADIENT TEXT ICON\n.mj-icon-my-agent::before {\n  content: \"\u26A1\";\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n*/\n\n/* ============================================\n   3RD PARTY EXAMPLES\n   These would typically be in EXTERNAL CSS files\n   ============================================ */\n\n/*\n// Example: Acme Corp custom agent icons\n// This would be in acme-corp-styles.css loaded by the application\n\n.acme-icon-analyzer {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-image: url('https://acme.com/icons/analyzer.svg');\n}\n\n.acme-icon-reporter::before {\n  content: \"A\";\n  font-weight: 800;\n  color: #FF6B35;\n}\n*/\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.MentionParserService }, { type: i2.UICommandHandlerService }, { type: i3.ConversationAgentService }, { type: i4.MarkdownService }], { message: [{
             type: Input
         }], Conversation: [{
@@ -3597,6 +4690,14 @@ export class MessageItemComponent extends BaseAngularComponent {
             type: Output
         }], StopRequested: [{
             type: Output
+        }], TaskGraphPanelRequested: [{
+            type: Output
+        }], taskGraphPanelRequested: [{
+            type: Output
+        }], ScrollToMessageRequested: [{
+            type: Output
+        }], scrollToMessageRequested: [{
+            type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageItemComponent, { className: "MessageItemComponent", filePath: "src/lib/components/message/message-item.component.ts", lineNumber: 138 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageItemComponent, { className: "MessageItemComponent", filePath: "src/lib/components/message/message-item.component.ts", lineNumber: 141 }); })();
 //# sourceMappingURL=message-item.component.js.map