@memberjunction/ng-conversations 5.49.0 → 5.50.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/README.md +64 -3
  2. package/dist/lib/components/collection/collections-full-view.component.d.ts +10 -0
  3. package/dist/lib/components/collection/collections-full-view.component.d.ts.map +1 -1
  4. package/dist/lib/components/collection/collections-full-view.component.js +74 -14
  5. package/dist/lib/components/collection/collections-full-view.component.js.map +1 -1
  6. package/dist/lib/components/conversation/conversation-chat-area.component.d.ts +31 -5
  7. package/dist/lib/components/conversation/conversation-chat-area.component.d.ts.map +1 -1
  8. package/dist/lib/components/conversation/conversation-chat-area.component.js +169 -101
  9. package/dist/lib/components/conversation/conversation-chat-area.component.js.map +1 -1
  10. package/dist/lib/components/conversation/conversation-empty-state.component.d.ts +5 -1
  11. package/dist/lib/components/conversation/conversation-empty-state.component.d.ts.map +1 -1
  12. package/dist/lib/components/conversation/conversation-empty-state.component.js +13 -3
  13. package/dist/lib/components/conversation/conversation-empty-state.component.js.map +1 -1
  14. package/dist/lib/components/conversation/conversation-list.component.d.ts +16 -1
  15. package/dist/lib/components/conversation/conversation-list.component.d.ts.map +1 -1
  16. package/dist/lib/components/conversation/conversation-list.component.js +439 -351
  17. package/dist/lib/components/conversation/conversation-list.component.js.map +1 -1
  18. package/dist/lib/components/export/export-modal.component.d.ts +25 -3
  19. package/dist/lib/components/export/export-modal.component.d.ts.map +1 -1
  20. package/dist/lib/components/export/export-modal.component.js +172 -34
  21. package/dist/lib/components/export/export-modal.component.js.map +1 -1
  22. package/dist/lib/components/message/message-input.component.d.ts +4 -1
  23. package/dist/lib/components/message/message-input.component.d.ts.map +1 -1
  24. package/dist/lib/components/message/message-input.component.js +15 -3
  25. package/dist/lib/components/message/message-input.component.js.map +1 -1
  26. package/dist/lib/components/message/message-item.component.d.ts +46 -1
  27. package/dist/lib/components/message/message-item.component.d.ts.map +1 -1
  28. package/dist/lib/components/message/message-item.component.js +295 -201
  29. package/dist/lib/components/message/message-item.component.js.map +1 -1
  30. package/dist/lib/components/message/message-list.component.d.ts +19 -1
  31. package/dist/lib/components/message/message-list.component.d.ts.map +1 -1
  32. package/dist/lib/components/message/message-list.component.js +55 -1
  33. package/dist/lib/components/message/message-list.component.js.map +1 -1
  34. package/dist/lib/components/sidebar/conversation-sidebar.component.d.ts +14 -1
  35. package/dist/lib/components/sidebar/conversation-sidebar.component.d.ts.map +1 -1
  36. package/dist/lib/components/sidebar/conversation-sidebar.component.js +38 -5
  37. package/dist/lib/components/sidebar/conversation-sidebar.component.js.map +1 -1
  38. package/dist/lib/components/slots/slot-interfaces.d.ts +23 -1
  39. package/dist/lib/components/slots/slot-interfaces.d.ts.map +1 -1
  40. package/dist/lib/components/slots/slot-interfaces.js.map +1 -1
  41. package/dist/lib/directives/chat-slot.directive.d.ts +10 -2
  42. package/dist/lib/directives/chat-slot.directive.d.ts.map +1 -1
  43. package/dist/lib/directives/chat-slot.directive.js.map +1 -1
  44. package/dist/lib/models/lazy-artifact-info.d.ts +8 -7
  45. package/dist/lib/models/lazy-artifact-info.d.ts.map +1 -1
  46. package/dist/lib/models/lazy-artifact-info.js +12 -11
  47. package/dist/lib/models/lazy-artifact-info.js.map +1 -1
  48. package/dist/lib/services/export.service.d.ts +149 -0
  49. package/dist/lib/services/export.service.d.ts.map +1 -1
  50. package/dist/lib/services/export.service.js +270 -36
  51. package/dist/lib/services/export.service.js.map +1 -1
  52. package/package.json +29 -29
@@ -25,7 +25,7 @@ const _c0 = (a0, a1) => ({ $implicit: a0, message: a1 });
25
25
  const _forTrack0 = ($index, $item) => $item.artifact.ID;
26
26
  const _forTrack1 = ($index, $item) => $item.id;
27
27
  function MessageItemComponent_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
28
- i0.ɵɵelement(0, "img", 20);
28
+ i0.ɵɵelement(0, "img", 19);
29
29
  } if (rf & 2) {
30
30
  const ctx_r0 = i0.ɵɵnextContext(2);
31
31
  i0.ɵɵproperty("src", ctx_r0.userAvatarUrl, i0.ɵɵsanitizeUrl);
@@ -37,24 +37,39 @@ function MessageItemComponent_Conditional_3_Conditional_1_Template(rf, ctx) { if
37
37
  i0.ɵɵclassMap(ctx_r0.userAvatarIconClass);
38
38
  } }
39
39
  function MessageItemComponent_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
40
- i0.ɵɵelement(0, "i", 22);
40
+ i0.ɵɵelement(0, "i", 21);
41
41
  } }
42
42
  function MessageItemComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
43
- i0.ɵɵconditionalCreate(0, MessageItemComponent_Conditional_3_Conditional_0_Template, 1, 1, "img", 20)(1, MessageItemComponent_Conditional_3_Conditional_1_Template, 1, 2, "i", 21)(2, MessageItemComponent_Conditional_3_Conditional_2_Template, 1, 0, "i", 22);
43
+ i0.ɵɵconditionalCreate(0, MessageItemComponent_Conditional_3_Conditional_0_Template, 1, 1, "img", 19)(1, MessageItemComponent_Conditional_3_Conditional_1_Template, 1, 2, "i", 20)(2, MessageItemComponent_Conditional_3_Conditional_2_Template, 1, 0, "i", 21);
44
44
  } if (rf & 2) {
45
45
  const ctx_r0 = i0.ɵɵnextContext();
46
46
  i0.ɵɵconditional(ctx_r0.userAvatarUrl ? 0 : ctx_r0.userAvatarIconClass ? 1 : 2);
47
47
  } }
48
+ function MessageItemComponent_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
49
+ const _r2 = i0.ɵɵgetCurrentView();
50
+ i0.ɵɵelementStart(0, "img", 24);
51
+ i0.ɵɵlistener("error", function MessageItemComponent_Conditional_4_Conditional_0_Template_img_error_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.assistantAvatarFailed = true); });
52
+ i0.ɵɵelementEnd();
53
+ } if (rf & 2) {
54
+ const ctx_r0 = i0.ɵɵnextContext(2);
55
+ i0.ɵɵproperty("src", ctx_r0.effectiveAssistantAvatarUrl, i0.ɵɵsanitizeUrl);
56
+ } }
57
+ function MessageItemComponent_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
58
+ i0.ɵɵelement(0, "i", 23);
59
+ } if (rf & 2) {
60
+ const ctx_r0 = i0.ɵɵnextContext(2);
61
+ i0.ɵɵproperty("ngClass", (ctx_r0.aiAgentInfo == null ? null : ctx_r0.aiAgentInfo.iconClass) || "fa-robot");
62
+ } }
48
63
  function MessageItemComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
49
- i0.ɵɵelement(0, "i", 3);
64
+ i0.ɵɵconditionalCreate(0, MessageItemComponent_Conditional_4_Conditional_0_Template, 1, 1, "img", 22)(1, MessageItemComponent_Conditional_4_Conditional_1_Template, 1, 1, "i", 23);
50
65
  } if (rf & 2) {
51
66
  const ctx_r0 = i0.ɵɵnextContext();
52
- i0.ɵɵproperty("ngClass", (ctx_r0.aiAgentInfo == null ? null : ctx_r0.aiAgentInfo.iconClass) || "fa-robot");
67
+ i0.ɵɵconditional(ctx_r0.effectiveAssistantAvatarUrl ? 0 : 1);
53
68
  } }
54
69
  function MessageItemComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
55
- i0.ɵɵelementStart(0, "span", 23);
56
- i0.ɵɵelement(1, "i", 3);
57
- i0.ɵɵelementStart(2, "span", 24);
70
+ i0.ɵɵelementStart(0, "span", 25);
71
+ i0.ɵɵelement(1, "i", 23);
72
+ i0.ɵɵelementStart(2, "span", 26);
58
73
  i0.ɵɵtext(3);
59
74
  i0.ɵɵelementEnd()();
60
75
  } if (rf & 2) {
@@ -66,15 +81,15 @@ function MessageItemComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
66
81
  i0.ɵɵtextInterpolate(ctx_r0.getStatusText());
67
82
  } }
68
83
  function MessageItemComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
69
- const _r2 = i0.ɵɵgetCurrentView();
70
- i0.ɵɵelementStart(0, "span", 25);
71
- i0.ɵɵlistener("click", function MessageItemComponent_Conditional_13_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onEditClick()); });
72
- i0.ɵɵelement(1, "i", 26);
84
+ const _r3 = i0.ɵɵgetCurrentView();
85
+ i0.ɵɵelementStart(0, "span", 27);
86
+ i0.ɵɵlistener("click", function MessageItemComponent_Conditional_13_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onEditClick()); });
87
+ i0.ɵɵelement(1, "i", 28);
73
88
  i0.ɵɵelementEnd();
74
89
  } }
75
90
  function MessageItemComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
76
- i0.ɵɵelementStart(0, "span", 27);
77
- i0.ɵɵelement(1, "i", 28);
91
+ i0.ɵɵelementStart(0, "span", 29);
92
+ i0.ɵɵelement(1, "i", 30);
78
93
  i0.ɵɵtext(2);
79
94
  i0.ɵɵelementEnd();
80
95
  } if (rf & 2) {
@@ -84,14 +99,14 @@ function MessageItemComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
84
99
  i0.ɵɵtextInterpolate1(" ", ctx_r0.timePillText, " ");
85
100
  } }
86
101
  function MessageItemComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
87
- const _r3 = i0.ɵɵgetCurrentView();
88
- i0.ɵɵelementStart(0, "span", 29);
89
- i0.ɵɵlistener("click", function MessageItemComponent_Conditional_15_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTestFeedbackClick()); });
90
- i0.ɵɵelement(1, "i", 30);
102
+ const _r4 = i0.ɵɵgetCurrentView();
103
+ i0.ɵɵelementStart(0, "span", 31);
104
+ i0.ɵɵlistener("click", function MessageItemComponent_Conditional_15_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTestFeedbackClick()); });
105
+ i0.ɵɵelement(1, "i", 32);
91
106
  i0.ɵɵelementEnd();
92
107
  } }
93
108
  function MessageItemComponent_Conditional_16_Conditional_2_Template(rf, ctx) { if (rf & 1) {
94
- i0.ɵɵelementStart(0, "span", 33);
109
+ i0.ɵɵelementStart(0, "span", 35);
95
110
  i0.ɵɵtext(1);
96
111
  i0.ɵɵelementEnd();
97
112
  } if (rf & 2) {
@@ -100,11 +115,11 @@ function MessageItemComponent_Conditional_16_Conditional_2_Template(rf, ctx) { i
100
115
  i0.ɵɵtextInterpolate(ctx_r0.getRatingCount());
101
116
  } }
102
117
  function MessageItemComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
103
- const _r4 = i0.ɵɵgetCurrentView();
104
- i0.ɵɵelementStart(0, "span", 31);
105
- i0.ɵɵlistener("click", function MessageItemComponent_Conditional_16_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleAgentDetails()); });
106
- i0.ɵɵelement(1, "i", 32);
107
- i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_16_Conditional_2_Template, 2, 1, "span", 33);
118
+ const _r5 = i0.ɵɵgetCurrentView();
119
+ i0.ɵɵelementStart(0, "span", 33);
120
+ i0.ɵɵlistener("click", function MessageItemComponent_Conditional_16_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleAgentDetails()); });
121
+ i0.ɵɵelement(1, "i", 34);
122
+ i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_16_Conditional_2_Template, 2, 1, "span", 35);
108
123
  i0.ɵɵelementEnd();
