1  .searchContainer {
  2      position: relative;
  3      width: 300px;
  4      max-width: 100%;
  5  }
  6  
  7  /* Search Button (replaces input in navbar) */
  8  .searchButton {
  9    width: 100%;
 10    padding: 8px 12px;
 11    border: 1px solid var(--ifm-toc-border-color);
 12    border-radius: 4px;
 13    font-size: 16px;
 14    background: var(--ifm-background-color);
 15    cursor: pointer;
 16    display: flex;
 17    align-items: center;
 18    gap: 8px;
 19    transition: border 0.2s;
 20    text-align: left;
 21  }
 22  
 23  .searchButton:hover {
 24    border-color: var(--ifm-color-primary-darkest);
 25  }
 26  
 27  .searchIcon {
 28    font-size: 16px;
 29    opacity: 0.7;
 30  }
 31  
 32  .searchPlaceholder {
 33    color: var(--ifm-font-color-secondary);
 34    flex: 1;
 35  }
 36  
 37  /* Modal Overlay */
 38  .modalOverlay {
 39    position: fixed;
 40    top: 0;
 41    left: 0;
 42    right: 0;
 43    bottom: 0;
 44    background-color: rgba(0, 0, 0, 0.5);
 45    z-index: 9999;
 46    display: flex;
 47    align-items: flex-start;
 48    justify-content: center;
 49    padding-top: 10vh;
 50  }
 51  
 52  /* Modal Content */
 53  .modalContent {
 54    background: white;
 55    border-radius: 12px;
 56    width: 90%;
 57    max-width: 680px;
 58    max-height: 80vh;
 59    display: flex;
 60    flex-direction: column;
 61    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 62    overflow: hidden;
 63  }
 64  
 65  /* Modal Header */
 66  .modalHeader {
 67    padding: 24px 24px 16px;
 68    border-bottom: 1px solid var(--ifm-toc-border-color);
 69  }
 70    
 71  .searchInputWrapper {
 72    position: relative;
 73    display: flex;
 74    align-items: center;
 75    margin-bottom: 16px;
 76  }
 77  
 78  .searchIconInput {
 79    position: absolute;
 80    left: 16px;
 81    font-size: 18px;
 82    opacity: 0.5;
 83  }
 84  
 85  .searchInput {
 86    width: 100%;
 87    padding: 14px 40px 14px 46px;
 88    border: 2px solid var(--ifm-toc-border-color);
 89    border-radius: 8px;
 90    font-size: 16px;
 91    outline: none;
 92    transition: border 0.2s;
 93  }
 94  
 95  .searchInput:focus {
 96    border-color: var(--ifm-color-primary-dark);
 97    box-shadow: 0 0 0 3px var(--docusaurus-admonition-tip-bg);
 98  }
 99  
