@farming-labs/theme 0.2.44 → 0.2.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,3616 @@
1
+ /*
2
+ * @farming-labs/theme - framework-neutral docs layout CSS.
3
+ *
4
+ * Activates only for non-React adapters that mark their docs root with
5
+ * `data-fd-framework`, so these structural rules do not collide with
6
+ * fumadocs-ui's React/TanStack layout CSS.
7
+ */
8
+
9
+ /* CSS Reset */
10
+
11
+ #nd-docs-layout[data-fd-framework],
12
+ #nd-docs-layout[data-fd-framework] *,
13
+ #nd-docs-layout[data-fd-framework] *::before,
14
+ #nd-docs-layout[data-fd-framework] *::after {
15
+ box-sizing: border-box;
16
+ margin: 0;
17
+ }
18
+
19
+ /* Layout Tokens */
20
+
21
+ :where(#nd-docs-layout[data-fd-framework]) {
22
+ --fd-sidebar-width: 268px;
23
+ --fd-toc-width: 268px;
24
+ --fd-content-width: 768px;
25
+ --fd-header-height: 48px;
26
+ --fd-nav-height: 48px;
27
+ }
28
+
29
+ /* Base */
30
+
31
+ html:has(#nd-docs-layout[data-fd-framework]) {
32
+ scroll-behavior: smooth;
33
+ scroll-padding-top: 80px;
34
+ }
35
+
36
+ body:has(#nd-docs-layout[data-fd-framework]) {
37
+ margin: 0;
38
+ font-family: var(--fd-font-sans, ui-sans-serif, system-ui, -apple-system, sans-serif);
39
+ font-size: var(--fd-body-size, 1rem);
40
+ font-weight: var(--fd-body-weight, 400);
41
+ line-height: var(--fd-body-line-height, 1.75);
42
+ background: var(--color-fd-background);
43
+ color: var(--color-fd-foreground);
44
+ -webkit-font-smoothing: antialiased;
45
+ -moz-osx-font-smoothing: grayscale;
46
+ }
47
+
48
+ #nd-docs-layout[data-fd-framework] {
49
+ scroll-behavior: smooth;
50
+ scroll-padding-top: 80px;
51
+ font-family: var(--fd-font-sans, ui-sans-serif, system-ui, -apple-system, sans-serif);
52
+ font-size: var(--fd-body-size, 1rem);
53
+ font-weight: var(--fd-body-weight, 400);
54
+ line-height: var(--fd-body-line-height, 1.75);
55
+ background: var(--color-fd-background);
56
+ color: var(--color-fd-foreground);
57
+ -webkit-font-smoothing: antialiased;
58
+ -moz-osx-font-smoothing: grayscale;
59
+ }
60
+
61
+ #nd-docs-layout[data-fd-framework] code,
62
+ #nd-docs-layout[data-fd-framework] kbd,
63
+ #nd-docs-layout[data-fd-framework] pre,
64
+ #nd-docs-layout[data-fd-framework] samp {
65
+ font-family: var(
66
+ --fd-font-mono,
67
+ ui-monospace,
68
+ "Cascadia Code",
69
+ "Source Code Pro",
70
+ Menlo,
71
+ Consolas,
72
+ monospace
73
+ );
74
+ }
75
+
76
+ /* Layout (sidebar + content, TOC lives inside content area) */
77
+
78
+ #nd-docs-layout[data-fd-framework] {
79
+ display: grid;
80
+ grid-template-columns: var(--fd-sidebar-width) 1fr;
81
+ min-height: 100dvh;
82
+ }
83
+
84
+ /* Mobile header */
85
+
86
+ #nd-docs-layout[data-fd-framework] .fd-header {
87
+ display: none;
88
+ position: sticky;
89
+ top: 0;
90
+ z-index: 40;
91
+ height: var(--fd-header-height);
92
+ padding: 0 16px;
93
+ background: var(--color-fd-background);
94
+ border-bottom: 1px solid var(--color-fd-border);
95
+ align-items: center;
96
+ gap: 8px;
97
+ }
98
+
99
+ #nd-docs-layout[data-fd-framework] .fd-header-title {
100
+ font-weight: 600;
101
+ font-size: 14px;
102
+ color: var(--color-fd-foreground);
103
+ text-decoration: none;
104
+ flex: 1;
105
+ }
106
+
107
+ #nd-docs-layout[data-fd-framework] .fd-menu-btn,
108
+ #nd-docs-layout[data-fd-framework] .fd-search-trigger-mobile {
109
+ display: inline-flex;
110
+ align-items: center;
111
+ justify-content: center;
112
+ width: 36px;
113
+ height: 36px;
114
+ background: transparent;
115
+ border: none;
116
+ border-radius: 8px;
117
+ color: var(--color-fd-muted-foreground);
118
+ cursor: pointer;
119
+ transition:
120
+ background 0.15s,
121
+ color 0.15s;
122
+ }
123
+
124
+ #nd-docs-layout[data-fd-framework] .fd-menu-btn:hover,
125
+ #nd-docs-layout[data-fd-framework] .fd-search-trigger-mobile:hover {
126
+ background: var(--color-fd-accent);
127
+ color: var(--color-fd-foreground);
128
+ }
129
+
130
+ @media (max-width: 1023px) {
131
+ #nd-docs-layout[data-fd-framework] .fd-header {
132
+ display: flex;
133
+ }
134
+
135
+ #nd-docs-layout[data-fd-framework] {
136
+ display: flex;
137
+ flex-direction: column;
138
+ }
139
+ }
140
+
141
+ @media (min-width: 1024px) {
142
+ #nd-docs-layout[data-fd-framework] {
143
+ grid-template-columns: var(--fd-sidebar-width) minmax(0, 1fr);
144
+ }
145
+
146
+ #nd-docs-layout[data-fd-framework] .fd-main {
147
+ min-width: 0;
148
+ }
149
+
150
+ #nd-docs-layout[data-fd-framework] .fd-page-article,
151
+ #nd-docs-layout[data-fd-framework] .fd-page-body,
152
+ #nd-docs-layout[data-fd-framework] .fd-docs-content {
153
+ max-width: none;
154
+ margin-inline: 0;
155
+ }
156
+ }
157
+
158
+ /* Sidebar */
159
+
160
+ #nd-docs-layout[data-fd-framework] .fd-sidebar {
161
+ position: sticky;
162
+ top: 0;
163
+ width: var(--fd-sidebar-width);
164
+ height: 100dvh;
165
+ overflow-y: auto;
166
+ overflow-x: hidden;
167
+ border-right: 1px solid var(--color-fd-border);
168
+ background: var(--color-fd-background);
169
+ display: flex;
170
+ flex-direction: column;
171
+ flex-shrink: 0;
172
+ z-index: 50;
173
+ }
174
+
175
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-header {
176
+ display: flex;
177
+ align-items: center;
178
+ justify-content: space-between;
179
+ padding: 12px 12px 0;
180
+ gap: 4px;
181
+ }
182
+
183
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-title {
184
+ font-weight: 600;
185
+ font-size: 14px;
186
+ letter-spacing: 0.02em;
187
+ color: var(--color-fd-foreground);
188
+ text-decoration: none;
189
+ display: flex;
190
+ align-items: center;
191
+ gap: 8px;
192
+ padding: 8px;
193
+ flex: 1;
194
+ }
195
+
196
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-title:hover {
197
+ text-decoration: none;
198
+ }
199
+
200
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-collapse-btn {
201
+ display: inline-flex;
202
+ align-items: center;
203
+ justify-content: center;
204
+ width: 28px;
205
+ height: 28px;
206
+ background: transparent;
207
+ border: 1px solid var(--color-fd-border);
208
+ border-radius: 6px;
209
+ color: var(--color-fd-muted-foreground);
210
+ cursor: pointer;
211
+ transition:
212
+ background 0.15s,
213
+ color 0.15s;
214
+ flex-shrink: 0;
215
+ }
216
+
217
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-collapse-btn:hover {
218
+ background: var(--color-fd-accent);
219
+ color: var(--color-fd-foreground);
220
+ }
221
+
222
+ /* --------- Search button (fumadocs style) --------------------------------------------------------------------------------------------------------- */
223
+
224
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-search {
225
+ padding: 8px 12px;
226
+ }
227
+
228
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-search-btn {
229
+ display: flex;
230
+ align-items: center;
231
+ gap: 8px;
232
+ width: 100%;
233
+ padding: 6px 10px;
234
+ height: 36px;
235
+ font-size: 14px;
236
+ color: var(--color-fd-muted-foreground);
237
+ background: var(--color-fd-secondary);
238
+ border: 1px solid var(--color-fd-border);
239
+ border-radius: 8px;
240
+ cursor: pointer;
241
+ transition:
242
+ border-color 0.15s,
243
+ background 0.15s;
244
+ }
245
+
246
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-search-btn:hover {
247
+ background: var(--color-fd-accent);
248
+ }
249
+
250
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-search-btn svg {
251
+ flex-shrink: 0;
252
+ opacity: 0.7;
253
+ }
254
+
255
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-search-btn span {
256
+ flex: 1;
257
+ text-align: left;
258
+ }
259
+
260
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-search-btn kbd {
261
+ font-size: 11px;
262
+ padding: 1px 6px;
263
+ border: 1px solid var(--color-fd-border);
264
+ border-radius: 4px;
265
+ color: var(--color-fd-muted-foreground);
266
+ font-family: inherit;
267
+ background: var(--color-fd-background);
268
+ }
269
+
270
+ /* --------- Sidebar nav ------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
271
+
272
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-nav {
273
+ flex: 1;
274
+ padding: 4px 12px;
275
+ overflow-y: auto;
276
+ }
277
+
278
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-link {
279
+ display: flex;
280
+ align-items: center;
281
+ gap: 8px;
282
+ padding: 8px;
283
+ font-size: 14px;
284
+ font-weight: 400;
285
+ color: var(--color-fd-muted-foreground);
286
+ text-decoration: none;
287
+ border-radius: 8px;
288
+ position: relative;
289
+ transition:
290
+ color 0.15s,
291
+ background 0.15s;
292
+ }
293
+
294
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-link:hover {
295
+ color: var(--color-fd-accent-foreground);
296
+ background: var(--color-fd-accent);
297
+ text-decoration: none;
298
+ }
299
+
300
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-link-active,
301
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-link[data-active="true"] {
302
+ color: var(--color-fd-foreground) !important;
303
+ background: var(--color-fd-accent) !important;
304
+ font-weight: 600;
305
+ }
306
+
307
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-folder-content .fd-sidebar-link-active::before {
308
+ content: "";
309
+ position: absolute;
310
+ left: -9px;
311
+ top: 25%;
312
+ bottom: 25%;
313
+ width: 2px;
314
+ background: var(--color-fd-foreground);
315
+ border-radius: 1px;
316
+ }
317
+
318
+ /* --------- Sidebar folders ------------------------------------------------------------------------------------------------------------------------------------------------------ */
319
+
320
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-folder {
321
+ margin: 2px 0;
322
+ }
323
+
324
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-folder summary {
325
+ list-style: none;
326
+ }
327
+
328
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-folder summary::-webkit-details-marker {
329
+ display: none;
330
+ }
331
+
332
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-folder-trigger {
333
+ display: flex;
334
+ align-items: center;
335
+ justify-content: space-between;
336
+ padding: 8px;
337
+ font-size: 14px;
338
+ font-weight: 500;
339
+ color: var(--color-fd-foreground);
340
+ cursor: pointer;
341
+ border-radius: 8px;
342
+ transition: background 0.15s;
343
+ }
344
+
345
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-folder-trigger:hover {
346
+ background: var(--color-fd-accent);
347
+ }
348
+
349
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-folder-trigger-link {
350
+ gap: 8px;
351
+ }
352
+
353
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-folder-parent-link {
354
+ min-width: 0;
355
+ flex: 1;
356
+ padding: 0;
357
+ color: inherit;
358
+ background: transparent !important;
359
+ }
360
+
361
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-folder-parent-link:hover {
362
+ color: inherit;
363
+ background: transparent !important;
364
+ }
365
+
366
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-folder-toggle {
367
+ display: inline-flex;
368
+ align-items: center;
369
+ justify-content: center;
370
+ margin: 0;
371
+ padding: 0;
372
+ border: 0;
373
+ background: transparent;
374
+ color: inherit;
375
+ cursor: pointer;
376
+ flex-shrink: 0;
377
+ }
378
+
379
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-chevron {
380
+ transition: transform 0.2s;
381
+ flex-shrink: 0;
382
+ opacity: 0.5;
383
+ }
384
+
385
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-folder[open] > .fd-sidebar-folder-trigger .fd-sidebar-chevron,
386
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-folder[open] > .fd-sidebar-folder-trigger-link .fd-sidebar-chevron {
387
+ transform: rotate(180deg);
388
+ }
389
+
390
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-folder-content {
391
+ position: relative;
392
+ padding-left: 12px;
393
+ margin-left: 10px;
394
+ margin-top: 2px;
395
+ }
396
+
397
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-folder-content::before {
398
+ content: "";
399
+ position: absolute;
400
+ left: 4px;
401
+ top: 4px;
402
+ bottom: 4px;
403
+ width: 1px;
404
+ background: var(--color-fd-border);
405
+ }
406
+
407
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-banner {
408
+ padding: 12px 16px;
409
+ border-bottom: 1px solid var(--color-fd-border);
410
+ }
411
+
412
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-footer-custom {
413
+ padding: 12px 16px;
414
+ border-top: 1px solid var(--color-fd-border);
415
+ }
416
+
417
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-footer {
418
+ padding: 12px 16px;
419
+ border-top: 1px solid var(--color-fd-border);
420
+ margin-top: auto;
421
+ }
422
+
423
+ /* --------- Sidebar overlay + responsive --------------------------------------------------------------------------------------------------------------- */
424
+
425
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-overlay {
426
+ display: none;
427
+ position: fixed;
428
+ inset: 0;
429
+ z-index: 45;
430
+ background: rgba(0, 0, 0, 0.2);
431
+ backdrop-filter: blur(2px);
432
+ }
433
+
434
+ @media (max-width: 1023px) {
435
+ #nd-docs-layout[data-fd-framework] .fd-sidebar {
436
+ position: fixed;
437
+ left: 0;
438
+ top: 0;
439
+ transform: translateX(-100%);
440
+ transition: transform 0.25s ease;
441
+ z-index: 50;
442
+ }
443
+
444
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-open {
445
+ transform: translateX(0);
446
+ }
447
+
448
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-open + .fd-sidebar-overlay {
449
+ display: block;
450
+ }
451
+ }
452
+
453
+ /* --------- Main content --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
454
+
455
+ #nd-docs-layout[data-fd-framework] .fd-main {
456
+ min-width: 0;
457
+ padding: 0;
458
+ }
459
+
460
+ /* --------- Page layout (article + TOC) ------------------------------------------------------------------------------------------------------------------ */
461
+
462
+ #nd-docs-layout[data-fd-framework] .fd-page {
463
+ display: grid;
464
+ --fd-article-width: calc(var(--fd-content-width, 860px) + 96px);
465
+ grid-template-columns: var(
466
+ --fd-framework-page-columns,
467
+ minmax(0, min(100%, var(--fd-article-width)))
468
+ );
469
+ justify-content: var(--fd-framework-page-justify, center);
470
+ width: 100%;
471
+ }
472
+
473
+ #nd-docs-layout[data-fd-framework] .fd-page-article {
474
+ min-width: 0;
475
+ width: var(--fd-framework-article-width, auto);
476
+ max-width: var(--fd-framework-article-max-width, 100%);
477
+ padding: 24px 16px 48px;
478
+ display: flex;
479
+ flex-direction: column;
480
+ min-height: calc(100dvh - var(--fd-nav-height, 56px));
481
+ grid-column: var(--fd-framework-article-column, auto);
482
+ justify-self: var(--fd-framework-article-justify, stretch);
483
+ }
484
+
485
+ @media (min-width: 768px) {
486
+ #nd-docs-layout[data-fd-framework] .fd-page-article {
487
+ padding: var(--fd-framework-article-padding, 32px 48px 64px);
488
+ }
489
+ }
490
+
491
+ @media (min-width: 1280px) {
492
+ #nd-docs-layout[data-fd-framework] .fd-page:has(.fd-toc) {
493
+ grid-template-columns: var(
494
+ --fd-framework-page-columns-with-toc,
495
+ minmax(0, min(var(--fd-article-width), calc(100% - var(--fd-toc-width))))
496
+ var(--fd-toc-width)
497
+ );
498
+ }
499
+
500
+ #nd-docs-layout[data-fd-framework] .fd-toc {
501
+ grid-column: var(--fd-framework-toc-column, auto);
502
+ }
503
+ }
504
+
505
+ /* --------- Table of Contents (right column, flush to right edge) ------------------------------------ */
506
+
507
+ #nd-docs-layout[data-fd-framework] .fd-toc {
508
+ width: var(--fd-toc-width);
509
+ position: sticky;
510
+ top: 0;
511
+ height: 100dvh;
512
+ overflow-y: auto;
513
+ padding: 40px 24px;
514
+ }
515
+
516
+ #nd-docs-layout[data-fd-framework] .fd-toc-inner {
517
+ }
518
+
519
+ #nd-docs-layout[data-fd-framework] .fd-toc-title {
520
+ display: flex;
521
+ align-items: center;
522
+ gap: 8px;
523
+ font-size: 13px;
524
+ font-weight: 500;
525
+ color: var(--color-fd-foreground);
526
+ margin-bottom: 12px;
527
+ }
528
+
529
+ #nd-docs-layout[data-fd-framework] .fd-toc-title svg {
530
+ opacity: 0.5;
531
+ }
532
+
533
+ #nd-docs-layout[data-fd-framework] .fd-toc-list {
534
+ list-style: none;
535
+ padding: 0;
536
+ margin: 0;
537
+ display: flex;
538
+ flex-direction: column;
539
+ gap: 0;
540
+ border-left: 1px solid var(--color-fd-border);
541
+ }
542
+
543
+ #nd-docs-layout[data-fd-framework] .fd-toc-item {
544
+ margin: 0;
545
+ }
546
+
547
+ #nd-docs-layout[data-fd-framework] .fd-toc-link {
548
+ display: block;
549
+ padding: 4px 12px;
550
+ font-size: 13px;
551
+ color: var(--color-fd-muted-foreground);
552
+ text-decoration: none;
553
+ border-left: 2px solid transparent;
554
+ margin-left: -1px;
555
+ transition:
556
+ color 0.15s,
557
+ border-color 0.15s;
558
+ }
559
+
560
+ #nd-docs-layout[data-fd-framework] .fd-toc-link:hover {
561
+ color: var(--color-fd-foreground);
562
+ text-decoration: none;
563
+ }
564
+
565
+ #nd-docs-layout[data-fd-framework] .fd-toc-link-active {
566
+ color: var(--color-fd-primary);
567
+ border-left-color: var(--color-fd-primary);
568
+ }
569
+
570
+ /* --------- Clerk TOC (tree-line style) ------------------------------------------------------------------------------------------------------------------ */
571
+
572
+ #nd-docs-layout[data-fd-framework] .fd-toc-clerk {
573
+ border-left: none !important;
574
+ }
575
+
576
+ #nd-docs-layout[data-fd-framework] .fd-toc-clerk .fd-toc-link {
577
+ display: block;
578
+ border-left: none;
579
+ margin-left: 0;
580
+ color: var(--color-fd-muted-foreground);
581
+ text-decoration: none;
582
+ transition: color 0.15s;
583
+ }
584
+
585
+ #nd-docs-layout[data-fd-framework] .fd-toc-clerk .fd-toc-link:hover {
586
+ color: var(--color-fd-foreground);
587
+ }
588
+
589
+ #nd-docs-layout[data-fd-framework] .fd-toc-clerk .fd-toc-link[data-active="true"] {
590
+ color: var(--color-fd-primary);
591
+ }
592
+
593
+ #nd-docs-layout[data-fd-framework] .fd-toc-clerk-mask {
594
+ overflow: hidden;
595
+ }
596
+
597
+ #nd-docs-layout[data-fd-framework] .fd-toc-clerk-thumb {
598
+ width: 100%;
599
+ }
600
+
601
+ @media (max-width: 1279px) {
602
+ #nd-docs-layout[data-fd-framework] .fd-toc {
603
+ display: none;
604
+ }
605
+
606
+ #nd-docs-layout[data-fd-framework] .fd-page {
607
+ grid-template-columns: minmax(0, min(100%, var(--fd-article-width)));
608
+ }
609
+
610
+ #nd-docs-layout[data-fd-framework] .fd-page-article,
611
+ #nd-docs-layout[data-fd-framework] .fd-toc {
612
+ grid-column: auto;
613
+ }
614
+ }
615
+
616
+ @media (max-width: 1023px) {
617
+ #nd-docs-layout[data-fd-framework] .fd-toc {
618
+ display: none;
619
+ }
620
+
621
+ #nd-docs-layout[data-fd-framework] .fd-page {
622
+ grid-template-columns: minmax(0, min(100%, var(--fd-article-width)));
623
+ }
624
+
625
+ #nd-docs-layout[data-fd-framework] .fd-page-article,
626
+ #nd-docs-layout[data-fd-framework] .fd-toc {
627
+ grid-column: auto;
628
+ }
629
+ }
630
+
631
+ /* --------- Page title + description (match Nuxt/Astro: title first, then description) --------------------- */
632
+
633
+ #nd-docs-layout[data-fd-framework] .fd-page-title {
634
+ font-size: var(--fd-h1-size, 2.25rem);
635
+ font-weight: var(--fd-h1-weight, 700);
636
+ line-height: var(--fd-h1-line-height, 1.2);
637
+ letter-spacing: var(--fd-h1-letter-spacing, -0.025em);
638
+ margin: 0 0 0.5rem;
639
+ scroll-margin-top: 80px;
640
+ }
641
+
642
+ #nd-docs-layout[data-fd-framework] .fd-page-description {
643
+ margin-top: 0;
644
+ margin-bottom: 1rem;
645
+ font-size: var(--fd-body-size, 1.125rem);
646
+ font-weight: var(--fd-body-weight, 400);
647
+ line-height: var(--fd-body-line-height, 1.75);
648
+ color: var(--color-fd-muted-foreground);
649
+ }
650
+
651
+ /* --------- Page Actions (Copy page / Open in ...) --------------------------------------------------------------------------------------------- */
652
+
653
+ #nd-docs-layout[data-fd-framework] .fd-page-actions-divider {
654
+ border: none;
655
+ border-top: 1px solid var(--color-fd-border);
656
+ margin: 1rem 0 0.75rem;
657
+ }
658
+
659
+ #nd-docs-layout[data-fd-framework] .fd-page-actions,
660
+ #nd-docs-layout[data-fd-framework] [data-page-actions] {
661
+ display: flex;
662
+ flex-direction: row;
663
+ align-items: center;
664
+ gap: 0.5rem;
665
+ margin-top: 0;
666
+ margin-bottom: 1rem;
667
+ width: 100%;
668
+ }
669
+
670
+ #nd-docs-layout[data-fd-framework] .fd-page-actions[data-actions-alignment="right"],
671
+ #nd-docs-layout[data-fd-framework] [data-page-actions][data-actions-alignment="right"] {
672
+ justify-content: flex-end;
673
+ }
674
+
675
+ #nd-docs-layout[data-fd-framework] .fd-page-actions[data-actions-alignment="left"],
676
+ #nd-docs-layout[data-fd-framework] [data-page-actions][data-actions-alignment="left"] {
677
+ justify-content: flex-start;
678
+ }
679
+
680
+ #nd-docs-layout[data-fd-framework] .fd-page-action-btn {
681
+ display: inline-flex;
682
+ align-items: center;
683
+ gap: 0.375rem;
684
+ padding: 0.375rem 0.75rem;
685
+ font-size: 0.8125rem;
686
+ font-weight: 500;
687
+ line-height: 1;
688
+ min-height: 2rem;
689
+ color: var(--color-fd-muted-foreground);
690
+ background: var(--color-fd-secondary);
691
+ border: 1px solid var(--color-fd-border);
692
+ border-radius: 0.375rem;
693
+ cursor: pointer;
694
+ white-space: nowrap;
695
+ transition:
696
+ color 0.15s,
697
+ background 0.15s,
698
+ border-color 0.15s;
699
+ user-select: none;
700
+ }
701
+
702
+ #nd-docs-layout[data-fd-framework] .fd-page-action-btn:hover {
703
+ color: var(--color-fd-accent-foreground);
704
+ background: var(--color-fd-accent);
705
+ }
706
+
707
+ #nd-docs-layout[data-fd-framework] .fd-page-action-btn[data-copied="true"] {
708
+ color: var(--color-fd-foreground);
709
+ }
710
+
711
+ #nd-docs-layout[data-fd-framework] .fd-page-action-btn[data-selected="true"] {
712
+ color: var(--color-fd-accent-foreground);
713
+ background: var(--color-fd-accent);
714
+ }
715
+
716
+ #nd-docs-layout[data-fd-framework] .fd-page-action-btn svg {
717
+ flex-shrink: 0;
718
+ }
719
+
720
+ #nd-docs-layout[data-fd-framework] .fd-page-action-btn[data-selected="true"] svg {
721
+ color: currentColor;
722
+ }
723
+
724
+ #nd-docs-layout[data-fd-framework] .fd-page-action-dropdown {
725
+ position: relative;
726
+ }
727
+
728
+ #nd-docs-layout[data-fd-framework] .fd-page-action-menu {
729
+ position: absolute;
730
+ top: calc(100% + 0.375rem);
731
+ left: 0;
732
+ z-index: 50;
733
+ min-width: 220px;
734
+ padding: 0.375rem;
735
+ background: var(--color-fd-popover, var(--color-fd-background));
736
+ border: 1px solid var(--color-fd-border);
737
+ border-radius: 0.5rem;
738
+ box-shadow: 0 4px 24px hsl(0 0% 0% / 0.15);
739
+ display: flex;
740
+ flex-direction: column;
741
+ gap: 0.125rem;
742
+ }
743
+
744
+ #nd-docs-layout[data-fd-framework] .fd-page-action-menu[hidden] {
745
+ display: none !important;
746
+ }
747
+
748
+ #nd-docs-layout[data-fd-framework] .fd-page-action-menu-item {
749
+ display: flex;
750
+ align-items: center;
751
+ gap: 0.5rem;
752
+ width: 100%;
753
+ padding: 0.35rem 0.625rem;
754
+ font-size: 0.8125rem;
755
+ font-weight: 400;
756
+ color: var(--color-fd-foreground);
757
+ background: transparent;
758
+ border: none;
759
+ border-radius: 0.25rem;
760
+ cursor: pointer;
761
+ text-align: left;
762
+ text-decoration: none;
763
+ transition: background 0.1s, color 0.1s;
764
+ }
765
+
766
+ #nd-docs-layout[data-fd-framework] .fd-page-action-menu-item:hover {
767
+ background: var(--color-fd-accent);
768
+ color: var(--color-fd-accent-foreground);
769
+ }
770
+
771
+ #nd-docs-layout[data-fd-framework] .fd-page-action-menu-label {
772
+ flex: 1;
773
+ }
774
+
775
+ #nd-docs-layout[data-fd-framework] .fd-page-actions a,
776
+ #nd-docs-layout[data-fd-framework] .fd-page-actions button,
777
+ #nd-docs-layout[data-fd-framework] .fd-page-action-menu-item,
778
+ #nd-docs-layout[data-fd-framework] .fd-page-action-btn {
779
+ text-decoration: none !important;
780
+ }
781
+
782
+ #nd-docs-layout[data-fd-framework] .fd-page-action-menu-item:hover {
783
+ text-decoration: none !important;
784
+ }
785
+
786
+ #nd-docs-layout[data-fd-framework] .fd-last-modified-below-title {
787
+ margin-top: 0.25rem;
788
+ margin-bottom: 1rem;
789
+ }
790
+
791
+ #nd-docs-layout[data-fd-framework] .fd-page-meta {
792
+ display: flex;
793
+ flex-wrap: wrap;
794
+ align-items: center;
795
+ gap: 0.375rem;
796
+ margin-bottom: 0.75rem;
797
+ }
798
+
799
+ #nd-docs-layout[data-fd-framework] .fd-page-meta-dot {
800
+ display: inline-flex;
801
+ align-items: center;
802
+ justify-content: center;
803
+ font-family: var(--fd-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
804
+ font-size: 0.8rem;
805
+ line-height: 1;
806
+ color: color-mix(in srgb, var(--color-fd-muted-foreground) 78%, transparent);
807
+ }
808
+
809
+ #nd-docs-layout[data-fd-framework] .fd-page-meta-item {
810
+ font-family: var(--fd-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
811
+ font-size: 0.6875rem;
812
+ font-weight: 500;
813
+ letter-spacing: 0;
814
+ text-transform: uppercase;
815
+ color: var(--color-fd-muted-foreground);
816
+ }
817
+
818
+ #nd-docs-layout[data-fd-framework] .fd-feedback {
819
+ margin-top: 2rem;
820
+ margin-bottom: 1.25rem;
821
+ padding-top: 1.25rem;
822
+ border-top: 1px solid var(--color-fd-border);
823
+ }
824
+
825
+ #nd-docs-layout[data-fd-framework] .fd-feedback-content {
826
+ display: flex;
827
+ align-items: center;
828
+ justify-content: space-between;
829
+ gap: 1rem;
830
+ flex-wrap: wrap;
831
+ }
832
+
833
+ #nd-docs-layout[data-fd-framework] .fd-feedback-question {
834
+ margin: 0;
835
+ font-size: 0.9375rem;
836
+ font-weight: 600;
837
+ line-height: 1.5;
838
+ color: var(--color-fd-foreground);
839
+ }
840
+
841
+ #nd-docs-layout[data-fd-framework] .fd-feedback-actions {
842
+ display: inline-flex;
843
+ align-items: center;
844
+ gap: 0.5rem;
845
+ flex-wrap: wrap;
846
+ }
847
+
848
+ #nd-docs-layout[data-fd-framework] .fd-feedback-form {
849
+ display: flex;
850
+ flex-direction: column;
851
+ gap: 0.75rem;
852
+ margin-top: 0.875rem;
853
+ }
854
+
855
+ #nd-docs-layout[data-fd-framework] .fd-feedback-form[hidden],
856
+ #nd-docs-layout[data-fd-framework] .fd-feedback-spinner[hidden],
857
+ #nd-docs-layout[data-fd-framework] .fd-feedback-status[hidden],
858
+ #nd-docs-layout[data-fd-framework] .fd-feedback-submit svg[hidden] {
859
+ display: none !important;
860
+ }
861
+
862
+ #nd-docs-layout[data-fd-framework] .fd-feedback-choice[data-selected="true"] {
863
+ background: var(--color-fd-accent);
864
+ color: var(--color-fd-accent-foreground);
865
+ border-color: color-mix(in srgb, var(--color-fd-primary, currentColor) 65%, transparent);
866
+ }
867
+
868
+ #nd-docs-layout[data-fd-framework] .fd-feedback-input {
869
+ width: 100%;
870
+ min-height: 4.75rem;
871
+ resize: vertical;
872
+ padding: 0.875rem 1rem;
873
+ border: 1px solid
874
+ color-mix(in srgb, var(--color-fd-border) 78%, var(--color-fd-foreground) 22%);
875
+ border-radius: 0.5rem;
876
+ background: var(--color-fd-card, transparent);
877
+ color: var(--color-fd-foreground);
878
+ font: inherit;
879
+ line-height: 1.55;
880
+ outline: none;
881
+ transition:
882
+ border-color 150ms ease,
883
+ box-shadow 150ms ease,
884
+ background-color 150ms ease;
885
+ }
886
+
887
+ #nd-docs-layout[data-fd-framework] .fd-feedback-input::placeholder {
888
+ color: var(--color-fd-muted-foreground);
889
+ }
890
+
891
+ #nd-docs-layout[data-fd-framework] .fd-feedback-input:focus {
892
+ border-color: var(--color-fd-ring, var(--color-fd-primary, currentColor));
893
+ box-shadow: 0 0 0 1px var(--color-fd-ring, var(--color-fd-primary, currentColor));
894
+ }
895
+
896
+ #nd-docs-layout[data-fd-framework] .fd-feedback-submit-row {
897
+ display: flex;
898
+ align-items: center;
899
+ gap: 0.75rem;
900
+ flex-wrap: nowrap;
901
+ min-height: 2rem;
902
+ }
903
+
904
+ #nd-docs-layout[data-fd-framework] .fd-feedback-submit {
905
+ min-width: 7rem;
906
+ padding-inline: 0.875rem;
907
+ justify-content: center;
908
+ }
909
+
910
+ #nd-docs-layout[data-fd-framework] .fd-feedback-submit:disabled {
911
+ cursor: not-allowed;
912
+ opacity: 0.65;
913
+ }
914
+
915
+ #nd-docs-layout[data-fd-framework] .fd-feedback-spinner {
916
+ width: 0.875rem;
917
+ height: 0.875rem;
918
+ border-radius: 9999px;
919
+ border: 2px solid currentColor;
920
+ border-right-color: transparent;
921
+ animation: fd-feedback-spin 0.8s linear infinite;
922
+ }
923
+
924
+ #nd-docs-layout[data-fd-framework] .fd-feedback-status {
925
+ margin: 0 !important;
926
+ font-size: 0.75rem;
927
+ line-height: 1.3;
928
+ color: var(--color-fd-muted-foreground);
929
+ }
930
+
931
+ #nd-docs-layout[data-fd-framework] .fd-feedback-status[data-status="success"] {
932
+ display: inline-flex;
933
+ align-self: center;
934
+ align-items: center;
935
+ gap: 0.4rem;
936
+ min-height: 2rem;
937
+ }
938
+
939
+ #nd-docs-layout[data-fd-framework] .fd-feedback-status[data-status="success"] {
940
+ color: color-mix(in srgb, var(--color-fd-primary) 85%, var(--color-fd-foreground));
941
+ }
942
+
943
+ #nd-docs-layout[data-fd-framework] .fd-feedback-status[data-status="error"] {
944
+ color: var(--color-fd-foreground);
945
+ }
946
+
947
+ @keyframes fd-feedback-spin {
948
+ to {
949
+ transform: rotate(360deg);
950
+ }
951
+ }
952
+
953
+ @media (max-width: 640px) {
954
+ #nd-docs-layout[data-fd-framework] .fd-feedback-content {
955
+ flex-direction: column;
956
+ align-items: flex-start;
957
+ }
958
+
959
+ #nd-docs-layout[data-fd-framework] .fd-feedback-submit-row {
960
+ flex-wrap: wrap;
961
+ }
962
+ }
963
+
964
+ /* --------- Breadcrumb --------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
965
+
966
+ #nd-docs-layout[data-fd-framework] .fd-breadcrumb {
967
+ display: flex;
968
+ align-items: center;
969
+ gap: 0;
970
+ font-size: var(--fd-small-size, 0.8125rem);
971
+ font-family: var(--fd-font-sans, inherit);
972
+ color: var(--color-fd-muted-foreground);
973
+ margin-bottom: 2rem;
974
+ }
975
+
976
+ #nd-docs-layout[data-fd-framework] .fd-breadcrumb-item {
977
+ display: inline-flex;
978
+ align-items: center;
979
+ }
980
+
981
+ #nd-docs-layout[data-fd-framework] .fd-breadcrumb-sep {
982
+ margin: 0 6px;
983
+ opacity: 0.4;
984
+ font-size: var(--fd-small-size, 0.75rem);
985
+ }
986
+
987
+ #nd-docs-layout[data-fd-framework] .fd-breadcrumb-parent {
988
+ opacity: 0.7;
989
+ font-weight: 400;
990
+ }
991
+
992
+ #nd-docs-layout[data-fd-framework] .fd-breadcrumb-link {
993
+ color: inherit;
994
+ text-decoration: none;
995
+ cursor: pointer;
996
+ transition:
997
+ opacity 0.15s,
998
+ color 0.15s;
999
+ }
1000
+
1001
+ #nd-docs-layout[data-fd-framework] .fd-breadcrumb-link:hover {
1002
+ opacity: 1;
1003
+ color: var(--color-fd-foreground);
1004
+ text-decoration: none;
1005
+ }
1006
+
1007
+ #nd-docs-layout[data-fd-framework] .fd-breadcrumb-current {
1008
+ font-weight: 500;
1009
+ color: var(--color-fd-foreground);
1010
+ }
1011
+
1012
+ /* --------- Prompt Cards --------------------------------------------------------------------------------------------------------------------------------------------------------- */
1013
+
1014
+ #nd-docs-layout[data-fd-framework] .fd-prompt {
1015
+ display: flex;
1016
+ flex-direction: column;
1017
+ gap: 0.875rem;
1018
+ margin: 1.25rem 0;
1019
+ padding: 1rem;
1020
+ border: 1px solid var(--color-fd-border);
1021
+ border-radius: 0.75rem;
1022
+ background: color-mix(in srgb, var(--color-fd-card) 78%, transparent);
1023
+ }
1024
+
1025
+ #nd-docs-layout[data-fd-framework] .fd-prompt-header {
1026
+ display: flex;
1027
+ align-items: flex-start;
1028
+ gap: 0.75rem;
1029
+ }
1030
+
1031
+ #nd-docs-layout[data-fd-framework] .fd-prompt-icon,
1032
+ #nd-docs-layout[data-fd-framework] .fd-prompt-action-icon,
1033
+ #nd-docs-layout[data-fd-framework] .fd-prompt-menu-icon {
1034
+ display: inline-flex;
1035
+ align-items: center;
1036
+ justify-content: center;
1037
+ flex-shrink: 0;
1038
+ }
1039
+
1040
+ #nd-docs-layout[data-fd-framework] .fd-prompt-icon {
1041
+ width: 1.75rem;
1042
+ height: 1.75rem;
1043
+ border-radius: 0.5rem;
1044
+ border: 1px solid color-mix(in srgb, var(--color-fd-border) 80%, transparent);
1045
+ background: color-mix(in srgb, var(--color-fd-background) 55%, transparent);
1046
+ color: var(--color-fd-foreground);
1047
+ }
1048
+
1049
+ #nd-docs-layout[data-fd-framework] .fd-prompt-icon svg,
1050
+ #nd-docs-layout[data-fd-framework] .fd-prompt-action-icon svg,
1051
+ #nd-docs-layout[data-fd-framework] .fd-prompt-menu-icon svg {
1052
+ width: 1rem;
1053
+ height: 1rem;
1054
+ }
1055
+
1056
+ #nd-docs-layout[data-fd-framework] .fd-prompt-copy {
1057
+ min-width: 0;
1058
+ }
1059
+
1060
+ #nd-docs-layout[data-fd-framework] .fd-prompt-title {
1061
+ margin: 0;
1062
+ color: var(--color-fd-foreground);
1063
+ font-size: 0.9375rem;
1064
+ font-weight: 600;
1065
+ line-height: 1.35;
1066
+ }
1067
+
1068
+ #nd-docs-layout[data-fd-framework] .fd-prompt-description {
1069
+ margin: 0.25rem 0 0;
1070
+ color: var(--color-fd-muted-foreground);
1071
+ font-size: 0.875rem;
1072
+ line-height: 1.55;
1073
+ }
1074
+
1075
+ #nd-docs-layout[data-fd-framework] .fd-prompt-body {
1076
+ margin: 0;
1077
+ padding: 0.875rem 1rem;
1078
+ border-radius: 0.625rem;
1079
+ border: 1px solid color-mix(in srgb, var(--color-fd-border) 82%, transparent);
1080
+ background: color-mix(in srgb, var(--color-fd-background) 45%, transparent);
1081
+ overflow-x: auto;
1082
+ }
1083
+
1084
+ #nd-docs-layout[data-fd-framework] .fd-prompt-body > pre.fd-prompt-code {
1085
+ margin: 0;
1086
+ padding: 0 !important;
1087
+ border: 0 !important;
1088
+ border-radius: 0 !important;
1089
+ background: transparent !important;
1090
+ box-shadow: none !important;
1091
+ color: var(--color-fd-foreground);
1092
+ font-size: 0.875rem;
1093
+ line-height: 1.65;
1094
+ white-space: pre-wrap;
1095
+ word-break: break-word;
1096
+ font-family: var(
1097
+ --fd-font-mono,
1098
+ ui-monospace,
1099
+ "SF Mono",
1100
+ SFMono-Regular,
1101
+ Menlo,
1102
+ Consolas,
1103
+ monospace
1104
+ );
1105
+ }
1106
+
1107
+ #nd-docs-layout[data-fd-framework] .fd-prompt-actions {
1108
+ display: flex;
1109
+ flex-wrap: wrap;
1110
+ gap: 0.5rem;
1111
+ align-items: center;
1112
+ justify-content: flex-end;
1113
+ }
1114
+
1115
+ #nd-docs-layout[data-fd-framework] .fd-prompt-action-btn {
1116
+ display: inline-flex;
1117
+ align-items: center;
1118
+ gap: 0.4375rem;
1119
+ min-height: 2rem;
1120
+ padding: 0.375rem 0.75rem;
1121
+ border: 1px solid var(--color-fd-border);
1122
+ border-radius: 0.375rem;
1123
+ background: var(--color-fd-secondary);
1124
+ color: var(--color-fd-muted-foreground);
1125
+ font-size: 0.8125rem;
1126
+ font-weight: 500;
1127
+ line-height: 1;
1128
+ cursor: pointer;
1129
+ transition: color 0.15s, background 0.15s, border-color 0.15s;
1130
+ }
1131
+
1132
+ #nd-docs-layout[data-fd-framework] .fd-prompt-action-btn:hover {
1133
+ color: var(--color-fd-accent-foreground);
1134
+ background: var(--color-fd-accent);
1135
+ }
1136
+
1137
+ #nd-docs-layout[data-fd-framework] .fd-prompt-action-btn[data-copied="true"] {
1138
+ color: var(--color-fd-foreground);
1139
+ }
1140
+
1141
+ #nd-docs-layout[data-fd-framework] .fd-prompt-action-icon-copied[hidden] {
1142
+ display: none !important;
1143
+ }
1144
+
1145
+ #nd-docs-layout[data-fd-framework] .fd-prompt-dropdown {
1146
+ position: relative;
1147
+ }
1148
+
1149
+ #nd-docs-layout[data-fd-framework] .fd-prompt-menu {
1150
+ position: absolute;
1151
+ top: calc(100% + 0.375rem);
1152
+ right: 0;
1153
+ z-index: 50;
1154
+ min-width: 220px;
1155
+ padding: 0.375rem;
1156
+ background: var(--color-fd-popover, var(--color-fd-background));
1157
+ border: 1px solid var(--color-fd-border);
1158
+ border-radius: 0.5rem;
1159
+ box-shadow: 0 4px 24px hsl(0 0% 0% / 0.15);
1160
+ display: flex;
1161
+ flex-direction: column;
1162
+ gap: 0.125rem;
1163
+ }
1164
+
1165
+ #nd-docs-layout[data-fd-framework] .fd-prompt-menu[hidden] {
1166
+ display: none !important;
1167
+ }
1168
+
1169
+ #nd-docs-layout[data-fd-framework] .fd-prompt-menu-item {
1170
+ display: flex;
1171
+ align-items: center;
1172
+ gap: 0.5rem;
1173
+ width: 100%;
1174
+ padding: 0.35rem 0.625rem;
1175
+ font-size: 0.8125rem;
1176
+ font-weight: 400;
1177
+ color: var(--color-fd-foreground);
1178
+ background: transparent;
1179
+ border: none;
1180
+ border-radius: 0.25rem;
1181
+ cursor: pointer;
1182
+ text-align: left;
1183
+ transition: background 0.1s, color 0.1s;
1184
+ }
1185
+
1186
+ #nd-docs-layout[data-fd-framework] .fd-prompt-menu-item:hover {
1187
+ background: var(--color-fd-accent);
1188
+ color: var(--color-fd-accent-foreground);
1189
+ }
1190
+
1191
+ #nd-docs-layout[data-fd-framework] .fd-prompt-menu-label {
1192
+ flex: 1;
1193
+ }
1194
+
1195
+ /* --------- Theme Toggle --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
1196
+
1197
+ #nd-docs-layout[data-fd-framework] .fd-theme-toggle {
1198
+ display: inline-flex;
1199
+ align-items: center;
1200
+ justify-content: center;
1201
+ width: 32px;
1202
+ height: 32px;
1203
+ background: transparent;
1204
+ border: 1px solid var(--color-fd-border);
1205
+ border-radius: 8px;
1206
+ color: var(--color-fd-muted-foreground);
1207
+ cursor: pointer;
1208
+ transition:
1209
+ color 0.15s,
1210
+ background 0.15s;
1211
+ }
1212
+
1213
+ #nd-docs-layout[data-fd-framework] .fd-theme-toggle:hover {
1214
+ color: var(--color-fd-foreground);
1215
+ background: var(--color-fd-accent);
1216
+ }
1217
+
1218
+ /* --------- Search Dialog (matching fumadocs Cmd+K) ------------------------------------------------------------------------------ */
1219
+
1220
+ #nd-docs-layout[data-fd-framework] .fd-search-overlay {
1221
+ position: fixed;
1222
+ inset: 0;
1223
+ z-index: 100;
1224
+ display: flex;
1225
+ align-items: flex-start;
1226
+ justify-content: center;
1227
+ padding-top: 20vh;
1228
+ background: rgba(0, 0, 0, 0.2);
1229
+ backdrop-filter: blur(4px);
1230
+ animation: fd-fade-in 0.12s ease-out;
1231
+ }
1232
+
1233
+ #nd-docs-layout[data-fd-framework] .fd-search-dialog {
1234
+ width: 90%;
1235
+ max-width: 540px;
1236
+ background: var(--color-fd-popover);
1237
+ border: 1px solid var(--color-fd-border);
1238
+ border-radius: 12px;
1239
+ box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
1240
+ overflow: hidden;
1241
+ animation: fd-slide-up 0.15s ease-out;
1242
+ }
1243
+
1244
+ #nd-docs-layout[data-fd-framework] .fd-search-input-wrap {
1245
+ display: flex;
1246
+ align-items: center;
1247
+ gap: 10px;
1248
+ padding: 12px 16px;
1249
+ border-bottom: 1px solid var(--color-fd-border);
1250
+ }
1251
+
1252
+ #nd-docs-layout[data-fd-framework] .fd-search-input-wrap svg {
1253
+ color: var(--color-fd-muted-foreground);
1254
+ flex-shrink: 0;
1255
+ }
1256
+
1257
+ #nd-docs-layout[data-fd-framework] .fd-search-input {
1258
+ flex: 1;
1259
+ background: transparent;
1260
+ border: none;
1261
+ outline: none;
1262
+ font-size: 15px;
1263
+ color: var(--color-fd-foreground);
1264
+ font-family: inherit;
1265
+ }
1266
+
1267
+ #nd-docs-layout[data-fd-framework] .fd-search-input::placeholder {
1268
+ color: var(--color-fd-muted-foreground);
1269
+ }
1270
+
1271
+ #nd-docs-layout[data-fd-framework] .fd-search-kbd {
1272
+ font-size: 11px;
1273
+ padding: 2px 6px;
1274
+ border: 1px solid var(--color-fd-border);
1275
+ border-radius: 4px;
1276
+ color: var(--color-fd-muted-foreground);
1277
+ font-family: inherit;
1278
+ background: var(--color-fd-background);
1279
+ }
1280
+
1281
+ #nd-docs-layout[data-fd-framework] .fd-search-results {
1282
+ max-height: 360px;
1283
+ overflow-y: auto;
1284
+ padding: 8px;
1285
+ }
1286
+
1287
+ #nd-docs-layout[data-fd-framework] .fd-search-empty {
1288
+ padding: 32px;
1289
+ text-align: center;
1290
+ color: var(--color-fd-muted-foreground);
1291
+ font-size: 14px;
1292
+ }
1293
+
1294
+ #nd-docs-layout[data-fd-framework] .fd-search-result {
1295
+ display: block;
1296
+ width: 100%;
1297
+ text-align: left;
1298
+ padding: 10px 12px;
1299
+ background: transparent;
1300
+ border: none;
1301
+ border-radius: 8px;
1302
+ cursor: pointer;
1303
+ transition: background 0.1s;
1304
+ font-family: inherit;
1305
+ color: var(--color-fd-foreground);
1306
+ }
1307
+
1308
+ #nd-docs-layout[data-fd-framework] .fd-search-result:hover {
1309
+ background: var(--color-fd-accent);
1310
+ }
1311
+
1312
+ #nd-docs-layout[data-fd-framework] .fd-search-result-title {
1313
+ display: block;
1314
+ font-size: 14px;
1315
+ font-weight: 500;
1316
+ }
1317
+
1318
+ #nd-docs-layout[data-fd-framework] .fd-search-result-url {
1319
+ display: block;
1320
+ font-size: 12px;
1321
+ color: var(--color-fd-muted-foreground);
1322
+ margin-top: 2px;
1323
+ }
1324
+
1325
+ /* --------- Prose / Markdown content (matching fumadocs) --------------------------------------------------------------- */
1326
+
1327
+ #nd-docs-layout[data-fd-framework] .fd-page-body {
1328
+ color: var(--color-fd-foreground);
1329
+ line-height: 1.75;
1330
+ font-size: 15px;
1331
+ flex: 1;
1332
+ }
1333
+
1334
+ #nd-docs-layout[data-fd-framework] .fd-page-body a {
1335
+ color: var(--color-fd-foreground);
1336
+ font-weight: 500;
1337
+ text-decoration: underline;
1338
+ text-underline-offset: 3px;
1339
+ text-decoration-color: var(--color-fd-primary);
1340
+ }
1341
+
1342
+ #nd-docs-layout[data-fd-framework] .fd-page-body a:hover {
1343
+ opacity: 0.8;
1344
+ }
1345
+
1346
+ #nd-docs-layout[data-fd-framework] .fd-hover-link {
1347
+ position: relative;
1348
+ display: inline-block;
1349
+ vertical-align: baseline;
1350
+ max-width: 100%;
1351
+ }
1352
+
1353
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-trigger {
1354
+ display: inline !important;
1355
+ border: none;
1356
+ background: transparent;
1357
+ padding: 0;
1358
+ margin: 0;
1359
+ color: var(--color-fd-foreground);
1360
+ cursor: pointer;
1361
+ text-decoration: underline;
1362
+ text-decoration-style: dashed;
1363
+ text-decoration-thickness: 0.08em;
1364
+ text-underline-offset: 0.22em;
1365
+ text-decoration-color: color-mix(in srgb, var(--color-fd-foreground) 46%, transparent);
1366
+ font: inherit;
1367
+ line-height: inherit;
1368
+ vertical-align: baseline;
1369
+ appearance: none;
1370
+ transition: text-decoration-color 180ms ease, opacity 180ms ease;
1371
+ }
1372
+
1373
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-trigger:hover,
1374
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-trigger:focus-visible,
1375
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-open > .fd-hover-link-trigger {
1376
+ text-decoration-color: color-mix(in srgb, var(--color-fd-foreground) 68%, transparent);
1377
+ }
1378
+
1379
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-trigger:focus-visible {
1380
+ outline: none;
1381
+ }
1382
+
1383
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-popover {
1384
+ --fd-hover-link-rest-x: -50%;
1385
+ --fd-hover-link-rest-y: 8px;
1386
+ --fd-hover-link-open-x: -50%;
1387
+ --fd-hover-link-open-y: 0;
1388
+ position: absolute;
1389
+ top: calc(100% + var(--fd-hover-link-side-offset, 12px));
1390
+ left: 50%;
1391
+ z-index: 40;
1392
+ width: min(22rem, calc(100vw - 2rem));
1393
+ max-width: min(22rem, calc(100vw - 2rem));
1394
+ opacity: 0;
1395
+ visibility: hidden;
1396
+ pointer-events: none;
1397
+ transform: translate3d(var(--fd-hover-link-rest-x), var(--fd-hover-link-rest-y), 0);
1398
+ transition: opacity 180ms ease, transform 180ms ease, visibility 180ms linear;
1399
+ }
1400
+
1401
+ #nd-docs-layout[data-fd-framework] .fd-hover-link[data-align="start"] > .fd-hover-link-popover {
1402
+ left: 0;
1403
+ --fd-hover-link-rest-x: 0;
1404
+ --fd-hover-link-open-x: 0;
1405
+ }
1406
+
1407
+ #nd-docs-layout[data-fd-framework] .fd-hover-link[data-align="end"] > .fd-hover-link-popover {
1408
+ left: auto;
1409
+ right: 0;
1410
+ --fd-hover-link-rest-x: 0;
1411
+ --fd-hover-link-open-x: 0;
1412
+ }
1413
+
1414
+ #nd-docs-layout[data-fd-framework] .fd-hover-link[data-side="top"] > .fd-hover-link-popover {
1415
+ top: auto;
1416
+ bottom: calc(100% + var(--fd-hover-link-side-offset, 12px));
1417
+ --fd-hover-link-rest-y: -8px;
1418
+ --fd-hover-link-open-y: 0;
1419
+ }
1420
+
1421
+ #nd-docs-layout[data-fd-framework] .fd-hover-link[data-side="right"] > .fd-hover-link-popover {
1422
+ top: 50%;
1423
+ left: calc(100% + var(--fd-hover-link-side-offset, 12px));
1424
+ right: auto;
1425
+ --fd-hover-link-rest-x: 8px;
1426
+ --fd-hover-link-rest-y: -50%;
1427
+ --fd-hover-link-open-x: 0;
1428
+ --fd-hover-link-open-y: -50%;
1429
+ }
1430
+
1431
+ #nd-docs-layout[data-fd-framework] .fd-hover-link[data-side="right"][data-align="start"] > .fd-hover-link-popover {
1432
+ top: 0;
1433
+ --fd-hover-link-rest-y: 0;
1434
+ --fd-hover-link-open-y: 0;
1435
+ }
1436
+
1437
+ #nd-docs-layout[data-fd-framework] .fd-hover-link[data-side="right"][data-align="end"] > .fd-hover-link-popover {
1438
+ top: auto;
1439
+ bottom: 0;
1440
+ --fd-hover-link-rest-y: 0;
1441
+ --fd-hover-link-open-y: 0;
1442
+ }
1443
+
1444
+ #nd-docs-layout[data-fd-framework] .fd-hover-link[data-side="left"] > .fd-hover-link-popover {
1445
+ top: 50%;
1446
+ left: auto;
1447
+ right: calc(100% + var(--fd-hover-link-side-offset, 12px));
1448
+ --fd-hover-link-rest-x: -8px;
1449
+ --fd-hover-link-rest-y: -50%;
1450
+ --fd-hover-link-open-x: 0;
1451
+ --fd-hover-link-open-y: -50%;
1452
+ }
1453
+
1454
+ #nd-docs-layout[data-fd-framework] .fd-hover-link[data-side="left"][data-align="start"] > .fd-hover-link-popover {
1455
+ top: 0;
1456
+ --fd-hover-link-rest-y: 0;
1457
+ --fd-hover-link-open-y: 0;
1458
+ }
1459
+
1460
+ #nd-docs-layout[data-fd-framework] .fd-hover-link[data-side="left"][data-align="end"] > .fd-hover-link-popover {
1461
+ top: auto;
1462
+ bottom: 0;
1463
+ --fd-hover-link-rest-y: 0;
1464
+ --fd-hover-link-open-y: 0;
1465
+ }
1466
+
1467
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-open > .fd-hover-link-popover {
1468
+ opacity: 1;
1469
+ visibility: visible;
1470
+ pointer-events: auto;
1471
+ transform: translate3d(var(--fd-hover-link-open-x), var(--fd-hover-link-open-y), 0);
1472
+ }
1473
+
1474
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-card {
1475
+ display: flex;
1476
+ flex-direction: column;
1477
+ gap: 0.75rem;
1478
+ width: 100%;
1479
+ border-radius: calc(var(--radius, 0.75rem) + 2px);
1480
+ border: 1px solid color-mix(in srgb, var(--color-fd-border) 88%, transparent);
1481
+ background: var(--color-fd-popover, var(--color-fd-background));
1482
+ color: var(--color-fd-popover-foreground, var(--color-fd-foreground));
1483
+ padding: 0.95rem 1rem;
1484
+ box-shadow: 0 20px 45px color-mix(in srgb, var(--color-fd-background) 78%, transparent);
1485
+ backdrop-filter: blur(14px);
1486
+ }
1487
+
1488
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-body {
1489
+ display: flex;
1490
+ flex-direction: column;
1491
+ gap: 0.35rem;
1492
+ }
1493
+
1494
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-preview-label {
1495
+ font-size: 0.68rem;
1496
+ text-transform: uppercase;
1497
+ letter-spacing: 0.1em;
1498
+ font-family: var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace));
1499
+ color: color-mix(in srgb, var(--color-fd-popover-foreground, var(--color-fd-foreground)) 55%, transparent);
1500
+ }
1501
+
1502
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-title,
1503
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-cta {
1504
+ text-decoration: none !important;
1505
+ }
1506
+
1507
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-title {
1508
+ color: var(--color-fd-popover-foreground, var(--color-fd-foreground));
1509
+ font-size: 1rem;
1510
+ font-weight: 600 !important;
1511
+ line-height: 1.3;
1512
+ }
1513
+
1514
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-title:hover,
1515
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-cta:hover {
1516
+ opacity: 1;
1517
+ }
1518
+
1519
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-description {
1520
+ font-size: 0.92rem;
1521
+ line-height: 1.6;
1522
+ color: color-mix(in srgb, var(--color-fd-popover-foreground, var(--color-fd-foreground)) 74%, transparent);
1523
+ }
1524
+
1525
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-footer {
1526
+ display: flex;
1527
+ align-items: center;
1528
+ justify-content: space-between;
1529
+ gap: 0.75rem;
1530
+ padding-top: 0.25rem;
1531
+ border-top: 1px solid color-mix(in srgb, var(--color-fd-border) 72%, transparent);
1532
+ }
1533
+
1534
+ #nd-docs-layout[data-fd-framework] .fd-hover-link-cta {
1535
+ display: inline-flex !important;
1536
+ align-items: center;
1537
+ gap: 0.4rem;
1538
+ color: var(--color-fd-primary);
1539
+ font-size: 0.8rem;
1540
+ font-weight: 600 !important;
1541
+ text-transform: uppercase;
1542
+ letter-spacing: 0.08em;
1543
+ font-family: var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace));
1544
+ }
1545
+
1546
+ #nd-docs-layout[data-fd-framework] .fd-page-body h1 {
1547
+ font-size: var(--fd-h1-size, 2.25rem);
1548
+ font-weight: var(--fd-h1-weight, 700);
1549
+ line-height: var(--fd-h1-line-height, 1.2);
1550
+ letter-spacing: var(--fd-h1-letter-spacing, -0.025em);
1551
+ margin: 0 0 16px;
1552
+ scroll-margin-top: 80px;
1553
+ }
1554
+
1555
+ #nd-docs-layout[data-fd-framework] .fd-page-body h2 {
1556
+ font-size: var(--fd-h2-size, 1.5rem);
1557
+ font-weight: var(--fd-h2-weight, 600);
1558
+ line-height: var(--fd-h2-line-height, 1.3);
1559
+ letter-spacing: var(--fd-h2-letter-spacing, -0.015em);
1560
+ margin: 40px 0 16px;
1561
+ padding-bottom: 8px;
1562
+ border-bottom: 1px solid var(--color-fd-border);
1563
+ scroll-margin-top: 80px;
1564
+ }
1565
+
1566
+ #nd-docs-layout[data-fd-framework] .fd-page-body h3 {
1567
+ font-size: var(--fd-h3-size, 1.25rem);
1568
+ font-weight: var(--fd-h3-weight, 600);
1569
+ line-height: var(--fd-h3-line-height, 1.4);
1570
+ margin: 32px 0 12px;
1571
+ scroll-margin-top: 80px;
1572
+ }
1573
+
1574
+ #nd-docs-layout[data-fd-framework] .fd-page-body h4 {
1575
+ font-size: var(--fd-h4-size, 1.125rem);
1576
+ font-weight: var(--fd-h4-weight, 600);
1577
+ line-height: var(--fd-h4-line-height, 1.4);
1578
+ margin: 24px 0 8px;
1579
+ scroll-margin-top: 80px;
1580
+ }
1581
+
1582
+ #nd-docs-layout[data-fd-framework] .fd-page-body p {
1583
+ margin: 0 0 16px;
1584
+ font-size: var(--fd-body-size, 1rem);
1585
+ font-weight: var(--fd-body-weight, 400);
1586
+ line-height: var(--fd-body-line-height, 1.75);
1587
+ }
1588
+
1589
+ #nd-docs-layout[data-fd-framework] .fd-page-body ul,
1590
+ #nd-docs-layout[data-fd-framework] .fd-page-body ol {
1591
+ margin: 0 0 16px;
1592
+ padding-left: 24px;
1593
+ }
1594
+
1595
+ #nd-docs-layout[data-fd-framework] .fd-page-body ul {
1596
+ list-style: disc;
1597
+ }
1598
+
1599
+ #nd-docs-layout[data-fd-framework] .fd-page-body ol {
1600
+ list-style: decimal;
1601
+ }
1602
+
1603
+ #nd-docs-layout[data-fd-framework] .fd-page-body li {
1604
+ margin: 4px 0;
1605
+ font-size: var(--fd-body-size, 1rem);
1606
+ font-weight: var(--fd-body-weight, 400);
1607
+ line-height: var(--fd-body-line-height, 1.75);
1608
+ }
1609
+
1610
+ #nd-docs-layout[data-fd-framework] .fd-page-body li::marker {
1611
+ color: var(--color-fd-muted-foreground);
1612
+ }
1613
+
1614
+ #nd-docs-layout[data-fd-framework] .fd-page-body strong {
1615
+ font-weight: 600;
1616
+ color: var(--color-fd-foreground);
1617
+ }
1618
+
1619
+ #nd-docs-layout[data-fd-framework] .fd-page-body hr {
1620
+ border: none;
1621
+ border-top: 1px solid var(--color-fd-border);
1622
+ margin: 32px 0;
1623
+ }
1624
+
1625
+ #nd-docs-layout[data-fd-framework] .fd-page-body blockquote {
1626
+ border-left: 3px solid var(--color-fd-border);
1627
+ padding: 8px 16px;
1628
+ margin: 16px 0;
1629
+ color: var(--color-fd-muted-foreground);
1630
+ }
1631
+
1632
+ #nd-docs-layout[data-fd-framework] .fd-page-body code {
1633
+ font-size: 0.875em;
1634
+ padding: 2px 5px;
1635
+ background: var(--color-fd-secondary);
1636
+ border: 1px solid var(--color-fd-border);
1637
+ border-radius: 4px;
1638
+ color: var(--color-fd-foreground);
1639
+ }
1640
+
1641
+ #nd-docs-layout[data-fd-framework] .fd-page-body pre {
1642
+ margin: 16px 0;
1643
+ padding: 14px 16px;
1644
+ background: var(--color-fd-card);
1645
+ border: 1px solid var(--color-fd-border);
1646
+ border-radius: 8px;
1647
+ overflow-x: auto;
1648
+ font-size: 13px;
1649
+ line-height: 1.5;
1650
+ position: relative;
1651
+ }
1652
+
1653
+ #nd-docs-layout[data-fd-framework] .fd-page-body pre code {
1654
+ background: transparent;
1655
+ border: none;
1656
+ padding: 0;
1657
+ font-size: inherit;
1658
+ border-radius: 0;
1659
+ color: inherit;
1660
+ }
1661
+
1662
+ /* Shiki dual-theme: light uses inline styles, dark uses --shiki-dark vars */
1663
+ #nd-docs-layout[data-fd-framework] .fd-page-body pre.shiki {
1664
+ background-color: var(--color-fd-card) !important;
1665
+ }
1666
+
1667
+ #nd-docs-layout[data-fd-framework] .fd-page-body pre.shiki code {
1668
+ counter-reset: line;
1669
+ }
1670
+
1671
+ html.dark #nd-docs-layout[data-fd-framework] .shiki,
1672
+ html.dark #nd-docs-layout[data-fd-framework] .shiki span {
1673
+ color: var(--shiki-dark) !important;
1674
+ background-color: transparent !important;
1675
+ }
1676
+
1677
+ html.dark #nd-docs-layout[data-fd-framework] pre.shiki {
1678
+ background-color: var(--color-fd-card) !important;
1679
+ }
1680
+
1681
+ /* --------- Code block wrapper + copy button ------------------------------------------------------------------------------------------------------ */
1682
+
1683
+ #nd-docs-layout[data-fd-framework] .fd-codeblock {
1684
+ position: relative;
1685
+ margin: 16px 0;
1686
+ }
1687
+
1688
+ #nd-docs-layout[data-fd-framework] .fd-codeblock pre {
1689
+ margin: 0;
1690
+ }
1691
+
1692
+ #nd-docs-layout[data-fd-framework] .fd-codeblock-title {
1693
+ display: flex;
1694
+ align-items: center;
1695
+ gap: 8px;
1696
+ padding: 8px 14px;
1697
+ font-size: 13px;
1698
+ font-weight: 500;
1699
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
1700
+ color: var(--color-fd-muted-foreground, #71717a);
1701
+ background: var(--color-fd-secondary, rgba(255, 255, 255, 0.04));
1702
+ border: 1px solid var(--color-fd-border);
1703
+ border-bottom: none;
1704
+ border-radius: var(--radius, 12px) var(--radius, 12px) 0 0;
1705
+ }
1706
+
1707
+ #nd-docs-layout[data-fd-framework] .fd-codeblock-title + .fd-copy-btn ~ pre {
1708
+ border-top-left-radius: 0 !important;
1709
+ border-top-right-radius: 0 !important;
1710
+ }
1711
+
1712
+ #nd-docs-layout[data-fd-framework] .fd-codeblock:has(.fd-codeblock-title) pre {
1713
+ border-top-left-radius: 0 !important;
1714
+ border-top-right-radius: 0 !important;
1715
+ }
1716
+
1717
+ #nd-docs-layout[data-fd-framework] .fd-copy-btn {
1718
+ position: absolute;
1719
+ top: 4px;
1720
+ right: 4px;
1721
+ z-index: 2;
1722
+ display: inline-flex;
1723
+ align-items: center;
1724
+ justify-content: center;
1725
+ width: 32px;
1726
+ height: 32px;
1727
+ padding: 0;
1728
+ background: var(--color-fd-secondary);
1729
+ border: 1px solid var(--color-fd-border);
1730
+ border-radius: 6px;
1731
+ color: var(--color-fd-muted-foreground);
1732
+ cursor: pointer;
1733
+ opacity: 0;
1734
+ transition:
1735
+ opacity 0.15s,
1736
+ color 0.15s,
1737
+ background 0.15s;
1738
+ }
1739
+
1740
+ #nd-docs-layout[data-fd-framework] .fd-codeblock:hover .fd-copy-btn {
1741
+ opacity: 1;
1742
+ }
1743
+
1744
+ #nd-docs-layout[data-fd-framework] .fd-copy-btn:hover {
1745
+ color: var(--color-fd-foreground);
1746
+ background: var(--color-fd-accent);
1747
+ }
1748
+
1749
+ #nd-docs-layout[data-fd-framework] .fd-copy-btn-copied {
1750
+ color: hsl(142, 71%, 45%) !important;
1751
+ opacity: 1 !important;
1752
+ }
1753
+
1754
+ /* --------- Tabs ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
1755
+
1756
+ #nd-docs-layout[data-fd-framework] .fd-tabs {
1757
+ margin: 16px 0;
1758
+ border: 1px solid var(--color-fd-border);
1759
+ border-radius: 12px;
1760
+ overflow: hidden;
1761
+ background: var(--color-fd-card);
1762
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
1763
+ }
1764
+
1765
+ #nd-docs-layout[data-fd-framework] .fd-tabs-list {
1766
+ display: flex;
1767
+ border-bottom: 1px solid var(--color-fd-border);
1768
+ background: transparent;
1769
+ overflow-x: auto;
1770
+ }
1771
+
1772
+ #nd-docs-layout[data-fd-framework] .fd-tab-trigger {
1773
+ padding: 8px 14px;
1774
+ font-size: 13px;
1775
+ font-weight: 500;
1776
+ font-family: inherit;
1777
+ color: var(--color-fd-muted-foreground);
1778
+ background: transparent;
1779
+ border: none;
1780
+ border-bottom: 2px solid transparent;
1781
+ cursor: pointer;
1782
+ transition:
1783
+ color 0.15s,
1784
+ border-color 0.15s;
1785
+ white-space: nowrap;
1786
+ }
1787
+
1788
+ #nd-docs-layout[data-fd-framework] .fd-tab-trigger:hover {
1789
+ color: var(--color-fd-foreground);
1790
+ }
1791
+
1792
+ #nd-docs-layout[data-fd-framework] .fd-tab-trigger.fd-tab-active {
1793
+ color: var(--color-fd-foreground);
1794
+ font-weight: 600;
1795
+ border-bottom-color: var(--color-fd-primary);
1796
+ }
1797
+
1798
+ #nd-docs-layout[data-fd-framework] .fd-tab-panel {
1799
+ display: none;
1800
+ }
1801
+
1802
+ #nd-docs-layout[data-fd-framework] .fd-tab-panel-active {
1803
+ display: block;
1804
+ }
1805
+
1806
+ #nd-docs-layout[data-fd-framework] .fd-tab-panel .fd-codeblock {
1807
+ margin: 0;
1808
+ }
1809
+
1810
+ #nd-docs-layout[data-fd-framework] .fd-tab-panel .fd-codeblock pre {
1811
+ border: none;
1812
+ border-radius: 0;
1813
+ margin: 0;
1814
+ background: transparent !important;
1815
+ }
1816
+
1817
+ #nd-docs-layout[data-fd-framework] .fd-tab-panel .fd-copy-btn {
1818
+ top: 6px;
1819
+ right: 6px;
1820
+ }
1821
+
1822
+ #nd-docs-layout[data-fd-framework] .fd-page-body .fd-table-wrapper {
1823
+ margin: 0 0 24px;
1824
+ overflow-x: auto;
1825
+ border: 0;
1826
+ border-radius: 0;
1827
+ }
1828
+
1829
+ #nd-docs-layout[data-fd-framework] .fd-page-body table {
1830
+ width: 100%;
1831
+ table-layout: auto;
1832
+ border-collapse: separate;
1833
+ border-spacing: 0;
1834
+ overflow: hidden;
1835
+ border: 1px solid var(--color-fd-border);
1836
+ border-radius: var(--radius-lg, 8px);
1837
+ background: var(--color-fd-card);
1838
+ font-size: 0.875em;
1839
+ line-height: 1.7142857;
1840
+ }
1841
+
1842
+ #nd-docs-layout[data-fd-framework] .fd-page-body th {
1843
+ padding: 10px;
1844
+ text-align: left;
1845
+ font-weight: 600;
1846
+ font-size: 0.875rem;
1847
+ color: var(--color-fd-foreground);
1848
+ background: var(--color-fd-muted);
1849
+ border-inline-start: 1px solid var(--color-fd-border);
1850
+ border-bottom: 1px solid var(--color-fd-border);
1851
+ white-space: nowrap;
1852
+ }
1853
+
1854
+ #nd-docs-layout[data-fd-framework] .fd-page-body th:first-child {
1855
+ border-inline-start: none;
1856
+ }
1857
+
1858
+ #nd-docs-layout[data-fd-framework] .fd-page-body td {
1859
+ padding: 10px;
1860
+ text-align: left;
1861
+ border-inline-start: 1px solid var(--color-fd-border);
1862
+ border-bottom: 1px solid var(--color-fd-border);
1863
+ color: var(--color-fd-foreground);
1864
+ }
1865
+
1866
+ #nd-docs-layout[data-fd-framework] .fd-page-body td:first-child {
1867
+ border-inline-start: none;
1868
+ }
1869
+
1870
+ #nd-docs-layout[data-fd-framework] .fd-page-body tbody tr:last-child td {
1871
+ border-bottom: none;
1872
+ }
1873
+
1874
+ #nd-docs-layout[data-fd-framework] .fd-page-body td code {
1875
+ font-size: 12px;
1876
+ padding: 1px 5px;
1877
+ background: var(--color-fd-secondary);
1878
+ border: 1px solid var(--color-fd-border);
1879
+ border-radius: 4px;
1880
+ white-space: nowrap;
1881
+ }
1882
+
1883
+ #nd-docs-layout[data-fd-framework] .fd-page-body img {
1884
+ max-width: 100%;
1885
+ border-radius: 8px;
1886
+ margin: 16px 0;
1887
+ }
1888
+
1889
+ /* --------- Animations --------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
1890
+
1891
+ #nd-docs-layout[data-fd-framework] .fd-toc-empty {
1892
+ font-size: 13px;
1893
+ color: var(--color-fd-muted-foreground);
1894
+ padding: 4px 0;
1895
+ }
1896
+
1897
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-folder-label {
1898
+ display: flex;
1899
+ align-items: center;
1900
+ gap: 8px;
1901
+ }
1902
+
1903
+ @keyframes fd-fade-in {
1904
+ from {
1905
+ opacity: 0;
1906
+ }
1907
+ to {
1908
+ opacity: 1;
1909
+ }
1910
+ }
1911
+
1912
+ @keyframes fd-slide-up {
1913
+ from {
1914
+ opacity: 0;
1915
+ transform: translateY(8px) scale(0.98);
1916
+ }
1917
+ to {
1918
+ opacity: 1;
1919
+ transform: translateY(0) scale(1);
1920
+ }
1921
+ }
1922
+
1923
+ /* --------- Callout / Admonition ------------------------------------------------------------------------------------------------------------------------------------ */
1924
+
1925
+ #nd-docs-layout[data-fd-framework] .fd-callout {
1926
+ position: relative;
1927
+ display: flex;
1928
+ gap: 10px;
1929
+ margin: 16px 0;
1930
+ padding: 12px 16px;
1931
+ border: 1px solid var(--color-fd-border);
1932
+ border-radius: 8px;
1933
+ background: var(--color-fd-card);
1934
+ font-size: 14px;
1935
+ line-height: 1.6;
1936
+ overflow: hidden;
1937
+ }
1938
+
1939
+ #nd-docs-layout[data-fd-framework] .fd-callout-indicator {
1940
+ position: absolute;
1941
+ left: 0;
1942
+ top: 0;
1943
+ bottom: 0;
1944
+ width: 3px;
1945
+ border-radius: 8px 0 0 8px;
1946
+ }
1947
+
1948
+ #nd-docs-layout[data-fd-framework] .fd-callout-note .fd-callout-indicator {
1949
+ background: hsl(221, 83%, 53%);
1950
+ }
1951
+ #nd-docs-layout[data-fd-framework] .fd-callout-warning .fd-callout-indicator {
1952
+ background: hsl(38, 92%, 50%);
1953
+ }
1954
+ #nd-docs-layout[data-fd-framework] .fd-callout-tip .fd-callout-indicator {
1955
+ background: hsl(142, 71%, 45%);
1956
+ }
1957
+ #nd-docs-layout[data-fd-framework] .fd-callout-important .fd-callout-indicator {
1958
+ background: hsl(262, 83%, 58%);
1959
+ }
1960
+ #nd-docs-layout[data-fd-framework] .fd-callout-caution .fd-callout-indicator {
1961
+ background: hsl(0, 72%, 51%);
1962
+ }
1963
+
1964
+ #nd-docs-layout[data-fd-framework] .fd-callout-icon {
1965
+ flex-shrink: 0;
1966
+ margin-top: 2px;
1967
+ }
1968
+
1969
+ #nd-docs-layout[data-fd-framework] .fd-callout-note .fd-callout-icon {
1970
+ color: hsl(221, 83%, 53%);
1971
+ }
1972
+ #nd-docs-layout[data-fd-framework] .fd-callout-warning .fd-callout-icon {
1973
+ color: hsl(38, 92%, 50%);
1974
+ }
1975
+ #nd-docs-layout[data-fd-framework] .fd-callout-tip .fd-callout-icon {
1976
+ color: hsl(142, 71%, 45%);
1977
+ }
1978
+ #nd-docs-layout[data-fd-framework] .fd-callout-important .fd-callout-icon {
1979
+ color: hsl(262, 83%, 58%);
1980
+ }
1981
+ #nd-docs-layout[data-fd-framework] .fd-callout-caution .fd-callout-icon {
1982
+ color: hsl(0, 72%, 51%);
1983
+ }
1984
+
1985
+ #nd-docs-layout[data-fd-framework] .fd-callout-content {
1986
+ flex: 1;
1987
+ min-width: 0;
1988
+ }
1989
+
1990
+ #nd-docs-layout[data-fd-framework] .fd-callout-title {
1991
+ font-weight: 600;
1992
+ font-size: 13px;
1993
+ }
1994
+
1995
+ #nd-docs-layout[data-fd-framework] .fd-callout-note .fd-callout-title {
1996
+ color: hsl(221, 83%, 53%);
1997
+ }
1998
+ #nd-docs-layout[data-fd-framework] .fd-callout-warning .fd-callout-title {
1999
+ color: hsl(38, 92%, 50%);
2000
+ }
2001
+ #nd-docs-layout[data-fd-framework] .fd-callout-tip .fd-callout-title {
2002
+ color: hsl(142, 71%, 45%);
2003
+ }
2004
+ #nd-docs-layout[data-fd-framework] .fd-callout-important .fd-callout-title {
2005
+ color: hsl(262, 83%, 58%);
2006
+ }
2007
+ #nd-docs-layout[data-fd-framework] .fd-callout-caution .fd-callout-title {
2008
+ color: hsl(0, 72%, 51%);
2009
+ }
2010
+
2011
+ #nd-docs-layout[data-fd-framework] .fd-callout-content p:last-child {
2012
+ margin-bottom: 0;
2013
+ }
2014
+
2015
+ /* --------- Edit on GitHub ------------------------------------------------------------------------------------------------------------------------------------------------------ */
2016
+
2017
+ #nd-docs-layout[data-fd-framework] .fd-page-footer {
2018
+ display: block;
2019
+ margin-top: auto;
2020
+ padding-top: 24px;
2021
+ }
2022
+
2023
+ #nd-docs-layout[data-fd-framework] .fd-edit-on-github {
2024
+ display: flex;
2025
+ flex-wrap: wrap;
2026
+ align-items: center;
2027
+ width: 100%;
2028
+ gap: 0.75rem 16px;
2029
+ margin-top: 0;
2030
+ padding-top: 0;
2031
+ border-top: 0;
2032
+ font-size: 13px;
2033
+ }
2034
+
2035
+ #nd-docs-layout[data-fd-framework] .fd-edit-on-github > a {
2036
+ display: inline-flex;
2037
+ align-items: center;
2038
+ justify-content: center;
2039
+ gap: 6px;
2040
+ padding: 6px 8px;
2041
+ border: 1px solid var(--color-fd-border);
2042
+ border-radius: 0.375rem;
2043
+ background: var(--color-fd-secondary);
2044
+ color: var(--color-fd-secondary-foreground);
2045
+ font-size: 12px;
2046
+ font-weight: 500;
2047
+ line-height: 16px;
2048
+ text-decoration: none;
2049
+ transition:
2050
+ background-color 0.15s,
2051
+ color 0.15s,
2052
+ border-color 0.15s;
2053
+ }
2054
+
2055
+ #nd-docs-layout[data-fd-framework] .fd-edit-on-github > a:hover {
2056
+ background: var(--color-fd-accent);
2057
+ color: var(--color-fd-accent-foreground);
2058
+ }
2059
+
2060
+ #nd-docs-layout[data-fd-framework] .fd-last-modified {
2061
+ color: var(--color-fd-muted-foreground);
2062
+ font-size: var(--fd-small-size, 0.75rem);
2063
+ font-weight: var(--fd-small-weight, 400);
2064
+ }
2065
+
2066
+ @media (max-width: 640px) {
2067
+ #nd-docs-layout[data-fd-framework] .fd-last-modified {
2068
+ width: 100%;
2069
+ }
2070
+ }
2071
+
2072
+ #nd-docs-layout[data-fd-framework] .fd-llms-txt-links {
2073
+ display: inline-flex;
2074
+ align-items: center;
2075
+ gap: 0.5rem;
2076
+ }
2077
+
2078
+ #nd-docs-layout[data-fd-framework] .fd-llms-txt-link {
2079
+ display: inline-flex;
2080
+ align-items: center;
2081
+ color: var(--color-fd-muted-foreground);
2082
+ font-size: 0.75rem;
2083
+ font-family: var(--fd-font-mono, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace);
2084
+ line-height: 1.75rem;
2085
+ text-decoration: none;
2086
+ padding: 0.125rem 0.375rem;
2087
+ border-radius: 0.25rem;
2088
+ border: 1px solid var(--color-fd-border, hsl(0 0% 80% / 50%));
2089
+ transition: color 150ms, border-color 150ms;
2090
+ }
2091
+
2092
+ #nd-docs-layout[data-fd-framework] .fd-llms-txt-link:hover {
2093
+ color: var(--color-fd-foreground);
2094
+ border-color: var(--color-fd-foreground);
2095
+ text-decoration: none;
2096
+ }
2097
+
2098
+ /* --------- Previous / Next Navigation ------------------------------------------------------------------------------------------------------------------ */
2099
+
2100
+ #nd-docs-layout[data-fd-framework] .fd-page-nav {
2101
+ display: grid;
2102
+ grid-template-columns: 1fr;
2103
+ gap: 16px;
2104
+ width: 100%;
2105
+ margin-top: 16px;
2106
+ padding-top: 0;
2107
+ border-top: 0;
2108
+ }
2109
+
2110
+ #nd-docs-layout[data-fd-framework] .fd-page-nav:has(.fd-page-nav-prev):has(.fd-page-nav-next) {
2111
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2112
+ }
2113
+
2114
+ #nd-docs-layout[data-fd-framework] .fd-page-nav > div:empty {
2115
+ display: none;
2116
+ }
2117
+
2118
+ #nd-docs-layout[data-fd-framework] .fd-page-nav-card {
2119
+ display: flex;
2120
+ flex-direction: column;
2121
+ gap: 8px;
2122
+ min-width: 0;
2123
+ min-height: 95px;
2124
+ padding: 16px;
2125
+ border: 1px solid var(--color-fd-border);
2126
+ border-radius: 8px;
2127
+ text-decoration: none;
2128
+ color: var(--color-fd-foreground);
2129
+ transition:
2130
+ background-color 0.15s,
2131
+ border-color 0.15s;
2132
+ }
2133
+
2134
+ #nd-docs-layout[data-fd-framework] .fd-page-nav-card:hover {
2135
+ background: var(--color-fd-accent);
2136
+ border-color: var(--color-fd-border);
2137
+ }
2138
+
2139
+ #nd-docs-layout[data-fd-framework] .fd-page-nav-next {
2140
+ text-align: right;
2141
+ align-items: flex-end;
2142
+ }
2143
+
2144
+ #nd-docs-layout[data-fd-framework] .fd-page-nav-label,
2145
+ #nd-docs-layout[data-fd-framework] .fd-page-nav-title {
2146
+ display: inline-flex;
2147
+ align-items: center;
2148
+ gap: 6px;
2149
+ max-width: 100%;
2150
+ min-height: 0;
2151
+ overflow: hidden;
2152
+ color: var(--color-fd-foreground);
2153
+ font-size: var(--fd-body-size, 1rem);
2154
+ font-weight: 500;
2155
+ line-height: var(--fd-body-line-height, 1.65);
2156
+ overflow-wrap: anywhere;
2157
+ }
2158
+
2159
+ #nd-docs-layout[data-fd-framework] .fd-page-nav-title svg {
2160
+ width: 1rem;
2161
+ height: 1rem;
2162
+ flex-shrink: 0;
2163
+ }
2164
+
2165
+ #nd-docs-layout[data-fd-framework] .fd-page-nav-description {
2166
+ display: block;
2167
+ max-width: 100%;
2168
+ min-height: 0;
2169
+ overflow: hidden;
2170
+ color: var(--color-fd-muted-foreground);
2171
+ font-size: var(--fd-body-size, 1rem);
2172
+ font-weight: var(--fd-body-weight, 400);
2173
+ line-height: var(--fd-body-line-height, 1.65);
2174
+ text-overflow: ellipsis;
2175
+ white-space: nowrap;
2176
+ }
2177
+
2178
+ /* --------- Sidebar icon --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
2179
+
2180
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-icon {
2181
+ display: inline-flex;
2182
+ align-items: center;
2183
+ flex-shrink: 0;
2184
+ opacity: 0.7;
2185
+ }
2186
+
2187
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-link-active .fd-sidebar-icon {
2188
+ opacity: 1;
2189
+ }
2190
+
2191
+ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2192
+ * AI Chat & Search Dialog - base styles (fd-ai-*)
2193
+ * --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
2194
+
2195
+ @keyframes fd-ai-fade-in {
2196
+ from {
2197
+ opacity: 0;
2198
+ }
2199
+ to {
2200
+ opacity: 1;
2201
+ }
2202
+ }
2203
+
2204
+ @keyframes fd-ai-slide-up {
2205
+ from {
2206
+ opacity: 0;
2207
+ transform: translate(-50%, -48%) scale(0.96);
2208
+ }
2209
+ to {
2210
+ opacity: 1;
2211
+ transform: translate(-50%, -50%) scale(1);
2212
+ }
2213
+ }
2214
+
2215
+ @keyframes fd-ai-float-in {
2216
+ from {
2217
+ opacity: 0;
2218
+ transform: translateY(12px) scale(0.95);
2219
+ }
2220
+ to {
2221
+ opacity: 1;
2222
+ transform: translateY(0) scale(1);
2223
+ }
2224
+ }
2225
+
2226
+ @keyframes fd-ai-float-center-in {
2227
+ from {
2228
+ opacity: 0;
2229
+ transform: translate(-50%, -48%) scale(0.96);
2230
+ }
2231
+ to {
2232
+ opacity: 1;
2233
+ transform: translate(-50%, -50%) scale(1);
2234
+ }
2235
+ }
2236
+
2237
+ #nd-docs-layout[data-fd-framework] .fd-ai-overlay {
2238
+ position: fixed;
2239
+ inset: 0;
2240
+ z-index: 9998;
2241
+ background: rgba(0, 0, 0, 0.5);
2242
+ backdrop-filter: blur(4px);
2243
+ -webkit-backdrop-filter: blur(4px);
2244
+ animation: fd-ai-fade-in 150ms ease-out;
2245
+ }
2246
+
2247
+ #nd-docs-layout[data-fd-framework] .fd-ai-dialog {
2248
+ position: fixed;
2249
+ z-index: 9999;
2250
+ display: flex;
2251
+ flex-direction: column;
2252
+ background: var(--color-fd-popover);
2253
+ border: 1px solid var(--color-fd-border);
2254
+ border-radius: 12px;
2255
+ box-shadow:
2256
+ 0 0 0 1px color-mix(in srgb, var(--color-fd-foreground) 5%, transparent),
2257
+ 0 16px 48px -8px rgba(0, 0, 0, 0.35);
2258
+ overflow: hidden;
2259
+ color: var(--color-fd-foreground);
2260
+ font-family: var(--fd-font-sans, system-ui, -apple-system, sans-serif);
2261
+ }
2262
+
2263
+ #nd-docs-layout[data-fd-framework] .fd-ai-tab-bar {
2264
+ display: flex;
2265
+ align-items: stretch;
2266
+ gap: 0;
2267
+ padding: 0;
2268
+ border-bottom: 1px solid var(--color-fd-border);
2269
+ background: var(--color-fd-card);
2270
+ }
2271
+
2272
+ #nd-docs-layout[data-fd-framework] .fd-ai-tab {
2273
+ display: inline-flex;
2274
+ align-items: center;
2275
+ justify-content: center;
2276
+ gap: 6px;
2277
+ padding: 10px 20px;
2278
+ font-size: 13px;
2279
+ font-weight: 500;
2280
+ border: none;
2281
+ border-bottom: 2px solid transparent;
2282
+ cursor: pointer;
2283
+ transition:
2284
+ color 150ms,
2285
+ border-color 150ms,
2286
+ background-color 150ms;
2287
+ background: transparent;
2288
+ color: var(--color-fd-muted-foreground);
2289
+ font-family: inherit;
2290
+ margin-bottom: -1px;
2291
+ position: relative;
2292
+ }
2293
+
2294
+ #nd-docs-layout[data-fd-framework] .fd-ai-tab svg {
2295
+ opacity: 0.7;
2296
+ flex-shrink: 0;
2297
+ }
2298
+
2299
+ #nd-docs-layout[data-fd-framework] .fd-ai-tab[data-active="true"] {
2300
+ color: var(--color-fd-foreground);
2301
+ border-bottom-color: var(--color-fd-primary);
2302
+ background: transparent;
2303
+ }
2304
+
2305
+ #nd-docs-layout[data-fd-framework] .fd-ai-tab[data-active="true"] svg {
2306
+ opacity: 1;
2307
+ }
2308
+
2309
+ #nd-docs-layout[data-fd-framework] .fd-ai-tab:hover:not([data-active="true"]) {
2310
+ color: var(--color-fd-foreground);
2311
+ background: var(--color-fd-accent);
2312
+ }
2313
+
2314
+ #nd-docs-layout[data-fd-framework] .fd-ai-esc {
2315
+ padding: 2px 8px;
2316
+ border-radius: 6px;
2317
+ border: 1px solid var(--color-fd-border);
2318
+ font-size: 11px;
2319
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
2320
+ color: var(--color-fd-muted-foreground);
2321
+ background: var(--color-fd-secondary);
2322
+ line-height: 1.4;
2323
+ }
2324
+
2325
+ /* --------- Header --------------------------------------------------------------------------------------------------------------------------------------------------------- */
2326
+
2327
+ #nd-docs-layout[data-fd-framework] .fd-ai-header {
2328
+ display: flex;
2329
+ align-items: center;
2330
+ gap: 8px;
2331
+ padding: 12px 16px;
2332
+ border-bottom: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.06));
2333
+ }
2334
+
2335
+ #nd-docs-layout[data-fd-framework] .fd-ai-header-title {
2336
+ font-size: 14px;
2337
+ font-weight: 600;
2338
+ flex: 1;
2339
+ }
2340
+
2341
+ #nd-docs-layout[data-fd-framework] .fd-ai-close-btn {
2342
+ display: flex;
2343
+ align-items: center;
2344
+ justify-content: center;
2345
+ width: 28px;
2346
+ height: 28px;
2347
+ border-radius: var(--radius, 6px);
2348
+ border: none;
2349
+ cursor: pointer;
2350
+ background: transparent;
2351
+ color: var(--color-fd-muted-foreground, #71717a);
2352
+ transition: all 150ms;
2353
+ }
2354
+
2355
+ #nd-docs-layout[data-fd-framework] .fd-ai-close-btn:hover {
2356
+ color: var(--color-fd-foreground, #e4e4e7);
2357
+ background: var(--color-fd-accent, rgba(255, 255, 255, 0.06));
2358
+ }
2359
+
2360
+ #nd-docs-layout[data-fd-framework] .fd-ai-search-wrap {
2361
+ display: flex;
2362
+ align-items: center;
2363
+ gap: 10px;
2364
+ padding: 12px 16px;
2365
+ border-bottom: 1px solid var(--color-fd-border);
2366
+ color: var(--color-fd-muted-foreground);
2367
+ }
2368
+
2369
+ #nd-docs-layout[data-fd-framework] .fd-ai-search-wrap svg {
2370
+ flex-shrink: 0;
2371
+ opacity: 0.5;
2372
+ }
2373
+
2374
+ #nd-docs-layout[data-fd-framework] .fd-ai-input {
2375
+ flex: 1;
2376
+ background: transparent;
2377
+ border: none;
2378
+ outline: none;
2379
+ color: var(--color-fd-foreground);
2380
+ font-size: 14px;
2381
+ font-family: inherit;
2382
+ }
2383
+
2384
+ #nd-docs-layout[data-fd-framework] .fd-ai-input::placeholder {
2385
+ color: var(--color-fd-muted-foreground);
2386
+ opacity: 0.7;
2387
+ }
2388
+
2389
+ #nd-docs-layout[data-fd-framework] .fd-ai-results {
2390
+ flex: 1;
2391
+ overflow-y: auto;
2392
+ padding: 8px;
2393
+ max-height: 360px;
2394
+ }
2395
+
2396
+ #nd-docs-layout[data-fd-framework] .fd-ai-result {
2397
+ display: flex;
2398
+ align-items: center;
2399
+ gap: 10px;
2400
+ width: 100%;
2401
+ padding: 10px 12px;
2402
+ border: none;
2403
+ border-radius: 8px;
2404
+ cursor: pointer;
2405
+ text-align: left;
2406
+ font-size: 14px;
2407
+ font-family: inherit;
2408
+ transition:
2409
+ background 100ms,
2410
+ color 100ms;
2411
+ color: var(--color-fd-foreground);
2412
+ background: transparent;
2413
+ color: var(--color-fd-foreground);
2414
+ }
2415
+
2416
+ #nd-docs-layout[data-fd-framework] .fd-ai-result svg {
2417
+ flex-shrink: 0;
2418
+ opacity: 0.5;
2419
+ }
2420
+
2421
+ #nd-docs-layout[data-fd-framework] .fd-ai-result[data-active="true"] {
2422
+ background: var(--color-fd-accent);
2423
+ color: var(--color-fd-foreground);
2424
+ }
2425
+
2426
+ #nd-docs-layout[data-fd-framework] .fd-ai-result[data-active="true"] svg {
2427
+ opacity: 1;
2428
+ }
2429
+
2430
+ #nd-docs-layout[data-fd-framework] .fd-ai-result-empty {
2431
+ padding: 48px 16px;
2432
+ text-align: center;
2433
+ color: var(--color-fd-muted-foreground);
2434
+ font-size: 14px;
2435
+ line-height: 1.6;
2436
+ }
2437
+
2438
+ #nd-docs-layout[data-fd-framework] .fd-ai-messages {
2439
+ flex: 1;
2440
+ overflow-y: auto;
2441
+ padding: 12px 16px;
2442
+ display: flex;
2443
+ flex-direction: column;
2444
+ gap: 16px;
2445
+ }
2446
+
2447
+ #nd-docs-layout[data-fd-framework] .fd-ai-empty {
2448
+ display: flex;
2449
+ flex-direction: column;
2450
+ align-items: center;
2451
+ justify-content: center;
2452
+ flex: 1;
2453
+ gap: 12px;
2454
+ padding: 24px 0;
2455
+ color: var(--color-fd-muted-foreground);
2456
+ }
2457
+
2458
+ #nd-docs-layout[data-fd-framework] .fd-ai-empty-title {
2459
+ font-size: 14px;
2460
+ font-weight: 500;
2461
+ }
2462
+
2463
+ #nd-docs-layout[data-fd-framework] .fd-ai-empty-desc {
2464
+ font-size: 12px;
2465
+ opacity: 0.7;
2466
+ text-align: center;
2467
+ max-width: 300px;
2468
+ line-height: 1.5;
2469
+ }
2470
+
2471
+ #nd-docs-layout[data-fd-framework] .fd-ai-suggestions {
2472
+ display: flex;
2473
+ flex-direction: column;
2474
+ gap: 6px;
2475
+ width: 100%;
2476
+ max-width: 360px;
2477
+ margin-top: 8px;
2478
+ }
2479
+
2480
+ #nd-docs-layout[data-fd-framework] .fd-ai-suggestion {
2481
+ display: flex;
2482
+ align-items: center;
2483
+ gap: 8px;
2484
+ padding: 8px 12px;
2485
+ border-radius: 8px;
2486
+ border: 1px solid var(--color-fd-border);
2487
+ background: var(--color-fd-background);
2488
+ opacity: 0.6;
2489
+ color: var(--color-fd-foreground);
2490
+ font-size: 13px;
2491
+ font-family: inherit;
2492
+ cursor: pointer;
2493
+ text-align: left;
2494
+ line-height: 1.4;
2495
+ transition: all 150ms;
2496
+ }
2497
+
2498
+ #nd-docs-layout[data-fd-framework] .fd-ai-suggestion:hover {
2499
+ background: var(--color-fd-accent);
2500
+ border-color: var(--color-fd-ring);
2501
+ opacity: 1;
2502
+ }
2503
+
2504
+ #nd-docs-layout[data-fd-framework] .fd-ai-msg {
2505
+ display: flex;
2506
+ flex-direction: column;
2507
+ gap: 4px;
2508
+ }
2509
+
2510
+ #nd-docs-layout[data-fd-framework] .fd-ai-msg[data-role="user"] {
2511
+ align-items: flex-end;
2512
+ }
2513
+
2514
+ #nd-docs-layout[data-fd-framework] .fd-ai-msg[data-role="assistant"] {
2515
+ align-items: flex-start;
2516
+ }
2517
+
2518
+ #nd-docs-layout[data-fd-framework] .fd-ai-msg-label {
2519
+ font-size: 10px;
2520
+ font-weight: 500;
2521
+ text-transform: uppercase;
2522
+ letter-spacing: 0.05em;
2523
+ color: var(--color-fd-muted-foreground);
2524
+ padding: 0 2px;
2525
+ }
2526
+
2527
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-user {
2528
+ background: var(--color-fd-primary);
2529
+ color: var(--color-fd-primary-foreground);
2530
+ padding: 8px 14px;
2531
+ border-radius: 14px;
2532
+ font-size: 13px;
2533
+ line-height: 1.5;
2534
+ max-width: 85%;
2535
+ word-break: break-word;
2536
+ }
2537
+
2538
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai {
2539
+ background: var(--color-fd-muted, rgba(255, 255, 255, 0.04));
2540
+ padding: 10px 14px;
2541
+ border-radius: var(--radius, 14px);
2542
+ font-size: 13px;
2543
+ line-height: 1.6;
2544
+ max-width: 95%;
2545
+ word-break: break-word;
2546
+ animation: fd-ai-msg-in 300ms ease-out;
2547
+ }
2548
+
2549
+ @keyframes fd-ai-msg-in {
2550
+ from { opacity: 0; transform: translateY(6px); }
2551
+ to { opacity: 1; transform: translateY(0); }
2552
+ }
2553
+
2554
+ #nd-docs-layout[data-fd-framework] .fd-ai-chat-footer {
2555
+ padding: 8px 12px 12px;
2556
+ border-top: 1px solid var(--color-fd-border);
2557
+ }
2558
+
2559
+ #nd-docs-layout[data-fd-framework] .fd-ai-clear-btn {
2560
+ font-size: 11px;
2561
+ color: var(--color-fd-muted-foreground);
2562
+ background: transparent;
2563
+ border: none;
2564
+ cursor: pointer;
2565
+ padding: 2px 8px;
2566
+ border-radius: 4px;
2567
+ font-family: inherit;
2568
+ }
2569
+
2570
+ #nd-docs-layout[data-fd-framework] .fd-ai-clear-btn:hover {
2571
+ color: var(--color-fd-foreground);
2572
+ }
2573
+
2574
+ #nd-docs-layout[data-fd-framework] .fd-ai-input-wrap {
2575
+ display: flex;
2576
+ align-items: center;
2577
+ gap: 8px;
2578
+ background: var(--color-fd-muted);
2579
+ border-radius: 10px;
2580
+ padding: 4px 4px 4px 14px;
2581
+ border: 1px solid var(--color-fd-border);
2582
+ }
2583
+
2584
+ #nd-docs-layout[data-fd-framework] .fd-ai-send-btn {
2585
+ display: flex;
2586
+ align-items: center;
2587
+ justify-content: center;
2588
+ width: 32px;
2589
+ height: 32px;
2590
+ border-radius: 8px;
2591
+ border: none;
2592
+ transition: all 150ms;
2593
+ cursor: default;
2594
+ background: var(--color-fd-muted);
2595
+ color: var(--color-fd-muted-foreground);
2596
+ }
2597
+
2598
+ #nd-docs-layout[data-fd-framework] .fd-ai-send-btn[data-active="true"] {
2599
+ cursor: pointer;
2600
+ background: var(--color-fd-primary);
2601
+ color: var(--color-fd-primary-foreground);
2602
+ }
2603
+
2604
+ #nd-docs-layout[data-fd-framework] .fd-ai-loader {
2605
+ display: inline-flex;
2606
+ align-items: center;
2607
+ gap: 6px;
2608
+ animation: fd-ai-loader-in 300ms ease-out;
2609
+ }
2610
+
2611
+ @keyframes fd-ai-loader-in {
2612
+ from { opacity: 0; transform: translateY(4px); }
2613
+ to { opacity: 1; transform: translateY(0); }
2614
+ }
2615
+
2616
+ #nd-docs-layout[data-fd-framework] .fd-ai-loader-shimmer-text {
2617
+ font-size: 13px;
2618
+ font-weight: 500;
2619
+ background: linear-gradient(to right, var(--color-fd-muted-foreground, #888) 40%, var(--color-fd-foreground, #fff) 60%, var(--color-fd-muted-foreground, #888) 80%);
2620
+ background-size: 200% auto;
2621
+ background-clip: text;
2622
+ -webkit-background-clip: text;
2623
+ color: transparent;
2624
+ animation: fd-ai-shimmer-text 3s linear infinite;
2625
+ }
2626
+
2627
+ @keyframes fd-ai-shimmer-text {
2628
+ 0% { background-position: 150% center; }
2629
+ 100% { background-position: -150% center; }
2630
+ }
2631
+
2632
+ #nd-docs-layout[data-fd-framework] .fd-ai-loader-typing-dots {
2633
+ display: inline-flex;
2634
+ align-items: center;
2635
+ gap: 2px;
2636
+ }
2637
+
2638
+ #nd-docs-layout[data-fd-framework] .fd-ai-loader-typing-dot {
2639
+ width: 4px;
2640
+ height: 4px;
2641
+ border-radius: 50%;
2642
+ background: var(--color-fd-primary, #6366f1);
2643
+ animation: fd-ai-typing 1s infinite;
2644
+ }
2645
+
2646
+ #nd-docs-layout[data-fd-framework] .fd-ai-loader-typing-dot:nth-child(2) { animation-delay: 250ms; }
2647
+ #nd-docs-layout[data-fd-framework] .fd-ai-loader-typing-dot:nth-child(3) { animation-delay: 500ms; }
2648
+
2649
+ @keyframes fd-ai-typing {
2650
+ 0%, 100% { transform: translateY(0); opacity: 0.5; }
2651
+ 50% { transform: translateY(-2px); opacity: 1; }
2652
+ }
2653
+
2654
+ #nd-docs-layout[data-fd-framework] .fd-ai-streaming::after {
2655
+ content: "";
2656
+ display: inline-block;
2657
+ width: 2px;
2658
+ height: 1em;
2659
+ background: var(--color-fd-primary, #6366f1);
2660
+ margin-left: 2px;
2661
+ vertical-align: text-bottom;
2662
+ animation: fd-ai-cursor-blink 0.8s step-end infinite;
2663
+ }
2664
+
2665
+ @keyframes fd-ai-cursor-blink {
2666
+ 0%, 100% { opacity: 1; }
2667
+ 50% { opacity: 0; }
2668
+ }
2669
+
2670
+ /* --------- Markdown in AI responses --------------------------------------------------------------------------------------------------- */
2671
+
2672
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai code {
2673
+ background: var(--color-fd-muted, #1a1a2e);
2674
+ padding: 2px 6px;
2675
+ border-radius: var(--radius, 4px);
2676
+ font-size: 0.875em;
2677
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
2678
+ }
2679
+
2680
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai a {
2681
+ color: var(--color-fd-primary, #6366f1);
2682
+ text-decoration: underline;
2683
+ }
2684
+
2685
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai .fd-ai-code-block code {
2686
+ background: transparent;
2687
+ padding: 0;
2688
+ border-radius: 0;
2689
+ font-size: inherit;
2690
+ }
2691
+
2692
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai .fd-table-wrapper {
2693
+ margin: 8px 0;
2694
+ overflow: auto;
2695
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
2696
+ border-radius: var(--radius, 6px);
2697
+ }
2698
+
2699
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai table {
2700
+ width: 100%;
2701
+ border-collapse: separate;
2702
+ border-spacing: 0;
2703
+ margin: 0;
2704
+ font-size: 13px;
2705
+ }
2706
+
2707
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai th,
2708
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai td {
2709
+ border: 0;
2710
+ border-right: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
2711
+ border-bottom: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
2712
+ padding: 6px 12px;
2713
+ text-align: left;
2714
+ }
2715
+
2716
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai tr > :last-child {
2717
+ border-right: 0;
2718
+ }
2719
+
2720
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai tbody tr:last-child td {
2721
+ border-bottom: 0;
2722
+ }
2723
+
2724
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai th {
2725
+ background: var(--color-fd-muted, #1a1a2e);
2726
+ font-weight: 600;
2727
+ font-size: 12px;
2728
+ }
2729
+
2730
+ /* --------- Markdown prose inside AI bubbles (panel/modal/popover) --------------------- */
2731
+
2732
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h1,
2733
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h2,
2734
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h3,
2735
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h4,
2736
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h5,
2737
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h6 {
2738
+ font-weight: 600;
2739
+ color: var(--color-fd-foreground, #e4e4e7);
2740
+ }
2741
+
2742
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h1 {
2743
+ font-size: 1.25rem;
2744
+ margin: 14px 0 7px;
2745
+ line-height: 1.25;
2746
+ }
2747
+
2748
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h2 {
2749
+ font-size: 1.125rem;
2750
+ margin: 12px 0 6px;
2751
+ line-height: 1.3;
2752
+ }
2753
+
2754
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h3 {
2755
+ font-size: 1rem;
2756
+ font-weight: 600;
2757
+ margin: 10px 0 4px;
2758
+ line-height: 1.4;
2759
+ }
2760
+
2761
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h4 {
2762
+ font-size: 0.9375rem;
2763
+ margin: 8px 0 4px;
2764
+ line-height: 1.4;
2765
+ }
2766
+
2767
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h5,
2768
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h6 {
2769
+ font-size: 0.8125rem;
2770
+ margin: 8px 0 4px;
2771
+ line-height: 1.45;
2772
+ }
2773
+
2774
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai strong {
2775
+ font-weight: 600;
2776
+ color: var(--color-fd-foreground, #e4e4e7);
2777
+ }
2778
+
2779
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai em {
2780
+ font-style: italic;
2781
+ }
2782
+
2783
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai p {
2784
+ margin: 0 0 6px;
2785
+ }
2786
+
2787
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai br {
2788
+ content: "";
2789
+ display: block;
2790
+ margin-top: 2px;
2791
+ }
2792
+
2793
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai ul,
2794
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai ol {
2795
+ margin: 6px 0 8px;
2796
+ padding-left: 1.25rem;
2797
+ }
2798
+
2799
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai li {
2800
+ margin: 3px 0;
2801
+ }
2802
+
2803
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai blockquote {
2804
+ margin: 8px 0;
2805
+ padding: 6px 0 6px 12px;
2806
+ border-left: 2px solid var(--color-fd-border, rgba(255, 255, 255, 0.16));
2807
+ color: var(--color-fd-muted-foreground, #a1a1aa);
2808
+ }
2809
+
2810
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai blockquote p:last-child {
2811
+ margin-bottom: 0;
2812
+ }
2813
+
2814
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai .fd-ai-hr {
2815
+ margin: 12px 0;
2816
+ border: none;
2817
+ border-top: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.12));
2818
+ }
2819
+
2820
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai del {
2821
+ color: var(--color-fd-muted-foreground, #a1a1aa);
2822
+ }
2823
+
2824
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai .fd-ai-task-list-item {
2825
+ list-style: none;
2826
+ }
2827
+
2828
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai .fd-ai-task-checkbox {
2829
+ width: 0.875rem;
2830
+ height: 0.875rem;
2831
+ margin: 0 0.45rem 0 -1.25rem;
2832
+ vertical-align: -0.12em;
2833
+ accent-color: var(--color-fd-primary, #6366f1);
2834
+ }
2835
+
2836
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai img {
2837
+ display: block;
2838
+ max-width: 100%;
2839
+ height: auto;
2840
+ margin: 8px 0;
2841
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.12));
2842
+ border-radius: var(--radius, 4px);
2843
+ }
2844
+
2845
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai pre {
2846
+ margin: 8px 0;
2847
+ border-radius: 0;
2848
+ border: none;
2849
+ background: transparent;
2850
+ padding: 0;
2851
+ }
2852
+
2853
+ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2854
+ * Code blocks in AI chat - fd-ai-code-*
2855
+ * --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
2856
+
2857
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-block {
2858
+ --sh-class: #8be9fd;
2859
+ --sh-identifier: #c9d1d9;
2860
+ --sh-keyword: #ff7b72;
2861
+ --sh-string: #a5d6ff;
2862
+ --sh-property: #79c0ff;
2863
+ --sh-entity: #7ee787;
2864
+ --sh-sign: #8b949e;
2865
+ --sh-comment: #6e7681;
2866
+ --sh-jsxliterals: #d2a8ff;
2867
+ --sh-space: inherit;
2868
+
2869
+ margin: 10px 0;
2870
+ border-radius: var(--radius, 8px);
2871
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
2872
+ background: var(--color-fd-muted, #1a1a2e);
2873
+ overflow: hidden;
2874
+ }
2875
+
2876
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-header {
2877
+ display: flex;
2878
+ align-items: center;
2879
+ justify-content: space-between;
2880
+ padding: 6px 12px;
2881
+ border-bottom: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.08));
2882
+ background: color-mix(in srgb, var(--color-fd-muted, #1a1a2e) 80%, black);
2883
+ min-height: 32px;
2884
+ }
2885
+
2886
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-lang {
2887
+ font-size: 11px;
2888
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
2889
+ color: var(--color-fd-muted-foreground, #71717a);
2890
+ text-transform: uppercase;
2891
+ letter-spacing: 0.04em;
2892
+ }
2893
+
2894
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-copy {
2895
+ font-size: 11px;
2896
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
2897
+ color: var(--color-fd-muted-foreground, #71717a);
2898
+ background: transparent;
2899
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
2900
+ border-radius: var(--radius, 4px);
2901
+ padding: 2px 8px;
2902
+ cursor: pointer;
2903
+ transition: all 150ms;
2904
+ }
2905
+
2906
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-copy:hover {
2907
+ color: var(--color-fd-foreground, #e4e4e7);
2908
+ background: color-mix(
2909
+ in srgb,
2910
+ var(--color-fd-accent, rgba(255, 255, 255, 0.05)) 60%,
2911
+ transparent
2912
+ );
2913
+ }
2914
+
2915
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-block pre {
2916
+ margin: 0;
2917
+ padding: 12px 16px;
2918
+ overflow-x: auto;
2919
+ background: transparent;
2920
+ border: none;
2921
+ border-radius: 0;
2922
+ }
2923
+
2924
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-block code {
2925
+ font-size: 13px;
2926
+ line-height: 1.45;
2927
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
2928
+ background: transparent;
2929
+ padding: 0;
2930
+ border-radius: 0;
2931
+ }
2932
+
2933
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-block .sh__line {
2934
+ display: block;
2935
+ min-height: 1.2em;
2936
+ }
2937
+
2938
+ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2939
+ Default theme AI overrides - rounded, soft, indigo
2940
+ (matches Next.js fumadocs default.css)
2941
+ --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
2942
+
2943
+ #nd-docs-layout[data-fd-framework] .fd-ai-dialog {
2944
+ border-radius: 12px;
2945
+ box-shadow:
2946
+ 0 20px 60px rgba(99, 102, 241, 0.08),
2947
+ 0 8px 24px rgba(0, 0, 0, 0.12);
2948
+ }
2949
+
2950
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-user {
2951
+ border-radius: 16px 16px 4px 16px;
2952
+ }
2953
+
2954
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai {
2955
+ border-radius: 16px 16px 16px 4px;
2956
+ }
2957
+
2958
+ #nd-docs-layout[data-fd-framework] .fd-ai-input-wrap {
2959
+ border-radius: 10px;
2960
+ }
2961
+
2962
+ #nd-docs-layout[data-fd-framework] .fd-ai-send-btn {
2963
+ border-radius: 8px;
2964
+ }
2965
+
2966
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-btn {
2967
+ border-radius: 26px;
2968
+ }
2969
+
2970
+ #nd-docs-layout[data-fd-framework] .fd-ai-suggestion {
2971
+ border-radius: 8px;
2972
+ }
2973
+
2974
+ #nd-docs-layout[data-fd-framework] .fd-ai-result {
2975
+ border-radius: 8px;
2976
+ }
2977
+
2978
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-input-container {
2979
+ border-radius: 12px;
2980
+ }
2981
+
2982
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-send-btn {
2983
+ border-radius: 9999px;
2984
+ }
2985
+
2986
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-suggestion {
2987
+ border-radius: 9999px;
2988
+ }
2989
+
2990
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-trigger-btn {
2991
+ border-radius: 16px;
2992
+ }
2993
+
2994
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-close-btn {
2995
+ border-radius: 9999px;
2996
+ }
2997
+
2998
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-block {
2999
+ border-radius: 8px;
3000
+ }
3001
+
3002
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-copy {
3003
+ border-radius: 4px;
3004
+ }
3005
+
3006
+ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3007
+ Floating AI Chat - fd-ai-floating-* + fd-ai-fm-*
3008
+ (exact port of Next.js fumadocs ai.css)
3009
+ --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
3010
+
3011
+ /* --------- Floating trigger button ------------------------------------------------------------------------------------------------------ */
3012
+
3013
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-btn {
3014
+ position: fixed;
3015
+ z-index: 9997;
3016
+ display: flex;
3017
+ align-items: center;
3018
+ justify-content: center;
3019
+ gap: 8px;
3020
+ padding: 8px 12px;
3021
+ height: 40px;
3022
+ border-radius: 16px;
3023
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
3024
+ background: color-mix(in srgb, var(--color-fd-secondary, #f4f4f5) 80%, transparent);
3025
+ backdrop-filter: blur(4px);
3026
+ color: var(--color-fd-muted-foreground, #71717a);
3027
+ cursor: pointer;
3028
+ font-size: var(--fd-small-size, 0.875rem);
3029
+ font-family: var(--fd-font-sans, inherit);
3030
+ box-shadow: 0 1px 3px color-mix(in srgb, var(--color-fd-background, #000) 20%, transparent);
3031
+ transition:
3032
+ transform 150ms,
3033
+ background 150ms,
3034
+ color 150ms;
3035
+ animation: fd-ai-fade-in 300ms ease-out;
3036
+ }
3037
+
3038
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-btn:hover {
3039
+ background: var(--color-fd-accent);
3040
+ color: var(--color-fd-accent-foreground);
3041
+ transform: scale(1.03);
3042
+ }
3043
+
3044
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-btn:active {
3045
+ transform: scale(0.97);
3046
+ }
3047
+
3048
+ :is(html.dark, body.dark) #nd-docs-layout[data-fd-framework] .fd-ai-floating-btn,
3049
+ #nd-docs-layout[data-fd-framework].dark .fd-ai-floating-btn,
3050
+ :is(html.dark, body.dark) #nd-docs-layout[data-fd-framework] .fd-ai-fm-trigger-btn,
3051
+ #nd-docs-layout[data-fd-framework].dark .fd-ai-fm-trigger-btn {
3052
+ background: color-mix(in srgb, var(--color-fd-secondary, rgba(255, 255, 255, 0.08)) 90%, transparent);
3053
+ color: var(--color-fd-foreground, #e4e4e7);
3054
+ border-color: var(--color-fd-border, rgba(255, 255, 255, 0.12));
3055
+ }
3056
+
3057
+ :is(html.dark, body.dark) #nd-docs-layout[data-fd-framework] .fd-ai-floating-btn:hover,
3058
+ #nd-docs-layout[data-fd-framework].dark .fd-ai-floating-btn:hover,
3059
+ :is(html.dark, body.dark) #nd-docs-layout[data-fd-framework] .fd-ai-fm-trigger-btn:hover,
3060
+ #nd-docs-layout[data-fd-framework].dark .fd-ai-fm-trigger-btn:hover {
3061
+ background: var(--color-fd-accent);
3062
+ color: var(--color-fd-accent-foreground);
3063
+ }
3064
+
3065
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-trigger {
3066
+ position: fixed;
3067
+ z-index: 9997;
3068
+ cursor: pointer;
3069
+ animation: fd-ai-fade-in 300ms ease-out;
3070
+ }
3071
+
3072
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-trigger .ask-ai-trigger {
3073
+ display: flex;
3074
+ align-items: center;
3075
+ justify-content: center;
3076
+ gap: 8px;
3077
+ padding: 8px 12px;
3078
+ height: 40px;
3079
+ border-radius: 16px;
3080
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
3081
+ background: color-mix(in srgb, var(--color-fd-secondary, #f4f4f5) 80%, transparent);
3082
+ backdrop-filter: blur(4px);
3083
+ color: var(--color-fd-muted-foreground, #71717a);
3084
+ cursor: pointer;
3085
+ font-size: var(--fd-small-size, 0.875rem);
3086
+ font-family: var(--fd-font-sans, inherit);
3087
+ box-shadow: 0 1px 3px color-mix(in srgb, var(--color-fd-background, #000) 20%, transparent);
3088
+ transition: transform 150ms, background 150ms, color 150ms;
3089
+ }
3090
+
3091
+ :is(html.dark, body.dark) #nd-docs-layout[data-fd-framework] .fd-ai-floating-trigger .ask-ai-trigger,
3092
+ #nd-docs-layout[data-fd-framework].dark .fd-ai-floating-trigger .ask-ai-trigger {
3093
+ background: color-mix(in srgb, var(--color-fd-secondary, rgba(255, 255, 255, 0.08)) 90%, transparent);
3094
+ color: var(--color-fd-foreground, #e4e4e7);
3095
+ border-color: var(--color-fd-border, rgba(255, 255, 255, 0.12));
3096
+ }
3097
+
3098
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-trigger .ask-ai-trigger:hover {
3099
+ background: var(--color-fd-accent);
3100
+ color: var(--color-fd-accent-foreground);
3101
+ transform: scale(1.03);
3102
+ }
3103
+
3104
+ :is(html.dark, body.dark) #nd-docs-layout[data-fd-framework] .fd-ai-floating-trigger .ask-ai-trigger:hover,
3105
+ #nd-docs-layout[data-fd-framework].dark .fd-ai-floating-trigger .ask-ai-trigger:hover {
3106
+ background: var(--color-fd-accent);
3107
+ color: var(--color-fd-accent-foreground);
3108
+ }
3109
+
3110
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-trigger .ask-ai-trigger:active {
3111
+ transform: scale(0.97);
3112
+ }
3113
+
3114
+ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3115
+ Full-Modal (better-auth inspired) - fd-ai-fm-*
3116
+ --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
3117
+
3118
+ /* Fixed wrapper for trigger when closed - never morphs, so no "stuck" feel */
3119
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-trigger-fixed {
3120
+ position: fixed;
3121
+ z-index: 9997;
3122
+ animation: fd-ai-fade-in 200ms ease-out;
3123
+ }
3124
+
3125
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-trigger--static {
3126
+ position: static;
3127
+ }
3128
+
3129
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-overlay {
3130
+ position: fixed;
3131
+ inset: 0;
3132
+ display: flex;
3133
+ flex-direction: column;
3134
+ align-items: center;
3135
+ background: color-mix(in srgb, var(--color-fd-background, #000) 80%, transparent);
3136
+ backdrop-filter: blur(8px);
3137
+ z-index: 9998;
3138
+ padding: 0 8px;
3139
+ }
3140
+
3141
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-overlay--animate {
3142
+ animation: fd-ai-fade-in 200ms ease-out;
3143
+ }
3144
+
3145
+ /* --------- Top bar (close button) --------------------------------------------------------------------------------------------------------- */
3146
+
3147
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-topbar {
3148
+ display: flex;
3149
+ justify-content: flex-end;
3150
+ align-items: center;
3151
+ width: min(800px, 100%);
3152
+ padding: 12px 0;
3153
+ position: sticky;
3154
+ top: 0;
3155
+ z-index: 2;
3156
+ }
3157
+
3158
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-close-btn {
3159
+ display: flex;
3160
+ align-items: center;
3161
+ justify-content: center;
3162
+ width: 32px;
3163
+ height: 32px;
3164
+ border-radius: var(--radius, 9999px);
3165
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
3166
+ background: var(--color-fd-secondary, rgba(255, 255, 255, 0.06));
3167
+ color: var(--color-fd-foreground, #e4e4e7);
3168
+ cursor: pointer;
3169
+ transition: all 150ms;
3170
+ }
3171
+
3172
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-close-btn:hover {
3173
+ background: var(--color-fd-accent, rgba(255, 255, 255, 0.1));
3174
+ }
3175
+
3176
+ /* --------- Message list --------------------------------------------------------------------------------------------------------------------------------------- */
3177
+
3178
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-messages {
3179
+ flex: 1;
3180
+ overflow-y: auto;
3181
+ width: min(800px, 100%);
3182
+ padding: 24px 0 120px;
3183
+ mask-image: linear-gradient(
3184
+ to bottom,
3185
+ transparent,
3186
+ white 3rem,
3187
+ white calc(100% - 8rem),
3188
+ transparent 100%
3189
+ );
3190
+ -webkit-mask-image: linear-gradient(
3191
+ to bottom,
3192
+ transparent,
3193
+ white 3rem,
3194
+ white calc(100% - 8rem),
3195
+ transparent 100%
3196
+ );
3197
+ }
3198
+
3199
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-messages-inner {
3200
+ display: flex;
3201
+ flex-direction: column;
3202
+ gap: 20px;
3203
+ }
3204
+
3205
+ /* --------- Message ------------------------------------------------------------------------------------------------------------------------------------------------------ */
3206
+
3207
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg {
3208
+ display: flex;
3209
+ flex-direction: column;
3210
+ }
3211
+
3212
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-label {
3213
+ font-size: 13px;
3214
+ font-weight: 500;
3215
+ margin-bottom: 4px;
3216
+ color: var(--color-fd-muted-foreground, #71717a);
3217
+ }
3218
+
3219
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-label[data-role="assistant"] {
3220
+ color: var(--color-fd-primary, #6366f1);
3221
+ }
3222
+
3223
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content {
3224
+ font-size: 14px;
3225
+ line-height: 1.7;
3226
+ color: var(--color-fd-foreground, #e4e4e7);
3227
+ }
3228
+
3229
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content code {
3230
+ background: var(--color-fd-muted, #1a1a2e);
3231
+ padding: 2px 6px;
3232
+ border-radius: var(--radius, 4px);
3233
+ font-size: 0.875em;
3234
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
3235
+ }
3236
+
3237
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content .fd-ai-code-block code {
3238
+ background: transparent;
3239
+ padding: 0;
3240
+ border-radius: 0;
3241
+ font-size: inherit;
3242
+ }
3243
+
3244
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content a {
3245
+ color: var(--color-fd-primary, #6366f1);
3246
+ text-decoration: underline;
3247
+ }
3248
+
3249
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content .fd-table-wrapper {
3250
+ margin: 8px 0;
3251
+ overflow: auto;
3252
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
3253
+ border-radius: var(--radius, 6px);
3254
+ }
3255
+
3256
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content table {
3257
+ width: 100%;
3258
+ border-collapse: separate;
3259
+ border-spacing: 0;
3260
+ margin: 0;
3261
+ font-size: 13px;
3262
+ }
3263
+
3264
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content th,
3265
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content td {
3266
+ border: 0;
3267
+ border-right: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
3268
+ border-bottom: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
3269
+ padding: 6px 12px;
3270
+ text-align: left;
3271
+ }
3272
+
3273
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content tr > :last-child {
3274
+ border-right: 0;
3275
+ }
3276
+
3277
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content tbody tr:last-child td {
3278
+ border-bottom: 0;
3279
+ }
3280
+
3281
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content th {
3282
+ background: var(--color-fd-muted, #1a1a2e);
3283
+ font-weight: 600;
3284
+ font-size: 12px;
3285
+ }
3286
+
3287
+ /* --------- Markdown prose inside full-modal messages ------------------------------------------------------------ */
3288
+
3289
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h1,
3290
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h2,
3291
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h3,
3292
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h4,
3293
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h5,
3294
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h6 {
3295
+ font-weight: 600;
3296
+ color: var(--color-fd-foreground, #e4e4e7);
3297
+ }
3298
+
3299
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h1 {
3300
+ font-size: 1.375rem;
3301
+ margin: 18px 0 9px;
3302
+ line-height: 1.25;
3303
+ }
3304
+
3305
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h2 {
3306
+ font-size: 1.25rem;
3307
+ margin: 16px 0 8px;
3308
+ line-height: 1.3;
3309
+ }
3310
+
3311
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h3 {
3312
+ font-size: 1.0625rem;
3313
+ font-weight: 600;
3314
+ margin: 12px 0 6px;
3315
+ line-height: 1.4;
3316
+ }
3317
+
3318
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h4 {
3319
+ font-size: 1rem;
3320
+ margin: 10px 0 4px;
3321
+ line-height: 1.4;
3322
+ }
3323
+
3324
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h5,
3325
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h6 {
3326
+ font-size: 0.875rem;
3327
+ margin: 10px 0 4px;
3328
+ line-height: 1.45;
3329
+ }
3330
+
3331
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content strong {
3332
+ font-weight: 600;
3333
+ color: var(--color-fd-foreground, #e4e4e7);
3334
+ }
3335
+
3336
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content em {
3337
+ font-style: italic;
3338
+ }
3339
+
3340
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content p {
3341
+ margin: 0 0 8px;
3342
+ }
3343
+
3344
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content br {
3345
+ content: "";
3346
+ display: block;
3347
+ margin-top: 2px;
3348
+ }
3349
+
3350
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content ul,
3351
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content ol {
3352
+ margin: 8px 0 10px;
3353
+ padding-left: 1.35rem;
3354
+ }
3355
+
3356
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content li {
3357
+ margin: 4px 0;
3358
+ }
3359
+
3360
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content blockquote {
3361
+ margin: 10px 0;
3362
+ padding: 7px 0 7px 14px;
3363
+ border-left: 2px solid var(--color-fd-border, rgba(255, 255, 255, 0.16));
3364
+ color: var(--color-fd-muted-foreground, #a1a1aa);
3365
+ }
3366
+
3367
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content blockquote p:last-child {
3368
+ margin-bottom: 0;
3369
+ }
3370
+
3371
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content .fd-ai-hr {
3372
+ margin: 14px 0;
3373
+ border: none;
3374
+ border-top: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.12));
3375
+ }
3376
+
3377
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content del {
3378
+ color: var(--color-fd-muted-foreground, #a1a1aa);
3379
+ }
3380
+
3381
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content .fd-ai-task-list-item {
3382
+ list-style: none;
3383
+ }
3384
+
3385
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content .fd-ai-task-checkbox {
3386
+ width: 0.9rem;
3387
+ height: 0.9rem;
3388
+ margin: 0 0.5rem 0 -1.35rem;
3389
+ vertical-align: -0.12em;
3390
+ accent-color: var(--color-fd-primary, #6366f1);
3391
+ }
3392
+
3393
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content img {
3394
+ display: block;
3395
+ max-width: 100%;
3396
+ height: auto;
3397
+ margin: 10px 0;
3398
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.12));
3399
+ border-radius: var(--radius, 4px);
3400
+ }
3401
+
3402
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content pre {
3403
+ margin: 8px 0;
3404
+ border-radius: 0;
3405
+ border: none;
3406
+ background: transparent;
3407
+ padding: 0;
3408
+ }
3409
+
3410
+ /* Full-modal now uses the shared .fd-ai-loader indicator */
3411
+
3412
+ /* --------- Bottom input bar --------------------------------------------------------------------------------------------------------------------------- */
3413
+
3414
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-input-bar {
3415
+ position: fixed;
3416
+ z-index: 9999;
3417
+ }
3418
+
3419
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-input-bar--open {
3420
+ bottom: 16px;
3421
+ left: 50%;
3422
+ transform: translateX(-50%);
3423
+ width: min(800px, calc(100vw - 32px));
3424
+ animation: fd-ai-fade-in 200ms ease-out;
3425
+ }
3426
+
3427
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-input-container {
3428
+ display: flex;
3429
+ flex-direction: column;
3430
+ border-radius: var(--radius, 12px);
3431
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
3432
+ background: var(--color-fd-background, #0c0c0c);
3433
+ box-shadow: 0 20px 60px color-mix(in srgb, var(--color-fd-background, #000) 70%, transparent);
3434
+ overflow: hidden;
3435
+ }
3436
+
3437
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-input-wrap {
3438
+ display: flex;
3439
+ align-items: flex-start;
3440
+ padding-right: 8px;
3441
+ }
3442
+
3443
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-input {
3444
+ flex: 1;
3445
+ padding: 16px;
3446
+ background: transparent;
3447
+ border: none;
3448
+ outline: none;
3449
+ resize: none;
3450
+ color: var(--color-fd-foreground, #e4e4e7);
3451
+ font-size: 14px;
3452
+ font-family: var(--fd-font-sans, system-ui, -apple-system, sans-serif);
3453
+ line-height: 1.5;
3454
+ min-height: 0;
3455
+ max-height: 120px;
3456
+ }
3457
+
3458
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-input::placeholder {
3459
+ color: var(--color-fd-muted-foreground, #71717a);
3460
+ }
3461
+
3462
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-send-btn {
3463
+ display: flex;
3464
+ align-items: center;
3465
+ justify-content: center;
3466
+ margin-top: 12px;
3467
+ width: 32px;
3468
+ height: 32px;
3469
+ border-radius: 9999px;
3470
+ border: none;
3471
+ cursor: default;
3472
+ transition: all 150ms;
3473
+ background: var(--color-fd-secondary, rgba(255, 255, 255, 0.06));
3474
+ color: var(--color-fd-muted-foreground, #71717a);
3475
+ }
3476
+
3477
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-send-btn[data-active="true"] {
3478
+ cursor: pointer;
3479
+ background: var(--color-fd-primary, #6366f1);
3480
+ color: var(--color-fd-primary-foreground, #fff);
3481
+ }
3482
+
3483
+ /* --------- Suggestions (horizontal pills) ------------------------------------------------------------------------------ */
3484
+
3485
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-suggestions-area {
3486
+ padding: 12px 16px 4px;
3487
+ }
3488
+
3489
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-suggestions-label {
3490
+ font-size: 12px;
3491
+ font-weight: 500;
3492
+ color: var(--color-fd-muted-foreground, #71717a);
3493
+ margin-bottom: 8px;
3494
+ }
3495
+
3496
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-suggestions {
3497
+ display: flex;
3498
+ gap: 8px;
3499
+ overflow-x: auto;
3500
+ padding-bottom: 4px;
3501
+ mask-image: linear-gradient(
3502
+ to right,
3503
+ transparent 0%,
3504
+ black 1rem,
3505
+ black calc(100% - 1rem),
3506
+ transparent 100%
3507
+ );
3508
+ -webkit-mask-image: linear-gradient(
3509
+ to right,
3510
+ transparent 0%,
3511
+ black 1rem,
3512
+ black calc(100% - 1rem),
3513
+ transparent 100%
3514
+ );
3515
+ }
3516
+
3517
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-suggestion {
3518
+ flex-shrink: 0;
3519
+ white-space: nowrap;
3520
+ padding: 6px 14px;
3521
+ font-size: 12px;
3522
+ font-family: inherit;
3523
+ border-radius: 9999px;
3524
+ border: 1px solid
3525
+ color-mix(in srgb, var(--color-fd-border, rgba(255, 255, 255, 0.1)) 50%, transparent);
3526
+ background: color-mix(in srgb, var(--color-fd-muted, rgba(255, 255, 255, 0.04)) 30%, transparent);
3527
+ color: var(--color-fd-muted-foreground, #71717a);
3528
+ cursor: pointer;
3529
+ transition: all 200ms;
3530
+ }
3531
+
3532
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-suggestion:hover {
3533
+ background: color-mix(in srgb, var(--color-fd-muted, rgba(255, 255, 255, 0.04)) 50%, transparent);
3534
+ color: var(--color-fd-foreground, #e4e4e7);
3535
+ border-color: var(--color-fd-border, rgba(255, 255, 255, 0.1));
3536
+ }
3537
+
3538
+ /* --------- Footer bar --------------------------------------------------------------------------------------------------------------------------------------------- */
3539
+
3540
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-footer-bar {
3541
+ display: flex;
3542
+ align-items: center;
3543
+ gap: 4px;
3544
+ padding: 8px 16px;
3545
+ border-top: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.06));
3546
+ background: color-mix(
3547
+ in srgb,
3548
+ var(--color-fd-accent, rgba(255, 255, 255, 0.03)) 40%,
3549
+ transparent
3550
+ );
3551
+ font-size: 12px;
3552
+ color: var(--color-fd-muted-foreground, #71717a);
3553
+ }
3554
+
3555
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-clear-btn {
3556
+ display: flex;
3557
+ align-items: center;
3558
+ gap: 4px;
3559
+ background: transparent;
3560
+ border: none;
3561
+ cursor: pointer;
3562
+ font-family: inherit;
3563
+ font-size: 12px;
3564
+ color: var(--color-fd-muted-foreground, #71717a);
3565
+ transition: color 200ms;
3566
+ padding: 0;
3567
+ }
3568
+
3569
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-clear-btn:hover {
3570
+ color: var(--color-fd-foreground, #e4e4e7);
3571
+ }
3572
+
3573
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-clear-btn[aria-disabled="true"] {
3574
+ opacity: 0.5;
3575
+ cursor: not-allowed;
3576
+ }
3577
+
3578
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-footer-hint {
3579
+ flex: 1;
3580
+ }
3581
+
3582
+ /* --------- Closed trigger button ------------------------------------------------------------------------------------------------------------ */
3583
+
3584
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-trigger-btn {
3585
+ display: flex;
3586
+ align-items: center;
3587
+ justify-content: center;
3588
+ gap: 8px;
3589
+ padding: 8px 12px;
3590
+ height: 40px;
3591
+ border-radius: 16px;
3592
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
3593
+ background: color-mix(in srgb, var(--color-fd-secondary, #f4f4f5) 80%, transparent);
3594
+ backdrop-filter: blur(4px);
3595
+ color: var(--color-fd-muted-foreground, #71717a);
3596
+ font-family: inherit;
3597
+ font-size: 14px;
3598
+ cursor: pointer;
3599
+ box-shadow: 0 1px 3px color-mix(in srgb, var(--color-fd-background, #000) 20%, transparent);
3600
+ transition:
3601
+ transform 150ms,
3602
+ background 150ms,
3603
+ color 150ms;
3604
+ animation: fd-ai-fade-in 300ms ease-out;
3605
+ white-space: nowrap;
3606
+ }
3607
+
3608
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-trigger-btn:hover {
3609
+ background: var(--color-fd-accent);
3610
+ color: var(--color-fd-accent-foreground);
3611
+ transform: scale(1.03);
3612
+ }
3613
+
3614
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-trigger-btn:active {
3615
+ transform: scale(0.97);
3616
+ }