109
124
  } if (rf & 2) {
110
125
  const ctx_r0 = i0.ɵɵnextContext();
@@ -114,7 +129,7 @@ function MessageItemComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
114
129
  i0.ɵɵconditional(ctx_r0.hasRatings() ? 2 : -1);
115
130
  } }
116
131
  function MessageItemComponent_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
117
- i0.ɵɵelementStart(0, "span", 36);
132
+ i0.ɵɵelementStart(0, "span", 38);
118
133
  i0.ɵɵtext(1, "(edited)");
119
134
  i0.ɵɵelementEnd();
120
135
  } }
@@ -122,58 +137,58 @@ function MessageItemComponent_Conditional_18_Conditional_3_ng_container_0_Templa
122
137
  i0.ɵɵelementContainer(0);
123
138
  } }
124
139
  function MessageItemComponent_Conditional_18_Conditional_3_Template(rf, ctx) { if (rf & 1) {
125
- i0.ɵɵtemplate(0, MessageItemComponent_Conditional_18_Conditional_3_ng_container_0_Template, 1, 0, "ng-container", 41);
140
+ i0.ɵɵtemplate(0, MessageItemComponent_Conditional_18_Conditional_3_ng_container_0_Template, 1, 0, "ng-container", 43);
126
141
  } if (rf & 2) {
127
142
  const ctx_r0 = i0.ɵɵnextContext(2);
128
143
  i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.messageExtraTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c0, ctx_r0.message, ctx_r0.message));
129
144
  } }
130
145
  function MessageItemComponent_Conditional_18_Conditional_4_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
131
- const _r5 = i0.ɵɵgetCurrentView();
132
- i0.ɵɵelementStart(0, "div", 44);
133
- i0.ɵɵlistener("click", function MessageItemComponent_Conditional_18_Conditional_4_For_2_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r5); const attachment_r6 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAttachmentClick(attachment_r6)); });
134
- i0.ɵɵelement(1, "img", 45);
135
- i0.ɵɵelementStart(2, "div", 46);
136
- i0.ɵɵelement(3, "i", 47);
146
+ const _r6 = i0.ɵɵgetCurrentView();
147
+ i0.ɵɵelementStart(0, "div", 46);
148
+ i0.ɵɵlistener("click", function MessageItemComponent_Conditional_18_Conditional_4_For_2_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r6); const attachment_r7 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAttachmentClick(attachment_r7)); });
149
+ i0.ɵɵelement(1, "img", 47);
150
+ i0.ɵɵelementStart(2, "div", 48);
151
+ i0.ɵɵelement(3, "i", 49);
137
152
  i0.ɵɵelementEnd()();
138
153
  } if (rf & 2) {
139
- const attachment_r6 = i0.ɵɵnextContext().$implicit;
140
- i0.ɵɵproperty("title", attachment_r6.fileName || "Image attachment");
154
+ const attachment_r7 = i0.ɵɵnextContext().$implicit;
155
+ i0.ɵɵproperty("title", attachment_r7.fileName || "Image attachment");
141
156
  i0.ɵɵadvance();
142
- i0.ɵɵproperty("src", attachment_r6.thumbnailUrl || attachment_r6.contentUrl, i0.ɵɵsanitizeUrl)("alt", attachment_r6.fileName || "Image attachment");
157
+ i0.ɵɵproperty("src", attachment_r7.thumbnailUrl || attachment_r7.contentUrl, i0.ɵɵsanitizeUrl)("alt", attachment_r7.fileName || "Image attachment");
143
158
  } }
144
159
  function MessageItemComponent_Conditional_18_Conditional_4_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
145
- const _r7 = i0.ɵɵgetCurrentView();
146
- i0.ɵɵelementStart(0, "div", 48);
147
- i0.ɵɵlistener("click", function MessageItemComponent_Conditional_18_Conditional_4_For_2_Conditional_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r7); const attachment_r6 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAttachmentClick(attachment_r6)); });
148
- i0.ɵɵelementStart(1, "div", 49);
160
+ const _r8 = i0.ɵɵgetCurrentView();
161
+ i0.ɵɵelementStart(0, "div", 50);
162
+ i0.ɵɵlistener("click", function MessageItemComponent_Conditional_18_Conditional_4_For_2_Conditional_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r8); const attachment_r7 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAttachmentClick(attachment_r7)); });
163
+ i0.ɵɵelementStart(1, "div", 51);
149
164
  i0.ɵɵtext(2);
150
165
  i0.ɵɵelementEnd();
151
- i0.ɵɵelementStart(3, "div", 50)(4, "span", 51);
166
+ i0.ɵɵelementStart(3, "div", 52)(4, "span", 53);
152
167
  i0.ɵɵtext(5);
153
168
  i0.ɵɵelementEnd();
154
- i0.ɵɵelementStart(6, "span", 52);
169
+ i0.ɵɵelementStart(6, "span", 54);
155
170
  i0.ɵɵtext(7);
156
171
  i0.ɵɵelementEnd()()();
157
172
  } if (rf & 2) {
158
- const attachment_r6 = i0.ɵɵnextContext().$implicit;
173
+ const attachment_r7 = i0.ɵɵnextContext().$implicit;
159
174
  const ctx_r0 = i0.ɵɵnextContext(3);
160
- i0.ɵɵclassProp("is-artifact", !!attachment_r6.artifactTypeName);
161
- i0.ɵɵproperty("title", attachment_r6.fileName || "File");
175
+ i0.ɵɵclassProp("is-artifact", !!attachment_r7.artifactTypeName);
176
+ i0.ɵɵproperty("title", attachment_r7.fileName || "File");
162
177
  i0.ɵɵadvance(2);
163
- i0.ɵɵtextInterpolate(ctx_r0.badgeTextFor(attachment_r6));
178
+ i0.ɵɵtextInterpolate(ctx_r0.badgeTextFor(attachment_r7));
164
179
  i0.ɵɵadvance(3);
165
- i0.ɵɵtextInterpolate(attachment_r6.fileName || "File");
180
+ i0.ɵɵtextInterpolate(attachment_r7.fileName || "File");
166
181
  i0.ɵɵadvance(2);
167
- i0.ɵɵtextInterpolate(ctx_r0.formatFileSize(attachment_r6.sizeBytes));
182
+ i0.ɵɵtextInterpolate(ctx_r0.formatFileSize(attachment_r7.sizeBytes));
168
183
  } }
169
184
  function MessageItemComponent_Conditional_18_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
170
- i0.ɵɵconditionalCreate(0, MessageItemComponent_Conditional_18_Conditional_4_For_2_Conditional_0_Template, 4, 3, "div", 42)(1, MessageItemComponent_Conditional_18_Conditional_4_For_2_Conditional_1_Template, 8, 6, "div", 43);
185
+ i0.ɵɵconditionalCreate(0, MessageItemComponent_Conditional_18_Conditional_4_For_2_Conditional_0_Template, 4, 3, "div", 44)(1, MessageItemComponent_Conditional_18_Conditional_4_For_2_Conditional_1_Template, 8, 6, "div", 45);
171
186
  } if (rf & 2) {
172
- const attachment_r6 = ctx.$implicit;
173
- i0.ɵɵconditional(attachment_r6.type === "Image" ? 0 : 1);
187
+ const attachment_r7 = ctx.$implicit;
188
+ i0.ɵɵconditional(attachment_r7.type === "Image" ? 0 : 1);
174
189
  } }
175
190
  function MessageItemComponent_Conditional_18_Conditional_4_Template(rf, ctx) { if (rf & 1) {
176
- i0.ɵɵelementStart(0, "div", 37);
191
+ i0.ɵɵelementStart(0, "div", 39);
177
192
  i0.ɵɵrepeaterCreate(1, MessageItemComponent_Conditional_18_Conditional_4_For_2_Template, 2, 1, null, null, _forTrack1);
178
193
  i0.ɵɵelementEnd();
179
194
  } if (rf & 2) {
@@ -182,45 +197,45 @@ function MessageItemComponent_Conditional_18_Conditional_4_Template(rf, ctx) { i
182
197
  i0.ɵɵrepeater(ctx_r0.attachments);
183
198
  } }
184
199
  function MessageItemComponent_Conditional_18_For_6_Template(rf, ctx) { if (rf & 1) {
185
- const _r8 = i0.ɵɵgetCurrentView();
186
- i0.ɵɵelementStart(0, "div", 53)(1, "mj-artifact-message-card", 54);
187
- i0.ɵɵlistener("actionPerformed", function MessageItemComponent_Conditional_18_For_6_Template_mj_artifact_message_card_actionPerformed_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onArtifactActionPerformed($event)); });
200
+ const _r9 = i0.ɵɵgetCurrentView();
201
+ i0.ɵɵelementStart(0, "div", 55)(1, "mj-artifact-message-card", 56);
202
+ i0.ɵɵlistener("actionPerformed", function MessageItemComponent_Conditional_18_For_6_Template_mj_artifact_message_card_actionPerformed_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onArtifactActionPerformed($event)); });
188
203
  i0.ɵɵelementEnd()();
189
204
  } if (rf & 2) {
190
- const a_r9 = ctx.$implicit;
205
+ const a_r10 = ctx.$implicit;
191
206
  const ctx_r0 = i0.ɵɵnextContext(2);
192
- i0.ɵɵclassProp("system-artifact", a_r9.artifact.Visibility === "System Only");
207
+ i0.ɵɵclassProp("system-artifact", a_r10.artifact.Visibility === "System Only");
193
208
  i0.ɵɵadvance();
194
- i0.ɵɵproperty("artifactId", a_r9.artifact.ID)("artifact", a_r9.artifact)("artifactVersion", a_r9.version)("currentUser", ctx_r0.currentUser);
209
+ i0.ɵɵproperty("artifactId", a_r10.artifact.ID)("artifact", a_r10.artifact)("artifactVersion", a_r10.version)("currentUser", ctx_r0.currentUser);
195
210
  } }
196
211
  function MessageItemComponent_Conditional_18_Conditional_7_Template(rf, ctx) { if (rf & 1) {
197
- const _r10 = i0.ɵɵgetCurrentView();
198
- i0.ɵɵelementStart(0, "mj-dynamic-form", 55);
199
- i0.ɵɵlistener("FormSubmitted", function MessageItemComponent_Conditional_18_Conditional_7_Template_mj_dynamic_form_FormSubmitted_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onFormSubmitted($event)); });
212
+ const _r11 = i0.ɵɵgetCurrentView();
213
+ i0.ɵɵelementStart(0, "mj-dynamic-form", 57);
214
+ i0.ɵɵlistener("FormSubmitted", function MessageItemComponent_Conditional_18_Conditional_7_Template_mj_dynamic_form_FormSubmitted_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onFormSubmitted($event)); });
200
215
  i0.ɵɵelementEnd();
201
216
  } if (rf & 2) {
202
217
  const ctx_r0 = i0.ɵɵnextContext(2);
203
218
  i0.ɵɵproperty("FormDefinition", ctx_r0.responseForm)("Disabled", ctx_r0.isProcessing);
204
219
  } }
205
220
  function MessageItemComponent_Conditional_18_Conditional_8_Template(rf, ctx) { if (rf & 1) {
206
- const _r11 = i0.ɵɵgetCurrentView();
207
- i0.ɵɵelementStart(0, "mj-actionable-commands", 56);
208
- i0.ɵɵlistener("commandExecuted", function MessageItemComponent_Conditional_18_Conditional_8_Template_mj_actionable_commands_commandExecuted_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onCommandExecuted($event)); });
221
+ const _r12 = i0.ɵɵgetCurrentView();
222
+ i0.ɵɵelementStart(0, "mj-actionable-commands", 58);
223
+ i0.ɵɵlistener("commandExecuted", function MessageItemComponent_Conditional_18_Conditional_8_Template_mj_actionable_commands_commandExecuted_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onCommandExecuted($event)); });
209
224
  i0.ɵɵelementEnd();
