@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: #67c2ff;    --stage-art-mid: #347ff8;    --stage-art-bottom: #1538d0;    --stage-art-highlight: #d4f6ff;    --stage-art-secondary: #65c8ff;    --stage-art-tertiary: #7c8bff;    --stage-art-line: #ddf7ff;    --stage-night-top: color-mix(in oklch, var(--stage-art-top) 38%, #32155b);    --stage-night-mid: color-mix(in oklch, var(--stage-art-mid) 38%, #151443);    --stage-night-bottom: color-mix(in oklch, var(--stage-art-bottom) 38%, #07152f);    --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%, white);  }   .dark {    --stage-art-top: #3a7ad1;    --stage-art-mid: #2050ae;    --stage-art-bottom: #101f6e;  }   * {    @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%    );  }   /* 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: #f28ac1;    --stage-art-mid: #cb3e86;    --stage-art-bottom: #73194f;    --stage-art-highlight: #ffe6f6;    --stage-art-secondary: #ff82bc;    --stage-art-tertiary: #c67bf1;    --stage-art-line: #ffe7f8;  }   html.dark[data-theme-id="t3-chat"] {    --stage-art-top: #a8467e;    --stage-art-mid: #742253;    --stage-art-bottom: #390e2d;    --stage-art-highlight: #ffd8ee;    --stage-art-secondary: #de639e;    --stage-art-tertiary: #9c64cf;    --stage-art-line: #ffe4f4;  }   html[data-theme-id="grove"] {    --stage-art-top: #6cc492;    --stage-art-mid: #2d8a5e;    --stage-art-bottom: #174a33;    --stage-art-highlight: #e4fff0;    --stage-art-secondary: #79d8a5;    --stage-art-tertiary: #d5b563;    --stage-art-line: #eafff2;    --stage-night-top: #286548;    --stage-night-mid: #174a35;    --stage-night-bottom: #0a2c21;    --stage-night-highlight: #c4eed5;    --stage-night-secondary: #54a878;    --stage-night-tertiary: #b79b4d;    --stage-night-line: #d7f6e2;  }   html.dark[data-theme-id="grove"] {    --stage-art-top: #438e65;    --stage-art-mid: #286447;    --stage-art-bottom: #123525;    --stage-art-highlight: #d2fbe2;    --stage-art-secondary: #62bf88;    --stage-art-tertiary: #c99b45;    --stage-art-line: #e0fae9;    --stage-night-top: #24523a;    --stage-night-mid: #113323;    --stage-night-bottom: #071d16;    --stage-night-highlight: #b5dfc4;    --stage-night-secondary: #478d66;    --stage-night-tertiary: #a9853b;    --stage-night-line: #d0ead9;  }   html[data-theme-id="ocean"] {    --stage-art-top: #77c9e3;    --stage-art-mid: #3384bd;    --stage-art-bottom: #174d7a;    --stage-art-highlight: #e5faff;    --stage-art-secondary: #70c9df;    --stage-art-tertiary: #5cc7be;    --stage-art-line: #e9fbff;  }   html.dark[data-theme-id="ocean"] {    --stage-art-top: #4288ac;    --stage-art-mid: #285d84;    --stage-art-bottom: #132e49;    --stage-art-highlight: #d9f5ff;    --stage-art-secondary: #61b5d4;    --stage-art-tertiary: #51b8b3;    --stage-art-line: #dff7ff;  }   html[data-theme-id="ember"] {    --stage-art-top: #f4a26e;    --stage-art-mid: #d66036;    --stage-art-bottom: #7c291e;    --stage-art-highlight: #fff0df;    --stage-art-secondary: #ffad77;    --stage-art-tertiary: #ef6f69;    --stage-art-line: #fff3e7;    --stage-night-top: #8a442c;    --stage-night-mid: #5c271c;    --stage-night-bottom: #32100d;    --stage-night-highlight: #ffd6ba;    --stage-night-secondary: #cb7148;    --stage-night-tertiary: #ad4b45;    --stage-night-line: #ffe0c9;  }   html.dark[data-theme-id="ember"] {    --stage-art-top: #ba6540;    --stage-art-mid: #803a29;    --stage-art-bottom: #3c1916;    --stage-art-highlight: #ffe1cd;    --stage-art-secondary: #e68156;    --stage-art-tertiary: #d85b58;    --stage-art-line: #ffe8d7;    --stage-night-top: #6a3425;    --stage-night-mid: #3e1b15;    --stage-night-bottom: #1d0d0b;    --stage-night-highlight: #efc4a9;    --stage-night-secondary: #a85e3f;    --stage-night-tertiary: #8f413e;    --stage-night-line: #f2d2bc;  }   html[data-theme-id="iris"] {    --stage-art-top: #b49ae8;    --stage-art-mid: #7a5ac4;    --stage-art-bottom: #422d80;    --stage-art-highlight: #f2eaff;    --stage-art-secondary: #b79af1;    --stage-art-tertiary: #ec79c7;    --stage-art-line: #f6eeff;  }   html.dark[data-theme-id="iris"] {    --stage-art-top: #8063c4;    --stage-art-mid: #513990;    --stage-art-bottom: #261c53;    --stage-art-highlight: #e8ddff;    --stage-art-secondary: #9e83dc;    --stage-art-tertiary: #d96ab7;    --stage-art-line: #eee7ff;

Lines 1–500 of 2308. Load more