385 lines · 9.8 KB · CSS
RawDownload
@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,.chat-markdown ol {  padding-left: 1.25rem;} .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));}