@malette/agent-sdk 0.1.0 → 0.1.1-alpha.0

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