@memberjunction/ng-conversations 6.1.4 → 6.2.0-edge.1

package/dist/lib/components/search/search-panel.component.js

@@ -510,17 +510,115 @@ function SearchPanelComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
  */
 export class SearchPanelComponent {
     searchService;
-    environmentId;
-    currentUser;
-    isOpen = false;
+    cdr;
+    EnvironmentId;
+    /** @deprecated Use {@link EnvironmentId}. */
+    set environmentId(value) {
+        this.EnvironmentId = value;
+    }
+    /** @deprecated Use {@link EnvironmentId}. */
+    get environmentId() {
+        return this.EnvironmentId;
+    }
+    CurrentUser;
+    /** @deprecated Use {@link CurrentUser}. */
+    set currentUser(value) {
+        this.CurrentUser = value;
+    }
+    /** @deprecated Use {@link CurrentUser}. */
+    get currentUser() {
+        return this.CurrentUser;
+    }
+    /** Term to open with, e.g. handed over from a narrower filter the user had already typed. */
+    InitialQuery = '';
+    /** @deprecated Use {@link InitialQuery}. */
+    set initialQuery(value) {
+        this.InitialQuery = value;
+    }
+    /** @deprecated Use {@link InitialQuery}. */
+    get initialQuery() {
+        return this.InitialQuery;
+    }
+    _isOpen = false;
+    /**
+     * A setter rather than ngOnChanges so only an actual open transition acts — ngOnChanges
+     * fires for every input, so a CurrentUser or EnvironmentId re-emit while the panel was
+     * open yanked focus back out of whatever field the user was in.
+     */
+    set IsOpen(value) {
+        const wasOpen = this._isOpen;
+        this._isOpen = value;
+        if (value && !wasOpen) {
+            this.onOpened();
+        }
+    }
+    get IsOpen() {
+        return this._isOpen;
+    }
+    /** @deprecated Use {@link IsOpen}. */
+    set isOpen(value) {
+        this.IsOpen = value;
+    }
+    /** @deprecated Use {@link IsOpen}. */
+    get isOpen() {
+        return this.IsOpen;
+    }
     close = new EventEmitter();
-    resultSelected = new EventEmitter();
-    searchInput;
-    searchQuery = '';
-    activeFilter = 'all';
-    dateRange = { start: null, end: null };
-    isSearching = false;
-    results = {
+    ResultSelected = new EventEmitter();
+    /**
+     * @deprecated Use {@link ResultSelected}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (resultSelected) keeps working. Must stay AFTER ResultSelected: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    resultSelected = this.ResultSelected;
+    SearchInput;
+    /** @deprecated Use {@link SearchInput}. */
+    get searchInput() {
+        return this.SearchInput;
+    }
+    /** @deprecated Use {@link SearchInput}. */
+    set searchInput(value) {
+        this.SearchInput = value;
+    }
+    SearchQuery = '';
+    /** @deprecated Use {@link SearchQuery}. */
+    get searchQuery() {
+        return this.SearchQuery;
+    }
+    /** @deprecated Use {@link SearchQuery}. */
+    set searchQuery(value) {
+        this.SearchQuery = value;
+    }
+    ActiveFilter = 'all';
+    /** @deprecated Use {@link ActiveFilter}. */
+    get activeFilter() {
+        return this.ActiveFilter;
+    }
+    /** @deprecated Use {@link ActiveFilter}. */
+    set activeFilter(value) {
+        this.ActiveFilter = value;
+    }
+    DateRange = { start: null, end: null };
+    /** @deprecated Use {@link DateRange}. */
+    get dateRange() {
+        return this.DateRange;
+    }
+    /** @deprecated Use {@link DateRange}. */
+    set dateRange(value) {
+        this.DateRange = value;
+    }
+    IsSearching = false;
+    /** @deprecated Use {@link IsSearching}. */
+    get isSearching() {
+        return this.IsSearching;
+    }
+    /** @deprecated Use {@link IsSearching}. */
+    set isSearching(value) {
+        this.IsSearching = value;
+    }
+    Results = {
         conversations: [],
         messages: [],
         artifacts: [],
@@ -528,18 +626,73 @@ export class SearchPanelComponent {
         tasks: [],
         total: 0
     };
-    recentSearches = [];
-    selectedIndex = -1;
+    /** @deprecated Use {@link Results}. */
+    get results() {
+        return this.Results;
+    }
+    /** @deprecated Use {@link Results}. */
+    set results(value) {
+        this.Results = value;
+    }
+    RecentSearches = [];
+    /** @deprecated Use {@link RecentSearches}. */
+    get recentSearches() {
+        return this.RecentSearches;
+    }
+    /** @deprecated Use {@link RecentSearches}. */
+    set recentSearches(value) {
+        this.RecentSearches = value;
+    }
+    SelectedIndex = -1;
+    /** @deprecated Use {@link SelectedIndex}. */
+    get selectedIndex() {
+        return this.SelectedIndex;
+    }
+    /** @deprecated Use {@link SelectedIndex}. */
+    set selectedIndex(value) {
+        this.SelectedIndex = value;
+    }
+    /**
+     * Flat view of `Results`, rebuilt only on each results emission. The template binds
+     * IsResultSelected() once per row, so deriving this on demand allocated a fresh array of
+     * every result for every row on every change-detection pass.
+     */
+    flatResults = [];
     /** Message for the "no results" empty state, echoing the search term. */
     get NoResultsMessage() {
-        return `No results found for "${this.searchQuery}"`;
+        return `No results found for "${this.SearchQuery}"`;
     }
     destroy$ = new Subject();
-    constructor(searchService) {
+    /** True only while ngOnInit subscribes — see applyState(). */
+    initializing = false;
+    constructor(searchService, cdr) {
         this.searchService = searchService;
+        this.cdr = cdr;
+    }
+    /**
+     * Apply state from an async emission and render it.
+     *
+     * The search resolves through the data provider's transport, and that emission does not
+     * reliably schedule a change-detection pass: results land on the component while the panel
+     * keeps showing the previous state until some DOM event — Enter, a click on the modal,
+     * even the blur from clicking into devtools — triggers the next one. detectChanges()
+     * checks this view on the spot; markForCheck() would only mark it for a pass that never
+     * comes.
+     */
+    applyState(fn) {
+        fn();
+        // The BehaviorSubjects replay synchronously while ngOnInit subscribes, which is already
+        // inside a pass. takeUntil(destroy$) stops emissions at teardown, so there is no
+        // destroyed-view case to guard against.
+        if (!this.initializing) {
+            this.cdr.detectChanges();
+        }
     }
     ngOnInit() {
+        // Each BehaviorSubject replays synchronously on subscribe, inside this pass.
+        this.initializing = true;
         this.subscribeToSearchState();
+        this.initializing = false;
         this.loadRecentSearches();
     }
     ngOnDestroy() {
@@ -553,159 +706,211 @@ export class SearchPanelComponent {
         this.searchService.isSearching$
             .pipe(takeUntil(this.destroy$))
             .subscribe(isSearching => {
-            this.isSearching = isSearching;
+            this.applyState(() => {
+                this.IsSearching = isSearching;
+            });
         });
         this.searchService.searchResults$
             .pipe(takeUntil(this.destroy$))
             .subscribe(results => {
-            this.results = results;
-            this.selectedIndex = -1;
+            this.applyState(() => {
+                this.Results = results;
+                this.flatResults = [
+                    ...results.conversations,
+                    ...results.messages,
+                    ...results.artifacts,
+                    ...results.collections,
+                    ...results.tasks
+                ];
+                this.SelectedIndex = -1;
+            });
         });
         this.searchService.searchFilter$
             .pipe(takeUntil(this.destroy$))
             .subscribe(filter => {
-            this.activeFilter = filter;
+            this.applyState(() => {
+                this.ActiveFilter = filter;
+            });
         });
         this.searchService.dateRange$
             .pipe(takeUntil(this.destroy$))
             .subscribe(range => {
-            this.dateRange = range;
+            this.applyState(() => {
+                this.DateRange = range;
+            });
         });
     }
     /**
      * Load recent searches
      */
     loadRecentSearches() {
-        this.recentSearches = this.searchService.getRecentSearches();
+        this.RecentSearches = this.searchService.getRecentSearches();
     }
     /**
      * Handle search input
      */
-    onSearchInput() {
-        if (this.searchQuery.trim()) {
+    OnSearchInput() {
+        if (this.SearchQuery.trim()) {
             this.performSearch();
         }
         else {
             this.searchService.clearResults();
         }
     }
+    /** @deprecated Use {@link OnSearchInput}. */
+    onSearchInput() {
+        return this.OnSearchInput();
+    }
     /**
      * Perform search
      */
     async performSearch() {
-        await this.searchService.search(this.searchQuery, this.environmentId, this.currentUser);
+        await this.searchService.search(this.SearchQuery, this.EnvironmentId, this.CurrentUser);
     }
     /**
      * Set search filter
      */
-    setFilter(filter) {
+    SetFilter(filter) {
         this.searchService.setSearchFilter(filter);
-        if (this.searchQuery.trim()) {
+        if (this.SearchQuery.trim()) {
             this.performSearch();
         }
     }
+    /** @deprecated Use {@link SetFilter}. */
+    setFilter(filter) {
+        return this.SetFilter(filter);
+    }
     /**
      * Clear search
      */
-    clearSearch() {
-        this.searchQuery = '';
+    ClearSearch() {
+        this.SearchQuery = '';
         this.searchService.clearResults();
         this.focusSearchInput();
     }
+    /** @deprecated Use {@link ClearSearch}. */
+    clearSearch() {
+        return this.ClearSearch();
+    }
     /**
      * Select a result
      */
+    SelectResult(result) {
+        this.ResultSelected.emit(result);
+        this.ClosePanel();
+    }
+    /** @deprecated Use {@link SelectResult}. */
     selectResult(result) {
-        this.resultSelected.emit(result);
-        this.closePanel();
+        return this.SelectResult(result);
     }
     /**
      * Use recent search
      */
-    useRecentSearch(query) {
-        this.searchQuery = query;
+    UseRecentSearch(query) {
+        this.SearchQuery = query;
         this.performSearch();
     }
+    /** @deprecated Use {@link UseRecentSearch}. */
+    useRecentSearch(query) {
+        return this.UseRecentSearch(query);
+    }
     /**
      * Clear recent searches
      */
-    clearRecentSearches() {
+    ClearRecentSearches() {
         this.searchService.clearRecentSearches();
-        this.recentSearches = [];
+        this.RecentSearches = [];
+    }
+    /** @deprecated Use {@link ClearRecentSearches}. */
+    clearRecentSearches() {
+        return this.ClearRecentSearches();
     }
     /**
      * Close panel
      */
-    closePanel() {
+    ClosePanel() {
         this.close.emit();
     }
+    /** @deprecated Use {@link ClosePanel}. */
+    closePanel() {
+        return this.ClosePanel();
+    }
+    /**
+     * Seed and focus the box once the panel is open.
+     *
+     * Deferred to the next task so the @if(IsOpen) view exists (there is no input to focus
+     * before it renders) and so every input bound in the same pass has been set — this reads
+     * InitialQuery, which the host may bind after IsOpen.
+     */
+    onOpened() {
+        setTimeout(() => {
+            const seed = this.InitialQuery?.trim();
+            if (seed && seed !== this.SearchQuery) {
+                this.SearchQuery = seed;
+                this.OnSearchInput();
+                this.cdr.detectChanges();
+            }
+            this.SearchInput?.nativeElement.focus();
+        }, 0);
+    }
     /**
      * Focus search input
      */
     focusSearchInput() {
         setTimeout(() => {
-            this.searchInput?.nativeElement.focus();
+            this.SearchInput?.nativeElement.focus();
         }, 0);
     }
     /**
      * Handle keyboard navigation
      */
     handleKeyboard(event) {
-        if (!this.isOpen)
+        if (!this.IsOpen)
             return;
-        const allResults = this.getAllResultsFlat();
+        const allResults = this.flatResults;
         switch (event.key) {
             case 'Escape':
                 event.preventDefault();
-                this.closePanel();
+                this.ClosePanel();
                 break;
             case 'ArrowDown':
                 event.preventDefault();
                 if (allResults.length > 0) {
-                    this.selectedIndex = Math.min(this.selectedIndex + 1, allResults.length - 1);
+                    this.SelectedIndex = Math.min(this.SelectedIndex + 1, allResults.length - 1);
                 }
                 break;
             case 'ArrowUp':
                 event.preventDefault();
-                if (this.selectedIndex > 0) {
-                    this.selectedIndex--;
+                if (this.SelectedIndex > 0) {
+                    this.SelectedIndex--;
                 }
                 else {
-                    this.selectedIndex = -1;
+                    this.SelectedIndex = -1;
                 }
                 break;
             case 'Enter':
                 event.preventDefault();
-                if (this.selectedIndex >= 0 && allResults[this.selectedIndex]) {
-                    this.selectResult(allResults[this.selectedIndex]);
+                if (this.SelectedIndex >= 0 && allResults[this.SelectedIndex]) {
+                    this.SelectResult(allResults[this.SelectedIndex]);
                 }
                 break;
         }
     }
-    /**
-     * Get all results as flat array
-     */
-    getAllResultsFlat() {
-        return [
-            ...this.results.conversations,
-            ...this.results.messages,
-            ...this.results.artifacts,
-            ...this.results.collections,
-            ...this.results.tasks
-        ];
-    }
     /**
      * Check if result is selected
      */
+    IsResultSelected(result) {
+        const selected = this.flatResults[this.SelectedIndex];
+        return !!selected && selected.id === result.id && selected.type === result.type;
+    }
+    /** @deprecated Use {@link IsResultSelected}. */
     isResultSelected(result) {
-        const allResults = this.getAllResultsFlat();
-        const index = allResults.findIndex(r => r.id === result.id && r.type === result.type);
-        return index === this.selectedIndex;
+        return this.IsResultSelected(result);
     }
     /**
      * Get icon for result type
      */
-    getResultIcon(type) {
+    GetResultIcon(type) {
         switch (type) {
             case 'conversation':
                 return 'fa-comments';
@@ -721,10 +926,14 @@ export class SearchPanelComponent {
                 return 'fa-circle';
         }
     }
+    /** @deprecated Use {@link GetResultIcon}. */
+    getResultIcon(type) {
+        return this.GetResultIcon(type);
+    }
     /**
      * Get filter display text
      */
-    getFilterText(filter) {
+    GetFilterText(filter) {
         switch (filter) {
             case 'all':
                 return 'All';
@@ -742,6 +951,10 @@ export class SearchPanelComponent {
                 return 'All';
         }
     }
+    /** @deprecated Use {@link GetFilterText}. */
+    getFilterText(filter) {
+        return this.GetFilterText(filter);
+    }
     /**
      * Format date for display
      */
@@ -762,69 +975,85 @@ export class SearchPanelComponent {
         return `${Math.floor(days / 365)} years ago`;
     }
     /** Highlight matched text in result. Output is bound to `[innerHTML]` in the template. */
-    highlightMatch(text, query) {
+    HighlightMatch(text, query) {
         return HighlightSearchMatches(text, query);
     }
+    /** @deprecated Use {@link HighlightMatch}. */
+    highlightMatch(text, query) {
+        return this.HighlightMatch(text, query);
+    }
     /**
      * Handle date range change
      */
-    onDateRangeChange() {
-        this.searchService.setDateRange(this.dateRange);
-        if (this.searchQuery.trim()) {
+    OnDateRangeChange() {
+        this.searchService.setDateRange(this.DateRange);
+        if (this.SearchQuery.trim()) {
             this.performSearch();
         }
     }
+    /** @deprecated Use {@link OnDateRangeChange}. */
+    onDateRangeChange() {
+        return this.OnDateRangeChange();
+    }
     /**
      * Clear date range
      */
-    clearDateRange() {
-        this.dateRange = { start: null, end: null };
+    ClearDateRange() {
+        this.DateRange = { start: null, end: null };
         this.searchService.setDateRange({ start: null, end: null });
-        if (this.searchQuery.trim()) {
+        if (this.SearchQuery.trim()) {
             this.performSearch();
         }
     }
-    /**
-     * Watch for panel open state changes
-     */
-    ngOnChanges() {
-        if (this.isOpen) {
-            this.focusSearchInput();
-        }
+    /** @deprecated Use {@link ClearDateRange}. */
+    clearDateRange() {
+        return this.ClearDateRange();
     }
-    static ɵfac = function SearchPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchPanelComponent)(i0.ɵɵdirectiveInject(i1.SearchService)); };
+    static ɵfac = function SearchPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchPanelComponent)(i0.ɵɵdirectiveInject(i1.SearchService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchPanelComponent, selectors: [["mj-search-panel"]], viewQuery: function SearchPanelComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.SearchInput = _t.first);
         } }, hostBindings: function SearchPanelComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown", function SearchPanelComponent_keydown_HostBindingHandler($event) { return ctx.handleKeyboard($event); });
-        } }, inputs: { environmentId: "environmentId", currentUser: "currentUser", isOpen: "isOpen" }, outputs: { close: "close", resultSelected: "resultSelected" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["searchInput", ""], [1, "search-panel-overlay"], [1, "search-panel-overlay", 3, "click"], [1, "search-panel", 3, "click"], [1, "search-header"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search conversations, messages, artifacts, collections, and tasks...", "autocomplete", "off", 1, "search-input", 3, "ngModelChange", "input", "ngModel"], ["type", "button", "title", "Clear search", 1, "clear-button"], ["type", "button", "title", "Close (Esc)", 1, "close-button", 3, "click"], [1, "fa-solid", "fa-times"], [1, "search-filters"], [1, "filter-buttons"], ["type", "button", 1, "filter-button", 3, "click"], [1, "fa-solid", "fa-comments"], [1, "fa-solid", "fa-comment"], [1, "fa-solid", "fa-file-alt"], [1, "fa-solid", "fa-folder"], [1, "fa-solid", "fa-tasks"], [1, "date-filter"], ["Placeholder", "From", 3, "ngModelChange", "ngModel"], ["Placeholder", "To", 3, "ngModelChange", "ngModel"], ["type", "button", "title", "Clear date range", 1, "clear-date-button"], [1, "search-results"], [1, "search-loading"], ["Variant", "no-results", "Message", "Try adjusting your filters or search terms", 3, "Title"], [1, "search-footer"], [1, "keyboard-hints"], [1, "hint"], ["type", "button", "title", "Clear search", 1, "clear-button", 3, "click"], ["type", "button", "title", "Clear date range", 1, "clear-date-button", 3, "click"], [1, "fa-solid", "fa-times-circle"], ["text", "Searching...", "size", "medium"], [1, "recent-searches"], ["Icon", "fa-solid fa-magnifying-glass", "Message", "Search across all your conversations, messages, artifacts, collections, and tasks"], [1, "search-tips"], [1, "recent-searches-header"], ["type", "button", "title", "Clear recent searches", 1, "clear-recent-button", 3, "click"], [1, "recent-searches-list"], ["type", "button", 1, "recent-search-item"], ["type", "button", 1, "recent-search-item", 3, "click"], [1, "fa-solid", "fa-history"], [1, "results-summary"], [1, "results-group"], [1, "results-group-title"], [1, "results-list"], ["type", "button", 1, "result-item", 3, "selected"], ["type", "button", 1, "result-item", 3, "click"], [1, "result-icon"], [1, "fa-solid"], [1, "result-content"], [1, "result-title", 3, "innerHTML"], [1, "result-preview", 3, "innerHTML"], [1, "result-match", 3, "innerHTML"], [1, "result-meta"], [1, "result-date"], [1, "result-conversation"], [1, "result-type"], [1, "type-badge"]], template: function SearchPanelComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { EnvironmentId: "EnvironmentId", environmentId: "environmentId", CurrentUser: "CurrentUser", currentUser: "currentUser", InitialQuery: "InitialQuery", initialQuery: "initialQuery", IsOpen: "IsOpen", isOpen: "isOpen" }, outputs: { close: "close", ResultSelected: "ResultSelected", resultSelected: "resultSelected" }, standalone: false, decls: 1, vars: 1, consts: [["searchInput", ""], [1, "search-panel-overlay"], [1, "search-panel-overlay", 3, "click"], [1, "search-panel", 3, "click"], [1, "search-header"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search conversations, messages, artifacts, collections, and tasks...", "autocomplete", "off", 1, "search-input", 3, "ngModelChange", "input", "ngModel"], ["type", "button", "title", "Clear search", 1, "clear-button"], ["type", "button", "title", "Close (Esc)", 1, "close-button", 3, "click"], [1, "fa-solid", "fa-times"], [1, "search-filters"], [1, "filter-buttons"], ["type", "button", 1, "filter-button", 3, "click"], [1, "fa-solid", "fa-comments"], [1, "fa-solid", "fa-comment"], [1, "fa-solid", "fa-file-alt"], [1, "fa-solid", "fa-folder"], [1, "fa-solid", "fa-tasks"], [1, "date-filter"], ["Placeholder", "From", 3, "ngModelChange", "ngModel"], ["Placeholder", "To", 3, "ngModelChange", "ngModel"], ["type", "button", "title", "Clear date range", 1, "clear-date-button"], [1, "search-results"], [1, "search-loading"], ["Variant", "no-results", "Message", "Try adjusting your filters or search terms", 3, "Title"], [1, "search-footer"], [1, "keyboard-hints"], [1, "hint"], ["type", "button", "title", "Clear search", 1, "clear-button", 3, "click"], ["type", "button", "title", "Clear date range", 1, "clear-date-button", 3, "click"], [1, "fa-solid", "fa-times-circle"], ["text", "Searching...", "size", "medium"], [1, "recent-searches"], ["Icon", "fa-solid fa-magnifying-glass", "Message", "Search across all your conversations, messages, artifacts, collections, and tasks"], [1, "search-tips"], [1, "recent-searches-header"], ["type", "button", "title", "Clear recent searches", 1, "clear-recent-button", 3, "click"], [1, "recent-searches-list"], ["type", "button", 1, "recent-search-item"], ["type", "button", 1, "recent-search-item", 3, "click"], [1, "fa-solid", "fa-history"], [1, "results-summary"], [1, "results-group"], [1, "results-group-title"], [1, "results-list"], ["type", "button", 1, "result-item", 3, "selected"], ["type", "button", 1, "result-item", 3, "click"], [1, "result-icon"], [1, "fa-solid"], [1, "result-content"], [1, "result-title", 3, "innerHTML"], [1, "result-preview", 3, "innerHTML"], [1, "result-match", 3, "innerHTML"], [1, "result-meta"], [1, "result-date"], [1, "result-conversation"], [1, "result-type"], [1, "type-badge"]], template: function SearchPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, SearchPanelComponent_Conditional_0_Template, 54, 18, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen ? 0 : -1);
-        } }, dependencies: [i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.MJDatepickerComponent, i3.MJEmptyStateComponent, i4.LoadingComponent], styles: [".search-panel-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  z-index: 10000;\n  padding-top: 10vh;\n  backdrop-filter: blur(2px);\n}\n\n.search-panel[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-xl);\n  width: 90%;\n  max-width: 800px;\n  max-height: 80vh;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_slideDown 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n.search-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  padding: 8px 12px;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  flex: 1;\n  border: none;\n  background: transparent;\n  font-size: 16px;\n  outline: none;\n  color: var(--mj-text-primary);\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.clear-button[_ngcontent-%COMP%] {\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.clear-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n\n.close-button[_ngcontent-%COMP%] {\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.close-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n\n.search-filters[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.filter-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.filter-button[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  padding: 6px 12px;\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  transition: all 0.2s;\n}\n\n.filter-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n}\n\n.filter-button.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.date-filter[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-left: auto;\n}\n\n.clear-date-button[_ngcontent-%COMP%] {\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: color 0.2s;\n}\n\n.clear-date-button[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n\n.search-results[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n.search-loading[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  gap: 16px;\n  color: var(--mj-text-secondary);\n}\n\n.results-summary[_ngcontent-%COMP%] {\n  padding: 8px 0 16px;\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.results-group[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.results-group-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.results-group-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.results-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.result-item[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  text-align: left;\n  transition: all 0.2s;\n  width: 100%;\n}\n\n.result-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n  transform: translateX(2px);\n}\n\n.result-item.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n}\n\n.result-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.result-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.result-title[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.result-preview[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.result-match[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-top: 4px;\n  padding: 4px 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  font-style: italic;\n}\n\n.result-conversation[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.result-type[_ngcontent-%COMP%] {\n  margin-top: 4px;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.result-meta[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.result-date[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n\n.result-item[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(mark) {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  padding: 2px 0;\n  border-radius: 2px;\n  font-weight: 600;\n}\n\n\n.search-tips[_ngcontent-%COMP%] {\n  margin-top: 24px;\n  text-align: left;\n  background: var(--mj-bg-surface-sunken);\n  padding: 16px;\n  border-radius: 6px;\n  max-width: 400px;\n}\n\n.search-tips[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 8px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.search-tips[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {\n  margin: 0;\n  padding-left: 20px;\n  font-size: 13px;\n}\n\n.search-tips[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n  margin: 4px 0;\n}\n\n\n.recent-searches[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.recent-searches-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n}\n\n.recent-searches-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.clear-recent-button[_ngcontent-%COMP%] {\n  border: none;\n  background: transparent;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-size: 13px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.clear-recent-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.recent-searches-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.recent-search-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  text-align: left;\n  transition: all 0.2s;\n  width: 100%;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.recent-search-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.recent-search-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n\n.search-footer[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.keyboard-hints[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  justify-content: center;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.hint[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\nkbd[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 3px 6px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-family: 'Courier New', monospace;\n  font-size: 11px;\n  color: var(--mj-text-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n\n@media (max-width: 768px) {\n  .search-panel[_ngcontent-%COMP%] {\n    width: 95%;\n    max-height: 90vh;\n  }\n\n  .search-filters[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .date-filter[_ngcontent-%COMP%] {\n    margin-left: 0;\n  }\n\n  .keyboard-hints[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n}"] });
+        } }, dependencies: [i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.MJDatepickerComponent, i3.MJEmptyStateComponent, i4.LoadingComponent], styles: [".search-panel-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  z-index: 10000;\n  padding-top: 10vh;\n  backdrop-filter: blur(2px);\n}\n\n.search-panel[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-xl);\n  width: 90%;\n  max-width: 800px;\n  max-height: 80vh;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_slideDown 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n.search-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  padding: 8px 12px;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n}\n\n\n\n\n\n\n\n.search-input-wrapper[_ngcontent-%COMP%]   .search-icon[_ngcontent-%COMP%] {\n  position: static;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  flex: 1;\n  border: none;\n  background: transparent;\n  font-size: 16px;\n  outline: none;\n  color: var(--mj-text-primary);\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.clear-button[_ngcontent-%COMP%] {\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.clear-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n\n.close-button[_ngcontent-%COMP%] {\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.close-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n\n.search-filters[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.filter-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.filter-button[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  padding: 6px 12px;\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  transition: all 0.2s;\n}\n\n.filter-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n}\n\n.filter-button.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.date-filter[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-left: auto;\n}\n\n.clear-date-button[_ngcontent-%COMP%] {\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: color 0.2s;\n}\n\n.clear-date-button[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n\n.search-results[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n.search-loading[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  gap: 16px;\n  color: var(--mj-text-secondary);\n}\n\n.results-summary[_ngcontent-%COMP%] {\n  padding: 8px 0 16px;\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.results-group[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.results-group-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.results-group-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.results-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.result-item[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  text-align: left;\n  transition: all 0.2s;\n  width: 100%;\n}\n\n.result-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n  transform: translateX(2px);\n}\n\n.result-item.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n}\n\n.result-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.result-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.result-title[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.result-preview[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.result-match[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-top: 4px;\n  padding: 4px 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  font-style: italic;\n}\n\n.result-conversation[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.result-type[_ngcontent-%COMP%] {\n  margin-top: 4px;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.result-meta[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.result-date[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n\n.result-item[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(mark) {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  padding: 2px 0;\n  border-radius: 2px;\n  font-weight: 600;\n}\n\n\n.search-tips[_ngcontent-%COMP%] {\n  margin-top: 24px;\n  text-align: left;\n  background: var(--mj-bg-surface-sunken);\n  padding: 16px;\n  border-radius: 6px;\n  max-width: 400px;\n}\n\n.search-tips[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 8px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.search-tips[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {\n  margin: 0;\n  padding-left: 20px;\n  font-size: 13px;\n}\n\n.search-tips[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n  margin: 4px 0;\n}\n\n\n.recent-searches[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.recent-searches-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n}\n\n.recent-searches-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.clear-recent-button[_ngcontent-%COMP%] {\n  border: none;\n  background: transparent;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-size: 13px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.clear-recent-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.recent-searches-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.recent-search-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  text-align: left;\n  transition: all 0.2s;\n  width: 100%;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.recent-search-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.recent-search-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n\n.search-footer[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.keyboard-hints[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  justify-content: center;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.hint[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\nkbd[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 3px 6px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-family: 'Courier New', monospace;\n  font-size: 11px;\n  color: var(--mj-text-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n\n@media (max-width: 768px) {\n  .search-panel[_ngcontent-%COMP%] {\n    width: 95%;\n    max-height: 90vh;\n  }\n\n  .search-filters[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .date-filter[_ngcontent-%COMP%] {\n    margin-left: 0;\n  }\n\n  .keyboard-hints[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchPanelComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-search-panel', template: "@if (isOpen) {\n<div class=\"search-panel-overlay\" (click)=\"closePanel()\">\n  <div class=\"search-panel\" (click)=\"$event.stopPropagation()\">\n    <!-- Search Header -->\n    <div class=\"search-header\">\n      <div class=\"search-input-wrapper\">\n        <i class=\"fa-solid fa-search search-icon\"></i>\n        <input\n          #searchInput\n          type=\"text\"\n          class=\"search-input\"\n          placeholder=\"Search conversations, messages, artifacts, collections, and tasks...\"\n          [(ngModel)]=\"searchQuery\"\n          (input)=\"onSearchInput()\"\n          autocomplete=\"off\"\n        />\n        @if (searchQuery) {\n          <button\n            type=\"button\"\n            class=\"clear-button\"\n            (click)=\"clearSearch()\"\n            title=\"Clear search\"\n          >\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        }\n      </div>\n\n      <button\n        type=\"button\"\n        class=\"close-button\"\n        (click)=\"closePanel()\"\n        title=\"Close (Esc)\"\n      >\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n\n    <!-- Filters -->\n    <div class=\"search-filters\">\n      <div class=\"filter-buttons\">\n        <button\n          type=\"button\"\n          class=\"filter-button\"\n          [class.active]=\"activeFilter === 'all'\"\n          (click)=\"setFilter('all')\"\n        >\n          All\n        </button>\n        <button\n          type=\"button\"\n          class=\"filter-button\"\n          [class.active]=\"activeFilter === 'conversations'\"\n          (click)=\"setFilter('conversations')\"\n        >\n          <i class=\"fa-solid fa-comments\"></i>\n          Conversations\n        </button>\n        <button\n          type=\"button\"\n          class=\"filter-button\"\n          [class.active]=\"activeFilter === 'messages'\"\n          (click)=\"setFilter('messages')\"\n        >\n          <i class=\"fa-solid fa-comment\"></i>\n          Messages\n        </button>\n        <button\n          type=\"button\"\n          class=\"filter-button\"\n          [class.active]=\"activeFilter === 'artifacts'\"\n          (click)=\"setFilter('artifacts')\"\n        >\n          <i class=\"fa-solid fa-file-alt\"></i>\n          Artifacts\n        </button>\n        <button\n          type=\"button\"\n          class=\"filter-button\"\n          [class.active]=\"activeFilter === 'collections'\"\n          (click)=\"setFilter('collections')\"\n        >\n          <i class=\"fa-solid fa-folder\"></i>\n          Collections\n        </button>\n        <button\n          type=\"button\"\n          class=\"filter-button\"\n          [class.active]=\"activeFilter === 'tasks'\"\n          (click)=\"setFilter('tasks')\"\n        >\n          <i class=\"fa-solid fa-tasks\"></i>\n          Tasks\n        </button>\n      </div>\n\n      <!-- Date Range Filter -->\n      <div class=\"date-filter\">\n        <mj-datepicker\n          [(ngModel)]=\"dateRange.start\"\n          (ngModelChange)=\"onDateRangeChange()\"\n          Placeholder=\"From\"\n        ></mj-datepicker>\n        <mj-datepicker\n          [(ngModel)]=\"dateRange.end\"\n          (ngModelChange)=\"onDateRangeChange()\"\n          Placeholder=\"To\"\n        ></mj-datepicker>\n        @if (dateRange.start || dateRange.end) {\n          <button\n            type=\"button\"\n            class=\"clear-date-button\"\n            (click)=\"clearDateRange()\"\n            title=\"Clear date range\"\n          >\n            <i class=\"fa-solid fa-times-circle\"></i>\n          </button>\n        }\n      </div>\n    </div>\n\n    <!-- Search Results -->\n    <div class=\"search-results\">\n      @if (isSearching) {\n        <div class=\"search-loading\">\n          <mj-loading text=\"Searching...\" size=\"medium\"></mj-loading>\n        </div>\n      } @else if (!searchQuery) {\n        <!-- Recent Searches -->\n        @if (recentSearches.length > 0) {\n          <div class=\"recent-searches\">\n            <div class=\"recent-searches-header\">\n              <h3>Recent Searches</h3>\n              <button\n                type=\"button\"\n                class=\"clear-recent-button\"\n                (click)=\"clearRecentSearches()\"\n                title=\"Clear recent searches\"\n              >\n                Clear\n              </button>\n            </div>\n            <div class=\"recent-searches-list\">\n              @for (search of recentSearches; track search) {\n                <button\n                  type=\"button\"\n                  class=\"recent-search-item\"\n                  (click)=\"useRecentSearch(search)\"\n                >\n                  <i class=\"fa-solid fa-history\"></i>\n                  <span>{{ search }}</span>\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Empty State -->\n        <mj-empty-state\n          Icon=\"fa-solid fa-magnifying-glass\"\n          Message=\"Search across all your conversations, messages, artifacts, collections, and tasks\">\n          <div class=\"search-tips\">\n            <h4>Tips:</h4>\n            <ul>\n              <li>Use filters to narrow results</li>\n              <li>Set date range to find recent content</li>\n              <li>Use keyboard shortcuts to navigate</li>\n            </ul>\n          </div>\n        </mj-empty-state>\n      } @else if (results.total === 0) {\n        <!-- No Results -->\n        <mj-empty-state\n          Variant=\"no-results\"\n          [Title]=\"NoResultsMessage\"\n          Message=\"Try adjusting your filters or search terms\" />\n      } @else {\n        <!-- Results Summary -->\n        <div class=\"results-summary\">\n          Found {{ results.total }} result{{ results.total === 1 ? '' : 's' }}\n        </div>\n\n        <!-- Conversations Results -->\n        @if (results.conversations.length > 0) {\n          <div class=\"results-group\">\n            <h3 class=\"results-group-title\">\n              <i class=\"fa-solid fa-comments\"></i>\n              Conversations ({{ results.conversations.length }})\n            </h3>\n            <div class=\"results-list\">\n              @for (result of results.conversations; track result.id) {\n                <button\n                  type=\"button\"\n                  class=\"result-item\"\n                  [class.selected]=\"isResultSelected(result)\"\n                  (click)=\"selectResult(result)\"\n                >\n                  <div class=\"result-icon\">\n                    <i class=\"fa-solid\" [class]=\"getResultIcon(result.type)\"></i>\n                  </div>\n                  <div class=\"result-content\">\n                    <div class=\"result-title\" [innerHTML]=\"highlightMatch(result.title, searchQuery)\"></div>\n                    <div class=\"result-preview\" [innerHTML]=\"highlightMatch(result.preview, searchQuery)\"></div>\n                    @if (result.matchedText) {\n                      <div class=\"result-match\" [innerHTML]=\"highlightMatch(result.matchedText, searchQuery)\"></div>\n                    }\n                  </div>\n                  <div class=\"result-meta\">\n                    <span class=\"result-date\">{{ formatDate(result.createdAt) }}</span>\n                  </div>\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Messages Results -->\n        @if (results.messages.length > 0) {\n          <div class=\"results-group\">\n            <h3 class=\"results-group-title\">\n              <i class=\"fa-solid fa-comment\"></i>\n              Messages ({{ results.messages.length }})\n            </h3>\n            <div class=\"results-list\">\n              @for (result of results.messages; track result.id) {\n                <button\n                  type=\"button\"\n                  class=\"result-item\"\n                  [class.selected]=\"isResultSelected(result)\"\n                  (click)=\"selectResult(result)\"\n                >\n                  <div class=\"result-icon\">\n                    <i class=\"fa-solid\" [class]=\"getResultIcon(result.type)\"></i>\n                  </div>\n                  <div class=\"result-content\">\n                    @if (result.conversationName) {\n                      <div class=\"result-conversation\">\n                        <i class=\"fa-solid fa-comments\"></i>\n                        {{ result.conversationName }}\n                      </div>\n                    }\n                    <div class=\"result-preview\" [innerHTML]=\"highlightMatch(result.preview, searchQuery)\"></div>\n                    @if (result.matchedText) {\n                      <div class=\"result-match\" [innerHTML]=\"highlightMatch(result.matchedText, searchQuery)\"></div>\n                    }\n                  </div>\n                  <div class=\"result-meta\">\n                    <span class=\"result-date\">{{ formatDate(result.createdAt) }}</span>\n                  </div>\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Artifacts Results -->\n        @if (results.artifacts.length > 0) {\n          <div class=\"results-group\">\n            <h3 class=\"results-group-title\">\n              <i class=\"fa-solid fa-file-alt\"></i>\n              Artifacts ({{ results.artifacts.length }})\n            </h3>\n            <div class=\"results-list\">\n              @for (result of results.artifacts; track result.id) {\n                <button\n                  type=\"button\"\n                  class=\"result-item\"\n                  [class.selected]=\"isResultSelected(result)\"\n                  (click)=\"selectResult(result)\"\n                >\n                  <div class=\"result-icon\">\n                    <i class=\"fa-solid\" [class]=\"getResultIcon(result.type)\"></i>\n                  </div>\n                  <div class=\"result-content\">\n                    <div class=\"result-title\" [innerHTML]=\"highlightMatch(result.title, searchQuery)\"></div>\n                    @if (result.artifactType) {\n                      <div class=\"result-type\">\n                        <span class=\"type-badge\">{{ result.artifactType }}</span>\n                      </div>\n                    }\n                    @if (result.conversationName) {\n                      <div class=\"result-conversation\">\n                        <i class=\"fa-solid fa-comments\"></i>\n                        {{ result.conversationName }}\n                      </div>\n                    }\n                    <div class=\"result-preview\" [innerHTML]=\"highlightMatch(result.preview, searchQuery)\"></div>\n                    @if (result.matchedText) {\n                      <div class=\"result-match\" [innerHTML]=\"highlightMatch(result.matchedText, searchQuery)\"></div>\n                    }\n                  </div>\n                  <div class=\"result-meta\">\n                    <span class=\"result-date\">{{ formatDate(result.createdAt) }}</span>\n                  </div>\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Collections Results -->\n        @if (results.collections.length > 0) {\n          <div class=\"results-group\">\n            <h3 class=\"results-group-title\">\n              <i class=\"fa-solid fa-folder\"></i>\n              Collections ({{ results.collections.length }})\n            </h3>\n            <div class=\"results-list\">\n              @for (result of results.collections; track result.id) {\n                <button\n                  type=\"button\"\n                  class=\"result-item\"\n                  [class.selected]=\"isResultSelected(result)\"\n                  (click)=\"selectResult(result)\"\n                >\n                  <div class=\"result-icon\">\n                    <i class=\"fa-solid\" [class]=\"getResultIcon(result.type)\"></i>\n                  </div>\n                  <div class=\"result-content\">\n                    <div class=\"result-title\" [innerHTML]=\"highlightMatch(result.title, searchQuery)\"></div>\n                    <div class=\"result-preview\" [innerHTML]=\"highlightMatch(result.preview, searchQuery)\"></div>\n                    @if (result.matchedText) {\n                      <div class=\"result-match\" [innerHTML]=\"highlightMatch(result.matchedText, searchQuery)\"></div>\n                    }\n                  </div>\n                  <div class=\"result-meta\">\n                    <span class=\"result-date\">{{ formatDate(result.createdAt) }}</span>\n                  </div>\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Tasks Results -->\n        @if (results.tasks.length > 0) {\n          <div class=\"results-group\">\n            <h3 class=\"results-group-title\">\n              <i class=\"fa-solid fa-tasks\"></i>\n              Tasks ({{ results.tasks.length }})\n            </h3>\n            <div class=\"results-list\">\n              @for (result of results.tasks; track result.id) {\n                <button\n                  type=\"button\"\n                  class=\"result-item\"\n                  [class.selected]=\"isResultSelected(result)\"\n                  (click)=\"selectResult(result)\"\n                >\n                  <div class=\"result-icon\">\n                    <i class=\"fa-solid\" [class]=\"getResultIcon(result.type)\"></i>\n                  </div>\n                  <div class=\"result-content\">\n                    <div class=\"result-title\" [innerHTML]=\"highlightMatch(result.title, searchQuery)\"></div>\n                    <div class=\"result-preview\" [innerHTML]=\"highlightMatch(result.preview, searchQuery)\"></div>\n                    @if (result.matchedText) {\n                      <div class=\"result-match\" [innerHTML]=\"highlightMatch(result.matchedText, searchQuery)\"></div>\n                    }\n                  </div>\n                  <div class=\"result-meta\">\n                    <span class=\"result-date\">{{ formatDate(result.createdAt) }}</span>\n                  </div>\n                </button>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer with keyboard hints -->\n    <div class=\"search-footer\">\n      <div class=\"keyboard-hints\">\n        <span class=\"hint\"><kbd>\u2191</kbd><kbd>\u2193</kbd> Navigate</span>\n        <span class=\"hint\"><kbd>\u21B5</kbd> Select</span>\n        <span class=\"hint\"><kbd>Esc</kbd> Close</span>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: [".search-panel-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  z-index: 10000;\n  padding-top: 10vh;\n  backdrop-filter: blur(2px);\n}\n\n.search-panel {\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-xl);\n  width: 90%;\n  max-width: 800px;\n  max-height: 80vh;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: slideDown 0.2s ease-out;\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Header */\n.search-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  padding: 8px 12px;\n}\n\n.search-icon {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n}\n\n.search-input {\n  flex: 1;\n  border: none;\n  background: transparent;\n  font-size: 16px;\n  outline: none;\n  color: var(--mj-text-primary);\n}\n\n.search-input::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.clear-button {\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.clear-button:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n\n.close-button {\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.close-button:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n/* Filters */\n.search-filters {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.filter-buttons {\n  display: flex;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.filter-button {\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  padding: 6px 12px;\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  transition: all 0.2s;\n}\n\n.filter-button:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n}\n\n.filter-button.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.date-filter {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-left: auto;\n}\n\n.clear-date-button {\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: color 0.2s;\n}\n\n.clear-date-button:hover {\n  color: var(--mj-text-primary);\n}\n\n/* Results */\n.search-results {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n.search-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  gap: 16px;\n  color: var(--mj-text-secondary);\n}\n\n.results-summary {\n  padding: 8px 0 16px;\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.results-group {\n  margin-bottom: 24px;\n}\n\n.results-group-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.results-group-title i {\n  color: var(--mj-brand-primary);\n}\n\n.results-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.result-item {\n  display: flex;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  text-align: left;\n  transition: all 0.2s;\n  width: 100%;\n}\n\n.result-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n  transform: translateX(2px);\n}\n\n.result-item.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n}\n\n.result-icon {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.result-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.result-title {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.result-preview {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.result-match {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-top: 4px;\n  padding: 4px 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  font-style: italic;\n}\n\n.result-conversation {\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.result-type {\n  margin-top: 4px;\n}\n\n.type-badge {\n  display: inline-block;\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.result-meta {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.result-date {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n/* Highlight */\n.result-item :deep(mark) {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  padding: 2px 0;\n  border-radius: 2px;\n  font-weight: 600;\n}\n\n/* Search tips \u2014 projected into the initial empty state's content slot */\n.search-tips {\n  margin-top: 24px;\n  text-align: left;\n  background: var(--mj-bg-surface-sunken);\n  padding: 16px;\n  border-radius: 6px;\n  max-width: 400px;\n}\n\n.search-tips h4 {\n  margin: 0 0 8px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.search-tips ul {\n  margin: 0;\n  padding-left: 20px;\n  font-size: 13px;\n}\n\n.search-tips li {\n  margin: 4px 0;\n}\n\n/* Recent Searches */\n.recent-searches {\n  margin-bottom: 24px;\n}\n\n.recent-searches-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n}\n\n.recent-searches-header h3 {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.clear-recent-button {\n  border: none;\n  background: transparent;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-size: 13px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.clear-recent-button:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.recent-searches-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.recent-search-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  text-align: left;\n  transition: all 0.2s;\n  width: 100%;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.recent-search-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.recent-search-item i {\n  color: var(--mj-text-muted);\n}\n\n/* Footer */\n.search-footer {\n  padding: 12px 16px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.keyboard-hints {\n  display: flex;\n  gap: 16px;\n  justify-content: center;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.hint {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\nkbd {\n  display: inline-block;\n  padding: 3px 6px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-family: 'Courier New', monospace;\n  font-size: 11px;\n  color: var(--mj-text-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .search-panel {\n    width: 95%;\n    max-height: 90vh;\n  }\n\n  .search-filters {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .date-filter {\n    margin-left: 0;\n  }\n\n  .keyboard-hints {\n    flex-wrap: wrap;\n  }\n}\n"] }]
-    }], () => [{ type: i1.SearchService }], { environmentId: [{
+        args: [{ standalone: false, selector: 'mj-search-panel', template: "@if (isOpen) {\n<div class=\"search-panel-overlay\" (click)=\"closePanel()\">\n  <div class=\"search-panel\" (click)=\"$event.stopPropagation()\">\n    <!-- Search Header -->\n    <div class=\"search-header\">\n      <div class=\"search-input-wrapper\">\n        <i class=\"fa-solid fa-search search-icon\"></i>\n        <input\n          #searchInput\n          type=\"text\"\n          class=\"search-input\"\n          placeholder=\"Search conversations, messages, artifacts, collections, and tasks...\"\n          [(ngModel)]=\"searchQuery\"\n          (input)=\"onSearchInput()\"\n          autocomplete=\"off\"\n        />\n        @if (searchQuery) {\n          <button\n            type=\"button\"\n            class=\"clear-button\"\n            (click)=\"clearSearch()\"\n            title=\"Clear search\"\n          >\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        }\n      </div>\n\n      <button\n        type=\"button\"\n        class=\"close-button\"\n        (click)=\"closePanel()\"\n        title=\"Close (Esc)\"\n      >\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n\n    <!-- Filters -->\n    <div class=\"search-filters\">\n      <div class=\"filter-buttons\">\n        <button\n          type=\"button\"\n          class=\"filter-button\"\n          [class.active]=\"activeFilter === 'all'\"\n          (click)=\"setFilter('all')\"\n        >\n          All\n        </button>\n        <button\n          type=\"button\"\n          class=\"filter-button\"\n          [class.active]=\"activeFilter === 'conversations'\"\n          (click)=\"setFilter('conversations')\"\n        >\n          <i class=\"fa-solid fa-comments\"></i>\n          Conversations\n        </button>\n        <button\n          type=\"button\"\n          class=\"filter-button\"\n          [class.active]=\"activeFilter === 'messages'\"\n          (click)=\"setFilter('messages')\"\n        >\n          <i class=\"fa-solid fa-comment\"></i>\n          Messages\n        </button>\n        <button\n          type=\"button\"\n          class=\"filter-button\"\n          [class.active]=\"activeFilter === 'artifacts'\"\n          (click)=\"setFilter('artifacts')\"\n        >\n          <i class=\"fa-solid fa-file-alt\"></i>\n          Artifacts\n        </button>\n        <button\n          type=\"button\"\n          class=\"filter-button\"\n          [class.active]=\"activeFilter === 'collections'\"\n          (click)=\"setFilter('collections')\"\n        >\n          <i class=\"fa-solid fa-folder\"></i>\n          Collections\n        </button>\n        <button\n          type=\"button\"\n          class=\"filter-button\"\n          [class.active]=\"activeFilter === 'tasks'\"\n          (click)=\"setFilter('tasks')\"\n        >\n          <i class=\"fa-solid fa-tasks\"></i>\n          Tasks\n        </button>\n      </div>\n\n      <!-- Date Range Filter -->\n      <div class=\"date-filter\">\n        <mj-datepicker\n          [(ngModel)]=\"dateRange.start\"\n          (ngModelChange)=\"onDateRangeChange()\"\n          Placeholder=\"From\"\n        ></mj-datepicker>\n        <mj-datepicker\n          [(ngModel)]=\"dateRange.end\"\n          (ngModelChange)=\"onDateRangeChange()\"\n          Placeholder=\"To\"\n        ></mj-datepicker>\n        @if (dateRange.start || dateRange.end) {\n          <button\n            type=\"button\"\n            class=\"clear-date-button\"\n            (click)=\"clearDateRange()\"\n            title=\"Clear date range\"\n          >\n            <i class=\"fa-solid fa-times-circle\"></i>\n          </button>\n        }\n      </div>\n    </div>\n\n    <!-- Search Results -->\n    <div class=\"search-results\">\n      @if (isSearching) {\n        <div class=\"search-loading\">\n          <mj-loading text=\"Searching...\" size=\"medium\"></mj-loading>\n        </div>\n      } @else if (!searchQuery) {\n        <!-- Recent Searches -->\n        @if (recentSearches.length > 0) {\n          <div class=\"recent-searches\">\n            <div class=\"recent-searches-header\">\n              <h3>Recent Searches</h3>\n              <button\n                type=\"button\"\n                class=\"clear-recent-button\"\n                (click)=\"clearRecentSearches()\"\n                title=\"Clear recent searches\"\n              >\n                Clear\n              </button>\n            </div>\n            <div class=\"recent-searches-list\">\n              @for (search of recentSearches; track search) {\n                <button\n                  type=\"button\"\n                  class=\"recent-search-item\"\n                  (click)=\"useRecentSearch(search)\"\n                >\n                  <i class=\"fa-solid fa-history\"></i>\n                  <span>{{ search }}</span>\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Empty State -->\n        <mj-empty-state\n          Icon=\"fa-solid fa-magnifying-glass\"\n          Message=\"Search across all your conversations, messages, artifacts, collections, and tasks\">\n          <div class=\"search-tips\">\n            <h4>Tips:</h4>\n            <ul>\n              <li>Use filters to narrow results</li>\n              <li>Set date range to find recent content</li>\n              <li>Use keyboard shortcuts to navigate</li>\n            </ul>\n          </div>\n        </mj-empty-state>\n      } @else if (results.total === 0) {\n        <!-- No Results -->\n        <mj-empty-state\n          Variant=\"no-results\"\n          [Title]=\"NoResultsMessage\"\n          Message=\"Try adjusting your filters or search terms\" />\n      } @else {\n        <!-- Results Summary -->\n        <div class=\"results-summary\">\n          Found {{ results.total }} result{{ results.total === 1 ? '' : 's' }}\n        </div>\n\n        <!-- Conversations Results -->\n        @if (results.conversations.length > 0) {\n          <div class=\"results-group\">\n            <h3 class=\"results-group-title\">\n              <i class=\"fa-solid fa-comments\"></i>\n              Conversations ({{ results.conversations.length }})\n            </h3>\n            <div class=\"results-list\">\n              @for (result of results.conversations; track result.id) {\n                <button\n                  type=\"button\"\n                  class=\"result-item\"\n                  [class.selected]=\"isResultSelected(result)\"\n                  (click)=\"selectResult(result)\"\n                >\n                  <div class=\"result-icon\">\n                    <i class=\"fa-solid\" [class]=\"getResultIcon(result.type)\"></i>\n                  </div>\n                  <div class=\"result-content\">\n                    <div class=\"result-title\" [innerHTML]=\"highlightMatch(result.title, searchQuery)\"></div>\n                    <div class=\"result-preview\" [innerHTML]=\"highlightMatch(result.preview, searchQuery)\"></div>\n                    @if (result.matchedText) {\n                      <div class=\"result-match\" [innerHTML]=\"highlightMatch(result.matchedText, searchQuery)\"></div>\n                    }\n                  </div>\n                  <div class=\"result-meta\">\n                    <span class=\"result-date\">{{ formatDate(result.createdAt) }}</span>\n                  </div>\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Messages Results -->\n        @if (results.messages.length > 0) {\n          <div class=\"results-group\">\n            <h3 class=\"results-group-title\">\n              <i class=\"fa-solid fa-comment\"></i>\n              Messages ({{ results.messages.length }})\n            </h3>\n            <div class=\"results-list\">\n              @for (result of results.messages; track result.id) {\n                <button\n                  type=\"button\"\n                  class=\"result-item\"\n                  [class.selected]=\"isResultSelected(result)\"\n                  (click)=\"selectResult(result)\"\n                >\n                  <div class=\"result-icon\">\n                    <i class=\"fa-solid\" [class]=\"getResultIcon(result.type)\"></i>\n                  </div>\n                  <div class=\"result-content\">\n                    @if (result.conversationName) {\n                      <div class=\"result-conversation\">\n                        <i class=\"fa-solid fa-comments\"></i>\n                        {{ result.conversationName }}\n                      </div>\n                    }\n                    <div class=\"result-preview\" [innerHTML]=\"highlightMatch(result.preview, searchQuery)\"></div>\n                    @if (result.matchedText) {\n                      <div class=\"result-match\" [innerHTML]=\"highlightMatch(result.matchedText, searchQuery)\"></div>\n                    }\n                  </div>\n                  <div class=\"result-meta\">\n                    <span class=\"result-date\">{{ formatDate(result.createdAt) }}</span>\n                  </div>\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Artifacts Results -->\n        @if (results.artifacts.length > 0) {\n          <div class=\"results-group\">\n            <h3 class=\"results-group-title\">\n              <i class=\"fa-solid fa-file-alt\"></i>\n              Artifacts ({{ results.artifacts.length }})\n            </h3>\n            <div class=\"results-list\">\n              @for (result of results.artifacts; track result.id) {\n                <button\n                  type=\"button\"\n                  class=\"result-item\"\n                  [class.selected]=\"isResultSelected(result)\"\n                  (click)=\"selectResult(result)\"\n                >\n                  <div class=\"result-icon\">\n                    <i class=\"fa-solid\" [class]=\"getResultIcon(result.type)\"></i>\n                  </div>\n                  <div class=\"result-content\">\n                    <div class=\"result-title\" [innerHTML]=\"highlightMatch(result.title, searchQuery)\"></div>\n                    @if (result.artifactType) {\n                      <div class=\"result-type\">\n                        <span class=\"type-badge\">{{ result.artifactType }}</span>\n                      </div>\n                    }\n                    @if (result.conversationName) {\n                      <div class=\"result-conversation\">\n                        <i class=\"fa-solid fa-comments\"></i>\n                        {{ result.conversationName }}\n                      </div>\n                    }\n                    <div class=\"result-preview\" [innerHTML]=\"highlightMatch(result.preview, searchQuery)\"></div>\n                    @if (result.matchedText) {\n                      <div class=\"result-match\" [innerHTML]=\"highlightMatch(result.matchedText, searchQuery)\"></div>\n                    }\n                  </div>\n                  <div class=\"result-meta\">\n                    <span class=\"result-date\">{{ formatDate(result.createdAt) }}</span>\n                  </div>\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Collections Results -->\n        @if (results.collections.length > 0) {\n          <div class=\"results-group\">\n            <h3 class=\"results-group-title\">\n              <i class=\"fa-solid fa-folder\"></i>\n              Collections ({{ results.collections.length }})\n            </h3>\n            <div class=\"results-list\">\n              @for (result of results.collections; track result.id) {\n                <button\n                  type=\"button\"\n                  class=\"result-item\"\n                  [class.selected]=\"isResultSelected(result)\"\n                  (click)=\"selectResult(result)\"\n                >\n                  <div class=\"result-icon\">\n                    <i class=\"fa-solid\" [class]=\"getResultIcon(result.type)\"></i>\n                  </div>\n                  <div class=\"result-content\">\n                    <div class=\"result-title\" [innerHTML]=\"highlightMatch(result.title, searchQuery)\"></div>\n                    <div class=\"result-preview\" [innerHTML]=\"highlightMatch(result.preview, searchQuery)\"></div>\n                    @if (result.matchedText) {\n                      <div class=\"result-match\" [innerHTML]=\"highlightMatch(result.matchedText, searchQuery)\"></div>\n                    }\n                  </div>\n                  <div class=\"result-meta\">\n                    <span class=\"result-date\">{{ formatDate(result.createdAt) }}</span>\n                  </div>\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Tasks Results -->\n        @if (results.tasks.length > 0) {\n          <div class=\"results-group\">\n            <h3 class=\"results-group-title\">\n              <i class=\"fa-solid fa-tasks\"></i>\n              Tasks ({{ results.tasks.length }})\n            </h3>\n            <div class=\"results-list\">\n              @for (result of results.tasks; track result.id) {\n                <button\n                  type=\"button\"\n                  class=\"result-item\"\n                  [class.selected]=\"isResultSelected(result)\"\n                  (click)=\"selectResult(result)\"\n                >\n                  <div class=\"result-icon\">\n                    <i class=\"fa-solid\" [class]=\"getResultIcon(result.type)\"></i>\n                  </div>\n                  <div class=\"result-content\">\n                    <div class=\"result-title\" [innerHTML]=\"highlightMatch(result.title, searchQuery)\"></div>\n                    <div class=\"result-preview\" [innerHTML]=\"highlightMatch(result.preview, searchQuery)\"></div>\n                    @if (result.matchedText) {\n                      <div class=\"result-match\" [innerHTML]=\"highlightMatch(result.matchedText, searchQuery)\"></div>\n                    }\n                  </div>\n                  <div class=\"result-meta\">\n                    <span class=\"result-date\">{{ formatDate(result.createdAt) }}</span>\n                  </div>\n                </button>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer with keyboard hints -->\n    <div class=\"search-footer\">\n      <div class=\"keyboard-hints\">\n        <span class=\"hint\"><kbd>\u2191</kbd><kbd>\u2193</kbd> Navigate</span>\n        <span class=\"hint\"><kbd>\u21B5</kbd> Select</span>\n        <span class=\"hint\"><kbd>Esc</kbd> Close</span>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: [".search-panel-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  z-index: 10000;\n  padding-top: 10vh;\n  backdrop-filter: blur(2px);\n}\n\n.search-panel {\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-xl);\n  width: 90%;\n  max-width: 800px;\n  max-height: 80vh;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: slideDown 0.2s ease-out;\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Header */\n.search-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  padding: 8px 12px;\n}\n\n.search-icon {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n}\n\n/* Explorer's app-wide _shared-patterns.scss absolutely-positions any bare .search-icon\n   and pairs that with a compensating padding-left scoped to .mj-search-box /\n   .search-container / .mj-search. This wrapper is none of those, so the icon gets pulled\n   out of the flex row and positioned against the overlay instead \u2014 landing outside the\n   panel \u2014 while the input slides left into the vacated slot. Emulated encapsulation does\n   not block global rules from reaching in, so opt back out explicitly. */\n.search-input-wrapper .search-icon {\n  position: static;\n}\n\n.search-input {\n  flex: 1;\n  border: none;\n  background: transparent;\n  font-size: 16px;\n  outline: none;\n  color: var(--mj-text-primary);\n}\n\n.search-input::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.clear-button {\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.clear-button:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n\n.close-button {\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.close-button:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n/* Filters */\n.search-filters {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.filter-buttons {\n  display: flex;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.filter-button {\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  padding: 6px 12px;\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  transition: all 0.2s;\n}\n\n.filter-button:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n}\n\n.filter-button.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.date-filter {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-left: auto;\n}\n\n.clear-date-button {\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: color 0.2s;\n}\n\n.clear-date-button:hover {\n  color: var(--mj-text-primary);\n}\n\n/* Results */\n.search-results {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n.search-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  gap: 16px;\n  color: var(--mj-text-secondary);\n}\n\n.results-summary {\n  padding: 8px 0 16px;\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.results-group {\n  margin-bottom: 24px;\n}\n\n.results-group-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.results-group-title i {\n  color: var(--mj-brand-primary);\n}\n\n.results-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.result-item {\n  display: flex;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  text-align: left;\n  transition: all 0.2s;\n  width: 100%;\n}\n\n.result-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n  transform: translateX(2px);\n}\n\n.result-item.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n}\n\n.result-icon {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.result-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.result-title {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.result-preview {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.result-match {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-top: 4px;\n  padding: 4px 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  font-style: italic;\n}\n\n.result-conversation {\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.result-type {\n  margin-top: 4px;\n}\n\n.type-badge {\n  display: inline-block;\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.result-meta {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.result-date {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n/* Highlight */\n.result-item :deep(mark) {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  padding: 2px 0;\n  border-radius: 2px;\n  font-weight: 600;\n}\n\n/* Search tips \u2014 projected into the initial empty state's content slot */\n.search-tips {\n  margin-top: 24px;\n  text-align: left;\n  background: var(--mj-bg-surface-sunken);\n  padding: 16px;\n  border-radius: 6px;\n  max-width: 400px;\n}\n\n.search-tips h4 {\n  margin: 0 0 8px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.search-tips ul {\n  margin: 0;\n  padding-left: 20px;\n  font-size: 13px;\n}\n\n.search-tips li {\n  margin: 4px 0;\n}\n\n/* Recent Searches */\n.recent-searches {\n  margin-bottom: 24px;\n}\n\n.recent-searches-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n}\n\n.recent-searches-header h3 {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.clear-recent-button {\n  border: none;\n  background: transparent;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-size: 13px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.clear-recent-button:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.recent-searches-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.recent-search-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  text-align: left;\n  transition: all 0.2s;\n  width: 100%;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.recent-search-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.recent-search-item i {\n  color: var(--mj-text-muted);\n}\n\n/* Footer */\n.search-footer {\n  padding: 12px 16px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.keyboard-hints {\n  display: flex;\n  gap: 16px;\n  justify-content: center;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.hint {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\nkbd {\n  display: inline-block;\n  padding: 3px 6px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-family: 'Courier New', monospace;\n  font-size: 11px;\n  color: var(--mj-text-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .search-panel {\n    width: 95%;\n    max-height: 90vh;\n  }\n\n  .search-filters {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .date-filter {\n    margin-left: 0;\n  }\n\n  .keyboard-hints {\n    flex-wrap: wrap;\n  }\n}\n"] }]
+    }], () => [{ type: i1.SearchService }, { type: i0.ChangeDetectorRef }], { EnvironmentId: [{
+            type: Input
+        }], environmentId: [{
+            type: Input
+        }], CurrentUser: [{
             type: Input
         }], currentUser: [{
             type: Input
+        }], InitialQuery: [{
+            type: Input
+        }], initialQuery: [{
+            type: Input
+        }], IsOpen: [{
+            type: Input
         }], isOpen: [{
             type: Input
         }], close: [{
             type: Output
+        }], ResultSelected: [{
+            type: Output
         }], resultSelected: [{
             type: Output
-        }], searchInput: [{
+        }], SearchInput: [{
             type: ViewChild,
             args: ['searchInput']
         }], handleKeyboard: [{
             type: HostListener,
             args: ['keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SearchPanelComponent, { className: "SearchPanelComponent", filePath: "src/lib/components/search/search-panel.component.ts", lineNumber: 35 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SearchPanelComponent, { className: "SearchPanelComponent", filePath: "src/lib/components/search/search-panel.component.ts", lineNumber: 36 }); })();
 //# sourceMappingURL=search-panel.component.js.map