210
225
  } if (rf & 2) {
211
226
  const ctx_r0 = i0.ɵɵnextContext(2);
212
227
  i0.ɵɵproperty("commands", ctx_r0.actionableCommands)("disabled", ctx_r0.isProcessing)("isLastMessage", ctx_r0.isLastMessageInConversation)("isConversationOwner", ctx_r0.isConversationOwner);
213
228
  } }
214
229
  function MessageItemComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
215
- i0.ɵɵelementStart(0, "div", 34);
216
- i0.ɵɵelement(1, "mj-markdown", 35);
217
- i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_18_Conditional_2_Template, 2, 0, "span", 36);
230
+ i0.ɵɵelementStart(0, "div", 36);
231
+ i0.ɵɵelement(1, "mj-markdown", 37);
232
+ i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_18_Conditional_2_Template, 2, 0, "span", 38);
218
233
  i0.ɵɵelementEnd();
219
234
  i0.ɵɵconditionalCreate(3, MessageItemComponent_Conditional_18_Conditional_3_Template, 1, 5, "ng-container");
220
- i0.ɵɵconditionalCreate(4, MessageItemComponent_Conditional_18_Conditional_4_Template, 3, 0, "div", 37);
221
- i0.ɵɵrepeaterCreate(5, MessageItemComponent_Conditional_18_For_6_Template, 2, 6, "div", 38, _forTrack0);
222
- i0.ɵɵconditionalCreate(7, MessageItemComponent_Conditional_18_Conditional_7_Template, 1, 2, "mj-dynamic-form", 39);
223
- i0.ɵɵconditionalCreate(8, MessageItemComponent_Conditional_18_Conditional_8_Template, 1, 4, "mj-actionable-commands", 40);
235
+ i0.ɵɵconditionalCreate(4, MessageItemComponent_Conditional_18_Conditional_4_Template, 3, 0, "div", 39);
236
+ i0.ɵɵrepeaterCreate(5, MessageItemComponent_Conditional_18_For_6_Template, 2, 6, "div", 40, _forTrack0);
237
+ i0.ɵɵconditionalCreate(7, MessageItemComponent_Conditional_18_Conditional_7_Template, 1, 2, "mj-dynamic-form", 41);
238
+ i0.ɵɵconditionalCreate(8, MessageItemComponent_Conditional_18_Conditional_8_Template, 1, 4, "mj-actionable-commands", 42);
224
239
  } if (rf & 2) {
225
240
  const ctx_r0 = i0.ɵɵnextContext();
226
241
  i0.ɵɵadvance();
@@ -239,22 +254,22 @@ function MessageItemComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
239
254
  i0.ɵɵconditional(ctx_r0.isLastMessageInConversation && ctx_r0.isConversationOwner && ctx_r0.actionableCommands.length > 0 ? 8 : -1);
240
255
  } }
241
256
  function MessageItemComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
242
- const _r12 = i0.ɵɵgetCurrentView();
243
- i0.ɵɵelementStart(0, "div", 14)(1, "textarea", 57);
244
- i0.ɵɵtwoWayListener("ngModelChange", function MessageItemComponent_Conditional_19_Template_textarea_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.editedText, $event) || (ctx_r0.editedText = $event); return i0.ɵɵresetView($event); });
245
- i0.ɵɵlistener("keydown", function MessageItemComponent_Conditional_19_Template_textarea_keydown_1_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onEditKeydown($event)); });
257
+ const _r13 = i0.ɵɵgetCurrentView();
258
+ i0.ɵɵelementStart(0, "div", 13)(1, "textarea", 59);
259
+ i0.ɵɵtwoWayListener("ngModelChange", function MessageItemComponent_Conditional_19_Template_textarea_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.editedText, $event) || (ctx_r0.editedText = $event); return i0.ɵɵresetView($event); });
260
+ i0.ɵɵlistener("keydown", function MessageItemComponent_Conditional_19_Template_textarea_keydown_1_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onEditKeydown($event)); });
246
261
  i0.ɵɵelementEnd();
247
- i0.ɵɵelementStart(2, "div", 58)(3, "button", 59);
248
- i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.saveEdit()); });
249
- i0.ɵɵelement(4, "i", 60);
262
+ i0.ɵɵelementStart(2, "div", 60)(3, "button", 61);
263
+ i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.saveEdit()); });
264
+ i0.ɵɵelement(4, "i", 62);
250
265
  i0.ɵɵtext(5, " Save ");
251
266
  i0.ɵɵelementEnd();
252
- i0.ɵɵelementStart(6, "button", 61);
253
- i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.cancelEditing()); });
254
- i0.ɵɵelement(7, "i", 62);
267
+ i0.ɵɵelementStart(6, "button", 63);
268
+ i0.ɵɵlistener("click", function MessageItemComponent_Conditional_19_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.cancelEditing()); });
269
+ i0.ɵɵelement(7, "i", 64);
255
270
  i0.ɵɵtext(8, " Cancel ");
256
271
  i0.ɵɵelementEnd()();
257
- i0.ɵɵelementStart(9, "div", 63);
272
+ i0.ɵɵelementStart(9, "div", 65);
258
273
  i0.ɵɵtext(10, " Press Enter to save, Shift+Enter for new line, Escape to cancel ");
259
274
  i0.ɵɵelementEnd()();
260
275
  } if (rf & 2) {
@@ -263,23 +278,23 @@ function MessageItemComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
263
278
  i0.ɵɵtwoWayProperty("ngModel", ctx_r0.editedText);
264
279
  } }
265
280
  function MessageItemComponent_Conditional_20_Conditional_1_Template(rf, ctx) { if (rf & 1) {
266
- const _r13 = i0.ɵɵgetCurrentView();
267
- i0.ɵɵelementStart(0, "button", 66);
268
- i0.ɵɵlistener("click", function MessageItemComponent_Conditional_20_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onDeleteClick()); });
269
- i0.ɵɵelement(1, "i", 67);
281
+ const _r14 = i0.ɵɵgetCurrentView();
282
+ i0.ɵɵelementStart(0, "button", 68);
283
+ i0.ɵɵlistener("click", function MessageItemComponent_Conditional_20_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onDeleteClick()); });
284
+ i0.ɵɵelement(1, "i", 69);
270
285
  i0.ɵɵelementEnd();
271
286
  } }
272
287
  function MessageItemComponent_Conditional_20_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
273
- i0.ɵɵelement(0, "mj-conversation-message-rating", 68);
288
+ i0.ɵɵelement(0, "mj-conversation-message-rating", 70);
274
289
  } if (rf & 2) {
275
290
  const ctx_r0 = i0.ɵɵnextContext(3);
276
291
  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);
277
292
  } }
278
293
  function MessageItemComponent_Conditional_20_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
279
- const _r14 = i0.ɵɵgetCurrentView();
280
- i0.ɵɵelementStart(0, "button", 70);
281
- i0.ɵɵlistener("click", function MessageItemComponent_Conditional_20_Conditional_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.PinMessage()); });
282
- i0.ɵɵelement(1, "i", 71);
294
+ const _r15 = i0.ɵɵgetCurrentView();
295
+ i0.ɵɵelementStart(0, "button", 72);
296
+ i0.ɵɵlistener("click", function MessageItemComponent_Conditional_20_Conditional_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.PinMessage()); });
297
+ i0.ɵɵelement(1, "i", 73);
283
298
  i0.ɵɵelementEnd();
284
299
  } if (rf & 2) {
285
300
  const ctx_r0 = i0.ɵɵnextContext(3);
@@ -287,9 +302,9 @@ function MessageItemComponent_Conditional_20_Conditional_2_Conditional_2_Templat
287
302
  i0.ɵɵproperty("title", ctx_r0.message.IsPinned ? "Unpin message" : "Pin message");
288
303
  } }
289
304
  function MessageItemComponent_Conditional_20_Conditional_2_Template(rf, ctx) { if (rf & 1) {
290
- i0.ɵɵelementStart(0, "div", 65);
291
- i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_20_Conditional_2_Conditional_1_Template, 1, 5, "mj-conversation-message-rating", 68);
292
- i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_20_Conditional_2_Conditional_2_Template, 2, 3, "button", 69);
305
+ i0.ɵɵelementStart(0, "div", 67);
306
+ i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_20_Conditional_2_Conditional_1_Template, 1, 5, "mj-conversation-message-rating", 70);
307
+ i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_20_Conditional_2_Conditional_2_Template, 2, 3, "button", 71);
293
308
  i0.ɵɵelementEnd();
294
309
  } if (rf & 2) {
295
310
  const ctx_r0 = i0.ɵɵnextContext(2);
@@ -299,9 +314,9 @@ function MessageItemComponent_Conditional_20_Conditional_2_Template(rf, ctx) { i
299
314
  i0.ɵɵconditional(ctx_r0.allowPinning ? 2 : -1);
300
315
  } }
301
316
  function MessageItemComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
302
- i0.ɵɵelementStart(0, "div", 15);
303
- i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_20_Conditional_1_Template, 2, 0, "button", 64);
304
- i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_20_Conditional_2_Template, 3, 2, "div", 65);
317
+ i0.ɵɵelementStart(0, "div", 14);
318
+ i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_20_Conditional_1_Template, 2, 0, "button", 66);
319
+ i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_20_Conditional_2_Template, 3, 2, "div", 67);
305
320
  i0.ɵɵelementEnd();
306
321
  } if (rf & 2) {
307
322
  const ctx_r0 = i0.ɵɵnextContext();
@@ -310,121 +325,112 @@ function MessageItemComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
310
325
  i0.ɵɵadvance();
311
326
  i0.ɵɵconditional(ctx_r0.isAIMessage && ctx_r0.messageStatus === "Complete" ? 2 : -1);
312
327
  } }
313
- function MessageItemComponent_Conditional_22_Conditional_1_Conditional_7_Conditional_8_Template(rf, ctx) { if (rf & 1) {
314
- i0.ɵɵelementStart(0, "div", 79)(1, "span", 80);
328
+ function MessageItemComponent_Conditional_22_Conditional_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
329
+ i0.ɵɵelementStart(0, "div", 81)(1, "span", 82);
315
330
  i0.ɵɵtext(2, "Steps:");
316
331
  i0.ɵɵelementEnd();
317
- i0.ɵɵelementStart(3, "span", 81);
332
+ i0.ɵɵelementStart(3, "span", 83);
318
333
  i0.ɵɵtext(4);
319
334
  i0.ɵɵelementEnd()();
320
335
  } if (rf & 2) {
321
- const ctx_r0 = i0.ɵɵnextContext(4);
336
+ const ctx_r0 = i0.ɵɵnextContext(3);
322
337
  i0.ɵɵadvance(4);
323
338
  i0.ɵɵtextInterpolate(ctx_r0.agentRunStepCount);
324
339
  } }
325
- function MessageItemComponent_Conditional_22_Conditional_1_Conditional_7_Conditional_9_Template(rf, ctx) { if (rf & 1) {
326
- i0.ɵɵelementStart(0, "div", 79)(1, "span", 80);
340
+ function MessageItemComponent_Conditional_22_Conditional_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
341
+ i0.ɵɵelementStart(0, "div", 81)(1, "span", 82);
327
342
  i0.ɵɵtext(2, "Tokens:");
328
343
  i0.ɵɵelementEnd();
329
- i0.ɵɵelementStart(3, "span", 81);
344
+ i0.ɵɵelementStart(3, "span", 83);
330
345
  i0.ɵɵtext(4);
331
346
  i0.ɵɵelementEnd()();
332
347
  } if (rf & 2) {
333
- const ctx_r0 = i0.ɵɵnextContext(4);
348
+ const ctx_r0 = i0.ɵɵnextContext(3);
334
349
  i0.ɵɵadvance(4);
335
350
  i0.ɵɵtextInterpolate(ctx_r0.formatNumber(ctx_r0.agentRunTotalTokens));
336
351
  } }
