@farming-labs/theme 0.2.44 → 0.2.46

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,3660 @@
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-text,
1708
+ #nd-docs-layout[data-fd-framework] .fd-codeblock-title figcaption {
1709
+ min-width: 0;
1710
+ flex: 1;
1711
+ overflow: hidden;
1712
+ text-overflow: ellipsis;
1713
+ white-space: nowrap;
1714
+ }
1715
+
1716
+ #nd-docs-layout[data-fd-framework] .fd-codeblock-title + .fd-copy-btn ~ pre {
1717
+ border-top-left-radius: 0 !important;
1718
+ border-top-right-radius: 0 !important;
1719
+ }
1720
+
1721
+ #nd-docs-layout[data-fd-framework] .fd-codeblock:has(.fd-codeblock-title) pre {
1722
+ border-top-left-radius: 0 !important;
1723
+ border-top-right-radius: 0 !important;
1724
+ }
1725
+
1726
+ #nd-docs-layout[data-fd-framework] .fd-codeblock-actions {
1727
+ display: inline-flex;
1728
+ align-items: center;
1729
+ justify-content: center;
1730
+ flex: 0 0 auto;
1731
+ margin-left: auto;
1732
+ }
1733
+
1734
+ #nd-docs-layout[data-fd-framework] .fd-codeblock-actions-floating {
1735
+ position: absolute;
1736
+ top: 4px;
1737
+ right: 4px;
1738
+ z-index: 2;
1739
+ }
1740
+
1741
+ #nd-docs-layout[data-fd-framework] .fd-copy-btn {
1742
+ position: absolute;
1743
+ top: 4px;
1744
+ right: 4px;
1745
+ z-index: 2;
1746
+ display: inline-flex;
1747
+ align-items: center;
1748
+ justify-content: center;
1749
+ width: 32px;
1750
+ height: 32px;
1751
+ padding: 0;
1752
+ background: var(--color-fd-secondary);
1753
+ border: 1px solid var(--color-fd-border);
1754
+ border-radius: 6px;
1755
+ color: var(--color-fd-muted-foreground);
1756
+ cursor: pointer;
1757
+ opacity: 0;
1758
+ transition:
1759
+ opacity 0.15s,
1760
+ color 0.15s,
1761
+ background 0.15s;
1762
+ }
1763
+
1764
+ #nd-docs-layout[data-fd-framework] .fd-codeblock-actions .fd-copy-btn,
1765
+ #nd-docs-layout[data-fd-framework] .fd-codeblock-actions-floating .fd-copy-btn,
1766
+ #nd-docs-layout[data-fd-framework] .fd-codeblock-title .fd-copy-btn {
1767
+ position: static;
1768
+ width: 28px;
1769
+ height: 28px;
1770
+ }
1771
+
1772
+ #nd-docs-layout[data-fd-framework] .fd-codeblock-title .fd-copy-btn {
1773
+ opacity: 1;
1774
+ }
1775
+
1776
+ #nd-docs-layout[data-fd-framework] .fd-codeblock:hover .fd-copy-btn {
1777
+ opacity: 1;
1778
+ }
1779
+
1780
+ #nd-docs-layout[data-fd-framework] .fd-copy-btn:hover {
1781
+ color: var(--color-fd-foreground);
1782
+ background: var(--color-fd-accent);
1783
+ }
1784
+
1785
+ #nd-docs-layout[data-fd-framework] .fd-copy-btn-copied {
1786
+ color: hsl(142, 71%, 45%) !important;
1787
+ opacity: 1 !important;
1788
+ }
1789
+
1790
+ /* --------- Tabs ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
1791
+
1792
+ #nd-docs-layout[data-fd-framework] .fd-tabs {
1793
+ margin: 16px 0;
1794
+ border: 1px solid var(--color-fd-border);
1795
+ border-radius: 12px;
1796
+ overflow: hidden;
1797
+ background: var(--color-fd-card);
1798
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
1799
+ }
1800
+
1801
+ #nd-docs-layout[data-fd-framework] .fd-tabs-list {
1802
+ display: flex;
1803
+ border-bottom: 1px solid var(--color-fd-border);
1804
+ background: transparent;
1805
+ overflow-x: auto;
1806
+ }
1807
+
1808
+ #nd-docs-layout[data-fd-framework] .fd-tab-trigger {
1809
+ padding: 8px 14px;
1810
+ font-size: 13px;
1811
+ font-weight: 500;
1812
+ font-family: inherit;
1813
+ color: var(--color-fd-muted-foreground);
1814
+ background: transparent;
1815
+ border: none;
1816
+ border-bottom: 2px solid transparent;
1817
+ cursor: pointer;
1818
+ transition:
1819
+ color 0.15s,
1820
+ border-color 0.15s;
1821
+ white-space: nowrap;
1822
+ }
1823
+
1824
+ #nd-docs-layout[data-fd-framework] .fd-tab-trigger:hover {
1825
+ color: var(--color-fd-foreground);
1826
+ }
1827
+
1828
+ #nd-docs-layout[data-fd-framework] .fd-tab-trigger.fd-tab-active,
1829
+ #nd-docs-layout[data-fd-framework] .fd-tab-trigger[data-state="active"] {
1830
+ color: var(--color-fd-foreground);
1831
+ font-weight: 600;
1832
+ border-bottom-color: var(--color-fd-primary);
1833
+ }
1834
+
1835
+ #nd-docs-layout[data-fd-framework] .fd-tab-panel {
1836
+ display: none;
1837
+ }
1838
+
1839
+ #nd-docs-layout[data-fd-framework] .fd-tab-panel[data-state="inactive"],
1840
+ #nd-docs-layout[data-fd-framework] .fd-code-group-panel[data-state="inactive"] {
1841
+ display: none;
1842
+ }
1843
+
1844
+ #nd-docs-layout[data-fd-framework] .fd-tab-panel-active,
1845
+ #nd-docs-layout[data-fd-framework] .fd-tab-panel[data-state="active"],
1846
+ #nd-docs-layout[data-fd-framework] .fd-code-group-panel[data-state="active"] {
1847
+ display: block;
1848
+ }
1849
+
1850
+ #nd-docs-layout[data-fd-framework] .fd-tab-panel .fd-codeblock {
1851
+ margin: 0;
1852
+ }
1853
+
1854
+ #nd-docs-layout[data-fd-framework] .fd-tab-panel .fd-codeblock pre {
1855
+ border: none;
1856
+ border-radius: 0;
1857
+ margin: 0;
1858
+ background: transparent !important;
1859
+ }
1860
+
1861
+ #nd-docs-layout[data-fd-framework] .fd-tab-panel .fd-copy-btn {
1862
+ top: 6px;
1863
+ right: 6px;
1864
+ }
1865
+
1866
+ #nd-docs-layout[data-fd-framework] .fd-page-body .fd-table-wrapper {
1867
+ margin: 0 0 24px;
1868
+ overflow-x: auto;
1869
+ border: 0;
1870
+ border-radius: 0;
1871
+ }
1872
+
1873
+ #nd-docs-layout[data-fd-framework] .fd-page-body table {
1874
+ width: 100%;
1875
+ table-layout: auto;
1876
+ border-collapse: separate;
1877
+ border-spacing: 0;
1878
+ overflow: hidden;
1879
+ border: 1px solid var(--color-fd-border);
1880
+ border-radius: var(--radius-lg, 8px);
1881
+ background: var(--color-fd-card);
1882
+ font-size: 0.875em;
1883
+ line-height: 1.7142857;
1884
+ }
1885
+
1886
+ #nd-docs-layout[data-fd-framework] .fd-page-body th {
1887
+ padding: 10px;
1888
+ text-align: left;
1889
+ font-weight: 600;
1890
+ font-size: 0.875rem;
1891
+ color: var(--color-fd-foreground);
1892
+ background: var(--color-fd-muted);
1893
+ border-inline-start: 1px solid var(--color-fd-border);
1894
+ border-bottom: 1px solid var(--color-fd-border);
1895
+ white-space: nowrap;
1896
+ }
1897
+
1898
+ #nd-docs-layout[data-fd-framework] .fd-page-body th:first-child {
1899
+ border-inline-start: none;
1900
+ }
1901
+
1902
+ #nd-docs-layout[data-fd-framework] .fd-page-body td {
1903
+ padding: 10px;
1904
+ text-align: left;
1905
+ border-inline-start: 1px solid var(--color-fd-border);
1906
+ border-bottom: 1px solid var(--color-fd-border);
1907
+ color: var(--color-fd-foreground);
1908
+ }
1909
+
1910
+ #nd-docs-layout[data-fd-framework] .fd-page-body td:first-child {
1911
+ border-inline-start: none;
1912
+ }
1913
+
1914
+ #nd-docs-layout[data-fd-framework] .fd-page-body tbody tr:last-child td {
1915
+ border-bottom: none;
1916
+ }
1917
+
1918
+ #nd-docs-layout[data-fd-framework] .fd-page-body td code {
1919
+ font-size: 12px;
1920
+ padding: 1px 5px;
1921
+ background: var(--color-fd-secondary);
1922
+ border: 1px solid var(--color-fd-border);
1923
+ border-radius: 4px;
1924
+ white-space: nowrap;
1925
+ }
1926
+
1927
+ #nd-docs-layout[data-fd-framework] .fd-page-body img {
1928
+ max-width: 100%;
1929
+ border-radius: 8px;
1930
+ margin: 16px 0;
1931
+ }
1932
+
1933
+ /* --------- Animations --------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
1934
+
1935
+ #nd-docs-layout[data-fd-framework] .fd-toc-empty {
1936
+ font-size: 13px;
1937
+ color: var(--color-fd-muted-foreground);
1938
+ padding: 4px 0;
1939
+ }
1940
+
1941
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-folder-label {
1942
+ display: flex;
1943
+ align-items: center;
1944
+ gap: 8px;
1945
+ }
1946
+
1947
+ @keyframes fd-fade-in {
1948
+ from {
1949
+ opacity: 0;
1950
+ }
1951
+ to {
1952
+ opacity: 1;
1953
+ }
1954
+ }
1955
+
1956
+ @keyframes fd-slide-up {
1957
+ from {
1958
+ opacity: 0;
1959
+ transform: translateY(8px) scale(0.98);
1960
+ }
1961
+ to {
1962
+ opacity: 1;
1963
+ transform: translateY(0) scale(1);
1964
+ }
1965
+ }
1966
+
1967
+ /* --------- Callout / Admonition ------------------------------------------------------------------------------------------------------------------------------------ */
1968
+
1969
+ #nd-docs-layout[data-fd-framework] .fd-callout {
1970
+ position: relative;
1971
+ display: flex;
1972
+ gap: 10px;
1973
+ margin: 16px 0;
1974
+ padding: 12px 16px;
1975
+ border: 1px solid var(--color-fd-border);
1976
+ border-radius: 8px;
1977
+ background: var(--color-fd-card);
1978
+ font-size: 14px;
1979
+ line-height: 1.6;
1980
+ overflow: hidden;
1981
+ }
1982
+
1983
+ #nd-docs-layout[data-fd-framework] .fd-callout-indicator {
1984
+ position: absolute;
1985
+ left: 0;
1986
+ top: 0;
1987
+ bottom: 0;
1988
+ width: 3px;
1989
+ border-radius: 8px 0 0 8px;
1990
+ }
1991
+
1992
+ #nd-docs-layout[data-fd-framework] .fd-callout-note .fd-callout-indicator {
1993
+ background: hsl(221, 83%, 53%);
1994
+ }
1995
+ #nd-docs-layout[data-fd-framework] .fd-callout-warning .fd-callout-indicator {
1996
+ background: hsl(38, 92%, 50%);
1997
+ }
1998
+ #nd-docs-layout[data-fd-framework] .fd-callout-tip .fd-callout-indicator {
1999
+ background: hsl(142, 71%, 45%);
2000
+ }
2001
+ #nd-docs-layout[data-fd-framework] .fd-callout-important .fd-callout-indicator {
2002
+ background: hsl(262, 83%, 58%);
2003
+ }
2004
+ #nd-docs-layout[data-fd-framework] .fd-callout-caution .fd-callout-indicator {
2005
+ background: hsl(0, 72%, 51%);
2006
+ }
2007
+
2008
+ #nd-docs-layout[data-fd-framework] .fd-callout-icon {
2009
+ flex-shrink: 0;
2010
+ margin-top: 2px;
2011
+ }
2012
+
2013
+ #nd-docs-layout[data-fd-framework] .fd-callout-note .fd-callout-icon {
2014
+ color: hsl(221, 83%, 53%);
2015
+ }
2016
+ #nd-docs-layout[data-fd-framework] .fd-callout-warning .fd-callout-icon {
2017
+ color: hsl(38, 92%, 50%);
2018
+ }
2019
+ #nd-docs-layout[data-fd-framework] .fd-callout-tip .fd-callout-icon {
2020
+ color: hsl(142, 71%, 45%);
2021
+ }
2022
+ #nd-docs-layout[data-fd-framework] .fd-callout-important .fd-callout-icon {
2023
+ color: hsl(262, 83%, 58%);
2024
+ }
2025
+ #nd-docs-layout[data-fd-framework] .fd-callout-caution .fd-callout-icon {
2026
+ color: hsl(0, 72%, 51%);
2027
+ }
2028
+
2029
+ #nd-docs-layout[data-fd-framework] .fd-callout-content {
2030
+ flex: 1;
2031
+ min-width: 0;
2032
+ }
2033
+
2034
+ #nd-docs-layout[data-fd-framework] .fd-callout-title {
2035
+ font-weight: 600;
2036
+ font-size: 13px;
2037
+ }
2038
+
2039
+ #nd-docs-layout[data-fd-framework] .fd-callout-note .fd-callout-title {
2040
+ color: hsl(221, 83%, 53%);
2041
+ }
2042
+ #nd-docs-layout[data-fd-framework] .fd-callout-warning .fd-callout-title {
2043
+ color: hsl(38, 92%, 50%);
2044
+ }
2045
+ #nd-docs-layout[data-fd-framework] .fd-callout-tip .fd-callout-title {
2046
+ color: hsl(142, 71%, 45%);
2047
+ }
2048
+ #nd-docs-layout[data-fd-framework] .fd-callout-important .fd-callout-title {
2049
+ color: hsl(262, 83%, 58%);
2050
+ }
2051
+ #nd-docs-layout[data-fd-framework] .fd-callout-caution .fd-callout-title {
2052
+ color: hsl(0, 72%, 51%);
2053
+ }
2054
+
2055
+ #nd-docs-layout[data-fd-framework] .fd-callout-content p:last-child {
2056
+ margin-bottom: 0;
2057
+ }
2058
+
2059
+ /* --------- Edit on GitHub ------------------------------------------------------------------------------------------------------------------------------------------------------ */
2060
+
2061
+ #nd-docs-layout[data-fd-framework] .fd-page-footer {
2062
+ display: block;
2063
+ margin-top: auto;
2064
+ padding-top: 24px;
2065
+ }
2066
+
2067
+ #nd-docs-layout[data-fd-framework] .fd-edit-on-github {
2068
+ display: flex;
2069
+ flex-wrap: wrap;
2070
+ align-items: center;
2071
+ width: 100%;
2072
+ gap: 0.75rem 16px;
2073
+ margin-top: 0;
2074
+ padding-top: 0;
2075
+ border-top: 0;
2076
+ font-size: 13px;
2077
+ }
2078
+
2079
+ #nd-docs-layout[data-fd-framework] .fd-edit-on-github > a {
2080
+ display: inline-flex;
2081
+ align-items: center;
2082
+ justify-content: center;
2083
+ gap: 6px;
2084
+ padding: 6px 8px;
2085
+ border: 1px solid var(--color-fd-border);
2086
+ border-radius: 0.375rem;
2087
+ background: var(--color-fd-secondary);
2088
+ color: var(--color-fd-secondary-foreground);
2089
+ font-size: 12px;
2090
+ font-weight: 500;
2091
+ line-height: 16px;
2092
+ text-decoration: none;
2093
+ transition:
2094
+ background-color 0.15s,
2095
+ color 0.15s,
2096
+ border-color 0.15s;
2097
+ }
2098
+
2099
+ #nd-docs-layout[data-fd-framework] .fd-edit-on-github > a:hover {
2100
+ background: var(--color-fd-accent);
2101
+ color: var(--color-fd-accent-foreground);
2102
+ }
2103
+
2104
+ #nd-docs-layout[data-fd-framework] .fd-last-modified {
2105
+ color: var(--color-fd-muted-foreground);
2106
+ font-size: var(--fd-small-size, 0.75rem);
2107
+ font-weight: var(--fd-small-weight, 400);
2108
+ }
2109
+
2110
+ @media (max-width: 640px) {
2111
+ #nd-docs-layout[data-fd-framework] .fd-last-modified {
2112
+ width: 100%;
2113
+ }
2114
+ }
2115
+
2116
+ #nd-docs-layout[data-fd-framework] .fd-llms-txt-links {
2117
+ display: inline-flex;
2118
+ align-items: center;
2119
+ gap: 0.5rem;
2120
+ }
2121
+
2122
+ #nd-docs-layout[data-fd-framework] .fd-llms-txt-link {
2123
+ display: inline-flex;
2124
+ align-items: center;
2125
+ color: var(--color-fd-muted-foreground);
2126
+ font-size: 0.75rem;
2127
+ font-family: var(--fd-font-mono, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace);
2128
+ line-height: 1.75rem;
2129
+ text-decoration: none;
2130
+ padding: 0.125rem 0.375rem;
2131
+ border-radius: 0.25rem;
2132
+ border: 1px solid var(--color-fd-border, hsl(0 0% 80% / 50%));
2133
+ transition: color 150ms, border-color 150ms;
2134
+ }
2135
+
2136
+ #nd-docs-layout[data-fd-framework] .fd-llms-txt-link:hover {
2137
+ color: var(--color-fd-foreground);
2138
+ border-color: var(--color-fd-foreground);
2139
+ text-decoration: none;
2140
+ }
2141
+
2142
+ /* --------- Previous / Next Navigation ------------------------------------------------------------------------------------------------------------------ */
2143
+
2144
+ #nd-docs-layout[data-fd-framework] .fd-page-nav {
2145
+ display: grid;
2146
+ grid-template-columns: 1fr;
2147
+ gap: 16px;
2148
+ width: 100%;
2149
+ margin-top: 16px;
2150
+ padding-top: 0;
2151
+ border-top: 0;
2152
+ }
2153
+
2154
+ #nd-docs-layout[data-fd-framework] .fd-page-nav:has(.fd-page-nav-prev):has(.fd-page-nav-next) {
2155
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2156
+ }
2157
+
2158
+ #nd-docs-layout[data-fd-framework] .fd-page-nav > div:empty {
2159
+ display: none;
2160
+ }
2161
+
2162
+ #nd-docs-layout[data-fd-framework] .fd-page-nav-card {
2163
+ display: flex;
2164
+ flex-direction: column;
2165
+ gap: 8px;
2166
+ min-width: 0;
2167
+ min-height: 95px;
2168
+ padding: 16px;
2169
+ border: 1px solid var(--color-fd-border);
2170
+ border-radius: 8px;
2171
+ text-decoration: none;
2172
+ color: var(--color-fd-foreground);
2173
+ transition:
2174
+ background-color 0.15s,
2175
+ border-color 0.15s;
2176
+ }
2177
+
2178
+ #nd-docs-layout[data-fd-framework] .fd-page-nav-card:hover {
2179
+ background: var(--color-fd-accent);
2180
+ border-color: var(--color-fd-border);
2181
+ }
2182
+
2183
+ #nd-docs-layout[data-fd-framework] .fd-page-nav-next {
2184
+ text-align: right;
2185
+ align-items: flex-end;
2186
+ }
2187
+
2188
+ #nd-docs-layout[data-fd-framework] .fd-page-nav-label,
2189
+ #nd-docs-layout[data-fd-framework] .fd-page-nav-title {
2190
+ display: inline-flex;
2191
+ align-items: center;
2192
+ gap: 6px;
2193
+ max-width: 100%;
2194
+ min-height: 0;
2195
+ overflow: hidden;
2196
+ color: var(--color-fd-foreground);
2197
+ font-size: var(--fd-body-size, 1rem);
2198
+ font-weight: 500;
2199
+ line-height: var(--fd-body-line-height, 1.65);
2200
+ overflow-wrap: anywhere;
2201
+ }
2202
+
2203
+ #nd-docs-layout[data-fd-framework] .fd-page-nav-title svg {
2204
+ width: 1rem;
2205
+ height: 1rem;
2206
+ flex-shrink: 0;
2207
+ }
2208
+
2209
+ #nd-docs-layout[data-fd-framework] .fd-page-nav-description {
2210
+ display: block;
2211
+ max-width: 100%;
2212
+ min-height: 0;
2213
+ overflow: hidden;
2214
+ color: var(--color-fd-muted-foreground);
2215
+ font-size: var(--fd-body-size, 1rem);
2216
+ font-weight: var(--fd-body-weight, 400);
2217
+ line-height: var(--fd-body-line-height, 1.65);
2218
+ text-overflow: ellipsis;
2219
+ white-space: nowrap;
2220
+ }
2221
+
2222
+ /* --------- Sidebar icon --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
2223
+
2224
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-icon {
2225
+ display: inline-flex;
2226
+ align-items: center;
2227
+ flex-shrink: 0;
2228
+ opacity: 0.7;
2229
+ }
2230
+
2231
+ #nd-docs-layout[data-fd-framework] .fd-sidebar-link-active .fd-sidebar-icon {
2232
+ opacity: 1;
2233
+ }
2234
+
2235
+ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2236
+ * AI Chat & Search Dialog - base styles (fd-ai-*)
2237
+ * --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
2238
+
2239
+ @keyframes fd-ai-fade-in {
2240
+ from {
2241
+ opacity: 0;
2242
+ }
2243
+ to {
2244
+ opacity: 1;
2245
+ }
2246
+ }
2247
+
2248
+ @keyframes fd-ai-slide-up {
2249
+ from {
2250
+ opacity: 0;
2251
+ transform: translate(-50%, -48%) scale(0.96);
2252
+ }
2253
+ to {
2254
+ opacity: 1;
2255
+ transform: translate(-50%, -50%) scale(1);
2256
+ }
2257
+ }
2258
+
2259
+ @keyframes fd-ai-float-in {
2260
+ from {
2261
+ opacity: 0;
2262
+ transform: translateY(12px) scale(0.95);
2263
+ }
2264
+ to {
2265
+ opacity: 1;
2266
+ transform: translateY(0) scale(1);
2267
+ }
2268
+ }
2269
+
2270
+ @keyframes fd-ai-float-center-in {
2271
+ from {
2272
+ opacity: 0;
2273
+ transform: translate(-50%, -48%) scale(0.96);
2274
+ }
2275
+ to {
2276
+ opacity: 1;
2277
+ transform: translate(-50%, -50%) scale(1);
2278
+ }
2279
+ }
2280
+
2281
+ #nd-docs-layout[data-fd-framework] .fd-ai-overlay {
2282
+ position: fixed;
2283
+ inset: 0;
2284
+ z-index: 9998;
2285
+ background: rgba(0, 0, 0, 0.5);
2286
+ backdrop-filter: blur(4px);
2287
+ -webkit-backdrop-filter: blur(4px);
2288
+ animation: fd-ai-fade-in 150ms ease-out;
2289
+ }
2290
+
2291
+ #nd-docs-layout[data-fd-framework] .fd-ai-dialog {
2292
+ position: fixed;
2293
+ z-index: 9999;
2294
+ display: flex;
2295
+ flex-direction: column;
2296
+ background: var(--color-fd-popover);
2297
+ border: 1px solid var(--color-fd-border);
2298
+ border-radius: 12px;
2299
+ box-shadow:
2300
+ 0 0 0 1px color-mix(in srgb, var(--color-fd-foreground) 5%, transparent),
2301
+ 0 16px 48px -8px rgba(0, 0, 0, 0.35);
2302
+ overflow: hidden;
2303
+ color: var(--color-fd-foreground);
2304
+ font-family: var(--fd-font-sans, system-ui, -apple-system, sans-serif);
2305
+ }
2306
+
2307
+ #nd-docs-layout[data-fd-framework] .fd-ai-tab-bar {
2308
+ display: flex;
2309
+ align-items: stretch;
2310
+ gap: 0;
2311
+ padding: 0;
2312
+ border-bottom: 1px solid var(--color-fd-border);
2313
+ background: var(--color-fd-card);
2314
+ }
2315
+
2316
+ #nd-docs-layout[data-fd-framework] .fd-ai-tab {
2317
+ display: inline-flex;
2318
+ align-items: center;
2319
+ justify-content: center;
2320
+ gap: 6px;
2321
+ padding: 10px 20px;
2322
+ font-size: 13px;
2323
+ font-weight: 500;
2324
+ border: none;
2325
+ border-bottom: 2px solid transparent;
2326
+ cursor: pointer;
2327
+ transition:
2328
+ color 150ms,
2329
+ border-color 150ms,
2330
+ background-color 150ms;
2331
+ background: transparent;
2332
+ color: var(--color-fd-muted-foreground);
2333
+ font-family: inherit;
2334
+ margin-bottom: -1px;
2335
+ position: relative;
2336
+ }
2337
+
2338
+ #nd-docs-layout[data-fd-framework] .fd-ai-tab svg {
2339
+ opacity: 0.7;
2340
+ flex-shrink: 0;
2341
+ }
2342
+
2343
+ #nd-docs-layout[data-fd-framework] .fd-ai-tab[data-active="true"] {
2344
+ color: var(--color-fd-foreground);
2345
+ border-bottom-color: var(--color-fd-primary);
2346
+ background: transparent;
2347
+ }
2348
+
2349
+ #nd-docs-layout[data-fd-framework] .fd-ai-tab[data-active="true"] svg {
2350
+ opacity: 1;
2351
+ }
2352
+
2353
+ #nd-docs-layout[data-fd-framework] .fd-ai-tab:hover:not([data-active="true"]) {
2354
+ color: var(--color-fd-foreground);
2355
+ background: var(--color-fd-accent);
2356
+ }
2357
+
2358
+ #nd-docs-layout[data-fd-framework] .fd-ai-esc {
2359
+ padding: 2px 8px;
2360
+ border-radius: 6px;
2361
+ border: 1px solid var(--color-fd-border);
2362
+ font-size: 11px;
2363
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
2364
+ color: var(--color-fd-muted-foreground);
2365
+ background: var(--color-fd-secondary);
2366
+ line-height: 1.4;
2367
+ }
2368
+
2369
+ /* --------- Header --------------------------------------------------------------------------------------------------------------------------------------------------------- */
2370
+
2371
+ #nd-docs-layout[data-fd-framework] .fd-ai-header {
2372
+ display: flex;
2373
+ align-items: center;
2374
+ gap: 8px;
2375
+ padding: 12px 16px;
2376
+ border-bottom: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.06));
2377
+ }
2378
+
2379
+ #nd-docs-layout[data-fd-framework] .fd-ai-header-title {
2380
+ font-size: 14px;
2381
+ font-weight: 600;
2382
+ flex: 1;
2383
+ }
2384
+
2385
+ #nd-docs-layout[data-fd-framework] .fd-ai-close-btn {
2386
+ display: flex;
2387
+ align-items: center;
2388
+ justify-content: center;
2389
+ width: 28px;
2390
+ height: 28px;
2391
+ border-radius: var(--radius, 6px);
2392
+ border: none;
2393
+ cursor: pointer;
2394
+ background: transparent;
2395
+ color: var(--color-fd-muted-foreground, #71717a);
2396
+ transition: all 150ms;
2397
+ }
2398
+
2399
+ #nd-docs-layout[data-fd-framework] .fd-ai-close-btn:hover {
2400
+ color: var(--color-fd-foreground, #e4e4e7);
2401
+ background: var(--color-fd-accent, rgba(255, 255, 255, 0.06));
2402
+ }
2403
+
2404
+ #nd-docs-layout[data-fd-framework] .fd-ai-search-wrap {
2405
+ display: flex;
2406
+ align-items: center;
2407
+ gap: 10px;
2408
+ padding: 12px 16px;
2409
+ border-bottom: 1px solid var(--color-fd-border);
2410
+ color: var(--color-fd-muted-foreground);
2411
+ }
2412
+
2413
+ #nd-docs-layout[data-fd-framework] .fd-ai-search-wrap svg {
2414
+ flex-shrink: 0;
2415
+ opacity: 0.5;
2416
+ }
2417
+
2418
+ #nd-docs-layout[data-fd-framework] .fd-ai-input {
2419
+ flex: 1;
2420
+ background: transparent;
2421
+ border: none;
2422
+ outline: none;
2423
+ color: var(--color-fd-foreground);
2424
+ font-size: 14px;
2425
+ font-family: inherit;
2426
+ }
2427
+
2428
+ #nd-docs-layout[data-fd-framework] .fd-ai-input::placeholder {
2429
+ color: var(--color-fd-muted-foreground);
2430
+ opacity: 0.7;
2431
+ }
2432
+
2433
+ #nd-docs-layout[data-fd-framework] .fd-ai-results {
2434
+ flex: 1;
2435
+ overflow-y: auto;
2436
+ padding: 8px;
2437
+ max-height: 360px;
2438
+ }
2439
+
2440
+ #nd-docs-layout[data-fd-framework] .fd-ai-result {
2441
+ display: flex;
2442
+ align-items: center;
2443
+ gap: 10px;
2444
+ width: 100%;
2445
+ padding: 10px 12px;
2446
+ border: none;
2447
+ border-radius: 8px;
2448
+ cursor: pointer;
2449
+ text-align: left;
2450
+ font-size: 14px;
2451
+ font-family: inherit;
2452
+ transition:
2453
+ background 100ms,
2454
+ color 100ms;
2455
+ color: var(--color-fd-foreground);
2456
+ background: transparent;
2457
+ color: var(--color-fd-foreground);
2458
+ }
2459
+
2460
+ #nd-docs-layout[data-fd-framework] .fd-ai-result svg {
2461
+ flex-shrink: 0;
2462
+ opacity: 0.5;
2463
+ }
2464
+
2465
+ #nd-docs-layout[data-fd-framework] .fd-ai-result[data-active="true"] {
2466
+ background: var(--color-fd-accent);
2467
+ color: var(--color-fd-foreground);
2468
+ }
2469
+
2470
+ #nd-docs-layout[data-fd-framework] .fd-ai-result[data-active="true"] svg {
2471
+ opacity: 1;
2472
+ }
2473
+
2474
+ #nd-docs-layout[data-fd-framework] .fd-ai-result-empty {
2475
+ padding: 48px 16px;
2476
+ text-align: center;
2477
+ color: var(--color-fd-muted-foreground);
2478
+ font-size: 14px;
2479
+ line-height: 1.6;
2480
+ }
2481
+
2482
+ #nd-docs-layout[data-fd-framework] .fd-ai-messages {
2483
+ flex: 1;
2484
+ overflow-y: auto;
2485
+ padding: 12px 16px;
2486
+ display: flex;
2487
+ flex-direction: column;
2488
+ gap: 16px;
2489
+ }
2490
+
2491
+ #nd-docs-layout[data-fd-framework] .fd-ai-empty {
2492
+ display: flex;
2493
+ flex-direction: column;
2494
+ align-items: center;
2495
+ justify-content: center;
2496
+ flex: 1;
2497
+ gap: 12px;
2498
+ padding: 24px 0;
2499
+ color: var(--color-fd-muted-foreground);
2500
+ }
2501
+
2502
+ #nd-docs-layout[data-fd-framework] .fd-ai-empty-title {
2503
+ font-size: 14px;
2504
+ font-weight: 500;
2505
+ }
2506
+
2507
+ #nd-docs-layout[data-fd-framework] .fd-ai-empty-desc {
2508
+ font-size: 12px;
2509
+ opacity: 0.7;
2510
+ text-align: center;
2511
+ max-width: 300px;
2512
+ line-height: 1.5;
2513
+ }
2514
+
2515
+ #nd-docs-layout[data-fd-framework] .fd-ai-suggestions {
2516
+ display: flex;
2517
+ flex-direction: column;
2518
+ gap: 6px;
2519
+ width: 100%;
2520
+ max-width: 360px;
2521
+ margin-top: 8px;
2522
+ }
2523
+
2524
+ #nd-docs-layout[data-fd-framework] .fd-ai-suggestion {
2525
+ display: flex;
2526
+ align-items: center;
2527
+ gap: 8px;
2528
+ padding: 8px 12px;
2529
+ border-radius: 8px;
2530
+ border: 1px solid var(--color-fd-border);
2531
+ background: var(--color-fd-background);
2532
+ opacity: 0.6;
2533
+ color: var(--color-fd-foreground);
2534
+ font-size: 13px;
2535
+ font-family: inherit;
2536
+ cursor: pointer;
2537
+ text-align: left;
2538
+ line-height: 1.4;
2539
+ transition: all 150ms;
2540
+ }
2541
+
2542
+ #nd-docs-layout[data-fd-framework] .fd-ai-suggestion:hover {
2543
+ background: var(--color-fd-accent);
2544
+ border-color: var(--color-fd-ring);
2545
+ opacity: 1;
2546
+ }
2547
+
2548
+ #nd-docs-layout[data-fd-framework] .fd-ai-msg {
2549
+ display: flex;
2550
+ flex-direction: column;
2551
+ gap: 4px;
2552
+ }
2553
+
2554
+ #nd-docs-layout[data-fd-framework] .fd-ai-msg[data-role="user"] {
2555
+ align-items: flex-end;
2556
+ }
2557
+
2558
+ #nd-docs-layout[data-fd-framework] .fd-ai-msg[data-role="assistant"] {
2559
+ align-items: flex-start;
2560
+ }
2561
+
2562
+ #nd-docs-layout[data-fd-framework] .fd-ai-msg-label {
2563
+ font-size: 10px;
2564
+ font-weight: 500;
2565
+ text-transform: uppercase;
2566
+ letter-spacing: 0.05em;
2567
+ color: var(--color-fd-muted-foreground);
2568
+ padding: 0 2px;
2569
+ }
2570
+
2571
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-user {
2572
+ background: var(--color-fd-primary);
2573
+ color: var(--color-fd-primary-foreground);
2574
+ padding: 8px 14px;
2575
+ border-radius: 14px;
2576
+ font-size: 13px;
2577
+ line-height: 1.5;
2578
+ max-width: 85%;
2579
+ word-break: break-word;
2580
+ }
2581
+
2582
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai {
2583
+ background: var(--color-fd-muted, rgba(255, 255, 255, 0.04));
2584
+ padding: 10px 14px;
2585
+ border-radius: var(--radius, 14px);
2586
+ font-size: 13px;
2587
+ line-height: 1.6;
2588
+ max-width: 95%;
2589
+ word-break: break-word;
2590
+ animation: fd-ai-msg-in 300ms ease-out;
2591
+ }
2592
+
2593
+ @keyframes fd-ai-msg-in {
2594
+ from { opacity: 0; transform: translateY(6px); }
2595
+ to { opacity: 1; transform: translateY(0); }
2596
+ }
2597
+
2598
+ #nd-docs-layout[data-fd-framework] .fd-ai-chat-footer {
2599
+ padding: 8px 12px 12px;
2600
+ border-top: 1px solid var(--color-fd-border);
2601
+ }
2602
+
2603
+ #nd-docs-layout[data-fd-framework] .fd-ai-clear-btn {
2604
+ font-size: 11px;
2605
+ color: var(--color-fd-muted-foreground);
2606
+ background: transparent;
2607
+ border: none;
2608
+ cursor: pointer;
2609
+ padding: 2px 8px;
2610
+ border-radius: 4px;
2611
+ font-family: inherit;
2612
+ }
2613
+
2614
+ #nd-docs-layout[data-fd-framework] .fd-ai-clear-btn:hover {
2615
+ color: var(--color-fd-foreground);
2616
+ }
2617
+
2618
+ #nd-docs-layout[data-fd-framework] .fd-ai-input-wrap {
2619
+ display: flex;
2620
+ align-items: center;
2621
+ gap: 8px;
2622
+ background: var(--color-fd-muted);
2623
+ border-radius: 10px;
2624
+ padding: 4px 4px 4px 14px;
2625
+ border: 1px solid var(--color-fd-border);
2626
+ }
2627
+
2628
+ #nd-docs-layout[data-fd-framework] .fd-ai-send-btn {
2629
+ display: flex;
2630
+ align-items: center;
2631
+ justify-content: center;
2632
+ width: 32px;
2633
+ height: 32px;
2634
+ border-radius: 8px;
2635
+ border: none;
2636
+ transition: all 150ms;
2637
+ cursor: default;
2638
+ background: var(--color-fd-muted);
2639
+ color: var(--color-fd-muted-foreground);
2640
+ }
2641
+
2642
+ #nd-docs-layout[data-fd-framework] .fd-ai-send-btn[data-active="true"] {
2643
+ cursor: pointer;
2644
+ background: var(--color-fd-primary);
2645
+ color: var(--color-fd-primary-foreground);
2646
+ }
2647
+
2648
+ #nd-docs-layout[data-fd-framework] .fd-ai-loader {
2649
+ display: inline-flex;
2650
+ align-items: center;
2651
+ gap: 6px;
2652
+ animation: fd-ai-loader-in 300ms ease-out;
2653
+ }
2654
+
2655
+ @keyframes fd-ai-loader-in {
2656
+ from { opacity: 0; transform: translateY(4px); }
2657
+ to { opacity: 1; transform: translateY(0); }
2658
+ }
2659
+
2660
+ #nd-docs-layout[data-fd-framework] .fd-ai-loader-shimmer-text {
2661
+ font-size: 13px;
2662
+ font-weight: 500;
2663
+ 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%);
2664
+ background-size: 200% auto;
2665
+ background-clip: text;
2666
+ -webkit-background-clip: text;
2667
+ color: transparent;
2668
+ animation: fd-ai-shimmer-text 3s linear infinite;
2669
+ }
2670
+
2671
+ @keyframes fd-ai-shimmer-text {
2672
+ 0% { background-position: 150% center; }
2673
+ 100% { background-position: -150% center; }
2674
+ }
2675
+
2676
+ #nd-docs-layout[data-fd-framework] .fd-ai-loader-typing-dots {
2677
+ display: inline-flex;
2678
+ align-items: center;
2679
+ gap: 2px;
2680
+ }
2681
+
2682
+ #nd-docs-layout[data-fd-framework] .fd-ai-loader-typing-dot {
2683
+ width: 4px;
2684
+ height: 4px;
2685
+ border-radius: 50%;
2686
+ background: var(--color-fd-primary, #6366f1);
2687
+ animation: fd-ai-typing 1s infinite;
2688
+ }
2689
+
2690
+ #nd-docs-layout[data-fd-framework] .fd-ai-loader-typing-dot:nth-child(2) { animation-delay: 250ms; }
2691
+ #nd-docs-layout[data-fd-framework] .fd-ai-loader-typing-dot:nth-child(3) { animation-delay: 500ms; }
2692
+
2693
+ @keyframes fd-ai-typing {
2694
+ 0%, 100% { transform: translateY(0); opacity: 0.5; }
2695
+ 50% { transform: translateY(-2px); opacity: 1; }
2696
+ }
2697
+
2698
+ #nd-docs-layout[data-fd-framework] .fd-ai-streaming::after {
2699
+ content: "";
2700
+ display: inline-block;
2701
+ width: 2px;
2702
+ height: 1em;
2703
+ background: var(--color-fd-primary, #6366f1);
2704
+ margin-left: 2px;
2705
+ vertical-align: text-bottom;
2706
+ animation: fd-ai-cursor-blink 0.8s step-end infinite;
2707
+ }
2708
+
2709
+ @keyframes fd-ai-cursor-blink {
2710
+ 0%, 100% { opacity: 1; }
2711
+ 50% { opacity: 0; }
2712
+ }
2713
+
2714
+ /* --------- Markdown in AI responses --------------------------------------------------------------------------------------------------- */
2715
+
2716
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai code {
2717
+ background: var(--color-fd-muted, #1a1a2e);
2718
+ padding: 2px 6px;
2719
+ border-radius: var(--radius, 4px);
2720
+ font-size: 0.875em;
2721
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
2722
+ }
2723
+
2724
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai a {
2725
+ color: var(--color-fd-primary, #6366f1);
2726
+ text-decoration: underline;
2727
+ }
2728
+
2729
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai .fd-ai-code-block code {
2730
+ background: transparent;
2731
+ padding: 0;
2732
+ border-radius: 0;
2733
+ font-size: inherit;
2734
+ }
2735
+
2736
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai .fd-table-wrapper {
2737
+ margin: 8px 0;
2738
+ overflow: auto;
2739
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
2740
+ border-radius: var(--radius, 6px);
2741
+ }
2742
+
2743
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai table {
2744
+ width: 100%;
2745
+ border-collapse: separate;
2746
+ border-spacing: 0;
2747
+ margin: 0;
2748
+ font-size: 13px;
2749
+ }
2750
+
2751
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai th,
2752
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai td {
2753
+ border: 0;
2754
+ border-right: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
2755
+ border-bottom: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
2756
+ padding: 6px 12px;
2757
+ text-align: left;
2758
+ }
2759
+
2760
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai tr > :last-child {
2761
+ border-right: 0;
2762
+ }
2763
+
2764
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai tbody tr:last-child td {
2765
+ border-bottom: 0;
2766
+ }
2767
+
2768
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai th {
2769
+ background: var(--color-fd-muted, #1a1a2e);
2770
+ font-weight: 600;
2771
+ font-size: 12px;
2772
+ }
2773
+
2774
+ /* --------- Markdown prose inside AI bubbles (panel/modal/popover) --------------------- */
2775
+
2776
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h1,
2777
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h2,
2778
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h3,
2779
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h4,
2780
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h5,
2781
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h6 {
2782
+ font-weight: 600;
2783
+ color: var(--color-fd-foreground, #e4e4e7);
2784
+ }
2785
+
2786
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h1 {
2787
+ font-size: 1.25rem;
2788
+ margin: 14px 0 7px;
2789
+ line-height: 1.25;
2790
+ }
2791
+
2792
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h2 {
2793
+ font-size: 1.125rem;
2794
+ margin: 12px 0 6px;
2795
+ line-height: 1.3;
2796
+ }
2797
+
2798
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h3 {
2799
+ font-size: 1rem;
2800
+ font-weight: 600;
2801
+ margin: 10px 0 4px;
2802
+ line-height: 1.4;
2803
+ }
2804
+
2805
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h4 {
2806
+ font-size: 0.9375rem;
2807
+ margin: 8px 0 4px;
2808
+ line-height: 1.4;
2809
+ }
2810
+
2811
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h5,
2812
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai h6 {
2813
+ font-size: 0.8125rem;
2814
+ margin: 8px 0 4px;
2815
+ line-height: 1.45;
2816
+ }
2817
+
2818
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai strong {
2819
+ font-weight: 600;
2820
+ color: var(--color-fd-foreground, #e4e4e7);
2821
+ }
2822
+
2823
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai em {
2824
+ font-style: italic;
2825
+ }
2826
+
2827
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai p {
2828
+ margin: 0 0 6px;
2829
+ }
2830
+
2831
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai br {
2832
+ content: "";
2833
+ display: block;
2834
+ margin-top: 2px;
2835
+ }
2836
+
2837
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai ul,
2838
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai ol {
2839
+ margin: 6px 0 8px;
2840
+ padding-left: 1.25rem;
2841
+ }
2842
+
2843
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai li {
2844
+ margin: 3px 0;
2845
+ }
2846
+
2847
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai blockquote {
2848
+ margin: 8px 0;
2849
+ padding: 6px 0 6px 12px;
2850
+ border-left: 2px solid var(--color-fd-border, rgba(255, 255, 255, 0.16));
2851
+ color: var(--color-fd-muted-foreground, #a1a1aa);
2852
+ }
2853
+
2854
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai blockquote p:last-child {
2855
+ margin-bottom: 0;
2856
+ }
2857
+
2858
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai .fd-ai-hr {
2859
+ margin: 12px 0;
2860
+ border: none;
2861
+ border-top: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.12));
2862
+ }
2863
+
2864
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai del {
2865
+ color: var(--color-fd-muted-foreground, #a1a1aa);
2866
+ }
2867
+
2868
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai .fd-ai-task-list-item {
2869
+ list-style: none;
2870
+ }
2871
+
2872
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai .fd-ai-task-checkbox {
2873
+ width: 0.875rem;
2874
+ height: 0.875rem;
2875
+ margin: 0 0.45rem 0 -1.25rem;
2876
+ vertical-align: -0.12em;
2877
+ accent-color: var(--color-fd-primary, #6366f1);
2878
+ }
2879
+
2880
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai img {
2881
+ display: block;
2882
+ max-width: 100%;
2883
+ height: auto;
2884
+ margin: 8px 0;
2885
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.12));
2886
+ border-radius: var(--radius, 4px);
2887
+ }
2888
+
2889
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai pre {
2890
+ margin: 8px 0;
2891
+ border-radius: 0;
2892
+ border: none;
2893
+ background: transparent;
2894
+ padding: 0;
2895
+ }
2896
+
2897
+ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2898
+ * Code blocks in AI chat - fd-ai-code-*
2899
+ * --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
2900
+
2901
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-block {
2902
+ --sh-class: #8be9fd;
2903
+ --sh-identifier: #c9d1d9;
2904
+ --sh-keyword: #ff7b72;
2905
+ --sh-string: #a5d6ff;
2906
+ --sh-property: #79c0ff;
2907
+ --sh-entity: #7ee787;
2908
+ --sh-sign: #8b949e;
2909
+ --sh-comment: #6e7681;
2910
+ --sh-jsxliterals: #d2a8ff;
2911
+ --sh-space: inherit;
2912
+
2913
+ margin: 10px 0;
2914
+ border-radius: var(--radius, 8px);
2915
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
2916
+ background: var(--color-fd-muted, #1a1a2e);
2917
+ overflow: hidden;
2918
+ }
2919
+
2920
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-header {
2921
+ display: flex;
2922
+ align-items: center;
2923
+ justify-content: space-between;
2924
+ padding: 6px 12px;
2925
+ border-bottom: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.08));
2926
+ background: color-mix(in srgb, var(--color-fd-muted, #1a1a2e) 80%, black);
2927
+ min-height: 32px;
2928
+ }
2929
+
2930
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-lang {
2931
+ font-size: 11px;
2932
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
2933
+ color: var(--color-fd-muted-foreground, #71717a);
2934
+ text-transform: uppercase;
2935
+ letter-spacing: 0.04em;
2936
+ }
2937
+
2938
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-copy {
2939
+ font-size: 11px;
2940
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
2941
+ color: var(--color-fd-muted-foreground, #71717a);
2942
+ background: transparent;
2943
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
2944
+ border-radius: var(--radius, 4px);
2945
+ padding: 2px 8px;
2946
+ cursor: pointer;
2947
+ transition: all 150ms;
2948
+ }
2949
+
2950
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-copy:hover {
2951
+ color: var(--color-fd-foreground, #e4e4e7);
2952
+ background: color-mix(
2953
+ in srgb,
2954
+ var(--color-fd-accent, rgba(255, 255, 255, 0.05)) 60%,
2955
+ transparent
2956
+ );
2957
+ }
2958
+
2959
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-block pre {
2960
+ margin: 0;
2961
+ padding: 12px 16px;
2962
+ overflow-x: auto;
2963
+ background: transparent;
2964
+ border: none;
2965
+ border-radius: 0;
2966
+ }
2967
+
2968
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-block code {
2969
+ font-size: 13px;
2970
+ line-height: 1.45;
2971
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
2972
+ background: transparent;
2973
+ padding: 0;
2974
+ border-radius: 0;
2975
+ }
2976
+
2977
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-block .sh__line {
2978
+ display: block;
2979
+ min-height: 1.2em;
2980
+ }
2981
+
2982
+ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2983
+ Default theme AI overrides - rounded, soft, indigo
2984
+ (matches Next.js fumadocs default.css)
2985
+ --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
2986
+
2987
+ #nd-docs-layout[data-fd-framework] .fd-ai-dialog {
2988
+ border-radius: 12px;
2989
+ box-shadow:
2990
+ 0 20px 60px rgba(99, 102, 241, 0.08),
2991
+ 0 8px 24px rgba(0, 0, 0, 0.12);
2992
+ }
2993
+
2994
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-user {
2995
+ border-radius: 16px 16px 4px 16px;
2996
+ }
2997
+
2998
+ #nd-docs-layout[data-fd-framework] .fd-ai-bubble-ai {
2999
+ border-radius: 16px 16px 16px 4px;
3000
+ }
3001
+
3002
+ #nd-docs-layout[data-fd-framework] .fd-ai-input-wrap {
3003
+ border-radius: 10px;
3004
+ }
3005
+
3006
+ #nd-docs-layout[data-fd-framework] .fd-ai-send-btn {
3007
+ border-radius: 8px;
3008
+ }
3009
+
3010
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-btn {
3011
+ border-radius: 26px;
3012
+ }
3013
+
3014
+ #nd-docs-layout[data-fd-framework] .fd-ai-suggestion {
3015
+ border-radius: 8px;
3016
+ }
3017
+
3018
+ #nd-docs-layout[data-fd-framework] .fd-ai-result {
3019
+ border-radius: 8px;
3020
+ }
3021
+
3022
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-input-container {
3023
+ border-radius: 12px;
3024
+ }
3025
+
3026
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-send-btn {
3027
+ border-radius: 9999px;
3028
+ }
3029
+
3030
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-suggestion {
3031
+ border-radius: 9999px;
3032
+ }
3033
+
3034
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-trigger-btn {
3035
+ border-radius: 16px;
3036
+ }
3037
+
3038
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-close-btn {
3039
+ border-radius: 9999px;
3040
+ }
3041
+
3042
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-block {
3043
+ border-radius: 8px;
3044
+ }
3045
+
3046
+ #nd-docs-layout[data-fd-framework] .fd-ai-code-copy {
3047
+ border-radius: 4px;
3048
+ }
3049
+
3050
+ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3051
+ Floating AI Chat - fd-ai-floating-* + fd-ai-fm-*
3052
+ (exact port of Next.js fumadocs ai.css)
3053
+ --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
3054
+
3055
+ /* --------- Floating trigger button ------------------------------------------------------------------------------------------------------ */
3056
+
3057
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-btn {
3058
+ position: fixed;
3059
+ z-index: 9997;
3060
+ display: flex;
3061
+ align-items: center;
3062
+ justify-content: center;
3063
+ gap: 8px;
3064
+ padding: 8px 12px;
3065
+ height: 40px;
3066
+ border-radius: 16px;
3067
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
3068
+ background: color-mix(in srgb, var(--color-fd-secondary, #f4f4f5) 80%, transparent);
3069
+ backdrop-filter: blur(4px);
3070
+ color: var(--color-fd-muted-foreground, #71717a);
3071
+ cursor: pointer;
3072
+ font-size: var(--fd-small-size, 0.875rem);
3073
+ font-family: var(--fd-font-sans, inherit);
3074
+ box-shadow: 0 1px 3px color-mix(in srgb, var(--color-fd-background, #000) 20%, transparent);
3075
+ transition:
3076
+ transform 150ms,
3077
+ background 150ms,
3078
+ color 150ms;
3079
+ animation: fd-ai-fade-in 300ms ease-out;
3080
+ }
3081
+
3082
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-btn:hover {
3083
+ background: var(--color-fd-accent);
3084
+ color: var(--color-fd-accent-foreground);
3085
+ transform: scale(1.03);
3086
+ }
3087
+
3088
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-btn:active {
3089
+ transform: scale(0.97);
3090
+ }
3091
+
3092
+ :is(html.dark, body.dark) #nd-docs-layout[data-fd-framework] .fd-ai-floating-btn,
3093
+ #nd-docs-layout[data-fd-framework].dark .fd-ai-floating-btn,
3094
+ :is(html.dark, body.dark) #nd-docs-layout[data-fd-framework] .fd-ai-fm-trigger-btn,
3095
+ #nd-docs-layout[data-fd-framework].dark .fd-ai-fm-trigger-btn {
3096
+ background: color-mix(in srgb, var(--color-fd-secondary, rgba(255, 255, 255, 0.08)) 90%, transparent);
3097
+ color: var(--color-fd-foreground, #e4e4e7);
3098
+ border-color: var(--color-fd-border, rgba(255, 255, 255, 0.12));
3099
+ }
3100
+
3101
+ :is(html.dark, body.dark) #nd-docs-layout[data-fd-framework] .fd-ai-floating-btn:hover,
3102
+ #nd-docs-layout[data-fd-framework].dark .fd-ai-floating-btn:hover,
3103
+ :is(html.dark, body.dark) #nd-docs-layout[data-fd-framework] .fd-ai-fm-trigger-btn:hover,
3104
+ #nd-docs-layout[data-fd-framework].dark .fd-ai-fm-trigger-btn:hover {
3105
+ background: var(--color-fd-accent);
3106
+ color: var(--color-fd-accent-foreground);
3107
+ }
3108
+
3109
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-trigger {
3110
+ position: fixed;
3111
+ z-index: 9997;
3112
+ cursor: pointer;
3113
+ animation: fd-ai-fade-in 300ms ease-out;
3114
+ }
3115
+
3116
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-trigger .ask-ai-trigger {
3117
+ display: flex;
3118
+ align-items: center;
3119
+ justify-content: center;
3120
+ gap: 8px;
3121
+ padding: 8px 12px;
3122
+ height: 40px;
3123
+ border-radius: 16px;
3124
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
3125
+ background: color-mix(in srgb, var(--color-fd-secondary, #f4f4f5) 80%, transparent);
3126
+ backdrop-filter: blur(4px);
3127
+ color: var(--color-fd-muted-foreground, #71717a);
3128
+ cursor: pointer;
3129
+ font-size: var(--fd-small-size, 0.875rem);
3130
+ font-family: var(--fd-font-sans, inherit);
3131
+ box-shadow: 0 1px 3px color-mix(in srgb, var(--color-fd-background, #000) 20%, transparent);
3132
+ transition: transform 150ms, background 150ms, color 150ms;
3133
+ }
3134
+
3135
+ :is(html.dark, body.dark) #nd-docs-layout[data-fd-framework] .fd-ai-floating-trigger .ask-ai-trigger,
3136
+ #nd-docs-layout[data-fd-framework].dark .fd-ai-floating-trigger .ask-ai-trigger {
3137
+ background: color-mix(in srgb, var(--color-fd-secondary, rgba(255, 255, 255, 0.08)) 90%, transparent);
3138
+ color: var(--color-fd-foreground, #e4e4e7);
3139
+ border-color: var(--color-fd-border, rgba(255, 255, 255, 0.12));
3140
+ }
3141
+
3142
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-trigger .ask-ai-trigger:hover {
3143
+ background: var(--color-fd-accent);
3144
+ color: var(--color-fd-accent-foreground);
3145
+ transform: scale(1.03);
3146
+ }
3147
+
3148
+ :is(html.dark, body.dark) #nd-docs-layout[data-fd-framework] .fd-ai-floating-trigger .ask-ai-trigger:hover,
3149
+ #nd-docs-layout[data-fd-framework].dark .fd-ai-floating-trigger .ask-ai-trigger:hover {
3150
+ background: var(--color-fd-accent);
3151
+ color: var(--color-fd-accent-foreground);
3152
+ }
3153
+
3154
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-trigger .ask-ai-trigger:active {
3155
+ transform: scale(0.97);
3156
+ }
3157
+
3158
+ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3159
+ Full-Modal (better-auth inspired) - fd-ai-fm-*
3160
+ --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
3161
+
3162
+ /* Fixed wrapper for trigger when closed - never morphs, so no "stuck" feel */
3163
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-trigger-fixed {
3164
+ position: fixed;
3165
+ z-index: 9997;
3166
+ animation: fd-ai-fade-in 200ms ease-out;
3167
+ }
3168
+
3169
+ #nd-docs-layout[data-fd-framework] .fd-ai-floating-trigger--static {
3170
+ position: static;
3171
+ }
3172
+
3173
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-overlay {
3174
+ position: fixed;
3175
+ inset: 0;
3176
+ display: flex;
3177
+ flex-direction: column;
3178
+ align-items: center;
3179
+ background: color-mix(in srgb, var(--color-fd-background, #000) 80%, transparent);
3180
+ backdrop-filter: blur(8px);
3181
+ z-index: 9998;
3182
+ padding: 0 8px;
3183
+ }
3184
+
3185
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-overlay--animate {
3186
+ animation: fd-ai-fade-in 200ms ease-out;
3187
+ }
3188
+
3189
+ /* --------- Top bar (close button) --------------------------------------------------------------------------------------------------------- */
3190
+
3191
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-topbar {
3192
+ display: flex;
3193
+ justify-content: flex-end;
3194
+ align-items: center;
3195
+ width: min(800px, 100%);
3196
+ padding: 12px 0;
3197
+ position: sticky;
3198
+ top: 0;
3199
+ z-index: 2;
3200
+ }
3201
+
3202
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-close-btn {
3203
+ display: flex;
3204
+ align-items: center;
3205
+ justify-content: center;
3206
+ width: 32px;
3207
+ height: 32px;
3208
+ border-radius: var(--radius, 9999px);
3209
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
3210
+ background: var(--color-fd-secondary, rgba(255, 255, 255, 0.06));
3211
+ color: var(--color-fd-foreground, #e4e4e7);
3212
+ cursor: pointer;
3213
+ transition: all 150ms;
3214
+ }
3215
+
3216
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-close-btn:hover {
3217
+ background: var(--color-fd-accent, rgba(255, 255, 255, 0.1));
3218
+ }
3219
+
3220
+ /* --------- Message list --------------------------------------------------------------------------------------------------------------------------------------- */
3221
+
3222
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-messages {
3223
+ flex: 1;
3224
+ overflow-y: auto;
3225
+ width: min(800px, 100%);
3226
+ padding: 24px 0 120px;
3227
+ mask-image: linear-gradient(
3228
+ to bottom,
3229
+ transparent,
3230
+ white 3rem,
3231
+ white calc(100% - 8rem),
3232
+ transparent 100%
3233
+ );
3234
+ -webkit-mask-image: linear-gradient(
3235
+ to bottom,
3236
+ transparent,
3237
+ white 3rem,
3238
+ white calc(100% - 8rem),
3239
+ transparent 100%
3240
+ );
3241
+ }
3242
+
3243
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-messages-inner {
3244
+ display: flex;
3245
+ flex-direction: column;
3246
+ gap: 20px;
3247
+ }
3248
+
3249
+ /* --------- Message ------------------------------------------------------------------------------------------------------------------------------------------------------ */
3250
+
3251
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg {
3252
+ display: flex;
3253
+ flex-direction: column;
3254
+ }
3255
+
3256
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-label {
3257
+ font-size: 13px;
3258
+ font-weight: 500;
3259
+ margin-bottom: 4px;
3260
+ color: var(--color-fd-muted-foreground, #71717a);
3261
+ }
3262
+
3263
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-label[data-role="assistant"] {
3264
+ color: var(--color-fd-primary, #6366f1);
3265
+ }
3266
+
3267
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content {
3268
+ font-size: 14px;
3269
+ line-height: 1.7;
3270
+ color: var(--color-fd-foreground, #e4e4e7);
3271
+ }
3272
+
3273
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content code {
3274
+ background: var(--color-fd-muted, #1a1a2e);
3275
+ padding: 2px 6px;
3276
+ border-radius: var(--radius, 4px);
3277
+ font-size: 0.875em;
3278
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
3279
+ }
3280
+
3281
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content .fd-ai-code-block code {
3282
+ background: transparent;
3283
+ padding: 0;
3284
+ border-radius: 0;
3285
+ font-size: inherit;
3286
+ }
3287
+
3288
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content a {
3289
+ color: var(--color-fd-primary, #6366f1);
3290
+ text-decoration: underline;
3291
+ }
3292
+
3293
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content .fd-table-wrapper {
3294
+ margin: 8px 0;
3295
+ overflow: auto;
3296
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
3297
+ border-radius: var(--radius, 6px);
3298
+ }
3299
+
3300
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content table {
3301
+ width: 100%;
3302
+ border-collapse: separate;
3303
+ border-spacing: 0;
3304
+ margin: 0;
3305
+ font-size: 13px;
3306
+ }
3307
+
3308
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content th,
3309
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content td {
3310
+ border: 0;
3311
+ border-right: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
3312
+ border-bottom: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
3313
+ padding: 6px 12px;
3314
+ text-align: left;
3315
+ }
3316
+
3317
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content tr > :last-child {
3318
+ border-right: 0;
3319
+ }
3320
+
3321
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content tbody tr:last-child td {
3322
+ border-bottom: 0;
3323
+ }
3324
+
3325
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content th {
3326
+ background: var(--color-fd-muted, #1a1a2e);
3327
+ font-weight: 600;
3328
+ font-size: 12px;
3329
+ }
3330
+
3331
+ /* --------- Markdown prose inside full-modal messages ------------------------------------------------------------ */
3332
+
3333
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h1,
3334
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h2,
3335
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h3,
3336
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h4,
3337
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h5,
3338
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h6 {
3339
+ font-weight: 600;
3340
+ color: var(--color-fd-foreground, #e4e4e7);
3341
+ }
3342
+
3343
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h1 {
3344
+ font-size: 1.375rem;
3345
+ margin: 18px 0 9px;
3346
+ line-height: 1.25;
3347
+ }
3348
+
3349
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h2 {
3350
+ font-size: 1.25rem;
3351
+ margin: 16px 0 8px;
3352
+ line-height: 1.3;
3353
+ }
3354
+
3355
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h3 {
3356
+ font-size: 1.0625rem;
3357
+ font-weight: 600;
3358
+ margin: 12px 0 6px;
3359
+ line-height: 1.4;
3360
+ }
3361
+
3362
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h4 {
3363
+ font-size: 1rem;
3364
+ margin: 10px 0 4px;
3365
+ line-height: 1.4;
3366
+ }
3367
+
3368
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h5,
3369
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content h6 {
3370
+ font-size: 0.875rem;
3371
+ margin: 10px 0 4px;
3372
+ line-height: 1.45;
3373
+ }
3374
+
3375
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content strong {
3376
+ font-weight: 600;
3377
+ color: var(--color-fd-foreground, #e4e4e7);
3378
+ }
3379
+
3380
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content em {
3381
+ font-style: italic;
3382
+ }
3383
+
3384
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content p {
3385
+ margin: 0 0 8px;
3386
+ }
3387
+
3388
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content br {
3389
+ content: "";
3390
+ display: block;
3391
+ margin-top: 2px;
3392
+ }
3393
+
3394
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content ul,
3395
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content ol {
3396
+ margin: 8px 0 10px;
3397
+ padding-left: 1.35rem;
3398
+ }
3399
+
3400
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content li {
3401
+ margin: 4px 0;
3402
+ }
3403
+
3404
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content blockquote {
3405
+ margin: 10px 0;
3406
+ padding: 7px 0 7px 14px;
3407
+ border-left: 2px solid var(--color-fd-border, rgba(255, 255, 255, 0.16));
3408
+ color: var(--color-fd-muted-foreground, #a1a1aa);
3409
+ }
3410
+
3411
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content blockquote p:last-child {
3412
+ margin-bottom: 0;
3413
+ }
3414
+
3415
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content .fd-ai-hr {
3416
+ margin: 14px 0;
3417
+ border: none;
3418
+ border-top: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.12));
3419
+ }
3420
+
3421
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content del {
3422
+ color: var(--color-fd-muted-foreground, #a1a1aa);
3423
+ }
3424
+
3425
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content .fd-ai-task-list-item {
3426
+ list-style: none;
3427
+ }
3428
+
3429
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content .fd-ai-task-checkbox {
3430
+ width: 0.9rem;
3431
+ height: 0.9rem;
3432
+ margin: 0 0.5rem 0 -1.35rem;
3433
+ vertical-align: -0.12em;
3434
+ accent-color: var(--color-fd-primary, #6366f1);
3435
+ }
3436
+
3437
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content img {
3438
+ display: block;
3439
+ max-width: 100%;
3440
+ height: auto;
3441
+ margin: 10px 0;
3442
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.12));
3443
+ border-radius: var(--radius, 4px);
3444
+ }
3445
+
3446
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-msg-content pre {
3447
+ margin: 8px 0;
3448
+ border-radius: 0;
3449
+ border: none;
3450
+ background: transparent;
3451
+ padding: 0;
3452
+ }
3453
+
3454
+ /* Full-modal now uses the shared .fd-ai-loader indicator */
3455
+
3456
+ /* --------- Bottom input bar --------------------------------------------------------------------------------------------------------------------------- */
3457
+
3458
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-input-bar {
3459
+ position: fixed;
3460
+ z-index: 9999;
3461
+ }
3462
+
3463
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-input-bar--open {
3464
+ bottom: 16px;
3465
+ left: 50%;
3466
+ transform: translateX(-50%);
3467
+ width: min(800px, calc(100vw - 32px));
3468
+ animation: fd-ai-fade-in 200ms ease-out;
3469
+ }
3470
+
3471
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-input-container {
3472
+ display: flex;
3473
+ flex-direction: column;
3474
+ border-radius: var(--radius, 12px);
3475
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
3476
+ background: var(--color-fd-background, #0c0c0c);
3477
+ box-shadow: 0 20px 60px color-mix(in srgb, var(--color-fd-background, #000) 70%, transparent);
3478
+ overflow: hidden;
3479
+ }
3480
+
3481
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-input-wrap {
3482
+ display: flex;
3483
+ align-items: flex-start;
3484
+ padding-right: 8px;
3485
+ }
3486
+
3487
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-input {
3488
+ flex: 1;
3489
+ padding: 16px;
3490
+ background: transparent;
3491
+ border: none;
3492
+ outline: none;
3493
+ resize: none;
3494
+ color: var(--color-fd-foreground, #e4e4e7);
3495
+ font-size: 14px;
3496
+ font-family: var(--fd-font-sans, system-ui, -apple-system, sans-serif);
3497
+ line-height: 1.5;
3498
+ min-height: 0;
3499
+ max-height: 120px;
3500
+ }
3501
+
3502
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-input::placeholder {
3503
+ color: var(--color-fd-muted-foreground, #71717a);
3504
+ }
3505
+
3506
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-send-btn {
3507
+ display: flex;
3508
+ align-items: center;
3509
+ justify-content: center;
3510
+ margin-top: 12px;
3511
+ width: 32px;
3512
+ height: 32px;
3513
+ border-radius: 9999px;
3514
+ border: none;
3515
+ cursor: default;
3516
+ transition: all 150ms;
3517
+ background: var(--color-fd-secondary, rgba(255, 255, 255, 0.06));
3518
+ color: var(--color-fd-muted-foreground, #71717a);
3519
+ }
3520
+
3521
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-send-btn[data-active="true"] {
3522
+ cursor: pointer;
3523
+ background: var(--color-fd-primary, #6366f1);
3524
+ color: var(--color-fd-primary-foreground, #fff);
3525
+ }
3526
+
3527
+ /* --------- Suggestions (horizontal pills) ------------------------------------------------------------------------------ */
3528
+
3529
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-suggestions-area {
3530
+ padding: 12px 16px 4px;
3531
+ }
3532
+
3533
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-suggestions-label {
3534
+ font-size: 12px;
3535
+ font-weight: 500;
3536
+ color: var(--color-fd-muted-foreground, #71717a);
3537
+ margin-bottom: 8px;
3538
+ }
3539
+
3540
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-suggestions {
3541
+ display: flex;
3542
+ gap: 8px;
3543
+ overflow-x: auto;
3544
+ padding-bottom: 4px;
3545
+ mask-image: linear-gradient(
3546
+ to right,
3547
+ transparent 0%,
3548
+ black 1rem,
3549
+ black calc(100% - 1rem),
3550
+ transparent 100%
3551
+ );
3552
+ -webkit-mask-image: linear-gradient(
3553
+ to right,
3554
+ transparent 0%,
3555
+ black 1rem,
3556
+ black calc(100% - 1rem),
3557
+ transparent 100%
3558
+ );
3559
+ }
3560
+
3561
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-suggestion {
3562
+ flex-shrink: 0;
3563
+ white-space: nowrap;
3564
+ padding: 6px 14px;
3565
+ font-size: 12px;
3566
+ font-family: inherit;
3567
+ border-radius: 9999px;
3568
+ border: 1px solid
3569
+ color-mix(in srgb, var(--color-fd-border, rgba(255, 255, 255, 0.1)) 50%, transparent);
3570
+ background: color-mix(in srgb, var(--color-fd-muted, rgba(255, 255, 255, 0.04)) 30%, transparent);
3571
+ color: var(--color-fd-muted-foreground, #71717a);
3572
+ cursor: pointer;
3573
+ transition: all 200ms;
3574
+ }
3575
+
3576
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-suggestion:hover {
3577
+ background: color-mix(in srgb, var(--color-fd-muted, rgba(255, 255, 255, 0.04)) 50%, transparent);
3578
+ color: var(--color-fd-foreground, #e4e4e7);
3579
+ border-color: var(--color-fd-border, rgba(255, 255, 255, 0.1));
3580
+ }
3581
+
3582
+ /* --------- Footer bar --------------------------------------------------------------------------------------------------------------------------------------------- */
3583
+
3584
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-footer-bar {
3585
+ display: flex;
3586
+ align-items: center;
3587
+ gap: 4px;
3588
+ padding: 8px 16px;
3589
+ border-top: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.06));
3590
+ background: color-mix(
3591
+ in srgb,
3592
+ var(--color-fd-accent, rgba(255, 255, 255, 0.03)) 40%,
3593
+ transparent
3594
+ );
3595
+ font-size: 12px;
3596
+ color: var(--color-fd-muted-foreground, #71717a);
3597
+ }
3598
+
3599
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-clear-btn {
3600
+ display: flex;
3601
+ align-items: center;
3602
+ gap: 4px;
3603
+ background: transparent;
3604
+ border: none;
3605
+ cursor: pointer;
3606
+ font-family: inherit;
3607
+ font-size: 12px;
3608
+ color: var(--color-fd-muted-foreground, #71717a);
3609
+ transition: color 200ms;
3610
+ padding: 0;
3611
+ }
3612
+
3613
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-clear-btn:hover {
3614
+ color: var(--color-fd-foreground, #e4e4e7);
3615
+ }
3616
+
3617
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-clear-btn[aria-disabled="true"] {
3618
+ opacity: 0.5;
3619
+ cursor: not-allowed;
3620
+ }
3621
+
3622
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-footer-hint {
3623
+ flex: 1;
3624
+ }
3625
+
3626
+ /* --------- Closed trigger button ------------------------------------------------------------------------------------------------------------ */
3627
+
3628
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-trigger-btn {
3629
+ display: flex;
3630
+ align-items: center;
3631
+ justify-content: center;
3632
+ gap: 8px;
3633
+ padding: 8px 12px;
3634
+ height: 40px;
3635
+ border-radius: 16px;
3636
+ border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
3637
+ background: color-mix(in srgb, var(--color-fd-secondary, #f4f4f5) 80%, transparent);
3638
+ backdrop-filter: blur(4px);
3639
+ color: var(--color-fd-muted-foreground, #71717a);
3640
+ font-family: inherit;
3641
+ font-size: 14px;
3642
+ cursor: pointer;
3643
+ box-shadow: 0 1px 3px color-mix(in srgb, var(--color-fd-background, #000) 20%, transparent);
3644
+ transition:
3645
+ transform 150ms,
3646
+ background 150ms,
3647
+ color 150ms;
3648
+ animation: fd-ai-fade-in 300ms ease-out;
3649
+ white-space: nowrap;
3650
+ }
3651
+
3652
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-trigger-btn:hover {
3653
+ background: var(--color-fd-accent);
3654
+ color: var(--color-fd-accent-foreground);
3655
+ transform: scale(1.03);
3656
+ }
3657
+
3658
+ #nd-docs-layout[data-fd-framework] .fd-ai-fm-trigger-btn:active {
3659
+ transform: scale(0.97);
3660
+ }