@import "tailwindcss"; @custom-variant dark (&:is(.dark, .dark *));/* Window Controls Overlay: active when Electron exposes native titlebar control geometry. */@custom-variant wco (&:is(.wco, .wco *)); /* On mobile, morph the expanded hero composer into the compact docked composer while it moves; the rest of the app remains visually stationary. */html[data-mobile-composer-route-transition="true"]::view-transition-old(root),html[data-mobile-composer-route-transition="true"]::view-transition-new(root) { animation: none;} html[data-mobile-composer-route-transition="true"]::view-transition-group(t3-mobile-composer) { animation-duration: 180ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);} html[data-mobile-composer-route-transition="true"]::view-transition-image-pair(t3-mobile-composer) { isolation: isolate;} html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobile-composer) { animation: t3-mobile-composer-old 180ms linear both; mix-blend-mode: normal;} html[data-mobile-composer-route-transition="true"]::view-transition-new(t3-mobile-composer) { animation: t3-mobile-composer-new 180ms linear both; mix-blend-mode: normal;} /* The expanded and compact composers have different internal layouts. Use a brief crossfade while their shared wrapper moves so the layout change does not read as a single-frame cut. */@keyframes t3-mobile-composer-old { 0%, 35% { opacity: 1; } 65%, 100% { opacity: 0; }} @keyframes t3-mobile-composer-new { 0%, 35% { opacity: 0; } 65%, 100% { opacity: 1; }} html[data-mobile-composer-route-transition="true"]::view-transition-group(t3-mobile-draft-headline) { animation-duration: 130ms;} html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobile-draft-headline) { animation: t3-mobile-draft-headline-exit 130ms cubic-bezier(0.4, 0, 1, 1) both; mix-blend-mode: normal;} @keyframes t3-mobile-draft-headline-exit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); }} :root { --app-scrollbar-width: 6px; --app-scrollbar-thumb: rgb(217 217 217); --app-scrollbar-thumb-hover: rgb(191 191 191); /* * Compact UI geometry. Keep these values semantic so sidebar, palette, * tooltip, and toolbar controls cannot quietly drift apart. */ --control-radius: 0.5rem; --sidebar-content-inset: 0.5rem; --sidebar-control-gap: 0.5rem; --sidebar-icon-color: color-mix(in srgb, var(--sidebar-muted-foreground) 60%, var(--sidebar)); --sidebar-row-content-inset: 0.625rem; --command-shell-inset: 0.5rem; --command-content-inset: 1rem; --floating-content-inset: 0.75rem; --glass-blur: 12px; --glass-opacity: 80%; --glass-saturation: 1.14; --desktop-window-right-resize-inset: 0px; --workspace-topbar-height: 52px; --workspace-controls-top: 0px; --workspace-controls-left: calc(env(safe-area-inset-left) + 0.75rem); --workspace-controls-right: calc(env(safe-area-inset-right) + 0.75rem); --workspace-native-controls-inset: 0px; --workspace-titlebar-control-size: 1.75rem; --workspace-titlebar-control-gap: 0.75rem;} .dark { --app-scrollbar-thumb: rgb(255 255 255 / 8%); --app-scrollbar-thumb-hover: rgb(255 255 255 / 12%); --glass-blur: 16px; --glass-saturation: 1.08;} [data-slot="sidebar-wrapper"] { --workspace-titlebar-content-left: calc( var(--workspace-controls-left) + var(--workspace-titlebar-control-size) + var(--workspace-titlebar-control-gap) );} .wco { --workspace-topbar-height: env(titlebar-area-height, 52px); --workspace-controls-top: env(titlebar-area-y, 0px); --workspace-controls-left: calc(env(titlebar-area-x, 0px) + 0.75rem); --workspace-controls-right: calc( 100vw - env(titlebar-area-width, 100vw) - env(titlebar-area-x, 0px) + 0.75rem ); --workspace-native-controls-inset: calc( 100vw - env(titlebar-area-width, 100vw) - env(titlebar-area-x, 0px) + 0.75rem );} /* The font tokens are declared outside the inline theme so utilities reference the variables and Settings -> Appearance can override them at runtime. The default stacks are mirrored in `appearanceFonts.ts`. */@theme { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;} @theme inline { --color-zinc-25: oklch(99.2% 0 0); --animate-skeleton: skeleton 2s infinite linear; /* Duty-cycled indicator animations: long holds with stepped ramps, so the compositor updates discrete frames instead of every vsync. */ --animate-status-pulse: status-pulse 2s infinite; --animate-ghost-pulse: ghost-pulse 2.4s infinite; --animate-status-ping: status-ping 2s infinite; --color-warning-foreground: var(--warning-foreground); --color-warning: var(--warning); --color-warning-surface: var(--warning-surface); --color-error-foreground: var(--error-foreground); --color-error: var(--error); --color-error-surface: var(--error-surface); --color-update-foreground: var(--update-foreground); --color-update: var(--update); --color-update-surface: var(--update-surface); --color-success-foreground: var(--success-foreground); --color-success: var(--success); --color-info-foreground: var(--info-foreground); --color-info: var(--info); --color-destructive-foreground: var(--destructive-foreground); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-placeholder: var(--placeholder); --color-secondary-label: var(--secondary-label); --color-icon-muted: var(--icon-muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --color-foreground: var(--foreground); --color-background: var(--background); --color-surface-raised: var(--surface-raised); --color-message: var(--message-surface); --color-message-foreground: var(--message-foreground); --color-message-action: var(--message-action); --color-message-action-foreground: var(--message-action-foreground); --color-message-action-hover: var(--message-action-hover); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-muted-foreground: var(--sidebar-muted-foreground); --color-sidebar-control-surface: var(--sidebar-control-surface); --color-sidebar-row-hover: var(--sidebar-row-hover); --color-sidebar-row-active: var(--sidebar-row-active); --color-sidebar-row-selected: var(--sidebar-row-selected); --color-sidebar-border: var(--sidebar-border); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-2xl: calc(var(--radius) + 8px); --radius-3xl: calc(var(--radius) + 12px); --radius-4xl: calc(var(--radius) + 16px); @keyframes skeleton { /* Transform-only so the highlight sweep stays on the compositor, then a long hold with the band parked off-screen instead of a constant shimmer. */ 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } } @keyframes ghost-pulse { /* The loading ghosts' breath. Stepped like the status indicators, so however many bars a ghost holds, the compositor draws a handful of discrete frames per cycle rather than one per vsync — which on a 120Hz display is the difference between ~14 and ~288 updates. */ 0%, 42% { opacity: 1; animation-timing-function: steps(4); } 50%, 92% { opacity: 0.55; animation-timing-function: steps(4); } 100% { opacity: 1; } } @keyframes status-pulse { 0%, 40% { opacity: 1; animation-timing-function: steps(6); } 50%, 90% { opacity: 0.5; animation-timing-function: steps(6); } 100% { opacity: 1; } } @keyframes status-ping { /* Burst first (immediate feedback for click ripples), then hold invisible for the rest of the cycle. Mirrors animate-ping's 75%-scale start. */ 0% { opacity: 0.9; scale: 0.75; animation-timing-function: steps(8); } 40%, 100% { opacity: 0; scale: 2; } }} @layer base { :root { /* Dev artwork defaults. Built-in themes override these seven pigments in the components layer; Nightly derives a darker matching palette. */ --stage-art-top: oklch(0.782169 0.123386 240.226); --stage-art-mid: oklch(0.616111 0.195824 259.735); --stage-art-bottom: oklch(0.441553 0.232394 265.474); --stage-art-highlight: oklch(0.951597 0.037289 215.482); --stage-art-secondary: oklch(0.794668 0.12136 235.46); --stage-art-tertiary: oklch(0.678991 0.170261 275.365); --stage-art-line: oklch(0.959666 0.029238 218.179); --stage-night-top: color-mix( in oklch, var(--stage-art-top) 38%, oklch(0.283792 0.117327 297.201) ); --stage-night-mid: color-mix( in oklch, var(--stage-art-mid) 38%, oklch(0.227147 0.086086 277.99) ); --stage-night-bottom: color-mix( in oklch, var(--stage-art-bottom) 38%, oklch(0.200528 0.055699 261.216) ); --stage-night-highlight: var(--stage-art-highlight); --stage-night-secondary: color-mix( in oklch, var(--stage-art-secondary) 55%, var(--stage-night-mid) ); --stage-night-tertiary: color-mix( in oklch, var(--stage-art-tertiary) 60%, var(--stage-night-top) ); --stage-night-line: color-mix(in oklch, var(--stage-art-line) 82%, oklch(1 0 0)); } .dark { --stage-art-top: oklch(0.581473 0.149124 256.9); --stage-art-mid: oklch(0.456509 0.159377 261.945); --stage-art-bottom: oklch(0.291327 0.136578 267.649); } * { @apply border-border outline-ring/50; } :where([data-slot="menu-popup"], [data-slot="select-popup"], [data-slot="popover-popup"]):focus, :where( [data-slot="menu-popup"], [data-slot="select-popup"], [data-slot="popover-popup"] ):focus-visible { @apply outline-none ring-0; } html { background-color: var(--app-chrome-background); } body { @apply text-foreground relative; background-color: var(--app-chrome-background); }} @layer components { .sidebar-brand { display: none; } .sidebar-brand-stage { display: none; } @media (min-width: 48rem) { .sidebar-brand { display: flex; } @container sidebar-header (min-width: 15.75rem) { .sidebar-brand-stage { display: inline-flex; } } } /* Stage-channel sidebar art; ::after ramps to the sidebar bg color and the mask lets the surface grain show through at the boundary. Panels whose background differs from the app chrome (e.g. sidebar v2) override --sidebar-stage-fade so the art fades into their own surface color. */ .sidebar-stage-backdrop { --stage-fade: var(--sidebar-stage-fade, var(--app-chrome-background)); mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 92%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 92%); } .sidebar-stage-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 0%, transparent 28%, color-mix(in srgb, var(--stage-fade) 10%, transparent) 40%, color-mix(in srgb, var(--stage-fade) 30%, transparent) 52%, color-mix(in srgb, var(--stage-fade) 58%, transparent) 64%, color-mix(in srgb, var(--stage-fade) 82%, transparent) 75%, color-mix(in srgb, var(--stage-fade) 96%, transparent) 85%, var(--stage-fade) 93% ); } /* Each maintainer palette gives the same line art its own material: rose vellum, forest drafting paper, marine cyanotype, copper, and violet ink. These colors stay deliberately deep at the top edge so the white stage wordmark and controls retain contrast in both appearance modes. */ html[data-theme-id="t3-chat"] { --stage-art-top: oklch(0.760675 0.141361 348.019); --stage-art-mid: oklch(0.588093 0.188832 353.138); --stage-art-bottom: oklch(0.383959 0.135096 348.656); --stage-art-highlight: oklch(0.949689 0.034241 339.171); --stage-art-secondary: oklch(0.763402 0.163836 352.525); --stage-art-tertiary: oklch(0.70819 0.180285 311.949); --stage-art-line: oklch(0.952158 0.034194 336.179); } html.dark[data-theme-id="t3-chat"] { --stage-art-top: oklch(0.540689 0.143665 347.587); --stage-art-mid: oklch(0.396586 0.126592 347.6); --stage-art-bottom: oklch(0.249959 0.079694 340.523); --stage-art-highlight: oklch(0.921297 0.051708 343.229); --stage-art-secondary: oklch(0.667398 0.165674 352.549); --stage-art-tertiary: oklch(0.609315 0.163722 306.315); --stage-art-line: oklch(0.945349 0.036045 341.433); } html[data-theme-id="grove"] { --stage-art-top: oklch(0.751465 0.112731 157.313); --stage-art-mid: oklch(0.567105 0.11099 158.859); --stage-art-bottom: oklch(0.367918 0.067635 160.558); --stage-art-highlight: oklch(0.976387 0.034353 161.456); --stage-art-secondary: oklch(0.80968 0.117071 158.817); --stage-art-tertiary: oklch(0.784102 0.108047 88.516); --stage-art-line: oklch(0.981098 0.027812 158.718); --stage-night-top: oklch(0.45805 0.079616 160.092); --stage-night-mid: oklch(0.368483 0.065631 162.719); --stage-night-bottom: oklch(0.264797 0.044397 168.088); --stage-night-highlight: oklch(0.912563 0.055173 158.974); --stage-night-secondary: oklch(0.665652 0.109731 156.599); --stage-night-tertiary: oklch(0.698651 0.103024 89.828); --stage-night-line: oklch(0.945336 0.041923 157.222); } html.dark[data-theme-id="grove"] { --stage-art-top: oklch(0.58719 0.09869 157.426); --stage-art-mid: oklch(0.454979 0.079031 159.756); --stage-art-bottom: oklch(0.297856 0.050355 161.167); --stage-art-highlight: oklch(0.952407 0.053872 158.44); --stage-art-secondary: oklch(0.732591 0.120606 155.853); --stage-art-tertiary: oklch(0.716282 0.116547 80.563); --stage-art-line: oklch(0.961577 0.035285 157.03); --stage-night-top: oklch(0.398632 0.065534 158.601); --stage-night-mid: oklch(0.290561 0.049694 160.456); --stage-night-bottom: oklch(0.210147 0.03173 169.818); --stage-night-highlight: oklch(0.866303 0.057526 156.796); --stage-night-secondary: oklch(0.586553 0.093722 157.365); --stage-night-tertiary: oklch(0.6364 0.101769 82.985); --stage-night-line: oklch(0.913292 0.035718 156.976); } html[data-theme-id="ocean"] { --stage-art-top: oklch(0.792993 0.088072 220.421); --stage-art-mid: oklch(0.590296 0.116841 243.184); --stage-art-bottom: oklch(0.409123 0.093718 247.98); --stage-art-highlight: oklch(0.971217 0.023008 213.615); --stage-art-secondary: oklch(0.788391 0.090856 215.684); --stage-art-tertiary: oklch(0.76441 0.099607 187.893); --stage-art-line: oklch(0.976025 0.019647 212.543); } html.dark[data-theme-id="ocean"] { --stage-art-top: oklch(0.59663 0.089167 233.427); --stage-art-mid: oklch(0.461094 0.084904 243.478); --stage-art-bottom: oklch(0.294818 0.05947 250.526); --stage-art-highlight: oklch(0.952907 0.032224 221.27); --stage-art-secondary: oklch(0.732079 0.09296 224.414); --stage-art-tertiary: oklch(0.720885 0.095495 190.903); --stage-art-line: oklch(0.961039 0.027355 219.756); } html[data-theme-id="ember"] { --stage-art-top: oklch(0.782439 0.118806 52.569); --stage-art-mid: oklch(0.62863 0.15922 39.401); --stage-art-bottom: oklch(0.404251 0.117664 30.424); --stage-art-highlight: oklch(0.962469 0.02774 70.95); --stage-art-secondary: oklch(0.815735 0.11904 53.659); --stage-art-tertiary: oklch(0.69361 0.159346 24.787); --stage-art-line: oklch(0.970313 0.02052 67.583); --stage-night-top: oklch(0.470236 0.102322 39.355); --stage-night-mid: oklch(0.345367 0.080697 33.217); --stage-night-bottom: oklch(0.227386 0.056077 27.437); --stage-night-highlight: oklch(0.903891 0.059281 56.181); --stage-night-secondary: oklch(0.641705 0.126508 44.376); --stage-night-tertiary: oklch(0.538694 0.129931 25.865); --stage-night-line: oklch(0.926348 0.046029 58.73); } html.dark[data-theme-id="ember"] { --stage-art-top: oklch(0.597533 0.120694 43.455); --stage-art-mid: oklch(0.437763 0.101287 34.86); --stage-art-bottom: oklch(0.264269 0.055858 26.548); --stage-art-highlight: oklch(0.929214 0.042638 55.801); --stage-art-secondary: oklch(0.705592 0.137369 43.176); --stage-art-tertiary: oklch(0.629583 0.158322 24.088); --stage-art-line: oklch(0.945058 0.033906 58.824); --stage-night-top: oklch(0.392352 0.081287 36.444); --stage-night-mid: oklch(0.271305 0.056352 31.135); --stage-night-bottom: oklch(0.182126 0.028154 27.774); --stage-night-highlight: oklch(0.851007 0.061294 53.805); --stage-night-secondary: oklch(0.560789 0.10645 42.953); --stage-night-tertiary: oklch(0.476228 0.106656 24.165); --stage-night-line: oklch(0.884931 0.046607 56.556); } html[data-theme-id="iris"] { --stage-art-top: oklch(0.738305 0.113454 298.926); --stage-art-mid: oklch(0.551826 0.159189 294.531); --stage-art-bottom: oklch(0.37147 0.133317 289.999); --stage-art-highlight: oklch(0.949472 0.029204 303.081); --stage-art-secondary: oklch(0.745085 0.125892 298.647); --stage-art-tertiary: oklch(0.73066 0.167815 340.964); --stage-art-line: oklch(0.960278 0.024064 306.969);Lines 1–500 of 2318. Load more
@import "tailwindcss"; @custom-variant dark (&:is(.dark, .dark *)); /* Window Controls Overlay: active when Electron exposes native titlebar control geometry. */ @custom-variant wco (&:is(.wco, .wco *)); /* On mobile, morph the expanded hero composer into the compact docked composer while it moves; the rest of the app remains visually stationary. */ html[data-mobile-composer-route-transition="true"]::view-transition-old(root), html[data-mobile-composer-route-transition="true"]::view-transition-new(root) { animation: none; } html[data-mobile-composer-route-transition="true"]::view-transition-group(t3-mobile-composer) { animation-duration: 180ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } html[data-mobile-composer-route-transition="true"]::view-transition-image-pair(t3-mobile-composer) { isolation: isolate; } html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobile-composer) { animation: t3-mobile-composer-old 180ms linear both; mix-blend-mode: normal; } html[data-mobile-composer-route-transition="true"]::view-transition-new(t3-mobile-composer) { animation: t3-mobile-composer-new 180ms linear both; mix-blend-mode: normal; } /* The expanded and compact composers have different internal layouts. Use a brief crossfade while their shared wrapper moves so the layout change does not read as a single-frame cut. */ @keyframes t3-mobile-composer-old { 0%, 35% { opacity: 1; } 65%, 100% { opacity: 0; } } @keyframes t3-mobile-composer-new { 0%, 35% { opacity: 0; } 65%, 100% { opacity: 1; } } html[data-mobile-composer-route-transition="true"]::view-transition-group(t3-mobile-draft-headline) { animation-duration: 130ms; } html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobile-draft-headline) { animation: t3-mobile-draft-headline-exit 130ms cubic-bezier(0.4, 0, 1, 1) both; mix-blend-mode: normal; } @keyframes t3-mobile-draft-headline-exit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } } :root { --app-scrollbar-width: 6px; --app-scrollbar-thumb: rgb(217 217 217); --app-scrollbar-thumb-hover: rgb(191 191 191); /* * Compact UI geometry. Keep these values semantic so sidebar, palette, * tooltip, and toolbar controls cannot quietly drift apart. */ --control-radius: 0.5rem; --sidebar-content-inset: 0.5rem; --sidebar-control-gap: 0.5rem; --sidebar-icon-color: color-mix(in srgb, var(--sidebar-muted-foreground) 60%, var(--sidebar)); --sidebar-row-content-inset: 0.625rem; --command-shell-inset: 0.5rem; --command-content-inset: 1rem; --floating-content-inset: 0.75rem; --glass-blur: 12px; --glass-opacity: 80%; --glass-saturation: 1.14; --desktop-window-right-resize-inset: 0px; --workspace-topbar-height: 52px; --workspace-controls-top: 0px; --workspace-controls-left: calc(env(safe-area-inset-left) + 0.75rem); --workspace-controls-right: calc(env(safe-area-inset-right) + 0.75rem); --workspace-native-controls-inset: 0px; --workspace-titlebar-control-size: 1.75rem; --workspace-titlebar-control-gap: 0.75rem; } .dark { --app-scrollbar-thumb: rgb(255 255 255 / 8%); --app-scrollbar-thumb-hover: rgb(255 255 255 / 12%); --glass-blur: 16px; --glass-saturation: 1.08; } [data-slot="sidebar-wrapper"] { --workspace-titlebar-content-left: calc( var(--workspace-controls-left) + var(--workspace-titlebar-control-size) + var(--workspace-titlebar-control-gap) ); } .wco { --workspace-topbar-height: env(titlebar-area-height, 52px); --workspace-controls-top: env(titlebar-area-y, 0px); --workspace-controls-left: calc(env(titlebar-area-x, 0px) + 0.75rem); --workspace-controls-right: calc( 100vw - env(titlebar-area-width, 100vw) - env(titlebar-area-x, 0px) + 0.75rem ); --workspace-native-controls-inset: calc( 100vw - env(titlebar-area-width, 100vw) - env(titlebar-area-x, 0px) + 0.75rem ); } /* The font tokens are declared outside the inline theme so utilities reference the variables and Settings -> Appearance can override them at runtime. The default stacks are mirrored in `appearanceFonts.ts`. */ @theme { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; } @theme inline { --color-zinc-25: oklch(99.2% 0 0); --animate-skeleton: skeleton 2s infinite linear; /* Duty-cycled indicator animations: long holds with stepped ramps, so the compositor updates discrete frames instead of every vsync. */ --animate-status-pulse: status-pulse 2s infinite; --animate-ghost-pulse: ghost-pulse 2.4s infinite; --animate-status-ping: status-ping 2s infinite; --color-warning-foreground: var(--warning-foreground); --color-warning: var(--warning); --color-warning-surface: var(--warning-surface); --color-error-foreground: var(--error-foreground); --color-error: var(--error); --color-error-surface: var(--error-surface); --color-update-foreground: var(--update-foreground); --color-update: var(--update); --color-update-surface: var(--update-surface); --color-success-foreground: var(--success-foreground); --color-success: var(--success); --color-info-foreground: var(--info-foreground); --color-info: var(--info); --color-destructive-foreground: var(--destructive-foreground); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-placeholder: var(--placeholder); --color-secondary-label: var(--secondary-label); --color-icon-muted: var(--icon-muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --color-foreground: var(--foreground); --color-background: var(--background); --color-surface-raised: var(--surface-raised); --color-message: var(--message-surface); --color-message-foreground: var(--message-foreground); --color-message-action: var(--message-action); --color-message-action-foreground: var(--message-action-foreground); --color-message-action-hover: var(--message-action-hover); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-muted-foreground: var(--sidebar-muted-foreground); --color-sidebar-control-surface: var(--sidebar-control-surface); --color-sidebar-row-hover: var(--sidebar-row-hover); --color-sidebar-row-active: var(--sidebar-row-active); --color-sidebar-row-selected: var(--sidebar-row-selected); --color-sidebar-border: var(--sidebar-border); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-2xl: calc(var(--radius) + 8px); --radius-3xl: calc(var(--radius) + 12px); --radius-4xl: calc(var(--radius) + 16px); @keyframes skeleton { /* Transform-only so the highlight sweep stays on the compositor, then a long hold with the band parked off-screen instead of a constant shimmer. */ 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } } @keyframes ghost-pulse { /* The loading ghosts' breath. Stepped like the status indicators, so however many bars a ghost holds, the compositor draws a handful of discrete frames per cycle rather than one per vsync — which on a 120Hz display is the difference between ~14 and ~288 updates. */ 0%, 42% { opacity: 1; animation-timing-function: steps(4); } 50%, 92% { opacity: 0.55; animation-timing-function: steps(4); } 100% { opacity: 1; } } @keyframes status-pulse { 0%, 40% { opacity: 1; animation-timing-function: steps(6); } 50%, 90% { opacity: 0.5; animation-timing-function: steps(6); } 100% { opacity: 1; } } @keyframes status-ping { /* Burst first (immediate feedback for click ripples), then hold invisible for the rest of the cycle. Mirrors animate-ping's 75%-scale start. */ 0% { opacity: 0.9; scale: 0.75; animation-timing-function: steps(8); } 40%, 100% { opacity: 0; scale: 2; } } } @layer base { :root { /* Dev artwork defaults. Built-in themes override these seven pigments in the components layer; Nightly derives a darker matching palette. */ --stage-art-top: oklch(0.782169 0.123386 240.226); --stage-art-mid: oklch(0.616111 0.195824 259.735); --stage-art-bottom: oklch(0.441553 0.232394 265.474); --stage-art-highlight: oklch(0.951597 0.037289 215.482); --stage-art-secondary: oklch(0.794668 0.12136 235.46); --stage-art-tertiary: oklch(0.678991 0.170261 275.365); --stage-art-line: oklch(0.959666 0.029238 218.179); --stage-night-top: color-mix( in oklch, var(--stage-art-top) 38%, oklch(0.283792 0.117327 297.201) ); --stage-night-mid: color-mix( in oklch, var(--stage-art-mid) 38%, oklch(0.227147 0.086086 277.99) ); --stage-night-bottom: color-mix( in oklch, var(--stage-art-bottom) 38%, oklch(0.200528 0.055699 261.216) ); --stage-night-highlight: var(--stage-art-highlight); --stage-night-secondary: color-mix( in oklch, var(--stage-art-secondary) 55%, var(--stage-night-mid) ); --stage-night-tertiary: color-mix( in oklch, var(--stage-art-tertiary) 60%, var(--stage-night-top) ); --stage-night-line: color-mix(in oklch, var(--stage-art-line) 82%, oklch(1 0 0)); } .dark { --stage-art-top: oklch(0.581473 0.149124 256.9); --stage-art-mid: oklch(0.456509 0.159377 261.945); --stage-art-bottom: oklch(0.291327 0.136578 267.649); } * { @apply border-border outline-ring/50; } :where([data-slot="menu-popup"], [data-slot="select-popup"], [data-slot="popover-popup"]):focus, :where( [data-slot="menu-popup"], [data-slot="select-popup"], [data-slot="popover-popup"] ):focus-visible { @apply outline-none ring-0; } html { background-color: var(--app-chrome-background); } body { @apply text-foreground relative; background-color: var(--app-chrome-background); } } @layer components { .sidebar-brand { display: none; } .sidebar-brand-stage { display: none; } @media (min-width: 48rem) { .sidebar-brand { display: flex; } @container sidebar-header (min-width: 15.75rem) { .sidebar-brand-stage { display: inline-flex; } } } /* Stage-channel sidebar art; ::after ramps to the sidebar bg color and the mask lets the surface grain show through at the boundary. Panels whose background differs from the app chrome (e.g. sidebar v2) override --sidebar-stage-fade so the art fades into their own surface color. */ .sidebar-stage-backdrop { --stage-fade: var(--sidebar-stage-fade, var(--app-chrome-background)); mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 92%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 92%); } .sidebar-stage-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 0%, transparent 28%, color-mix(in srgb, var(--stage-fade) 10%, transparent) 40%, color-mix(in srgb, var(--stage-fade) 30%, transparent) 52%, color-mix(in srgb, var(--stage-fade) 58%, transparent) 64%, color-mix(in srgb, var(--stage-fade) 82%, transparent) 75%, color-mix(in srgb, var(--stage-fade) 96%, transparent) 85%, var(--stage-fade) 93% ); } /* Each maintainer palette gives the same line art its own material: rose vellum, forest drafting paper, marine cyanotype, copper, and violet ink. These colors stay deliberately deep at the top edge so the white stage wordmark and controls retain contrast in both appearance modes. */ html[data-theme-id="t3-chat"] { --stage-art-top: oklch(0.760675 0.141361 348.019); --stage-art-mid: oklch(0.588093 0.188832 353.138); --stage-art-bottom: oklch(0.383959 0.135096 348.656); --stage-art-highlight: oklch(0.949689 0.034241 339.171); --stage-art-secondary: oklch(0.763402 0.163836 352.525); --stage-art-tertiary: oklch(0.70819 0.180285 311.949); --stage-art-line: oklch(0.952158 0.034194 336.179); } html.dark[data-theme-id="t3-chat"] { --stage-art-top: oklch(0.540689 0.143665 347.587); --stage-art-mid: oklch(0.396586 0.126592 347.6); --stage-art-bottom: oklch(0.249959 0.079694 340.523); --stage-art-highlight: oklch(0.921297 0.051708 343.229); --stage-art-secondary: oklch(0.667398 0.165674 352.549); --stage-art-tertiary: oklch(0.609315 0.163722 306.315); --stage-art-line: oklch(0.945349 0.036045 341.433); } html[data-theme-id="grove"] { --stage-art-top: oklch(0.751465 0.112731 157.313); --stage-art-mid: oklch(0.567105 0.11099 158.859); --stage-art-bottom: oklch(0.367918 0.067635 160.558); --stage-art-highlight: oklch(0.976387 0.034353 161.456); --stage-art-secondary: oklch(0.80968 0.117071 158.817); --stage-art-tertiary: oklch(0.784102 0.108047 88.516); --stage-art-line: oklch(0.981098 0.027812 158.718); --stage-night-top: oklch(0.45805 0.079616 160.092); --stage-night-mid: oklch(0.368483 0.065631 162.719); --stage-night-bottom: oklch(0.264797 0.044397 168.088); --stage-night-highlight: oklch(0.912563 0.055173 158.974); --stage-night-secondary: oklch(0.665652 0.109731 156.599); --stage-night-tertiary: oklch(0.698651 0.103024 89.828); --stage-night-line: oklch(0.945336 0.041923 157.222); } html.dark[data-theme-id="grove"] { --stage-art-top: oklch(0.58719 0.09869 157.426); --stage-art-mid: oklch(0.454979 0.079031 159.756); --stage-art-bottom: oklch(0.297856 0.050355 161.167); --stage-art-highlight: oklch(0.952407 0.053872 158.44); --stage-art-secondary: oklch(0.732591 0.120606 155.853); --stage-art-tertiary: oklch(0.716282 0.116547 80.563); --stage-art-line: oklch(0.961577 0.035285 157.03); --stage-night-top: oklch(0.398632 0.065534 158.601); --stage-night-mid: oklch(0.290561 0.049694 160.456); --stage-night-bottom: oklch(0.210147 0.03173 169.818); --stage-night-highlight: oklch(0.866303 0.057526 156.796); --stage-night-secondary: oklch(0.586553 0.093722 157.365); --stage-night-tertiary: oklch(0.6364 0.101769 82.985); --stage-night-line: oklch(0.913292 0.035718 156.976); } html[data-theme-id="ocean"] { --stage-art-top: oklch(0.792993 0.088072 220.421); --stage-art-mid: oklch(0.590296 0.116841 243.184); --stage-art-bottom: oklch(0.409123 0.093718 247.98); --stage-art-highlight: oklch(0.971217 0.023008 213.615); --stage-art-secondary: oklch(0.788391 0.090856 215.684); --stage-art-tertiary: oklch(0.76441 0.099607 187.893); --stage-art-line: oklch(0.976025 0.019647 212.543); } html.dark[data-theme-id="ocean"] { --stage-art-top: oklch(0.59663 0.089167 233.427); --stage-art-mid: oklch(0.461094 0.084904 243.478); --stage-art-bottom: oklch(0.294818 0.05947 250.526); --stage-art-highlight: oklch(0.952907 0.032224 221.27); --stage-art-secondary: oklch(0.732079 0.09296 224.414); --stage-art-tertiary: oklch(0.720885 0.095495 190.903); --stage-art-line: oklch(0.961039 0.027355 219.756); } html[data-theme-id="ember"] { --stage-art-top: oklch(0.782439 0.118806 52.569); --stage-art-mid: oklch(0.62863 0.15922 39.401); --stage-art-bottom: oklch(0.404251 0.117664 30.424); --stage-art-highlight: oklch(0.962469 0.02774 70.95); --stage-art-secondary: oklch(0.815735 0.11904 53.659); --stage-art-tertiary: oklch(0.69361 0.159346 24.787); --stage-art-line: oklch(0.970313 0.02052 67.583); --stage-night-top: oklch(0.470236 0.102322 39.355); --stage-night-mid: oklch(0.345367 0.080697 33.217); --stage-night-bottom: oklch(0.227386 0.056077 27.437); --stage-night-highlight: oklch(0.903891 0.059281 56.181); --stage-night-secondary: oklch(0.641705 0.126508 44.376); --stage-night-tertiary: oklch(0.538694 0.129931 25.865); --stage-night-line: oklch(0.926348 0.046029 58.73); } html.dark[data-theme-id="ember"] { --stage-art-top: oklch(0.597533 0.120694 43.455); --stage-art-mid: oklch(0.437763 0.101287 34.86); --stage-art-bottom: oklch(0.264269 0.055858 26.548); --stage-art-highlight: oklch(0.929214 0.042638 55.801); --stage-art-secondary: oklch(0.705592 0.137369 43.176); --stage-art-tertiary: oklch(0.629583 0.158322 24.088); --stage-art-line: oklch(0.945058 0.033906 58.824); --stage-night-top: oklch(0.392352 0.081287 36.444); --stage-night-mid: oklch(0.271305 0.056352 31.135); --stage-night-bottom: oklch(0.182126 0.028154 27.774); --stage-night-highlight: oklch(0.851007 0.061294 53.805); --stage-night-secondary: oklch(0.560789 0.10645 42.953); --stage-night-tertiary: oklch(0.476228 0.106656 24.165); --stage-night-line: oklch(0.884931 0.046607 56.556); } html[data-theme-id="iris"] { --stage-art-top: oklch(0.738305 0.113454 298.926); --stage-art-mid: oklch(0.551826 0.159189 294.531); --stage-art-bottom: oklch(0.37147 0.133317 289.999); --stage-art-highlight: oklch(0.949472 0.029204 303.081); --stage-art-secondary: oklch(0.745085 0.125892 298.647); --stage-art-tertiary: oklch(0.73066 0.167815 340.964); --stage-art-line: oklch(0.960278 0.024064 306.969);