337
- function MessageItemComponent_Conditional_22_Conditional_1_Conditional_7_Conditional_10_Template(rf, ctx) { if (rf & 1) {
338
- i0.ɵɵelementStart(0, "div", 79)(1, "span", 80);
352
+ function MessageItemComponent_Conditional_22_Conditional_1_Conditional_17_Template(rf, ctx) { if (rf & 1) {
353
+ i0.ɵɵelementStart(0, "div", 81)(1, "span", 82);
339
354
  i0.ɵɵtext(2, "Cost:");
340
355
  i0.ɵɵelementEnd();
341
- i0.ɵɵelementStart(3, "span", 81);
356
+ i0.ɵɵelementStart(3, "span", 83);
342
357
  i0.ɵɵtext(4);
343
358
  i0.ɵɵelementEnd()();
344
359
  } if (rf & 2) {
345
- const ctx_r0 = i0.ɵɵnextContext(4);
360
+ const ctx_r0 = i0.ɵɵnextContext(3);
346
361
  i0.ɵɵadvance(4);
347
362
  i0.ɵɵtextInterpolate1("\\$", ctx_r0.agentRunTotalCost.toFixed(4));
348
363
  } }
349
- function MessageItemComponent_Conditional_22_Conditional_1_Conditional_7_Conditional_11_Template(rf, ctx) { if (rf & 1) {
350
- i0.ɵɵelementStart(0, "div", 79)(1, "span", 80);
364
+ function MessageItemComponent_Conditional_22_Conditional_1_Conditional_18_Template(rf, ctx) { if (rf & 1) {
365
+ i0.ɵɵelementStart(0, "div", 81)(1, "span", 82);
351
366
  i0.ɵɵtext(2, "Status:");
352
367
  i0.ɵɵelementEnd();
353
- i0.ɵɵelementStart(3, "span", 84);
368
+ i0.ɵɵelementStart(3, "span", 86);
354
369
  i0.ɵɵtext(4);
355
370
  i0.ɵɵelementEnd()();
356
371
  } if (rf & 2) {
357
- const ctx_r0 = i0.ɵɵnextContext(4);
372
+ const ctx_r0 = i0.ɵɵnextContext(3);
358
373
  i0.ɵɵadvance(3);
359
374
  i0.ɵɵclassMap("status-" + ctx_r0.agentRun.Status.toLowerCase());
360
375
  i0.ɵɵadvance();
361
376
  i0.ɵɵtextInterpolate1(" ", ctx_r0.agentRun.Status, " ");
362
377
  } }
363
- function MessageItemComponent_Conditional_22_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
364
- const _r16 = i0.ɵɵgetCurrentView();
365
- i0.ɵɵelementStart(0, "div", 78)(1, "div", 79)(2, "span", 80);
366
- i0.ɵɵtext(3, "Run ID:");
367
- i0.ɵɵelementEnd();
368
- i0.ɵɵelementStart(4, "span", 81)(5, "a", 82);
369
- i0.ɵɵlistener("click", function MessageItemComponent_Conditional_22_Conditional_1_Conditional_7_Template_a_click_5_listener() { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openAgentRunRecord()); });
370
- i0.ɵɵtext(6);
371
- i0.ɵɵelement(7, "i", 83);
372
- i0.ɵɵelementEnd()()();
373
- i0.ɵɵconditionalCreate(8, MessageItemComponent_Conditional_22_Conditional_1_Conditional_7_Conditional_8_Template, 5, 1, "div", 79);
374
- i0.ɵɵconditionalCreate(9, MessageItemComponent_Conditional_22_Conditional_1_Conditional_7_Conditional_9_Template, 5, 1, "div", 79);
375
- i0.ɵɵconditionalCreate(10, MessageItemComponent_Conditional_22_Conditional_1_Conditional_7_Conditional_10_Template, 5, 1, "div", 79);
376
- i0.ɵɵconditionalCreate(11, MessageItemComponent_Conditional_22_Conditional_1_Conditional_7_Conditional_11_Template, 5, 3, "div", 79);
377
- i0.ɵɵelementEnd();
378
- } if (rf & 2) {
379
- const ctx_r0 = i0.ɵɵnextContext(3);
380
- i0.ɵɵadvance(6);
381
- i0.ɵɵtextInterpolate1(" ", ctx_r0.agentRun.ID, " ");
382
- i0.ɵɵadvance(2);
383
- i0.ɵɵconditional(ctx_r0.agentRunStepCount > 0 ? 8 : -1);
384
- i0.ɵɵadvance();
385
- i0.ɵɵconditional(ctx_r0.agentRunTotalTokens > 0 ? 9 : -1);
386
- i0.ɵɵadvance();
387
- i0.ɵɵconditional(ctx_r0.agentRunTotalCost > 0 ? 10 : -1);
388
- i0.ɵɵadvance();
389
- i0.ɵɵconditional(ctx_r0.agentRun.Status ? 11 : -1);
390
- } }
391
378
  function MessageItemComponent_Conditional_22_Conditional_1_Template(rf, ctx) { if (rf & 1) {
392
- const _r15 = i0.ɵɵgetCurrentView();
393
- i0.ɵɵelementStart(0, "div", 72)(1, "div", 75);
394
- i0.ɵɵelement(2, "i", 76);
395
- i0.ɵɵelementStart(3, "span")(4, "a", 77);
396
- i0.ɵɵlistener("click", function MessageItemComponent_Conditional_22_Conditional_1_Template_a_click_4_listener() { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openAgentRecord()); });
379
+ const _r16 = i0.ɵɵgetCurrentView();
380
+ i0.ɵɵelementStart(0, "div", 74)(1, "div", 77);
381
+ i0.ɵɵelement(2, "i", 78);
382
+ i0.ɵɵelementStart(3, "span")(4, "a", 79);
383
+ i0.ɵɵlistener("click", function MessageItemComponent_Conditional_22_Conditional_1_Template_a_click_4_listener() { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openAgentRecord()); });
397
384
  i0.ɵɵtext(5);
398
385
  i0.ɵɵelementEnd();
399
386
  i0.ɵɵtext(6, " Run Details ");
400
387
  i0.ɵɵelementEnd()();
401
- i0.ɵɵconditionalCreate(7, MessageItemComponent_Conditional_22_Conditional_1_Conditional_7_Template, 12, 5, "div", 78);
388
+ i0.ɵɵelementStart(7, "div", 80)(8, "div", 81)(9, "span", 82);
389
+ i0.ɵɵtext(10, "Run ID:");
402
390
  i0.ɵɵelementEnd();
391
+ i0.ɵɵelementStart(11, "span", 83)(12, "a", 84);
392
+ i0.ɵɵlistener("click", function MessageItemComponent_Conditional_22_Conditional_1_Template_a_click_12_listener() { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openAgentRunRecord()); });
393
+ i0.ɵɵtext(13);
394
+ i0.ɵɵelement(14, "i", 85);
395
+ i0.ɵɵelementEnd()()();
396
+ i0.ɵɵconditionalCreate(15, MessageItemComponent_Conditional_22_Conditional_1_Conditional_15_Template, 5, 1, "div", 81);
397
+ i0.ɵɵconditionalCreate(16, MessageItemComponent_Conditional_22_Conditional_1_Conditional_16_Template, 5, 1, "div", 81);
398
+ i0.ɵɵconditionalCreate(17, MessageItemComponent_Conditional_22_Conditional_1_Conditional_17_Template, 5, 1, "div", 81);
399
+ i0.ɵɵconditionalCreate(18, MessageItemComponent_Conditional_22_Conditional_1_Conditional_18_Template, 5, 3, "div", 81);
400
+ i0.ɵɵelementEnd()();
403
401
  } if (rf & 2) {
404
402
  const ctx_r0 = i0.ɵɵnextContext(2);
405
403
  i0.ɵɵadvance(5);
406
- i0.ɵɵtextInterpolate1(" ", (ctx_r0.aiAgentInfo == null ? null : ctx_r0.aiAgentInfo.name) || "Agent", " ");
404
+ i0.ɵɵtextInterpolate1(" ", (ctx_r0.engineAgentInfo == null ? null : ctx_r0.engineAgentInfo.name) || "Agent", " ");
405
+ i0.ɵɵadvance(8);
406
+ i0.ɵɵtextInterpolate1(" ", ctx_r0.agentRun.ID, " ");
407
407
  i0.ɵɵadvance(2);
408
- i0.ɵɵconditional(ctx_r0.showAgentRunDetails ? 7 : -1);
408
+ i0.ɵɵconditional(ctx_r0.agentRunStepCount > 0 ? 15 : -1);
409
+ i0.ɵɵadvance();
410
+ i0.ɵɵconditional(ctx_r0.agentRunTotalTokens > 0 ? 16 : -1);
411
+ i0.ɵɵadvance();
412
+ i0.ɵɵconditional(ctx_r0.agentRunTotalCost > 0 ? 17 : -1);
413
+ i0.ɵɵadvance();
414
+ i0.ɵɵconditional(ctx_r0.agentRun.Status ? 18 : -1);
409
415
  } }
410
416
  function MessageItemComponent_Conditional_22_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
411
417
  const _r17 = i0.ɵɵgetCurrentView();
412
- i0.ɵɵelementStart(0, "button", 86);
418
+ i0.ɵɵelementStart(0, "button", 88);
413
419
  i0.ɵɵlistener("click", function MessageItemComponent_Conditional_22_Conditional_2_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onDeleteClick()); });
414
- i0.ɵɵelement(1, "i", 67);
420
+ i0.ɵɵelement(1, "i", 69);
415
421
  i0.ɵɵelementEnd();
416
422
  } }
417
423
  function MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
418
- i0.ɵɵelement(0, "mj-conversation-message-rating", 87);
424
+ i0.ɵɵelement(0, "mj-conversation-message-rating", 89);
419
425
  } if (rf & 2) {
420
426
  const ctx_r0 = i0.ɵɵnextContext(4);
421
427
  i0.ɵɵproperty("conversationDetailId", ctx_r0.message.ID)("currentUser", ctx_r0.currentUser)("ratingsData", ctx_r0.ratings)("canEdit", ctx_r0.isConversationOwner);
422
428
  } }
423
429
  function MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
424
430
  const _r18 = i0.ɵɵgetCurrentView();
425
- i0.ɵɵelementStart(0, "button", 70);
431
+ i0.ɵɵelementStart(0, "button", 72);
426
432
  i0.ɵɵlistener("click", function MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.PinMessage()); });
427
- i0.ɵɵelement(1, "i", 71);
433
+ i0.ɵɵelement(1, "i", 73);
428
434
  i0.ɵɵelementEnd();
429
435
  } if (rf & 2) {
430
436
  const ctx_r0 = i0.ɵɵnextContext(4);
@@ -432,9 +438,9 @@ function MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Conditi
432
438
  i0.ɵɵproperty("title", ctx_r0.message.IsPinned ? "Unpin message" : "Pin message");
433
439
  } }
434
440
  function MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
435
- i0.ɵɵelementStart(0, "div", 65);
436
- i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Conditional_1_Template, 1, 4, "mj-conversation-message-rating", 87);
437
- i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Conditional_2_Template, 2, 3, "button", 69);
441
+ i0.ɵɵelementStart(0, "div", 67);
442
+ i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Conditional_1_Template, 1, 4, "mj-conversation-message-rating", 89);
443
+ i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Conditional_2_Template, 2, 3, "button", 71);
438
444
  i0.ɵɵelementEnd();
439
445
  } if (rf & 2) {
440
446
  const ctx_r0 = i0.ɵɵnextContext(3);
@@ -445,9 +451,9 @@ function MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Templat
445
451
  } }
446
452
  function MessageItemComponent_Conditional_22_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
447
453
  const _r19 = i0.ɵɵgetCurrentView();
448
- i0.ɵɵelementStart(0, "button", 70);
454
+ i0.ɵɵelementStart(0, "button", 72);
449
455
  i0.ɵɵlistener("click", function MessageItemComponent_Conditional_22_Conditional_2_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.PinMessage()); });
450
- i0.ɵɵelement(1, "i", 71);
456
+ i0.ɵɵelement(1, "i", 73);
451
457
  i0.ɵɵelementEnd();
