@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;  --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;} [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 {  --animate-skeleton: skeleton 2s -1s infinite linear;  /* Duty-cycled indicator animations: long opacity holds with short stepped     ramps, so the compositor only produces frames while the value changes     (~20% of the cycle) instead of every vsync. Keep flat holds dominant. */  --animate-status-pulse: status-pulse 2s infinite;  --animate-status-ping: status-ping 2s 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);  --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;    }  }} @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. */  .sidebar-stage-backdrop {    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(--app-chrome-background) 10%, transparent) 40%,      color-mix(in srgb, var(--app-chrome-background) 30%, transparent) 52%,      color-mix(in srgb, var(--app-chrome-background) 58%, transparent) 64%,      color-mix(in srgb, var(--app-chrome-background) 82%, transparent) 75%,      color-mix(in srgb, var(--app-chrome-background) 96%, transparent) 85%,      var(--app-chrome-background) 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;  }   .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(--card) 20%, transparent);  }   /* Mix from --background (not --card): the lower chrome is a full-width     strip over the main view, and a card-tinted wash reads as a lighter     seam against it when no content is scrolled underneath. The backdrop     blur, not the tint, carries the frosted effect. */  .chat-composer-lower-chrome {    background: color-mix(in srgb, var(--background) 20%, transparent);  }   .chat-composer-glass {    box-shadow:      0 18px 48px -20px rgb(0 0 0 / 28%),      0 4px 14px -7px rgb(0 0 0 / 22%);  }   .chat-composer-shared-blur {    -webkit-backdrop-filter: blur(16px);    backdrop-filter: blur(16px);  }   .dark .chat-composer-glass {    background: color-mix(in srgb, var(--card) 45%, transparent);  }   .dark .chat-composer-lower-chrome {    background: color-mix(in srgb, var(--background) 45%, transparent);  }   .dark .chat-composer-glass {    box-shadow:      0 18px 48px -20px rgb(0 0 0 / 60%),      0 4px 14px -7px rgb(0 0 0 / 40%);  }   .chat-composer-lower-chrome {    margin-top: -1px;    margin-inline-end: var(--app-scrollbar-width);    padding-top: 1px;  }   @media (min-width: 40rem) {    .chat-composer-horizontal-inset {      padding-inline-start: calc(env(safe-area-inset-left) + 1.25rem);      padding-inline-end: calc(env(safe-area-inset-right) + 1.25rem);    }  }   @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {    .chat-composer-glass {      background: var(--card);    }     .chat-composer-lower-chrome {      background: var(--background);    }  }} /* Safe-area inset utilities for surfaces that opt into edge-to-edge rendering.   Insets resolve to 0 when the browser already constrains the layout viewport   to the safe area. */@utility pt-safe {  padding-top: max(env(safe-area-inset-top), 0px);}@utility pb-safe {  padding-bottom: max(env(safe-area-inset-bottom), 0px);}@utility pl-safe {  padding-left: max(env(safe-area-inset-left), 0px);}@utility pr-safe {  padding-right: max(env(safe-area-inset-right), 0px);} /* Grain texture for chrome surfaces that float above the body (see the   --surface-grain note). Layered over the element's background-color, so it   composes with bg-* utilities. */@utility surface-grain {  background-image: var(--surface-grain);  background-repeat: repeat;  background-size: 256px 256px;} /* Suppress all transitions during theme changes */.no-transitions,.no-transitions *,.no-transitions *::before,.no-transitions *::after {  transition-duration: 0s !important;  animation-duration: 0s !important;} :root {  color-scheme: light;  --radius: 0.625rem;  --background: var(--color-white);  --app-chrome-background: var(--background);  --foreground: var(--color-neutral-800);  --card: var(--color-white);  --card-foreground: var(--color-neutral-800);  --popover: var(--color-white);  --popover-foreground: var(--color-neutral-800);  --primary: oklch(0.488 0.217 264);  --primary-foreground: var(--color-white);  --secondary: --alpha(var(--color-black) / 4%);  --secondary-foreground: var(--color-neutral-800);  --muted: --alpha(var(--color-black) / 4%);  --muted-foreground: color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-black));  --accent: --alpha(var(--color-black) / 4%);  --accent-foreground: var(--color-neutral-800);  --destructive: var(--color-red-500);  --border: --alpha(var(--color-black) / 8%);  --input: --alpha(var(--color-black) / 10%);  --ring: oklch(0.488 0.217 264);  --destructive-foreground: var(--color-red-700);  --info: var(--color-blue-500);  --info-foreground: var(--color-blue-700);  --success: var(--color-emerald-500);  --success-foreground: var(--color-emerald-700);  --warning: var(--color-amber-500);  --warning-foreground: var(--color-amber-700);   @variant dark {    color-scheme: dark;    --background: color-mix(in srgb, var(--color-neutral-950) 95%, var(--color-white));    --app-chrome-background: var(--background);    --foreground: var(--color-neutral-100);    --card: color-mix(in srgb, var(--background) 98%, var(--color-white));    --card-foreground: var(--color-neutral-100);    --popover: color-mix(in srgb, var(--background) 98%, var(--color-white));    --popover-foreground: var(--color-neutral-100);    --primary: oklch(0.588 0.217 264);    --primary-foreground: var(--color-white);    --secondary: --alpha(var(--color-white) / 4%);    --secondary-foreground: var(--color-neutral-100);    --muted: --alpha(var(--color-white) / 4%);    --muted-foreground: color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-white));    --accent: --alpha(var(--color-white) / 4%);    --accent-foreground: var(--color-neutral-100);    --destructive: color-mix(in srgb, var(--color-red-500) 90%, var(--color-white));    --border: --alpha(var(--color-white) / 6%);    --input: --alpha(var(--color-white) / 8%);    --ring: oklch(0.588 0.217 264);    --destructive-foreground: var(--color-red-400);    --info: var(--color-blue-500);    --info-foreground: var(--color-blue-400);    --success: var(--color-emerald-500);    --success-foreground: var(--color-emerald-400);    --warning: var(--color-amber-500);    --warning-foreground: var(--color-amber-400);  }} body {  font-family:    "DM Sans Variable",    "DM Sans",    -apple-system,    BlinkMacSystemFont,    "Segoe UI",    system-ui,    sans-serif;  margin: 0;  padding: 0;} html,body {  min-height: calc(100svh + env(safe-area-inset-top));  overscroll-behavior: none;} body {  height: 100%;  overflow: hidden;} #root {  height: 100%;  width: 100%;  max-width: 100%;  overflow-x: hidden;  overflow-x: clip;  overflow-y: hidden;  overscroll-behavior-y: none;  padding-top: max(env(safe-area-inset-top), 0px);  padding-right: var(--desktop-window-right-resize-inset);} .electron-windows {  --desktop-window-right-resize-inset: 6px;} /* App-chrome grain. Baked into each surface's own background (behind   content) rather than a fixed overlay on top: a full-viewport overlay   forces the compositor to re-blend every frame any animation produces,   which multiplied idle GPU cost. The overlay's 0.035 opacity lives in the   SVG rect instead. Surfaces that float over the body (e.g. the inset main   card) must opt in via the surface-grain utility, or they lose the   grain's subtle brightening and stand out against the body. */:root {

Lines 1–500 of 1069. Load more