@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; --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 { --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 );} @theme inline { --color-zinc-25: oklch(99.2% 0 0); --animate-skeleton: skeleton 2s -1s 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-status-ping: status-ping 2s infinite; --animate-sidebar-working-text: sidebar-working-text 3.4s infinite; --font-sans: "DM Sans Variable", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "SF Mono", "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace; --color-warning-foreground: var(--warning-foreground); --color-warning: var(--warning); --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-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-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 { to { background-position: -200% 0; } } @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; } } @keyframes sidebar-working-text { 0%, 36% { opacity: 1; animation-timing-function: steps(10); } 50%, 86% { opacity: 0.75; animation-timing-function: steps(10); } 100% { opacity: 1; } }} @layer base { * { @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) { @container sidebar-header (min-width: 13.5rem) { .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% ); } .stage-blueprint { --stage-bp-top: #67c2ff; --stage-bp-mid: #347ff8; --stage-bp-bottom: #1538d0; } .dark .stage-blueprint { --stage-bp-top: #3a7ad1; --stage-bp-mid: #2050ae; --stage-bp-bottom: #101f6e; } .workspace-topbar { display: flex; height: var(--workspace-topbar-height); min-height: var(--workspace-topbar-height); flex-shrink: 0; align-items: center; } /* Fade rows themselves as they pass beneath the top chrome. A mask remains visible even when the header and timeline share the same background. */ .chat-timeline-scroll-fade, .settings-page-scroll-fade { --topbar-scroll-fade-height: 2.5rem; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, rgb(0 0 0 / 10%) 10%, rgb(0 0 0 / 30%) 24%, rgb(0 0 0 / 58%) 42%, rgb(0 0 0 / 82%) 62%, rgb(0 0 0 / 96%) 82%, black 100% ), linear-gradient(black, black); -webkit-mask-position: top, bottom; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% var(--topbar-scroll-fade-height), 100% calc(100% - var(--topbar-scroll-fade-height)); mask-image: linear-gradient( to bottom, transparent 0%, rgb(0 0 0 / 10%) 10%, rgb(0 0 0 / 30%) 24%, rgb(0 0 0 / 58%) 42%, rgb(0 0 0 / 82%) 62%, rgb(0 0 0 / 96%) 82%, black 100% ), linear-gradient(black, black); mask-position: top, bottom; mask-repeat: no-repeat; mask-size: 100% var(--topbar-scroll-fade-height), 100% calc(100% - var(--topbar-scroll-fade-height)); } .workspace-titlebar-controls { position: absolute; top: var(--workspace-controls-top); right: var(--workspace-controls-right); display: flex; height: var(--workspace-topbar-height); align-items: center; -webkit-app-region: no-drag; } .surface-subheader { @apply flex h-10 min-h-10 shrink-0 items-center border-b border-border/60 bg-background; } .chat-composer-horizontal-inset { padding-inline-start: calc(env(safe-area-inset-left) + 0.75rem); padding-inline-end: calc(env(safe-area-inset-right) + 0.75rem); } .chat-composer-glass { background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); } .chat-composer-glass-host { --chat-composer-glass-surface: var(--card); position: relative; box-shadow: 0 0 0 1px rgb(0 0 0 / 8%), 0 12px 28px -18px rgb(0 0 0 / 40%); } .chat-composer-glass-host::before { pointer-events: none; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: color-mix( in srgb, var(--chat-composer-glass-surface) var(--glass-opacity), transparent ); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); content: ""; } .chat-composer-context-strip { --chat-composer-context-surface: var(--card); position: relative; isolation: isolate; } .chat-composer-context-strip::before { position: absolute; z-index: -1; inset: 0; border-radius: 0 0 16px 16px; background: color-mix( in srgb, var(--chat-composer-context-surface) var(--glass-opacity), transparent ); -webkit-mask-image: linear-gradient(to bottom, transparent 0 1rem, black 1rem); mask-image: linear-gradient(to bottom, transparent 0 1rem, black 1rem); box-shadow: 0 12px 28px -18px rgb(0 0 0 / 40%); content: ""; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); } .dark .chat-composer-glass-host { --chat-composer-glass-surface: color-mix(in srgb, var(--background) 96%, var(--color-white)); box-shadow: none; } .dark .chat-composer-context-strip::before { box-shadow: 0 14px 32px -18px rgb(0 0 0 / 75%); } .alert-glass { --alert-glass-tint: transparent; background: linear-gradient( color-mix(in srgb, var(--alert-glass-tint) 4%, transparent), color-mix(in srgb, var(--alert-glass-tint) 4%, transparent) ), color-mix(in srgb, var(--background) var(--glass-opacity), transparent) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); } .alert-glass[data-variant="error"] { --alert-glass-tint: var(--destructive); } .alert-glass[data-variant="info"] { --alert-glass-tint: var(--info); } .alert-glass[data-variant="success"] { --alert-glass-tint: var(--success); } .alert-glass[data-variant="warning"] { --alert-glass-tint: var(--warning); } .dropdown-glass, .dialog-glass { background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); } .dialog-backdrop { background: color-mix(in srgb, var(--background) 60%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .dropdown-glass { border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); box-shadow: 0 16px 40px -18px rgb(0 0 0 / 55%); } .dialog-glass { border-color: color-mix(in srgb, var(--foreground) 10%, transparent); box-shadow: 0 24px 64px -24px rgb(0 0 0 / 65%); } .dark .dropdown-glass { box-shadow: 0 18px 44px -18px rgb(0 0 0 / 80%); } .dark .model-picker-surface.model-picker-surface { background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent); } .dark .dialog-glass {Lines 1–500 of 1456. 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; --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 { --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 ); } @theme inline { --color-zinc-25: oklch(99.2% 0 0); --animate-skeleton: skeleton 2s -1s 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-status-ping: status-ping 2s infinite; --animate-sidebar-working-text: sidebar-working-text 3.4s infinite; --font-sans: "DM Sans Variable", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "SF Mono", "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace; --color-warning-foreground: var(--warning-foreground); --color-warning: var(--warning); --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-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-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 { to { background-position: -200% 0; } } @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; } } @keyframes sidebar-working-text { 0%, 36% { opacity: 1; animation-timing-function: steps(10); } 50%, 86% { opacity: 0.75; animation-timing-function: steps(10); } 100% { opacity: 1; } } } @layer base { * { @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) { @container sidebar-header (min-width: 13.5rem) { .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% ); } .stage-blueprint { --stage-bp-top: #67c2ff; --stage-bp-mid: #347ff8; --stage-bp-bottom: #1538d0; } .dark .stage-blueprint { --stage-bp-top: #3a7ad1; --stage-bp-mid: #2050ae; --stage-bp-bottom: #101f6e; } .workspace-topbar { display: flex; height: var(--workspace-topbar-height); min-height: var(--workspace-topbar-height); flex-shrink: 0; align-items: center; } /* Fade rows themselves as they pass beneath the top chrome. A mask remains visible even when the header and timeline share the same background. */ .chat-timeline-scroll-fade, .settings-page-scroll-fade { --topbar-scroll-fade-height: 2.5rem; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, rgb(0 0 0 / 10%) 10%, rgb(0 0 0 / 30%) 24%, rgb(0 0 0 / 58%) 42%, rgb(0 0 0 / 82%) 62%, rgb(0 0 0 / 96%) 82%, black 100% ), linear-gradient(black, black); -webkit-mask-position: top, bottom; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% var(--topbar-scroll-fade-height), 100% calc(100% - var(--topbar-scroll-fade-height)); mask-image: linear-gradient( to bottom, transparent 0%, rgb(0 0 0 / 10%) 10%, rgb(0 0 0 / 30%) 24%, rgb(0 0 0 / 58%) 42%, rgb(0 0 0 / 82%) 62%, rgb(0 0 0 / 96%) 82%, black 100% ), linear-gradient(black, black); mask-position: top, bottom; mask-repeat: no-repeat; mask-size: 100% var(--topbar-scroll-fade-height), 100% calc(100% - var(--topbar-scroll-fade-height)); } .workspace-titlebar-controls { position: absolute; top: var(--workspace-controls-top); right: var(--workspace-controls-right); display: flex; height: var(--workspace-topbar-height); align-items: center; -webkit-app-region: no-drag; } .surface-subheader { @apply flex h-10 min-h-10 shrink-0 items-center border-b border-border/60 bg-background; } .chat-composer-horizontal-inset { padding-inline-start: calc(env(safe-area-inset-left) + 0.75rem); padding-inline-end: calc(env(safe-area-inset-right) + 0.75rem); } .chat-composer-glass { background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); } .chat-composer-glass-host { --chat-composer-glass-surface: var(--card); position: relative; box-shadow: 0 0 0 1px rgb(0 0 0 / 8%), 0 12px 28px -18px rgb(0 0 0 / 40%); } .chat-composer-glass-host::before { pointer-events: none; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: color-mix( in srgb, var(--chat-composer-glass-surface) var(--glass-opacity), transparent ); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); content: ""; } .chat-composer-context-strip { --chat-composer-context-surface: var(--card); position: relative; isolation: isolate; } .chat-composer-context-strip::before { position: absolute; z-index: -1; inset: 0; border-radius: 0 0 16px 16px; background: color-mix( in srgb, var(--chat-composer-context-surface) var(--glass-opacity), transparent ); -webkit-mask-image: linear-gradient(to bottom, transparent 0 1rem, black 1rem); mask-image: linear-gradient(to bottom, transparent 0 1rem, black 1rem); box-shadow: 0 12px 28px -18px rgb(0 0 0 / 40%); content: ""; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); } .dark .chat-composer-glass-host { --chat-composer-glass-surface: color-mix(in srgb, var(--background) 96%, var(--color-white)); box-shadow: none; } .dark .chat-composer-context-strip::before { box-shadow: 0 14px 32px -18px rgb(0 0 0 / 75%); } .alert-glass { --alert-glass-tint: transparent; background: linear-gradient( color-mix(in srgb, var(--alert-glass-tint) 4%, transparent), color-mix(in srgb, var(--alert-glass-tint) 4%, transparent) ), color-mix(in srgb, var(--background) var(--glass-opacity), transparent) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); } .alert-glass[data-variant="error"] { --alert-glass-tint: var(--destructive); } .alert-glass[data-variant="info"] { --alert-glass-tint: var(--info); } .alert-glass[data-variant="success"] { --alert-glass-tint: var(--success); } .alert-glass[data-variant="warning"] { --alert-glass-tint: var(--warning); } .dropdown-glass, .dialog-glass { background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); } .dialog-backdrop { background: color-mix(in srgb, var(--background) 60%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .dropdown-glass { border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); box-shadow: 0 16px 40px -18px rgb(0 0 0 / 55%); } .dialog-glass { border-color: color-mix(in srgb, var(--foreground) 10%, transparent); box-shadow: 0 24px 64px -24px rgb(0 0 0 / 65%); } .dark .dropdown-glass { box-shadow: 0 18px 44px -18px rgb(0 0 0 / 80%); } .dark .model-picker-surface.model-picker-surface { background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent); } .dark .dialog-glass {