@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 -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;  --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), linear-gradient(black, black);    -webkit-mask-position: top, bottom, right;    -webkit-mask-repeat: no-repeat;    -webkit-mask-size:      100% var(--topbar-scroll-fade-height),      100% calc(100% - var(--topbar-scroll-fade-height)),      var(--app-scrollbar-width) 100%;    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), linear-gradient(black, black);    mask-position: top, bottom, right;    mask-repeat: no-repeat;    mask-size:      100% var(--topbar-scroll-fade-height),      100% calc(100% - var(--topbar-scroll-fade-height)),      var(--app-scrollbar-width) 100%;  }   @keyframes settings-search-target-pulse {    0%,    100% {      box-shadow: 0 0 0 0 transparent;    }    50% {      box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 70%, transparent);    }  }   .settings-page-scroll-fade div.settings-search-target-pulse,  .settings-page-scroll-fade section.settings-search-target-pulse > div:first-child {    animation: settings-search-target-pulse 650ms ease-in-out 2;    border-radius: 0.75rem;  }   /* The pulse is the destination indicator; without it (reduced motion), the     focus outline takes over, so exactly one indicator shows at a time. */  .settings-page-scroll-fade .settings-search-target-pulse:focus {    outline: none;  }   .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;  }   [data-preview-panel-mode="inline"] [data-right-panel-surface-content] [data-surface-subheader] {    height: calc(var(--spacing) * 7);    min-height: calc(var(--spacing) * 7);    margin-bottom: calc(var(--spacing) * 3);    border-bottom-color: transparent;  }   .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 {

Lines 1–500 of 1711. Load more