@import "tailwindcss"; @custom-variant dark (&:is(.dark, .dark *)); @theme inline { --animate-skeleton: skeleton 2s -1s infinite linear; --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; } body { @apply bg-background text-foreground relative; }} /* 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); --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)); --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", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; margin: 0; padding: 0; min-height: 100vh;} html,body,#root { height: 100%; width: 100%; max-width: 100%; overflow-y: hidden; overflow-x: hidden; overflow-x: clip; overscroll-behavior-y: none;} 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,textarea,input { font-family: "SF Mono", "SFMono-Regular", 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: 6px;} ::-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 table { margin: 0.65rem 0;} .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;} .chat-markdown a { color: var(--info-foreground); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--info-foreground) 40%, transparent);} .chat-markdown a:hover { opacity: 0.8;} .chat-markdown blockquote { border-left: 2px solid var(--border); padding-left: 0.8rem; color: var(--muted-foreground);} .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 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; line-height: 1.5; font-size: 0.875rem;} .chat-markdown .chat-markdown-codeblock { position: relative; margin: 0.65rem 0;} .chat-markdown .chat-markdown-codeblock pre { margin: 0;} .chat-markdown .chat-markdown-copy-button { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 1; display: inline-flex; align-items: center; justify-content: center; height: 1.5rem; width: 1.5rem; border-radius: 0.375rem; border: 1px solid var(--border); background: color-mix(in srgb, var(--background) 82%, transparent); color: var(--muted-foreground); opacity: 0; pointer-events: none; transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;} .chat-markdown .chat-markdown-codeblock:hover .chat-markdown-copy-button,.chat-markdown .chat-markdown-codeblock:focus-within .chat-markdown-copy-button { opacity: 1; pointer-events: auto;} .chat-markdown .chat-markdown-copy-button:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--border) 70%, var(--foreground));} .chat-markdown .chat-markdown-shiki .shiki { background: color-mix(in srgb, var(--muted) 78%, var(--background)) !important;} .chat-markdown table { width: 100%; border-collapse: collapse;} .chat-markdown th,.chat-markdown td { border: 1px solid var(--border); padding: 0.35rem 0.45rem; text-align: left;} /* 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 { border: 1px solid var(--border); border-radius: 0.5rem; overflow: clip; background: color-mix(in srgb, var(--card) 92%, var(--background));}
@import "tailwindcss";
@custom-variant dark (&:is(.dark, .dark *));
@theme inline {
--animate-skeleton: skeleton 2s -1s infinite linear;
--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;
}
body {
@apply bg-background text-foreground relative;
}
}
/* 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);
--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));
--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",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
system-ui,
sans-serif;
margin: 0;
padding: 0;
min-height: 100vh;
}
html,
body,
#root {
height: 100%;
width: 100%;
max-width: 100%;
overflow-y: hidden;
overflow-x: hidden;
overflow-x: clip;
overscroll-behavior-y: none;
}
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,
textarea,
input {
font-family: "SF Mono", "SFMono-Regular", 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: 6px;
}
::-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 table {
margin: 0.65rem 0;
}
.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;
}
.chat-markdown a {
color: var(--info-foreground);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--info-foreground) 40%, transparent);
}
.chat-markdown a:hover {
opacity: 0.8;
}
.chat-markdown blockquote {
border-left: 2px solid var(--border);
padding-left: 0.8rem;
color: var(--muted-foreground);
}
.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 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;
line-height: 1.5;
font-size: 0.875rem;
}
.chat-markdown .chat-markdown-codeblock {
position: relative;
margin: 0.65rem 0;
}
.chat-markdown .chat-markdown-codeblock pre {
margin: 0;
}
.chat-markdown .chat-markdown-copy-button {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
height: 1.5rem;
width: 1.5rem;
border-radius: 0.375rem;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--background) 82%, transparent);
color: var(--muted-foreground);
opacity: 0;
pointer-events: none;
transition:
opacity 120ms ease,
color 120ms ease,
border-color 120ms ease;
}
.chat-markdown .chat-markdown-codeblock:hover .chat-markdown-copy-button,
.chat-markdown .chat-markdown-codeblock:focus-within .chat-markdown-copy-button {
opacity: 1;
pointer-events: auto;
}
.chat-markdown .chat-markdown-copy-button:hover {
color: var(--foreground);
border-color: color-mix(in srgb, var(--border) 70%, var(--foreground));
}
.chat-markdown .chat-markdown-shiki .shiki {
background: color-mix(in srgb, var(--muted) 78%, var(--background)) !important;
}
.chat-markdown table {
width: 100%;
border-collapse: collapse;
}
.chat-markdown th,
.chat-markdown td {
border: 1px solid var(--border);
padding: 0.35rem 0.45rem;
text-align: left;
}
/* 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 {
border: 1px solid var(--border);
border-radius: 0.5rem;
overflow: clip;
background: color-mix(in srgb, var(--card) 92%, var(--background));
}