@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-shell {    --chat-composer-glass-surface: var(--card);    --chat-composer-outline: rgb(0 0 0 / 8%);     position: relative;    isolation: isolate;  }   .chat-composer-glass-shell::before {    pointer-events: none;    position: absolute;    z-index: 0;    inset: 0;    border-radius: 22px;    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-glass-shell-with-context {    --chat-composer-context-extension: 2.25rem;  }   .chat-composer-glass-shell-with-context::before {    border-radius: 0;    /*     * One continuous glass layer: a 22px composer joined to a 16px strip,     * whose visible sides align with the composer's bottom tangents.     */    clip-path: shape(      from 0 22px,      curve to 22px 0 with 0 9.85px / 9.85px 0,      line to calc(100% - 22px) 0,      curve to 100% 22px with calc(100% - 9.85px) 0 / 100% 9.85px,      line to 100% calc(100% - var(--chat-composer-context-extension) - 22px),      curve to calc(100% - 22px) calc(100% - var(--chat-composer-context-extension)) with 100%        calc(100% - var(--chat-composer-context-extension) - 9.85px) / calc(100% - 9.85px)        calc(100% - var(--chat-composer-context-extension)),      line to calc(100% - 22px) calc(100% - 16px),      curve to calc(100% - 38px) 100% with calc(100% - 22px) calc(100% - 7.16px) /        calc(100% - 29.16px) 100%,      line to 38px 100%,      curve to 22px calc(100% - 16px) with 29.16px 100% / 22px calc(100% - 7.16px),      line to 22px calc(100% - var(--chat-composer-context-extension)),      curve to 0 calc(100% - var(--chat-composer-context-extension) - 22px) with 9.85px        calc(100% - var(--chat-composer-context-extension)) / 0        calc(100% - var(--chat-composer-context-extension) - 9.85px),      line to 0 22px,      close    );  }   @media (min-width: 40rem) {    .chat-composer-glass-shell-with-context {      /* The xs toolbar controls shrink by 4px at Tailwind's sm breakpoint. */      --chat-composer-context-extension: 2rem;    }  }   .chat-composer-glass-host {    position: relative;    box-shadow: 0 12px 28px -18px rgb(0 0 0 / 40%);  }   .chat-composer-glass-host::after {    pointer-events: none;    position: absolute;    z-index: 1;    inset: 0;    border: 1px solid var(--chat-composer-outline);    border-radius: inherit;    content: "";  }   .chat-composer-glass-shell-with-context .chat-composer-glass-host::after {    /* Keep the attachment seam open; the strip continues the outer outline below. */    clip-path: polygon(      0 0,      100% 0,      100% 100%,      calc(100% - 22px) 100%,      calc(100% - 22px) calc(100% - 2px),      22px calc(100% - 2px),      22px 100%,      0 100%    );  }   .chat-composer-context-strip {    position: relative;    isolation: isolate;  }   .chat-composer-context-strip::before {    position: absolute;    z-index: -1;    inset: 0;    border: 1px solid var(--chat-composer-outline);    border-radius: 0 0 16px 16px;    /* Start the strip outline exactly where the composer's 22px curve reaches its tangent. */    -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: "";  }   .dark .chat-composer-glass-shell {    --chat-composer-glass-surface: color-mix(in srgb, var(--background) 96%, var(--color-white));    --chat-composer-outline: color-mix(in srgb, var(--color-white) 5%, transparent);    --chat-composer-highlight: rgb(255 255 255 / 3%);  }   .dark .chat-composer-glass-host {    box-shadow: none;  } 

Lines 1–500 of 1580. Load more