npm - @memberjunction/ng-conversations - Versions diffs - 2.123.0 → 2.124.0 - Mend

@memberjunction/ng-conversations 2.123.0 → 2.124.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

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

@@ -2040,11 +2040,11 @@ export class ConversationChatAreaComponent {
             i0.ɵɵconditional(ctx.showArtifactsModal ? 13 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showCollectionPicker ? 14 : -1);
-        } }, dependencies: [i8.NgIf, i9.ArtifactViewerPanelComponent, i10.LoadingComponent, i11.ArtifactCollectionPickerModalComponent, i12.ArtifactShareModalComponent, i13.MessageListComponent, i14.MessageInputComponent, i15.ConversationEmptyStateComponent, i16.ThreadPanelComponent, i17.ProjectSelectorComponent, i18.ActiveAgentIndicatorComponent, i19.MembersModalComponent, i20.ExportModalComponent], styles: ["[_nghost-%COMP%] {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.chat-header[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid #D9D9D9;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: #FFF;\n  z-index: 10;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.chat-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.chat-title[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.project-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #F4F4F4;\n  border: 1px solid #D9D9D9;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #AAA;\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 12px;\n}\n\n.project-tag[_ngcontent-%COMP%]:hover {\n  background: #D9D9D9;\n  border-color: #AAA;\n}\n\n.project-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.test-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #FFF8E1;\n  border: 1px solid #FFD54F;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #F57C00;\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator[_ngcontent-%COMP%]:hover {\n  background: #FFE082;\n  border-color: #FFA000;\n}\n\n.test-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.chat-members[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n.artifact-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.artifact-indicator[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n.ambient-agent-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: #F3F4F6;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #0076B6;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  transition: all 150ms ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n.share-btn.shared[_ngcontent-%COMP%] {\n  background: #EFF6FF;\n  border-color: #1e40af;\n  color: #1e40af;\n}\n\n.share-btn.shared[_ngcontent-%COMP%]:hover {\n  background: #DBEAFE;\n  color: #1e3a8a;\n}\n\n.chat-content-area[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n\n.chat-messages-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: 300px;\n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.chat-messages-pane[_ngcontent-%COMP%]:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n.resize-handle[_ngcontent-%COMP%] {\n  width: 4px;\n  background: transparent;\n  cursor: col-resize;\n  flex-shrink: 0;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover {\n  background: #3B82F6;\n}\n\n.resize-handle[_ngcontent-%COMP%]::before {\n  content: \"\";\n  position: absolute;\n  left: -4px;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n}\n\n.chat-artifact-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: #FAFAFA;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.chat-artifact-pane.maximized[_ngcontent-%COMP%] {\n  width: 100% !important;\n}\n\n.chat-artifact-pane[_ngcontent-%COMP%]    > mj-artifact-viewer-panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: #FFF;\n  min-height: 0;\n  position: relative;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%] {\n  position: sticky;\n  bottom: 21px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 40px;\n  margin-top: -40px;\n  margin-left: auto;\n  margin-right: auto;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  transition: all 0.2s ease;\n  z-index: 100;\n  pointer-events: auto;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  border-color: #3B82F6;\n  transform: translateX(-50%) translateY(-2px);\n  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6B7280;\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\n\n.chat-input-container[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  background: #FFF;\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n.loading-peripheral-placeholder[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: rgba(255, 255, 255, 0.5);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal[_ngcontent-%COMP%] {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #E5E7EB;\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #F3F4F6;\n  border: 1px solid #E5E7EB;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]:hover {\n  background: #E5E7EB;\n  border-color: #D1D5DB;\n  color: #374151;\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%] {\n  background: #3B82F6;\n  border-color: #3B82F6;\n  color: white;\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%]:hover {\n  background: #2563EB;\n  border-color: #2563EB;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.modal-close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal[_ngcontent-%COMP%] {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  grid-column: 1/-1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border: 1.5px solid #E5E7EB;\n  border-radius: 12px;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.artifact-modal-card.expanded[_ngcontent-%COMP%] {\n  border-color: #3B82F6;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%] {\n  opacity: 0.85;\n  border-color: #D1D5DB;\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: #9CA3AF;\n  background: #F3F4F6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]:hover {\n  border-color: #9CA3AF;\n  box-shadow: 0 4px 12px rgba(156, 163, 175, 0.15);\n}\n\n.artifact-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover {\n  border-color: #3B82F6;\n  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);\n  border-radius: 10px;\n  color: #3B82F6;\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n}\n\n.artifact-modal-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: #1F2937;\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #6B7280;\n}\n\n.artifact-modal-action[_ngcontent-%COMP%] {\n  color: #9CA3AF;\n  transition: color 0.2s;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover   .artifact-modal-action[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: #6B7280;\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #3B82F6;\n}\n\n.artifact-versions-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: #F9FAFB;\n}\n\n.artifact-version-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 4px 8px;\n  background: #EEF2FF;\n  color: #4F46E5;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-open-text[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: #6B7280;\n}\n.artifact-version-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #9CA3AF;\n  font-size: 12px;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-badge[_ngcontent-%COMP%] {\n  background: #4F46E5;\n  color: white;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-open-text[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\n\n.loading-peripheral-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: white;\n  border: 2px solid #E5E7EB;\n  border-radius: 12px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  color: #4B5563;\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #9333EA;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: #6B7280;\n  font-size: 15px;\n}\n.loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: #3B82F6;\n}\n.loading-content[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n\n\n@media (max-width: 768px) {\n  .chat-header[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    gap: 8px;\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .chat-info[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    width: 100%;\n    white-space: normal;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  .chat-actions[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    width: 100%;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%], \n   .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 10px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  \n\n  .chat-content-area[_ngcontent-%COMP%] {\n    position: relative;\n  }\n  .chat-artifact-pane[_ngcontent-%COMP%] {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 80px;\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: #FFF;\n  }\n  .resize-handle[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n\n@media (max-width: 480px) {\n  .chat-header[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    gap: 6px;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 13px;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%], \n   .action-btn[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%], \n   .artifacts-modal[_ngcontent-%COMP%] {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}"] });
+        } }, dependencies: [i8.NgIf, i9.ArtifactViewerPanelComponent, i10.LoadingComponent, i11.ArtifactCollectionPickerModalComponent, i12.ArtifactShareModalComponent, i13.MessageListComponent, i14.MessageInputComponent, i15.ConversationEmptyStateComponent, i16.ThreadPanelComponent, i17.ProjectSelectorComponent, i18.ActiveAgentIndicatorComponent, i19.MembersModalComponent, i20.ExportModalComponent], styles: ["[_nghost-%COMP%] {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.chat-header[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid #D9D9D9;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: #FFF;\n  z-index: 10;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.chat-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.chat-title[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.project-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #F4F4F4;\n  border: 1px solid #D9D9D9;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #AAA;\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 12px;\n}\n\n.project-tag[_ngcontent-%COMP%]:hover {\n  background: #D9D9D9;\n  border-color: #AAA;\n}\n\n.project-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.test-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #FFF8E1;\n  border: 1px solid #FFD54F;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #F57C00;\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator[_ngcontent-%COMP%]:hover {\n  background: #FFE082;\n  border-color: #FFA000;\n}\n\n.test-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.chat-members[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n.artifact-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.artifact-indicator[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n.ambient-agent-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: #F3F4F6;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #0076B6;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  transition: all 150ms ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n.share-btn.shared[_ngcontent-%COMP%] {\n  background: #EFF6FF;\n  border-color: #1e40af;\n  color: #1e40af;\n}\n\n.share-btn.shared[_ngcontent-%COMP%]:hover {\n  background: #DBEAFE;\n  color: #1e3a8a;\n}\n\n.chat-content-area[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n\n.chat-messages-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: min(300px, 100%); \n\n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.chat-messages-pane[_ngcontent-%COMP%]:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n.resize-handle[_ngcontent-%COMP%] {\n  width: 4px;\n  background: transparent;\n  cursor: col-resize;\n  flex-shrink: 0;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover {\n  background: #3B82F6;\n}\n\n.resize-handle[_ngcontent-%COMP%]::before {\n  content: \"\";\n  position: absolute;\n  left: -4px;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n}\n\n.chat-artifact-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: #FAFAFA;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.chat-artifact-pane.maximized[_ngcontent-%COMP%] {\n  width: 100% !important;\n}\n\n.chat-artifact-pane[_ngcontent-%COMP%]    > mj-artifact-viewer-panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: #FFF;\n  min-height: 0;\n  position: relative;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%] {\n  position: sticky;\n  bottom: 21px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 40px;\n  margin-top: -40px;\n  margin-left: auto;\n  margin-right: auto;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  transition: all 0.2s ease;\n  z-index: 100;\n  pointer-events: auto;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  border-color: #3B82F6;\n  transform: translateX(-50%) translateY(-2px);\n  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6B7280;\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\n\n.chat-input-container[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  background: #FFF;\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n.loading-peripheral-placeholder[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: rgba(255, 255, 255, 0.5);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal[_ngcontent-%COMP%] {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #E5E7EB;\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #F3F4F6;\n  border: 1px solid #E5E7EB;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]:hover {\n  background: #E5E7EB;\n  border-color: #D1D5DB;\n  color: #374151;\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%] {\n  background: #3B82F6;\n  border-color: #3B82F6;\n  color: white;\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%]:hover {\n  background: #2563EB;\n  border-color: #2563EB;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.modal-close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal[_ngcontent-%COMP%] {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  grid-column: 1/-1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border: 1.5px solid #E5E7EB;\n  border-radius: 12px;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.artifact-modal-card.expanded[_ngcontent-%COMP%] {\n  border-color: #3B82F6;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%] {\n  opacity: 0.85;\n  border-color: #D1D5DB;\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: #9CA3AF;\n  background: #F3F4F6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]:hover {\n  border-color: #9CA3AF;\n  box-shadow: 0 4px 12px rgba(156, 163, 175, 0.15);\n}\n\n.artifact-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover {\n  border-color: #3B82F6;\n  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);\n  border-radius: 10px;\n  color: #3B82F6;\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n}\n\n.artifact-modal-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: #1F2937;\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #6B7280;\n}\n\n.artifact-modal-action[_ngcontent-%COMP%] {\n  color: #9CA3AF;\n  transition: color 0.2s;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover   .artifact-modal-action[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: #6B7280;\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #3B82F6;\n}\n\n.artifact-versions-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: #F9FAFB;\n}\n\n.artifact-version-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 4px 8px;\n  background: #EEF2FF;\n  color: #4F46E5;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-open-text[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: #6B7280;\n}\n.artifact-version-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #9CA3AF;\n  font-size: 12px;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-badge[_ngcontent-%COMP%] {\n  background: #4F46E5;\n  color: white;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-open-text[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\n\n.loading-peripheral-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: white;\n  border: 2px solid #E5E7EB;\n  border-radius: 12px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  color: #4B5563;\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #9333EA;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: #6B7280;\n  font-size: 15px;\n}\n.loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: #3B82F6;\n}\n.loading-content[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n\n\n@media (max-width: 768px) {\n  .chat-header[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    gap: 8px;\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .chat-info[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    width: 100%;\n    white-space: normal;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  .chat-actions[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    width: 100%;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%], \n   .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 10px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  \n\n  .chat-content-area[_ngcontent-%COMP%] {\n    position: relative;\n  }\n  .chat-artifact-pane[_ngcontent-%COMP%] {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 80px;\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: #FFF;\n  }\n  .resize-handle[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n\n@media (max-width: 480px) {\n  .chat-header[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    gap: 6px;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 13px;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%], \n   .action-btn[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%], \n   .artifacts-modal[_ngcontent-%COMP%] {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationChatAreaComponent, [{
         type: Component,
-        args: [{ selector: 'mj-conversation-chat-area', template: "<div class=\"chat-area\">\n    <!-- Fixed Header -->\n    <div class=\"chat-header\" *ngIf=\"conversation\">\n    <div class=\"chat-info\">\n        <div class=\"chat-title\">{{ conversation.Name }}</div>\n        <button class=\"project-tag\" (click)=\"openProjectSelector()\" title=\"Assign to project\" *ngIf=\"conversation.ProjectID\">\n        <i class=\"fas fa-folder\"></i>\n        <span>{{ conversation.Project || 'Project' }}</span>\n        </button>\n        <button class=\"test-indicator\" (click)=\"viewTestRun(conversation.TestRunID)\" title=\"View Test Run\" *ngIf=\"conversation.TestRunID\">\n        <i class=\"fas fa-flask\"></i>\n        <span>Test</span>\n        </button>\n        <mj-active-agent-indicator\n        [conversationId]=\"conversation.ID\"\n        [currentUser]=\"currentUser\"\n        (togglePanel)=\"onToggleAgentPanel()\"\n        (agentSelected)=\"onAgentSelected($event)\">\n        </mj-active-agent-indicator>\n    </div>\n    <div class=\"chat-actions\">\n        <button class=\"chat-members\" (click)=\"toggleMembersModal()\" title=\"View members\">\n        <i class=\"fas fa-users\"></i>\n        <span>{{ memberCount }} member{{ memberCount !== 1 ? 's' : '' }}</span>\n        </button>\n        <button class=\"artifact-indicator\" (click)=\"viewArtifacts()\" title=\"View artifacts\" *ngIf=\"artifactCountDisplay > 0\">\n        <i class=\"fas fa-cube\"></i>\n        <span>{{ artifactCountDisplay }} artifact{{ artifactCountDisplay !== 1 ? 's' : '' }}</span>\n        </button>\n        <mj-active-agent-indicator\n        [conversationId]=\"conversation.ID\"\n        [currentUser]=\"currentUser\"\n        (togglePanel)=\"onToggleAgentPanel()\"\n        (agentSelected)=\"onAgentSelected($event)\">\n        </mj-active-agent-indicator>\n    </div>\n    <div class=\"chat-actions\">\n        <button class=\"action-btn\" (click)=\"exportConversation()\" title=\"Export conversation\">\n        <i class=\"fas fa-download\"></i>\n        Export\n        </button>\n        <button class=\"action-btn share-btn\"\n                [class.shared]=\"isShared\"\n                (click)=\"shareConversation()\"\n                [title]=\"isShared ? 'Manage sharing' : 'Share conversation'\">\n        <i class=\"fas fa-share-nodes\"></i>\n        Share\n        </button>\n    </div>\n    </div>\n\n    <!-- Messages and Artifact Split Layout -->\n    <div class=\"chat-content-area\">\n    <!-- Messages Pane -->\n    <div class=\"chat-messages-pane\"\n         [class.full-width]=\"!showArtifactPanel\"\n         [class.hidden]=\"isArtifactPaneMaximized\">\n        @if (isNewConversation || !conversationId) {\n          <!-- Empty State - No conversation selected OR new unsaved conversation -->\n          <mj-conversation-empty-state\n            [currentUser]=\"currentUser\"\n            [disabled]=\"isProcessing\"\n            (messageSent)=\"onEmptyStateMessageSent($event)\">\n          </mj-conversation-empty-state>\n        } @else if (isLoadingConversation) {\n          <!-- Loading State - Show centered spinner while conversation loads -->\n          <div class=\"conversation-loading-state\">\n            <mj-loading text=\"Loading conversation...\" size=\"large\"></mj-loading>\n          </div>\n        } @else {\n          <!-- Normal Message View -->\n          <div class=\"chat-messages-wrapper\">\n          <div class=\"chat-messages-container\" #scrollContainer (scroll)=\"checkScroll()\">\n              <mj-conversation-message-list\n              [messages]=\"messages\"\n              [conversation]=\"conversation\"\n              [currentUser]=\"currentUser\"\n              [isProcessing]=\"isProcessing\"\n              [artifactMap]=\"effectiveArtifactsMap\"\n              [agentRunMap]=\"agentRunsByDetailId\"\n              [ratingsMap]=\"ratingsByDetailId\"\n              [userAvatarMap]=\"userAvatarMap\"\n              (replyInThread)=\"onReplyInThread($event)\"\n              (viewThread)=\"onViewThread($event)\"\n              (retryMessage)=\"onRetryMessage($event)\"\n              (testFeedbackMessage)=\"onTestFeedbackMessage($event)\"\n              (artifactClicked)=\"onArtifactClicked($event)\"\n              (messageEdited)=\"onMessageEdited($event)\"\n              (openEntityRecord)=\"onOpenEntityRecord($event)\"\n              (suggestedResponseSelected)=\"onSuggestedResponseSelected($event)\">\n              </mj-conversation-message-list>\n\n              <!-- Scroll to Bottom Icon (positioned within scroll container for proper centering) -->\n              <span class=\"scroll-to-bottom-icon\" style=\"left: 50%;\"\n                    *ngIf=\"showScrollToBottomIcon && messages && messages.length > 0\"\n                    (click)=\"scrollToBottomAnimate()\">\n                  <i class=\"fas fa-arrow-down\"></i>\n              </span>\n          </div>\n\n          <!-- Fixed Input Area -->\n          <div class=\"chat-input-container\">\n              @if (isLoadingPeripheralData) {\n                <!-- Loading State -->\n                <div class=\"loading-peripheral-placeholder\">\n                  <mj-loading text=\"Loading conversation data...\" size=\"medium\"></mj-loading>\n                </div>\n              } @else {\n                <!-- Input Component - Multiple instances cached, only one visible -->\n                <div class=\"message-input-container-wrapper\">\n                  @for (inputRef of getCachedInputs(); track inputRef.conversationId) {\n                    <mj-message-input\n                      #messageInput\n                      [hidden]=\"inputRef.conversationId !== conversationId\"\n                      [conversationId]=\"inputRef.conversationId\"\n                      [conversationName]=\"inputRef.conversationName\"\n                      [currentUser]=\"currentUser\"\n                      [conversationHistory]=\"inputRef.conversationId === conversationId ? messages : []\"\n                      [artifactsByDetailId]=\"inputRef.conversationId === conversationId ? artifactsByDetailId : emptyArtifactsMap\"\n                      [systemArtifactsByDetailId]=\"inputRef.conversationId === conversationId ? systemArtifactsByDetailId : emptyArtifactsMap\"\n                      [agentRunsByDetailId]=\"inputRef.conversationId === conversationId ? agentRunsByDetailId : emptyAgentRunsMap\"\n                      [inProgressMessageIds]=\"inputRef.conversationId === conversationId ? inProgressMessageIds : emptyInProgressIds\"\n                      [disabled]=\"isProcessing\"\n                      [initialMessage]=\"inputRef.conversationId === conversationId ? pendingMessage : null\"\n                      (messageSent)=\"onMessageSent($event)\"\n                      (agentResponse)=\"onAgentResponse($event)\"\n                      (agentRunDetected)=\"onAgentRunDetected($event)\"\n                      (agentRunUpdate)=\"onAgentRunUpdate($event)\"\n                      (messageComplete)=\"onMessageComplete($event)\"\n                      (artifactCreated)=\"onArtifactCreated($event)\"\n                      (conversationRenamed)=\"onConversationRenamed($event)\"\n                      (intentCheckStarted)=\"onIntentCheckStarted()\"\n                      (intentCheckCompleted)=\"onIntentCheckCompleted()\">\n                    </mj-message-input>\n                  }\n                </div>\n              }\n          </div>\n          </div>\n        }\n    </div>\n\n    <!-- Artifact Viewer Pane -->\n    @if (showArtifactPanel && selectedArtifactId) {\n        @if (!isArtifactPaneMaximized) {\n            <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event)\" (touchstart)=\"onResizeTouchStart($event)\"></div>\n        }\n        <div class=\"chat-artifact-pane\"\n             [style.width.%]=\"artifactPaneWidth\"\n             [class.maximized]=\"isArtifactPaneMaximized\">\n        <mj-artifact-viewer-panel\n            [artifactId]=\"selectedArtifactId\"\n            [currentUser]=\"currentUser\"\n            [environmentId]=\"environmentId\"\n            [versionNumber]=\"selectedVersionNumber\"\n            [viewContext]=\"'conversation'\"\n            [canShare]=\"canShareSelectedArtifact\"\n            [canEdit]=\"canEditSelectedArtifact\"\n            [isMaximized]=\"isArtifactPaneMaximized\"\n            [refreshTrigger]=\"artifactViewerRefresh$\"\n            (closed)=\"onCloseArtifactPanel()\"\n            (saveToCollectionRequested)=\"onSaveToCollectionRequested($event)\"\n            (navigateToLink)=\"onArtifactLinkNavigation($event)\"\n            (shareRequested)=\"onArtifactShareRequested($event)\"\n            (maximizeToggled)=\"toggleMaximizeArtifactPane()\">\n        </mj-artifact-viewer-panel>\n        </div>\n    }\n\n    <!-- Artifact Share Modal -->\n    <mj-artifact-share-modal\n      [isOpen]=\"isArtifactShareModalOpen\"\n      [artifact]=\"artifactToShare\"\n      [currentUser]=\"currentUser\"\n      (saved)=\"onArtifactShared()\"\n      (cancelled)=\"onArtifactShareModalClose()\">\n    </mj-artifact-share-modal>\n    </div>\n</div>\n\n<!-- Thread Panel -->\n@if (threadId) {\n    <mj-thread-panel\n    [parentMessageId]=\"threadId\"\n    [conversationId]=\"conversationId || ''\"\n    [currentUser]=\"currentUser\"\n    (closed)=\"onLocalThreadClosed()\"\n    (replyAdded)=\"onThreadReplyAdded($event)\">\n    </mj-thread-panel>\n}\n\n<!-- Export Modal -->\n<mj-export-modal\n    [isVisible]=\"showExportModal\"\n    [conversation]=\"conversation || undefined\"\n    [currentUser]=\"currentUser\"\n    (cancelled)=\"onExportModalCancelled()\"\n    (exported)=\"onExportModalComplete()\">\n</mj-export-modal>\n\n<!-- Members Modal -->\n<mj-members-modal\n    [isVisible]=\"showMembersModal\"\n    [conversation]=\"conversation || undefined\"\n    [currentUser]=\"currentUser\"\n    (cancelled)=\"showMembersModal = false\"\n    (membersChanged)=\"showMembersModal = false\">\n</mj-members-modal>\n\n<!-- Project Selector Modal -->\n@if (showProjectSelector && conversation) {\n    <div class=\"modal-overlay\" (click)=\"showProjectSelector = false\">\n    <div class=\"modal-content project-selector-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n        <h3>Assign Project</h3>\n        <button class=\"modal-close-btn\" (click)=\"showProjectSelector = false\">\n            <i class=\"fas fa-times\"></i>\n        </button>\n        </div>\n        <div class=\"modal-body\">\n        <mj-project-selector\n            [environmentId]=\"environmentId\"\n            [currentUser]=\"currentUser\"\n            [selectedProjectId]=\"conversation.ProjectID\"\n            (projectSelected)=\"onProjectSelected($event)\">\n        </mj-project-selector>\n        </div>\n    </div>\n    </div>\n}\n\n<!-- Artifacts Modal -->\n@if (showArtifactsModal) {\n    <div class=\"modal-overlay\" (click)=\"showArtifactsModal = false\">\n    <div class=\"modal-content artifacts-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n        <h3>Conversation Artifacts</h3>\n        <div class=\"modal-header-actions\">\n            @if (hasSystemArtifacts) {\n              <button class=\"toggle-system-btn\"\n                      [class.active]=\"showSystemArtifacts\"\n                      (click)=\"toggleSystemArtifacts()\"\n                      title=\"Toggle system artifacts visibility\">\n              <i class=\"fas fa-cog\"></i>\n              <span>{{ showSystemArtifacts ? 'Hide' : 'Show' }} System</span>\n              </button>\n            }\n            <button class=\"modal-close-btn\" (click)=\"showArtifactsModal = false\">\n            <i class=\"fas fa-times\"></i>\n            </button>\n        </div>\n        </div>\n        <div class=\"modal-body artifacts-grid\">\n        @if (artifactsByDetailId.size === 0) {\n            <div class=\"empty-state\">\n            <i class=\"fas fa-cube\" style=\"font-size: 48px; color: #D1D5DB; margin-bottom: 16px;\"></i>\n            <p style=\"color: #6B7280; font-size: 14px;\">No artifacts in this conversation yet</p>\n            </div>\n        }\n        @for (artifact of getArtifactsArray(); track artifact.artifactId) {\n            <div class=\"artifact-modal-card\"\n                 [class.expanded]=\"expandedArtifactId === artifact.artifactId\"\n                 [class.system-artifact]=\"artifact.visibility === 'System Only'\">\n              <!-- Main card header - click to open latest version -->\n              <div class=\"artifact-card-header\" (click)=\"openArtifactFromModal(artifact.artifactId)\">\n                <div class=\"artifact-modal-icon\">\n                    <i class=\"fas fa-file-code\"></i>\n                </div>\n                <div class=\"artifact-modal-info\">\n                    <div class=\"artifact-modal-title\">{{artifact.name}}</div>\n                    <div class=\"artifact-modal-meta\">\n                      @if (artifact.versionCount > 1) {\n                        {{artifact.versionCount}} versions\n                      } @else {\n                        1 version\n                      }\n                    </div>\n                </div>\n                @if (artifact.versionCount > 1) {\n                  <button class=\"expand-btn\" (click)=\"toggleArtifactExpansion(artifact.artifactId, $event)\">\n                    <i class=\"fas\" [class.fa-chevron-down]=\"expandedArtifactId !== artifact.artifactId\"\n                       [class.fa-chevron-up]=\"expandedArtifactId === artifact.artifactId\"></i>\n                  </button>\n                }\n                <div class=\"artifact-modal-action\">\n                    <i class=\"fas fa-external-link-alt\"></i>\n                </div>\n              </div>\n\n              <!-- Expanded version list -->\n              @if (expandedArtifactId === artifact.artifactId && artifact.versionCount > 1) {\n                <div class=\"artifact-versions-list\">\n                  @for (version of artifact.versions; track version.versionId) {\n                    <div class=\"artifact-version-item\" (click)=\"openArtifactFromModal(artifact.artifactId, version.versionNumber); $event.stopPropagation()\">\n                      <span class=\"version-badge\">v{{version.versionNumber}}</span>\n                      <span class=\"version-open-text\">Open this version</span>\n                      <i class=\"fas fa-arrow-right\"></i>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n        }\n        </div>\n    </div>\n    </div>\n}\n\n<!-- Collection Picker Modal -->\n@if (showCollectionPicker) {\n  <mj-artifact-collection-picker-modal\n    [isOpen]=\"showCollectionPicker\"\n    [environmentId]=\"environmentId\"\n    [currentUser]=\"currentUser\"\n    [excludeCollectionIds]=\"collectionPickerExcludedIds\"\n    (saved)=\"onCollectionPickerSaved($event)\"\n    (cancelled)=\"onCollectionPickerCancelled()\">\n  </mj-artifact-collection-picker-modal>\n}", styles: [":host {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.chat-header {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid #D9D9D9;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: #FFF;\n  z-index: 10;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.chat-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.chat-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.project-tag {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #F4F4F4;\n  border: 1px solid #D9D9D9;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #AAA;\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 12px;\n}\n\n.project-tag:hover {\n  background: #D9D9D9;\n  border-color: #AAA;\n}\n\n.project-tag i {\n  font-size: 10px;\n}\n\n.test-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #FFF8E1;\n  border: 1px solid #FFD54F;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #F57C00;\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator:hover {\n  background: #FFE082;\n  border-color: #FFA000;\n}\n\n.test-indicator i {\n  font-size: 10px;\n}\n\n.chat-members {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n.artifact-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.artifact-indicator:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n.ambient-agent-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: #F3F4F6;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  animation: pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator i {\n  color: #0076B6;\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  transition: all 150ms ease;\n}\n\n.action-btn:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n.share-btn.shared {\n  background: #EFF6FF;\n  border-color: #1e40af;\n  color: #1e40af;\n}\n\n.share-btn.shared:hover {\n  background: #DBEAFE;\n  color: #1e3a8a;\n}\n\n.chat-content-area {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n\n.chat-messages-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: 300px;\n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width {\n  width: 100%;\n}\n\n.chat-messages-pane:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden {\n  display: none;\n}\n\n.resize-handle {\n  width: 4px;\n  background: transparent;\n  cursor: col-resize;\n  flex-shrink: 0;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.resize-handle:hover {\n  background: #3B82F6;\n}\n\n.resize-handle::before {\n  content: \"\";\n  position: absolute;\n  left: -4px;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n}\n\n.chat-artifact-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: #FAFAFA;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.chat-artifact-pane.maximized {\n  width: 100% !important;\n}\n\n.chat-artifact-pane > mj-artifact-viewer-panel {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: #FFF;\n  min-height: 0;\n  position: relative;\n}\n\n.scroll-to-bottom-icon {\n  position: sticky;\n  bottom: 21px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 40px;\n  margin-top: -40px;\n  margin-left: auto;\n  margin-right: auto;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  transition: all 0.2s ease;\n  z-index: 100;\n  pointer-events: auto;\n}\n\n.scroll-to-bottom-icon:hover {\n  background: #F3F4F6;\n  border-color: #3B82F6;\n  transform: translateX(-50%) translateY(-2px);\n  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);\n}\n\n.scroll-to-bottom-icon i {\n  color: #6B7280;\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon:hover i {\n  color: #3B82F6;\n}\n\n.chat-input-container {\n  flex-shrink: 0;\n  background: #FFF;\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n.loading-peripheral-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: rgba(255, 255, 255, 0.5);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #E5E7EB;\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #F3F4F6;\n  border: 1px solid #E5E7EB;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn:hover {\n  background: #E5E7EB;\n  border-color: #D1D5DB;\n  color: #374151;\n}\n\n.toggle-system-btn.active {\n  background: #3B82F6;\n  border-color: #3B82F6;\n  color: white;\n}\n\n.toggle-system-btn.active:hover {\n  background: #2563EB;\n  border-color: #2563EB;\n}\n\n.toggle-system-btn i {\n  font-size: 12px;\n}\n\n.modal-close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.modal-body {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n.empty-state {\n  grid-column: 1/-1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n}\n\n.artifact-modal-card {\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border: 1.5px solid #E5E7EB;\n  border-radius: 12px;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.artifact-modal-card.expanded {\n  border-color: #3B82F6;\n}\n\n.artifact-modal-card.system-artifact {\n  opacity: 0.85;\n  border-color: #D1D5DB;\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: #9CA3AF;\n  background: #F3F4F6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact:hover {\n  border-color: #9CA3AF;\n  box-shadow: 0 4px 12px rgba(156, 163, 175, 0.15);\n}\n\n.artifact-card-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header:hover {\n  background: #F9FAFB;\n}\n\n.artifact-modal-card:hover {\n  border-color: #3B82F6;\n  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);\n  border-radius: 10px;\n  color: #3B82F6;\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon i {\n  font-size: 18px;\n}\n\n.artifact-modal-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #1F2937;\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta {\n  font-size: 12px;\n  color: #6B7280;\n}\n\n.artifact-modal-action {\n  color: #9CA3AF;\n  transition: color 0.2s;\n}\n\n.artifact-modal-card:hover .artifact-modal-action {\n  color: #3B82F6;\n}\n\n.expand-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: #6B7280;\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn:hover {\n  background: #F3F4F6;\n  color: #3B82F6;\n}\n\n.artifact-versions-list {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: #F9FAFB;\n}\n\n.artifact-version-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item:hover {\n  background: #F3F4F6;\n}\n.artifact-version-item .version-badge {\n  display: inline-block;\n  padding: 4px 8px;\n  background: #EEF2FF;\n  color: #4F46E5;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item .version-open-text {\n  flex: 1;\n  font-size: 13px;\n  color: #6B7280;\n}\n.artifact-version-item i {\n  color: #9CA3AF;\n  font-size: 12px;\n}\n.artifact-version-item:hover .version-badge {\n  background: #4F46E5;\n  color: white;\n}\n.artifact-version-item:hover .version-open-text {\n  color: #3B82F6;\n}\n.artifact-version-item:hover i {\n  color: #3B82F6;\n}\n\n.loading-peripheral-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: white;\n  border: 2px solid #E5E7EB;\n  border-radius: 12px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  color: #4B5563;\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content i {\n  font-size: 20px;\n  color: #9333EA;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: #6B7280;\n  font-size: 15px;\n}\n.loading-content i {\n  font-size: 32px;\n  color: #3B82F6;\n}\n.loading-content span {\n  font-weight: 500;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .chat-header {\n    padding: 8px 12px;\n    gap: 8px;\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .chat-info {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n  .chat-title {\n    font-size: 14px;\n    width: 100%;\n    white-space: normal;\n  }\n  .project-tag {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  .test-indicator {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  .chat-actions {\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    width: 100%;\n  }\n  .chat-members,\n  .artifact-indicator,\n  .action-btn {\n    padding: 6px 10px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  /* Artifact pane - full width overlay on mobile */\n  .chat-content-area {\n    position: relative;\n  }\n  .chat-artifact-pane {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 80px;\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: #FFF;\n  }\n  .resize-handle {\n    display: none;\n  }\n}\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .chat-header {\n    padding: 6px 8px;\n    gap: 6px;\n  }\n  .chat-title {\n    font-size: 13px;\n  }\n  .project-tag {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .test-indicator {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members,\n  .artifact-indicator,\n  .action-btn {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal,\n  .artifacts-modal {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon i {\n    font-size: 14px;\n  }\n}\n"] }]
+        args: [{ selector: 'mj-conversation-chat-area', template: "<div class=\"chat-area\">\n    <!-- Fixed Header -->\n    <div class=\"chat-header\" *ngIf=\"conversation\">\n    <div class=\"chat-info\">\n        <div class=\"chat-title\">{{ conversation.Name }}</div>\n        <button class=\"project-tag\" (click)=\"openProjectSelector()\" title=\"Assign to project\" *ngIf=\"conversation.ProjectID\">\n        <i class=\"fas fa-folder\"></i>\n        <span>{{ conversation.Project || 'Project' }}</span>\n        </button>\n        <button class=\"test-indicator\" (click)=\"viewTestRun(conversation.TestRunID)\" title=\"View Test Run\" *ngIf=\"conversation.TestRunID\">\n        <i class=\"fas fa-flask\"></i>\n        <span>Test</span>\n        </button>\n        <mj-active-agent-indicator\n        [conversationId]=\"conversation.ID\"\n        [currentUser]=\"currentUser\"\n        (togglePanel)=\"onToggleAgentPanel()\"\n        (agentSelected)=\"onAgentSelected($event)\">\n        </mj-active-agent-indicator>\n    </div>\n    <div class=\"chat-actions\">\n        <button class=\"chat-members\" (click)=\"toggleMembersModal()\" title=\"View members\">\n        <i class=\"fas fa-users\"></i>\n        <span>{{ memberCount }} member{{ memberCount !== 1 ? 's' : '' }}</span>\n        </button>\n        <button class=\"artifact-indicator\" (click)=\"viewArtifacts()\" title=\"View artifacts\" *ngIf=\"artifactCountDisplay > 0\">\n        <i class=\"fas fa-cube\"></i>\n        <span>{{ artifactCountDisplay }} artifact{{ artifactCountDisplay !== 1 ? 's' : '' }}</span>\n        </button>\n        <mj-active-agent-indicator\n        [conversationId]=\"conversation.ID\"\n        [currentUser]=\"currentUser\"\n        (togglePanel)=\"onToggleAgentPanel()\"\n        (agentSelected)=\"onAgentSelected($event)\">\n        </mj-active-agent-indicator>\n    </div>\n    <div class=\"chat-actions\">\n        <button class=\"action-btn\" (click)=\"exportConversation()\" title=\"Export conversation\">\n        <i class=\"fas fa-download\"></i>\n        Export\n        </button>\n        <button class=\"action-btn share-btn\"\n                [class.shared]=\"isShared\"\n                (click)=\"shareConversation()\"\n                [title]=\"isShared ? 'Manage sharing' : 'Share conversation'\">\n        <i class=\"fas fa-share-nodes\"></i>\n        Share\n        </button>\n    </div>\n    </div>\n\n    <!-- Messages and Artifact Split Layout -->\n    <div class=\"chat-content-area\">\n    <!-- Messages Pane -->\n    <div class=\"chat-messages-pane\"\n         [class.full-width]=\"!showArtifactPanel\"\n         [class.hidden]=\"isArtifactPaneMaximized\">\n        @if (isNewConversation || !conversationId) {\n          <!-- Empty State - No conversation selected OR new unsaved conversation -->\n          <mj-conversation-empty-state\n            [currentUser]=\"currentUser\"\n            [disabled]=\"isProcessing\"\n            (messageSent)=\"onEmptyStateMessageSent($event)\">\n          </mj-conversation-empty-state>\n        } @else if (isLoadingConversation) {\n          <!-- Loading State - Show centered spinner while conversation loads -->\n          <div class=\"conversation-loading-state\">\n            <mj-loading text=\"Loading conversation...\" size=\"large\"></mj-loading>\n          </div>\n        } @else {\n          <!-- Normal Message View -->\n          <div class=\"chat-messages-wrapper\">\n          <div class=\"chat-messages-container\" #scrollContainer (scroll)=\"checkScroll()\">\n              <mj-conversation-message-list\n              [messages]=\"messages\"\n              [conversation]=\"conversation\"\n              [currentUser]=\"currentUser\"\n              [isProcessing]=\"isProcessing\"\n              [artifactMap]=\"effectiveArtifactsMap\"\n              [agentRunMap]=\"agentRunsByDetailId\"\n              [ratingsMap]=\"ratingsByDetailId\"\n              [userAvatarMap]=\"userAvatarMap\"\n              (replyInThread)=\"onReplyInThread($event)\"\n              (viewThread)=\"onViewThread($event)\"\n              (retryMessage)=\"onRetryMessage($event)\"\n              (testFeedbackMessage)=\"onTestFeedbackMessage($event)\"\n              (artifactClicked)=\"onArtifactClicked($event)\"\n              (messageEdited)=\"onMessageEdited($event)\"\n              (openEntityRecord)=\"onOpenEntityRecord($event)\"\n              (suggestedResponseSelected)=\"onSuggestedResponseSelected($event)\">\n              </mj-conversation-message-list>\n\n              <!-- Scroll to Bottom Icon (positioned within scroll container for proper centering) -->\n              <span class=\"scroll-to-bottom-icon\" style=\"left: 50%;\"\n                    *ngIf=\"showScrollToBottomIcon && messages && messages.length > 0\"\n                    (click)=\"scrollToBottomAnimate()\">\n                  <i class=\"fas fa-arrow-down\"></i>\n              </span>\n          </div>\n\n          <!-- Fixed Input Area -->\n          <div class=\"chat-input-container\">\n              @if (isLoadingPeripheralData) {\n                <!-- Loading State -->\n                <div class=\"loading-peripheral-placeholder\">\n                  <mj-loading text=\"Loading conversation data...\" size=\"medium\"></mj-loading>\n                </div>\n              } @else {\n                <!-- Input Component - Multiple instances cached, only one visible -->\n                <div class=\"message-input-container-wrapper\">\n                  @for (inputRef of getCachedInputs(); track inputRef.conversationId) {\n                    <mj-message-input\n                      #messageInput\n                      [hidden]=\"inputRef.conversationId !== conversationId\"\n                      [conversationId]=\"inputRef.conversationId\"\n                      [conversationName]=\"inputRef.conversationName\"\n                      [currentUser]=\"currentUser\"\n                      [conversationHistory]=\"inputRef.conversationId === conversationId ? messages : []\"\n                      [artifactsByDetailId]=\"inputRef.conversationId === conversationId ? artifactsByDetailId : emptyArtifactsMap\"\n                      [systemArtifactsByDetailId]=\"inputRef.conversationId === conversationId ? systemArtifactsByDetailId : emptyArtifactsMap\"\n                      [agentRunsByDetailId]=\"inputRef.conversationId === conversationId ? agentRunsByDetailId : emptyAgentRunsMap\"\n                      [inProgressMessageIds]=\"inputRef.conversationId === conversationId ? inProgressMessageIds : emptyInProgressIds\"\n                      [disabled]=\"isProcessing\"\n                      [initialMessage]=\"inputRef.conversationId === conversationId ? pendingMessage : null\"\n                      (messageSent)=\"onMessageSent($event)\"\n                      (agentResponse)=\"onAgentResponse($event)\"\n                      (agentRunDetected)=\"onAgentRunDetected($event)\"\n                      (agentRunUpdate)=\"onAgentRunUpdate($event)\"\n                      (messageComplete)=\"onMessageComplete($event)\"\n                      (artifactCreated)=\"onArtifactCreated($event)\"\n                      (conversationRenamed)=\"onConversationRenamed($event)\"\n                      (intentCheckStarted)=\"onIntentCheckStarted()\"\n                      (intentCheckCompleted)=\"onIntentCheckCompleted()\">\n                    </mj-message-input>\n                  }\n                </div>\n              }\n          </div>\n          </div>\n        }\n    </div>\n\n    <!-- Artifact Viewer Pane -->\n    @if (showArtifactPanel && selectedArtifactId) {\n        @if (!isArtifactPaneMaximized) {\n            <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event)\" (touchstart)=\"onResizeTouchStart($event)\"></div>\n        }\n        <div class=\"chat-artifact-pane\"\n             [style.width.%]=\"artifactPaneWidth\"\n             [class.maximized]=\"isArtifactPaneMaximized\">\n        <mj-artifact-viewer-panel\n            [artifactId]=\"selectedArtifactId\"\n            [currentUser]=\"currentUser\"\n            [environmentId]=\"environmentId\"\n            [versionNumber]=\"selectedVersionNumber\"\n            [viewContext]=\"'conversation'\"\n            [canShare]=\"canShareSelectedArtifact\"\n            [canEdit]=\"canEditSelectedArtifact\"\n            [isMaximized]=\"isArtifactPaneMaximized\"\n            [refreshTrigger]=\"artifactViewerRefresh$\"\n            (closed)=\"onCloseArtifactPanel()\"\n            (saveToCollectionRequested)=\"onSaveToCollectionRequested($event)\"\n            (navigateToLink)=\"onArtifactLinkNavigation($event)\"\n            (shareRequested)=\"onArtifactShareRequested($event)\"\n            (maximizeToggled)=\"toggleMaximizeArtifactPane()\">\n        </mj-artifact-viewer-panel>\n        </div>\n    }\n\n    <!-- Artifact Share Modal -->\n    <mj-artifact-share-modal\n      [isOpen]=\"isArtifactShareModalOpen\"\n      [artifact]=\"artifactToShare\"\n      [currentUser]=\"currentUser\"\n      (saved)=\"onArtifactShared()\"\n      (cancelled)=\"onArtifactShareModalClose()\">\n    </mj-artifact-share-modal>\n    </div>\n</div>\n\n<!-- Thread Panel -->\n@if (threadId) {\n    <mj-thread-panel\n    [parentMessageId]=\"threadId\"\n    [conversationId]=\"conversationId || ''\"\n    [currentUser]=\"currentUser\"\n    (closed)=\"onLocalThreadClosed()\"\n    (replyAdded)=\"onThreadReplyAdded($event)\">\n    </mj-thread-panel>\n}\n\n<!-- Export Modal -->\n<mj-export-modal\n    [isVisible]=\"showExportModal\"\n    [conversation]=\"conversation || undefined\"\n    [currentUser]=\"currentUser\"\n    (cancelled)=\"onExportModalCancelled()\"\n    (exported)=\"onExportModalComplete()\">\n</mj-export-modal>\n\n<!-- Members Modal -->\n<mj-members-modal\n    [isVisible]=\"showMembersModal\"\n    [conversation]=\"conversation || undefined\"\n    [currentUser]=\"currentUser\"\n    (cancelled)=\"showMembersModal = false\"\n    (membersChanged)=\"showMembersModal = false\">\n</mj-members-modal>\n\n<!-- Project Selector Modal -->\n@if (showProjectSelector && conversation) {\n    <div class=\"modal-overlay\" (click)=\"showProjectSelector = false\">\n    <div class=\"modal-content project-selector-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n        <h3>Assign Project</h3>\n        <button class=\"modal-close-btn\" (click)=\"showProjectSelector = false\">\n            <i class=\"fas fa-times\"></i>\n        </button>\n        </div>\n        <div class=\"modal-body\">\n        <mj-project-selector\n            [environmentId]=\"environmentId\"\n            [currentUser]=\"currentUser\"\n            [selectedProjectId]=\"conversation.ProjectID\"\n            (projectSelected)=\"onProjectSelected($event)\">\n        </mj-project-selector>\n        </div>\n    </div>\n    </div>\n}\n\n<!-- Artifacts Modal -->\n@if (showArtifactsModal) {\n    <div class=\"modal-overlay\" (click)=\"showArtifactsModal = false\">\n    <div class=\"modal-content artifacts-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n        <h3>Conversation Artifacts</h3>\n        <div class=\"modal-header-actions\">\n            @if (hasSystemArtifacts) {\n              <button class=\"toggle-system-btn\"\n                      [class.active]=\"showSystemArtifacts\"\n                      (click)=\"toggleSystemArtifacts()\"\n                      title=\"Toggle system artifacts visibility\">\n              <i class=\"fas fa-cog\"></i>\n              <span>{{ showSystemArtifacts ? 'Hide' : 'Show' }} System</span>\n              </button>\n            }\n            <button class=\"modal-close-btn\" (click)=\"showArtifactsModal = false\">\n            <i class=\"fas fa-times\"></i>\n            </button>\n        </div>\n        </div>\n        <div class=\"modal-body artifacts-grid\">\n        @if (artifactsByDetailId.size === 0) {\n            <div class=\"empty-state\">\n            <i class=\"fas fa-cube\" style=\"font-size: 48px; color: #D1D5DB; margin-bottom: 16px;\"></i>\n            <p style=\"color: #6B7280; font-size: 14px;\">No artifacts in this conversation yet</p>\n            </div>\n        }\n        @for (artifact of getArtifactsArray(); track artifact.artifactId) {\n            <div class=\"artifact-modal-card\"\n                 [class.expanded]=\"expandedArtifactId === artifact.artifactId\"\n                 [class.system-artifact]=\"artifact.visibility === 'System Only'\">\n              <!-- Main card header - click to open latest version -->\n              <div class=\"artifact-card-header\" (click)=\"openArtifactFromModal(artifact.artifactId)\">\n                <div class=\"artifact-modal-icon\">\n                    <i class=\"fas fa-file-code\"></i>\n                </div>\n                <div class=\"artifact-modal-info\">\n                    <div class=\"artifact-modal-title\">{{artifact.name}}</div>\n                    <div class=\"artifact-modal-meta\">\n                      @if (artifact.versionCount > 1) {\n                        {{artifact.versionCount}} versions\n                      } @else {\n                        1 version\n                      }\n                    </div>\n                </div>\n                @if (artifact.versionCount > 1) {\n                  <button class=\"expand-btn\" (click)=\"toggleArtifactExpansion(artifact.artifactId, $event)\">\n                    <i class=\"fas\" [class.fa-chevron-down]=\"expandedArtifactId !== artifact.artifactId\"\n                       [class.fa-chevron-up]=\"expandedArtifactId === artifact.artifactId\"></i>\n                  </button>\n                }\n                <div class=\"artifact-modal-action\">\n                    <i class=\"fas fa-external-link-alt\"></i>\n                </div>\n              </div>\n\n              <!-- Expanded version list -->\n              @if (expandedArtifactId === artifact.artifactId && artifact.versionCount > 1) {\n                <div class=\"artifact-versions-list\">\n                  @for (version of artifact.versions; track version.versionId) {\n                    <div class=\"artifact-version-item\" (click)=\"openArtifactFromModal(artifact.artifactId, version.versionNumber); $event.stopPropagation()\">\n                      <span class=\"version-badge\">v{{version.versionNumber}}</span>\n                      <span class=\"version-open-text\">Open this version</span>\n                      <i class=\"fas fa-arrow-right\"></i>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n        }\n        </div>\n    </div>\n    </div>\n}\n\n<!-- Collection Picker Modal -->\n@if (showCollectionPicker) {\n  <mj-artifact-collection-picker-modal\n    [isOpen]=\"showCollectionPicker\"\n    [environmentId]=\"environmentId\"\n    [currentUser]=\"currentUser\"\n    [excludeCollectionIds]=\"collectionPickerExcludedIds\"\n    (saved)=\"onCollectionPickerSaved($event)\"\n    (cancelled)=\"onCollectionPickerCancelled()\">\n  </mj-artifact-collection-picker-modal>\n}", styles: [":host {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.chat-header {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid #D9D9D9;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: #FFF;\n  z-index: 10;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.chat-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.chat-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.project-tag {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #F4F4F4;\n  border: 1px solid #D9D9D9;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #AAA;\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 12px;\n}\n\n.project-tag:hover {\n  background: #D9D9D9;\n  border-color: #AAA;\n}\n\n.project-tag i {\n  font-size: 10px;\n}\n\n.test-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #FFF8E1;\n  border: 1px solid #FFD54F;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #F57C00;\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator:hover {\n  background: #FFE082;\n  border-color: #FFA000;\n}\n\n.test-indicator i {\n  font-size: 10px;\n}\n\n.chat-members {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n.artifact-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.artifact-indicator:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n.ambient-agent-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: #F3F4F6;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  animation: pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator i {\n  color: #0076B6;\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  transition: all 150ms ease;\n}\n\n.action-btn:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n.share-btn.shared {\n  background: #EFF6FF;\n  border-color: #1e40af;\n  color: #1e40af;\n}\n\n.share-btn.shared:hover {\n  background: #DBEAFE;\n  color: #1e3a8a;\n}\n\n.chat-content-area {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n\n.chat-messages-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: min(300px, 100%); /* Respect container bounds while maintaining minimum */\n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width {\n  width: 100%;\n}\n\n.chat-messages-pane:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden {\n  display: none;\n}\n\n.resize-handle {\n  width: 4px;\n  background: transparent;\n  cursor: col-resize;\n  flex-shrink: 0;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.resize-handle:hover {\n  background: #3B82F6;\n}\n\n.resize-handle::before {\n  content: \"\";\n  position: absolute;\n  left: -4px;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n}\n\n.chat-artifact-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: #FAFAFA;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.chat-artifact-pane.maximized {\n  width: 100% !important;\n}\n\n.chat-artifact-pane > mj-artifact-viewer-panel {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: #FFF;\n  min-height: 0;\n  position: relative;\n}\n\n.scroll-to-bottom-icon {\n  position: sticky;\n  bottom: 21px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 40px;\n  margin-top: -40px;\n  margin-left: auto;\n  margin-right: auto;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  transition: all 0.2s ease;\n  z-index: 100;\n  pointer-events: auto;\n}\n\n.scroll-to-bottom-icon:hover {\n  background: #F3F4F6;\n  border-color: #3B82F6;\n  transform: translateX(-50%) translateY(-2px);\n  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);\n}\n\n.scroll-to-bottom-icon i {\n  color: #6B7280;\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon:hover i {\n  color: #3B82F6;\n}\n\n.chat-input-container {\n  flex-shrink: 0;\n  background: #FFF;\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n.loading-peripheral-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: rgba(255, 255, 255, 0.5);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #E5E7EB;\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #F3F4F6;\n  border: 1px solid #E5E7EB;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn:hover {\n  background: #E5E7EB;\n  border-color: #D1D5DB;\n  color: #374151;\n}\n\n.toggle-system-btn.active {\n  background: #3B82F6;\n  border-color: #3B82F6;\n  color: white;\n}\n\n.toggle-system-btn.active:hover {\n  background: #2563EB;\n  border-color: #2563EB;\n}\n\n.toggle-system-btn i {\n  font-size: 12px;\n}\n\n.modal-close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.modal-body {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n.empty-state {\n  grid-column: 1/-1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n}\n\n.artifact-modal-card {\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border: 1.5px solid #E5E7EB;\n  border-radius: 12px;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.artifact-modal-card.expanded {\n  border-color: #3B82F6;\n}\n\n.artifact-modal-card.system-artifact {\n  opacity: 0.85;\n  border-color: #D1D5DB;\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: #9CA3AF;\n  background: #F3F4F6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact:hover {\n  border-color: #9CA3AF;\n  box-shadow: 0 4px 12px rgba(156, 163, 175, 0.15);\n}\n\n.artifact-card-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header:hover {\n  background: #F9FAFB;\n}\n\n.artifact-modal-card:hover {\n  border-color: #3B82F6;\n  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);\n  border-radius: 10px;\n  color: #3B82F6;\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon i {\n  font-size: 18px;\n}\n\n.artifact-modal-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #1F2937;\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta {\n  font-size: 12px;\n  color: #6B7280;\n}\n\n.artifact-modal-action {\n  color: #9CA3AF;\n  transition: color 0.2s;\n}\n\n.artifact-modal-card:hover .artifact-modal-action {\n  color: #3B82F6;\n}\n\n.expand-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: #6B7280;\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn:hover {\n  background: #F3F4F6;\n  color: #3B82F6;\n}\n\n.artifact-versions-list {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: #F9FAFB;\n}\n\n.artifact-version-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item:hover {\n  background: #F3F4F6;\n}\n.artifact-version-item .version-badge {\n  display: inline-block;\n  padding: 4px 8px;\n  background: #EEF2FF;\n  color: #4F46E5;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item .version-open-text {\n  flex: 1;\n  font-size: 13px;\n  color: #6B7280;\n}\n.artifact-version-item i {\n  color: #9CA3AF;\n  font-size: 12px;\n}\n.artifact-version-item:hover .version-badge {\n  background: #4F46E5;\n  color: white;\n}\n.artifact-version-item:hover .version-open-text {\n  color: #3B82F6;\n}\n.artifact-version-item:hover i {\n  color: #3B82F6;\n}\n\n.loading-peripheral-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: white;\n  border: 2px solid #E5E7EB;\n  border-radius: 12px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  color: #4B5563;\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content i {\n  font-size: 20px;\n  color: #9333EA;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: #6B7280;\n  font-size: 15px;\n}\n.loading-content i {\n  font-size: 32px;\n  color: #3B82F6;\n}\n.loading-content span {\n  font-weight: 500;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .chat-header {\n    padding: 8px 12px;\n    gap: 8px;\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .chat-info {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n  .chat-title {\n    font-size: 14px;\n    width: 100%;\n    white-space: normal;\n  }\n  .project-tag {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  .test-indicator {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  .chat-actions {\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    width: 100%;\n  }\n  .chat-members,\n  .artifact-indicator,\n  .action-btn {\n    padding: 6px 10px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  /* Artifact pane - full width overlay on mobile */\n  .chat-content-area {\n    position: relative;\n  }\n  .chat-artifact-pane {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 80px;\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: #FFF;\n  }\n  .resize-handle {\n    display: none;\n  }\n}\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .chat-header {\n    padding: 6px 8px;\n    gap: 6px;\n  }\n  .chat-title {\n    font-size: 13px;\n  }\n  .project-tag {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .test-indicator {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members,\n  .artifact-indicator,\n  .action-btn {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal,\n  .artifacts-modal {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon i {\n    font-size: 14px;\n  }\n}\n"] }]
     }], () => [{ type: i1.ConversationDataService }, { type: i2.AgentStateService }, { type: i3.ConversationAgentService }, { type: i4.ActiveTasksService }, { type: i0.ChangeDetectorRef }, { type: i5.MentionAutocompleteService }, { type: i6.ArtifactPermissionService }, { type: i7.DialogService }], { environmentId: [{
             type: Input
         }], currentUser: [{

package/dist/lib/components/conversation/conversation-empty-state.component.js CHANGED Viewed

@@ -216,11 +216,11 @@ export class ConversationEmptyStateComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("placeholder", "Type your message to start a new conversation...")("disabled", ctx.disabled)("showCharacterCount", true)("enableMentions", true)("currentUser", ctx.currentUser)("rows", 3);
             i0.ɵɵtwoWayProperty("value", ctx.messageText);
-        } }, dependencies: [i1.NgForOf, i1.NgIf, i2.LoadingComponent, i3.MessageInputBoxComponent], styles: [".conversation-empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  padding: 2rem;\n  overflow-y: auto;\n  position: relative;\n}\n@media (max-width: 768px) {\n  .conversation-empty-state[_ngcontent-%COMP%] {\n    align-items: flex-start;\n    padding: 1rem 0.75rem;\n  }\n}\n\n.loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(255, 255, 255, 0.95);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease-in;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n  padding: 2rem;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n}\n.loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--primary-color, #007bff);\n}\n\n.loading-message[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  color: var(--text-primary, #333);\n  font-weight: 500;\n  margin: 0;\n}\n\n.empty-state-container[_ngcontent-%COMP%] {\n  max-width: 800px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-in;\n  transition: opacity 0.2s ease;\n}\n.empty-state-container.loading[_ngcontent-%COMP%] {\n  opacity: 0.4;\n  pointer-events: none;\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\n.greeting-section[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 2rem 0;\n}\n\n.greeting-icon[_ngcontent-%COMP%] {\n  color: var(--primary-color, #007bff);\n  margin-bottom: 1rem;\n  opacity: 0.8;\n}\n\n.greeting-title[_ngcontent-%COMP%] {\n  font-size: 2rem;\n  font-weight: 600;\n  margin: 0 0 0.5rem 0;\n  color: var(--text-primary, #333);\n}\n\n.greeting-subtitle[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  color: var(--text-secondary, #666);\n  margin: 0;\n  line-height: 1.5;\n}\n\n\n\n.suggested-prompts[_ngcontent-%COMP%] {\n  margin: 1rem 0;\n}\n\n.prompt-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 1rem;\n}\n\n.prompt-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n  padding: 1.25rem;\n  background: var(--card-background, #f8f9fa);\n  border: 1px solid var(--border-color, #e0e0e0);\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.prompt-card[_ngcontent-%COMP%]:hover:not(.disabled) {\n  background: var(--card-hover-background, #e9ecef);\n  border-color: var(--primary-color, #007bff);\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n.prompt-card.disabled[_ngcontent-%COMP%] {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.prompt-icon[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--primary-color, #007bff);\n  color: white;\n  border-radius: 8px;\n  font-size: 1.2rem;\n}\n\n.prompt-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-title[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 0.95rem;\n  color: var(--text-primary, #333);\n  margin-bottom: 0.25rem;\n}\n\n.prompt-text[_ngcontent-%COMP%] {\n  font-size: 0.85rem;\n  color: var(--text-secondary, #666);\n  line-height: 1.4;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n\n\n\n.message-input-wrapper[_ngcontent-%COMP%] {\n  margin: 1.5rem 0;\n  width: 100%;\n}\n\n\n\n.tips-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  padding: 1rem 0;\n  border-top: 1px solid var(--border-color, #e0e0e0);\n}\n\n.tip-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 0.875rem;\n  color: var(--text-secondary, #666);\n}\n.tip-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  width: 24px;\n  text-align: center;\n  color: var(--primary-color, #007bff);\n  opacity: 0.7;\n}\n.tip-item[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: var(--text-primary, #333);\n  font-weight: 600;\n}\n\n\n\n@media (max-width: 768px) {\n  .empty-state-container[_ngcontent-%COMP%] {\n    gap: 0.75rem;\n  }\n  .greeting-section[_ngcontent-%COMP%] {\n    padding: 0.25rem 0;\n  }\n  .greeting-icon[_ngcontent-%COMP%] {\n    font-size: 1.5rem;\n    margin-bottom: 0.25rem;\n  }\n  .greeting-title[_ngcontent-%COMP%] {\n    font-size: 1.1rem;\n  }\n  .greeting-subtitle[_ngcontent-%COMP%] {\n    font-size: 0.75rem;\n    padding: 0 0.5rem;\n  }\n  .prompt-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.5rem;\n  }\n  .prompt-card[_ngcontent-%COMP%] {\n    padding: 0.5rem;\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n  .prompt-icon[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    font-size: 0.85rem;\n  }\n  .prompt-title[_ngcontent-%COMP%] {\n    font-size: 0.75rem;\n  }\n  .prompt-text[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n    -webkit-line-clamp: 1;\n  }\n  .message-input-wrapper[_ngcontent-%COMP%] {\n    margin: 0.5rem 0;\n  }\n  .tips-section[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .loading-content[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n  .loading-message[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n  }\n}\n\n\n@media (max-width: 480px) {\n  .empty-state-container[_ngcontent-%COMP%] {\n    gap: 0.5rem;\n  }\n  .greeting-section[_ngcontent-%COMP%] {\n    padding: 0.25rem 0;\n  }\n  .greeting-icon[_ngcontent-%COMP%] {\n    font-size: 1.25rem;\n    margin-bottom: 0.25rem;\n  }\n  .greeting-title[_ngcontent-%COMP%] {\n    font-size: 1rem;\n  }\n  .greeting-subtitle[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n    padding: 0 0.25rem;\n  }\n  .prompt-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.4rem;\n  }\n  .prompt-card[_ngcontent-%COMP%] {\n    padding: 0.4rem;\n    flex-direction: column;\n    gap: 0.4rem;\n  }\n  .prompt-icon[_ngcontent-%COMP%] {\n    width: 24px;\n    height: 24px;\n    font-size: 0.75rem;\n    border-radius: 4px;\n  }\n  .prompt-title[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n  }\n  .prompt-text[_ngcontent-%COMP%] {\n    font-size: 0.65rem;\n    -webkit-line-clamp: 1;\n  }\n  .message-input-wrapper[_ngcontent-%COMP%] {\n    margin: 0.4rem 0;\n  }\n  .tips-section[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .loading-content[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n  .loading-message[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n  }\n}"] });
+        } }, dependencies: [i1.NgForOf, i1.NgIf, i2.LoadingComponent, i3.MessageInputBoxComponent], styles: ["[_nghost-%COMP%] {\n  display: flex;\n  flex: 1;\n  height: 100%;\n  min-height: 0;\n}\n\n.conversation-empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  width: 100%;\n  padding: 2rem;\n  overflow-y: auto;\n  position: relative;\n}\n@media (max-width: 768px) {\n  .conversation-empty-state[_ngcontent-%COMP%] {\n    align-items: flex-start;\n    padding: 1rem 0.75rem;\n  }\n}\n\n.loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(255, 255, 255, 0.95);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease-in;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n  padding: 2rem;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n}\n.loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--primary-color, #007bff);\n}\n\n.loading-message[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  color: var(--text-primary, #333);\n  font-weight: 500;\n  margin: 0;\n}\n\n.empty-state-container[_ngcontent-%COMP%] {\n  max-width: 800px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-in;\n  transition: opacity 0.2s ease;\n}\n.empty-state-container.loading[_ngcontent-%COMP%] {\n  opacity: 0.4;\n  pointer-events: none;\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\n.greeting-section[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 2rem 0;\n}\n\n.greeting-icon[_ngcontent-%COMP%] {\n  color: var(--primary-color, #007bff);\n  margin-bottom: 1rem;\n  opacity: 0.8;\n}\n\n.greeting-title[_ngcontent-%COMP%] {\n  font-size: 2rem;\n  font-weight: 600;\n  margin: 0 0 0.5rem 0;\n  color: var(--text-primary, #333);\n}\n\n.greeting-subtitle[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  color: var(--text-secondary, #666);\n  margin: 0;\n  line-height: 1.5;\n}\n\n\n\n.suggested-prompts[_ngcontent-%COMP%] {\n  margin: 1rem 0;\n}\n\n.prompt-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 1rem;\n}\n\n.prompt-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n  padding: 1.25rem;\n  background: var(--card-background, #f8f9fa);\n  border: 1px solid var(--border-color, #e0e0e0);\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.prompt-card[_ngcontent-%COMP%]:hover:not(.disabled) {\n  background: var(--card-hover-background, #e9ecef);\n  border-color: var(--primary-color, #007bff);\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n.prompt-card.disabled[_ngcontent-%COMP%] {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.prompt-icon[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--primary-color, #007bff);\n  color: white;\n  border-radius: 8px;\n  font-size: 1.2rem;\n}\n\n.prompt-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-title[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 0.95rem;\n  color: var(--text-primary, #333);\n  margin-bottom: 0.25rem;\n}\n\n.prompt-text[_ngcontent-%COMP%] {\n  font-size: 0.85rem;\n  color: var(--text-secondary, #666);\n  line-height: 1.4;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n\n\n\n.message-input-wrapper[_ngcontent-%COMP%] {\n  margin: 1.5rem 0;\n  width: 100%;\n}\n\n\n\n.tips-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  padding: 1rem 0;\n  border-top: 1px solid var(--border-color, #e0e0e0);\n}\n\n.tip-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 0.875rem;\n  color: var(--text-secondary, #666);\n}\n.tip-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  width: 24px;\n  text-align: center;\n  color: var(--primary-color, #007bff);\n  opacity: 0.7;\n}\n.tip-item[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: var(--text-primary, #333);\n  font-weight: 600;\n}\n\n\n\n@media (max-width: 768px) {\n  .empty-state-container[_ngcontent-%COMP%] {\n    gap: 0.75rem;\n  }\n  .greeting-section[_ngcontent-%COMP%] {\n    padding: 0.25rem 0;\n  }\n  .greeting-icon[_ngcontent-%COMP%] {\n    font-size: 1.5rem;\n    margin-bottom: 0.25rem;\n  }\n  .greeting-title[_ngcontent-%COMP%] {\n    font-size: 1.1rem;\n  }\n  .greeting-subtitle[_ngcontent-%COMP%] {\n    font-size: 0.75rem;\n    padding: 0 0.5rem;\n  }\n  .prompt-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.5rem;\n  }\n  .prompt-card[_ngcontent-%COMP%] {\n    padding: 0.5rem;\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n  .prompt-icon[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    font-size: 0.85rem;\n  }\n  .prompt-title[_ngcontent-%COMP%] {\n    font-size: 0.75rem;\n  }\n  .prompt-text[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n    -webkit-line-clamp: 1;\n  }\n  .message-input-wrapper[_ngcontent-%COMP%] {\n    margin: 0.5rem 0;\n  }\n  .tips-section[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .loading-content[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n  .loading-message[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n  }\n}\n\n\n@media (max-width: 480px) {\n  .empty-state-container[_ngcontent-%COMP%] {\n    gap: 0.5rem;\n  }\n  .greeting-section[_ngcontent-%COMP%] {\n    padding: 0.25rem 0;\n  }\n  .greeting-icon[_ngcontent-%COMP%] {\n    font-size: 1.25rem;\n    margin-bottom: 0.25rem;\n  }\n  .greeting-title[_ngcontent-%COMP%] {\n    font-size: 1rem;\n  }\n  .greeting-subtitle[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n    padding: 0 0.25rem;\n  }\n  .prompt-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.4rem;\n  }\n  .prompt-card[_ngcontent-%COMP%] {\n    padding: 0.4rem;\n    flex-direction: column;\n    gap: 0.4rem;\n  }\n  .prompt-icon[_ngcontent-%COMP%] {\n    width: 24px;\n    height: 24px;\n    font-size: 0.75rem;\n    border-radius: 4px;\n  }\n  .prompt-title[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n  }\n  .prompt-text[_ngcontent-%COMP%] {\n    font-size: 0.65rem;\n    -webkit-line-clamp: 1;\n  }\n  .message-input-wrapper[_ngcontent-%COMP%] {\n    margin: 0.4rem 0;\n  }\n  .tips-section[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .loading-content[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n  .loading-message[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationEmptyStateComponent, [{
         type: Component,
-        args: [{ selector: 'mj-conversation-empty-state', template: "<div class=\"conversation-empty-state\">\n  <!-- Loading Overlay -->\n  <div class=\"loading-overlay\" *ngIf=\"disabled\">\n    <mj-loading text=\"Creating your conversation...\" size=\"large\"></mj-loading>\n  </div>\n\n  <div class=\"empty-state-container\" [class.loading]=\"disabled\">\n    <!-- Greeting Header -->\n    <div class=\"greeting-section\">\n      <div class=\"greeting-icon\">\n        <i class=\"fa-solid fa-comments fa-3x\"></i>\n      </div>\n      <h1 class=\"greeting-title\">Welcome to Conversations</h1>\n      <p class=\"greeting-subtitle\">\n        Start a new conversation by typing a message below, or choose a suggested prompt to get started.\n      </p>\n    </div>\n\n    <!-- Suggested Prompts -->\n    <div class=\"suggested-prompts\">\n      <div class=\"prompt-grid\">\n        <div\n          *ngFor=\"let prompt of suggestedPrompts\"\n          class=\"prompt-card\"\n          (click)=\"onSuggestedPromptClicked(prompt.prompt)\"\n          [class.disabled]=\"disabled\"\n        >\n          <div class=\"prompt-icon\">\n            <i class=\"fa-solid {{prompt.icon}}\"></i>\n          </div>\n          <div class=\"prompt-content\">\n            <div class=\"prompt-title\">{{prompt.title}}</div>\n            <div class=\"prompt-text\">{{prompt.prompt}}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Message Input (Centered) -->\n    <div class=\"message-input-wrapper\">\n      <mj-message-input-box\n        [placeholder]=\"'Type your message to start a new conversation...'\"\n        [disabled]=\"disabled\"\n        [showCharacterCount]=\"true\"\n        [enableMentions]=\"true\"\n        [currentUser]=\"currentUser\"\n        [rows]=\"3\"\n        [(value)]=\"messageText\"\n        (textSubmitted)=\"onTextSubmitted($event)\">\n      </mj-message-input-box>\n    </div>\n\n    <!-- Footer Tips -->\n    <div class=\"tips-section\">\n      <div class=\"tip-item\">\n        <i class=\"fa-solid fa-at\"></i>\n        <span>Use <strong>&#64;AgentName</strong> to directly invoke a specific agent</span>\n      </div>\n      <div class=\"tip-item\">\n        <i class=\"fa-solid fa-keyboard\"></i>\n        <span>Press <strong>Enter</strong> to send, <strong>Shift+Enter</strong> for new line</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".conversation-empty-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  padding: 2rem;\n  overflow-y: auto;\n  position: relative;\n}\n@media (max-width: 768px) {\n  .conversation-empty-state {\n    align-items: flex-start;\n    padding: 1rem 0.75rem;\n  }\n}\n\n.loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(255, 255, 255, 0.95);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  animation: fadeIn 0.2s ease-in;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n  padding: 2rem;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n}\n.loading-content i {\n  color: var(--primary-color, #007bff);\n}\n\n.loading-message {\n  font-size: 1rem;\n  color: var(--text-primary, #333);\n  font-weight: 500;\n  margin: 0;\n}\n\n.empty-state-container {\n  max-width: 800px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n  animation: fadeIn 0.3s ease-in;\n  transition: opacity 0.2s ease;\n}\n.empty-state-container.loading {\n  opacity: 0.4;\n  pointer-events: none;\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/* Greeting Section */\n.greeting-section {\n  text-align: center;\n  padding: 2rem 0;\n}\n\n.greeting-icon {\n  color: var(--primary-color, #007bff);\n  margin-bottom: 1rem;\n  opacity: 0.8;\n}\n\n.greeting-title {\n  font-size: 2rem;\n  font-weight: 600;\n  margin: 0 0 0.5rem 0;\n  color: var(--text-primary, #333);\n}\n\n.greeting-subtitle {\n  font-size: 1rem;\n  color: var(--text-secondary, #666);\n  margin: 0;\n  line-height: 1.5;\n}\n\n/* Suggested Prompts */\n.suggested-prompts {\n  margin: 1rem 0;\n}\n\n.prompt-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 1rem;\n}\n\n.prompt-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n  padding: 1.25rem;\n  background: var(--card-background, #f8f9fa);\n  border: 1px solid var(--border-color, #e0e0e0);\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.prompt-card:hover:not(.disabled) {\n  background: var(--card-hover-background, #e9ecef);\n  border-color: var(--primary-color, #007bff);\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n.prompt-card.disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.prompt-icon {\n  flex-shrink: 0;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--primary-color, #007bff);\n  color: white;\n  border-radius: 8px;\n  font-size: 1.2rem;\n}\n\n.prompt-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-title {\n  font-weight: 600;\n  font-size: 0.95rem;\n  color: var(--text-primary, #333);\n  margin-bottom: 0.25rem;\n}\n\n.prompt-text {\n  font-size: 0.85rem;\n  color: var(--text-secondary, #666);\n  line-height: 1.4;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n\n/* Message Input Wrapper */\n.message-input-wrapper {\n  margin: 1.5rem 0;\n  width: 100%;\n}\n\n/* Tips Section */\n.tips-section {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  padding: 1rem 0;\n  border-top: 1px solid var(--border-color, #e0e0e0);\n}\n\n.tip-item {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 0.875rem;\n  color: var(--text-secondary, #666);\n}\n.tip-item i {\n  flex-shrink: 0;\n  width: 24px;\n  text-align: center;\n  color: var(--primary-color, #007bff);\n  opacity: 0.7;\n}\n.tip-item strong {\n  color: var(--text-primary, #333);\n  font-weight: 600;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .empty-state-container {\n    gap: 0.75rem;\n  }\n  .greeting-section {\n    padding: 0.25rem 0;\n  }\n  .greeting-icon {\n    font-size: 1.5rem;\n    margin-bottom: 0.25rem;\n  }\n  .greeting-title {\n    font-size: 1.1rem;\n  }\n  .greeting-subtitle {\n    font-size: 0.75rem;\n    padding: 0 0.5rem;\n  }\n  .prompt-grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.5rem;\n  }\n  .prompt-card {\n    padding: 0.5rem;\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n  .prompt-icon {\n    width: 28px;\n    height: 28px;\n    font-size: 0.85rem;\n  }\n  .prompt-title {\n    font-size: 0.75rem;\n  }\n  .prompt-text {\n    font-size: 0.7rem;\n    -webkit-line-clamp: 1;\n  }\n  .message-input-wrapper {\n    margin: 0.5rem 0;\n  }\n  .tips-section {\n    display: none;\n  }\n  .loading-content {\n    padding: 1rem;\n  }\n  .loading-message {\n    font-size: 0.85rem;\n  }\n}\n/* Small Phone adjustments */\n@media (max-width: 480px) {\n  .empty-state-container {\n    gap: 0.5rem;\n  }\n  .greeting-section {\n    padding: 0.25rem 0;\n  }\n  .greeting-icon {\n    font-size: 1.25rem;\n    margin-bottom: 0.25rem;\n  }\n  .greeting-title {\n    font-size: 1rem;\n  }\n  .greeting-subtitle {\n    font-size: 0.7rem;\n    padding: 0 0.25rem;\n  }\n  .prompt-grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.4rem;\n  }\n  .prompt-card {\n    padding: 0.4rem;\n    flex-direction: column;\n    gap: 0.4rem;\n  }\n  .prompt-icon {\n    width: 24px;\n    height: 24px;\n    font-size: 0.75rem;\n    border-radius: 4px;\n  }\n  .prompt-title {\n    font-size: 0.7rem;\n  }\n  .prompt-text {\n    font-size: 0.65rem;\n    -webkit-line-clamp: 1;\n  }\n  .message-input-wrapper {\n    margin: 0.4rem 0;\n  }\n  .tips-section {\n    display: none;\n  }\n  .loading-content {\n    padding: 1rem;\n  }\n  .loading-message {\n    font-size: 0.8rem;\n  }\n}\n"] }]
+        args: [{ selector: 'mj-conversation-empty-state', template: "<div class=\"conversation-empty-state\">\n  <!-- Loading Overlay -->\n  <div class=\"loading-overlay\" *ngIf=\"disabled\">\n    <mj-loading text=\"Creating your conversation...\" size=\"large\"></mj-loading>\n  </div>\n\n  <div class=\"empty-state-container\" [class.loading]=\"disabled\">\n    <!-- Greeting Header -->\n    <div class=\"greeting-section\">\n      <div class=\"greeting-icon\">\n        <i class=\"fa-solid fa-comments fa-3x\"></i>\n      </div>\n      <h1 class=\"greeting-title\">Welcome to Conversations</h1>\n      <p class=\"greeting-subtitle\">\n        Start a new conversation by typing a message below, or choose a suggested prompt to get started.\n      </p>\n    </div>\n\n    <!-- Suggested Prompts -->\n    <div class=\"suggested-prompts\">\n      <div class=\"prompt-grid\">\n        <div\n          *ngFor=\"let prompt of suggestedPrompts\"\n          class=\"prompt-card\"\n          (click)=\"onSuggestedPromptClicked(prompt.prompt)\"\n          [class.disabled]=\"disabled\"\n        >\n          <div class=\"prompt-icon\">\n            <i class=\"fa-solid {{prompt.icon}}\"></i>\n          </div>\n          <div class=\"prompt-content\">\n            <div class=\"prompt-title\">{{prompt.title}}</div>\n            <div class=\"prompt-text\">{{prompt.prompt}}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Message Input (Centered) -->\n    <div class=\"message-input-wrapper\">\n      <mj-message-input-box\n        [placeholder]=\"'Type your message to start a new conversation...'\"\n        [disabled]=\"disabled\"\n        [showCharacterCount]=\"true\"\n        [enableMentions]=\"true\"\n        [currentUser]=\"currentUser\"\n        [rows]=\"3\"\n        [(value)]=\"messageText\"\n        (textSubmitted)=\"onTextSubmitted($event)\">\n      </mj-message-input-box>\n    </div>\n\n    <!-- Footer Tips -->\n    <div class=\"tips-section\">\n      <div class=\"tip-item\">\n        <i class=\"fa-solid fa-at\"></i>\n        <span>Use <strong>&#64;AgentName</strong> to directly invoke a specific agent</span>\n      </div>\n      <div class=\"tip-item\">\n        <i class=\"fa-solid fa-keyboard\"></i>\n        <span>Press <strong>Enter</strong> to send, <strong>Shift+Enter</strong> for new line</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host {\n  display: flex;\n  flex: 1;\n  height: 100%;\n  min-height: 0;\n}\n\n.conversation-empty-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  width: 100%;\n  padding: 2rem;\n  overflow-y: auto;\n  position: relative;\n}\n@media (max-width: 768px) {\n  .conversation-empty-state {\n    align-items: flex-start;\n    padding: 1rem 0.75rem;\n  }\n}\n\n.loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(255, 255, 255, 0.95);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  animation: fadeIn 0.2s ease-in;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n  padding: 2rem;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n}\n.loading-content i {\n  color: var(--primary-color, #007bff);\n}\n\n.loading-message {\n  font-size: 1rem;\n  color: var(--text-primary, #333);\n  font-weight: 500;\n  margin: 0;\n}\n\n.empty-state-container {\n  max-width: 800px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n  animation: fadeIn 0.3s ease-in;\n  transition: opacity 0.2s ease;\n}\n.empty-state-container.loading {\n  opacity: 0.4;\n  pointer-events: none;\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/* Greeting Section */\n.greeting-section {\n  text-align: center;\n  padding: 2rem 0;\n}\n\n.greeting-icon {\n  color: var(--primary-color, #007bff);\n  margin-bottom: 1rem;\n  opacity: 0.8;\n}\n\n.greeting-title {\n  font-size: 2rem;\n  font-weight: 600;\n  margin: 0 0 0.5rem 0;\n  color: var(--text-primary, #333);\n}\n\n.greeting-subtitle {\n  font-size: 1rem;\n  color: var(--text-secondary, #666);\n  margin: 0;\n  line-height: 1.5;\n}\n\n/* Suggested Prompts */\n.suggested-prompts {\n  margin: 1rem 0;\n}\n\n.prompt-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 1rem;\n}\n\n.prompt-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n  padding: 1.25rem;\n  background: var(--card-background, #f8f9fa);\n  border: 1px solid var(--border-color, #e0e0e0);\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.prompt-card:hover:not(.disabled) {\n  background: var(--card-hover-background, #e9ecef);\n  border-color: var(--primary-color, #007bff);\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n.prompt-card.disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.prompt-icon {\n  flex-shrink: 0;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--primary-color, #007bff);\n  color: white;\n  border-radius: 8px;\n  font-size: 1.2rem;\n}\n\n.prompt-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-title {\n  font-weight: 600;\n  font-size: 0.95rem;\n  color: var(--text-primary, #333);\n  margin-bottom: 0.25rem;\n}\n\n.prompt-text {\n  font-size: 0.85rem;\n  color: var(--text-secondary, #666);\n  line-height: 1.4;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n\n/* Message Input Wrapper */\n.message-input-wrapper {\n  margin: 1.5rem 0;\n  width: 100%;\n}\n\n/* Tips Section */\n.tips-section {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  padding: 1rem 0;\n  border-top: 1px solid var(--border-color, #e0e0e0);\n}\n\n.tip-item {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 0.875rem;\n  color: var(--text-secondary, #666);\n}\n.tip-item i {\n  flex-shrink: 0;\n  width: 24px;\n  text-align: center;\n  color: var(--primary-color, #007bff);\n  opacity: 0.7;\n}\n.tip-item strong {\n  color: var(--text-primary, #333);\n  font-weight: 600;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .empty-state-container {\n    gap: 0.75rem;\n  }\n  .greeting-section {\n    padding: 0.25rem 0;\n  }\n  .greeting-icon {\n    font-size: 1.5rem;\n    margin-bottom: 0.25rem;\n  }\n  .greeting-title {\n    font-size: 1.1rem;\n  }\n  .greeting-subtitle {\n    font-size: 0.75rem;\n    padding: 0 0.5rem;\n  }\n  .prompt-grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.5rem;\n  }\n  .prompt-card {\n    padding: 0.5rem;\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n  .prompt-icon {\n    width: 28px;\n    height: 28px;\n    font-size: 0.85rem;\n  }\n  .prompt-title {\n    font-size: 0.75rem;\n  }\n  .prompt-text {\n    font-size: 0.7rem;\n    -webkit-line-clamp: 1;\n  }\n  .message-input-wrapper {\n    margin: 0.5rem 0;\n  }\n  .tips-section {\n    display: none;\n  }\n  .loading-content {\n    padding: 1rem;\n  }\n  .loading-message {\n    font-size: 0.85rem;\n  }\n}\n/* Small Phone adjustments */\n@media (max-width: 480px) {\n  .empty-state-container {\n    gap: 0.5rem;\n  }\n  .greeting-section {\n    padding: 0.25rem 0;\n  }\n  .greeting-icon {\n    font-size: 1.25rem;\n    margin-bottom: 0.25rem;\n  }\n  .greeting-title {\n    font-size: 1rem;\n  }\n  .greeting-subtitle {\n    font-size: 0.7rem;\n    padding: 0 0.25rem;\n  }\n  .prompt-grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.4rem;\n  }\n  .prompt-card {\n    padding: 0.4rem;\n    flex-direction: column;\n    gap: 0.4rem;\n  }\n  .prompt-icon {\n    width: 24px;\n    height: 24px;\n    font-size: 0.75rem;\n    border-radius: 4px;\n  }\n  .prompt-title {\n    font-size: 0.7rem;\n  }\n  .prompt-text {\n    font-size: 0.65rem;\n    -webkit-line-clamp: 1;\n  }\n  .message-input-wrapper {\n    margin: 0.4rem 0;\n  }\n  .tips-section {\n    display: none;\n  }\n  .loading-content {\n    padding: 1rem;\n  }\n  .loading-message {\n    font-size: 0.8rem;\n  }\n}\n"] }]
     }], () => [], { currentUser: [{
             type: Input
         }], disabled: [{

package/dist/lib/components/conversation/conversation-list.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation-list.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/conversation/conversation-list.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAgB,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC3H,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,uBAAuB,EAAE,MAAM,0CAA0C,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAIzE,~~qBAimBa~~,yBAA0B,YAAW,MAAM,EAAE,SAAS;IAoBxD,gBAAgB,EAAE,uBAAuB;IAChD,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,mBAAmB;IAC3B,OAAO,CAAC,kBAAkB;IAC1B,OAAO,CAAC,GAAG;IAvBJ,aAAa,EAAG,MAAM,CAAC;IACvB,WAAW,EAAG,QAAQ,CAAC;IACvB,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC7C,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3C,oBAAoB,uBAA8B;IAClD,wBAAwB,qBAA4B;IAEvD,sBAAsB,EAAE,OAAO,CAAQ;IACvC,cAAc,EAAE,OAAO,CAAQ;IAC/B,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC7C,wBAAwB,cAAqB;IAC7C,eAAe,EAAE,OAAO,CAAS;IACjC,uBAAuB,cAAqB;IAC5C,WAAW,EAAE,MAAM,CAAM;IAEhC,OAAO,CAAC,QAAQ,CAAuB;gBAG9B,gBAAgB,EAAE,uBAAuB,EACxC,aAAa,EAAE,aAAa,EAC5B,mBAAmB,EAAE,mBAAmB,EACxC,kBAAkB,EAAE,kBAAkB,EACtC,GAAG,EAAE,iBAAiB;IAGhC,IAAI,qBAAqB,IAAI,kBAAkB,EAAE,CAShD;IAED,IAAI,mBAAmB,yBAEtB;IAED,IAAI,qBAAqB,yBAExB;IAED,QAAQ;IAaR,WAAW;IAMX,eAAe,IAAI,IAAI;IAOhB,oBAAoB,IAAI,IAAI;IAI5B,YAAY,IAAI,IAAI;IAI3B,kBAAkB,CAAC,YAAY,EAAE,kBAAkB,GAAG,IAAI;IAMpD,qBAAqB,IAAI,OAAO,CAAC,IAAI,CAAC;IAMtC,kBAAkB,CAAC,YAAY,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC;IAmCnE,kBAAkB,CAAC,YAAY,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC;IAkBzE,UAAU,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI;IAKtD,SAAS,IAAI,IAAI;IAIX,SAAS,CAAC,YAAY,EAAE,kBAAkB,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;IAW/E,cAAc,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO;IAI/C,mBAAmB,IAAI,IAAI;IAO3B,2BAA2B,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI;IAQzD,SAAS,IAAI,IAAI;IAMjB,WAAW,IAAI,IAAI;IAIb,uBAAuB,IAAI,OAAO,CAAC,IAAI,CAAC;IAqC9C,uBAAuB,CAAC,YAAY,EAAE,kBAAkB,GAAG,IAAI;yCAvOpD,yBAAyB;2CAAzB,yBAAyB;CA8OrC"}
1	+ {"version":3,"file":"conversation-list.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/conversation/conversation-list.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAgB,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC3H,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,uBAAuB,EAAE,MAAM,0CAA0C,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAIzE,qBAkmBa,yBAA0B,YAAW,MAAM,EAAE,SAAS;IAoBxD,gBAAgB,EAAE,uBAAuB;IAChD,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,mBAAmB;IAC3B,OAAO,CAAC,kBAAkB;IAC1B,OAAO,CAAC,GAAG;IAvBJ,aAAa,EAAG,MAAM,CAAC;IACvB,WAAW,EAAG,QAAQ,CAAC;IACvB,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC7C,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3C,oBAAoB,uBAA8B;IAClD,wBAAwB,qBAA4B;IAEvD,sBAAsB,EAAE,OAAO,CAAQ;IACvC,cAAc,EAAE,OAAO,CAAQ;IAC/B,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC7C,wBAAwB,cAAqB;IAC7C,eAAe,EAAE,OAAO,CAAS;IACjC,uBAAuB,cAAqB;IAC5C,WAAW,EAAE,MAAM,CAAM;IAEhC,OAAO,CAAC,QAAQ,CAAuB;gBAG9B,gBAAgB,EAAE,uBAAuB,EACxC,aAAa,EAAE,aAAa,EAC5B,mBAAmB,EAAE,mBAAmB,EACxC,kBAAkB,EAAE,kBAAkB,EACtC,GAAG,EAAE,iBAAiB;IAGhC,IAAI,qBAAqB,IAAI,kBAAkB,EAAE,CAShD;IAED,IAAI,mBAAmB,yBAEtB;IAED,IAAI,qBAAqB,yBAExB;IAED,QAAQ;IAaR,WAAW;IAMX,eAAe,IAAI,IAAI;IAOhB,oBAAoB,IAAI,IAAI;IAI5B,YAAY,IAAI,IAAI;IAI3B,kBAAkB,CAAC,YAAY,EAAE,kBAAkB,GAAG,IAAI;IAMpD,qBAAqB,IAAI,OAAO,CAAC,IAAI,CAAC;IAMtC,kBAAkB,CAAC,YAAY,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC;IAmCnE,kBAAkB,CAAC,YAAY,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC;IAkBzE,UAAU,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI;IAKtD,SAAS,IAAI,IAAI;IAIX,SAAS,CAAC,YAAY,EAAE,kBAAkB,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;IAW/E,cAAc,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO;IAI/C,mBAAmB,IAAI,IAAI;IAO3B,2BAA2B,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI;IAQzD,SAAS,IAAI,IAAI;IAMjB,WAAW,IAAI,IAAI;IAIb,uBAAuB,IAAI,OAAO,CAAC,IAAI,CAAC;IAqC9C,uBAAuB,CAAC,YAAY,EAAE,kBAAkB,GAAG,IAAI;yCAvOpD,yBAAyB;2CAAzB,yBAAyB;CA8OrC"}

package/dist/lib/components/conversation/conversation-list.component.js CHANGED Viewed

@@ -505,7 +505,7 @@ export class ConversationListComponent {
             i0.ɵɵrepeater(ctx.unpinnedConversations);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.isSelectionMode ? 20 : -1);
-        } }, dependencies: [i5.DefaultValueAccessor, i5.NgControlStatus, i5.NgModel, i6.DialogContainerDirective, i7.NotificationBadgeComponent], styles: [".conversation-list[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; background: #092340; }\n    .list-header[_ngcontent-%COMP%] { padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); }\n    .search-input[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 8px 12px;\n      background: rgba(255,255,255,0.1);\n      border: 1px solid rgba(255,255,255,0.2);\n      border-radius: 6px;\n      color: white;\n      font-size: 13px;\n      transition: all 0.2s;\n    }\n    .search-input[_ngcontent-%COMP%]::placeholder { color: rgba(255,255,255,0.5); }\n    .search-input[_ngcontent-%COMP%]:focus { outline: none; background: rgba(255,255,255,0.15); border-color: #0076B6; }\n    .btn-new-conversation[_ngcontent-%COMP%] {\n      width: calc(100% - 16px);\n      margin: 8px;\n      padding: 10px;\n      background: #0076B6;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 14px;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      transition: background 0.2s;\n      flex-shrink: 0;\n    }\n    .btn-new-conversation[_ngcontent-%COMP%]:hover { background: #005A8C; }\n    .btn-new-conversation[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 14px; }\n    .list-content[_ngcontent-%COMP%] { flex: 1; overflow-y: auto; padding: 4px 0; }\n\n    \n\n    .sidebar-section[_ngcontent-%COMP%] { margin-bottom: 20px; }\n    .pinned-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n      background: rgba(255, 193, 7, 0.08);\n      border-radius: 4px;\n      margin: 0 4px;\n    }\n    .pinned-section[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%]   .section-icon[_ngcontent-%COMP%] {\n      color: #FFC107;\n      font-size: 11px;\n      margin-left: 2px;\n    }\n    .section-header[_ngcontent-%COMP%] {\n      padding: 4px 16px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      cursor: pointer;\n      color: rgba(255, 255, 255, 0.7);\n      font-size: 13px;\n      font-weight: 500;\n      transition: color 0.2s;\n      user-select: none;\n    }\n    .section-header[_ngcontent-%COMP%]:hover { color: white; }\n    .section-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n      transition: transform 0.2s;\n    }\n    .section-header.expanded[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { transform: rotate(90deg); }\n    .chat-list[_ngcontent-%COMP%] {\n      padding: 4px 0;\n      display: none;\n    }\n    .chat-list.expanded[_ngcontent-%COMP%] { display: block; }\n\n    .conversation-item[_ngcontent-%COMP%] {\n      padding: 6px 5px 6px 16px;\n      cursor: pointer;\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      transition: all 0.2s;\n      position: relative;\n      color: rgba(255,255,255,0.7);\n      font-size: 14px;\n      min-height: 45px;\n    }\n    .conversation-item[_ngcontent-%COMP%]:hover { background: rgba(255,255,255,0.08); color: white; }\n    .conversation-item[_ngcontent-%COMP%]:hover   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; }\n    .conversation-item.active[_ngcontent-%COMP%] { background: #0076B6; color: white; }\n    .conversation-icon-wrapper[_ngcontent-%COMP%] { position: relative; flex-shrink: 0; }\n    .conversation-icon[_ngcontent-%COMP%] { font-size: 12px; width: 16px; text-align: center; }\n    .conversation-icon.has-tasks[_ngcontent-%COMP%] { color: #fb923c; }\n    .badge-overlay[_ngcontent-%COMP%] { position: absolute; top: -4px; right: -4px; }\n    .conversation-info[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n    .conversation-name[_ngcontent-%COMP%] { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-preview[_ngcontent-%COMP%] { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-item.active[_ngcontent-%COMP%]   .conversation-preview[_ngcontent-%COMP%] { color: rgba(255,255,255,0.8); }\n    .conversation-meta[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }\n\n    \n\n    .project-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-size: 10px;\n      font-weight: 600;\n      margin-left: auto;\n      background-color: rgba(255, 255, 255, 0.1);\n      color: rgba(255, 255, 255, 0.6);\n      white-space: nowrap;\n      max-width: 80px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .conversation-item[_ngcontent-%COMP%]:hover   .project-badge[_ngcontent-%COMP%] {\n      background-color: rgba(255, 255, 255, 0.15);\n      color: rgba(255, 255, 255, 0.8);\n    }\n    .conversation-item.active[_ngcontent-%COMP%]   .project-badge[_ngcontent-%COMP%] {\n      background-color: rgba(255, 255, 255, 0.2);\n      color: white;\n    }\n\n    .conversation-actions[_ngcontent-%COMP%] {\n      position: absolute;\n      right: 5px;\n      top: 50%;\n      transform: translateY(-50%);\n      display: flex;\n      align-items: center;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.2s;\n      z-index: 10;\n    }\n    .conversation-item[_ngcontent-%COMP%]:hover   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; pointer-events: auto; }\n    .conversation-item.active[_ngcontent-%COMP%]   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; pointer-events: auto; }\n    .conversation-actions[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] { pointer-events: auto; }\n    .pinned-icon[_ngcontent-%COMP%] { color: #AAE7FD; font-size: 12px; }\n\n    \n\n    .task-indicator[_ngcontent-%COMP%] {\n      color: #fb923c;\n      font-size: 12px;\n      margin-right: 8px;\n      flex-shrink: 0;\n      animation: _ngcontent-%COMP%_pulse-glow 2s ease-in-out infinite;\n    }\n    @keyframes _ngcontent-%COMP%_pulse-glow {\n      0%, 100% {\n        opacity: 1;\n        filter: drop-shadow(0 0 2px #fb923c);\n      }\n      50% {\n        opacity: 0.6;\n        filter: drop-shadow(0 0 4px #fb923c);\n      }\n    }\n    .conversation-item.active[_ngcontent-%COMP%]   .task-indicator[_ngcontent-%COMP%] {\n      color: #fbbf24;\n    }\n\n    .menu-btn[_ngcontent-%COMP%] {\n      width: 28px;\n      height: 28px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 6px;\n      color: rgba(255,255,255,0.7);\n      background: #092340 !important;\n      border: none;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n    .menu-btn[_ngcontent-%COMP%]:hover {\n      background: rgba(255,255,255,0.15) !important;\n      color: white;\n    }\n    .conversation-item.active[_ngcontent-%COMP%]   .menu-btn[_ngcontent-%COMP%] {\n      background: #005A8C !important;\n      color: white;\n    }\n    .menu-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 14px; }\n\n    .context-menu[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 100%;\n      right: 0;\n      margin-top: 4px;\n      min-width: 160px;\n      background: #0A2742;\n      border: 1px solid rgba(255,255,255,0.15);\n      border-radius: 8px;\n      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n      z-index: 1001;\n      overflow: hidden;\n      pointer-events: auto;\n    }\n\n    .menu-item[_ngcontent-%COMP%] {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 14px;\n      background: transparent;\n      border: none;\n      color: rgba(255,255,255,0.85);\n      font-size: 14px;\n      text-align: left;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .menu-item[_ngcontent-%COMP%]:hover {\n      background: rgba(255,255,255,0.1);\n      color: white;\n    }\n\n    .menu-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      width: 16px;\n      font-size: 13px;\n      color: rgba(255,255,255,0.6);\n    }\n\n    .menu-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n      color: white;\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%] {\n      color: rgba(239, 68, 68, 0.9);\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%]:hover {\n      background: rgba(239, 68, 68, 0.15);\n      color: #ff6b6b;\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: rgba(239, 68, 68, 0.8);\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n      color: #ff6b6b;\n    }\n\n    .menu-divider[_ngcontent-%COMP%] {\n      height: 1px;\n      background: rgba(255,255,255,0.1);\n      margin: 4px 0;\n    }\n\n    \n\n    .conversation-item.renamed[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_renameHighlight 1500ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes _ngcontent-%COMP%_renameHighlight {\n      0% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(147, 51, 234, 0.4));\n        transform: scale(1.03);\n        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);\n      }\n      25% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.35), rgba(147, 51, 234, 0.35));\n        box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);\n      }\n      50% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.3), rgba(59, 130, 246, 0.3));\n        transform: scale(1.02);\n        box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);\n      }\n      75% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));\n        box-shadow: 0 0 5px rgba(16, 185, 129, 0.2);\n      }\n      100% {\n        background: transparent;\n        transform: scale(1);\n        box-shadow: none;\n      }\n    }\n\n    \n\n    .header-top[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n    }\n\n    .btn-select[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      background: transparent;\n      border: 1px solid rgba(255,255,255,0.2);\n      border-radius: 6px;\n      color: rgba(255,255,255,0.7);\n      font-size: 13px;\n      font-weight: 500;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      cursor: pointer;\n      transition: all 0.2s;\n      white-space: nowrap;\n      flex-shrink: 0;\n    }\n\n    .btn-select[_ngcontent-%COMP%]:hover {\n      background: rgba(255,255,255,0.1);\n      color: white;\n      border-color: rgba(255,255,255,0.3);\n    }\n\n    .conversation-checkbox[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      margin-right: 8px;\n      flex-shrink: 0;\n    }\n\n    .conversation-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: #0076B6;\n    }\n\n    .selection-action-bar[_ngcontent-%COMP%] {\n      position: sticky;\n      bottom: 0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      background: #0A2742;\n      border-top: 1px solid rgba(255,255,255,0.15);\n      gap: 12px;\n      flex-wrap: wrap;\n      flex-shrink: 0;\n    }\n\n    .selection-info[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      color: rgba(255,255,255,0.9);\n      font-size: 14px;\n      font-weight: 500;\n      flex: 1 1 auto;\n      min-width: 150px;\n    }\n\n    .selection-count[_ngcontent-%COMP%] {\n      color: white;\n    }\n\n    .link-btn[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      color: #AAE7FD;\n      cursor: pointer;\n      font-size: 13px;\n      text-decoration: underline;\n      padding: 0;\n      transition: color 0.2s;\n    }\n\n    .link-btn[_ngcontent-%COMP%]:hover {\n      color: white;\n    }\n\n    .selection-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n      flex: 0 0 auto;\n    }\n\n    .btn-cancel[_ngcontent-%COMP%] {\n      padding: 8px 16px;\n      background: transparent;\n      border: 1px solid rgba(255,255,255,0.2);\n      border-radius: 6px;\n      color: rgba(255,255,255,0.7);\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      transition: all 0.2s;\n    }\n\n    .btn-cancel[_ngcontent-%COMP%]:hover {\n      background: rgba(255,255,255,0.1);\n      color: white;\n    }\n\n    .btn-delete-bulk[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      background: #DC2626;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 600;\n      transition: all 0.2s;\n    }\n\n    .btn-delete-bulk[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: #B91C1C;\n    }\n\n    .btn-delete-bulk[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-delete-bulk[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }"] });
+        } }, dependencies: [i5.DefaultValueAccessor, i5.NgControlStatus, i5.NgModel, i6.DialogContainerDirective, i7.NotificationBadgeComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n    .conversation-list[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; background: #092340; }\n    .list-header[_ngcontent-%COMP%] { padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); }\n    .search-input[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 8px 12px;\n      background: rgba(255,255,255,0.1);\n      border: 1px solid rgba(255,255,255,0.2);\n      border-radius: 6px;\n      color: white;\n      font-size: 13px;\n      transition: all 0.2s;\n    }\n    .search-input[_ngcontent-%COMP%]::placeholder { color: rgba(255,255,255,0.5); }\n    .search-input[_ngcontent-%COMP%]:focus { outline: none; background: rgba(255,255,255,0.15); border-color: #0076B6; }\n    .btn-new-conversation[_ngcontent-%COMP%] {\n      width: calc(100% - 16px);\n      margin: 8px;\n      padding: 10px;\n      background: #0076B6;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 14px;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      transition: background 0.2s;\n      flex-shrink: 0;\n    }\n    .btn-new-conversation[_ngcontent-%COMP%]:hover { background: #005A8C; }\n    .btn-new-conversation[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 14px; }\n    .list-content[_ngcontent-%COMP%] { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; }\n\n    \n\n    .sidebar-section[_ngcontent-%COMP%] { margin-bottom: 20px; }\n    .pinned-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n      background: rgba(255, 193, 7, 0.08);\n      border-radius: 4px;\n      margin: 0 4px;\n    }\n    .pinned-section[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%]   .section-icon[_ngcontent-%COMP%] {\n      color: #FFC107;\n      font-size: 11px;\n      margin-left: 2px;\n    }\n    .section-header[_ngcontent-%COMP%] {\n      padding: 4px 16px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      cursor: pointer;\n      color: rgba(255, 255, 255, 0.7);\n      font-size: 13px;\n      font-weight: 500;\n      transition: color 0.2s;\n      user-select: none;\n    }\n    .section-header[_ngcontent-%COMP%]:hover { color: white; }\n    .section-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n      transition: transform 0.2s;\n    }\n    .section-header.expanded[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { transform: rotate(90deg); }\n    .chat-list[_ngcontent-%COMP%] {\n      padding: 4px 0;\n      display: none;\n    }\n    .chat-list.expanded[_ngcontent-%COMP%] { display: block; }\n\n    .conversation-item[_ngcontent-%COMP%] {\n      padding: 6px 5px 6px 16px;\n      cursor: pointer;\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      transition: all 0.2s;\n      position: relative;\n      color: rgba(255,255,255,0.7);\n      font-size: 14px;\n      min-height: 45px;\n    }\n    .conversation-item[_ngcontent-%COMP%]:hover { background: rgba(255,255,255,0.08); color: white; }\n    .conversation-item[_ngcontent-%COMP%]:hover   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; }\n    .conversation-item.active[_ngcontent-%COMP%] { background: #0076B6; color: white; }\n    .conversation-icon-wrapper[_ngcontent-%COMP%] { position: relative; flex-shrink: 0; }\n    .conversation-icon[_ngcontent-%COMP%] { font-size: 12px; width: 16px; text-align: center; }\n    .conversation-icon.has-tasks[_ngcontent-%COMP%] { color: #fb923c; }\n    .badge-overlay[_ngcontent-%COMP%] { position: absolute; top: -4px; right: -4px; }\n    .conversation-info[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n    .conversation-name[_ngcontent-%COMP%] { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-preview[_ngcontent-%COMP%] { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-item.active[_ngcontent-%COMP%]   .conversation-preview[_ngcontent-%COMP%] { color: rgba(255,255,255,0.8); }\n    .conversation-meta[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }\n\n    \n\n    .project-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-size: 10px;\n      font-weight: 600;\n      margin-left: auto;\n      background-color: rgba(255, 255, 255, 0.1);\n      color: rgba(255, 255, 255, 0.6);\n      white-space: nowrap;\n      max-width: 80px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .conversation-item[_ngcontent-%COMP%]:hover   .project-badge[_ngcontent-%COMP%] {\n      background-color: rgba(255, 255, 255, 0.15);\n      color: rgba(255, 255, 255, 0.8);\n    }\n    .conversation-item.active[_ngcontent-%COMP%]   .project-badge[_ngcontent-%COMP%] {\n      background-color: rgba(255, 255, 255, 0.2);\n      color: white;\n    }\n\n    .conversation-actions[_ngcontent-%COMP%] {\n      position: absolute;\n      right: 5px;\n      top: 50%;\n      transform: translateY(-50%);\n      display: flex;\n      align-items: center;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.2s;\n      z-index: 10;\n    }\n    .conversation-item[_ngcontent-%COMP%]:hover   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; pointer-events: auto; }\n    .conversation-item.active[_ngcontent-%COMP%]   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; pointer-events: auto; }\n    .conversation-actions[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] { pointer-events: auto; }\n    .pinned-icon[_ngcontent-%COMP%] { color: #AAE7FD; font-size: 12px; }\n\n    \n\n    .task-indicator[_ngcontent-%COMP%] {\n      color: #fb923c;\n      font-size: 12px;\n      margin-right: 8px;\n      flex-shrink: 0;\n      animation: _ngcontent-%COMP%_pulse-glow 2s ease-in-out infinite;\n    }\n    @keyframes _ngcontent-%COMP%_pulse-glow {\n      0%, 100% {\n        opacity: 1;\n        filter: drop-shadow(0 0 2px #fb923c);\n      }\n      50% {\n        opacity: 0.6;\n        filter: drop-shadow(0 0 4px #fb923c);\n      }\n    }\n    .conversation-item.active[_ngcontent-%COMP%]   .task-indicator[_ngcontent-%COMP%] {\n      color: #fbbf24;\n    }\n\n    .menu-btn[_ngcontent-%COMP%] {\n      width: 28px;\n      height: 28px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 6px;\n      color: rgba(255,255,255,0.7);\n      background: #092340 !important;\n      border: none;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n    .menu-btn[_ngcontent-%COMP%]:hover {\n      background: rgba(255,255,255,0.15) !important;\n      color: white;\n    }\n    .conversation-item.active[_ngcontent-%COMP%]   .menu-btn[_ngcontent-%COMP%] {\n      background: #005A8C !important;\n      color: white;\n    }\n    .menu-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 14px; }\n\n    .context-menu[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 100%;\n      right: 0;\n      margin-top: 4px;\n      min-width: 160px;\n      background: #0A2742;\n      border: 1px solid rgba(255,255,255,0.15);\n      border-radius: 8px;\n      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n      z-index: 1001;\n      overflow: hidden;\n      pointer-events: auto;\n    }\n\n    .menu-item[_ngcontent-%COMP%] {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 14px;\n      background: transparent;\n      border: none;\n      color: rgba(255,255,255,0.85);\n      font-size: 14px;\n      text-align: left;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .menu-item[_ngcontent-%COMP%]:hover {\n      background: rgba(255,255,255,0.1);\n      color: white;\n    }\n\n    .menu-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      width: 16px;\n      font-size: 13px;\n      color: rgba(255,255,255,0.6);\n    }\n\n    .menu-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n      color: white;\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%] {\n      color: rgba(239, 68, 68, 0.9);\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%]:hover {\n      background: rgba(239, 68, 68, 0.15);\n      color: #ff6b6b;\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: rgba(239, 68, 68, 0.8);\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n      color: #ff6b6b;\n    }\n\n    .menu-divider[_ngcontent-%COMP%] {\n      height: 1px;\n      background: rgba(255,255,255,0.1);\n      margin: 4px 0;\n    }\n\n    \n\n    .conversation-item.renamed[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_renameHighlight 1500ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes _ngcontent-%COMP%_renameHighlight {\n      0% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(147, 51, 234, 0.4));\n        transform: scale(1.03);\n        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);\n      }\n      25% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.35), rgba(147, 51, 234, 0.35));\n        box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);\n      }\n      50% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.3), rgba(59, 130, 246, 0.3));\n        transform: scale(1.02);\n        box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);\n      }\n      75% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));\n        box-shadow: 0 0 5px rgba(16, 185, 129, 0.2);\n      }\n      100% {\n        background: transparent;\n        transform: scale(1);\n        box-shadow: none;\n      }\n    }\n\n    \n\n    .header-top[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n    }\n\n    .btn-select[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      background: transparent;\n      border: 1px solid rgba(255,255,255,0.2);\n      border-radius: 6px;\n      color: rgba(255,255,255,0.7);\n      font-size: 13px;\n      font-weight: 500;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      cursor: pointer;\n      transition: all 0.2s;\n      white-space: nowrap;\n      flex-shrink: 0;\n    }\n\n    .btn-select[_ngcontent-%COMP%]:hover {\n      background: rgba(255,255,255,0.1);\n      color: white;\n      border-color: rgba(255,255,255,0.3);\n    }\n\n    .conversation-checkbox[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      margin-right: 8px;\n      flex-shrink: 0;\n    }\n\n    .conversation-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: #0076B6;\n    }\n\n    .selection-action-bar[_ngcontent-%COMP%] {\n      position: sticky;\n      bottom: 0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      background: #0A2742;\n      border-top: 1px solid rgba(255,255,255,0.15);\n      gap: 12px;\n      flex-wrap: wrap;\n      flex-shrink: 0;\n    }\n\n    .selection-info[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      color: rgba(255,255,255,0.9);\n      font-size: 14px;\n      font-weight: 500;\n      flex: 1 1 auto;\n      min-width: 150px;\n    }\n\n    .selection-count[_ngcontent-%COMP%] {\n      color: white;\n    }\n\n    .link-btn[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      color: #AAE7FD;\n      cursor: pointer;\n      font-size: 13px;\n      text-decoration: underline;\n      padding: 0;\n      transition: color 0.2s;\n    }\n\n    .link-btn[_ngcontent-%COMP%]:hover {\n      color: white;\n    }\n\n    .selection-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n      flex: 0 0 auto;\n    }\n\n    .btn-cancel[_ngcontent-%COMP%] {\n      padding: 8px 16px;\n      background: transparent;\n      border: 1px solid rgba(255,255,255,0.2);\n      border-radius: 6px;\n      color: rgba(255,255,255,0.7);\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      transition: all 0.2s;\n    }\n\n    .btn-cancel[_ngcontent-%COMP%]:hover {\n      background: rgba(255,255,255,0.1);\n      color: white;\n    }\n\n    .btn-delete-bulk[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      background: #DC2626;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 600;\n      transition: all 0.2s;\n    }\n\n    .btn-delete-bulk[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: #B91C1C;\n    }\n\n    .btn-delete-bulk[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-delete-bulk[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationListComponent, [{
         type: Component,
@@ -687,7 +687,7 @@ export class ConversationListComponent {
         </div>
       }
     </div>
-  `, styles: ["\n    .conversation-list { display: flex; flex-direction: column; height: 100%; background: #092340; }\n    .list-header { padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); }\n    .search-input {\n      width: 100%;\n      padding: 8px 12px;\n      background: rgba(255,255,255,0.1);\n      border: 1px solid rgba(255,255,255,0.2);\n      border-radius: 6px;\n      color: white;\n      font-size: 13px;\n      transition: all 0.2s;\n    }\n    .search-input::placeholder { color: rgba(255,255,255,0.5); }\n    .search-input:focus { outline: none; background: rgba(255,255,255,0.15); border-color: #0076B6; }\n    .btn-new-conversation {\n      width: calc(100% - 16px);\n      margin: 8px;\n      padding: 10px;\n      background: #0076B6;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 14px;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      transition: background 0.2s;\n      flex-shrink: 0;\n    }\n    .btn-new-conversation:hover { background: #005A8C; }\n    .btn-new-conversation i { font-size: 14px; }\n    .list-content { flex: 1; overflow-y: auto; padding: 4px 0; }\n\n    /* Collapsible Sections */\n    .sidebar-section { margin-bottom: 20px; }\n    .pinned-section .section-header {\n      background: rgba(255, 193, 7, 0.08);\n      border-radius: 4px;\n      margin: 0 4px;\n    }\n    .pinned-section .section-title .section-icon {\n      color: #FFC107;\n      font-size: 11px;\n      margin-left: 2px;\n    }\n    .section-header {\n      padding: 4px 16px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      cursor: pointer;\n      color: rgba(255, 255, 255, 0.7);\n      font-size: 13px;\n      font-weight: 500;\n      transition: color 0.2s;\n      user-select: none;\n    }\n    .section-header:hover { color: white; }\n    .section-title {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .section-title i {\n      font-size: 10px;\n      transition: transform 0.2s;\n    }\n    .section-header.expanded .section-title i { transform: rotate(90deg); }\n    .chat-list {\n      padding: 4px 0;\n      display: none;\n    }\n    .chat-list.expanded { display: block; }\n\n    .conversation-item {\n      padding: 6px 5px 6px 16px;\n      cursor: pointer;\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      transition: all 0.2s;\n      position: relative;\n      color: rgba(255,255,255,0.7);\n      font-size: 14px;\n      min-height: 45px;\n    }\n    .conversation-item:hover { background: rgba(255,255,255,0.08); color: white; }\n    .conversation-item:hover .conversation-actions { opacity: 1; }\n    .conversation-item.active { background: #0076B6; color: white; }\n    .conversation-icon-wrapper { position: relative; flex-shrink: 0; }\n    .conversation-icon { font-size: 12px; width: 16px; text-align: center; }\n    .conversation-icon.has-tasks { color: #fb923c; }\n    .badge-overlay { position: absolute; top: -4px; right: -4px; }\n    .conversation-info { flex: 1; min-width: 0; }\n    .conversation-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-preview { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-item.active .conversation-preview { color: rgba(255,255,255,0.8); }\n    .conversation-meta { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }\n\n    /* Project Badge */\n    .project-badge {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-size: 10px;\n      font-weight: 600;\n      margin-left: auto;\n      background-color: rgba(255, 255, 255, 0.1);\n      color: rgba(255, 255, 255, 0.6);\n      white-space: nowrap;\n      max-width: 80px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .conversation-item:hover .project-badge {\n      background-color: rgba(255, 255, 255, 0.15);\n      color: rgba(255, 255, 255, 0.8);\n    }\n    .conversation-item.active .project-badge {\n      background-color: rgba(255, 255, 255, 0.2);\n      color: white;\n    }\n\n    .conversation-actions {\n      position: absolute;\n      right: 5px;\n      top: 50%;\n      transform: translateY(-50%);\n      display: flex;\n      align-items: center;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.2s;\n      z-index: 10;\n    }\n    .conversation-item:hover .conversation-actions { opacity: 1; pointer-events: auto; }\n    .conversation-item.active .conversation-actions { opacity: 1; pointer-events: auto; }\n    .conversation-actions > * { pointer-events: auto; }\n    .pinned-icon { color: #AAE7FD; font-size: 12px; }\n\n    /* Task Indicator */\n    .task-indicator {\n      color: #fb923c;\n      font-size: 12px;\n      margin-right: 8px;\n      flex-shrink: 0;\n      animation: pulse-glow 2s ease-in-out infinite;\n    }\n    @keyframes pulse-glow {\n      0%, 100% {\n        opacity: 1;\n        filter: drop-shadow(0 0 2px #fb923c);\n      }\n      50% {\n        opacity: 0.6;\n        filter: drop-shadow(0 0 4px #fb923c);\n      }\n    }\n    .conversation-item.active .task-indicator {\n      color: #fbbf24;\n    }\n\n    .menu-btn {\n      width: 28px;\n      height: 28px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 6px;\n      color: rgba(255,255,255,0.7);\n      background: #092340 !important;\n      border: none;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n    .menu-btn:hover {\n      background: rgba(255,255,255,0.15) !important;\n      color: white;\n    }\n    .conversation-item.active .menu-btn {\n      background: #005A8C !important;\n      color: white;\n    }\n    .menu-btn i { font-size: 14px; }\n\n    .context-menu {\n      position: absolute;\n      top: 100%;\n      right: 0;\n      margin-top: 4px;\n      min-width: 160px;\n      background: #0A2742;\n      border: 1px solid rgba(255,255,255,0.15);\n      border-radius: 8px;\n      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n      z-index: 1001;\n      overflow: hidden;\n      pointer-events: auto;\n    }\n\n    .menu-item {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 14px;\n      background: transparent;\n      border: none;\n      color: rgba(255,255,255,0.85);\n      font-size: 14px;\n      text-align: left;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .menu-item:hover {\n      background: rgba(255,255,255,0.1);\n      color: white;\n    }\n\n    .menu-item i {\n      width: 16px;\n      font-size: 13px;\n      color: rgba(255,255,255,0.6);\n    }\n\n    .menu-item:hover i {\n      color: white;\n    }\n\n    .menu-item.danger {\n      color: rgba(239, 68, 68, 0.9);\n    }\n\n    .menu-item.danger:hover {\n      background: rgba(239, 68, 68, 0.15);\n      color: #ff6b6b;\n    }\n\n    .menu-item.danger i {\n      color: rgba(239, 68, 68, 0.8);\n    }\n\n    .menu-item.danger:hover i {\n      color: #ff6b6b;\n    }\n\n    .menu-divider {\n      height: 1px;\n      background: rgba(255,255,255,0.1);\n      margin: 4px 0;\n    }\n\n    /* Rename Animation */\n    .conversation-item.renamed {\n      animation: renameHighlight 1500ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes renameHighlight {\n      0% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(147, 51, 234, 0.4));\n        transform: scale(1.03);\n        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);\n      }\n      25% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.35), rgba(147, 51, 234, 0.35));\n        box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);\n      }\n      50% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.3), rgba(59, 130, 246, 0.3));\n        transform: scale(1.02);\n        box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);\n      }\n      75% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));\n        box-shadow: 0 0 5px rgba(16, 185, 129, 0.2);\n      }\n      100% {\n        background: transparent;\n        transform: scale(1);\n        box-shadow: none;\n      }\n    }\n\n    /* Selection Mode Styles */\n    .header-top {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n    }\n\n    .btn-select {\n      padding: 8px 12px;\n      background: transparent;\n      border: 1px solid rgba(255,255,255,0.2);\n      border-radius: 6px;\n      color: rgba(255,255,255,0.7);\n      font-size: 13px;\n      font-weight: 500;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      cursor: pointer;\n      transition: all 0.2s;\n      white-space: nowrap;\n      flex-shrink: 0;\n    }\n\n    .btn-select:hover {\n      background: rgba(255,255,255,0.1);\n      color: white;\n      border-color: rgba(255,255,255,0.3);\n    }\n\n    .conversation-checkbox {\n      display: flex;\n      align-items: center;\n      margin-right: 8px;\n      flex-shrink: 0;\n    }\n\n    .conversation-checkbox input[type=\"checkbox\"] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: #0076B6;\n    }\n\n    .selection-action-bar {\n      position: sticky;\n      bottom: 0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      background: #0A2742;\n      border-top: 1px solid rgba(255,255,255,0.15);\n      gap: 12px;\n      flex-wrap: wrap;\n      flex-shrink: 0;\n    }\n\n    .selection-info {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      color: rgba(255,255,255,0.9);\n      font-size: 14px;\n      font-weight: 500;\n      flex: 1 1 auto;\n      min-width: 150px;\n    }\n\n    .selection-count {\n      color: white;\n    }\n\n    .link-btn {\n      background: none;\n      border: none;\n      color: #AAE7FD;\n      cursor: pointer;\n      font-size: 13px;\n      text-decoration: underline;\n      padding: 0;\n      transition: color 0.2s;\n    }\n\n    .link-btn:hover {\n      color: white;\n    }\n\n    .selection-actions {\n      display: flex;\n      gap: 8px;\n      flex: 0 0 auto;\n    }\n\n    .btn-cancel {\n      padding: 8px 16px;\n      background: transparent;\n      border: 1px solid rgba(255,255,255,0.2);\n      border-radius: 6px;\n      color: rgba(255,255,255,0.7);\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      transition: all 0.2s;\n    }\n\n    .btn-cancel:hover {\n      background: rgba(255,255,255,0.1);\n      color: white;\n    }\n\n    .btn-delete-bulk {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      background: #DC2626;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 600;\n      transition: all 0.2s;\n    }\n\n    .btn-delete-bulk:hover:not(:disabled) {\n      background: #B91C1C;\n    }\n\n    .btn-delete-bulk:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-delete-bulk i {\n      font-size: 12px;\n    }\n  "] }]
+  `, styles: ["\n    :host { display: block; height: 100%; }\n    .conversation-list { display: flex; flex-direction: column; height: 100%; background: #092340; }\n    .list-header { padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); }\n    .search-input {\n      width: 100%;\n      padding: 8px 12px;\n      background: rgba(255,255,255,0.1);\n      border: 1px solid rgba(255,255,255,0.2);\n      border-radius: 6px;\n      color: white;\n      font-size: 13px;\n      transition: all 0.2s;\n    }\n    .search-input::placeholder { color: rgba(255,255,255,0.5); }\n    .search-input:focus { outline: none; background: rgba(255,255,255,0.15); border-color: #0076B6; }\n    .btn-new-conversation {\n      width: calc(100% - 16px);\n      margin: 8px;\n      padding: 10px;\n      background: #0076B6;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 14px;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      transition: background 0.2s;\n      flex-shrink: 0;\n    }\n    .btn-new-conversation:hover { background: #005A8C; }\n    .btn-new-conversation i { font-size: 14px; }\n    .list-content { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; }\n\n    /* Collapsible Sections */\n    .sidebar-section { margin-bottom: 20px; }\n    .pinned-section .section-header {\n      background: rgba(255, 193, 7, 0.08);\n      border-radius: 4px;\n      margin: 0 4px;\n    }\n    .pinned-section .section-title .section-icon {\n      color: #FFC107;\n      font-size: 11px;\n      margin-left: 2px;\n    }\n    .section-header {\n      padding: 4px 16px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      cursor: pointer;\n      color: rgba(255, 255, 255, 0.7);\n      font-size: 13px;\n      font-weight: 500;\n      transition: color 0.2s;\n      user-select: none;\n    }\n    .section-header:hover { color: white; }\n    .section-title {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .section-title i {\n      font-size: 10px;\n      transition: transform 0.2s;\n    }\n    .section-header.expanded .section-title i { transform: rotate(90deg); }\n    .chat-list {\n      padding: 4px 0;\n      display: none;\n    }\n    .chat-list.expanded { display: block; }\n\n    .conversation-item {\n      padding: 6px 5px 6px 16px;\n      cursor: pointer;\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      transition: all 0.2s;\n      position: relative;\n      color: rgba(255,255,255,0.7);\n      font-size: 14px;\n      min-height: 45px;\n    }\n    .conversation-item:hover { background: rgba(255,255,255,0.08); color: white; }\n    .conversation-item:hover .conversation-actions { opacity: 1; }\n    .conversation-item.active { background: #0076B6; color: white; }\n    .conversation-icon-wrapper { position: relative; flex-shrink: 0; }\n    .conversation-icon { font-size: 12px; width: 16px; text-align: center; }\n    .conversation-icon.has-tasks { color: #fb923c; }\n    .badge-overlay { position: absolute; top: -4px; right: -4px; }\n    .conversation-info { flex: 1; min-width: 0; }\n    .conversation-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-preview { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-item.active .conversation-preview { color: rgba(255,255,255,0.8); }\n    .conversation-meta { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }\n\n    /* Project Badge */\n    .project-badge {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-size: 10px;\n      font-weight: 600;\n      margin-left: auto;\n      background-color: rgba(255, 255, 255, 0.1);\n      color: rgba(255, 255, 255, 0.6);\n      white-space: nowrap;\n      max-width: 80px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .conversation-item:hover .project-badge {\n      background-color: rgba(255, 255, 255, 0.15);\n      color: rgba(255, 255, 255, 0.8);\n    }\n    .conversation-item.active .project-badge {\n      background-color: rgba(255, 255, 255, 0.2);\n      color: white;\n    }\n\n    .conversation-actions {\n      position: absolute;\n      right: 5px;\n      top: 50%;\n      transform: translateY(-50%);\n      display: flex;\n      align-items: center;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.2s;\n      z-index: 10;\n    }\n    .conversation-item:hover .conversation-actions { opacity: 1; pointer-events: auto; }\n    .conversation-item.active .conversation-actions { opacity: 1; pointer-events: auto; }\n    .conversation-actions > * { pointer-events: auto; }\n    .pinned-icon { color: #AAE7FD; font-size: 12px; }\n\n    /* Task Indicator */\n    .task-indicator {\n      color: #fb923c;\n      font-size: 12px;\n      margin-right: 8px;\n      flex-shrink: 0;\n      animation: pulse-glow 2s ease-in-out infinite;\n    }\n    @keyframes pulse-glow {\n      0%, 100% {\n        opacity: 1;\n        filter: drop-shadow(0 0 2px #fb923c);\n      }\n      50% {\n        opacity: 0.6;\n        filter: drop-shadow(0 0 4px #fb923c);\n      }\n    }\n    .conversation-item.active .task-indicator {\n      color: #fbbf24;\n    }\n\n    .menu-btn {\n      width: 28px;\n      height: 28px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 6px;\n      color: rgba(255,255,255,0.7);\n      background: #092340 !important;\n      border: none;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n    .menu-btn:hover {\n      background: rgba(255,255,255,0.15) !important;\n      color: white;\n    }\n    .conversation-item.active .menu-btn {\n      background: #005A8C !important;\n      color: white;\n    }\n    .menu-btn i { font-size: 14px; }\n\n    .context-menu {\n      position: absolute;\n      top: 100%;\n      right: 0;\n      margin-top: 4px;\n      min-width: 160px;\n      background: #0A2742;\n      border: 1px solid rgba(255,255,255,0.15);\n      border-radius: 8px;\n      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n      z-index: 1001;\n      overflow: hidden;\n      pointer-events: auto;\n    }\n\n    .menu-item {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 14px;\n      background: transparent;\n      border: none;\n      color: rgba(255,255,255,0.85);\n      font-size: 14px;\n      text-align: left;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .menu-item:hover {\n      background: rgba(255,255,255,0.1);\n      color: white;\n    }\n\n    .menu-item i {\n      width: 16px;\n      font-size: 13px;\n      color: rgba(255,255,255,0.6);\n    }\n\n    .menu-item:hover i {\n      color: white;\n    }\n\n    .menu-item.danger {\n      color: rgba(239, 68, 68, 0.9);\n    }\n\n    .menu-item.danger:hover {\n      background: rgba(239, 68, 68, 0.15);\n      color: #ff6b6b;\n    }\n\n    .menu-item.danger i {\n      color: rgba(239, 68, 68, 0.8);\n    }\n\n    .menu-item.danger:hover i {\n      color: #ff6b6b;\n    }\n\n    .menu-divider {\n      height: 1px;\n      background: rgba(255,255,255,0.1);\n      margin: 4px 0;\n    }\n\n    /* Rename Animation */\n    .conversation-item.renamed {\n      animation: renameHighlight 1500ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes renameHighlight {\n      0% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(147, 51, 234, 0.4));\n        transform: scale(1.03);\n        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);\n      }\n      25% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.35), rgba(147, 51, 234, 0.35));\n        box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);\n      }\n      50% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.3), rgba(59, 130, 246, 0.3));\n        transform: scale(1.02);\n        box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);\n      }\n      75% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));\n        box-shadow: 0 0 5px rgba(16, 185, 129, 0.2);\n      }\n      100% {\n        background: transparent;\n        transform: scale(1);\n        box-shadow: none;\n      }\n    }\n\n    /* Selection Mode Styles */\n    .header-top {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n    }\n\n    .btn-select {\n      padding: 8px 12px;\n      background: transparent;\n      border: 1px solid rgba(255,255,255,0.2);\n      border-radius: 6px;\n      color: rgba(255,255,255,0.7);\n      font-size: 13px;\n      font-weight: 500;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      cursor: pointer;\n      transition: all 0.2s;\n      white-space: nowrap;\n      flex-shrink: 0;\n    }\n\n    .btn-select:hover {\n      background: rgba(255,255,255,0.1);\n      color: white;\n      border-color: rgba(255,255,255,0.3);\n    }\n\n    .conversation-checkbox {\n      display: flex;\n      align-items: center;\n      margin-right: 8px;\n      flex-shrink: 0;\n    }\n\n    .conversation-checkbox input[type=\"checkbox\"] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: #0076B6;\n    }\n\n    .selection-action-bar {\n      position: sticky;\n      bottom: 0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      background: #0A2742;\n      border-top: 1px solid rgba(255,255,255,0.15);\n      gap: 12px;\n      flex-wrap: wrap;\n      flex-shrink: 0;\n    }\n\n    .selection-info {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      color: rgba(255,255,255,0.9);\n      font-size: 14px;\n      font-weight: 500;\n      flex: 1 1 auto;\n      min-width: 150px;\n    }\n\n    .selection-count {\n      color: white;\n    }\n\n    .link-btn {\n      background: none;\n      border: none;\n      color: #AAE7FD;\n      cursor: pointer;\n      font-size: 13px;\n      text-decoration: underline;\n      padding: 0;\n      transition: color 0.2s;\n    }\n\n    .link-btn:hover {\n      color: white;\n    }\n\n    .selection-actions {\n      display: flex;\n      gap: 8px;\n      flex: 0 0 auto;\n    }\n\n    .btn-cancel {\n      padding: 8px 16px;\n      background: transparent;\n      border: 1px solid rgba(255,255,255,0.2);\n      border-radius: 6px;\n      color: rgba(255,255,255,0.7);\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      transition: all 0.2s;\n    }\n\n    .btn-cancel:hover {\n      background: rgba(255,255,255,0.1);\n      color: white;\n    }\n\n    .btn-delete-bulk {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      background: #DC2626;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 600;\n      transition: all 0.2s;\n    }\n\n    .btn-delete-bulk:hover:not(:disabled) {\n      background: #B91C1C;\n    }\n\n    .btn-delete-bulk:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-delete-bulk i {\n      font-size: 12px;\n    }\n  "] }]
     }], () => [{ type: i1.ConversationDataService }, { type: i2.DialogService }, { type: i3.NotificationService }, { type: i4.ActiveTasksService }, { type: i0.ChangeDetectorRef }], { environmentId: [{
             type: Input
         }], currentUser: [{
@@ -704,5 +704,5 @@ export class ConversationListComponent {
             type: HostListener,
             args: ['document:click']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationListComponent, { className: "ConversationListComponent", filePath: "src/lib/components/conversation/conversation-list.component.ts", lineNumber: 620 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationListComponent, { className: "ConversationListComponent", filePath: "src/lib/components/conversation/conversation-list.component.ts", lineNumber: 621 }); })();
 //# sourceMappingURL=conversation-list.component.js.map

package/dist/lib/components/conversation/conversation-list.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation-list.component.js","sourceRoot":"","sources":["../../../../src/lib/components/conversation/conversation-list.component.ts"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"conversation-list.component.js","sourceRoot":"","sources":["../../../../src/lib/components/conversation/conversation-list.component.ts"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-conversations",
-  "version": "2.123.0",
+  "version": "2.124.0",
   "description": "MemberJunction: Conversation, Collection, and Artifact management components for any Angular application",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -29,21 +29,21 @@
   "dependencies": {
     "@angular/animations": "18.0.2",
     "@angular/cdk": "18.0.2",
-    "@memberjunction/ai": "2.123.0",
-    "@memberjunction/ai-core-plus": "2.123.0",
-    "@memberjunction/ai-engine-base": "2.123.0",
-    "@memberjunction/core": "2.123.0",
-    "@memberjunction/core-entities": "2.123.0",
-    "@memberjunction/global": "2.123.0",
-    "@memberjunction/graphql-dataprovider": "2.123.0",
-    "@memberjunction/ng-artifacts": "2.123.0",
-    "@memberjunction/ng-base-types": "2.123.0",
-    "@memberjunction/ng-code-editor": "2.123.0",
-    "@memberjunction/ng-container-directives": "2.123.0",
-    "@memberjunction/ng-notifications": "2.123.0",
-    "@memberjunction/ng-shared-generic": "2.123.0",
-    "@memberjunction/ng-tasks": "2.123.0",
-    "@memberjunction/ng-testing": "2.123.0",
+    "@memberjunction/ai": "2.124.0",
+    "@memberjunction/ai-core-plus": "2.124.0",
+    "@memberjunction/ai-engine-base": "2.124.0",
+    "@memberjunction/core": "2.124.0",
+    "@memberjunction/core-entities": "2.124.0",
+    "@memberjunction/global": "2.124.0",
+    "@memberjunction/graphql-dataprovider": "2.124.0",
+    "@memberjunction/ng-artifacts": "2.124.0",
+    "@memberjunction/ng-base-types": "2.124.0",
+    "@memberjunction/ng-code-editor": "2.124.0",
+    "@memberjunction/ng-container-directives": "2.124.0",
+    "@memberjunction/ng-notifications": "2.124.0",
+    "@memberjunction/ng-shared-generic": "2.124.0",
+    "@memberjunction/ng-tasks": "2.124.0",
+    "@memberjunction/ng-testing": "2.124.0",
     "@progress/kendo-angular-buttons": "16.2.0",
     "@progress/kendo-angular-dateinputs": "16.2.0",
     "@progress/kendo-angular-dialog": "16.2.0",