1@import "./styles/fonts.css";2@import "tailwindcss";3@import "./styles/tokens.css";4@import "./styles/theme-bridge.css";5@import "./styles/token-utilities.css";6@import "./styles/platform/shared.css";7@import
"./styles/platform/darwin.css"
;
8@import "./styles/platform/win32.css";
9@import "./styles/platform/linux.css";
10@import "tw-animate-css";
11@import "shadcn/tailwind.css";
12
13@custom-variant dark (&:is(.dark *));
14
15@source "../node_modules/streamdown/dist/*.js";
16
17html,
18body,
19#root {
20 height: 100%;
21}
22
23:root {
24 --desktop-portal-layer: 120;
25}
26
27body {
28 margin: 0;
29 overflow: hidden;
30 background: var(--surface-window);
31 color: var(--text-primary);
32 font-family: var(--font-sans);
33 -webkit-font-smoothing: antialiased;
34 user-select: none;
35 -webkit-user-select: none;
36}
37
38/* Opt in to text selection only on copyable surfaces (chat, previews, settings values). */
39.select-text,
40[data-selectable="text"],
41[data-file-preview-content="true"],
42[data-file-preview-markdown-shell="true"],
43.docx-preview,
44.settings-shell__content,
45input:not([type="checkbox"]):not([type="radio"]),
46textarea,
47[contenteditable="true"],
48pre,
49code {
50 user-select: text;
51 -webkit-user-select: text;
52}
53
54[data-spreadsheet-preview="true"] table,
55[data-spreadsheet-preview="true"] table button {
56 user-select: text;
57 -webkit-user-select: text;
58}
59
60* {
61 box-sizing: border-box;
62}
63
64[data-cowork-univer-canvas="true"],
65[data-cowork-univer-canvas="true"] * {
66 --primary-color: var(--accent);
67 --brand-color: var(--accent);
68}
69
70[data-cowork-univer-canvas="true"] {
71 user-select: text;
72 -webkit-user-select: text;
73}
74
75[data-cowork-univer-canvas="true"] :where(.univer, .univer-app, .univer-container) {
76 background: var(--surface-spreadsheet);
77}
78
79[data-cowork-univer-canvas="true"] :where(input, textarea, [contenteditable="true"]) {
80 user-select: text;
81 -webkit-user-select: text;
82}
83
84[data-cowork-univer-canvas="true"] [data-u-comp="formula-bar"] {
85 /* biome-ignore lint/complexity/noImportantStyles: override Univer's own formula-bar height */
86 height: 2.25rem !important;
87 min-height: 2.25rem;
88 overflow: hidden;
89}
90
91[data-cowork-univer-canvas="true"] [data-u-comp="formula-bar"] .univer-break-words {
92 overflow: hidden;
93 overflow-wrap: normal;
94 white-space: nowrap;
95 word-break: normal;
96}
97
98[data-cowork-univer-canvas="true"] [data-u-comp="formula-bar"] [data-u-comp="render-canvas"] {
99 display: block;
100 max-height: 2rem;
101}
102
103:root[data-window-mode="canvas"][data-canvas-surface] {
104 background: var(--surface-canvas);
105 color: var(--text-canvas);
106}
107
108:root[data-window-mode="canvas"][data-canvas-surface] body,
109:root[data-window-mode="canvas"][data-canvas-surface] #root {
110 background: var(--surface-canvas);
111 color: var(--text-canvas);
112}
113
114:root[data-window-mode="quick-chat"] body,
115:root[data-window-mode="utility"] body {
116 background: transparent;
117}
118
119/* Edge-to-edge popup shells; native windows provide the rounded clip. */
120:root[data-window-mode="quick-chat"] #root,
121:root[data-window-mode="utility"] #root {
122 overflow: hidden;
123}
124
125code,
126kbd,
127pre,
128samp {
129 font-family: var(--font-mono);
130}
131
132/* Thin overlay-style scrollbars for Chromium 146+ */
133::-webkit-scrollbar {
134 width: 5px;
135 height: 5px;
136}
137
138::-webkit-scrollbar-track {
139 background: transparent;
140}
141
142::-webkit-scrollbar-thumb {
143 background: var(--scrollbar-thumb);
144 border-radius: 3px;
145}
146
147::-webkit-scrollbar-thumb:hover {
148 background: var(--scrollbar-thumb-hover);
149}
150
151::selection {
152 background: var(--surface-selection);
153 color: inherit;
154}
155
156.is-user ::selection {
157 background: var(--surface-selection-inverse);
158 color: inherit;
159}
160
161:root[data-high-contrast="true"] ::selection,
162:root[data-high-contrast="true"] .is-user ::selection {
163 color: var(--text-primary-on-accent);
164}
165
166:where(:root[data-high-contrast="true"])
167 [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus {
168 --danger: var(--text-accent-foreground);
169 background: var(--surface-accent-interactive);
170 color: var(--text-accent-foreground);
171}
172
173:where(:root[data-high-contrast="true"]) [data-slot="command-item"][data-selected="true"] {
174 /* biome-ignore lint/complexity/noImportantStyles: selected command rows must override caller background utilities */
175 background: var(--surface-accent-interactive) !important;
176}
177
178:where(:root[data-high-contrast="true"])
179 :where([data-slot="command-item"][data-selected="true"], [data-slot="dropdown-menu-item"]:focus) {
180 /* biome-ignore lint/complexity/noImportantStyles: selected accessibility rows must override explicit child color utilities */
181 color: var(--text-accent-foreground) !important;
182}
183
184:where(:root[data-high-contrast="true"])
185 :where([data-slot="command-item"][data-selected="true"], [data-slot="dropdown-menu-item"]:focus)
186 :where(*):not(
187 [hidden],
188 .sr-only,
189 [hidden] *,
190 .sr-only *,
191 input,
192 textarea,
193 select,
194 button,
195 [contenteditable="true"],
196 input *,
197 textarea *,
198 select *,
199 button *,
200 [contenteditable="true"] *
201 ) {
202 /* biome-ignore lint/complexity/noImportantStyles: selected accessibility rows must override explicit child color utilities */
203 color: var(--text-accent-foreground) !important;
204}
205
206:where(:root[data-high-contrast="true"]) .app-selected-row:not([hidden], .sr-only) {
207 /* biome-ignore lint/complexity/noImportantStyles: selected accessibility rows must override explicit child color utilities */
208 color: var(--text-selected-row) !important;
209}
210
211:where(:root[data-high-contrast="true"])
212 .app-selected-row:not([hidden], .sr-only)
213 :where(*):not(
214 [hidden],
215 .sr-only,
216 [hidden] *,
217 .sr-only *,
218 :where(
219 .app-selected-row > :is(input, textarea, select, button, [contenteditable="true"]),
220 .app-selected-row > * :is(input, textarea, select, button, [contenteditable="true"])
221 ),
222 :where(
223 .app-selected-row > :is(input, textarea, select, button, [contenteditable="true"]) *,
224 .app-selected-row > * :is(input, textarea, select, button, [contenteditable="true"]) *
225 )
226 ) {
227 /* biome-ignore lint/complexity/noImportantStyles: selected accessibility rows must override explicit child color utilities */
228 color: var(--text-selected-row) !important;
229}
230
231@media (forced-colors: active) {
232 :where(:root) [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus {
233 --danger: var(--text-accent-foreground);
234 background: var(--surface-accent-interactive);
235 color: var(--text-accent-foreground);
236 }
237 :root ::selection,
238 :root .is-user ::selection {
239 color: var(--text-primary-on-accent);
240 }
241
242 :where(:root) [data-slot="command-item"][data-selected="true"] {
243 /* biome-ignore lint/complexity/noImportantStyles: selected command rows must override caller background utilities */
244 background: var(--surface-accent-interactive) !important;
245 }
246
247 :where(:root)
248 :where(
249 [data-slot="command-item"][data-selected="true"],
250 [data-slot="dropdown-menu-item"]:focus
251 ) {
252 /* biome-ignore lint/complexity/noImportantStyles: selected accessibility rows must override explicit child color utilities */
253 color: var(--text-accent-foreground) !important;
254 }
255
256 :where(:root)
257 :where([data-slot="command-item"][data-selected="true"], [data-slot="dropdown-menu-item"]:focus)
258 :where(*):not(
259 [hidden],
260 .sr-only,
261 [hidden] *,
262 .sr-only *,
263 input,
264 textarea,
265 select,
266 button,
267 [contenteditable="true"],
268 input *,
269 textarea *,
270 select *,
271 button *,
272 [contenteditable="true"] *
273 ) {
274 /* biome-ignore lint/complexity/noImportantStyles: selected accessibility rows must override explicit child color utilities */
275 color: var(--text-accent-foreground) !important;
276 }
277
278 :where(:root) .app-selected-row:not([hidden], .sr-only) {
279 /* biome-ignore lint/complexity/noImportantStyles: selected accessibility rows must override explicit child color utilities */
280 color: var(--text-selected-row) !important;
281 }
282
283 :where(:root)
284 .app-selected-row:not([hidden], .sr-only)
285 :where(*):not(
286 [hidden],
287 .sr-only,
288 [hidden] *,
289 .sr-only *,
290 :where(
291 .app-selected-row > :is(input, textarea, select, button, [contenteditable="true"]),
292 .app-selected-row > * :is(input, textarea, select, button, [contenteditable="true"])
293 ),
294 :where(
295 .app-selected-row > :is(input, textarea, select, button, [contenteditable="true"]) *,
296 .app-selected-row > * :is(input, textarea, select, button, [contenteditable="true"]) *
297 )
298 ) {
299 /* biome-ignore lint/complexity/noImportantStyles: selected accessibility rows must override explicit child color utilities */
300 color: var(--text-selected-row) !important;
301 }
302
303 :root [data-slot="switch"][data-state="unchecked"] {
304 /* biome-ignore lint/complexity/noImportantStyles: forced-colors Switch track must override generated state background utilities */
305 background-color: CanvasText !important;
306 }
307
308 :root [data-slot="switch"][data-state="unchecked"] [data-slot="switch-thumb"] {
309 /* biome-ignore lint/complexity/noImportantStyles: forced-colors Switch thumb must override generated state background utilities */
310 background-color: Canvas !important;
311 }
312
313 :root [data-slot="switch"][data-state="checked"] {
314 /* biome-ignore lint/complexity/noImportantStyles: forced-colors Switch track must override generated state background utilities */
315 background-color: Highlight !important;
316 }
317
318 :root [data-slot="switch"][data-state="checked"] [data-slot="switch-thumb"] {
319 /* biome-ignore lint/complexity/noImportantStyles: forced-colors Switch thumb must override generated state background utilities */
320 background-color: HighlightText !important;
321 }
322}
323
324:root[data-high-contrast="true"] [data-slot="switch"][data-state="unchecked"] {
325 /* biome-ignore lint/complexity/noImportantStyles: accessibility Switch track must override generated state background utilities */
326 background-color: CanvasText !important;
327}
328
329:root[data-high-contrast="true"]
330 [data-slot="switch"][data-state="unchecked"]
331 [data-slot="switch-thumb"] {
332 /* biome-ignore lint/complexity/noImportantStyles: accessibility Switch thumb must override generated state background utilities */
333 background-color: Canvas !important;
334}
335
336:root[data-high-contrast="true"] [data-slot="switch"][data-state="checked"] {
337 /* biome-ignore lint/complexity/noImportantStyles: accessibility Switch track must override generated state background utilities */
338 background-color: Highlight !important;
339}
340
341:root[data-high-contrast="true"]
342 [data-slot="switch"][data-state="checked"]
343 [data-slot="switch-thumb"] {
344 /* biome-ignore lint/complexity/noImportantStyles: accessibility Switch thumb must override generated state background utilities */
345 background-color: HighlightText !important;
346}
347
348:where(
349 button,
350 [role="button"],
351 [role="treeitem"],
352 a,
353 input,
354 textarea,
355 select,
356 [role="separator"]
357):focus-visible {
358 outline: none;
359 box-shadow: var(--focus-ring-shadow);
360}
361
362/* Composer textarea: no field frame — global focus ring reads as a heavy “inner border”. */
363[data-slot="message-composer"] textarea {
364 border: none;
365 box-shadow: none;
366}
367
368[data-slot="message-composer"] textarea:focus-visible {
369 outline: none;
370 box-shadow: none;
371}
372
373[data-slot="command-input"]:focus-visible {
374 outline: none;
375 box-shadow: none;
376}
377
378.app-topbar {
379 -webkit-app-region: drag;
380 user-select: none;
381 -webkit-user-select: none;
382}
383
384.app-topbar__controls {
385 -webkit-app-region: no-drag;
386}
387
388.app-native-no-drag {
389 -webkit-app-region: no-drag;
390}
391
392[data-slot="alert-dialog-overlay"],
393[data-slot="alert-dialog-content"],
394[data-slot="context-menu-content"],
395[data-slot="context-menu-sub-content"],
396[data-slot="dialog-overlay"],
397[data-slot="dialog-content"],
398[data-slot="drawer-overlay"],
399[data-slot="drawer-content"],
400[data-slot="dropdown-menu-content"],
401[data-slot="dropdown-menu-sub-content"],
402[data-slot="hover-card-content"],
403[data-slot="menubar-content"],
404[data-slot="menubar-sub-content"],
405[data-slot="popover-content"],
406[data-slot="select-content"],
407[data-slot="sheet-overlay"],
408[data-slot="sheet-content"],
409[data-slot="tooltip-content"] {
410 z-index: var(--desktop-portal-layer);
411}
412
413.app-topbar__toolbar-layer {
414 z-index: 1;
415}
416
417.app-topbar__title {
418 z-index: 1;
419 line-height: 1;
420}
421
422.app-topbar__thread-shell {
423 z-index: 1;
424}
425
426.app-topbar__thread-anchor {
427 min-width: 0;
428 width: 100%;
429 max-width: min(38rem, 100%);
430 padding-left: 1rem;
431}
432
433.app-topbar__thread-anchor--collapsed {
434 padding-left: 4.5rem;
435}
436
437.app-topbar__thread-anchor--win32-collapsed {
438 padding-left: 0.5rem;
439}
440
441.app-topbar__thread-button {
442 min-width: 0;
443 max-width: 100%;
444 border: 0;
445 background: transparent;
446 padding: 0.22rem 0.35rem;
447 border-radius: 0.7rem;
448 color: inherit;
449 box-shadow: none;
450 outline: 0;
451 text-align: left;
452 transition:
453 background-color 160ms ease,
454 color 160ms ease;
455}
456
457.app-topbar__thread-button:hover,
458.app-topbar__thread-button[data-open="true"] {
459 background: var(--surface-topbar-thread-hover);
460}
461
462.app-topbar__thread-title {
463 flex: 0 1 auto;
464 min-width: 0;
465 font-size: 0.8rem;
466 font-weight: 620;
467 line-height: 1;
468 letter-spacing: -0.02em;
469 color: var(--text-emphasis);
470}
471
472.app-topbar__thread-separator {
473 flex: 0 0 auto;
474 font-size: 0.7rem;
475 font-weight: 560;
476 line-height: 1;
477}
478
479.app-topbar__thread-subtitle {
480 flex: 0 1 auto;
481 min-width: 0;
482 font-size: 0.74rem;
483 font-weight: 560;
484 line-height: 1;
485 font-style: italic;
486 color: var(--text-subtle);
487}
488
489.app-topbar__thread-popover {
490 z-index: 30;
491 -webkit-app-region: no-drag;
492 pointer-events: auto;
493 border: 1px solid var(--border-context);
494 border-radius: 14px;
495 background: var(--surface-topbar-popover);
496 box-shadow: var(--shadow-surface-elevated);
497 padding: 0.65rem 0.75rem 0.75rem;
498}
499
500.app-topbar__toolbar-button {
501 color: var(--text-muted);
502 opacity: 0.82;
503}
504
505.app-topbar__toolbar-button:hover {
506 color: var(--text-primary);
507 opacity: 1;
508}
509
510.app-topbar__inline-sidebar-toggle {
511 z-index: 2;
512}
513
514.app-topbar__sidebar-strip {
515 z-index: 2;
516}
517
518.app-sidebar__collapse-toggle {
519 display: none;
520}
521
522.app-sidebar-collapse-control {
523 display: none;
524}
525
526.app-topbar__plain-icon-button {
527 background: transparent;
528 box-shadow: none;
529 border: 0;
530 outline: 0;
531}
532
533.app-topbar__sidebar-fill {
534 position: absolute;
535 top: 0;
536 bottom: 0;
537 left: 0;
538 pointer-events: none;
539 z-index: 0;
540 background: var(--surface-sidebar-pane);
541 backdrop-filter: blur(var(--sidebar-titlebar-blur));
542}
543
544.app-topbar__content-fill {
545 position: absolute;
546 top: 0;
547 right: 0;
548 bottom: 0;
549 pointer-events: none;
550 z-index: 0;
551 background: var(--surface-workspace-pane);
552 backdrop-filter: blur(var(--titlebar-blur));
553}
554
555.app-shell {
556 position: relative;
557 background: var(--surface-shell);
558}
559
560.app-shell--settings {
561 background: var(--surface-shell);
562}
563
564.app-shell--chat {
565 min-height: 0;
566}
567
568.app-chat-main-column {
569 position: relative;
570 min-height: 0;
571 min-width: 0;
572}
573
574.app-main-content {
575 background: var(--surface-main);
576}
577
578.app-skills-view {
579 background: var(--surface-workspace-pane);
580}
581
582.app-left-sidebar-pane {
583 border-right-color: var(--border-glass);
584 background: var(--surface-sidebar-pane);
585 backdrop-filter: blur(var(--sidebar-blur));
586}
587
588.app-right-sidebar-pane {
589 background: var(--surface-workspace-pane);
590}
591
592.app-context-sidebar__panel {
593 border-color: var(--border-context);
594 background: var(--surface-context-panel);
595 box-shadow: var(--shadow-surface-elevated);
596}
597
598.app-context-sidebar__nested-panel {
599 border-color: var(--border-context-nested);
600 background: var(--surface-context-panel-nested);
601}
602
603.settings-shell__back-button {
604 border: none;
605 background: transparent;
606 box-shadow: none;
607}
608
609.settings-shell__back-button:hover {
610 background: var(--surface-settings-nav-hover);
611}
612
613.settings-shell__nav-button {
614 min-height: 2.125rem;
615}
616
617.settings-shell__nav-button:hover {
618 background: var(--surface-settings-nav-hover);
619}
620
621.settings-shell__nav-button--active {
622 background: var(--surface-settings-nav-active);
623 color: var(--text-settings-nav-active);
624 box-shadow: none;
625}
626
627.settings-shell__main {
628 border-left-width: 0;
629 background: var(--surface-settings-main);
630}
631
632@media (min-width: 720px) {
633 .settings-shell__main {
634 box-shadow: var(--shadow-settings-pane-divider);
635 }
636}
637
638:root .app-adaptive-rail-surface[data-presentation="overlay"] {
639 position: fixed;
640}
641
642:root .settings-shell__nav[data-presentation="overlay"] {
643 position: fixed;
644 z-index: 1001;
645 border-right-width: 1px;
646 border-bottom-width: 0;
647 background: var(--sidebar-bg);
648}
649
650.settings-shell__page-header {
651 background: var(--surface-settings-main);
652 box-shadow: 0 1px 0 var(--border-subtle);
653}
654
655.settings-shell__header-actions,
656.settings-shell__header-actions * {
657 -webkit-app-region: no-drag;
658}
659
660.settings-shell__content {
661 min-height: 100%;
662}
663
664.settings-section {
665 animation: settingsSectionIn 220ms var(--ease-out-strong) both;
666}
667
668.settings-page > .settings-section:nth-child(2) {
669 animation-delay: 40ms;
670}
671
672.settings-page > .settings-section:nth-child(3) {
673 animation-delay: 80ms;
674}
675
676.settings-page > .settings-section:nth-child(4) {
677 animation-delay: 110ms;
678}
679
680.settings-page > .settings-section:nth-child(5) {
681 animation-delay: 140ms;
682}
683
684.settings-page > .settings-section:nth-child(n + 6) {
685 animation-delay: 170ms;
686}
687
688.settings-row {
689 transition:
690 background-color 140ms var(--ease-out-strong),
691 color 140ms var(--ease-out-strong);
692}
693
694.settings-row:hover {
695 background: var(--surface-settings-row-hover);
696}
697
698.settings-shell__main [data-slot="card"] {
699 border-color: var(--border-subtle);
700 background: var(--surface-card);
701 box-shadow: none;
702}
703
704@keyframes settingsSectionIn {
705 from {
706 opacity: 0;
707 transform: translateY(4px);
708 }
709
710 to {
711 opacity: 1;
712 transform: translateY(0);
713 }
714}
715
716@keyframes sidebarRailIn {
717 from {
718 opacity: 0.68;
719 transform: translateX(-10px);
720 }
721
722 to {
723 opacity: 1;
724 transform: translateX(0);
725 }
726}
727
728/*
729 * Global reduced-motion guard. Neutralize common motion utilities and use a
730 * broad catch-all so hand-rolled animations / transitions also respect the OS
731 * preference without needing a per-selector override for every new effect.
732 */
733@media (prefers-reduced-motion: reduce) {
734 *,
735 *::before,
736 *::after {
737 animation-duration: 0.01ms;
738 animation-iteration-count: 1;
739 transition-duration: 0.01ms;
740 scroll-behavior: auto;
741 }
742
743 .animate-pulse.animate-pulse,
744 .animate-spin.animate-spin,
745 .animate-bounce.animate-bounce,
746 .animate-ping.animate-ping {
747 animation: none;
748 }
749
750 .animate-in,
751 .animate-out,
752 .fade-in,
753 .fade-out,
754 .zoom-in,
755 .zoom-out,
756 .slide-in-from-top-2,
757 .slide-in-from-bottom-2,
758 .slide-in-from-left-2,
759 .slide-in-from-right-2 {
760 animation: none;
761 transition: none;
762 }
763
764 body.app-animating-sidebars .app-left-sidebar-pane,
765 body.app-animating-sidebars .app-right-sidebar-pane,
766 body.app-animating-sidebars .app-topbar__sidebar-fill,
767 body.app-animating-sidebars .app-topbar__content-fill,
768 body.app-animating-sidebars .app-topbar__thread-shell,
769 body.app-animating-sidebars .app-topbar__thread-anchor {
770 transition: none;
771 }
772
773 .settings-section {
774 animation: none;
775 }
776
777 .activity-thinking-shimmer {
778 animation: none;
779 background-image: none;
780 -webkit-text-fill-color: var(--text-muted);
781 color: var(--text-muted);
782 }
783}
784
785.activity-thinking-shimmer {
786 position: relative;
787 display: inline-block;
788 overflow: hidden;
789 color: var(--text-muted);
790 background-image: linear-gradient(
791 100deg,
792 var(--text-muted) 0%,
793 var(--text-muted) 30%,
794 var(--text-emphasis) 50%,
795 var(--text-muted) 70%,
796 var(--text-muted) 100%
797 );
798 background-position: 160% 50%;
799 background-size: 320% 100%;
800 -webkit-background-clip: text;
801 background-clip: text;
802 -webkit-text-fill-color: transparent;
803 animation: activityThinkingShimmer 1.25s ease-in-out infinite;
804}
805
806@keyframes activityThinkingShimmer {
807 from {
808 background-position: 160% 50%;
809 }
810
811 to {
812 background-position: -160% 50%;
813 }
814}
815
816/* Soft "live" pulse for in-progress activity — gentler than animate-pulse. */
817.activity-live-dot {
818 animation: activityLiveDot 2s var(--ease-standard) infinite;
819}
820
821@keyframes activityLiveDot {
822 0%,
823 100% {
824 opacity: 1;
825 transform: scale(1);
826 }
827
828 50% {
829 opacity: 0.45;
830 transform: scale(0.8);
831 }
832}
833
834/* Reasoning section disclosure entrance (mount-only, no Radix height var). */
835.reasoning-section-in {
836 animation: chatRowIn 150ms var(--ease-out-strong);
837}
838
839@keyframes activityTraceExpand {
840 from {
841 height: 0;
842 opacity: 0;
843 transform: translateY(-0.25rem);
844 }
845
846 to {
847 height: var(--radix-collapsible-content-height);
848 opacity: 1;
849 transform: translateY(0);
850 }
851}
852
853@keyframes activityTraceCollapse {
854 from {
855 height: var(--radix-collapsible-content-height);
856 opacity: 1;
857 transform: translateY(0);
858 }
859
860 to {
861 height: 0;
862 opacity: 0;
863 transform: translateY(-0.25rem);
864 }
865}
866
867.activity-trace-content {
868 overflow: hidden;
869 transform-origin: top;
870}
871
872.activity-trace-content[data-state="open"] {
873 animation: activityTraceExpand 200ms cubic-bezier(0.16, 1, 0.3, 1);
874}
875
876.activity-trace-content[data-state="closed"] {
877 animation: activityTraceCollapse 160ms cubic-bezier(0.4, 0, 1, 1);
878}
879
880@media (prefers-reduced-motion: reduce) {
881 .activity-trace-content[data-state] {
882 animation: none;
883 }
884}
885
886/* Mount-only row entrances for the transcript. Never animates deltas — only the
887 initial mount of a row (user message, completed assistant row, cards). */
888.chat-feed-content > * {
889 animation: chatRowIn 180ms var(--ease-out-strong);
890}
891
892@keyframes chatRowIn {
893 from {
894 opacity: 0;
895 transform: translateY(4px);
896 }
897
898 to {
899 opacity: 1;
900 transform: translateY(0);
901 }
902}
903
904.chat-jump-in {
905 animation: chatJumpIn 160ms var(--ease-out-strong);
906}
907
908@keyframes chatJumpIn {
909 from {
910 opacity: 0;
911 transform: scale(0.95);
912 }
913
914 to {
915 opacity: 1;
916 transform: scale(1);
917 }
918}
919
920@media (prefers-reduced-motion: reduce) {
921 .chat-feed-content > *,
922 .chat-jump-in {
923 animation: none;
924 }
925
926 .activity-live-dot {
927 animation: none;
928 opacity: 1;
929 transform: none;
930 }
931
932 .reasoning-section-in {
933 animation: none;
934 }
935}
936
937.sidebar-rail-enter {
938 animation: sidebarRailIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
939}
940
941.sidebar-lift {
942 transition:
943 background-color 180ms ease,
944 color 180ms ease,
945 opacity 180ms ease,
946 border-color 180ms ease;
947}
948
949.sidebar-chevron {
950 transition:
951 transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
952 color 180ms ease;
953}
954
955.sidebar-symbol-slot {
956 position: relative;
957}
958
959.sidebar-symbol-default,
960.sidebar-symbol-hover {
961 transition:
962 opacity 180ms ease,
963 transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
964 color 180ms ease;
965}
966
967.sidebar-symbol-default {
968 opacity: 1;
969 transform: scale(1);
970}
971
972.sidebar-symbol-hover {
973 opacity: 0;
974 transform: scale(0.88);
975}
976
977.sidebar-symbol-slot:hover .sidebar-symbol-default,
978.sidebar-symbol-slot:focus-visible .sidebar-symbol-default,
979.sidebar-symbol-slot[aria-expanded="true"]:hover .sidebar-symbol-default,
980.sidebar-symbol-slot[aria-expanded="true"]:focus-visible .sidebar-symbol-default {
981 opacity: 0;
982 transform: scale(0.88);
983}
984
985.sidebar-symbol-slot:hover .sidebar-symbol-hover,
986.sidebar-symbol-slot:focus-visible .sidebar-symbol-hover,
987.sidebar-symbol-slot[aria-expanded="true"]:hover .sidebar-symbol-hover,
988.sidebar-symbol-slot[aria-expanded="true"]:focus-visible .sidebar-symbol-hover {
989 opacity: 1;
990 transform: scale(1);
991}
992
993.sidebar-workspace-card {
994 border: 1px solid transparent;
995 transition:
996 background-color 180ms ease,
997 color 180ms ease,
998 border-color 180ms ease;
999}
1000
1001.sidebar-workspace-card--reorderable {
1002 cursor: grab;
1003 touch-action: none;
1004}
1005
1006.sidebar-workspace-card--reorderable:active {
1007 cursor: grabbing;
1008}
1009
1010.sidebar-thread-item {
1011 transition:
1012 opacity 220ms ease,
1013 background-color 180ms ease,
1014 color 180ms ease,
1015 border-color 180ms ease;
1016}
1017
1018.sidebar-thread-region {
1019 display: grid;
1020 overflow: hidden;
1021 grid-template-rows: 0fr;
1022 margin-top: 0;
1023 opacity: 0;
1024 pointer-events: none;
1025 transition:
1026 grid-template-rows 240ms cubic-bezier(0.22, 1, 0.36, 1),
1027 opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
1028 margin-top 240ms cubic-bezier(0.22, 1, 0.36, 1);
1029}
1030
1031.sidebar-thread-region[data-state="open"] {
1032 grid-template-rows: 1fr;
1033 margin-top: 0.375rem;
1034 opacity: 1;
1035 pointer-events: auto;
1036}
1037
1038body.app-resizing-sidebars {
1039 cursor: col-resize;
1040 user-select: none;
1041}
1042
1043body.app-resizing-message-bar {
1044 cursor: row-resize;
1045 user-select: none;
1046}
1047
1048body.app-resizing-sidebars .app-left-sidebar-pane,
1049body.app-resizing-sidebars .app-right-sidebar-pane {
1050 transition: none;
1051}
1052
1053body.app-resizing-sidebars .app-left-sidebar-pane {
1054 backdrop-filter: none;
1055}
1056
1057body.app-resizing-sidebars .app-topbar__sidebar-fill,
1058body.app-resizing-sidebars .app-topbar__content-fill,
1059body.app-resizing-sidebars .app-topbar__thread-shell,
1060body.app-resizing-sidebars .app-topbar__thread-anchor {
1061 transition: none;
1062}
1063
1064body.app-resizing-sidebars .app-topbar__sidebar-fill {
1065 backdrop-filter: none;
1066}
1067
1068body.app-animating-sidebars .app-left-sidebar-pane,
1069body.app-animating-sidebars .app-right-sidebar-pane,
1070body.app-animating-sidebars .app-topbar__sidebar-fill,
1071body.app-animating-sidebars .app-topbar__content-fill,
1072body.app-animating-sidebars .app-topbar__thread-shell,
1073body.app-animating-sidebars .app-topbar__thread-anchor {
1074 transition:
1075 width 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
1076 left 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
1077 right 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
1078 padding-left 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
1079 border-right-width 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
1080 border-left-width 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
1081}
1082
1083body.app-animating-sidebars .app-left-sidebar-pane,
1084body.app-animating-sidebars .app-topbar__sidebar-fill,
1085body.app-animating-sidebars .app-topbar__content-fill {
1086 backdrop-filter: none;
1087}
1088
1089@media (prefers-reduced-motion: reduce) {
1090 .sidebar-rail-enter {
1091 animation: none;
1092 }
1093
1094 .sidebar-lift,
1095 .sidebar-chevron,
1096 .sidebar-symbol-default,
1097 .sidebar-symbol-hover,
1098 .sidebar-workspace-card,
1099 .sidebar-thread-item,
1100 .sidebar-thread-region {
1101 transition: none;
1102 }
1103}
1104
1105/* Indeterminate progress bar: slide a third-width slug across the track. */
1106@keyframes app-progress-indeterminate {
1107 0% {
1108 left: -33%;
1109 }
1110 100% {
1111 left: 100%;
1112 }
1113}
1114
1115.app-progress-indeterminate {
1116 animation: app-progress-indeterminate 1100ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
1117 border-radius: inherit;
1118}
1119
1120@media (prefers-reduced-motion: reduce) {
1121 /* Static half-filled bar instead of a moving slug for users who opt out of motion. */
1122 .app-progress-indeterminate {
1123 animation: none;
1124 left: 0;
1125 width: 50%;
1126 }
1127}
1128
1129.sidebar-chats-scroll-container {
1130 max-height: 396px; /* Capped to exactly 10 items (10 * 36px + 9 * 4px gap) */
1131 overflow-y: auto;
1132 min-height: 0;
1133}
1134
