Repository navigation
Expand file tree
/
Copy pathstyles.css
More file actions
2220 lines (2099 loc) · 75.9 KB
/
Copy pathstyles.css
File metadata and controls
2220 lines (2099 loc) · 75.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
@import "tailwindcss" source(".");
@import "tw-animate-css";
@import "tailwind-scrollbar-hide/v4";
@import "shadcn/tailwind.css";
@import "@xterm/xterm/css/xterm.css";
@import "katex/dist/katex.min.css";
@import "./highspeed/highspeed-activation.css";
@import "./highspeed/highspeed-share.css";
@source "../../../node_modules/streamdown/dist/*.js"; /* 感觉这行也是不好使呢*/
@plugin "@tailwindcss/typography";
@plugin "../lucide-colors.mjs";
/* Hero 可为任意图片/视频/iframe，不能用 App 主题推断关闭图标对比度。 */
.cloud-content-dialog {
--media-close-surface: rgb(0 0 0 / 50%);
--media-close-surface-hover: rgb(0 0 0 / 65%);
--media-close-foreground: #fff;
}
.cloud-content-dialog [data-slot="dialog-close"] {
background-color: var(--media-close-surface);
color: var(--media-close-foreground);
border: 0;
}
.cloud-content-dialog [data-slot="dialog-close"]:hover {
background-color: var(--media-close-surface-hover);
}
/* Bugfix: KaTeX 会同时输出 MathML 辅助层和 HTML 视觉层；缺少 katex CSS 时两层都会显示，
* 行内公式和块级公式就会看起来“渲染一遍又普通文本一遍”。 */
/* Bugfix: Linux desktop 的窗口标题栏由 renderer 自绘，部分 overlay 需要只在该平台避开标题栏点击区。 */
@custom-variant platform-linux-desktop (&:where(.platform-linux-desktop, .platform-linux-desktop *));
@custom-variant platform-linux-window-maximized (&:where(.platform-linux-desktop.window-maximized, .platform-linux-desktop.window-maximized *));
/* Bugfix: macOS desktop 使用 hidden 原生标题栏，右上角浮层操作必须避开其原生命中区域。 */
@custom-variant platform-mac-desktop (&:where(.platform-mac-desktop, .platform-mac-desktop *));
/* Bugfix: Windows desktop 的原生 titleBarOverlay 占用右上角，图片 lightbox 等深层 overlay
* 通过独立平台 variant 使用真实 Window Controls Overlay 安全区；普通 Web 不继承该规则。 */
@custom-variant platform-windows-desktop (&:where(.platform-windows-desktop, .platform-windows-desktop *));
/*
* 修复原因：当前 UI 直接使用了 shadcn 的 radix-mira 风格组件源码，这些组件大量依赖
* data-active / data-horizontal / data-vertical 这类语义 variant。
* 上游并不是靠单个组件手写 data-[state=active]，而是通过 shadcn/tailwind.css 里的
* @custom-variant 把 Radix 的 data-state、data-orientation 统一映射过来。
* 之前仓库只引了 tailwindcss，本地编译就只会匹配裸 data-active 属性，
* 导致 Tabs、Separator、ScrollArea、ButtonGroup 等一批组件样式“类名在、效果不在”。
* 这里按官方 registry 的接法补上 shadcn/tailwind.css 和 tw-animate-css，
* 让这批组件一次性恢复和上游一致的编译语义与动画工具类。
*/
/*
* 修复原因：styles.css 是从 @zcode/ui 包里被 web/desktop 间接引入的，Tailwind v4 在这种工作区场景下
* 仅靠 source(".") 不能稳定把 UI 包里的 TSX 组件都加入扫描，像 Select 这类新组件用到的
* bg-popover、shadow-md、overflow-x-hidden 等 utility 会直接缺席，页面就只剩下一部分“碰巧命中”的通用类。
* 这里显式补一条 @source，让 Tailwind 始终扫描 UI 包源码，避免下拉框、菜单这类组件渲染成半残状态。
*/
@source "./**/*.{ts,tsx}";
/* 云端模板常用样式的构建保障，不是运行时 class 白名单。 */
@source inline("text-center text-ui-base/relaxed text-foreground-subtle font-semibold font-normal text-foreground whitespace-nowrap underline decoration-foreground-subtle decoration-dashed underline-offset-4");
/* 磨砂玻璃效果：html/body 需要透明背景，让 Electron vibrancy 透出来 */
html,
body,
#root {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
background: transparent !important;
}
:root {
--ui-font-size: 14px;
}
body {
margin: 0;
overflow: hidden;
}
/* Bug 根因：窗口 hidden 时 CSS 动画无法结算，DocumentTimeline 会持有期间被移除的元素及整棵子树，
* 后台流式输出时内存无上限累积、恢复可见才释放。hidden 期间禁用动画，不再创建新的动画对象。
* 标记由 installDocumentHiddenMotionPause 维护，见 docs/performance/hidden-document-motion-pause.md。 */
html[data-document-hidden] *,
html[data-document-hidden] *::before,
html[data-document-hidden] *::after {
transition: none !important;
animation: none !important;
}
/* Bugfix：中文模板描述按单字断行会拆开“简报”等词组，并把标点挤到下一行。
* Chromium 支持时启用短语级换行；其它环境保留正常断行，避免 keep-all 在窄屏产生溢出。 */
.text-wrap-phrase {
overflow-wrap: break-word;
word-break: normal;
line-break: strict;
text-wrap: pretty;
}
@supports (word-break: auto-phrase) {
.text-wrap-phrase {
word-break: auto-phrase;
}
}
.side-pane-open-tab-shell {
container: side-pane-open-tab / inline-size;
}
@container side-pane-open-tab (min-width: 480px) {
.side-pane-open-tab-content {
max-width: 34rem;
}
.side-pane-open-tab-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.side-pane-open-tab-button {
flex-direction: column;
gap: 0.375rem;
height: 5.5rem;
justify-content: center;
}
.side-pane-open-tab-button-label {
flex: 0 1 auto;
text-align: center;
}
}
#root {
/* Bugfix: Windows 桌面窗口拉伸后，根节点如果只靠内容撑开，Chromium 偶发会把新尺寸区域留给宿主底层。
* 这里把 React 挂载点固定成完整动态视口，让桌面/Web/手机端都从根节点开始明确铺满可视区。 */
height: 100dvh;
overflow: hidden;
}
/*
* Bugfix: 部分浏览器 / Electron 运行环境会在 focus-visible 时叠加系统级高亮边框，
* 表现为和产品主题无关的黄色描边，看起来像“随机冒出来的无障碍样式”。
* 这里在全局层同时清掉 outline 和 focus ring 对应的 box-shadow，避免系统高亮和组件局部 ring 混用。
*/
*:focus,
*:focus-visible {
outline: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
@media (forced-colors: active) {
*:focus,
*:focus-visible {
outline: none !important;
box-shadow: none !important;
}
}
/* === 主题变量 === */
@theme {
/* 修复原因：Windows 的 Consolas 不含中文字形，Tailwind 默认栈最终会让中文落到宋体。
* 保留各平台西文等宽字体，并在通用 monospace 前显式加入各平台 CJK 无衬线字体。 */
--font-mono:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
"Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", monospace;
--text-ui-xl: calc(var(--ui-font-size) + 4px);
--text-ui-lg: calc(var(--ui-font-size) + 2px);
--text-ui-base: var(--ui-font-size);
--text-ui-caption: calc(var(--ui-font-size) - 1px);
--text-ui-sm: calc(var(--ui-font-size) - 2px);
--text-ui-xs: calc(var(--ui-font-size) - 4px);
/* 例外刻度：仅限工作流图轴面（刻度标签、通道码、单位后缀），不得用于内容文本。
* 见 DESIGN.md「UI font tokens」与 docs/dynamic-workflow/presentation.md。 */
--text-ui-2xs: calc(var(--ui-font-size) - 5px);
/* 大写等宽微标签（CAUSALITY GRAPH / TIMEBASE / KEY）在 9-10px 需要加宽字距。 */
--tracking-wf-label: 0.09em;
/* iOS Safari 会缩放小于 16px 的聚焦输入；该平台下限不能跟随界面字号降低。 */
--text-mobile-input-safe: 16px;
--animated-gradient-text-strong: rgba(10, 10, 10, 1);
--animated-gradient-text-soft: rgba(10, 10, 10, 0.22);
--color-background: var(--color-neutral-50);
--color-background-alt: color-mix(in oklab, var(--color-neutral-100) 60%, transparent);
--color-background-win-alt: var(--color-neutral-200);
--color-brand: var(--color-sky-400);
--color-icon-blue: var(--color-terminal-bright-blue);
--color-icon-purple: var(--color-terminal-bright-magenta);
--color-trajectory-user: #2563eb;
--color-trajectory-assistant: #0f766e;
--color-trajectory-reasoning: #7c3aed;
--color-trajectory-tool-call: #d97706;
--color-trajectory-tool-result: #0284c7;
/* 工作流因果图仪表化渲染（docs/dynamic-workflow/presentation.md）：
* rule 比 --color-border 更弱——刻度与空闲轨道每图重复约 40 次，10% 会积成灰雾。 */
--color-workflow-rule: color-mix(in oklab, var(--color-neutral-950) 5.5%, transparent);
--color-workflow-trace: color-mix(in oklab, var(--color-neutral-950) 30%, transparent);
--color-workflow-trace-strong: color-mix(in oklab, var(--color-neutral-950) 55%, transparent);
--color-accent: var(--color-sky-50);
--color-find-highlight: #fde68a;
--color-find-highlight-active: #facc15;
--color-border: color-mix(in oklab, var(--color-neutral-950) 10%, transparent);
--color-border-hover: color-mix(in oklab, var(--color-neutral-950) 20%, transparent);
--color-hover: var(--color-neutral-200);
--color-selected: color-mix(in oklab, var(--color-neutral-950) 10%, transparent);
--color-header: var(--color-neutral-100);
--color-panel: var(--color-neutral-100);
--color-sidebar: var(--color-neutral-100);
--color-surface: color-mix(in oklab, var(--color-neutral-950) 3%, transparent);
--color-surface-hover: color-mix(in oklab, var(--color-neutral-950) 5%, transparent);
--color-markdown-inline-code: var(--color-tag);
--color-card: var(--color-white);
--color-card-selected: var(--color-neutral-200);
--color-card-border: var(--color-border);
--color-popover: var(--color-white);
/* 修复：浮层组件已使用 text-popover-foreground，但变量缺失会让暗色主题日志浮层继承黑色文本。 */
--color-popover-foreground: var(--color-foreground);
--color-popover-header: var(--color-neutral-100);
--color-popover-border: var(--color-border);
--color-input: var(--color-white);
--color-input-focused: var(--color-neutral-50);
--color-input-border: var(--color-border);
--color-input-border-hover: var(--color-border-hover);
--color-input-border-focused: var(--color-brand);
--color-terminal-bg: var(--color-neutral-50);
--color-terminal-fg: var(--color-neutral-950);
--color-terminal-cursor: var(--color-neutral-950);
--color-terminal-cursor-accent: var(--color-neutral-50);
--color-terminal-selection: color-mix(in oklab, var(--color-sky-500) 32%, transparent);
--color-terminal-selection-inactive: color-mix(in oklab, var(--color-sky-500) 22%, transparent);
--color-terminal-black: var(--color-neutral-700);
--color-terminal-red: var(--color-red-500);
--color-terminal-green: var(--color-green-500);
--color-terminal-yellow: var(--color-yellow-500);
--color-terminal-blue: var(--color-sky-500);
--color-terminal-magenta: var(--color-fuchsia-500);
--color-terminal-cyan: var(--color-cyan-500);
--color-terminal-white: var(--color-neutral-500);
--color-terminal-bright-black: var(--color-neutral-500);
--color-terminal-bright-red: var(--color-red-500);
--color-terminal-bright-green: var(--color-green-500);
--color-terminal-bright-yellow: var(--color-yellow-500);
--color-terminal-bright-blue: var(--color-sky-500);
--color-terminal-bright-magenta: var(--color-fuchsia-500);
--color-terminal-bright-cyan: var(--color-cyan-500);
--color-terminal-bright-white: var(--color-neutral-950);
/* 应用用量图表使用独立色板，避免复用终端 ANSI 色造成红黄绿高饱和堆叠。 */
--color-usage-chart-1: var(--color-sky-600);
--color-usage-chart-2: var(--color-teal-600);
--color-usage-chart-3: var(--color-violet-600);
--color-usage-chart-4: var(--color-rose-500);
--color-usage-chart-5: var(--color-indigo-500);
--color-usage-chart-6: var(--color-cyan-600);
/* Context breakdown 使用接近参考 UI 的单一蓝色阶，避免小弹窗里出现高饱和彩虹色。 */
--color-context-breakdown-1: var(--color-sky-600);
--color-context-breakdown-2: var(--color-sky-500);
--color-context-breakdown-3: var(--color-sky-400);
--color-context-breakdown-4: var(--color-sky-300);
--color-context-breakdown-5: var(--color-sky-200);
--color-context-breakdown-6: var(--color-sky-100);
--color-context-breakdown-7: color-mix(in oklab, var(--color-sky-100) 72%, var(--color-white));
/* Bugfix: 热力图之前复用 brand 色，Zai 主题下 brand 是黑/白，无法保持 sky 语义。 */
--color-usage-heatmap-0: color-mix(in oklab, var(--color-sky-500) 0%, var(--color-surface));
--color-usage-heatmap-1: color-mix(in oklab, var(--color-sky-500) 18%, var(--color-surface));
--color-usage-heatmap-2: color-mix(in oklab, var(--color-sky-500) 36%, var(--color-surface));
--color-usage-heatmap-3: color-mix(in oklab, var(--color-sky-600) 58%, var(--color-surface));
--color-usage-heatmap-4: color-mix(in oklab, var(--color-sky-700) 82%, var(--color-surface));
--color-tab: var(--color-neutral-100);
--color-tab-active: var(--color-white);
--color-tab-border: var(--color-border);
--color-menu: var(--color-white);
--color-menu-hover: var(--color-neutral-100);
--color-primary: var(--color-neutral-950);
--color-primary-foreground: var(--color-neutral-50);
--color-secondary: var(--color-neutral-300);
--color-interaction-ask-surface: var(--color-sky-50);
--color-interaction-ask-foreground: var(--color-sky-700);
--color-interaction-ask-fill: color-mix(in oklab, var(--color-green-500) 20%, transparent);
--color-interaction-confirmation-surface: var(--color-green-50);
--color-interaction-confirmation-foreground: var(--color-green-700);
--color-foreground: var(--color-neutral-700);
--color-foreground-subtle: color-mix(in oklab, var(--color-neutral-700) 60%, transparent);
--color-foreground-subtlest: color-mix(in oklab, var(--color-neutral-700) 40%, transparent);
--lucide-subtlest-opacity: 0.4;
--color-foreground-inverse: var(--color-white);
--color-success: var(--color-green-600);
--color-success-foreground: var(--color-foreground-inverse);
--color-idle-task: var(--color-violet-600);
--color-idle-task-surface: var(--color-violet-50);
--color-destructive: var(--color-red-600);
--color-destructive-foreground: var(--color-foreground-inverse);
--color-warning: var(--color-yellow-600);
--color-feedback-privacy-hint: var(--color-yellow-600);
--color-warning-foreground: var(--color-foreground-inverse);
--color-diff-added: var(--color-green-600);
--color-diff-added-foreground: var(--color-foreground-inverse);
--color-diff-removed: var(--color-red-600);
--color-diff-removed-foreground: var(--color-foreground-inverse);
--color-git-none: var(--color-foreground);
--color-git-modified: var(--color-amber-600);
--color-git-added: var(--color-teal-600);
--color-git-deleted: var(--color-red-600);
--color-git-renamed: var(--color-sky-600);
--color-git-untracked: var(--color-teal-600);
--color-git-ignored: var(--color-foreground-subtlest);
--color-git-descendant: var(--color-amber-600);
--color-toast: var(--color-white);
--color-tooltip: var(--color-neutral-100);
--color-tooltip-foreground: var(--color-neutral-950);
--color-tooltip-tag: var(--color-neutral-200);
--color-tooltip-tag-foreground: color-mix(in oklab, var(--color-neutral-950) 60%, transparent);
--color-tag: var(--color-neutral-200);
--color-file-node: color-mix(in oklab, var(--color-sky-600) 14%, transparent);
--color-file-node-hover: color-mix(in oklab, var(--color-sky-600) 20%, transparent);
--color-file-node-foreground: var(--color-sky-600);
--color-skill-node: color-mix(in oklab, var(--color-violet-600) 14%, transparent);
--color-skill-node-hover: color-mix(in oklab, var(--color-violet-600) 20%, transparent);
--color-skill-node-foreground: var(--color-violet-600);
--color-command-node: color-mix(in oklab, var(--color-slate-500) 14%, transparent);
--color-command-node-hover: color-mix(in oklab, var(--color-slate-500) 20%, transparent);
--color-command-node-foreground: var(--color-slate-600);
--color-subagent-node: color-mix(in oklab, #6f7a2f 14%, transparent);
--color-subagent-node-hover: color-mix(in oklab, #6f7a2f 20%, transparent);
--color-subagent-node-foreground: #6f7a2f;
--color-session-node: color-mix(in oklab, var(--color-teal-600) 14%, transparent);
--color-session-node-hover: color-mix(in oklab, var(--color-teal-600) 20%, transparent);
--color-session-node-foreground: var(--color-teal-600);
--color-plugin-node: color-mix(in oklab, var(--color-amber-600) 14%, transparent);
--color-plugin-node-hover: color-mix(in oklab, var(--color-amber-600) 20%, transparent);
--color-plugin-node-foreground: var(--color-amber-600);
--color-plugin-paid-plan-badge: #ffe3c8;
--color-plugin-paid-plan-badge-foreground: #4b280f;
}
.dark {
--animated-gradient-text-strong: rgba(255, 255, 255, 1);
--animated-gradient-text-soft: rgba(255, 255, 255, 0.2);
--color-background: var(--color-neutral-900);
--color-background-alt: color-mix(in oklab, var(--color-neutral-800) 60%, transparent);
--color-background-win-alt: var(--color-neutral-800);
--color-brand: var(--color-sky-500);
--color-trajectory-user: #60a5fa;
--color-trajectory-assistant: #2dd4bf;
--color-trajectory-reasoning: #a78bfa;
--color-trajectory-tool-call: #f59e0b;
--color-trajectory-tool-result: #38bdf8;
--color-workflow-rule: color-mix(in oklab, var(--color-white) 6.5%, transparent);
--color-workflow-trace: color-mix(in oklab, var(--color-white) 35%, transparent);
--color-workflow-trace-strong: color-mix(in oklab, var(--color-white) 60%, transparent);
--color-accent: color-mix(in oklab, var(--color-sky-950) 50%, transparent);
--color-find-highlight: #713f12;
--color-find-highlight-active: #a16207;
--color-border: color-mix(in oklab, var(--color-neutral-50) 10%, transparent);
--color-border-hover: color-mix(in oklab, var(--color-neutral-50) 30%, transparent);
--color-hover: var(--color-surface-hover);
--color-selected: color-mix(in oklab, var(--color-white) 10%, transparent);
--color-header: var(--color-neutral-900);
--color-panel: var(--color-neutral-900);
--color-sidebar: var(--color-neutral-950);
--color-surface: color-mix(in oklab, var(--color-white) 5%, transparent);
--color-surface-hover: color-mix(in oklab, var(--color-white) 10%, transparent);
--color-card: var(--color-neutral-800);
--color-card-selected: var(--color-neutral-700);
--color-card-border: var(--color-border);
--color-popover: var(--color-neutral-800);
--color-popover-foreground: var(--color-foreground);
--color-popover-header: var(--color-neutral-700);
--color-popover-border: var(--color-border);
--color-input: var(--color-neutral-800);
--color-input-focused: var(--color-neutral-950);
--color-input-border: var(--color-border);
--color-input-border-hover: var(--color-border-hover);
--color-input-border-focused: var(--color-brand);
--color-terminal-bg: var(--color-neutral-950);
--color-terminal-fg: var(--color-neutral-50);
--color-terminal-cursor: var(--color-neutral-50);
--color-terminal-cursor-accent: var(--color-neutral-950);
--color-terminal-selection: color-mix(in oklab, var(--color-sky-500) 26%, transparent);
--color-terminal-selection-inactive: color-mix(
in oklab,
var(--color-neutral-50) 16%,
transparent
);
--color-terminal-black: var(--color-neutral-800);
--color-terminal-red: var(--color-red-600);
--color-terminal-green: var(--color-green-600);
--color-terminal-yellow: var(--color-yellow-600);
--color-terminal-blue: var(--color-sky-600);
--color-terminal-magenta: var(--color-fuchsia-600);
--color-terminal-cyan: var(--color-cyan-600);
--color-terminal-white: var(--color-neutral-200);
--color-terminal-bright-black: var(--color-neutral-500);
--color-terminal-bright-red: var(--color-red-600);
--color-terminal-bright-green: var(--color-green-600);
--color-terminal-bright-yellow: var(--color-yellow-600);
--color-terminal-bright-blue: var(--color-sky-600);
--color-terminal-bright-magenta: var(--color-fuchsia-600);
--color-terminal-bright-cyan: var(--color-cyan-600);
--color-terminal-bright-white: var(--color-neutral-50);
--color-usage-chart-1: var(--color-sky-500);
--color-usage-chart-2: var(--color-teal-400);
--color-usage-chart-3: var(--color-violet-400);
--color-usage-chart-4: var(--color-rose-400);
--color-usage-chart-5: var(--color-indigo-400);
--color-usage-chart-6: var(--color-cyan-400);
--color-context-breakdown-1: var(--color-sky-400);
--color-context-breakdown-2: var(--color-sky-300);
--color-context-breakdown-3: var(--color-sky-200);
--color-context-breakdown-4: color-mix(in oklab, var(--color-sky-200) 84%, var(--color-white));
--color-context-breakdown-5: color-mix(in oklab, var(--color-sky-200) 72%, var(--color-white));
--color-context-breakdown-6: color-mix(in oklab, var(--color-sky-200) 60%, var(--color-white));
--color-context-breakdown-7: color-mix(in oklab, var(--color-sky-200) 48%, var(--color-white));
--color-usage-heatmap-0: color-mix(in oklab, var(--color-sky-400) 0%, var(--color-surface));
--color-usage-heatmap-1: color-mix(in oklab, var(--color-sky-400) 24%, var(--color-surface));
--color-usage-heatmap-2: color-mix(in oklab, var(--color-sky-400) 42%, var(--color-surface));
--color-usage-heatmap-3: color-mix(in oklab, var(--color-sky-400) 62%, var(--color-surface));
--color-usage-heatmap-4: color-mix(in oklab, var(--color-sky-300) 78%, var(--color-surface));
--color-tab: var(--color-neutral-800);
--color-tab-active: var(--color-neutral-950);
--color-tab-border: var(--color-border);
--color-menu: var(--color-neutral-950);
--color-menu-hover: var(--color-neutral-900);
--color-primary: var(--color-neutral-50);
--color-primary-foreground: var(--color-neutral-950);
--color-secondary: var(--color-neutral-700);
--color-interaction-ask-surface: color-mix(in oklab, var(--color-sky-950) 50%, transparent);
--color-interaction-ask-foreground: var(--color-sky-300);
--color-interaction-ask-fill: color-mix(in oklab, var(--color-green-400) 24%, transparent);
--color-interaction-confirmation-surface: color-mix(
in oklab,
var(--color-green-950) 45%,
transparent
);
--color-interaction-confirmation-foreground: var(--color-green-300);
--color-foreground: var(--color-neutral-200);
--color-foreground-subtle: color-mix(in oklab, var(--color-neutral-200) 60%, transparent);
--color-foreground-subtlest: color-mix(in oklab, var(--color-neutral-200) 30%, transparent);
--lucide-subtlest-opacity: 0.3;
--color-foreground-inverse: var(--color-white);
--color-success: var(--color-green-500);
--color-success-foreground: var(--color-foreground-inverse);
--color-idle-task: var(--color-violet-400);
--color-idle-task-surface: color-mix(in oklab, var(--color-violet-950) 50%, transparent);
--color-destructive: var(--color-red-500);
--color-destructive-foreground: var(--color-foreground-inverse);
--color-warning: var(--color-yellow-500);
--color-feedback-privacy-hint: var(--color-yellow-300);
--color-warning-foreground: var(--color-foreground-inverse);
--color-diff-added: var(--color-green-500);
--color-diff-added-foreground: var(--color-foreground-inverse);
--color-diff-removed: var(--color-red-500);
--color-diff-removed-foreground: var(--color-foreground-inverse);
--color-git-none: var(--color-foreground);
--color-git-modified: var(--color-amber-400);
--color-git-added: var(--color-teal-400);
--color-git-deleted: var(--color-red-400);
--color-git-renamed: var(--color-sky-400);
--color-git-untracked: var(--color-teal-400);
--color-git-ignored: var(--color-foreground-subtlest);
--color-git-descendant: var(--color-amber-400);
--color-toast: var(--color-neutral-900);
--color-tooltip: var(--color-neutral-900);
--color-tooltip-foreground: var(--color-neutral-50);
--color-tooltip-tag: var(--color-neutral-800);
--color-tooltip-tag-foreground: color-mix(in oklab, var(--color-neutral-50) 60%, transparent);
--color-tag: var(--color-neutral-700);
--color-file-node: color-mix(in oklab, var(--color-sky-400) 18%, transparent);
--color-file-node-hover: color-mix(in oklab, var(--color-sky-400) 24%, transparent);
--color-file-node-foreground: var(--color-sky-300);
--color-skill-node: color-mix(in oklab, var(--color-violet-400) 18%, transparent);
--color-skill-node-hover: color-mix(in oklab, var(--color-violet-400) 24%, transparent);
--color-skill-node-foreground: var(--color-violet-300);
--color-command-node: color-mix(in oklab, var(--color-slate-300) 16%, transparent);
--color-command-node-hover: color-mix(in oklab, var(--color-slate-300) 22%, transparent);
--color-command-node-foreground: var(--color-slate-300);
--color-subagent-node: color-mix(in oklab, #b7bd75 18%, transparent);
--color-subagent-node-hover: color-mix(in oklab, #b7bd75 24%, transparent);
--color-subagent-node-foreground: #b7bd75;
--color-session-node: color-mix(in oklab, var(--color-teal-400) 18%, transparent);
--color-session-node-hover: color-mix(in oklab, var(--color-teal-400) 24%, transparent);
--color-session-node-foreground: var(--color-teal-300);
--color-plugin-node: color-mix(in oklab, var(--color-amber-400) 18%, transparent);
--color-plugin-node-hover: color-mix(in oklab, var(--color-amber-400) 24%, transparent);
--color-plugin-node-foreground: var(--color-amber-300);
--color-plugin-paid-plan-badge: #5a341b;
--color-plugin-paid-plan-badge-foreground: #ffd8b8;
}
.theme-zai-light {
--animated-gradient-text-strong: rgba(13, 13, 13, 1);
--animated-gradient-text-soft: rgba(13, 13, 13, 0.22);
--color-background: #f8f8f8;
--color-background-win-alt: #ececee;
--color-background-alt: color-mix(in oklab, var(--color-background) 70%, transparent);
--color-brand: #000000;
--color-trajectory-user: #2563eb;
--color-trajectory-assistant: #0f766e;
--color-trajectory-reasoning: #7c3aed;
--color-trajectory-tool-call: #d97706;
--color-trajectory-tool-result: #0284c7;
--color-workflow-rule: rgba(13, 13, 13, 0.055);
--color-workflow-trace: rgba(13, 13, 13, 0.3);
--color-workflow-trace-strong: rgba(13, 13, 13, 0.55);
--color-accent: #ebf4ff;
--color-find-highlight: #fff4eb;
--color-find-highlight-active: #ffb26b;
--color-border: rgba(13, 13, 13, 0.1);
--color-border-hover: rgba(13, 13, 13, 0.15);
--color-hover: rgba(13, 13, 13, 0.05);
--color-selected: rgba(13, 13, 13, 0.05);
--color-header: #ffffff;
--color-panel: #ffffff;
--color-sidebar: #f0f0f0;
--color-surface: rgba(13, 13, 13, 0.03);
--color-surface-hover: rgba(13, 13, 13, 0.05);
--color-card: #ffffff;
--color-card-selected: var(--color-input);
--color-card-border: var(--color-border);
--color-popover: #ffffff;
--color-popover-foreground: var(--color-foreground);
--color-popover-header: #f8f8f8;
--color-popover-border: var(--color-border);
--color-input: #ffffff;
--color-input-focused: var(--color-input);
--color-input-border: var(--color-border);
--color-input-border-hover: var(--color-border-hover);
--color-input-border-focused: var(--color-border-hover);
--color-terminal-bg: var(--color-background);
--color-terminal-fg: var(--color-foreground);
--color-terminal-cursor: #0d0d0d;
--color-terminal-cursor-accent: var(--color-background);
--color-terminal-selection: rgba(11, 127, 255, 0.22);
--color-terminal-selection-inactive: rgba(13, 13, 13, 0.1);
--color-terminal-black: #5c5c5c;
--color-terminal-red: #e03131;
--color-terminal-green: #1e8a3e;
--color-terminal-yellow: #e07b00;
--color-terminal-blue: #0b7fff;
--color-terminal-magenta: #9e77ed;
--color-terminal-cyan: #0aa7a7;
--color-terminal-white: #adadad;
--color-terminal-bright-black: #888888;
--color-terminal-bright-red: #e03131;
--color-terminal-bright-green: #1e8a3e;
--color-terminal-bright-yellow: #e07b00;
--color-terminal-bright-blue: #0066dd;
--color-terminal-bright-magenta: #9e77ed;
--color-terminal-bright-cyan: #0aa7a7;
--color-terminal-bright-white: #0d0d0d;
--color-usage-chart-1: #0b7fff;
--color-usage-chart-2: #1e8a3e;
--color-usage-chart-3: #9e77ed;
--color-usage-chart-4: #e03131;
--color-usage-chart-5: #e07b00;
--color-usage-chart-6: #0aa7a7;
--color-context-breakdown-1: #0b7fff;
--color-context-breakdown-2: #338fff;
--color-context-breakdown-3: #5ca7ff;
--color-context-breakdown-4: #85bbff;
--color-context-breakdown-5: #acd0ff;
--color-context-breakdown-6: #c8ddff;
--color-context-breakdown-7: #e0ecff;
--color-usage-heatmap-0: color-mix(in oklab, #0b7fff 0%, var(--color-surface));
--color-usage-heatmap-1: color-mix(in oklab, #0b7fff 18%, var(--color-surface));
--color-usage-heatmap-2: color-mix(in oklab, #0b7fff 36%, var(--color-surface));
--color-usage-heatmap-3: color-mix(in oklab, #0b7fff 58%, var(--color-surface));
--color-usage-heatmap-4: color-mix(in oklab, #0066dd 82%, var(--color-surface));
--color-tab: #f0f0f0;
--color-tab-active: #ffffff;
--color-tab-border: var(--color-border);
--color-menu: #ffffff;
--color-menu-hover: #f0f0f0;
--color-primary: #000000;
--color-primary-foreground: #ffffff;
--color-secondary: #e6e6e6;
--color-interaction-ask-surface: #ebf4ff;
--color-interaction-ask-foreground: #0066dd;
--color-interaction-ask-fill: rgba(70, 191, 114, 0.2);
--color-interaction-confirmation-surface: #eaf7ee;
--color-interaction-confirmation-foreground: #166b32;
--color-foreground: var(--color-neutral-800);
--color-foreground-subtle: color-mix(in oklab, var(--color-neutral-800) 60%, transparent);
--color-foreground-subtlest: color-mix(in oklab, var(--color-neutral-800) 40%, transparent);
--lucide-subtlest-opacity: 0.4;
--color-foreground-inverse: #ffffff;
--color-success: #1e8a3e;
--color-success-foreground: #ffffff;
--color-idle-task: #9e77ed;
--color-idle-task-surface: #f5f3ff;
--color-destructive: #e03131;
--color-destructive-foreground: #ffffff;
--color-warning: #e07b00;
--color-feedback-privacy-hint: var(--color-yellow-600);
--color-warning-foreground: #ffffff;
--color-diff-added: #1e8a3e;
--color-diff-added-foreground: #ffffff;
--color-diff-removed: #e03131;
--color-diff-removed-foreground: #ffffff;
--color-git-none: var(--color-foreground);
--color-git-modified: #e07b00;
--color-git-added: #1e8a3e;
--color-git-deleted: #e03131;
--color-git-renamed: #0b7fff;
--color-git-untracked: #1e8a3e;
--color-git-ignored: var(--color-foreground-subtlest);
--color-git-descendant: #e07b00;
--color-toast: #ffffff;
--color-tooltip: #f0f0f0;
--color-tooltip-foreground: #0d0d0d;
--color-tooltip-tag: #e6e6e6;
--color-tooltip-tag-foreground: #5c5c5c;
--color-tag: #e6e6e6;
--color-file-node: rgba(26, 112, 184, 0.1);
--color-file-node-hover: rgba(26, 112, 184, 0.16);
--color-file-node-foreground: #1a70b8;
--color-skill-node: rgba(116, 83, 176, 0.1);
--color-skill-node-hover: rgba(116, 83, 176, 0.16);
--color-skill-node-foreground: #7453b0;
--color-command-node: rgba(86, 98, 112, 0.1);
--color-command-node-hover: rgba(86, 98, 112, 0.16);
--color-command-node-foreground: #566270;
--color-subagent-node: rgba(111, 122, 47, 0.1);
--color-subagent-node-hover: rgba(111, 122, 47, 0.16);
--color-subagent-node-foreground: #6f7a2f;
--color-session-node: rgba(20, 128, 122, 0.1);
--color-session-node-hover: rgba(20, 128, 122, 0.16);
--color-session-node-foreground: #14807a;
--color-plugin-node: rgba(184, 122, 26, 0.1);
--color-plugin-node-hover: rgba(184, 122, 26, 0.16);
--color-plugin-node-foreground: #b87a1a;
--color-plugin-paid-plan-badge: #ffe3c8;
--color-plugin-paid-plan-badge-foreground: #4b280f;
}
.theme-zai-dark {
--animated-gradient-text-strong: rgba(255, 255, 255, 1);
--animated-gradient-text-soft: rgba(255, 255, 255, 0.22);
--color-background: #161616;
--color-background-win-alt: #2b2b2b;
--color-background-alt: color-mix(in oklab, var(--color-background-win-alt) 60%, transparent);
--color-brand: #ffffff;
--color-trajectory-user: #60a5fa;
--color-trajectory-assistant: #2dd4bf;
--color-trajectory-reasoning: #a78bfa;
--color-trajectory-tool-call: #f59e0b;
--color-trajectory-tool-result: #38bdf8;
--color-workflow-rule: rgba(255, 255, 255, 0.065);
--color-workflow-trace: rgba(255, 255, 255, 0.35);
--color-workflow-trace-strong: rgba(255, 255, 255, 0.6);
--color-accent: #001d3d;
--color-find-highlight: #542500;
--color-find-highlight-active: #ff8a30;
--color-border: rgba(255, 255, 255, 0.1);
--color-border-hover: rgba(255, 255, 255, 0.15);
--color-hover: rgba(255, 255, 255, 0.05);
--color-selected: rgba(255, 255, 255, 0.1);
--color-header: #202020;
--color-panel: #202020;
--color-sidebar: #161616;
--color-surface: rgba(255, 255, 255, 0.05);
--color-surface-hover: rgba(255, 255, 255, 0.1);
--color-card: #2b2b2b;
--color-card-selected: var(--color-input);
--color-card-border: var(--color-border);
--color-popover: #2b2b2b;
--color-popover-foreground: var(--color-foreground);
--color-popover-header: #202020;
--color-popover-border: var(--color-border);
--color-input: #2b2b2b;
--color-input-focused: var(--color-input);
--color-input-border: var(--color-border);
--color-input-border-hover: var(--color-border-hover);
--color-input-border-focused: var(--color-border-hover);
--color-terminal-bg: var(--color-background);
--color-terminal-fg: var(--color-foreground);
--color-terminal-cursor: #f8f8f8;
--color-terminal-cursor-accent: #161616;
--color-terminal-selection: rgba(64, 153, 255, 0.28);
--color-terminal-selection-inactive: rgba(255, 255, 255, 0.1);
--color-terminal-black: #363636;
--color-terminal-red: #ff5c5c;
--color-terminal-green: #46bf72;
--color-terminal-yellow: #ff8a30;
--color-terminal-blue: #4099ff;
--color-terminal-magenta: #7b5ce5;
--color-terminal-cyan: #42c8c8;
--color-terminal-white: #adadad;
--color-terminal-bright-black: #747474;
--color-terminal-bright-red: #ff9999;
--color-terminal-bright-green: #87d9a4;
--color-terminal-bright-yellow: #ffb26b;
--color-terminal-bright-blue: #80beff;
--color-terminal-bright-magenta: #a888f2;
--color-terminal-bright-cyan: #8ee5e5;
--color-terminal-bright-white: #f8f8f8;
--color-usage-chart-1: #4099ff;
--color-usage-chart-2: #46bf72;
--color-usage-chart-3: #7b5ce5;
--color-usage-chart-4: #ff5c5c;
--color-usage-chart-5: #ff8a30;
--color-usage-chart-6: #42c8c8;
--color-context-breakdown-1: #4099ff;
--color-context-breakdown-2: #66adff;
--color-context-breakdown-3: #80beff;
--color-context-breakdown-4: #9dceff;
--color-context-breakdown-5: #b9ddff;
--color-context-breakdown-6: #d0e8ff;
--color-context-breakdown-7: #e4f1ff;
--color-usage-heatmap-0: color-mix(in oklab, #4099ff 0%, var(--color-surface));
--color-usage-heatmap-1: color-mix(in oklab, #4099ff 24%, var(--color-surface));
--color-usage-heatmap-2: color-mix(in oklab, #4099ff 42%, var(--color-surface));
--color-usage-heatmap-3: color-mix(in oklab, #4099ff 62%, var(--color-surface));
--color-usage-heatmap-4: color-mix(in oklab, #80beff 78%, var(--color-surface));
--color-tab: #202020;
--color-tab-active: #161616;
--color-tab-border: var(--color-border);
--color-menu: #2b2b2b;
--color-menu-hover: #363636;
--color-primary: #ffffff;
--color-primary-foreground: #000000;
--color-secondary: #363636;
--color-interaction-ask-surface: #001d3d;
--color-interaction-ask-foreground: #80beff;
--color-interaction-ask-fill: rgba(70, 191, 114, 0.24);
--color-interaction-confirmation-surface: rgba(70, 191, 114, 0.16);
--color-interaction-confirmation-foreground: #87d9a4;
--color-foreground: var(--color-neutral-300);
--color-foreground-subtle: color-mix(in oklab, var(--color-neutral-300) 60%, transparent);
--color-foreground-subtlest: color-mix(in oklab, var(--color-neutral-300) 30%, transparent);
--lucide-subtlest-opacity: 0.3;
--color-foreground-inverse: #000000;
--color-success: #46bf72;
--color-success-foreground: #000000;
--color-idle-task: #7b5ce5;
--color-idle-task-surface: #160d38;
--color-destructive: #ff5c5c;
/* 修复原因：Zai Dark 曾把 destructive 前景设为黑色，与红色危险按钮的固定白字设计冲突。 */
--color-destructive-foreground: #ffffff;
--color-warning: #ff8a30;
--color-feedback-privacy-hint: var(--color-yellow-300);
--color-warning-foreground: #000000;
--color-diff-added: #46bf72;
--color-diff-added-foreground: #000000;
--color-diff-removed: #ff5c5c;
--color-diff-removed-foreground: #000000;
--color-git-none: var(--color-foreground);
--color-git-modified: #ff8a30;
--color-git-added: #46bf72;
--color-git-deleted: #ff5c5c;
--color-git-renamed: #4099ff;
--color-git-untracked: #46bf72;
--color-git-ignored: var(--color-foreground-subtlest);
--color-git-descendant: #ff8a30;
--color-toast: #2b2b2b;
--color-tooltip: #2b2b2b;
--color-tooltip-foreground: #f8f8f8;
--color-tooltip-tag: #363636;
--color-tooltip-tag-foreground: #adadad;
--color-tag: #363636;
--color-file-node: rgba(112, 174, 224, 0.16);
--color-file-node-hover: rgba(112, 174, 224, 0.22);
--color-file-node-foreground: #8fc5ef;
--color-skill-node: rgba(166, 137, 218, 0.16);
--color-skill-node-hover: rgba(166, 137, 218, 0.22);
--color-skill-node-foreground: #bda5e6;
--color-command-node: rgba(154, 166, 180, 0.14);
--color-command-node-hover: rgba(154, 166, 180, 0.2);
--color-command-node-foreground: #b5c0cc;
--color-subagent-node: rgba(183, 189, 117, 0.16);
--color-subagent-node-hover: rgba(183, 189, 117, 0.22);
--color-subagent-node-foreground: #c8cd90;
--color-session-node: rgba(104, 196, 188, 0.16);
--color-session-node-hover: rgba(104, 196, 188, 0.22);
--color-session-node-foreground: #93d8d2;
--color-plugin-node: rgba(224, 174, 112, 0.16);
--color-plugin-node-hover: rgba(224, 174, 112, 0.22);
--color-plugin-node-foreground: #efc58f;
--color-plugin-paid-plan-badge: #5a341b;
--color-plugin-paid-plan-badge-foreground: #ffd8b8;
}
/*
* 修复原因：之前只有 task 列表单独定制了滚动条，其他面板、下拉列表、代码区仍然保留系统默认样式，
* 同一套界面里会出现粗细、圆角和轨道背景都不一致的问题。这里把这套透明轨道 + 圆角 thumb
* 提升成全局原生滚动条样式，让 desktop/web、明暗主题下的视觉表现保持统一。
*/
* {
scrollbar-width: auto;
scrollbar-color: var(--color-border) transparent;
}
*::-webkit-scrollbar {
width: 14px;
height: 14px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
min-height: 32px;
min-width: 32px;
border: 3px solid transparent;
border-radius: 9999px;
background: var(--color-border);
background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
background: transparent;
}
/*
* 修复原因：xterm 自己的 viewport 会吃到全局滚动条样式，在终端右侧露出一条独立滚动条。
* 终端滚动仍交给 xterm 内部处理，这里只隐藏原生滚动条，避免终端面板出现额外视觉噪音。
*/
.terminal-xterm-shell .xterm-viewport {
scrollbar-width: none;
}
.terminal-xterm-shell .xterm-viewport::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
/*
* 修复原因：pptx 幻灯片按固有尺寸渲染后用 transform 缩放展示，文本框等内部元素的轻微溢出
* 会命中上面的全局滚动条样式，在幻灯片内部露出滚动条。幻灯片内容不存在用户滚动交互，
* 这里整体隐藏渲染表面内部的原生滚动条。
*/
[data-zcode-pptx-render-surface] * {
scrollbar-width: none;
}
[data-zcode-pptx-render-surface] *::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
@layer utilities {
.button-gradient {
background-image: linear-gradient(to bottom right, #191a1d, #747689);
}
.dark .button-gradient {
background-image: none;
background-color: #484a58;
}
.animated-gradient-text {
display: inline-block;
background: linear-gradient(
90deg,
var(--animated-gradient-text-strong) 0%,
var(--animated-gradient-text-strong) 34%,
var(--animated-gradient-text-soft) 50%,
var(--animated-gradient-text-strong) 66%,
var(--animated-gradient-text-strong) 100%
);
background-size: 300% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: gradient-flow 4s linear infinite;
will-change: background-position;
transform: translateZ(0);
backface-visibility: hidden;
}
.animated-gradient-text-subtle {
--animated-gradient-text-strong: var(--color-foreground-subtle);
}
.highspeed-animated-gradient-text .animated-gradient-text {
/* Bug 根因：accelerated turn 只改了工时文案，内部思考和工具仍继承普通扫光色。 */
--animated-gradient-text-strong: var(--color-icon-purple);
--animated-gradient-text-soft: color-mix(
in srgb,
var(--color-icon-purple) 22%,
transparent
);
}
.cua-group-gradient-text {
display: inline-block;
background: linear-gradient(
90deg,
var(--animated-gradient-text-strong) 0%,
var(--animated-gradient-text-soft) 40%,
var(--animated-gradient-text-soft) 60%,
var(--animated-gradient-text-strong) 100%
);
background-size: 200% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: cua-group-gradient-flow 1s linear infinite;
animation-delay: 0.5s;
will-change: background-position;
transform: translateZ(0);
backface-visibility: hidden;
}
@keyframes cua-group-gradient-flow {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.cua-group-gradient-text {
animation: none;
}
}
@keyframes gradient-flow {
0% {
background-position: 100% 0;
}
50% {
background-position: 0% 0;
}
100% {
background-position: 0% 0;
}
}
}
/* 工具摘要行细进度条的 indeterminate 扫光（ToolCallProgressIndicator，第三批 R7）。 */
.tool-call-progress-indeterminate {
animation: tool-call-progress-indeterminate 1.2s ease-in-out infinite;
}
@keyframes tool-call-progress-indeterminate {
0% {
left: -33%;
}
100% {
left: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.tool-call-progress-indeterminate {
animation: none;
left: 0;
width: 100%;
}
}
@keyframes zcode-stream-text-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes zcode-draft-prompt-waterfall {
from {
opacity: 0;
clip-path: inset(0 0 100% 0);
transform: translateY(-12px);
}
to {
opacity: 1;
clip-path: inset(0 0 0 0);
transform: translateY(0);
}
}
.zcode-draft-prompt-waterfall {
animation: zcode-draft-prompt-waterfall 260ms cubic-bezier(0.22, 1, 0.36, 1)
var(--zcode-draft-prompt-waterfall-delay, 0ms) both;
}
@media (prefers-reduced-motion: reduce) {
.zcode-draft-prompt-waterfall {
animation: none;
}
}