@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; --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; } } } @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, .chat-composer-lower-chrome { background: color-mix(in srgb, var(--card) 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, .dark .chat-composer-lower-chrome { background: color-mix(in srgb, var(--card) 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, .chat-composer-lower-chrome { background: var(--card); } } } /* 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); } /* 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); } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.035; background-image: 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)'/%3E%3C/svg%3E"); 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; } .chat-markdown h1, .chat-markdown h2, .chat-markdown h3, .chat-markdown h4, .chat-markdown h5, .chat-markdown h6 { margin: 1.25rem 0 0.5rem; font-weight: 600; line-height: 1.3; color: var(--foreground); } .chat-markdown h1 { font-size: 1.25rem; } .chat-markdown h2 { font-size: 1.125rem; } .chat-markdown h3 { font-size: 1rem; } .chat-markdown h4, .chat-markdown h5, .chat-markdown h6 { font-size: 0.875rem; } .chat-markdown h6 { color: var(--muted-foreground); } .chat-markdown ul { padding-left: 1.25rem; list-style-type: disc; } .chat-markdown ol { padding-left: 1.25rem; list-style-type: decimal; } .chat-markdown ul ul { list-style-type: circle; } .chat-markdown ul ul ul { list-style-type: square; } .chat-markdown ol ol { list-style-type: lower-alpha; } .chat-markdown ol ol ol { list-style-type: lower-roman; } .chat-markdown li + li { margin-top: 0.25rem; } /* GitHub-style task lists: the checkbox replaces the list marker. */ .chat-markdown li.task-list-item { list-style-type: none; } .chat-markdown li.task-list-item input[type="checkbox"] { margin: 0 0.35em 0.15em -1.25rem; vertical-align: middle; } .chat-markdown a { color: var(--info-foreground); text-decoration: none; } .chat-markdown a:not(.chat-markdown-file-link):hover, .chat-markdown a:not(.chat-markdown-file-link):focus-visible { background-image: radial-gradient(circle, currentcolor 0.75px, transparent 1px); background-position: left bottom; background-repeat: repeat-x; background-size: 4px 2px; } .chat-markdown .chat-markdown-link-favicon { @apply inline-flex; width: 14px; height: 14px; margin-inline: 0.25em 0.2em; vertical-align: -0.125em; } .chat-markdown .chat-markdown-link-leading { white-space: nowrap; } .chat-markdown blockquote { border-left: 2px solid var(--border); padding-left: 0.8rem; color: var(--muted-foreground); } .chat-markdown section[data-footnotes] { margin-top: 1.25rem; border-top: 1px solid var(--border); padding-top: 0.75rem; color: var(--muted-foreground); font-size: 0.75rem; } .chat-markdown section[data-footnotes] ol { margin: 0; padding-left: 1.25rem; } .chat-markdown section[data-footnotes] li + li { margin-top: 0.35rem; } .chat-markdown a[data-footnote-ref], .chat-markdown a[data-footnote-backref] { display: inline-flex; min-width: 1rem; align-items: center; justify-content: center; border-radius: 0.25rem; text-decoration: none; font-size: 0.6875rem; font-weight: 600; } .chat-markdown :not(pre) > code { border: 1px solid var(--border); border-radius: 0.375rem; background: var(--muted); padding: 0.1rem 0.35rem; color: var(--foreground); font-size: 0.75rem; } .chat-markdown a.chat-markdown-file-link { color: var(--foreground); text-decoration: none; } .chat-markdown a.chat-markdown-file-link:hover { color: var(--foreground); text-decoration: none; } .chat-markdown a.chat-markdown-file-link:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 70%, transparent); } .chat-markdown pre { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 0.75rem; background: var(--muted); padding: 0.8rem 0.9rem; } .chat-markdown pre code { border: none; background: transparent; padding: 0; font-size: 0.75rem; } .chat-markdown pre { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--border) 78%, transparent) transparent; } .chat-markdown pre::-webkit-scrollbar { height: 7px; } .chat-markdown pre::-webkit-scrollbar-track { background: transparent; } .chat-markdown pre::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--border) 78%, transparent); } .markdown-file-link-tooltip-scroll { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--border) 78%, transparent) transparent; } .markdown-file-link-tooltip-scroll::-webkit-scrollbar { height: 6px; } .markdown-file-link-tooltip-scroll::-webkit-scrollbar-track { background: transparent; } .markdown-file-link-tooltip-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--border) 78%, transparent); } .chat-markdown .chat-markdown-codeblock { margin: 0.65rem 0; overflow: hidden; border: 1px solid var(--border); border-radius: 0.75rem; background: color-mix(in srgb, var(--muted) 78%, var(--background)); } .chat-markdown .chat-markdown-codeblock-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid var(--border); background: var(--muted); padding: 0.25rem 0.375rem 0.25rem 0.7rem; color: var(--muted-foreground); } .chat-markdown .chat-markdown-codeblock-title { display: inline-flex; min-width: 0; align-items: center; gap: 0.4rem; font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace); font-size: 0.6875rem; } .chat-markdown .chat-markdown-chrome-action { color: var(--muted-foreground); } .chat-markdown .chat-markdown-chrome-action:hover { color: var(--foreground); } .chat-markdown .chat-markdown-chrome-action[aria-pressed="true"] { color: var(--foreground); background: color-mix(in srgb, var(--foreground) 8%, transparent); } .chat-markdown .chat-markdown-codeblock pre { margin: 0; border: none; border-radius: 0; background: transparent; } .chat-markdown .chat-markdown-codeblock[data-wrap="true"] pre { white-space: pre-wrap; overflow-wrap: anywhere; } .chat-markdown .chat-markdown-shiki .shiki { background: transparent !important; } /* Diagnostics-style tables: row separators only, uppercase headers, and a scroll-fade container for horizontal overflow. The root chat-markdown wrapping rules (overflow-wrap: anywhere) would let columns shrink to single characters and defeat the overflow — restore word-boundary wrapping so the min column width is the longest word. */ .chat-markdown table { width: 100%; min-width: max-content; border-collapse: collapse; overflow-wrap: normal; word-break: normal; font-size: 0.75rem; } .chat-markdown th, .chat-markdown td { padding: 0.45rem 0.75rem; text-align: left; } .chat-markdown thead th { border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); padding-block: 0.55rem; font-weight: 600; white-space: nowrap; } .chat-markdown tbody td { border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } /* Collapsed (default): single-line cells truncate so arbitrary chat content cannot blow the column out; the footer toggle expands cells to wrap. */ .chat-markdown .chat-markdown-table-container[data-expanded="false"] th, .chat-markdown .chat-markdown-table-container[data-expanded="false"] td { overflow: hidden; max-width: 24rem; text-overflow: ellipsis; white-space: nowrap; } .chat-markdown .chat-markdown-table-container[data-expanded="true"] td { max-width: 24rem; overflow-wrap: anywhere; } .chat-markdown .chat-markdown-table-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.125rem; } @keyframes provider-update-pill-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } } .provider-update-pill-progress { animation: provider-update-pill-countdown var(--provider-update-pill-dismiss-ms) linear forwards; } /* Diffs theme bridge (match diff surfaces to app palette) */ .diff-panel-viewport { background: color-mix(in srgb, var(--background) 94%, var(--card)); } .diff-render-file, .diff-render-surface > diffs-container { border: 1px solid var(--border); border-radius: 0.5rem; overflow: clip; background: color-mix(in srgb, var(--card) 92%, var(--background)); } @keyframes ultrathink-rainbow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes ultrathink-chroma-shift { 0% { filter: hue-rotate(0deg) saturate(1.2); } 100% { filter: hue-rotate(360deg) saturate(1.2); } } .ultrathink-frame { --ultrathink-spectrum: linear-gradient( 120deg, #ff6b6b 0%, #f59e0b 18%, #22c55e 36%, #14b8a6 54%, #3b82f6 72%, #ec4899 90%, #ff6b6b 100% ); background-image: var(--ultrathink-spectrum); background-size: 220% 220%; filter: saturate(0.82) brightness(0.92); animation: ultrathink-rainbow 10s linear infinite; } .ultrathink-chroma { animation: ultrathink-chroma-shift 10s linear infinite; } .ultrathink-pill { background: linear-gradient(var(--card), var(--card)) padding-box, var(--ultrathink-spectrum) border-box; background-size: 100% 100%, 220% 220%; background-position: 0 0, 0% 50%; animation: ultrathink-rainbow 10s linear infinite; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card) 82%, transparent); } .ultrathink-word { display: inline-block; color: transparent; background-image: var(--ultrathink-spectrum); background-size: 220% 220%; background-position: 0% 50%; background-clip: text; -webkit-background-clip: text; animation: ultrathink-rainbow 10s linear infinite; } /* Thin scrollbar for model picker */ .model-picker-list::-webkit-scrollbar { width: 4px; } .model-picker-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 2px; } .model-picker-list::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); } .dark .model-picker-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); } .dark .model-picker-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }