@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 *)); :root {  --app-scrollbar-width: 6px;  --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;      }    }  }   .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);} /* 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 {  --surface-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");} body {  background-image: var(--surface-grain);  background-repeat: repeat;  background-size: 256px 256px;} pre,code {  font-family:    "SF Mono", "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace;} /* Window drag region (frameless titlebar) */.drag-region {  -webkit-app-region: drag;} .drag-region button,.drag-region input,.drag-region textarea,.drag-region select,.drag-region a {  -webkit-app-region: no-drag;} /* Scrollbar styling */::-webkit-scrollbar {  width: var(--app-scrollbar-width);} ::-webkit-scrollbar-track {  background: transparent;} ::-webkit-scrollbar-thumb {  background: rgba(0, 0, 0, 0.15);  border-radius: 3px;} ::-webkit-scrollbar-thumb:hover {  background: rgba(0, 0, 0, 0.25);} .dark ::-webkit-scrollbar-thumb {  background: rgba(255, 255, 255, 0.1);} .dark ::-webkit-scrollbar-thumb:hover {  background: rgba(255, 255, 255, 0.18);} .turn-chip-strip {  scrollbar-width: none;  -ms-overflow-style: none;  overscroll-behavior-x: contain;} .turn-chip-strip::-webkit-scrollbar {  display: none;} /* Terminal drawer scrollbar parity with chat */.thread-terminal-drawer .xterm .xterm-scrollable-element > .scrollbar.vertical {  width: 6px !important;} .thread-terminal-drawer .xterm .xterm-scrollable-element > .scrollbar > .slider {  border-radius: 3px;} .thread-terminal-drawer .xterm .xterm-scrollable-element > .scrollbar.vertical > .slider {  width: 6px !important;  left: 0 !important;} /* Reasoning select -- clickable label surface */label:has(> select#reasoning-effort) {  position: relative;}label:has(> select#reasoning-effort) select {  position: absolute;  inset: 0;  opacity: 0;  cursor: pointer;  width: 100%;  height: 100%;} /* Chat markdown rendering */.chat-markdown {  min-width: 0;  overflow-wrap: anywhere;  word-break: break-word;} .chat-markdown > :first-child {  margin-top: 0;} .chat-markdown > :last-child {  margin-bottom: 0;} .chat-markdown p,.chat-markdown ul,.chat-markdown ol,.chat-markdown blockquote,.chat-markdown pre,.chat-markdown .chat-markdown-table-container {  margin: 0.65rem 0;

Lines 1–500 of 956. Load more