1359 lines
38 KiB
CSS
1359 lines
38 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@source "./**/*.{ts,tsx,css}";
|
|
|
|
:root {
|
|
--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;
|
|
--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);
|
|
}
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* Suppress WebKit-specific hover/focus adornments on the chat textarea */
|
|
textarea[data-chat-input="true"] {
|
|
-webkit-appearance: none;
|
|
background: transparent !important;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
textarea[data-chat-input="true"]:focus,
|
|
textarea[data-chat-input="true"]:focus-visible,
|
|
textarea[data-chat-input="true"]:hover {
|
|
outline: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Match chat footer background to input in WebKit to avoid dual-tone hover/focus */
|
|
[data-chat-input="true"] + div[data-chat-input-footer="true"] {
|
|
background: transparent !important;
|
|
border: none;
|
|
box-shadow: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
/* Scroll shadow (HeroUI) fallback styling to ensure visible gradients without the Tailwind plugin */
|
|
[data-scroll-shadow="true"] {
|
|
--scroll-shadow-size: var(--scroll-shadow-size, 48px);
|
|
}
|
|
|
|
[data-scroll-shadow="true"][data-orientation="vertical"] {
|
|
mask-mode: alpha;
|
|
}
|
|
|
|
[data-scroll-shadow="true"][data-orientation="vertical"][data-top-bottom-scroll="true"] {
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
transparent 0%,
|
|
#000 var(--scroll-shadow-size),
|
|
#000 calc(100% - var(--scroll-shadow-size)),
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
[data-scroll-shadow="true"][data-orientation="vertical"][data-top-scroll="true"] {
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
transparent 0%,
|
|
#000 var(--scroll-shadow-size),
|
|
#000 100%
|
|
);
|
|
}
|
|
|
|
[data-scroll-shadow="true"][data-orientation="vertical"][data-bottom-scroll="true"] {
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
#000 0%,
|
|
#000 calc(100% - var(--scroll-shadow-size)),
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
|
|
@keyframes spin-once {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes oc-migrate-up {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
@keyframes gradient-shimmer {
|
|
0% {
|
|
stop-color: currentColor;
|
|
}
|
|
50% {
|
|
stop-color: color-mix(in srgb, currentColor 60%, white 40%);
|
|
}
|
|
100% {
|
|
stop-color: currentColor;
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer-position {
|
|
0% {
|
|
x: -100%;
|
|
}
|
|
100% {
|
|
x: 100%;
|
|
}
|
|
}
|
|
|
|
/* Safari/WebKit fixes for buttons and SVG icons */
|
|
/* Remixicon puts fill="currentColor" on root SVG which WebKit renders as background */
|
|
button svg.remixicon,
|
|
[role="button"] svg.remixicon,
|
|
button svg,
|
|
[role="button"] svg {
|
|
background: none !important;
|
|
background-color: transparent !important;
|
|
/* Override inline fill attribute on SVG root */
|
|
fill: none !important;
|
|
/* Ensure SVG uses CSS rendering, not native */
|
|
shape-rendering: geometricPrecision;
|
|
}
|
|
|
|
/* GPU acceleration for non-spinning SVGs */
|
|
button svg:not(.animate-spin),
|
|
[role="button"] svg:not(.animate-spin) {
|
|
transform: translateZ(0);
|
|
-webkit-transform: translateZ(0);
|
|
}
|
|
|
|
/* Fix SVG elements inside buttons - remove any rect/circle backgrounds */
|
|
button svg rect,
|
|
button svg circle,
|
|
[role="button"] svg rect,
|
|
[role="button"] svg circle {
|
|
fill: none !important;
|
|
}
|
|
|
|
/* Ensure SVG paths/shapes inherit color properly */
|
|
button svg.remixicon path,
|
|
button svg.remixicon circle[fill],
|
|
[role="button"] svg.remixicon path,
|
|
[role="button"] svg.remixicon circle[fill],
|
|
button svg path,
|
|
[role="button"] svg path {
|
|
fill: currentColor !important;
|
|
}
|
|
|
|
/* Safari/WebKit animation fixes - outside @layer for higher specificity */
|
|
.animate-spin {
|
|
animation: webkit-spin 1s linear infinite !important;
|
|
will-change: transform !important;
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Specific SVG spinner fixes for WebKit */
|
|
svg.animate-spin {
|
|
/* Use CSS box as transform reference for proper centering with scaled SVGs */
|
|
transform-box: fill-box !important;
|
|
transform-origin: 50% 50% !important;
|
|
background: none !important;
|
|
background-color: transparent !important;
|
|
overflow: visible !important;
|
|
/* Ensure SVG content is centered */
|
|
display: block !important;
|
|
}
|
|
|
|
@keyframes webkit-spin {
|
|
0% {
|
|
transform: translateZ(0) rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: translateZ(0) rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.app-region-drag {
|
|
-webkit-app-region: drag;
|
|
}
|
|
|
|
.app-region-no-drag {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
/* Semantic Typography System Classes */
|
|
@layer components {
|
|
/* Semantic typography classes - font-size only */
|
|
.typography-markdown {
|
|
font-size: var(--text-markdown);
|
|
}
|
|
|
|
.typography-code {
|
|
font-size: var(--text-code);
|
|
}
|
|
|
|
.typography-ui-header {
|
|
font-size: var(--text-ui-header);
|
|
}
|
|
|
|
.typography-ui-label {
|
|
font-size: var(--text-ui-label);
|
|
}
|
|
|
|
.typography-meta {
|
|
font-size: var(--text-meta);
|
|
}
|
|
|
|
.typography-micro {
|
|
font-size: var(--text-micro);
|
|
}
|
|
|
|
.chat-column {
|
|
width: min(100%, 56rem);
|
|
margin-inline: auto;
|
|
padding-inline: clamp(1rem, 3vw, 1.5rem);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.chat-column {
|
|
padding-inline: clamp(1.25rem, 2.5vw, 2rem);
|
|
}
|
|
}
|
|
|
|
/* FadeInOnReveal handles all animations - no custom CSS needed */
|
|
|
|
/* Heading typography - all use markdown size, differentiated by weight/color */
|
|
|
|
.typography-h1 {
|
|
font-size: var(--text-markdown);
|
|
line-height: var(--h1-line-height);
|
|
letter-spacing: var(--h1-letter-spacing);
|
|
font-weight: var(--h1-font-weight);
|
|
}
|
|
|
|
.typography-h2 {
|
|
font-size: var(--text-markdown);
|
|
line-height: var(--h2-line-height);
|
|
letter-spacing: var(--h2-letter-spacing);
|
|
font-weight: var(--h2-font-weight);
|
|
}
|
|
|
|
.typography-h3 {
|
|
font-size: var(--text-markdown);
|
|
line-height: var(--h3-line-height);
|
|
letter-spacing: var(--h3-letter-spacing);
|
|
font-weight: var(--h3-font-weight);
|
|
}
|
|
|
|
/* UI element typography - mapped to semantic variables */
|
|
.typography-ui-button {
|
|
font-size: var(--text-ui-label);
|
|
line-height: var(--ui-button-line-height);
|
|
letter-spacing: var(--ui-button-letter-spacing);
|
|
font-weight: var(--ui-button-font-weight);
|
|
}
|
|
|
|
.typography-ui-caption {
|
|
font-size: var(--text-micro);
|
|
line-height: var(--ui-caption-line-height);
|
|
letter-spacing: var(--ui-caption-letter-spacing);
|
|
font-weight: var(--ui-caption-font-weight);
|
|
}
|
|
|
|
/* Markdown typography - all use semantic markdown size */
|
|
.typography-markdown-body {
|
|
font-size: var(--text-markdown);
|
|
line-height: var(--markdown-body-line-height);
|
|
letter-spacing: var(--markdown-body-letter-spacing);
|
|
font-weight: var(--markdown-body-font-weight);
|
|
}
|
|
|
|
.typography-markdown-h1 {
|
|
font-size: var(--text-markdown);
|
|
line-height: var(--markdown-h1-line-height);
|
|
letter-spacing: var(--markdown-h1-letter-spacing);
|
|
font-weight: var(--markdown-h1-font-weight);
|
|
}
|
|
|
|
.typography-markdown-h2 {
|
|
font-size: var(--text-markdown);
|
|
line-height: var(--markdown-h2-line-height);
|
|
letter-spacing: var(--markdown-h2-letter-spacing);
|
|
font-weight: var(--markdown-h2-font-weight);
|
|
}
|
|
|
|
.typography-markdown-h3 {
|
|
font-size: var(--text-markdown);
|
|
line-height: var(--markdown-h3-line-height);
|
|
letter-spacing: var(--markdown-h3-letter-spacing);
|
|
font-weight: var(--markdown-h3-font-weight);
|
|
}
|
|
|
|
.typography-markdown-h4 {
|
|
font-size: var(--text-markdown);
|
|
line-height: var(--markdown-h4-line-height);
|
|
letter-spacing: var(--markdown-h4-letter-spacing);
|
|
font-weight: var(--markdown-h4-font-weight);
|
|
}
|
|
|
|
.animate-spin-once {
|
|
animation: spin-once 0.5s linear forwards;
|
|
}
|
|
|
|
}
|
|
|
|
:root {
|
|
/* 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 */
|
|
}
|
|
|
|
.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 */
|
|
}
|
|
|
|
* {
|
|
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));
|
|
}
|
|
|
|
@theme inline {
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--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);
|
|
|
|
/* 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.35rem;
|
|
--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);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Remove focus rings globally */
|
|
*:focus {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
*:focus-visible {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar styles */
|
|
*::-webkit-scrollbar {
|
|
width: 10px !important;
|
|
height: 10px !important;
|
|
background: transparent;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background: var(--oc-scrollbar-thumb);
|
|
border-radius: 6px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: var(--oc-scrollbar-thumb-hover);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.dark {
|
|
--oc-scrollbar-thumb: oklch(0.6 0.02 80 / 0.3);
|
|
--oc-scrollbar-thumb-hover: oklch(0.6 0.02 80 / 0.5);
|
|
}
|
|
|
|
[data-scrollbar="chat"]::-webkit-scrollbar-thumb {
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
*::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
[data-scrollbar="chat"].chat-scroll,
|
|
.chat-scroll {
|
|
scrollbar-gutter: stable both-edges;
|
|
}
|
|
|
|
html:not(.dark) .chat-scroll {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
[data-scrollbar="chat"]::-webkit-scrollbar {
|
|
width: 10px !important;
|
|
height: 10px !important;
|
|
background: transparent !important;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
[data-scrollbar="chat"].chat-scroll::-webkit-scrollbar,
|
|
.chat-scroll::-webkit-scrollbar {
|
|
width: 10px !important;
|
|
height: 10px !important;
|
|
}
|
|
|
|
[data-scrollbar="chat"]::-webkit-scrollbar-track {
|
|
background: transparent !important;
|
|
}
|
|
|
|
[data-scrollbar="chat"].chat-scroll::-webkit-scrollbar-track,
|
|
.chat-scroll::-webkit-scrollbar-track {
|
|
background: transparent !important;
|
|
}
|
|
|
|
[data-scrollbar="chat"]::-webkit-scrollbar-thumb {
|
|
background: var(--oc-scrollbar-thumb) !important;
|
|
border-radius: 6px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
[data-scrollbar="chat"].chat-scroll::-webkit-scrollbar-thumb,
|
|
.chat-scroll::-webkit-scrollbar-thumb {
|
|
background: var(--oc-scrollbar-thumb) !important;
|
|
border-radius: 6px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
[data-scrollbar="chat"]::-webkit-scrollbar-thumb:hover {
|
|
background: var(--oc-scrollbar-thumb-hover) !important;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
[data-scrollbar="chat"].chat-scroll::-webkit-scrollbar-thumb:hover,
|
|
.chat-scroll::-webkit-scrollbar-thumb:hover {
|
|
background: var(--oc-scrollbar-thumb-hover) !important;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
[data-scrollbar="chat"]::-webkit-scrollbar-corner {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Hide native scrollbars for overlay targets (all browsers) */
|
|
.overlay-scrollbar-target {
|
|
scrollbar-width: none !important;
|
|
-ms-overflow-style: none !important;
|
|
}
|
|
|
|
.overlay-scrollbar-target::-webkit-scrollbar {
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
display: none !important;
|
|
}
|
|
|
|
/* Firefox scrollbar support */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--oc-scrollbar-thumb) transparent;
|
|
}
|
|
|
|
.scrollbar-hidden {
|
|
scrollbar-width: none !important;
|
|
}
|
|
|
|
.scrollbar-hidden::-webkit-scrollbar {
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
|
|
.dark * {
|
|
scrollbar-color: oklch(0.6 0.02 80 / 0.3) transparent;
|
|
}
|
|
|
|
/* Overlay scrollbar styling (custom thumb) */
|
|
.overlay-scrollbar {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease;
|
|
z-index: 10;
|
|
}
|
|
|
|
.overlay-scrollbar--dense,
|
|
.overlay-scrollbar--bottom-right,
|
|
.overlay-scrollbar--zero,
|
|
.overlay-scrollbar--flush {
|
|
/* no-op: positioning handled inline */
|
|
}
|
|
|
|
.overlay-scrollbar__thumb {
|
|
pointer-events: auto;
|
|
position: absolute;
|
|
width: 6px;
|
|
background: var(--oc-scrollbar-thumb);
|
|
border-radius: 9999px;
|
|
opacity: 0.8;
|
|
transition: background-color 0.15s ease, opacity 0.15s ease;
|
|
will-change: transform, height;
|
|
}
|
|
|
|
.overlay-scrollbar__thumb:hover,
|
|
.overlay-scrollbar__thumb:active {
|
|
background: var(--oc-scrollbar-thumb-hover);
|
|
opacity: 1;
|
|
}
|
|
|
|
.overlay-scrollbar__thumb--horizontal {
|
|
height: 6px;
|
|
margin: 0;
|
|
}
|
|
|
|
.overlay-scrollbar__thumb--vertical {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Pierre diff viewer styling */
|
|
.pierre-diff-wrapper {
|
|
--diffs-font-family: var(--font-mono, 'IBM Plex Mono', monospace);
|
|
--diffs-font-size: var(--text-code, 13px);
|
|
--diffs-line-height: 1.5;
|
|
--diffs-tab-size: 2;
|
|
--diffs-header-font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
|
|
--diffs-min-number-column-width: 4ch;
|
|
--diffs-gap-inline: 0;
|
|
--diffs-gap-block: 0;
|
|
}
|
|
|
|
/* WebKit scroll rendering optimizations */
|
|
/* Note: avoid will-change and contain as they break resize behavior */
|
|
.pierre-diff-wrapper,
|
|
.pierre-diff-wrapper diffs-container {
|
|
/* Force GPU compositing layer */
|
|
transform: translateZ(0);
|
|
-webkit-transform: translateZ(0);
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
|
|
/* WebKit touch scroll optimization */
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.pierre-diff-wrapper diffs-container {
|
|
display: block;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
}
|
|
|
|
/* Mobile Adaptations - All Devices */
|
|
|
|
/* Set global device type variables */
|
|
:root {
|
|
--is-mobile: 0;
|
|
--device-type: 'desktop';
|
|
--font-scale: 1;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
:root.mobile-pointer:not(.desktop-runtime) {
|
|
--is-mobile: 1;
|
|
--device-type: 'mobile';
|
|
--font-scale: 0.9;
|
|
}
|
|
}
|
|
|
|
/* Utility classes for device-specific styling */
|
|
.desktop-only {
|
|
display: block;
|
|
}
|
|
|
|
.mobile-only {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
:root.mobile-pointer:not(.desktop-runtime) .desktop-only {
|
|
display: none !important;
|
|
}
|
|
|
|
:root.desktop-runtime .mobile-only {
|
|
display: none !important;
|
|
}
|
|
|
|
:root.mobile-pointer:not(.desktop-runtime) .mobile-only {
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
/* General mobile improvements for all mobile devices */
|
|
@media (max-width: 1024px) {
|
|
/* Override CSS custom properties for mobile */
|
|
:root.mobile-pointer:not(.desktop-runtime) {
|
|
--text-markdown: 1rem;
|
|
--text-code: 0.875rem;
|
|
--text-ui-header: 0.9375rem;
|
|
--text-ui-label: 0.875rem;
|
|
--text-meta: 0.875rem;
|
|
--text-micro: 0.8125rem;
|
|
}
|
|
|
|
/* Force override with higher specificity */
|
|
:root.mobile-pointer:not(.desktop-runtime) * {
|
|
--text-markdown: 1rem !important;
|
|
--text-code: 0.875rem !important;
|
|
--text-ui-header: 0.9375rem !important;
|
|
--text-ui-label: 0.875rem !important;
|
|
--text-meta: 0.875rem !important;
|
|
--text-micro: 0.8125rem !important;
|
|
}
|
|
|
|
/* Additional override for elements using typography classes */
|
|
:root.mobile-pointer:not(.desktop-runtime) .typography-markdown,
|
|
:root.mobile-pointer:not(.desktop-runtime) .typography-code,
|
|
:root.mobile-pointer:not(.desktop-runtime) .typography-ui-header,
|
|
:root.mobile-pointer:not(.desktop-runtime) .typography-ui-label,
|
|
:root.mobile-pointer:not(.desktop-runtime) .typography-meta,
|
|
:root.mobile-pointer:not(.desktop-runtime) .typography-micro {
|
|
font-size: unset !important;
|
|
}
|
|
|
|
/* Fix font size for tool displays */
|
|
:root.mobile-pointer:not(.desktop-runtime) [class*="tool"],
|
|
:root.mobile-pointer:not(.desktop-runtime) [class*="code"] {
|
|
--text-code: 0.875rem !important;
|
|
font-size: var(--text-code) !important;
|
|
}
|
|
|
|
/* Improve touch targets for mobile */
|
|
:root.mobile-pointer:not(.desktop-runtime) button,
|
|
:root.mobile-pointer:not(.desktop-runtime) .btn,
|
|
:root.mobile-pointer:not(.desktop-runtime) [role="button"] {
|
|
min-height: 36px;
|
|
min-width: 36px;
|
|
}
|
|
|
|
/* Improve input field touch targets */
|
|
:root.mobile-pointer:not(.desktop-runtime) input,
|
|
:root.mobile-pointer:not(.desktop-runtime) textarea,
|
|
:root.mobile-pointer:not(.desktop-runtime) select {
|
|
min-height: 36px;
|
|
}
|
|
|
|
/* Fix mobile text inputs */
|
|
:root.mobile-pointer:not(.desktop-runtime) input[type="text"],
|
|
:root.mobile-pointer:not(.desktop-runtime) input[type="search"],
|
|
:root.mobile-pointer:not(.desktop-runtime) input[type="email"],
|
|
:root.mobile-pointer:not(.desktop-runtime) input[type="password"],
|
|
:root.mobile-pointer:not(.desktop-runtime) textarea {
|
|
font-size: 16px !important; /* Prevents iOS zoom */
|
|
}
|
|
|
|
/* Prevent keyboard on non-input elements */
|
|
:root.mobile-pointer:not(.desktop-runtime)
|
|
button:not([type="submit"]):not([type="button"]):not([type="reset"]),
|
|
:root.mobile-pointer:not(.desktop-runtime) .btn,
|
|
:root.mobile-pointer:not(.desktop-runtime) [role="button"] {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Specific fix for session buttons */
|
|
:root.mobile-pointer:not(.desktop-runtime) button[inputmode="none"] {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Improve mobile spacing */
|
|
:root.mobile-pointer:not(.desktop-runtime) .px-4 {
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
}
|
|
|
|
:root.mobile-pointer:not(.desktop-runtime) .py-2 {
|
|
padding-top: 0.75rem !important;
|
|
padding-bottom: 0.75rem !important;
|
|
}
|
|
|
|
/* Fix mobile scroll containers */
|
|
:root.mobile-pointer:not(.desktop-runtime) .overflow-hidden {
|
|
overflow-x: hidden !important;
|
|
overflow-y: auto !important;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Fix mobile viewport height */
|
|
:root.mobile-pointer:not(.desktop-runtime),
|
|
:root.mobile-pointer:not(.desktop-runtime) body {
|
|
height: 100%;
|
|
height: -webkit-fill-available;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Fix main layout container */
|
|
:root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-screen {
|
|
height: 100vh;
|
|
height: -webkit-fill-available;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Fix header positioning */
|
|
:root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
}
|
|
|
|
/* Fix main content area */
|
|
:root.mobile-pointer:not(.desktop-runtime) .flex-1.overflow-hidden {
|
|
min-height: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Fix chat container */
|
|
:root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-full {
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Ensure proper flex behavior */
|
|
:root.mobile-pointer:not(.desktop-runtime) .flex.flex-col {
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Mobile sidebar positioning */
|
|
:root.mobile-pointer:not(.desktop-runtime) .mobile-sidebar-top {
|
|
top: var(--header-height, 3rem);
|
|
height: calc(100vh - var(--header-height, 3rem));
|
|
}
|
|
|
|
/* Set header height variable */
|
|
:root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
|
|
--header-height: 3rem;
|
|
}
|
|
|
|
/* For mobile devices with larger header */
|
|
@media (max-width: 768px) {
|
|
:root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
|
|
--header-height: 3.5rem;
|
|
}
|
|
}
|
|
|
|
/* For tablet devices */
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
:root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
|
|
--header-height: 3.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* iOS PWA Adaptations */
|
|
|
|
/* Phase 1: iOS PWA safe area handling - Enhanced positioning approach */
|
|
@media (display-mode: standalone) {
|
|
/* iOS-specific safe area handling with CSS variable support */
|
|
@supports (-webkit-touch-callout: none) {
|
|
/* Safe area handling for fixed positioned elements */
|
|
:root {
|
|
--oc-safe-area-top: env(safe-area-inset-top, 0);
|
|
--oc-safe-area-right: env(safe-area-inset-right, 0);
|
|
--oc-safe-area-bottom: env(safe-area-inset-bottom, 0);
|
|
--oc-safe-area-bottom-visual: clamp(2px, calc(var(--oc-safe-area-bottom) * 0.1 + 2px), 10px);
|
|
--oc-safe-area-left: env(safe-area-inset-left, 0);
|
|
}
|
|
|
|
.header-safe-area {
|
|
padding-top: var(--oc-safe-area-top);
|
|
}
|
|
|
|
.main-content-safe-area {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
padding-left: var(--oc-safe-area-left);
|
|
padding-right: var(--oc-safe-area-right);
|
|
}
|
|
|
|
/* Safe area for bottom fixed/bottom-0 elements */
|
|
.bottom-safe-area {
|
|
padding-bottom: var(--oc-safe-area-bottom-visual) !important;
|
|
}
|
|
|
|
/* Ensure proper body spacing for iOS */
|
|
body {
|
|
min-height: 100vh;
|
|
min-height: -webkit-fill-available;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Fix iOS viewport issues */
|
|
.flex.flex-col.h-screen {
|
|
min-height: 100vh;
|
|
min-height: -webkit-fill-available;
|
|
}
|
|
|
|
/* Prevent content overlap in iOS */
|
|
.flex-1.overflow-hidden {
|
|
position: relative;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Update header height for iOS */
|
|
.header-safe-area {
|
|
--header-height: 4.5rem;
|
|
}
|
|
|
|
.mobile-sidebar-top {
|
|
--header-height: 4.5rem;
|
|
}
|
|
|
|
/* Mobile typography improvements */
|
|
.typography-markdown {
|
|
font-size: 1rem !important;
|
|
}
|
|
|
|
.typography-code {
|
|
font-size: 0.875rem !important;
|
|
}
|
|
|
|
.typography-ui-header {
|
|
font-size: 0.9375rem !important;
|
|
}
|
|
|
|
.typography-ui-label {
|
|
font-size: 0.875rem !important;
|
|
}
|
|
|
|
.typography-meta {
|
|
font-size: 0.875rem !important;
|
|
}
|
|
|
|
.typography-micro {
|
|
font-size: 0.8125rem !important;
|
|
}
|
|
|
|
/* Fix font size for tool displays */
|
|
[class*="tool"], [class*="code"] {
|
|
font-size: 0.875rem !important;
|
|
}
|
|
}
|
|
|
|
/* Fallback for non-iOS standalone mode */
|
|
@supports not (-webkit-touch-callout: none) {
|
|
:root {
|
|
--oc-safe-area-top: env(safe-area-inset-top, 0);
|
|
--oc-safe-area-right: env(safe-area-inset-right, 0);
|
|
--oc-safe-area-bottom: env(safe-area-inset-bottom, 0);
|
|
--oc-safe-area-bottom-visual: clamp(2px, calc(var(--oc-safe-area-bottom) * 0.1 + 2px), 10px);
|
|
--oc-safe-area-left: env(safe-area-inset-left, 0);
|
|
}
|
|
|
|
.header-safe-area {
|
|
padding-top: var(--oc-safe-area-top);
|
|
}
|
|
|
|
.main-content-safe-area {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
padding-left: var(--oc-safe-area-left);
|
|
padding-right: var(--oc-safe-area-right);
|
|
}
|
|
|
|
.bottom-safe-area {
|
|
padding-bottom: var(--oc-safe-area-bottom-visual) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Phase 6: Home indicator blur gradient fix */
|
|
@media (display-mode: standalone) and (max-width: 768px) {
|
|
.pwa-dialog-content {
|
|
--pwa-dialog-padding: clamp(0.75rem, 3vw, 1.25rem);
|
|
top: calc(50% + (var(--oc-safe-area-top, 0px) * 0.22));
|
|
max-height: calc(100vh - var(--oc-safe-area-top, 0px) - var(--oc-safe-area-bottom-visual, 0px) - 20px);
|
|
padding: var(--pwa-dialog-padding);
|
|
padding-top: calc(var(--pwa-dialog-padding) + (var(--oc-safe-area-top, 0px) * 0.35));
|
|
--tw-translate-y: calc(-50% + (var(--oc-safe-area-top, 0px) * 0.6));
|
|
row-gap: clamp(0.75rem, 2vw, 1.25rem);
|
|
}
|
|
|
|
.pwa-dialog-content.pwa-compact {
|
|
--pwa-dialog-padding: clamp(0.5rem, 2vw, 0.85rem);
|
|
row-gap: clamp(0.45rem, 1.5vw, 0.8rem);
|
|
}
|
|
|
|
.pwa-dialog-content [data-slot="dialog-close"] {
|
|
top: calc(0.25rem + (var(--oc-safe-area-top, 0px) * 0.35));
|
|
right: var(--pwa-dialog-padding);
|
|
}
|
|
|
|
.pwa-dialog-content.pwa-compact [data-slot="dialog-close"] {
|
|
top: calc(0.2rem + (var(--oc-safe-area-top, 0px) * 0.3));
|
|
}
|
|
|
|
.pwa-dialog-content .settings-page-body {
|
|
max-width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
row-gap: 0;
|
|
}
|
|
|
|
.pwa-dialog-content .settings-page-body > :not([hidden]) ~ :not([hidden]) {
|
|
margin-top: 0.85rem;
|
|
}
|
|
|
|
.pwa-dialog-content .directory-dialog-body {
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
|
|
.pwa-dialog-content .directory-dialog-body .directory-grid {
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.pwa-overlay-panel {
|
|
margin-bottom: max(var(--oc-safe-area-bottom-visual, 0px), 12px);
|
|
padding-bottom: calc(var(--oc-safe-area-bottom-visual, 0px) * 0.4);
|
|
}
|
|
|
|
.pwa-overlay-panel .pwa-overlay-scroll {
|
|
padding-bottom: calc(var(--oc-safe-area-bottom-visual, 0px) + 12px);
|
|
}
|
|
}
|
|
|
|
@media (display-mode: standalone) {
|
|
/* Home indicator blur overlay */
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: var(--oc-safe-area-bottom-visual, var(--oc-safe-area-bottom, env(safe-area-inset-bottom, 0)));
|
|
background: linear-gradient(
|
|
to top,
|
|
var(--background) 0%,
|
|
var(--background) 30%,
|
|
rgba(from var(--background) r g b / 0.8) 60%,
|
|
rgba(from var(--background) r g b / 0.3) 85%,
|
|
transparent 100%
|
|
);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Fallback for browsers without rgba(from ...) support */
|
|
@supports not (color: rgba(from white r g b / 0.5)) {
|
|
body::after {
|
|
background: linear-gradient(
|
|
to top,
|
|
var(--background) 0%,
|
|
var(--background) 30%,
|
|
rgba(21, 19, 19, 0.8) 60%, /* Dark theme fallback */
|
|
rgba(21, 19, 19, 0.3) 85%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
/* Light theme fallback */
|
|
:root body::after {
|
|
background: linear-gradient(
|
|
to top,
|
|
var(--background) 0%,
|
|
var(--background) 30%,
|
|
rgba(248, 247, 243, 0.8) 60%, /* Light theme fallback */
|
|
rgba(248, 247, 243, 0.3) 85%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Streamdown Styles
|
|
Minimal overrides - fonts only, using Streamdown defaults
|
|
============================================ */
|
|
|
|
/* VS Code webviews can inject default pre/code/blockquote backgrounds; tool input/output should inherit the card surface. */
|
|
.tool-input-surface pre,
|
|
.tool-input-surface code,
|
|
.tool-input-surface blockquote,
|
|
.tool-input-text {
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* VSCode: tool cards should honor semantic code sizing, even when syntax themes inject sizes. */
|
|
:root.vscode-runtime .tool-input-surface,
|
|
:root.vscode-runtime .tool-output-surface {
|
|
font-size: var(--text-code) !important;
|
|
}
|
|
|
|
:root.vscode-runtime .tool-input-surface code,
|
|
:root.vscode-runtime .tool-input-surface pre,
|
|
:root.vscode-runtime .tool-output-surface code,
|
|
:root.vscode-runtime .tool-output-surface pre {
|
|
font-size: inherit !important;
|
|
}
|
|
|
|
/* Model/agent controls: agent label hides before model label. */
|
|
@container model-controls (max-width: 11rem) {
|
|
.model-controls__agent-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@container model-controls (max-width: 9rem) {
|
|
.model-controls__model-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* VS Code side panel: collapse earlier to save horizontal space. */
|
|
@container model-controls (max-width: 9rem) {
|
|
:root.vscode-runtime .model-controls__agent-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@container model-controls (max-width: 10rem) {
|
|
:root.vscode-runtime .model-controls__model-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Text font: IBM Plex Sans */
|
|
.streamdown-content {
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-markdown);
|
|
}
|
|
|
|
/* Tool markdown should render at code size to match tool card typography. */
|
|
.streamdown-content.streamdown-tool {
|
|
font-size: var(--text-code) !important;
|
|
}
|
|
|
|
.streamdown-content.streamdown-tool code,
|
|
.streamdown-content.streamdown-tool pre {
|
|
font-size: inherit !important;
|
|
}
|
|
|
|
/* Code font: IBM Plex Mono */
|
|
.streamdown-content code,
|
|
.streamdown-content pre {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* Streamdown code blocks: ensure light/dark Shiki vars work even when Tailwind doesn't scan Streamdown's internal class names. */
|
|
.streamdown-content [data-streamdown="code-block-body"] {
|
|
background-color: var(--shiki-light-bg, transparent);
|
|
color: var(--shiki-light, inherit);
|
|
}
|
|
|
|
.dark .streamdown-content [data-streamdown="code-block-body"] {
|
|
background-color: var(--shiki-dark-bg, var(--shiki-light-bg, transparent));
|
|
color: var(--shiki-dark, var(--shiki-light, inherit));
|
|
}
|
|
|
|
.dark .streamdown-content [data-streamdown="code-block-body"] span[style*="--shiki-dark"] {
|
|
color: var(--shiki-dark) !important;
|
|
}
|
|
|
|
/* Fix list styling - override Tailwind reset */
|
|
.streamdown-content ul {
|
|
list-style-type: disc;
|
|
list-style-position: outside;
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
.streamdown-content ol {
|
|
list-style-type: decimal;
|
|
list-style-position: outside;
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
.streamdown-content li {
|
|
display: list-item;
|
|
}
|
|
|
|
/* Reduce code block header height */
|
|
[data-streamdown="code-block-header"] {
|
|
padding: 0.375rem 0.75rem;
|
|
}
|
|
|
|
/* Disable Streamdown's code block virtualization (content-visibility) to avoid late height changes that break scroll-to-bottom. */
|
|
.streamdown-content [data-streamdown="code-block"] {
|
|
content-visibility: visible !important;
|
|
contain-intrinsic-size: none !important;
|
|
}
|