452
458
  } if (rf & 2) {
453
459
  const ctx_r0 = i0.ɵɵnextContext(3);
@@ -455,9 +461,9 @@ function MessageItemComponent_Conditional_22_Conditional_2_Conditional_3_Templat
455
461
  i0.ɵɵproperty("title", ctx_r0.message.IsPinned ? "Unpin message" : "Pin message");
456
462
  } }
457
463
  function MessageItemComponent_Conditional_22_Conditional_2_Template(rf, ctx) { if (rf & 1) {
458
- i0.ɵɵelementStart(0, "div", 73);
459
- i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_22_Conditional_2_Conditional_1_Template, 2, 0, "button", 85);
460
- i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Template, 3, 2, "div", 65)(3, MessageItemComponent_Conditional_22_Conditional_2_Conditional_3_Template, 2, 3, "button", 69);
464
+ i0.ɵɵelementStart(0, "div", 75);
465
+ i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_22_Conditional_2_Conditional_1_Template, 2, 0, "button", 87);
466
+ i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_22_Conditional_2_Conditional_2_Template, 3, 2, "div", 67)(3, MessageItemComponent_Conditional_22_Conditional_2_Conditional_3_Template, 2, 3, "button", 71);
461
467
  i0.ɵɵelementEnd();
462
468
  } if (rf & 2) {
463
469
  const ctx_r0 = i0.ɵɵnextContext(2);
@@ -467,19 +473,19 @@ function MessageItemComponent_Conditional_22_Conditional_2_Template(rf, ctx) { i
467
473
  i0.ɵɵconditional(ctx_r0.messageStatus === "Complete" ? 2 : ctx_r0.allowPinning ? 3 : -1);
468
474
  } }
469
475
  function MessageItemComponent_Conditional_22_Conditional_3_For_7_Template(rf, ctx) { if (rf & 1) {
470
- i0.ɵɵelement(0, "mj-task-widget", 91);
476
+ i0.ɵɵelement(0, "mj-task-widget", 93);
471
477
  } if (rf & 2) {
472
478
  const task_r20 = ctx.$implicit;
473
479
  i0.ɵɵproperty("task", task_r20)("compact", false)("clickable", false)("showProgress", true)("showDuration", true);
474
480
  } }
475
481
  function MessageItemComponent_Conditional_22_Conditional_3_Template(rf, ctx) { if (rf & 1) {
476
- i0.ɵɵelementStart(0, "div", 74)(1, "div", 88);
477
- i0.ɵɵelement(2, "i", 89);
482
+ i0.ɵɵelementStart(0, "div", 76)(1, "div", 90);
483
+ i0.ɵɵelement(2, "i", 91);
478
484
  i0.ɵɵelementStart(3, "span");
479
485
  i0.ɵɵtext(4);
480
486
  i0.ɵɵelementEnd()();
481
- i0.ɵɵelementStart(5, "div", 90);
482
- i0.ɵɵrepeaterCreate(6, MessageItemComponent_Conditional_22_Conditional_3_For_7_Template, 1, 5, "mj-task-widget", 91, i0.ɵɵrepeaterTrackByIdentity);
487
+ i0.ɵɵelementStart(5, "div", 92);
488
+ i0.ɵɵrepeaterCreate(6, MessageItemComponent_Conditional_22_Conditional_3_For_7_Template, 1, 5, "mj-task-widget", 93, i0.ɵɵrepeaterTrackByIdentity);
483
489
  i0.ɵɵelementEnd()();
484
490
  } if (rf & 2) {
485
491
  const ctx_r0 = i0.ɵɵnextContext(2);
@@ -489,15 +495,15 @@ function MessageItemComponent_Conditional_22_Conditional_3_Template(rf, ctx) { i
489
495
  i0.ɵɵrepeater(ctx_r0.detailTasks);
490
496
  } }
491
497
  function MessageItemComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
492
- i0.ɵɵelementStart(0, "div", 17);
493
- i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_22_Conditional_1_Template, 8, 2, "div", 72);
494
- i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_22_Conditional_2_Template, 4, 2, "div", 73);
495
- i0.ɵɵconditionalCreate(3, MessageItemComponent_Conditional_22_Conditional_3_Template, 8, 1, "div", 74);
498
+ i0.ɵɵelementStart(0, "div", 16);
499
+ i0.ɵɵconditionalCreate(1, MessageItemComponent_Conditional_22_Conditional_1_Template, 19, 6, "div", 74);
500
+ i0.ɵɵconditionalCreate(2, MessageItemComponent_Conditional_22_Conditional_2_Template, 4, 2, "div", 75);
501
+ i0.ɵɵconditionalCreate(3, MessageItemComponent_Conditional_22_Conditional_3_Template, 8, 1, "div", 76);
496
502
  i0.ɵɵelementEnd();
497
503
  } if (rf & 2) {
498
504
  const ctx_r0 = i0.ɵɵnextContext();
499
505
  i0.ɵɵadvance();
500
- i0.ɵɵconditional(ctx_r0.agentRun ? 1 : -1);
506
+ i0.ɵɵconditional(ctx_r0.agentRun && ctx_r0.showAgentRunDetails ? 1 : -1);
501
507
  i0.ɵɵadvance();
502
508
  i0.ɵɵconditional(!ctx_r0.isLastMessage ? 2 : -1);
503
509
  i0.ɵɵadvance();
@@ -505,24 +511,24 @@ function MessageItemComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
505
511
  } }
506
512
  function MessageItemComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
507
513
  const _r21 = i0.ɵɵgetCurrentView();
508
- i0.ɵɵelementStart(0, "div", 18)(1, "button", 92);
514
+ i0.ɵɵelementStart(0, "div", 17)(1, "button", 94);
509
515
  i0.ɵɵlistener("click", function MessageItemComponent_Conditional_23_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r21); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onRetryClick()); });
510
- i0.ɵɵelement(2, "i", 93);
516
+ i0.ɵɵelement(2, "i", 95);
511
517
  i0.ɵɵtext(3, " Retry ");
512
518
  i0.ɵɵelementEnd()();
513
519
  } }
514
520
  function MessageItemComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
515
521
  const _r22 = i0.ɵɵgetCurrentView();
516
- i0.ɵɵelementStart(0, "div", 19)(1, "button", 94);
522
+ i0.ɵɵelementStart(0, "div", 18)(1, "button", 96);
517
523
  i0.ɵɵlistener("click", function MessageItemComponent_Conditional_24_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r22); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleReaction("like")); });
518
- i0.ɵɵelement(2, "i", 95);
519
- i0.ɵɵelementStart(3, "span", 96);
524
+ i0.ɵɵelement(2, "i", 97);
525
+ i0.ɵɵelementStart(3, "span", 98);
520
526
  i0.ɵɵtext(4, "0");
521
527
  i0.ɵɵelementEnd()();
522
- i0.ɵɵelementStart(5, "button", 94);
528
+ i0.ɵɵelementStart(5, "button", 96);
523
529
  i0.ɵɵlistener("click", function MessageItemComponent_Conditional_24_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r22); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleReaction("comment")); });
524
- i0.ɵɵelement(6, "i", 97);
525
- i0.ɵɵelementStart(7, "span", 96);
530
+ i0.ɵɵelement(6, "i", 99);
531
+ i0.ɵɵelementStart(7, "span", 98);
526
532
  i0.ɵɵtext(8, "0");
527
533
  i0.ɵɵelementEnd()()();
528
534
  } }
