Bohdan Triapitsyn
08a851f902
Wire the unused --markdown-paragraph-spacing token to .markdown-content p so adjacent paragraphs no longer collapse into a single visual line (Tailwind preflight had zeroed the default <p> margins). The renderer wraps each block in a display:contents [data-md-block] element, so the message-level last-child margin nullifiers target the wrapper, not the paragraph. Drop the trailing margin on the last paragraph of the last block directly so messages don't gain extra bottom space. Keep tool-card and reasoning markdown compact.
428 lines
16 KiB
CSS
428 lines
16 KiB
CSS
@layer base {
|
||
:root {
|
||
color-scheme: light;
|
||
--oc-safe-area-top: 0px;
|
||
--oc-safe-area-right: 0px;
|
||
--oc-safe-area-bottom: 0px;
|
||
--oc-safe-area-bottom-visual: 0px;
|
||
--oc-safe-area-left: 0px;
|
||
--oc-header-height: 56px;
|
||
--oc-visual-viewport-offset-top: 0px;
|
||
--oc-visual-viewport-height: 100dvh;
|
||
--oc-wco-left-inset: 0px;
|
||
--oc-wco-right-inset: 0px;
|
||
--oc-wco-titlebar-height: 0px;
|
||
--ui-regular-font-weight: 400;
|
||
--oc-scrollbar-thumb: oklch(0.32 0.03 50 / 0.4);
|
||
--oc-scrollbar-thumb-hover: oklch(0.32 0.03 50 / 0.6);
|
||
--padding-scale: 1;
|
||
|
||
/* Semantic typography defaults (must match SEMANTIC_TYPOGRAPHY) */
|
||
--text-markdown: 0.9375rem;
|
||
--text-code: 0.8125rem;
|
||
--text-ui-header: 0.9375rem;
|
||
--text-ui-label: 0.8750rem;
|
||
--text-meta: 0.875rem;
|
||
--text-micro: 0.875rem;
|
||
|
||
/* Default Light Theme */
|
||
--background: oklch(0.97 0.02 85); /* Warm sand background */
|
||
--foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||
--card: oklch(0.99 0.01 90); /* Bright sand card */
|
||
--card-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||
--popover: oklch(0.99 0.01 90); /* Bright sand popover */
|
||
--popover-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||
--primary: oklch(0.65 0.2 55); /* Primary accent - orange */
|
||
--primary-foreground: oklch(0.99 0.01 90); /* Light text on primary */
|
||
--secondary: oklch(0.92 0.02 80); /* Light sand */
|
||
--secondary-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||
--muted: oklch(0.9 0.015 75); /* Muted sand */
|
||
--muted-foreground: oklch(0.45 0.02 50); /* Medium warm text */
|
||
--accent: oklch(0.92 0.02 80); /* Light sand accent */
|
||
--accent-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||
--destructive: oklch(0.55 0.25 25); /* Warm red */
|
||
--destructive-foreground: oklch(0.99 0.01 90); /* Light text */
|
||
--border: oklch(0.85 0.02 70); /* Warm border */
|
||
--input: oklch(0.88 0.02 75); /* Input background */
|
||
--ring: oklch(0.65 0.2 55); /* Focus ring color */
|
||
--radius: 0.625rem;
|
||
--chart-1: oklch(0.58 0.15 230); /* Blue */
|
||
--chart-2: oklch(0.58 0.15 145); /* Oasis green */
|
||
--chart-3: oklch(0.65 0.2 55); /* Orange */
|
||
--chart-4: oklch(0.55 0.18 30); /* Rose */
|
||
--chart-5: oklch(0.6 0.16 85); /* Golden sand */
|
||
--sidebar: oklch(0.95 0.02 80); /* Slightly darker sand */
|
||
--sidebar-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||
--sidebar-primary: oklch(0.65 0.2 55); /* Primary accent */
|
||
--sidebar-primary-foreground: oklch(0.99 0.01 90); /* Light text */
|
||
--sidebar-accent: oklch(0.9 0.02 75); /* Light sand accent */
|
||
--sidebar-accent-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||
--sidebar-border: oklch(0.85 0.02 70); /* Warm border */
|
||
--sidebar-ring: oklch(0.65 0.2 55); /* Focus ring */
|
||
--sidebar-stuck-bg: var(--sidebar); /* Desktop sidebar sticky header background (match sidebar) */
|
||
}
|
||
|
||
.dark {
|
||
/* Default Dark Theme - using OKLCH color space */
|
||
--background: oklch(0.16 0.01 30); /* #151313 */
|
||
--foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||
--card: oklch(0.19 0.01 40); /* #1C1B1A */
|
||
--card-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||
--popover: oklch(0.24 0.01 40); /* #282726 */
|
||
--popover-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||
--primary: oklch(0.77 0.17 85); /* #edb449 - golden sand */
|
||
--primary-foreground: oklch(0.16 0.01 30); /* #151313 */
|
||
--secondary: oklch(0.29 0.01 40); /* #343331 */
|
||
--secondary-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||
--muted: oklch(0.33 0.01 40); /* #403E3C */
|
||
--muted-foreground: oklch(0.75 0.02 80); /* #b6b4ab */
|
||
--accent: oklch(0.29 0.01 40); /* #343331 */
|
||
--accent-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||
--destructive: oklch(0.65 0.15 30); /* #d98678 */
|
||
--destructive-foreground: oklch(0.9 0.02 80); /* #e1dcd0 */
|
||
--border: oklch(0.31 0.01 35); /* #393836 */
|
||
--input: oklch(0.33 0.01 40); /* #403E3C */
|
||
--ring: oklch(0.77 0.17 85); /* #edb449 */
|
||
--chart-1: oklch(0.68 0.12 230); /* #5aa9d9 - blue */
|
||
--chart-2: oklch(0.68 0.12 145); /* #81af6c - green */
|
||
--chart-3: oklch(0.7 0.13 95); /* #c2974d - yellow */
|
||
--chart-4: oklch(0.65 0.14 45); /* #d8886d - coral */
|
||
--chart-5: oklch(0.68 0.12 55); /* #d29470 - orange */
|
||
--sidebar: oklch(0.16 0.01 30); /* #151313 */
|
||
--sidebar-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||
--sidebar-primary: oklch(0.77 0.17 85); /* #edb449 */
|
||
--sidebar-primary-foreground: oklch(0.16 0.01 30); /* #151313 */
|
||
--sidebar-accent: oklch(0.24 0.01 40); /* #282726 */
|
||
--sidebar-accent-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||
--sidebar-border: oklch(0.31 0.01 35); /* #393836 */
|
||
--sidebar-ring: oklch(0.77 0.17 85); /* #edb449 */
|
||
--sidebar-stuck-bg: var(--sidebar); /* Desktop sidebar sticky header background (match sidebar) */
|
||
}
|
||
|
||
* {
|
||
border-color: hsl(var(--border));
|
||
}
|
||
|
||
:root * {
|
||
border-color: rgba(194, 151, 77, 0.2); /* Warm golden sand borders for light mode */
|
||
}
|
||
|
||
.dark * {
|
||
border-color: rgba(57, 56, 54, 0.5); /* #393836 at 50% opacity */
|
||
}
|
||
|
||
body {
|
||
background-color: hsl(var(--background));
|
||
color: hsl(var(--foreground));
|
||
}
|
||
|
||
* {
|
||
@apply border-border outline-none;
|
||
}
|
||
body {
|
||
@apply bg-background text-foreground;
|
||
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
|
||
font-weight: var(--ui-regular-font-weight, 400);
|
||
}
|
||
|
||
/* Prevent rubber-band scrolling of the page itself.
|
||
App scroll should live inside dedicated scroll containers. */
|
||
:root,
|
||
:root body,
|
||
:root #root {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
overscroll-behavior: none;
|
||
overscroll-behavior-y: none;
|
||
}
|
||
|
||
:root.desktop-runtime body,
|
||
:root.desktop-runtime #root {
|
||
background: var(--background) !important;
|
||
background-color: var(--background) !important;
|
||
}
|
||
|
||
:root.desktop-runtime[data-oc-vibrancy],
|
||
:root.desktop-runtime[data-oc-vibrancy] body,
|
||
:root.desktop-runtime[data-oc-vibrancy] #root {
|
||
background: transparent !important;
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
.font-sans {
|
||
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
|
||
}
|
||
|
||
.font-mono,
|
||
code,
|
||
pre {
|
||
font-family: var(--font-mono, ui-monospace, SFMono-Regular, 'Liberation Mono', Menlo, monospace) !important;
|
||
}
|
||
|
||
/* Restore default list styling inside markdown content - override Tailwind preflight */
|
||
.markdown-content ul,
|
||
.markdown-content ol {
|
||
padding-left: 2em !important;
|
||
}
|
||
|
||
.markdown-content ul {
|
||
list-style-type: none !important;
|
||
}
|
||
|
||
.markdown-content ul > li {
|
||
position: relative;
|
||
}
|
||
|
||
.markdown-content ul > li::before {
|
||
content: "–";
|
||
position: absolute;
|
||
left: -1.25em;
|
||
color: inherit;
|
||
}
|
||
|
||
.markdown-content ol {
|
||
list-style-type: decimal !important;
|
||
list-style-position: outside !important;
|
||
}
|
||
|
||
.markdown-content li {
|
||
display: list-item !important;
|
||
}
|
||
|
||
/* Remove focus rings globally (except inputs/textareas/dropdowns/selects) */
|
||
*:focus:not(input):not(textarea):not([data-slot="dropdown-menu-content"]):not([data-slot="dropdown-menu-sub-content"]):not([data-slot="select-content"]) {
|
||
outline: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
*:focus-visible:not(input):not(textarea):not([data-slot="dropdown-menu-content"]):not([data-slot="dropdown-menu-sub-content"]):not([data-slot="select-content"]) {
|
||
outline: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
}
|
||
|
||
@theme inline {
|
||
--radius-none: 0;
|
||
--radius-sm: 0.25rem;
|
||
--radius-md: 0.5rem;
|
||
--radius-lg: 0.625rem;
|
||
--radius-xl: 0.75rem;
|
||
--radius-full: 9999px;
|
||
|
||
/* Override Tailwind spacing scale with custom properties that respect --padding-scale */
|
||
--spacing-0: 0;
|
||
--spacing-0\.5: calc(0.125rem * var(--padding-scale, 1));
|
||
--spacing-1: calc(0.25rem * var(--padding-scale, 1));
|
||
--spacing-1\.5: calc(0.375rem * var(--padding-scale, 1));
|
||
--spacing-2: calc(0.5rem * var(--padding-scale, 1));
|
||
--spacing-2\.5: calc(0.625rem * var(--padding-scale, 1));
|
||
--spacing-3: calc(0.75rem * var(--padding-scale, 1));
|
||
--spacing-3\.5: calc(0.875rem * var(--padding-scale, 1));
|
||
--spacing-4: calc(1rem * var(--padding-scale, 1));
|
||
--spacing-5: calc(1.25rem * var(--padding-scale, 1));
|
||
--spacing-6: calc(1.5rem * var(--padding-scale, 1));
|
||
--spacing-7: calc(1.75rem * var(--padding-scale, 1));
|
||
--spacing-8: calc(2rem * var(--padding-scale, 1));
|
||
--spacing-9: calc(2.25rem * var(--padding-scale, 1));
|
||
--spacing-10: calc(2.5rem * var(--padding-scale, 1));
|
||
--spacing-11: calc(2.75rem * var(--padding-scale, 1));
|
||
--spacing-12: calc(3rem * var(--padding-scale, 1));
|
||
--spacing-14: calc(3.5rem * var(--padding-scale, 1));
|
||
--spacing-16: calc(4rem * var(--padding-scale, 1));
|
||
--spacing-20: calc(5rem * var(--padding-scale, 1));
|
||
--spacing-24: calc(6rem * var(--padding-scale, 1));
|
||
--spacing-28: calc(7rem * var(--padding-scale, 1));
|
||
--spacing-32: calc(8rem * var(--padding-scale, 1));
|
||
--spacing-36: calc(9rem * var(--padding-scale, 1));
|
||
--spacing-40: calc(10rem * var(--padding-scale, 1));
|
||
--spacing-44: calc(11rem * var(--padding-scale, 1));
|
||
--spacing-48: calc(12rem * var(--padding-scale, 1));
|
||
--spacing-52: calc(13rem * var(--padding-scale, 1));
|
||
--spacing-56: calc(14rem * var(--padding-scale, 1));
|
||
--spacing-60: calc(15rem * var(--padding-scale, 1));
|
||
--spacing-64: calc(16rem * var(--padding-scale, 1));
|
||
--spacing-72: calc(18rem * var(--padding-scale, 1));
|
||
--spacing-80: calc(20rem * var(--padding-scale, 1));
|
||
--spacing-96: calc(24rem * var(--padding-scale, 1));
|
||
|
||
--color-background: var(--background);
|
||
--color-foreground: var(--foreground);
|
||
--color-card: var(--card);
|
||
--color-card-foreground: var(--card-foreground);
|
||
--color-popover: var(--popover);
|
||
--color-popover-foreground: var(--popover-foreground);
|
||
--color-primary: var(--primary);
|
||
--color-primary-foreground: var(--primary-foreground);
|
||
--color-secondary: var(--secondary);
|
||
--color-secondary-foreground: var(--secondary-foreground);
|
||
--color-muted: var(--muted);
|
||
--color-muted-foreground: var(--muted-foreground);
|
||
--color-accent: var(--accent);
|
||
--color-accent-foreground: var(--accent-foreground);
|
||
--color-destructive: var(--destructive);
|
||
--color-border: var(--border);
|
||
--color-input: var(--input);
|
||
--color-ring: var(--ring);
|
||
--color-chart-1: var(--chart-1);
|
||
--color-chart-2: var(--chart-2);
|
||
--color-chart-3: var(--chart-3);
|
||
--color-chart-4: var(--chart-4);
|
||
--color-chart-5: var(--chart-5);
|
||
--color-sidebar: var(--sidebar);
|
||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||
--color-status-success: var(--status-success);
|
||
--color-status-warning: var(--status-warning);
|
||
--color-status-error: var(--status-error);
|
||
--color-status-info: var(--status-info);
|
||
--color-sidebar-primary: var(--sidebar-primary);
|
||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||
--color-sidebar-accent: var(--sidebar-accent);
|
||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||
--color-sidebar-border: var(--sidebar-border);
|
||
--color-sidebar-ring: var(--sidebar-ring);
|
||
|
||
/* Interactive state tokens (Theme.colors.interactive.*) */
|
||
--color-interactive-hover: var(--interactive-hover);
|
||
--color-interactive-active: var(--interactive-active);
|
||
--color-interactive-selection: var(--interactive-selection);
|
||
--color-interactive-selection-foreground: var(--interactive-selection-foreground);
|
||
--color-interactive-border-hover: var(--interactive-border-hover);
|
||
--color-interactive-border-focus: var(--interactive-border-focus);
|
||
--color-interactive-focus-ring: var(--interactive-focus-ring);
|
||
|
||
/* Short aliases (optional) */
|
||
--color-border-hover: var(--interactive-border-hover);
|
||
--color-border-focus: var(--interactive-border-focus);
|
||
|
||
/* Markdown typography variables */
|
||
--markdown-body-font-size: var(--text-markdown);
|
||
--markdown-body-line-height: var(--markdown-body-line-height);
|
||
--markdown-h1-font-size: var(--text-markdown);
|
||
--markdown-h1-line-height: var(--markdown-h1-line-height);
|
||
--markdown-h2-font-size: var(--text-markdown);
|
||
--markdown-h2-line-height: var(--markdown-h2-line-height);
|
||
--markdown-h3-font-size: var(--text-markdown);
|
||
--markdown-h3-line-height: var(--markdown-h3-line-height);
|
||
--markdown-h4-font-size: var(--text-markdown);
|
||
--markdown-h4-line-height: var(--markdown-h4-line-height);
|
||
--markdown-h5-font-size: var(--text-markdown);
|
||
--markdown-h5-line-height: var(--markdown-h5-line-height);
|
||
--markdown-h6-font-size: var(--text-markdown);
|
||
--markdown-h6-line-height: var(--markdown-h6-line-height);
|
||
--markdown-list-font-size: var(--text-markdown);
|
||
--markdown-list-line-height: var(--markdown-list-line-height);
|
||
--markdown-code-block-font-size: var(--text-code);
|
||
--markdown-code-block-line-height: var(--markdown-code-block-line-height);
|
||
|
||
/* Markdown color variables */
|
||
--markdown-heading1: var(--markdown-heading1);
|
||
--markdown-heading2: var(--markdown-heading2);
|
||
--markdown-heading3: var(--markdown-heading3);
|
||
--markdown-heading4: var(--markdown-heading4);
|
||
--markdown-link: var(--markdown-link);
|
||
--markdown-link-hover: var(--markdown-link-hover);
|
||
--markdown-list-marker: var(--markdown-list-marker);
|
||
--markdown-inline-code: var(--markdown-inline-code);
|
||
--markdown-inline-code-bg: var(--markdown-inline-code-bg);
|
||
--markdown-blockquote: var(--markdown-blockquote);
|
||
--markdown-blockquote-border: var(--markdown-blockquote-border);
|
||
|
||
/* Markdown spacing defaults */
|
||
--markdown-paragraph-spacing: 0.75rem;
|
||
--markdown-heading-primary-top: 0.75rem;
|
||
--markdown-heading-primary-bottom: 0.35rem;
|
||
--markdown-heading-secondary-top: 0.6rem;
|
||
--markdown-heading-secondary-bottom: 0.3rem;
|
||
--markdown-blockquote-spacing: 0.6rem;
|
||
--markdown-blockquote-padding: 0.75rem;
|
||
--markdown-divider-spacing: 0.85rem;
|
||
--markdown-table-spacing: 0.9rem;
|
||
--markdown-heading1-size: var(--text-markdown);
|
||
--markdown-heading2-size: var(--text-markdown);
|
||
--markdown-heading3-size: var(--text-markdown);
|
||
--markdown-heading4-size: var(--text-markdown);
|
||
--markdown-heading5-size: var(--text-markdown);
|
||
--markdown-heading6-size: var(--text-markdown);
|
||
--font-sans: "IBM Plex Mono", "JetBrains Mono", "Fira Code", "SFMono-Regular", "Menlo", monospace;
|
||
--font-heading: var(--font-sans);
|
||
--font-mono: "IBM Plex Mono", "JetBrains Mono", "Fira Code", "SFMono-Regular", "Menlo", monospace;
|
||
--font-family-sans: var(--font-sans);
|
||
--font-family-mono: var(--font-mono);
|
||
}
|
||
|
||
/* Agent color system using theme variables */
|
||
@layer components {
|
||
/* Agent color variants - each maps to theme colors */
|
||
.agent-primary {
|
||
--agent-color: var(--primary);
|
||
--agent-color-bg: var(--primary);
|
||
}
|
||
|
||
.agent-info {
|
||
--agent-color: var(--status-info);
|
||
--agent-color-bg: var(--status-info);
|
||
}
|
||
|
||
.agent-keyword {
|
||
--agent-color: var(--syntax-keyword);
|
||
--agent-color-bg: var(--syntax-keyword);
|
||
}
|
||
|
||
.agent-success {
|
||
--agent-color: var(--status-success);
|
||
--agent-color-bg: var(--status-success);
|
||
}
|
||
|
||
.agent-function {
|
||
--agent-color: var(--syntax-function);
|
||
--agent-color-bg: var(--syntax-function);
|
||
}
|
||
|
||
.agent-number {
|
||
--agent-color: var(--syntax-number);
|
||
--agent-color-bg: var(--syntax-number);
|
||
}
|
||
|
||
.agent-type {
|
||
--agent-color: var(--syntax-type);
|
||
--agent-color-bg: var(--syntax-type);
|
||
}
|
||
|
||
.agent-warning {
|
||
--agent-color: var(--status-warning);
|
||
--agent-color-bg: var(--status-warning);
|
||
}
|
||
|
||
.agent-variable {
|
||
--agent-color: var(--syntax-variable);
|
||
--agent-color-bg: var(--syntax-variable);
|
||
}
|
||
|
||
/* Apply colors with opacity for badges */
|
||
.agent-badge {
|
||
background: rgb(from var(--agent-color-bg) r g b / 0.1);
|
||
border: 1px solid rgb(from var(--agent-color) r g b / 0.2);
|
||
color: var(--agent-color);
|
||
}
|
||
|
||
.agent-badge:hover {
|
||
background: rgb(from var(--agent-color-bg) r g b / 0.15);
|
||
border-color: rgb(from var(--agent-color) r g b / 0.3);
|
||
}
|
||
|
||
/* Agent dot indicator */
|
||
.agent-dot {
|
||
background: var(--agent-color);
|
||
}
|
||
|
||
/* Agent list item */
|
||
.agent-list-item:hover {
|
||
background: rgb(from var(--agent-color-bg) r g b / 0.05);
|
||
}
|
||
|
||
.agent-list-item.active {
|
||
background: rgb(from var(--agent-color-bg) r g b / 0.1);
|
||
border-color: rgb(from var(--agent-color) r g b / 0.2);
|
||
}
|
||
}
|