@memberjunction/ng-conversations 2.121.0 → 2.122.1

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 (60) hide show
  1. package/dist/lib/components/artifact/artifact-share-modal.component.js +2 -2
  2. package/dist/lib/components/collection/artifact-collection-picker-modal.component.d.ts.map +1 -1
  3. package/dist/lib/components/collection/artifact-collection-picker-modal.component.js +18 -17
  4. package/dist/lib/components/collection/artifact-collection-picker-modal.component.js.map +1 -1
  5. package/dist/lib/components/collection/collection-share-modal.component.js +2 -2
  6. package/dist/lib/components/collection/collections-full-view.component.d.ts +29 -3
  7. package/dist/lib/components/collection/collections-full-view.component.d.ts.map +1 -1
  8. package/dist/lib/components/collection/collections-full-view.component.js +328 -222
  9. package/dist/lib/components/collection/collections-full-view.component.js.map +1 -1
  10. package/dist/lib/components/conversation/conversation-chat-area.component.js +74 -77
  11. package/dist/lib/components/conversation/conversation-chat-area.component.js.map +1 -1
  12. package/dist/lib/components/conversation/conversation-empty-state.component.js +13 -14
  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.map +1 -1
  15. package/dist/lib/components/conversation/conversation-list.component.js +4 -7
  16. package/dist/lib/components/conversation/conversation-list.component.js.map +1 -1
  17. package/dist/lib/components/export/export-modal.component.d.ts.map +1 -1
  18. package/dist/lib/components/export/export-modal.component.js +8 -11
  19. package/dist/lib/components/export/export-modal.component.js.map +1 -1
  20. package/dist/lib/components/library/library-full-view.component.d.ts.map +1 -1
  21. package/dist/lib/components/library/library-full-view.component.js +9 -11
  22. package/dist/lib/components/library/library-full-view.component.js.map +1 -1
  23. package/dist/lib/components/members/members-modal.component.d.ts.map +1 -1
  24. package/dist/lib/components/members/members-modal.component.js +9 -12
  25. package/dist/lib/components/members/members-modal.component.js.map +1 -1
  26. package/dist/lib/components/mention/mention-editor.component.js +2 -2
  27. package/dist/lib/components/message/message-input-box.component.js +2 -2
  28. package/dist/lib/components/message/message-input.component.js +2 -2
  29. package/dist/lib/components/message/message-item.component.js +2 -2
  30. package/dist/lib/components/search/search-panel.component.js +8 -10
  31. package/dist/lib/components/search/search-panel.component.js.map +1 -1
  32. package/dist/lib/components/task/tasks-full-view.component.d.ts +2 -1
  33. package/dist/lib/components/task/tasks-full-view.component.d.ts.map +1 -1
  34. package/dist/lib/components/task/tasks-full-view.component.js +8 -1
  35. package/dist/lib/components/task/tasks-full-view.component.js.map +1 -1
  36. package/dist/lib/components/toast/toast.component.js +2 -2
  37. package/dist/lib/components/toast/toast.component.js.map +1 -1
  38. package/dist/lib/components/workspace/conversation-workspace.component.d.ts.map +1 -1
  39. package/dist/lib/components/workspace/conversation-workspace.component.js +30 -29
  40. package/dist/lib/components/workspace/conversation-workspace.component.js.map +1 -1
  41. package/dist/lib/conversations.module.d.ts +8 -7
  42. package/dist/lib/conversations.module.d.ts.map +1 -1
  43. package/dist/lib/conversations.module.js +5 -1
  44. package/dist/lib/conversations.module.js.map +1 -1
  45. package/dist/lib/models/navigation-request.model.d.ts +26 -0
  46. package/dist/lib/models/navigation-request.model.d.ts.map +1 -0
  47. package/dist/lib/models/navigation-request.model.js +2 -0
  48. package/dist/lib/models/navigation-request.model.js.map +1 -0
  49. package/dist/lib/services/conversation-state.service.d.ts +11 -1
  50. package/dist/lib/services/conversation-state.service.d.ts.map +1 -1
  51. package/dist/lib/services/conversation-state.service.js +20 -1
  52. package/dist/lib/services/conversation-state.service.js.map +1 -1
  53. package/dist/lib/services/mention-autocomplete.service.d.ts.map +1 -1
  54. package/dist/lib/services/mention-autocomplete.service.js +0 -7
  55. package/dist/lib/services/mention-autocomplete.service.js.map +1 -1
  56. package/dist/public-api.d.ts +3 -0
  57. package/dist/public-api.d.ts.map +1 -1
  58. package/dist/public-api.js +3 -0
  59. package/dist/public-api.js.map +1 -1
  60. package/package.json +18 -16