@@ -577,6 +583,30 @@ export class MessageItemComponent extends BaseAngularComponent {
577
583
  allowMessageEdit = true;
578
584
  /** Allow deleting the user's own messages (the per-message delete button). */
579
585
  allowMessageDelete = true;
586
+ /** Host override for the AI message display name (white-label persona). Null = the agent record's name. */
587
+ assistantDisplayName = null;
588
+ /** Host image URL for the AI message avatar. Null = the agent's Font Awesome icon. */
589
+ set assistantAvatarUrl(value) {
590
+ if (value !== this._assistantAvatarUrl) {
591
+ this._assistantAvatarUrl = value;
592
+ // A new URL gets a fresh chance even if the previous one 404'd.
593
+ this.assistantAvatarFailed = false;
594
+ }
595
+ }
596
+ get assistantAvatarUrl() {
597
+ return this._assistantAvatarUrl;
598
+ }
599
+ _assistantAvatarUrl = null;
600
+ /** The last assistantAvatarUrl failed to load — fall back to the icon branch. */
601
+ assistantAvatarFailed = false;
602
+ /** The avatar image URL actually rendered: trimmed, and null after a load error
603
+ * so a broken/whitespace URL degrades to the agent icon instead of a broken-image glyph. */
604
+ get effectiveAssistantAvatarUrl() {
605
+ if (this.assistantAvatarFailed)
606
+ return null;
607
+ const url = this._assistantAvatarUrl?.trim();
608
+ return url ? url : null;
609
+ }
580
610
  editClicked = new EventEmitter();
581
611
  deleteClicked = new EventEmitter();
582
612
  retryClicked = new EventEmitter();
@@ -792,7 +822,24 @@ export class MessageItemComponent extends BaseAngularComponent {
792
822
  get isAIMessage() {
793
823
  return this.message.Role?.trim().toLowerCase() === 'ai';
794
824
  }
825
+ /**
826
+ * The agent identity as shown in the UI: the ENGINE-resolved identity (see
827
+ * {@link engineAgentInfo}) with the host's `assistantDisplayName` override
828
+ * applied to the name when set. Internal logic that must compare against the
829
+ * real agent name (e.g. {@link isConversationManager}) uses `engineAgentInfo`
830
+ * directly, so a display override can never change routing/behavior decisions.
831
+ */
795
832
  get aiAgentInfo() {
833
+ const info = this.engineAgentInfo;
834
+ if (!info)
835
+ return null;
836
+ const override = this.assistantDisplayName?.trim();
837
+ return override ? { ...info, name: override } : info;
838
+ }
839
+ /** The engine-resolved agent identity — no host display overrides applied.
840
+ * Protected (not private) so the template's run-details header — which labels
841
+ * the REAL agent's diagnostics and record link — can read it directly. */
842
+ get engineAgentInfo() {
796
843
  if (!this.isAIMessage)
797
844
  return null;
798
845
  // Get agent ID from denormalized field (populated when message is created)
@@ -868,10 +915,12 @@ export class MessageItemComponent extends BaseAngularComponent {
868
915
  // the code-const Sage fallback. Replaces the previous hardcoded 'Sage'
869
916
  // name check. Returns false until the agent service has cached the
870
917
  // resolved agent (warmed by message-input's first routing call).
918
+ // Compares the ENGINE-resolved name deliberately: a host assistantDisplayName
919
+ // override renames what the user SEES, never what the component decides.
871
920
  const cmName = this.agentService.ConversationManagerAgentName;
872
921
  if (!cmName)
873
922
  return false;
874
- return this.aiAgentInfo?.name === cmName;
923
+ return this.engineAgentInfo?.name === cmName;
875
924
  }
876
925
  get displayMessage() {
877
926
  return this._stableDisplayMessage;
@@ -1483,6 +1532,47 @@ export class MessageItemComponent extends BaseAngularComponent {
1483
1532
  get hasAgentRun() {
1484
1533
  return !!this.message?.AgentID;
1485
1534
  }
1535
+ /**
1536
+ * Whether the agent-run gear's expanded panel would actually render anything —
1537
+ * used to gate the gear button itself so it doesn't appear as a dead control
1538
+ * that opens an empty popup. The panel hosts, in order: the run-details section
1539
+ * (only when `showAgentRunDetails`), associated tasks, and (non-last messages
1540
+ * only) the delete / rating / pin overflow. With `showAgentRunDetails=false` and
1541
+ * none of those enabled — a white-labeled end-user surface — the gear vanishes
1542
+ * entirely instead of opening onto nothing.
1543
+ *
1544
+ * Each arm below mirrors the corresponding template condition EXACTLY; keep them
1545
+ * in lockstep with `message-item.component.html`'s `.agent-details-panel` block.
1546
+ *
1547
+ * Defaults leave it unchanged: with `showAgentRunDetails=true` (the default) this
1548
+ * is unconditionally true, so the gear renders exactly as before — including the
1549
+ * pre-existing window where `agentRun` hasn't loaded yet and the panel is briefly
1550
+ * empty. That window is deliberately preserved (byte-identical defaults) rather
1551
+ * than fixed here.
1552
+ */
1553
+ get hasAgentDetailsPanelContent() {
1554
+ // Run-details enabled → gear shows for any agent-run message (the button
1555
+ // already AND-gates hasAgentRun), exactly as before the gate existed — even
1556
+ // before the agentRun object finishes loading. This keeps the default
1557
+ // (showAgentRunDetails=true) byte-identical.
1558
+ if (this.showAgentRunDetails)
1559
+ return true;
1560
+ if (this.detailTasks.length > 0)
1561
+ return true;
1562
+ if (!this.isLastMessage) {
1563
+ if (this.allowMessageDelete && this.isConversationOwner)
1564
+ return true;
1565
+ if (this.allowPinning)
1566
+ return true;
1567
+ // The rating only renders inside the template's `messageStatus === 'Complete'`
1568
+ // branch, so an incomplete/errored message must NOT count it as content —
1569
+ // otherwise the gear reappears over an empty panel, which is the whole bug
1570
+ // this getter exists to prevent.
1571
+ if (this.showMessageRating && this.messageStatus === 'Complete')
1572
+ return true;
1573
+ }
1574
+ return false;
1575
+ }
1486
1576
  /**
1487
1577
  * Toggle the agent details panel expansion
1488
1578
  */
@@ -1803,41 +1893,41 @@ export class MessageItemComponent extends BaseAngularComponent {
1803
1893
  return option?.label;
1804
1894
  }
1805
1895
  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)); };
1806
- static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MessageItemComponent, selectors: [["mj-conversation-message-item"]], inputs: { message: "message", conversation: "conversation", currentUser: "currentUser", allMessages: "allMessages", isProcessing: "isProcessing", artifact: "artifact", artifactVersion: "artifactVersion", artifacts: "artifacts", agentRun: "agentRun", userAvatarMap: "userAvatarMap", ratings: "ratings", isLastMessage: "isLastMessage", attachments: "attachments", messageExtraTemplate: "messageExtraTemplate", showAgentRunDetails: "showAgentRunDetails", showReactions: "showReactions", showMessageRating: "showMessageRating", allowPinning: "allowPinning", allowMessageEdit: "allowMessageEdit", allowMessageDelete: "allowMessageDelete" }, outputs: { editClicked: "editClicked", deleteClicked: "deleteClicked", retryClicked: "retryClicked", testFeedbackClicked: "testFeedbackClicked", artifactClicked: "artifactClicked", artifactActionPerformed: "artifactActionPerformed", messageEdited: "messageEdited", openEntityRecord: "openEntityRecord", suggestedResponseSelected: "suggestedResponseSelected", attachmentClicked: "attachmentClicked", diagnosticRequested: "diagnosticRequested", messagePinToggled: "messagePinToggled", beforeResponseFormSubmitted: "beforeResponseFormSubmitted", afterResponseFormSubmitted: "afterResponseFormSubmitted" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 25, vars: 25, consts: [[3, "click"], [1, "message-avatar"], [1, "avatar-circle"], [1, "fas", 3, "ngClass"], [1, "message-content"], [1, "message-header"], [1, "message-sender", 3, "title"], [1, "message-time"], [1, "message-status", 3, "error"], ["title", "Edit message", 1, "message-edit-icon"], [1, "time-pill", 3, "in-progress", "active", "complete", "failed"], ["title", "Provide Test Feedback", 1, "test-feedback-icon"], [1, "agent-run-icon", 3, "expanded", "title"], [1, "message-body"], [1, "message-edit-container"], [1, "message-footer"], [1, "agent-details-section"], [1, "agent-details-panel"], [1, "message-actions"], [1, "message-reactions"], ["alt", "User avatar", 1, "avatar-image", 3, "src"], [3, "class"], [1, "fas", "fa-user"], [1, "message-status"], [1, "status-text"], ["title", "Edit message", 1, "message-edit-icon", 3, "click"], [1, "fas", "fa-pen"], [1, "time-pill"], [1, "fas", "fa-clock"], ["title", "Provide Test Feedback", 1, "test-feedback-icon", 3, "click"], [1, "fas", "fa-flask"], [1, "agent-run-icon", 3, "click", "title"], [1, "fas", "fa-cog"], [1, "rating-badge"], [1, "message-text"], [3, "data", "enableCollapsibleHeadings"], [1, "edited-badge"], [1, "message-attachments"], [1, "artifact-wrapper", 3, "system-artifact"], [3, "FormDefinition", "Disabled"], [3, "commands", "disabled", "isLastMessage", "isConversationOwner"], [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"], [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"], [1, "edit-action-btn", "save", 3, "click"], [1, "fas", "fa-check"], [1, "edit-action-btn", "cancel", 3, "click"], [1, "fas", "fa-times"], [1, "edit-hint"], ["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"], [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"], ["title", "Retry", 1, "message-action-btn", "retry-btn", 3, "click"], [1, "fas", "fa-redo"], [1, "reaction-btn", 3, "click"], [1, "far", "fa-thumbs-up"], [1, "reaction-count"], [1, "far", "fa-comment"]], template: function MessageItemComponent_Template(rf, ctx) { if (rf & 1) {
1896
+ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MessageItemComponent, selectors: [["mj-conversation-message-item"]], inputs: { message: "message", conversation: "conversation", currentUser: "currentUser", allMessages: "allMessages", isProcessing: "isProcessing", artifact: "artifact", artifactVersion: "artifactVersion", artifacts: "artifacts", agentRun: "agentRun", userAvatarMap: "userAvatarMap", ratings: "ratings", isLastMessage: "isLastMessage", attachments: "attachments", messageExtraTemplate: "messageExtraTemplate", showAgentRunDetails: "showAgentRunDetails", showReactions: "showReactions", showMessageRating: "showMessageRating", allowPinning: "allowPinning", allowMessageEdit: "allowMessageEdit", allowMessageDelete: "allowMessageDelete", assistantDisplayName: "assistantDisplayName", assistantAvatarUrl: "assistantAvatarUrl" }, outputs: { editClicked: "editClicked", deleteClicked: "deleteClicked", retryClicked: "retryClicked", testFeedbackClicked: "testFeedbackClicked", artifactClicked: "artifactClicked", artifactActionPerformed: "artifactActionPerformed", messageEdited: "messageEdited", openEntityRecord: "openEntityRecord", suggestedResponseSelected: "suggestedResponseSelected", attachmentClicked: "attachmentClicked", diagnosticRequested: "diagnosticRequested", messagePinToggled: "messagePinToggled", beforeResponseFormSubmitted: "beforeResponseFormSubmitted", afterResponseFormSubmitted: "afterResponseFormSubmitted" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 25, vars: 27, 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"], ["title", "Edit message", 1, "message-edit-icon"], [1, "time-pill", 3, "in-progress", "active", "complete", "failed"], ["title", "Provide Test Feedback", 1, "test-feedback-icon"], [1, "agent-run-icon", 3, "expanded", "title"], [1, "message-body"], [1, "message-edit-container"], [1, "message-footer"], [1, "agent-details-section"], [1, "agent-details-panel"], [1, "message-actions"], [1, "message-reactions"], ["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"], ["title", "Edit message", 1, "message-edit-icon", 3, "click"], [1, "fas", "fa-pen"], [1, "time-pill"], [1, "fas", "fa-clock"], ["title", "Provide Test Feedback", 1, "test-feedback-icon", 3, "click"], [1, "fas", "fa-flask"], [1, "agent-run-icon", 3, "click", "title"], [1, "fas", "fa-cog"], [1, "rating-badge"], [1, "message-text"], [3, "data", "enableCollapsibleHeadings"], [1, "edited-badge"], [1, "message-attachments"], [1, "artifact-wrapper", 3, "system-artifact"], [3, "FormDefinition", "Disabled"], [3, "commands", "disabled", "isLastMessage", "isConversationOwner"], [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"], [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"], [1, "edit-action-btn", "save", 3, "click"], [1, "fas", "fa-check"], [1, "edit-action-btn", "cancel", 3, "click"], [1, "fas", "fa-times"], [1, "edit-hint"], ["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"], [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"], ["title", "Retry", 1, "message-action-btn", "retry-btn", 3, "click"], [1, "fas", "fa-redo"], [1, "reaction-btn", 3, "click"], [1, "far", "fa-thumbs-up"], [1, "reaction-count"], [1, "far", "fa-comment"]], template: function MessageItemComponent_Template(rf, ctx) { if (rf & 1) {
1807
1897
  i0.ɵɵelementStart(0, "div", 0);
1808
1898
  i0.ɵɵlistener("click", function MessageItemComponent_Template_div_click_0_listener($event) { return ctx.onMessageBubbleClick($event); });
1809
1899
  i0.ɵɵelementStart(1, "div", 1)(2, "div", 2);
1810
- i0.ɵɵconditionalCreate(3, MessageItemComponent_Conditional_3_Template, 3, 1)(4, MessageItemComponent_Conditional_4_Template, 1, 1, "i", 3);
1900
+ i0.ɵɵconditionalCreate(3, MessageItemComponent_Conditional_3_Template, 3, 1)(4, MessageItemComponent_Conditional_4_Template, 2, 1);
1811
1901
  i0.ɵɵelementEnd()();
1812
- i0.ɵɵelementStart(5, "div", 4)(6, "div", 5)(7, "span", 6);
1902
+ i0.ɵɵelementStart(5, "div", 3)(6, "div", 4)(7, "span", 5);
1813
1903
  i0.ɵɵtext(8);
1814
1904
  i0.ɵɵelementEnd();
1815
- i0.ɵɵelementStart(9, "span", 7);
1905
+ i0.ɵɵelementStart(9, "span", 6);
1816
1906
  i0.ɵɵtext(10);
1817
1907
  i0.ɵɵpipe(11, "date");
1818
1908
  i0.ɵɵelementEnd();
1819
- i0.ɵɵconditionalCreate(12, MessageItemComponent_Conditional_12_Template, 4, 4, "span", 8);
1820
- i0.ɵɵconditionalCreate(13, MessageItemComponent_Conditional_13_Template, 2, 0, "span", 9);
1821
- i0.ɵɵconditionalCreate(14, MessageItemComponent_Conditional_14_Template, 3, 9, "span", 10);
1822
- i0.ɵɵconditionalCreate(15, MessageItemComponent_Conditional_15_Template, 2, 0, "span", 11);
1823
- i0.ɵɵconditionalCreate(16, MessageItemComponent_Conditional_16_Template, 3, 4, "span", 12);
1909
+ i0.ɵɵconditionalCreate(12, MessageItemComponent_Conditional_12_Template, 4, 4, "span", 7);
1910
+ i0.ɵɵconditionalCreate(13, MessageItemComponent_Conditional_13_Template, 2, 0, "span", 8);
1911
+ i0.ɵɵconditionalCreate(14, MessageItemComponent_Conditional_14_Template, 3, 9, "span", 9);
1912
+ i0.ɵɵconditionalCreate(15, MessageItemComponent_Conditional_15_Template, 2, 0, "span", 10);
1913
+ i0.ɵɵconditionalCreate(16, MessageItemComponent_Conditional_16_Template, 3, 4, "span", 11);
1824
1914
  i0.ɵɵelementEnd();
1825
- i0.ɵɵelementStart(17, "div", 13);
1915
+ i0.ɵɵelementStart(17, "div", 12);
1826
1916
  i0.ɵɵconditionalCreate(18, MessageItemComponent_Conditional_18_Template, 9, 7);
1827
- i0.ɵɵconditionalCreate(19, MessageItemComponent_Conditional_19_Template, 11, 1, "div", 14);
1917
+ i0.ɵɵconditionalCreate(19, MessageItemComponent_Conditional_19_Template, 11, 1, "div", 13);
1828
1918
  i0.ɵɵelementEnd();
1829
- i0.ɵɵconditionalCreate(20, MessageItemComponent_Conditional_20_Template, 3, 2, "div", 15);
1830
- i0.ɵɵelementStart(21, "div", 16);
1831
- i0.ɵɵconditionalCreate(22, MessageItemComponent_Conditional_22_Template, 4, 3, "div", 17);
1919
+ i0.ɵɵconditionalCreate(20, MessageItemComponent_Conditional_20_Template, 3, 2, "div", 14);
1920
+ i0.ɵɵelementStart(21, "div", 15);
1921
+ i0.ɵɵconditionalCreate(22, MessageItemComponent_Conditional_22_Template, 4, 3, "div", 16);
1832
1922
  i0.ɵɵelementEnd();
1833
- i0.ɵɵconditionalCreate(23, MessageItemComponent_Conditional_23_Template, 4, 0, "div", 18);
1834
- i0.ɵɵconditionalCreate(24, MessageItemComponent_Conditional_24_Template, 9, 0, "div", 19);
1923
+ i0.ɵɵconditionalCreate(23, MessageItemComponent_Conditional_23_Template, 4, 0, "div", 17);
1924
+ i0.ɵɵconditionalCreate(24, MessageItemComponent_Conditional_24_Template, 9, 0, "div", 18);
1835
1925
  i0.ɵɵelementEnd()();
1836
1926
  } if (rf & 2) {
1837
1927
  i0.ɵɵclassMap(ctx.messageClasses);
1838
1928
  i0.ɵɵattribute("data-message-id", ctx.message.ID);
1839
1929
  i0.ɵɵadvance(2);
1840
- i0.ɵɵclassProp("ai-avatar", ctx.isAIMessage)("user-avatar", ctx.isUserMessage);
1930
+ i0.ɵɵclassProp("ai-avatar", ctx.isAIMessage)("user-avatar", ctx.isUserMessage)("avatar-has-image", ctx.isAIMessage && ctx.effectiveAssistantAvatarUrl !== null);
1841
1931
  i0.ɵɵadvance();
1842
1932
  i0.ɵɵconditional(ctx.isUserMessage ? 3 : ctx.isAIMessage ? 4 : -1);
1843
1933
  i0.ɵɵadvance(4);
@@ -1845,7 +1935,7 @@ export class MessageItemComponent extends BaseAngularComponent {
1845
1935
  i0.ɵɵadvance();
1846
1936
  i0.ɵɵtextInterpolate1(" ", ctx.isAIMessage ? (ctx.aiAgentInfo == null ? null : ctx.aiAgentInfo.name) || "AI Assistant" : ctx.messageSenderName, " ");
1847
1937
  i0.ɵɵadvance(2);
1848
- i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(11, 22, ctx.message.__mj_CreatedAt, "short"));
1938
+ i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(11, 24, ctx.message.__mj_CreatedAt, "short"));
1849
1939
  i0.ɵɵadvance(2);
1850
1940
  i0.ɵɵconditional(ctx.isUserMessage && ctx.messageStatus !== "Complete" ? 12 : -1);
1851
1941
  i0.ɵɵadvance();
@@ -1855,7 +1945,7 @@ export class MessageItemComponent extends BaseAngularComponent {
1855
1945
  i0.ɵɵadvance();
1856
1946
  i0.ɵɵconditional(ctx.message.TestRunID ? 15 : -1);
1857
1947
  i0.ɵɵadvance();
1858
- i0.ɵɵconditional(ctx.hasAgentRun ? 16 : -1);
1948
+ i0.ɵɵconditional(ctx.hasAgentRun && ctx.hasAgentDetailsPanelContent ? 16 : -1);
1859
1949
  i0.ɵɵadvance(2);
1860
1950
  i0.ɵɵconditional(!ctx.isEditing ? 18 : -1);
1861
1951
  i0.ɵɵadvance();
@@ -1868,11 +1958,11 @@ export class MessageItemComponent extends BaseAngularComponent {
1868
1958
  i0.ɵɵconditional(ctx.messageStatus === "Error" && ctx.isAIMessage && !ctx.isProcessing && !ctx.isEditing ? 23 : -1);
1869
1959
  i0.ɵɵadvance();
1870
1960
  i0.ɵɵconditional(ctx.showReactions && !ctx.isProcessing && !ctx.isInProgressAIMessage && !ctx.isEditing ? 24 : -1);
1871
- } }, dependencies: [i5.NgClass, i5.NgTemplateOutlet, i6.DefaultValueAccessor, i6.NgControlStatus, i6.NgModel, i7.ArtifactMessageCardComponent, i4.MarkdownComponent, i8.DynamicFormComponent, i9.ActionableCommandsComponent, i10.ConversationMessageRatingComponent, i11.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\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.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\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.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\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\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\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\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\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\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\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\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\n.avatar-circle.user-avatar[_ngcontent-%COMP%] {\n border-radius: 50%;\n background-color: var(--mj-text-primary);\n}\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.avatar-image[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 50%;\n}\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\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\n.time-pill[_ngcontent-%COMP%], \n.test-feedback-icon[_ngcontent-%COMP%], \n.agent-run-icon[_ngcontent-%COMP%], \n.message-edit-icon[_ngcontent-%COMP%] {\n margin-left: auto;\n}\n.time-pill[_ngcontent-%COMP%] ~ .test-feedback-icon[_ngcontent-%COMP%], \n.time-pill[_ngcontent-%COMP%] ~ .agent-run-icon[_ngcontent-%COMP%], \n.test-feedback-icon[_ngcontent-%COMP%] ~ .agent-run-icon[_ngcontent-%COMP%], \n.message-edit-icon[_ngcontent-%COMP%] ~ .test-feedback-icon[_ngcontent-%COMP%], \n.message-edit-icon[_ngcontent-%COMP%] ~ .agent-run-icon[_ngcontent-%COMP%] {\n margin-left: 8px;\n}\n\n\n\n.message-edit-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 opacity: 0;\n}\n.message-item[_ngcontent-%COMP%]:hover .message-edit-icon[_ngcontent-%COMP%], \n.message-edit-icon[_ngcontent-%COMP%]:focus-visible {\n opacity: 1;\n}\n.message-edit-icon[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n}\n.message-edit-icon[_ngcontent-%COMP%] i.fa-pen[_ngcontent-%COMP%] {\n font-size: 12px;\n}\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.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.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\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.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\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\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\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\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\n.message-reactions[_ngcontent-%COMP%] {\n display: none; \n\n}\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.message-actions[_ngcontent-%COMP%] {\n position: absolute;\n bottom: 8px;\n right: 8px;\n display: flex;\n gap: 2px;\n opacity: 0;\n transform: translateY(4px);\n transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n padding: 4px;\n box-shadow: var(--mj-shadow-md);\n pointer-events: none;\n}\n\n.message-item[_ngcontent-%COMP%]:hover .message-actions[_ngcontent-%COMP%] {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n}\n\n.message-action-btn[_ngcontent-%COMP%] {\n padding: 6px 8px;\n background: transparent;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n color: var(--mj-text-secondary);\n font-size: 13px;\n transition: all 150ms ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 32px;\n height: 32px;\n}\n\n.message-action-btn[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.message-action-btn.danger[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.message-action-btn.retry-btn[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n font-weight: 600;\n gap: 6px;\n padding: 6px 12px;\n min-width: auto;\n}\n\n.message-action-btn.retry-btn[_ngcontent-%COMP%]:hover {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary-hover);\n}\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\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 gap: 8px;\n}\n\n.edit-action-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.edit-action-btn.save[_ngcontent-%COMP%] {\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.edit-action-btn.save[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-brand-primary-hover);\n}\n\n.edit-action-btn.cancel[_ngcontent-%COMP%] {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.edit-action-btn.cancel[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-border-default);\n color: var(--mj-text-primary);\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\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.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\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\n\n.agent-run-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.agent-run-icon[_ngcontent-%COMP%] i.fa-cog[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n.agent-run-icon[_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\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\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\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\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\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\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\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\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\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\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\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\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\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\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\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\n.agent-details-section[_ngcontent-%COMP%] {\n margin-top: 8px;\n}\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 .message-actions[_ngcontent-%COMP%] {\n gap: 1px;\n padding: 3px;\n }\n\n .message-action-btn[_ngcontent-%COMP%] {\n min-width: 28px;\n height: 28px;\n font-size: 12px;\n }\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\n[_nghost-%COMP%] .form-response-pill {\n margin: 0 3px;\n transition: all 0.2s ease;\n}\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\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\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\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\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\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\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\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\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\n[_nghost-%COMP%] .form-response-pill .field-answer-markdown {\n font-style: normal; \n\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\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\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\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\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\n.mj-icon-skip-brain[_ngcontent-%COMP%]::before {\n content: \"\uD83E\uDDE0\";\n font-size: 1.2em;\n}\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\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\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\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\n\n.mj-icon-data-analyst[_ngcontent-%COMP%]::before {\n content: \"\uD83D\uDCCA\";\n font-size: 1.1em;\n}\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\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\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\n\n\n\n"] });
1961
+ } }, dependencies: [i5.NgClass, i5.NgTemplateOutlet, i6.DefaultValueAccessor, i6.NgControlStatus, i6.NgModel, i7.ArtifactMessageCardComponent, i4.MarkdownComponent, i8.DynamicFormComponent, i9.ActionableCommandsComponent, i10.ConversationMessageRatingComponent, i11.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\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.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\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.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\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\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\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\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\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\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\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\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\n.avatar-circle.user-avatar[_ngcontent-%COMP%] {\n border-radius: 50%;\n background-color: var(--mj-text-primary);\n}\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\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-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\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\n.time-pill[_ngcontent-%COMP%], \n.test-feedback-icon[_ngcontent-%COMP%], \n.agent-run-icon[_ngcontent-%COMP%], \n.message-edit-icon[_ngcontent-%COMP%] {\n margin-left: auto;\n}\n.time-pill[_ngcontent-%COMP%] ~ .test-feedback-icon[_ngcontent-%COMP%], \n.time-pill[_ngcontent-%COMP%] ~ .agent-run-icon[_ngcontent-%COMP%], \n.test-feedback-icon[_ngcontent-%COMP%] ~ .agent-run-icon[_ngcontent-%COMP%], \n.message-edit-icon[_ngcontent-%COMP%] ~ .test-feedback-icon[_ngcontent-%COMP%], \n.message-edit-icon[_ngcontent-%COMP%] ~ .agent-run-icon[_ngcontent-%COMP%] {\n margin-left: 8px;\n}\n\n\n\n.message-edit-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 opacity: 0;\n}\n.message-item[_ngcontent-%COMP%]:hover .message-edit-icon[_ngcontent-%COMP%], \n.message-edit-icon[_ngcontent-%COMP%]:focus-visible {\n opacity: 1;\n}\n.message-edit-icon[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n}\n.message-edit-icon[_ngcontent-%COMP%] i.fa-pen[_ngcontent-%COMP%] {\n font-size: 12px;\n}\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.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.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\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.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\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\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\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\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\n.message-reactions[_ngcontent-%COMP%] {\n display: none; \n\n}\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.message-actions[_ngcontent-%COMP%] {\n position: absolute;\n bottom: 8px;\n right: 8px;\n display: flex;\n gap: 2px;\n opacity: 0;\n transform: translateY(4px);\n transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n padding: 4px;\n box-shadow: var(--mj-shadow-md);\n pointer-events: none;\n}\n\n.message-item[_ngcontent-%COMP%]:hover .message-actions[_ngcontent-%COMP%] {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n}\n\n.message-action-btn[_ngcontent-%COMP%] {\n padding: 6px 8px;\n background: transparent;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n color: var(--mj-text-secondary);\n font-size: 13px;\n transition: all 150ms ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 32px;\n height: 32px;\n}\n\n.message-action-btn[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.message-action-btn.danger[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.message-action-btn.retry-btn[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n font-weight: 600;\n gap: 6px;\n padding: 6px 12px;\n min-width: auto;\n}\n\n.message-action-btn.retry-btn[_ngcontent-%COMP%]:hover {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary-hover);\n}\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\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 gap: 8px;\n}\n\n.edit-action-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.edit-action-btn.save[_ngcontent-%COMP%] {\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.edit-action-btn.save[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-brand-primary-hover);\n}\n\n.edit-action-btn.cancel[_ngcontent-%COMP%] {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.edit-action-btn.cancel[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-border-default);\n color: var(--mj-text-primary);\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\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.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\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\n\n.agent-run-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.agent-run-icon[_ngcontent-%COMP%] i.fa-cog[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n.agent-run-icon[_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\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\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\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\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\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\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\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\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\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\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\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\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\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\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\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\n.agent-details-section[_ngcontent-%COMP%] {\n margin-top: 8px;\n}\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 .message-actions[_ngcontent-%COMP%] {\n gap: 1px;\n padding: 3px;\n }\n\n .message-action-btn[_ngcontent-%COMP%] {\n min-width: 28px;\n height: 28px;\n font-size: 12px;\n }\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\n[_nghost-%COMP%] .form-response-pill {\n margin: 0 3px;\n transition: all 0.2s ease;\n}\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\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\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\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\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\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\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\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\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\n[_nghost-%COMP%] .form-response-pill .field-answer-markdown {\n font-style: normal; \n\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\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\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\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\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\n.mj-icon-skip-brain[_ngcontent-%COMP%]::before {\n content: \"\uD83E\uDDE0\";\n font-size: 1.2em;\n}\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\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\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\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\n\n.mj-icon-data-analyst[_ngcontent-%COMP%]::before {\n content: \"\uD83D\uDCCA\";\n font-size: 1.1em;\n}\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\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\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\n\n\n\n"] });
1872
1962
  }
1873
1963
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MessageItemComponent, [{
1874
1964
  type: Component,
1875
- 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 @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 <i class=\"fas\" [ngClass]=\"aiAgentInfo?.iconClass || 'fa-robot'\"></i>\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 <!-- Edit (owner's completed user messages) \u2014 opens the inline editor; the server\n sets OriginalMessageChanged when the text actually changes on save -->\n @if (allowMessageEdit && isUserMessage && isConversationOwner && !isEditing && messageStatus === 'Complete') {\n <span class=\"message-edit-icon\" (click)=\"onEditClick()\" title=\"Edit message\">\n <i class=\"fas fa-pen\"></i>\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'\"\n [class.failed]=\"messageStatus === 'Error'\">\n <i class=\"fas fa-clock\"></i>\n {{ timePillText }}\n </span>\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 <!-- Agent run icon (clickable to expand details) - always rightmost when present -->\n @if (hasAgentRun) {\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 <!-- 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 <!-- Agent Response Form (shown only for last message by owner) -->\n @if (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 (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 class=\"edit-action-btn save\" (click)=\"saveEdit()\">\n <i class=\"fas fa-check\"></i>\n Save\n </button>\n <button class=\"edit-action-btn cancel\" (click)=\"cancelEditing()\">\n <i class=\"fas fa-times\"></i>\n Cancel\n </button>\n </div>\n <div class=\"edit-hint\">\n Press Enter to save, Shift+Enter for new line, Escape to cancel\n </div>\n </div>\n }\n </div>\n\n <!-- Message Footer: only rendered on the last message.\n Non-last messages have no footer \u2014 pin/delete/rating live in the gear panel. -->\n @if (!isEditing && isLastMessage && (isConversationOwner || (isAIMessage && messageStatus === 'Complete'))) {\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') {\n <div class=\"ai-message-actions\">\n <!-- Thumbs visible inline only on the latest AI message, left of pin -->\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\">\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 }\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) {\n <div class=\"agent-details-content\">\n <div class=\"agent-details-header\">\n <i class=\"fas fa-chart-line\"></i>\n <span>\n <a class=\"agent-name-link\" (click)=\"openAgentRecord()\" title=\"Open agent details\">\n {{ aiAgentInfo?.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; gated so a white-labeled end-user surface can hide it\n while keeping the panel shell (which also hosts delete/pin/rating below). -->\n @if (showAgentRunDetails) {\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 }\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\">\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 <!-- Rating component moved to message footer (lines 113-134) -->\n\n <!-- Removed message-actions hover panel - actions now in gear icon dropdown -->\n <!-- Retry button kept for critical error recovery on failed messages -->\n @if (messageStatus === 'Error' && isAIMessage && !isProcessing && !isEditing) {\n <div class=\"message-actions\">\n <button class=\"message-action-btn retry-btn\" (click)=\"onRetryClick()\" title=\"Retry\">\n <i class=\"fas fa-redo\"></i>\n Retry\n </button>\n </div>\n }\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>", 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.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\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/* 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.avatar-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 50%;\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 three 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.agent-run-icon,\n.message-edit-icon {\n margin-left: auto;\n}\n.time-pill ~ .test-feedback-icon,\n.time-pill ~ .agent-run-icon,\n.test-feedback-icon ~ .agent-run-icon,\n.message-edit-icon ~ .test-feedback-icon,\n.message-edit-icon ~ .agent-run-icon {\n margin-left: 8px;\n}\n\n/* Edit pencil on user messages \u2014 revealed on message hover to keep headers quiet */\n.message-edit-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 opacity: 0;\n}\n.message-item:hover .message-edit-icon,\n.message-edit-icon:focus-visible {\n opacity: 1;\n}\n.message-edit-icon:hover {\n color: var(--mj-text-secondary);\n}\n.message-edit-icon i.fa-pen {\n font-size: 12px;\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/* 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/* 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/* 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/* 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.message-actions {\n position: absolute;\n bottom: 8px;\n right: 8px;\n display: flex;\n gap: 2px;\n opacity: 0;\n transform: translateY(4px);\n transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n padding: 4px;\n box-shadow: var(--mj-shadow-md);\n pointer-events: none;\n}\n\n.message-item:hover .message-actions {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n}\n\n.message-action-btn {\n padding: 6px 8px;\n background: transparent;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n color: var(--mj-text-secondary);\n font-size: 13px;\n transition: all 150ms ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 32px;\n height: 32px;\n}\n\n.message-action-btn:hover {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.message-action-btn.danger:hover {\n background-color: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.message-action-btn.retry-btn {\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n font-weight: 600;\n gap: 6px;\n padding: 6px 12px;\n min-width: auto;\n}\n\n.message-action-btn.retry-btn:hover {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary-hover);\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 gap: 8px;\n}\n\n.edit-action-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.edit-action-btn.save {\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.edit-action-btn.save:hover {\n background-color: var(--mj-brand-primary-hover);\n}\n\n.edit-action-btn.cancel {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.edit-action-btn.cancel:hover {\n background-color: var(--mj-border-default);\n color: var(--mj-text-primary);\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.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 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.agent-run-icon i.fa-cog {\n font-size: 13px;\n}\n\n.agent-run-icon: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 .message-actions {\n gap: 1px;\n padding: 3px;\n }\n\n .message-action-btn {\n min-width: 28px;\n height: 28px;\n font-size: 12px;\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 * 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"] }]
1965
+ 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 <!-- Edit (owner's completed user messages) \u2014 opens the inline editor; the server\n sets OriginalMessageChanged when the text actually changes on save -->\n @if (allowMessageEdit && isUserMessage && isConversationOwner && !isEditing && messageStatus === 'Complete') {\n <span class=\"message-edit-icon\" (click)=\"onEditClick()\" title=\"Edit message\">\n <i class=\"fas fa-pen\"></i>\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'\"\n [class.failed]=\"messageStatus === 'Error'\">\n <i class=\"fas fa-clock\"></i>\n {{ timePillText }}\n </span>\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 <!-- 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 <!-- 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 <!-- Agent Response Form (shown only for last message by owner) -->\n @if (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 (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 class=\"edit-action-btn save\" (click)=\"saveEdit()\">\n <i class=\"fas fa-check\"></i>\n Save\n </button>\n <button class=\"edit-action-btn cancel\" (click)=\"cancelEditing()\">\n <i class=\"fas fa-times\"></i>\n Cancel\n </button>\n </div>\n <div class=\"edit-hint\">\n Press Enter to save, Shift+Enter for new line, Escape to cancel\n </div>\n </div>\n }\n </div>\n\n <!-- Message Footer: only rendered on the last message.\n Non-last messages have no footer \u2014 pin/delete/rating live in the gear panel. -->\n @if (!isEditing && isLastMessage && (isConversationOwner || (isAIMessage && messageStatus === 'Complete'))) {\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') {\n <div class=\"ai-message-actions\">\n <!-- Thumbs visible inline only on the latest AI message, left of pin -->\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\">\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 }\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\">\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 <!-- Rating component moved to message footer (lines 113-134) -->\n\n <!-- Removed message-actions hover panel - actions now in gear icon dropdown -->\n <!-- Retry button kept for critical error recovery on failed messages -->\n @if (messageStatus === 'Error' && isAIMessage && !isProcessing && !isEditing) {\n <div class=\"message-actions\">\n <button class=\"message-action-btn retry-btn\" (click)=\"onRetryClick()\" title=\"Retry\">\n <i class=\"fas fa-redo\"></i>\n Retry\n </button>\n </div>\n }\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>", 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.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\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/* 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/* 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 three 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.agent-run-icon,\n.message-edit-icon {\n margin-left: auto;\n}\n.time-pill ~ .test-feedback-icon,\n.time-pill ~ .agent-run-icon,\n.test-feedback-icon ~ .agent-run-icon,\n.message-edit-icon ~ .test-feedback-icon,\n.message-edit-icon ~ .agent-run-icon {\n margin-left: 8px;\n}\n\n/* Edit pencil on user messages \u2014 revealed on message hover to keep headers quiet */\n.message-edit-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 opacity: 0;\n}\n.message-item:hover .message-edit-icon,\n.message-edit-icon:focus-visible {\n opacity: 1;\n}\n.message-edit-icon:hover {\n color: var(--mj-text-secondary);\n}\n.message-edit-icon i.fa-pen {\n font-size: 12px;\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/* 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/* 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/* 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/* 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.message-actions {\n position: absolute;\n bottom: 8px;\n right: 8px;\n display: flex;\n gap: 2px;\n opacity: 0;\n transform: translateY(4px);\n transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n padding: 4px;\n box-shadow: var(--mj-shadow-md);\n pointer-events: none;\n}\n\n.message-item:hover .message-actions {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n}\n\n.message-action-btn {\n padding: 6px 8px;\n background: transparent;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n color: var(--mj-text-secondary);\n font-size: 13px;\n transition: all 150ms ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 32px;\n height: 32px;\n}\n\n.message-action-btn:hover {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.message-action-btn.danger:hover {\n background-color: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.message-action-btn.retry-btn {\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n font-weight: 600;\n gap: 6px;\n padding: 6px 12px;\n min-width: auto;\n}\n\n.message-action-btn.retry-btn:hover {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary-hover);\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 gap: 8px;\n}\n\n.edit-action-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.edit-action-btn.save {\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.edit-action-btn.save:hover {\n background-color: var(--mj-brand-primary-hover);\n}\n\n.edit-action-btn.cancel {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.edit-action-btn.cancel:hover {\n background-color: var(--mj-border-default);\n color: var(--mj-text-primary);\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.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 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.agent-run-icon i.fa-cog {\n font-size: 13px;\n}\n\n.agent-run-icon: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 .message-actions {\n gap: 1px;\n padding: 3px;\n }\n\n .message-action-btn {\n min-width: 28px;\n height: 28px;\n font-size: 12px;\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 * 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"] }]
1876
1966
  }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.MentionParserService }, { type: i2.UICommandHandlerService }, { type: i3.ConversationAgentService }, { type: i4.MarkdownService }], { message: [{
1877
1967
  type: Input
1878
1968
  }], conversation: [{
@@ -1913,6 +2003,10 @@ export class MessageItemComponent extends BaseAngularComponent {
1913
2003
  type: Input
1914
2004
  }], allowMessageDelete: [{
1915
2005
  type: Input
2006
+ }], assistantDisplayName: [{
2007
+ type: Input
2008
+ }], assistantAvatarUrl: [{
2009
+ type: Input
1916
2010
  }], editClicked: [{
1917
2011
  type: Output
1918
2012
  }], deleteClicked: [{