100  .clearButton {
101    position: absolute;
102    right: 12px;
103    background: none;
104    border: none;
105    color: var(--ifm-font-color-secondary);
106    cursor: pointer;
107    font-size: 18px;
108    display: flex;
109    align-items: center;
110    justify-content: center;
111    width: 28px;
112    height: 28px;
113    border-radius: 50%;
114    transition: background-color 0.2s;
115  }
116  
117  .clearButton:hover {
118    background-color: var(--ifm-color-emphasis-100);
119  }
120  
121  .searchingIndicator {
122    position: absolute;
123    right: 46px;
124    color: var(--ifm-font-color-secondary);
125    font-size: 14px;
126  }
127  
128  /* Filter Tabs */
129  .filterTabs {
130    display: flex;
131    gap: 8px;
132    flex-wrap: wrap;
133  }
134  
135  .filterTab {
136    padding: 8px 16px;
137    border: 1px solid var(--ifm-toc-border-color);
138    border-radius: 20px;
139    background: var(--ifm-background-color);
140    color: var(--ifm-font-color-secondary);
141    font-size: 14px;
142    cursor: pointer;
143    display: flex;
144    align-items: center;
145    gap: 6px;
146    transition: all 0.2s;
147    white-space: nowrap;
148  }
149  
150  .filterTab:hover {
151    border-color: var(--ifm-color-primary-light);
152    background-color: var(--ifm-color-secondary-light);
153  }
154  
155  .filterTabActive {
156    background-color: var(--ifm-color-primary-dark);
157    border-color: var(--ifm-color-primary-dark);
158    color: var(--ifm-color-white);
159  }
160  
161  .filterTabActive:hover {
162    background-color: var(--ifm-color-primary-dark);
163    border-color: var(--ifm-color-primary-dark);
164  }
165  
166  /* Modal Body */
167  .modalBody {
168    flex: 1;
169    overflow-y: auto;
170    padding: 16px 0;
171  }
172  
173  /* Empty State */
174  .emptyState {
175    display: flex;
176    flex-direction: column;
177    align-items: center;
178    justify-content: center;
179    padding: 80px 24px;
180    color: var(--ifm-font-color-secondary);
181  }
182  
183  .emptyStateIcon {
184    font-size: 48px;
185    margin-bottom: 16px;
186    opacity: 0.5;
187  }
188  
189  .emptyStateText {
190    font-size: 18px;
191    margin: 0;
192  }
193  
194  /* Loading State */
195  .loadingState {
196    display: flex;
197    flex-direction: column;
198    align-items: center;
199    justify-content: center;
200    padding: 80px 24px;
201    color: var(--ifm-font-color-secondary);
202  }
203  
204  .loadingState p {
205    margin-top: 16px;
206    margin-bottom: 0;
207  }
208  
209  /* No Results State */
210  .noResultsState {
211    padding: 80px 24px;
212    text-align: center;
213  }
214  
215  /* Search Results */
216  .searchResults {
217    padding: 0;
218  }
219  
220  .searchResults ul {
221    list-style: none;
222    padding: 0;
223    margin: 0;
224  }
225  
226  .searchResults li {
227    padding: 16px 24px;
228    cursor: pointer;
229    border-bottom: 1px solid var(--ifm-color-emphasis-100);
230    transition: background-color 0.2s;
231  }
232  
233  .searchResults li:last-child {
234    border-bottom: none;
235  }
236  
237  .searchResults li:hover {
238    background-color: var(--ifm-color-primary-lightest);
239  }
240  
241  .resultTitle a {
242    color: var(--ifm-font-color-base);
243    text-decoration: none;
244  }
245  
246  .resultTitle a:hover {
247    text-decoration: underline;
248  }
249  
250  
251  .resultTitle {
252    font-weight: 500;
253    margin-bottom: 4px;
254    color: var(--ifm-font-color-base);
255  }
256  
257  .resultSnippet {
258    font-size: 12px;
259    color: var(--ifm-font-color-secondary);
260  }
261  
262  .resultSnippet strong {
263    color: var(--ifm-color-primary-darkest);
264    font-weight: 600;
265    background-color: var(--docusaurus-admonition-tip-bg);
266    padding: 0 2px;
267  }
268  .resultSnippet mark {
269    background: var(--ifm-color-primary-lightest);
270    padding: 0 2px;
271    border-radius: 2px;
272  }
273  
274  
275  .noResults {
276    margin: 0;
277    font-size: 16px;
278    color: var(--ifm-font-color-secondary);
279  }
280  
281  .resultMeta {
282    display: flex;
283    gap: 8px;
284    margin: 2px 0 6px;
285    font-size: 12px;
286    color: var(--ifm-font-color-secondary);
287  }
288  
289  .spinner {
290    width: 14px;
291    height: 14px;
292    border: 2px solid var(--ifm-toc-border-color);
293    border-top-color: var(--ifm-color-primary-darkest);
294    border-radius: 50%;
295    animation: spin 0.8s linear infinite;
296    display: inline-block;
297  }
298  
299  @keyframes spin {
300    to { transform: rotate(360deg); }
301  }
302  
303  /* Dark Mode Support */
304  [data-theme="dark"] .searchButton {
305    background: transparent;
306    color: var(--ifm-color-primary-darkest);
307  }
308  
309  [data-theme="dark"] .searchButton:hover {
310    border-color: var(--ifm-color-primary-darkest);
311  }
312  
313  [data-theme="dark"] .searchPlaceholder {
314    color: var(--ifm-font-color-secondary);
315  }
316  
317  [data-theme="dark"] .modalContent {
318    background: var(--ifm-background-color);
319    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
320  }
321  
322  [data-theme="dark"] .modalHeader {
323    border-bottom-color: var(--ifm-toc-border-color);
324  }
325  
326  [data-theme="dark"] .searchInput {
327    background: var(--ifm-background-surface-color);
328    border-color: var(--ifm-toc-border-color);
329    color: var(--ifm-font-color-base);
330  }
331  
332  [data-theme="dark"] .searchInput:focus {
333    border-color: var(--ifm-color-primary-dark);
334  }
335  
336  [data-theme="dark"] .filterTab {
337    background: var(--ifm-background-surface-color);
338    border-color: var(--ifm-toc-border-color);
339    color: var(--ifm-font-color-secondary);
340  }
341  
342  [data-theme="dark"] .filterTab:hover {
343    background-color: var(--ifm-color-emphasis-200);
344    border-color: var(--ifm-color-primary-darkest);
345  }
346  
347  [data-theme="dark"] .filterTabActive {
348    background-color: var(--ifm-color-primary-darkest);
349    color: var(--ifm-font-color-secondary);
350    border-color: var(--ifm-color-primary-darkest);
351  }
352  
353  [data-theme="dark"] .filterTabActive:hover {
354    background-color: var(--ifm-color-primary-light);
355    border-color: var(--ifm-color-primary-light);
356  }
357  
358  [data-theme="dark"] .searchResults li {
359    border-bottom-color: var(--ifm-color-emphasis-200);
360  }
361  
362  [data-theme="dark"] .searchResults li:hover {
363    background-color: var(--ifm-background-surface-color);
364  }
365  
366  [data-theme="dark"] .resultTitle a {
367    color: var(--ifm-font-color-base);
368  }
369  
370  [data-theme="dark"] .resultSnippet {
371    color: var(--ifm-font-color-secondary);
372  }
373  
374  [data-theme="dark"] .clearButton:hover {
375    background-color: var(--ifm-color-emphasis-200);
376  }
377  
378  [data-theme="dark"] .emptyState,
379  [data-theme="dark"] .loadingState,
380  [data-theme="dark"] .noResultsState {
381    color: var(--ifm-font-color-secondary);
382  }
383  
384  [data-theme="dark"] .noResults {
385    color: var(--ifm-font-color-secondary);
386  }
387  
388  /* Modal Footer - Powered by Haystack */
389  .modalFooter {
390    position: sticky;
391    bottom: 0;
392    padding: 12px 24px;
393    border-top: 1px solid var(--ifm-toc-border-color);
394    background: var(--ifm-background-color);
395    display: flex;
396    justify-content: center;
397    align-items: center;
398  }
399  
400  .poweredBy {
401    font-size: 13px;
402    color: var(--ifm-font-color-secondary);
403  }
404  
405  .poweredByLogo {
406    height: 20px;
407    vertical-align: middle;
408    margin-left: 4px;
409  }
410  
411  [data-theme="dark"] .modalFooter {
412    background: var(--ifm-background-color);
413    border-top-color: var(--ifm-toc-border-color);
414  }
415  
416  
417  /* Responsive */
418  @media (max-width: 768px) {
419    .searchContainer {
420      width: 100%;
421    }
422  
423    .modalOverlay {
424      padding-top: 5vh;
425    }
426  
427    .modalContent {
428      width: 95%;
429      max-height: 85vh;
430    }
431  
432    .modalHeader {
433      padding: 16px;
434    }
435  
436    .filterTabs {
437      overflow-x: auto;
438      flex-wrap: nowrap;
439      -webkit-overflow-scrolling: touch;
440      scrollbar-width: none;
441    }
442  
443    .filterTabs::-webkit-scrollbar {
444      display: none;
445    }
446  
447    .filterTab {
448      font-size: 13px;
449      padding: 6px 12px;
450    }
451  
452    .searchResults li {
453      padding: 12px 16px;
454    }
455  
456    .emptyState,
457    .loadingState,
458    .noResultsState {
459      padding: 60px 16px;
460    }
461  }