package/dist/lib/components/message/message-item.component.js CHANGED
@@ -1502,11 +1502,11 @@ export class MessageItemComponent extends BaseAngularComponent {
1502
1502
  i0.ɵɵconditional(ctx.messageStatus === "Error" && ctx.isAIMessage && !ctx.isProcessing && !ctx.isEditing ? 23 : -1);
1503
1503
  i0.ɵɵadvance();
1504
1504
  i0.ɵɵproperty("ngIf", !ctx.isProcessing && !ctx.isInProgressAIMessage && !ctx.isEditing);
1505
- } }, dependencies: [i4.NgClass, i4.NgForOf, i4.NgIf, i5.DefaultValueAccessor, i5.NgControlStatus, i5.NgModel, i6.ArtifactMessageCardComponent, i7.MarkdownComponent, i8.SuggestedResponsesComponent, i9.AgentResponseFormComponent, i10.ActionableCommandsComponent, i11.ConversationMessageRatingComponent, i12.TaskWidgetComponent, i4.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.message-item.pinned[_ngcontent-%COMP%] {\n border-left: 3px solid #0076B6;\n background-color: rgba(0, 118, 182, 0.08);\n}\n\n.message-item.in-progress[_ngcontent-%COMP%] {\n background: linear-gradient(90deg,\n rgba(59, 130, 246, 0.08) 0%,\n rgba(59, 130, 246, 0.12) 50%,\n rgba(59, 130, 246, 0.08) 100%);\n background-size: 200% 100%;\n animation: _ngcontent-%COMP%_shimmer 2s ease-in-out infinite;\n border-left: 3px solid #3B82F6;\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: #1F2937;\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 rgba(59, 130, 246, 0.7);\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 rgba(59, 130, 246, 0.7);\n }\n 50% {\n box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);\n }\n}\n\n.message-item[_ngcontent-%COMP%]:hover {\n background-color: rgba(0, 0, 0, 0.02);\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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: 2px solid rgba(102, 126, 234, 0.4);\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n[_nghost-%COMP%] .mention-badge.user {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n color: white;\n border: 2px solid rgba(240, 147, 251, 0.4);\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\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 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: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\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: white;\n}\n\n\n\n.avatar-circle.user-avatar[_ngcontent-%COMP%] {\n border-radius: 50%;\n background-color: #333;\n}\n\n\n\n.avatar-circle.ai-avatar[_ngcontent-%COMP%] {\n border-radius: 8px;\n background-color: #9333EA; \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: #9CA3AF;\n background: #F3F4F6;\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: #333;\n}\n\n\n\n.agent-badge[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 2px 8px;\n background: #F3F4F6;\n border-radius: 10px;\n font-size: 11px;\n color: #6B7280;\n font-weight: 500;\n}\n\n.message-time[_ngcontent-%COMP%] {\n color: #9CA3AF;\n font-size: 12px;\n font-weight: 400;\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 margin-left: auto;\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: #E0F2FE;\n color: #0369A1;\n}\n\n\n\n.time-pill.in-progress[_ngcontent-%COMP%] {\n background: #F3E8FF;\n color: #7C3AED;\n}\n\n\n\n.time-pill.active[_ngcontent-%COMP%] {\n background: #E0E7FF;\n color: #4F46E5;\n}\n\n\n\n.time-pill.failed[_ngcontent-%COMP%] {\n background: #FEE2E2;\n color: #DC2626;\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: #E0F2FE;\n border-radius: 10px;\n font-size: 11px;\n color: #0369A1;\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: #AAA;\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: #333;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n\n\n.message-text[_ngcontent-%COMP%] markdown[_ngcontent-%COMP%] > [_ngcontent-%COMP%]:first-child {\n margin-top: 0;\n}\n\n.message-text[_ngcontent-%COMP%] markdown[_ngcontent-%COMP%] > [_ngcontent-%COMP%]: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 rgba(0, 0, 0, 0.08);\n border-radius: 8px;\n background: linear-gradient(135deg, #F8F7FF 0%, #F3F2FF 100%);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n max-width: 500px;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\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: linear-gradient(180deg, #8B5CF6 0%, #6366F1 100%);\n opacity: 1;\n}\n\n.artifact-card[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #F3F2FF 0%, #EBE9FF 100%);\n border-color: rgba(139, 92, 246, 0.3);\n box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12);\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: #8B5CF6;\n flex-shrink: 0;\n background: rgba(139, 92, 246, 0.1);\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: rgba(139, 92, 246, 0.15);\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: #374151;\n letter-spacing: -0.01em;\n margin-bottom: 4px;\n}\n\n.artifact-card-description[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #6B7280;\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: white;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n padding: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\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: #6B7280;\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: #F3F4F6;\n color: #111827;\n}\n\n.message-action-btn.danger[_ngcontent-%COMP%]:hover {\n background-color: #FEE2E2;\n color: #DC2626;\n}\n\n.message-action-btn.retry-btn[_ngcontent-%COMP%] {\n color: #3B82F6;\n background: #EFF6FF;\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: #DBEAFE;\n color: #2563EB;\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: #EFF6FF;\n border: 1px solid #DBEAFE;\n border-radius: 16px;\n cursor: pointer;\n transition: all 150ms ease;\n font-size: 12px;\n color: #1E40AF;\n font-weight: 500;\n}\n\n.thread-indicator[_ngcontent-%COMP%]:hover {\n background: #DBEAFE;\n border-color: #93C5FD;\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(30, 64, 175, 0.1);\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: rgba(255, 243, 205, 0.3);\n border-left: 3px solid #FFA726;\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 #D9D9D9;\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: #0076B6;\n box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.1);\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: #0076B6;\n color: white;\n}\n\n.edit-action-btn.save[_ngcontent-%COMP%]:hover {\n background-color: #005A8F;\n}\n\n.edit-action-btn.cancel[_ngcontent-%COMP%] {\n background-color: #F4F4F4;\n color: #666;\n}\n\n.edit-action-btn.cancel[_ngcontent-%COMP%]:hover {\n background-color: #E0E0E0;\n color: #333;\n}\n\n.edit-hint[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #AAA;\n font-style: italic;\n}\n\n.edited-badge[_ngcontent-%COMP%] {\n margin-left: 8px;\n font-size: 11px;\n color: #AAA;\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: #F9FAFB;\n border: 1px solid #D1D5DB;\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 #E5E7EB;\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: white;\n border: 1px solid #9CA3AF;\n border-radius: 6px;\n font-size: 16px;\n line-height: 1;\n color: #6B7280;\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: #6B7280;\n}\n\n.action-bar-btn.danger[_ngcontent-%COMP%] {\n color: #DC2626;\n}\n\n.action-bar-btn.danger[_ngcontent-%COMP%]:hover {\n opacity: 1;\n background: #FEF2F2;\n border-color: #DC2626;\n}\n\n.action-bar-btn[_ngcontent-%COMP%] i.pinned[_ngcontent-%COMP%] {\n color: #3B82F6;\n}\n\n.action-bar-btn.test-feedback[_ngcontent-%COMP%] {\n color: #F57C00;\n}\n\n.action-bar-btn.test-feedback[_ngcontent-%COMP%]:hover {\n opacity: 1;\n background: #FFF8E1;\n border-color: #F57C00;\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: #6B7280;\n padding: 2px 8px;\n background: #F3F4F6;\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: #0076B6;\n font-size: 11px;\n}\n\n.message-status.error[_ngcontent-%COMP%] {\n background: #FEE2E2;\n color: #DC2626;\n}\n\n.message-status.error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #DC2626;\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.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: #9CA3AF;\n cursor: pointer;\n transition: all 0.2s ease;\n user-select: none;\n margin-left: 8px;\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: #6B7280;\n}\n\n.agent-run-icon.expanded[_ngcontent-%COMP%] {\n color: #9333EA;\n transform: scale(1.1);\n}\n\n\n\n.test-feedback-icon[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n color: #9CA3AF;\n cursor: pointer;\n transition: all 0.2s ease;\n user-select: none;\n margin-left: 8px;\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: #3B82F6; \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: #F9FAFB;\n border: 1px solid #E5E7EB;\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: #6B7280;\n font-size: 13px;\n}\n\n.agent-details-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #9333EA;\n}\n\n\n\n.agent-details-error[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #DC2626;\n font-size: 13px;\n}\n\n.agent-details-error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #DC2626;\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 #E5E7EB;\n font-weight: 600;\n font-size: 13px;\n color: #374151;\n}\n\n.agent-details-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #9333EA;\n}\n\n.agent-name-link[_ngcontent-%COMP%] {\n color: #9333EA;\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: #7C3AED;\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: white;\n border-radius: 6px;\n border: 1px solid #E5E7EB;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6B7280;\n font-weight: 500;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #111827;\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: #FEF3C7;\n color: #92400E;\n}\n\n.status-badge.status-running[_ngcontent-%COMP%] {\n background: #DBEAFE;\n color: #1E40AF;\n}\n\n.status-badge.status-complete[_ngcontent-%COMP%] {\n background: #D1FAE5;\n color: #065F46;\n}\n\n.status-badge.status-failed[_ngcontent-%COMP%], \n.status-badge.status-error[_ngcontent-%COMP%] {\n background: #FEE2E2;\n color: #991B1B;\n}\n\n.status-badge.status-cancelled[_ngcontent-%COMP%] {\n background: #F3F4F6;\n color: #4B5563;\n}\n\n\n\n.run-id-link[_ngcontent-%COMP%] {\n color: #3B82F6;\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: #2563EB;\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 #E5E7EB;\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: #374151;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.tasks-section-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #3B82F6;\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: #EEF2FF;\n color: #4F46E5;\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 #F3F4F6;\n}\n\n.rating-counts[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 13px;\n color: #6B7280;\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: #16A34A;\n}\n\n.rating-count.thumbs-down[_ngcontent-%COMP%] {\n color: #DC2626;\n}\n\n.rating-total[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #9CA3AF;\n}\n\n.inline-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n align-items: center;\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: linear-gradient(135deg, #10b981 0%, #059669 100%);\n color: white;\n border: 2px solid rgba(16, 185, 129, 0.4);\n border-radius: 16px;\n font-size: 13px;\n font-weight: 600;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\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: linear-gradient(135deg, #10b981 0%, #059669 100%);\n color: white;\n font-weight: 600;\n font-size: 13px;\n border-radius: 12px 12px 0 0;\n border: 2px solid rgba(16, 185, 129, 0.4);\n border-bottom: none;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\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: rgba(16, 185, 129, 0.08);\n border: 2px solid rgba(16, 185, 129, 0.4);\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 rgba(16, 185, 129, 0.2);\n padding-bottom: 12px;\n margin-bottom: 0;\n}\n\n[_nghost-%COMP%] .form-response-pill .field-question {\n font-weight: 600;\n color: #059669;\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: #1f2937;\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 rgba(16, 185, 129, 0.4);\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: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\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: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\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 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\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\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: #667eea;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"] });
1505
+ } }, dependencies: [i4.NgClass, i4.NgForOf, i4.NgIf, i5.DefaultValueAccessor, i5.NgControlStatus, i5.NgModel, i6.ArtifactMessageCardComponent, i7.MarkdownComponent, i8.SuggestedResponsesComponent, i9.AgentResponseFormComponent, i10.ActionableCommandsComponent, i11.ConversationMessageRatingComponent, i12.TaskWidgetComponent, i4.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.message-item.pinned[_ngcontent-%COMP%] {\n border-left: 3px solid #0076B6;\n background-color: rgba(0, 118, 182, 0.08);\n}\n\n.message-item.in-progress[_ngcontent-%COMP%] {\n background: linear-gradient(90deg,\n rgba(59, 130, 246, 0.08) 0%,\n rgba(59, 130, 246, 0.12) 50%,\n rgba(59, 130, 246, 0.08) 100%);\n background-size: 200% 100%;\n animation: _ngcontent-%COMP%_shimmer 2s ease-in-out infinite;\n border-left: 3px solid #3B82F6;\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: #1F2937;\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 rgba(59, 130, 246, 0.7);\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 rgba(59, 130, 246, 0.7);\n }\n 50% {\n box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);\n }\n}\n\n.message-item[_ngcontent-%COMP%]:hover {\n background-color: rgba(0, 0, 0, 0.02);\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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: 2px solid rgba(102, 126, 234, 0.4);\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n[_nghost-%COMP%] .mention-badge.user {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n color: white;\n border: 2px solid rgba(240, 147, 251, 0.4);\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\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 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: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\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: white;\n}\n\n\n\n.avatar-circle.user-avatar[_ngcontent-%COMP%] {\n border-radius: 50%;\n background-color: #333;\n}\n\n\n\n.avatar-circle.ai-avatar[_ngcontent-%COMP%] {\n border-radius: 8px;\n background-color: #9333EA; \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: #9CA3AF;\n background: #F3F4F6;\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: #333;\n}\n\n\n\n.agent-badge[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 2px 8px;\n background: #F3F4F6;\n border-radius: 10px;\n font-size: 11px;\n color: #6B7280;\n font-weight: 500;\n}\n\n.message-time[_ngcontent-%COMP%] {\n color: #9CA3AF;\n font-size: 12px;\n font-weight: 400;\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 margin-left: auto;\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: #E0F2FE;\n color: #0369A1;\n}\n\n\n\n.time-pill.in-progress[_ngcontent-%COMP%] {\n background: #F3E8FF;\n color: #7C3AED;\n}\n\n\n\n.time-pill.active[_ngcontent-%COMP%] {\n background: #E0E7FF;\n color: #4F46E5;\n}\n\n\n\n.time-pill.failed[_ngcontent-%COMP%] {\n background: #FEE2E2;\n color: #DC2626;\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: #E0F2FE;\n border-radius: 10px;\n font-size: 11px;\n color: #0369A1;\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: #AAA;\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: #333;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n\n\n.message-text[_ngcontent-%COMP%] markdown[_ngcontent-%COMP%] > [_ngcontent-%COMP%]:first-child {\n margin-top: 0;\n}\n\n.message-text[_ngcontent-%COMP%] markdown[_ngcontent-%COMP%] > [_ngcontent-%COMP%]: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 rgba(0, 0, 0, 0.08);\n border-radius: 8px;\n background: linear-gradient(135deg, #F8F7FF 0%, #F3F2FF 100%);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n max-width: 500px;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\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: linear-gradient(180deg, #8B5CF6 0%, #6366F1 100%);\n opacity: 1;\n}\n\n.artifact-card[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #F3F2FF 0%, #EBE9FF 100%);\n border-color: rgba(139, 92, 246, 0.3);\n box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12);\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: #8B5CF6;\n flex-shrink: 0;\n background: rgba(139, 92, 246, 0.1);\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: rgba(139, 92, 246, 0.15);\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: #374151;\n letter-spacing: -0.01em;\n margin-bottom: 4px;\n}\n\n.artifact-card-description[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #6B7280;\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: white;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n padding: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\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: #6B7280;\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: #F3F4F6;\n color: #111827;\n}\n\n.message-action-btn.danger[_ngcontent-%COMP%]:hover {\n background-color: #FEE2E2;\n color: #DC2626;\n}\n\n.message-action-btn.retry-btn[_ngcontent-%COMP%] {\n color: #3B82F6;\n background: #EFF6FF;\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: #DBEAFE;\n color: #2563EB;\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: #EFF6FF;\n border: 1px solid #DBEAFE;\n border-radius: 16px;\n cursor: pointer;\n transition: all 150ms ease;\n font-size: 12px;\n color: #1E40AF;\n font-weight: 500;\n}\n\n.thread-indicator[_ngcontent-%COMP%]:hover {\n background: #DBEAFE;\n border-color: #93C5FD;\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(30, 64, 175, 0.1);\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: rgba(255, 243, 205, 0.3);\n border-left: 3px solid #FFA726;\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 #D9D9D9;\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: #0076B6;\n box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.1);\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: #0076B6;\n color: white;\n}\n\n.edit-action-btn.save[_ngcontent-%COMP%]:hover {\n background-color: #005A8F;\n}\n\n.edit-action-btn.cancel[_ngcontent-%COMP%] {\n background-color: #F4F4F4;\n color: #666;\n}\n\n.edit-action-btn.cancel[_ngcontent-%COMP%]:hover {\n background-color: #E0E0E0;\n color: #333;\n}\n\n.edit-hint[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #AAA;\n font-style: italic;\n}\n\n.edited-badge[_ngcontent-%COMP%] {\n margin-left: 8px;\n font-size: 11px;\n color: #AAA;\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: #F9FAFB;\n border: 1px solid #D1D5DB;\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 #E5E7EB;\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: white;\n border: 1px solid #9CA3AF;\n border-radius: 6px;\n font-size: 16px;\n line-height: 1;\n color: #6B7280;\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: #6B7280;\n}\n\n.action-bar-btn.danger[_ngcontent-%COMP%] {\n color: #DC2626;\n}\n\n.action-bar-btn.danger[_ngcontent-%COMP%]:hover {\n opacity: 1;\n background: #FEF2F2;\n border-color: #DC2626;\n}\n\n.action-bar-btn[_ngcontent-%COMP%] i.pinned[_ngcontent-%COMP%] {\n color: #3B82F6;\n}\n\n.action-bar-btn.test-feedback[_ngcontent-%COMP%] {\n color: #F57C00;\n}\n\n.action-bar-btn.test-feedback[_ngcontent-%COMP%]:hover {\n opacity: 1;\n background: #FFF8E1;\n border-color: #F57C00;\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: #6B7280;\n padding: 2px 8px;\n background: #F3F4F6;\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: #0076B6;\n font-size: 11px;\n}\n\n.message-status.error[_ngcontent-%COMP%] {\n background: #FEE2E2;\n color: #DC2626;\n}\n\n.message-status.error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #DC2626;\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.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: #9CA3AF;\n cursor: pointer;\n transition: all 0.2s ease;\n user-select: none;\n margin-left: 8px;\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: #6B7280;\n}\n\n.agent-run-icon.expanded[_ngcontent-%COMP%] {\n color: #9333EA;\n transform: scale(1.1);\n}\n\n\n\n.test-feedback-icon[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n color: #9CA3AF;\n cursor: pointer;\n transition: all 0.2s ease;\n user-select: none;\n margin-left: 8px;\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: #3B82F6; \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: #F9FAFB;\n border: 1px solid #E5E7EB;\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: #6B7280;\n font-size: 13px;\n}\n\n.agent-details-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #9333EA;\n}\n\n\n\n.agent-details-error[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #DC2626;\n font-size: 13px;\n}\n\n.agent-details-error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #DC2626;\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 #E5E7EB;\n font-weight: 600;\n font-size: 13px;\n color: #374151;\n}\n\n.agent-details-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #9333EA;\n}\n\n.agent-name-link[_ngcontent-%COMP%] {\n color: #9333EA;\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: #7C3AED;\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: white;\n border-radius: 6px;\n border: 1px solid #E5E7EB;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6B7280;\n font-weight: 500;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #111827;\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: #FEF3C7;\n color: #92400E;\n}\n\n.status-badge.status-running[_ngcontent-%COMP%] {\n background: #DBEAFE;\n color: #1E40AF;\n}\n\n.status-badge.status-complete[_ngcontent-%COMP%] {\n background: #D1FAE5;\n color: #065F46;\n}\n\n.status-badge.status-failed[_ngcontent-%COMP%], \n.status-badge.status-error[_ngcontent-%COMP%] {\n background: #FEE2E2;\n color: #991B1B;\n}\n\n.status-badge.status-cancelled[_ngcontent-%COMP%] {\n background: #F3F4F6;\n color: #4B5563;\n}\n\n\n\n.run-id-link[_ngcontent-%COMP%] {\n color: #3B82F6;\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: #2563EB;\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 #E5E7EB;\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: #374151;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.tasks-section-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #3B82F6;\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: #EEF2FF;\n color: #4F46E5;\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 #F3F4F6;\n}\n\n.rating-counts[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 13px;\n color: #6B7280;\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: #16A34A;\n}\n\n.rating-count.thumbs-down[_ngcontent-%COMP%] {\n color: #DC2626;\n}\n\n.rating-total[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #9CA3AF;\n}\n\n.inline-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n align-items: center;\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: linear-gradient(135deg, #10b981 0%, #059669 100%);\n color: white;\n border: 2px solid rgba(16, 185, 129, 0.4);\n border-radius: 16px;\n font-size: 13px;\n font-weight: 600;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\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: linear-gradient(135deg, #10b981 0%, #059669 100%);\n color: white;\n font-weight: 600;\n font-size: 13px;\n border-radius: 12px 12px 0 0;\n border: 2px solid rgba(16, 185, 129, 0.4);\n border-bottom: none;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\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: rgba(16, 185, 129, 0.08);\n border: 2px solid rgba(16, 185, 129, 0.4);\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 rgba(16, 185, 129, 0.2);\n padding-bottom: 12px;\n margin-bottom: 0;\n}\n\n[_nghost-%COMP%] .form-response-pill .field-question {\n font-weight: 600;\n color: #059669;\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: #1f2937;\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 rgba(16, 185, 129, 0.4);\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: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\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: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\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 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\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\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: #667eea;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"] });
1506
1506
  }
1507
1507
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MessageItemComponent, [{
1508
1508
  type: Component,
1509
- args: [{ selector: 'mj-conversation-message-item', template: "<div [class]=\"messageClasses\" [attr.data-message-id]=\"message.ID\">\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 <span *ngIf=\"isUserMessage && messageStatus !== 'Complete'\" 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 <!-- Time pill - shows for AI messages in all states (in-progress, active, complete, failed) -->\n <span *ngIf=\"!isUserMessage && timePillText\"\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 <!-- Test feedback icon (appears for test runs only) -->\n <span *ngIf=\"message.TestRunID\"\n class=\"test-feedback-icon\"\n (click)=\"onTestFeedbackClick()\"\n title=\"Provide Test Feedback\">\n <i class=\"fas fa-flask\"></i>\n </span>\n\n <!-- Agent run icon (clickable to expand details) - always rightmost when present -->\n <span *ngIf=\"hasAgentRun\"\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 <span class=\"rating-badge\" *ngIf=\"hasRatings()\">{{ getRatingCount() }}</span>\n </span>\n </div>\n\n <div class=\"message-body\">\n @if (!isEditing) {\n <div class=\"message-text\">\n <markdown [data]=\"displayMessage\"></markdown>\n @if (isMessageEdited) {\n <span class=\"edited-badge\">(edited)</span>\n }\n </div>\n\n <!-- Artifact Message Card -->\n @if (hasArtifact && artifact && artifactVersion) {\n <div class=\"artifact-wrapper\" [class.system-artifact]=\"isSystemArtifact\">\n <mj-artifact-message-card\n [artifactId]=\"artifact.ID\"\n [artifact]=\"artifact\"\n [artifactVersion]=\"artifactVersion\"\n [currentUser]=\"currentUser\"\n (actionPerformed)=\"onArtifactActionPerformed($event)\">\n </mj-artifact-message-card>\n </div>\n }\n\n <!-- Suggested Responses (shown only for last message by owner) -->\n @if (isLastMessageInConversation && isConversationOwner && suggestedResponses.length > 0) {\n <mj-suggested-responses\n [suggestedResponses]=\"suggestedResponses\"\n [disabled]=\"isProcessing\"\n [isLastMessage]=\"isLastMessageInConversation\"\n [isConversationOwner]=\"isConversationOwner\"\n (responseSelected)=\"onSuggestedResponseSelected($event)\">\n </mj-suggested-responses>\n }\n\n <!-- Agent Response Form (shown only for last message by owner) -->\n @if (isLastMessageInConversation && isConversationOwner && responseForm) {\n <mj-agent-response-form\n [responseForm]=\"responseForm\"\n [disabled]=\"isProcessing\"\n [isLastMessage]=\"isLastMessageInConversation\"\n [isConversationOwner]=\"isConversationOwner\"\n (formSubmitted)=\"onFormSubmitted($event)\">\n </mj-agent-response-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: Rating buttons and action buttons for last completed AI message -->\n @if (isAIMessage && !isEditing && messageStatus === 'Complete' && (isLastMessage || hasRatings())) {\n <div class=\"message-footer\">\n <!-- Rating component (thumbs up/down) -->\n <mj-conversation-message-rating\n [conversationDetailId]=\"message.ID\"\n [currentUser]=\"currentUser\"\n [ratingsData]=\"ratings\">\n </mj-conversation-message-rating>\n\n <!-- Pin/Delete buttons (only for last message) -->\n @if (isLastMessage) {\n <div class=\"inline-actions\">\n <button class=\"action-bar-btn\" (click)=\"onPinClick()\" [title]=\"message.IsPinned ? 'Unpin Message' : 'Pin Message'\">\n <i class=\"fas fa-thumbtack\" [class.pinned]=\"message.IsPinned\"></i>\n </button>\n <button class=\"action-bar-btn danger\" (click)=\"onDeleteClick()\" title=\"Delete Message\">\n <i class=\"fas fa-trash\"></i>\n </button>\n </div>\n }\n </div>\n }\n\n <!-- Agent details content section -->\n <div class=\"agent-details-section\">\n <!-- Message Action Bar (appears when gear expanded for non-last messages) -->\n @if (isAgentDetailsExpanded && !isLastMessage && isAIMessage && messageStatus === 'Complete') {\n <div class=\"message-action-bar\">\n <div class=\"action-bar-container\">\n <mj-conversation-message-rating\n [conversationDetailId]=\"message.ID\"\n [currentUser]=\"currentUser\"\n [ratingsData]=\"ratings\">\n </mj-conversation-message-rating>\n\n <div class=\"action-buttons\">\n <button class=\"action-bar-btn\" (click)=\"onPinClick()\" [title]=\"message.IsPinned ? 'Unpin Message' : 'Pin Message'\">\n <i class=\"fas fa-thumbtack\" [class.pinned]=\"message.IsPinned\"></i>\n </button>\n <button class=\"action-bar-btn danger\" (click)=\"onDeleteClick()\" title=\"Delete Message\">\n <i class=\"fas fa-trash\"></i>\n </button>\n </div>\n </div>\n </div>\n }\n\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 <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 <div class=\"detail-row\" *ngIf=\"agentRunStepCount > 0\">\n <span class=\"detail-label\">Steps:</span>\n <span class=\"detail-value\">{{ agentRunStepCount }}</span>\n </div>\n\n <div class=\"detail-row\" *ngIf=\"agentRunTotalTokens > 0\">\n <span class=\"detail-label\">Tokens:</span>\n <span class=\"detail-value\">{{ formatNumber(agentRunTotalTokens) }}</span>\n </div>\n\n <div class=\"detail-row\" *ngIf=\"agentRunTotalCost > 0\">\n <span class=\"detail-label\">Cost:</span>\n <span class=\"detail-value\">\\${{ agentRunTotalCost.toFixed(4) }}</span>\n </div>\n\n <div class=\"detail-row\" *ngIf=\"agentRun.Status\">\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 </div>\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 <mj-task-widget\n *ngFor=\"let task of detailTasks\"\n [task]=\"task\"\n [compact]=\"false\"\n [clickable]=\"false\"\n [showProgress]=\"true\"\n [showDuration]=\"true\">\n </mj-task-widget>\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 <div class=\"message-reactions\" *ngIf=\"!isProcessing && !isInProgressAIMessage && !isEditing\">\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 </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.message-item.pinned {\n border-left: 3px solid #0076B6;\n background-color: rgba(0, 118, 182, 0.08);\n}\n\n.message-item.in-progress {\n background: linear-gradient(90deg,\n rgba(59, 130, 246, 0.08) 0%,\n rgba(59, 130, 246, 0.12) 50%,\n rgba(59, 130, 246, 0.08) 100%);\n background-size: 200% 100%;\n animation: shimmer 2s ease-in-out infinite;\n border-left: 3px solid #3B82F6;\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: #1F2937;\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 rgba(59, 130, 246, 0.7);\n animation: pulse 2s ease-in-out infinite;\n}\n\n@keyframes pulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);\n }\n 50% {\n box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);\n }\n}\n\n.message-item:hover {\n background-color: rgba(0, 0, 0, 0.02);\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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: 2px solid rgba(102, 126, 234, 0.4);\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n:host ::ng-deep .mention-badge.user {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n color: white;\n border: 2px solid rgba(240, 147, 251, 0.4);\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\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/* 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: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\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: white;\n}\n\n/* User avatars are circular */\n.avatar-circle.user-avatar {\n border-radius: 50%;\n background-color: #333;\n}\n\n/* Agent avatars are square with rounded corners */\n.avatar-circle.ai-avatar {\n border-radius: 8px;\n background-color: #9333EA; /* Purple 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: #9CA3AF;\n background: #F3F4F6;\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: #333;\n}\n\n/* Agent role badge */\n.agent-badge {\n display: inline-block;\n padding: 2px 8px;\n background: #F3F4F6;\n border-radius: 10px;\n font-size: 11px;\n color: #6B7280;\n font-weight: 500;\n}\n\n.message-time {\n color: #9CA3AF;\n font-size: 12px;\n font-weight: 400;\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 margin-left: auto;\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: #E0F2FE;\n color: #0369A1;\n}\n\n/* In-progress state - purple/violet with subtle pulse */\n.time-pill.in-progress {\n background: #F3E8FF;\n color: #7C3AED;\n}\n\n/* Active agent run state - indigo with subtle pulse */\n.time-pill.active {\n background: #E0E7FF;\n color: #4F46E5;\n}\n\n/* Failed state - red */\n.time-pill.failed {\n background: #FEE2E2;\n color: #DC2626;\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: #E0F2FE;\n border-radius: 10px;\n font-size: 11px;\n color: #0369A1;\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: #AAA;\n font-size: 11px;\n font-style: italic;\n}\n\n.message-body {\n margin-bottom: 0;\n}\n\n.message-text {\n color: #333;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n/* Remove extra margin from markdown paragraphs */\n.message-text markdown > :first-child {\n margin-top: 0;\n}\n\n.message-text markdown > :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 rgba(0, 0, 0, 0.08);\n border-radius: 8px;\n background: linear-gradient(135deg, #F8F7FF 0%, #F3F2FF 100%);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n max-width: 500px;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\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: linear-gradient(180deg, #8B5CF6 0%, #6366F1 100%);\n opacity: 1;\n}\n\n.artifact-card:hover {\n background: linear-gradient(135deg, #F3F2FF 0%, #EBE9FF 100%);\n border-color: rgba(139, 92, 246, 0.3);\n box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12);\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: #8B5CF6;\n flex-shrink: 0;\n background: rgba(139, 92, 246, 0.1);\n border-radius: 6px;\n transition: all 0.2s ease;\n}\n\n.artifact-card:hover .artifact-card-icon {\n background: rgba(139, 92, 246, 0.15);\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: #374151;\n letter-spacing: -0.01em;\n margin-bottom: 4px;\n}\n\n.artifact-card-description {\n font-size: 13px;\n color: #6B7280;\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: white;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n padding: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\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: #6B7280;\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: #F3F4F6;\n color: #111827;\n}\n\n.message-action-btn.danger:hover {\n background-color: #FEE2E2;\n color: #DC2626;\n}\n\n.message-action-btn.retry-btn {\n color: #3B82F6;\n background: #EFF6FF;\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: #DBEAFE;\n color: #2563EB;\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: #EFF6FF;\n border: 1px solid #DBEAFE;\n border-radius: 16px;\n cursor: pointer;\n transition: all 150ms ease;\n font-size: 12px;\n color: #1E40AF;\n font-weight: 500;\n}\n\n.thread-indicator:hover {\n background: #DBEAFE;\n border-color: #93C5FD;\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(30, 64, 175, 0.1);\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: rgba(255, 243, 205, 0.3);\n border-left: 3px solid #FFA726;\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 #D9D9D9;\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: #0076B6;\n box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.1);\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: #0076B6;\n color: white;\n}\n\n.edit-action-btn.save:hover {\n background-color: #005A8F;\n}\n\n.edit-action-btn.cancel {\n background-color: #F4F4F4;\n color: #666;\n}\n\n.edit-action-btn.cancel:hover {\n background-color: #E0E0E0;\n color: #333;\n}\n\n.edit-hint {\n font-size: 12px;\n color: #AAA;\n font-style: italic;\n}\n\n.edited-badge {\n margin-left: 8px;\n font-size: 11px;\n color: #AAA;\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: #F9FAFB;\n border: 1px solid #D1D5DB;\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 #E5E7EB;\n}\n\n.action-bar-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 6px 10px;\n background: white;\n border: 1px solid #9CA3AF;\n border-radius: 6px;\n font-size: 16px;\n line-height: 1;\n color: #6B7280;\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: #6B7280;\n}\n\n.action-bar-btn.danger {\n color: #DC2626;\n}\n\n.action-bar-btn.danger:hover {\n opacity: 1;\n background: #FEF2F2;\n border-color: #DC2626;\n}\n\n.action-bar-btn i.pinned {\n color: #3B82F6;\n}\n\n.action-bar-btn.test-feedback {\n color: #F57C00;\n}\n\n.action-bar-btn.test-feedback:hover {\n opacity: 1;\n background: #FFF8E1;\n border-color: #F57C00;\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: #6B7280;\n padding: 2px 8px;\n background: #F3F4F6;\n border-radius: 4px;\n margin-left: 8px;\n animation: statusPulse 2s ease-in-out infinite;\n}\n\n.message-status i {\n color: #0076B6;\n font-size: 11px;\n}\n\n.message-status.error {\n background: #FEE2E2;\n color: #DC2626;\n}\n\n.message-status.error i {\n color: #DC2626;\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.agent-run-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n color: #9CA3AF;\n cursor: pointer;\n transition: all 0.2s ease;\n user-select: none;\n margin-left: 8px;\n}\n\n.agent-run-icon i.fa-cog {\n font-size: 13px;\n}\n\n.agent-run-icon:hover {\n color: #6B7280;\n}\n\n.agent-run-icon.expanded {\n color: #9333EA;\n transform: scale(1.1);\n}\n\n/* Test feedback icon in header - appears for test runs */\n.test-feedback-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n color: #9CA3AF;\n cursor: pointer;\n transition: all 0.2s ease;\n user-select: none;\n margin-left: 8px;\n}\n\n.test-feedback-icon i.fa-flask {\n font-size: 13px;\n}\n\n.test-feedback-icon:hover {\n color: #3B82F6; /* 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: #F9FAFB;\n border: 1px solid #E5E7EB;\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: #6B7280;\n font-size: 13px;\n}\n\n.agent-details-loading i {\n color: #9333EA;\n}\n\n/* Error state */\n.agent-details-error {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #DC2626;\n font-size: 13px;\n}\n\n.agent-details-error i {\n color: #DC2626;\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 #E5E7EB;\n font-weight: 600;\n font-size: 13px;\n color: #374151;\n}\n\n.agent-details-header i {\n color: #9333EA;\n}\n\n.agent-name-link {\n color: #9333EA;\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: #7C3AED;\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: white;\n border-radius: 6px;\n border: 1px solid #E5E7EB;\n}\n\n.detail-label {\n font-size: 12px;\n color: #6B7280;\n font-weight: 500;\n}\n\n.detail-value {\n font-size: 13px;\n color: #111827;\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: #FEF3C7;\n color: #92400E;\n}\n\n.status-badge.status-running {\n background: #DBEAFE;\n color: #1E40AF;\n}\n\n.status-badge.status-complete {\n background: #D1FAE5;\n color: #065F46;\n}\n\n.status-badge.status-failed,\n.status-badge.status-error {\n background: #FEE2E2;\n color: #991B1B;\n}\n\n.status-badge.status-cancelled {\n background: #F3F4F6;\n color: #4B5563;\n}\n\n/* Run ID link styling */\n.run-id-link {\n color: #3B82F6;\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: #2563EB;\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 #E5E7EB;\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: #374151;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.tasks-section-header i {\n color: #3B82F6;\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: #EEF2FF;\n color: #4F46E5;\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 #F3F4F6;\n}\n\n.rating-counts {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 13px;\n color: #6B7280;\n}\n\n.rating-count {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.rating-count.thumbs-up {\n color: #16A34A;\n}\n\n.rating-count.thumbs-down {\n color: #DC2626;\n}\n\n.rating-total {\n font-size: 12px;\n color: #9CA3AF;\n}\n\n.inline-actions {\n display: flex;\n gap: 4px;\n align-items: center;\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: linear-gradient(135deg, #10b981 0%, #059669 100%);\n color: white;\n border: 2px solid rgba(16, 185, 129, 0.4);\n border-radius: 16px;\n font-size: 13px;\n font-weight: 600;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\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: linear-gradient(135deg, #10b981 0%, #059669 100%);\n color: white;\n font-weight: 600;\n font-size: 13px;\n border-radius: 12px 12px 0 0;\n border: 2px solid rgba(16, 185, 129, 0.4);\n border-bottom: none;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\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: rgba(16, 185, 129, 0.08);\n border: 2px solid rgba(16, 185, 129, 0.4);\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 rgba(16, 185, 129, 0.2);\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: #059669;\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: #1f2937;\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 rgba(16, 185, 129, 0.4);\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: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\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: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\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 * 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 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\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 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: #667eea;\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"] }]
1509
+ args: [{ selector: 'mj-conversation-message-item', template: "<div [class]=\"messageClasses\" [attr.data-message-id]=\"message.ID\">\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 <span *ngIf=\"isUserMessage && messageStatus !== 'Complete'\" 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 <!-- Time pill - shows for AI messages in all states (in-progress, active, complete, failed) -->\n <span *ngIf=\"!isUserMessage && timePillText\"\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 <!-- Test feedback icon (appears for test runs only) -->\n <span *ngIf=\"message.TestRunID\"\n class=\"test-feedback-icon\"\n (click)=\"onTestFeedbackClick()\"\n title=\"Provide Test Feedback\">\n <i class=\"fas fa-flask\"></i>\n </span>\n\n <!-- Agent run icon (clickable to expand details) - always rightmost when present -->\n <span *ngIf=\"hasAgentRun\"\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 <span class=\"rating-badge\" *ngIf=\"hasRatings()\">{{ getRatingCount() }}</span>\n </span>\n </div>\n\n <div class=\"message-body\">\n @if (!isEditing) {\n <div class=\"message-text\">\n <markdown [data]=\"displayMessage\"></markdown>\n @if (isMessageEdited) {\n <span class=\"edited-badge\">(edited)</span>\n }\n </div>\n\n <!-- Artifact Message Card -->\n @if (hasArtifact && artifact && artifactVersion) {\n <div class=\"artifact-wrapper\" [class.system-artifact]=\"isSystemArtifact\">\n <mj-artifact-message-card\n [artifactId]=\"artifact.ID\"\n [artifact]=\"artifact\"\n [artifactVersion]=\"artifactVersion\"\n [currentUser]=\"currentUser\"\n (actionPerformed)=\"onArtifactActionPerformed($event)\">\n </mj-artifact-message-card>\n </div>\n }\n\n <!-- Suggested Responses (shown only for last message by owner) -->\n @if (isLastMessageInConversation && isConversationOwner && suggestedResponses.length > 0) {\n <mj-suggested-responses\n [suggestedResponses]=\"suggestedResponses\"\n [disabled]=\"isProcessing\"\n [isLastMessage]=\"isLastMessageInConversation\"\n [isConversationOwner]=\"isConversationOwner\"\n (responseSelected)=\"onSuggestedResponseSelected($event)\">\n </mj-suggested-responses>\n }\n\n <!-- Agent Response Form (shown only for last message by owner) -->\n @if (isLastMessageInConversation && isConversationOwner && responseForm) {\n <mj-agent-response-form\n [responseForm]=\"responseForm\"\n [disabled]=\"isProcessing\"\n [isLastMessage]=\"isLastMessageInConversation\"\n [isConversationOwner]=\"isConversationOwner\"\n (formSubmitted)=\"onFormSubmitted($event)\">\n </mj-agent-response-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: Rating buttons and action buttons for last completed AI message -->\n @if (isAIMessage && !isEditing && messageStatus === 'Complete' && (isLastMessage || hasRatings())) {\n <div class=\"message-footer\">\n <!-- Rating component (thumbs up/down) -->\n <mj-conversation-message-rating\n [conversationDetailId]=\"message.ID\"\n [currentUser]=\"currentUser\"\n [ratingsData]=\"ratings\">\n </mj-conversation-message-rating>\n\n <!-- Pin/Delete buttons (only for last message) -->\n @if (isLastMessage) {\n <div class=\"inline-actions\">\n <button class=\"action-bar-btn\" (click)=\"onPinClick()\" [title]=\"message.IsPinned ? 'Unpin Message' : 'Pin Message'\">\n <i class=\"fas fa-thumbtack\" [class.pinned]=\"message.IsPinned\"></i>\n </button>\n <button class=\"action-bar-btn danger\" (click)=\"onDeleteClick()\" title=\"Delete Message\">\n <i class=\"fas fa-trash\"></i>\n </button>\n </div>\n }\n </div>\n }\n\n <!-- Agent details content section -->\n <div class=\"agent-details-section\">\n <!-- Message Action Bar (appears when gear expanded for non-last messages) -->\n @if (isAgentDetailsExpanded && !isLastMessage && isAIMessage && messageStatus === 'Complete') {\n <div class=\"message-action-bar\">\n <div class=\"action-bar-container\">\n <mj-conversation-message-rating\n [conversationDetailId]=\"message.ID\"\n [currentUser]=\"currentUser\"\n [ratingsData]=\"ratings\">\n </mj-conversation-message-rating>\n\n <div class=\"action-buttons\">\n <button class=\"action-bar-btn\" (click)=\"onPinClick()\" [title]=\"message.IsPinned ? 'Unpin Message' : 'Pin Message'\">\n <i class=\"fas fa-thumbtack\" [class.pinned]=\"message.IsPinned\"></i>\n </button>\n <button class=\"action-bar-btn danger\" (click)=\"onDeleteClick()\" title=\"Delete Message\">\n <i class=\"fas fa-trash\"></i>\n </button>\n </div>\n </div>\n </div>\n }\n\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 <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 <div class=\"detail-row\" *ngIf=\"agentRunStepCount > 0\">\n <span class=\"detail-label\">Steps:</span>\n <span class=\"detail-value\">{{ agentRunStepCount }}</span>\n </div>\n\n <div class=\"detail-row\" *ngIf=\"agentRunTotalTokens > 0\">\n <span class=\"detail-label\">Tokens:</span>\n <span class=\"detail-value\">{{ formatNumber(agentRunTotalTokens) }}</span>\n </div>\n\n <div class=\"detail-row\" *ngIf=\"agentRunTotalCost > 0\">\n <span class=\"detail-label\">Cost:</span>\n <span class=\"detail-value\">\\${{ agentRunTotalCost.toFixed(4) }}</span>\n </div>\n\n <div class=\"detail-row\" *ngIf=\"agentRun.Status\">\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 </div>\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 <mj-task-widget\n *ngFor=\"let task of detailTasks\"\n [task]=\"task\"\n [compact]=\"false\"\n [clickable]=\"false\"\n [showProgress]=\"true\"\n [showDuration]=\"true\">\n </mj-task-widget>\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 <div class=\"message-reactions\" *ngIf=\"!isProcessing && !isInProgressAIMessage && !isEditing\">\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 </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.message-item.pinned {\n border-left: 3px solid #0076B6;\n background-color: rgba(0, 118, 182, 0.08);\n}\n\n.message-item.in-progress {\n background: linear-gradient(90deg,\n rgba(59, 130, 246, 0.08) 0%,\n rgba(59, 130, 246, 0.12) 50%,\n rgba(59, 130, 246, 0.08) 100%);\n background-size: 200% 100%;\n animation: shimmer 2s ease-in-out infinite;\n border-left: 3px solid #3B82F6;\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: #1F2937;\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 rgba(59, 130, 246, 0.7);\n animation: pulse 2s ease-in-out infinite;\n}\n\n@keyframes pulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);\n }\n 50% {\n box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);\n }\n}\n\n.message-item:hover {\n background-color: rgba(0, 0, 0, 0.02);\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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: 2px solid rgba(102, 126, 234, 0.4);\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n:host ::ng-deep .mention-badge.user {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n color: white;\n border: 2px solid rgba(240, 147, 251, 0.4);\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\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/* 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: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\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: white;\n}\n\n/* User avatars are circular */\n.avatar-circle.user-avatar {\n border-radius: 50%;\n background-color: #333;\n}\n\n/* Agent avatars are square with rounded corners */\n.avatar-circle.ai-avatar {\n border-radius: 8px;\n background-color: #9333EA; /* Purple 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: #9CA3AF;\n background: #F3F4F6;\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: #333;\n}\n\n/* Agent role badge */\n.agent-badge {\n display: inline-block;\n padding: 2px 8px;\n background: #F3F4F6;\n border-radius: 10px;\n font-size: 11px;\n color: #6B7280;\n font-weight: 500;\n}\n\n.message-time {\n color: #9CA3AF;\n font-size: 12px;\n font-weight: 400;\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 margin-left: auto;\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: #E0F2FE;\n color: #0369A1;\n}\n\n/* In-progress state - purple/violet with subtle pulse */\n.time-pill.in-progress {\n background: #F3E8FF;\n color: #7C3AED;\n}\n\n/* Active agent run state - indigo with subtle pulse */\n.time-pill.active {\n background: #E0E7FF;\n color: #4F46E5;\n}\n\n/* Failed state - red */\n.time-pill.failed {\n background: #FEE2E2;\n color: #DC2626;\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: #E0F2FE;\n border-radius: 10px;\n font-size: 11px;\n color: #0369A1;\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: #AAA;\n font-size: 11px;\n font-style: italic;\n}\n\n.message-body {\n margin-bottom: 0;\n}\n\n.message-text {\n color: #333;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n/* Remove extra margin from markdown paragraphs */\n.message-text markdown > :first-child {\n margin-top: 0;\n}\n\n.message-text markdown > :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 rgba(0, 0, 0, 0.08);\n border-radius: 8px;\n background: linear-gradient(135deg, #F8F7FF 0%, #F3F2FF 100%);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n max-width: 500px;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\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: linear-gradient(180deg, #8B5CF6 0%, #6366F1 100%);\n opacity: 1;\n}\n\n.artifact-card:hover {\n background: linear-gradient(135deg, #F3F2FF 0%, #EBE9FF 100%);\n border-color: rgba(139, 92, 246, 0.3);\n box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12);\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: #8B5CF6;\n flex-shrink: 0;\n background: rgba(139, 92, 246, 0.1);\n border-radius: 6px;\n transition: all 0.2s ease;\n}\n\n.artifact-card:hover .artifact-card-icon {\n background: rgba(139, 92, 246, 0.15);\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: #374151;\n letter-spacing: -0.01em;\n margin-bottom: 4px;\n}\n\n.artifact-card-description {\n font-size: 13px;\n color: #6B7280;\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: white;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n padding: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\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: #6B7280;\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: #F3F4F6;\n color: #111827;\n}\n\n.message-action-btn.danger:hover {\n background-color: #FEE2E2;\n color: #DC2626;\n}\n\n.message-action-btn.retry-btn {\n color: #3B82F6;\n background: #EFF6FF;\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: #DBEAFE;\n color: #2563EB;\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: #EFF6FF;\n border: 1px solid #DBEAFE;\n border-radius: 16px;\n cursor: pointer;\n transition: all 150ms ease;\n font-size: 12px;\n color: #1E40AF;\n font-weight: 500;\n}\n\n.thread-indicator:hover {\n background: #DBEAFE;\n border-color: #93C5FD;\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(30, 64, 175, 0.1);\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: rgba(255, 243, 205, 0.3);\n border-left: 3px solid #FFA726;\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 #D9D9D9;\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: #0076B6;\n box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.1);\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: #0076B6;\n color: white;\n}\n\n.edit-action-btn.save:hover {\n background-color: #005A8F;\n}\n\n.edit-action-btn.cancel {\n background-color: #F4F4F4;\n color: #666;\n}\n\n.edit-action-btn.cancel:hover {\n background-color: #E0E0E0;\n color: #333;\n}\n\n.edit-hint {\n font-size: 12px;\n color: #AAA;\n font-style: italic;\n}\n\n.edited-badge {\n margin-left: 8px;\n font-size: 11px;\n color: #AAA;\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: #F9FAFB;\n border: 1px solid #D1D5DB;\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 #E5E7EB;\n}\n\n.action-bar-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 6px 10px;\n background: white;\n border: 1px solid #9CA3AF;\n border-radius: 6px;\n font-size: 16px;\n line-height: 1;\n color: #6B7280;\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: #6B7280;\n}\n\n.action-bar-btn.danger {\n color: #DC2626;\n}\n\n.action-bar-btn.danger:hover {\n opacity: 1;\n background: #FEF2F2;\n border-color: #DC2626;\n}\n\n.action-bar-btn i.pinned {\n color: #3B82F6;\n}\n\n.action-bar-btn.test-feedback {\n color: #F57C00;\n}\n\n.action-bar-btn.test-feedback:hover {\n opacity: 1;\n background: #FFF8E1;\n border-color: #F57C00;\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: #6B7280;\n padding: 2px 8px;\n background: #F3F4F6;\n border-radius: 4px;\n margin-left: 8px;\n animation: statusPulse 2s ease-in-out infinite;\n}\n\n.message-status i {\n color: #0076B6;\n font-size: 11px;\n}\n\n.message-status.error {\n background: #FEE2E2;\n color: #DC2626;\n}\n\n.message-status.error i {\n color: #DC2626;\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.agent-run-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n color: #9CA3AF;\n cursor: pointer;\n transition: all 0.2s ease;\n user-select: none;\n margin-left: 8px;\n}\n\n.agent-run-icon i.fa-cog {\n font-size: 13px;\n}\n\n.agent-run-icon:hover {\n color: #6B7280;\n}\n\n.agent-run-icon.expanded {\n color: #9333EA;\n transform: scale(1.1);\n}\n\n/* Test feedback icon in header - appears for test runs */\n.test-feedback-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n color: #9CA3AF;\n cursor: pointer;\n transition: all 0.2s ease;\n user-select: none;\n margin-left: 8px;\n}\n\n.test-feedback-icon i.fa-flask {\n font-size: 13px;\n}\n\n.test-feedback-icon:hover {\n color: #3B82F6; /* 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: #F9FAFB;\n border: 1px solid #E5E7EB;\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: #6B7280;\n font-size: 13px;\n}\n\n.agent-details-loading i {\n color: #9333EA;\n}\n\n/* Error state */\n.agent-details-error {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #DC2626;\n font-size: 13px;\n}\n\n.agent-details-error i {\n color: #DC2626;\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 #E5E7EB;\n font-weight: 600;\n font-size: 13px;\n color: #374151;\n}\n\n.agent-details-header i {\n color: #9333EA;\n}\n\n.agent-name-link {\n color: #9333EA;\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: #7C3AED;\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: white;\n border-radius: 6px;\n border: 1px solid #E5E7EB;\n}\n\n.detail-label {\n font-size: 12px;\n color: #6B7280;\n font-weight: 500;\n}\n\n.detail-value {\n font-size: 13px;\n color: #111827;\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: #FEF3C7;\n color: #92400E;\n}\n\n.status-badge.status-running {\n background: #DBEAFE;\n color: #1E40AF;\n}\n\n.status-badge.status-complete {\n background: #D1FAE5;\n color: #065F46;\n}\n\n.status-badge.status-failed,\n.status-badge.status-error {\n background: #FEE2E2;\n color: #991B1B;\n}\n\n.status-badge.status-cancelled {\n background: #F3F4F6;\n color: #4B5563;\n}\n\n/* Run ID link styling */\n.run-id-link {\n color: #3B82F6;\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: #2563EB;\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 #E5E7EB;\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: #374151;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.tasks-section-header i {\n color: #3B82F6;\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: #EEF2FF;\n color: #4F46E5;\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 #F3F4F6;\n}\n\n.rating-counts {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 13px;\n color: #6B7280;\n}\n\n.rating-count {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.rating-count.thumbs-up {\n color: #16A34A;\n}\n\n.rating-count.thumbs-down {\n color: #DC2626;\n}\n\n.rating-total {\n font-size: 12px;\n color: #9CA3AF;\n}\n\n.inline-actions {\n display: flex;\n gap: 4px;\n align-items: center;\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: linear-gradient(135deg, #10b981 0%, #059669 100%);\n color: white;\n border: 2px solid rgba(16, 185, 129, 0.4);\n border-radius: 16px;\n font-size: 13px;\n font-weight: 600;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\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: linear-gradient(135deg, #10b981 0%, #059669 100%);\n color: white;\n font-weight: 600;\n font-size: 13px;\n border-radius: 12px 12px 0 0;\n border: 2px solid rgba(16, 185, 129, 0.4);\n border-bottom: none;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);\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: rgba(16, 185, 129, 0.08);\n border: 2px solid rgba(16, 185, 129, 0.4);\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 rgba(16, 185, 129, 0.2);\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: #059669;\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: #1f2937;\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 rgba(16, 185, 129, 0.4);\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: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\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: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\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 * 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 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\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 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: #667eea;\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"] }]
1510
1510
  }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.MentionParserService }, { type: i2.MentionAutocompleteService }, { type: i3.UICommandHandlerService }], { message: [{
1511
1511
  type: Input
1512
1512
  }], conversation: [{