From 1b58287c075f0f9a1e6ecf565878b70607d26491 Mon Sep 17 00:00:00 2001 From: wasimysaid Date: Sat, 30 May 2026 20:21:21 +0200 Subject: [PATCH] style(studio): tune chat ui styles --- studio/frontend/src/index.css | 2095 +++++++++++++++++---------------- 1 file changed, 1110 insertions(+), 985 deletions(-) diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css index 1e0639245e..bc957ad614 100644 --- a/studio/frontend/src/index.css +++ b/studio/frontend/src/index.css @@ -15,571 +15,624 @@ @custom-variant dark (&:is(.dark *)); @font-face { - font-family: "Hellix"; - src: url("/fonts/Hellix-Regular.woff") format("woff"); - font-weight: 400; - font-style: normal; - font-display: swap; + font-family: "Hellix"; + src: url("/fonts/Hellix-Regular.woff") format("woff"); + font-weight: 400; + font-style: normal; + font-display: swap; } @font-face { - font-family: "Hellix"; - src: url("/fonts/Hellix-Medium.woff") format("woff"); - font-weight: 500; - font-style: normal; - font-display: swap; + font-family: "Hellix"; + src: url("/fonts/Hellix-Medium.woff") format("woff"); + font-weight: 500; + font-style: normal; + font-display: swap; } @font-face { - font-family: "Hellix"; - src: url("/fonts/Hellix-SemiBold.woff2") format("woff2"), - url("/fonts/Hellix-SemiBold.woff") format("woff"); - font-weight: 600; - font-style: normal; - font-display: swap; + font-family: "Hellix"; + src: url("/fonts/Hellix-SemiBold.woff2") format("woff2"), + url("/fonts/Hellix-SemiBold.woff") format("woff"); + font-weight: 600; + font-style: normal; + font-display: swap; } @font-face { - font-family: "Fira Code"; - src: url("/fonts/FiraCode-VariableFont_wght.ttf") format("truetype-variations"); - font-weight: 300 700; - font-style: normal; - font-display: swap; + font-family: "Fira Code"; + src: url("/fonts/FiraCode-VariableFont_wght.ttf") + format("truetype-variations"); + font-weight: 300 700; + font-style: normal; + font-display: swap; } :root { - /* Animation timing */ - --duration-micro: 100ms; - --duration-fast: 150ms; - --duration-normal: 200ms; + /* Animation timing */ + --duration-micro: 100ms; + --duration-fast: 150ms; + --duration-normal: 200ms; - /* Easing curves (Emil Kowalski) */ - --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); - --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); + /* Easing curves (Emil Kowalski) */ + --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); + --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); - --background: oklch(1 0 0); - --foreground: oklch(0.2686 0 0); - --card: oklch(1 0 0); - --card-foreground: oklch(0.1281 0.0179 169.2764); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.1281 0.0179 169.2764); - --primary: #17b88b; - --primary-foreground: oklch(1 0 0); - --secondary: oklch(0.9596 0.0275 167.8295); - --secondary-foreground: oklch(0.2868 0.0649 159.9823); - --muted: oklch(0.9702 0 0); - --muted-foreground: oklch(0.5486 0 0); - --accent: oklch(0.9596 0.0275 167.8295); - --accent-foreground: oklch(0.2868 0.0649 159.9823); - --destructive: oklch(0.6368 0.2078 25.3313); - --border: oklch(0.9208 0.0101 164.8536); - --input: oklch(0.9208 0.0101 164.8536); - --ring: #17b88b; - --chart-1: #17b88b; - --chart-2: oklch(0.694 0.1395 136.6059); - --chart-3: oklch(0.7014 0.1193 197.5897); - --chart-4: oklch(0.6926 0.1112 346.5775); - --chart-5: oklch(0.7497 0.1003 85.0057); - --radius: 1.1rem; - --sidebar: #f9faf9; - --sidebar-foreground: oklch(0.1281 0.0179 169.2764); - --sidebar-primary: #17b88b; - --sidebar-primary-foreground: oklch(1 0 0); - --sidebar-accent: oklch(0.96 0.0279 166.55); - --sidebar-accent-foreground: oklch(0.2868 0.0649 159.9823); - --sidebar-border: oklch(0.945 0.0101 164.8536); - --sidebar-ring: #17b88b; - --destructive-foreground: oklch(1 0 0); - --font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui; - --font-heading: "Hellix", "Space Grotesk Variable", var(--font-sans); - --font-serif: Source Serif 4, serif; - --font-mono: JetBrains Mono, monospace; - --shadow-color: hsl(0 0% 0%); - --shadow-opacity: 0; - --shadow-blur: 0px; - --shadow-spread: 0px; - --shadow-offset-x: 0px; - --shadow-offset-y: 0px; - --letter-spacing: 0em; - --spacing: 0.25rem; - /*--shadow-2xs: 0px 0px 0px 0px hsl(0 0% 0% / 0);*/ - /*--shadow-xs: 0px 0px 0px 0px hsl(0 0% 0% / 0);*/ - /*--shadow-sm:*/ - /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ - /* 0px 1px 2px 0px hsl(0 0% 0% / 0);*/ - /*--shadow:*/ - /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ - /* 0px 1px 2px 0px hsl(0 0% 0% / 0);*/ - /*--shadow-md:*/ - /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ - /* 0px 2px 4px 0px hsl(0 0% 0% / 0);*/ - /*--shadow-lg:*/ - /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ - /* 0px 4px 6px 0px hsl(0 0% 0% / 0);*/ - /*--shadow-xl:*/ - /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ - /* 0px 8px 10px 0px hsl(0 0% 0% / 0);*/ - /*--shadow-2xl: 0px 0px 0px 0px hsl(0 0% 0% / 0);*/ - --tracking-normal: -0.01em; + --background: oklch(1 0 0); + --foreground: oklch(0.2686 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.1281 0.0179 169.2764); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.1281 0.0179 169.2764); + --primary: #17b88b; + --primary-foreground: oklch(1 0 0); + --secondary: oklch(0.9596 0.0275 167.8295); + --secondary-foreground: oklch(0.2868 0.0649 159.9823); + --muted: oklch(0.9702 0 0); + --muted-foreground: oklch(0.5486 0 0); + --accent: oklch(0.9596 0.0275 167.8295); + --accent-foreground: oklch(0.2868 0.0649 159.9823); + --destructive: oklch(0.6368 0.2078 25.3313); + --border: oklch(0.9208 0.0101 164.8536); + --input: oklch(0.9208 0.0101 164.8536); + --ring: #17b88b; + --chart-1: #17b88b; + --chart-2: oklch(0.694 0.1395 136.6059); + --chart-3: oklch(0.7014 0.1193 197.5897); + --chart-4: oklch(0.6926 0.1112 346.5775); + --chart-5: oklch(0.7497 0.1003 85.0057); + --radius: 1.1rem; + --sidebar: #f9faf9; + --sidebar-foreground: oklch(0.1281 0.0179 169.2764); + --sidebar-primary: #17b88b; + --sidebar-primary-foreground: oklch(1 0 0); + --sidebar-accent: oklch(0.96 0.0279 166.55); + --sidebar-accent-foreground: oklch(0.2868 0.0649 159.9823); + --sidebar-border: oklch(0.945 0.0101 164.8536); + --sidebar-ring: #17b88b; + --destructive-foreground: oklch(1 0 0); + --font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui; + --font-heading: "Hellix", "Space Grotesk Variable", var(--font-sans); + --font-serif: Source Serif 4, serif; + --font-mono: JetBrains Mono, monospace; + --shadow-color: hsl(0 0% 0%); + --shadow-opacity: 0; + --shadow-blur: 0px; + --shadow-spread: 0px; + --shadow-offset-x: 0px; + --shadow-offset-y: 0px; + --letter-spacing: 0em; + --spacing: 0.25rem; + /*--shadow-2xs: 0px 0px 0px 0px hsl(0 0% 0% / 0);*/ + /*--shadow-xs: 0px 0px 0px 0px hsl(0 0% 0% / 0);*/ + /*--shadow-sm:*/ + /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ + /* 0px 1px 2px 0px hsl(0 0% 0% / 0);*/ + /*--shadow:*/ + /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ + /* 0px 1px 2px 0px hsl(0 0% 0% / 0);*/ + /*--shadow-md:*/ + /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ + /* 0px 2px 4px 0px hsl(0 0% 0% / 0);*/ + /*--shadow-lg:*/ + /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ + /* 0px 4px 6px 0px hsl(0 0% 0% / 0);*/ + /*--shadow-xl:*/ + /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ + /* 0px 8px 10px 0px hsl(0 0% 0% / 0);*/ + /*--shadow-2xl: 0px 0px 0px 0px hsl(0 0% 0% / 0);*/ + --tracking-normal: -0.01em; - /* Hex (not OKLCH) so the rendered surface matches the design mockup pixel-for-pixel. */ - --nav-fg: #383835; - --nav-fg-muted: #858279; - --nav-surface-hover: #f0f0f0; - --nav-icon-idle: #8f8f8f; - --nav-beta-border: #e0ded6; - --panel-surface-hover: #ebebeb; - /* Right-side chat-parameters panel: matches the chat content + /* Hex (not OKLCH) so the rendered surface matches the design mockup pixel-for-pixel. */ + --nav-fg: #383835; + --nav-fg-muted: #858279; + --nav-surface-hover: #f0f0f0; + --nav-icon-idle: #8f8f8f; + --nav-beta-border: #e0ded6; + --panel-surface-hover: #ebebeb; + /* Right-side chat-parameters panel: matches the chat content surface in both themes — distinction from the left sidebar (#f9faf9) is handled by the left border alone. Tracks `--background` so any future tweaks to the chat surface flow through automatically. */ - --panel-surface: var(--background); - --panel-surface-fg: var(--foreground); - --panel-input-surface: #f5f5f5; - --panel-input-surface-hover: #efefef; - /* Muted gray with a one-step warmer-blue last channel (#779 vs flat #777) + --panel-surface: var(--background); + --panel-surface-fg: var(--foreground); + --panel-input-surface: #f5f5f5; + --panel-input-surface-hover: #efefef; + /* Muted gray with a one-step warmer-blue last channel (#779 vs flat #777) so the tone has a faint hue rather than pure neutral — keeps text and sliders quiet but not lifeless. */ - --panel-surface-fg-muted: #777779; - /* Slider track-fill / thumb / hover halo. Decoupled from + --panel-surface-fg-muted: #777779; + /* Slider track-fill / thumb / hover halo. Decoupled from --panel-surface-fg-muted so the slider can be tuned independently from muted text. Light mode: lighter than the muted-text gray for a softer feel. Dark mode (further down) keeps parity with the muted-text token. */ - --panel-slider-fg: #9a9a9c; - /* Chat-message action icons (assistant action bar, branch picker + --panel-slider-fg: #9a9a9c; + /* Chat-message action icons (assistant action bar, branch picker chevrons + numbers, message-timing token counter, code-block copy/download, user action bar, delete button). One token drives all of them so the row reads as a single coherent control strip. Mid-dark gray on the light surface — visible enough to read as active controls, not so dark that they compete with message text. */ - --chat-icon-fg: #555555; - --chat-icon-fg-hover: var(--foreground); - --chat-icon-bg-hover: #ededec; + --chat-icon-fg: #555555; + --chat-icon-fg-hover: var(--foreground); + --chat-icon-bg-hover: #ededec; - /* Standard interactive-icon size for nav, menus, action bars, and + /* Standard interactive-icon size for nav, menus, action bars, and in-message code-block actions. Sized one step above body text so icons read as minimally larger than adjacent labels (~14px text). Theme-independent — declared once in :root. */ - --icon-size: 18px; - /* Inset of a centered .size-icon glyph within a 2rem (size-8) action + --icon-size: 18px; + /* Inset of a centered .size-icon glyph within a 2rem (size-8) action button — i.e. (32px − icon-size) / 2. Use as a negative margin on a chat-message action bar so the leftmost icon's visual edge aligns with the message text edge. Auto-tracks --icon-size. */ - --icon-btn-inset: calc((2rem - var(--icon-size)) / 2); + --icon-btn-inset: calc((2rem - var(--icon-size)) / 2); } .dark { - /* Exact palette from apps/studio/index_chat.html mockup. Using hex so the + /* Exact palette from apps/studio/index_chat.html mockup. Using hex so the rendered surface matches the mockup pixel-for-pixel — OKLCH conversion drifted ~3% darker and shifted the neutral hue. */ - --background: #1f2023; - --foreground: #ececee; - --card: #2d2e32; - --card-foreground: #ececee; - --popover: #2d2e32; - --popover-foreground: #ececee; - --primary: #17b88b; - --primary-foreground: oklch(1 0 0); - --secondary: #2e3035; - --secondary-foreground: #ececee; - --muted: #2e3035; - --muted-foreground: #999999; - --accent: #2e3035; - --accent-foreground: #ececee; - --destructive: oklch(0.6368 0.2078 25.3313); - /* --border / --input one step lighter than --muted so outlines and form + --background: #1f2023; + --foreground: #ececee; + --card: #2d2e32; + --card-foreground: #ececee; + --popover: #2d2e32; + --popover-foreground: #ececee; + --primary: #17b88b; + --primary-foreground: oklch(1 0 0); + --secondary: #2e3035; + --secondary-foreground: #ececee; + --muted: #2e3035; + --muted-foreground: #999999; + --accent: #2e3035; + --accent-foreground: #ececee; + --destructive: oklch(0.6368 0.2078 25.3313); + /* --border / --input one step lighter than --muted so outlines and form borders stay visible on muted surfaces (right config panel, export tiles, quant chips) and keep subtle contrast on card. */ - --border: #3a3d42; - --input: #3a3d42; - --ring: #17b88b; - --chart-1: oklch(0.7511 0.1407 166.2284); - --chart-2: oklch(0.75 0.14 136.5572); - --chart-3: oklch(0.7554 0.1285 197.339); - --chart-4: oklch(0.7503 0.1199 346.7805); - --chart-5: oklch(0.799 0.1196 84.6633); - --sidebar: #18181a; - --sidebar-foreground: #ececee; - --sidebar-primary: #17b88b; - --sidebar-primary-foreground: oklch(1 0 0); - --sidebar-accent: #2f2f31; - --sidebar-accent-foreground: #ececee; - --sidebar-border: #2d2d2f; - --sidebar-ring: #17b88b; - --destructive-foreground: oklch(1 0 0); - --radius: 0.625rem; - --font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui; - --font-serif: Source Serif 4, serif; - --font-mono: JetBrains Mono, monospace; - --shadow-color: hsl(0 0% 0%); - --shadow-opacity: 0; - --shadow-blur: 0px; - --shadow-spread: 0px; - --shadow-offset-x: 0px; - --shadow-offset-y: 0px; - --letter-spacing: 0em; - --spacing: 0.25rem; - --shadow-2xs: 0px 0px 0px 0px hsl(0 0% 0% / 0); - --shadow-xs: 0px 0px 0px 0px hsl(0 0% 0% / 0); - --shadow-sm: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px 0px hsl(0 0% 0% / 0); - --shadow: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px 0px hsl(0 0% 0% / 0); - --shadow-md: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px 0px hsl(0 0% 0% / 0); - --shadow-lg: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px 0px hsl(0 0% 0% / 0); - --shadow-xl: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px 0px hsl(0 0% 0% / 0); - --shadow-2xl: 0px 0px 0px 0px hsl(0 0% 0% / 0); + --border: #3a3d42; + --input: #3a3d42; + --ring: #17b88b; + --chart-1: oklch(0.7511 0.1407 166.2284); + --chart-2: oklch(0.75 0.14 136.5572); + --chart-3: oklch(0.7554 0.1285 197.339); + --chart-4: oklch(0.7503 0.1199 346.7805); + --chart-5: oklch(0.799 0.1196 84.6633); + --sidebar: #18181a; + --sidebar-foreground: #ececee; + --sidebar-primary: #17b88b; + --sidebar-primary-foreground: oklch(1 0 0); + --sidebar-accent: #2f2f31; + --sidebar-accent-foreground: #ececee; + --sidebar-border: #2d2d2f; + --sidebar-ring: #17b88b; + --destructive-foreground: oklch(1 0 0); + --radius: 0.625rem; + --font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui; + --font-serif: Source Serif 4, serif; + --font-mono: JetBrains Mono, monospace; + --shadow-color: hsl(0 0% 0%); + --shadow-opacity: 0; + --shadow-blur: 0px; + --shadow-spread: 0px; + --shadow-offset-x: 0px; + --shadow-offset-y: 0px; + --letter-spacing: 0em; + --spacing: 0.25rem; + --shadow-2xs: 0px 0px 0px 0px hsl(0 0% 0% / 0); + --shadow-xs: 0px 0px 0px 0px hsl(0 0% 0% / 0); + --shadow-sm: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px 0px + hsl(0 0% 0% / 0); + --shadow: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px 0px hsl(0 0% 0% / 0); + --shadow-md: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px 0px + hsl(0 0% 0% / 0); + --shadow-lg: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px 0px + hsl(0 0% 0% / 0); + --shadow-xl: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px 0px + hsl(0 0% 0% / 0); + --shadow-2xl: 0px 0px 0px 0px hsl(0 0% 0% / 0); - --nav-fg: #c7c7c4; - --nav-fg-muted: #96979b; - --nav-surface-hover: #2e2e30; - --nav-icon-idle: #5c5c5c; - --nav-beta-border: #3a3c3f; - --panel-surface-hover: #3a3c42; - /* Right-side chat-parameters panel: matches the chat content + --nav-fg: #c7c7c4; + --nav-fg-muted: #96979b; + --nav-surface-hover: #2e2e30; + --nav-icon-idle: #5c5c5c; + --nav-beta-border: #3a3c3f; + --panel-surface-hover: #3a3c42; + /* Right-side chat-parameters panel: matches the chat content surface in both themes — distinction from the left sidebar (#18181a, the deepest surface) is handled by the left border alone. Tracks `--background` so any future tweaks to the chat surface flow through automatically. */ - --panel-surface: var(--background); - --panel-surface-fg: var(--foreground); - --panel-input-surface: #2a2b2e; - --panel-input-surface-hover: #2e3033; - /* Soft neutral gray for muted text and sliders. Pure-ish #ababab + --panel-surface: var(--background); + --panel-surface-fg: var(--foreground); + --panel-input-surface: #2a2b2e; + --panel-input-surface-hover: #2e3033; + /* Soft neutral gray for muted text and sliders. Pure-ish #ababab reads as quiet on the dark panel without going colored. */ - --panel-surface-fg-muted: #ababab; - /* Dark-mode slider tone matches muted text — user wants the dark + --panel-surface-fg-muted: #ababab; + /* Dark-mode slider tone matches muted text — user wants the dark theme slider unchanged from the previous behavior. */ - --panel-slider-fg: #ababab; - /* Chat-message action icons. A touch lighter than the previous + --panel-slider-fg: #ababab; + /* Chat-message action icons. A touch lighter than the previous #b8b8b8 so the icons read clearly without going near pure white; hover restores full --foreground for affordance. */ - --chat-icon-fg: #d8d8d8; - --chat-icon-fg-hover: var(--foreground); - --chat-icon-bg-hover: #2d2e32; + --chat-icon-fg: #d8d8d8; + --chat-icon-fg-hover: var(--foreground); + --chat-icon-bg-hover: #2d2e32; } @theme inline { - --font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui; - --font-heading: "Hellix", "Space Grotesk Variable", var(--font-sans); - --color-sidebar-ring: var(--sidebar-ring); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar: var(--sidebar); - --color-chart-5: var(--chart-5); - --color-chart-4: var(--chart-4); - --color-chart-3: var(--chart-3); - --color-chart-2: var(--chart-2); - --color-chart-1: var(--chart-1); - --color-code-block: #181818; - --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); - --font-mono: JetBrains Mono, monospace; - --font-serif: Source Serif 4, serif; - --radius: 1.1rem; - --tracking-tighter: calc(var(--tracking-normal) - 0.05em); - --tracking-tight: calc(var(--tracking-normal) - 0.025em); - --tracking-wide: calc(var(--tracking-normal) + 0.025em); - --tracking-wider: calc(var(--tracking-normal) + 0.05em); - --tracking-widest: calc(var(--tracking-normal) + 0.1em); - --tracking-normal: var(--tracking-normal); - /*--shadow-2xl: var(--shadow-2xl);*/ - /*--shadow-xl: var(--shadow-xl);*/ - /*--shadow-lg: var(--shadow-lg);*/ - /*--shadow-md: var(--shadow-md);*/ - /*--shadow: var(--shadow);*/ - /*--shadow-sm: var(--shadow-sm);*/ - /*--shadow-xs: var(--shadow-xs);*/ - /*--shadow-2xs: var(--shadow-2xs);*/ - /*--spacing: var(--spacing);*/ - /*--letter-spacing: var(--letter-spacing);*/ - /*--shadow-offset-y: var(--shadow-offset-y);*/ - /*--shadow-offset-x: var(--shadow-offset-x);*/ - /*--shadow-spread: var(--shadow-spread);*/ - /*--shadow-blur: var(--shadow-blur);*/ - /*--shadow-opacity: var(--shadow-opacity);*/ - /*--color-shadow-color: var(--shadow-color);*/ - --color-destructive-foreground: var(--destructive-foreground); + --font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui; + --font-heading: "Hellix", "Space Grotesk Variable", var(--font-sans); + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-code-block: #181818; + --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); + --font-mono: JetBrains Mono, monospace; + --font-serif: Source Serif 4, serif; + --radius: 1.1rem; + --tracking-tighter: calc(var(--tracking-normal) - 0.05em); + --tracking-tight: calc(var(--tracking-normal) - 0.025em); + --tracking-wide: calc(var(--tracking-normal) + 0.025em); + --tracking-wider: calc(var(--tracking-normal) + 0.05em); + --tracking-widest: calc(var(--tracking-normal) + 0.1em); + --tracking-normal: var(--tracking-normal); + /*--shadow-2xl: var(--shadow-2xl);*/ + /*--shadow-xl: var(--shadow-xl);*/ + /*--shadow-lg: var(--shadow-lg);*/ + /*--shadow-md: var(--shadow-md);*/ + /*--shadow: var(--shadow);*/ + /*--shadow-sm: var(--shadow-sm);*/ + /*--shadow-xs: var(--shadow-xs);*/ + /*--shadow-2xs: var(--shadow-2xs);*/ + /*--spacing: var(--spacing);*/ + /*--letter-spacing: var(--letter-spacing);*/ + /*--shadow-offset-y: var(--shadow-offset-y);*/ + /*--shadow-offset-x: var(--shadow-offset-x);*/ + /*--shadow-spread: var(--shadow-spread);*/ + /*--shadow-blur: var(--shadow-blur);*/ + /*--shadow-opacity: var(--shadow-opacity);*/ + /*--color-shadow-color: var(--shadow-color);*/ + --color-destructive-foreground: var(--destructive-foreground); - --color-nav-fg: var(--nav-fg); - --color-nav-fg-muted: var(--nav-fg-muted); - --color-nav-surface-hover: var(--nav-surface-hover); - --color-nav-icon-idle: var(--nav-icon-idle); - --color-nav-beta-border: var(--nav-beta-border); - --color-panel-surface-hover: var(--panel-surface-hover); - --color-panel-surface: var(--panel-surface); - --color-panel-surface-fg: var(--panel-surface-fg); - --color-panel-surface-fg-muted: var(--panel-surface-fg-muted); - --color-chat-icon-fg: var(--chat-icon-fg); - --color-chat-icon-fg-hover: var(--chat-icon-fg-hover); - --color-chat-icon-bg-hover: var(--chat-icon-bg-hover); + --color-nav-fg: var(--nav-fg); + --color-nav-fg-muted: var(--nav-fg-muted); + --color-nav-surface-hover: var(--nav-surface-hover); + --color-nav-icon-idle: var(--nav-icon-idle); + --color-nav-beta-border: var(--nav-beta-border); + --color-panel-surface-hover: var(--panel-surface-hover); + --color-panel-surface: var(--panel-surface); + --color-panel-surface-fg: var(--panel-surface-fg); + --color-panel-surface-fg-muted: var(--panel-surface-fg-muted); + --color-chat-icon-fg: var(--chat-icon-fg); + --color-chat-icon-fg-hover: var(--chat-icon-fg-hover); + --color-chat-icon-bg-hover: var(--chat-icon-bg-hover); - --animate-pulse: pulse var(--duration) ease-out infinite; + --animate-pulse: pulse var(--duration) ease-out infinite; - @keyframes pulse { + @keyframes pulse { + 0%, + 100% { + box-shadow: 0 0 0 0 var(--pulse-color); + } - 0%, - 100% { - box-shadow: 0 0 0 0 var(--pulse-color); - } + 50% { + box-shadow: 0 0 0 8px var(--pulse-color); + } + } - 50% { - box-shadow: 0 0 0 8px var(--pulse-color); - } - } + --animate-shiny-text: shiny-text 8s infinite; - --animate-shiny-text: shiny-text 8s infinite; + @keyframes shiny-text { + 0%, + 90%, + 100% { + background-position: calc(-100% - var(--shiny-width)) 0; + } - @keyframes shiny-text { + 30%, + 60% { + background-position: calc(100% + var(--shiny-width)) 0; + } + } - 0%, - 90%, - 100% { - background-position: calc(-100% - var(--shiny-width)) 0; - } + --animate-icon-pop: icon-pop 0.3s ease-out; - 30%, - 60% { - background-position: calc(100% + var(--shiny-width)) 0; - } - } + @keyframes icon-pop { + 0% { + transform: scale(1); + } - --animate-icon-pop: icon-pop 0.3s ease-out; + 45% { + transform: scale(1.08); + } - @keyframes icon-pop { - 0% { - transform: scale(1); - } + 100% { + transform: scale(1); + } + } - 45% { - transform: scale(1.08); - } + --animate-shine: shine var(--duration) infinite linear; - 100% { - transform: scale(1); - } - } + @keyframes shine { + 0% { + background-position: 0% 0%; + } - --animate-shine: shine var(--duration) infinite linear; + 50% { + background-position: 100% 100%; + } - @keyframes shine { - 0% { - background-position: 0% 0%; - } - - 50% { - background-position: 100% 100%; - } - - to { - background-position: 0% 0%; - } - } + to { + background-position: 0% 0%; + } + } } @layer base { - * { - @apply border-border outline-ring/50; - } + * { + @apply border-border outline-ring/50; + } - body { - @apply font-sans bg-background text-foreground; - letter-spacing: var(--tracking-normal); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - } + body { + @apply font-sans bg-background text-foreground; + letter-spacing: var(--tracking-normal); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + } - html { - @apply font-sans h-full; - } + html { + @apply font-sans h-full; + } - body, - #root { - @apply h-full; - } + body, + #root { + @apply h-full; + } - body[data-scroll-locked] { - margin-right: 0 !important; - } + body[data-scroll-locked] { + margin-right: 0 !important; + } - h1, - h2, - h3, - h4, - h5, - h6 { - font-family: var(--font-sans); - letter-spacing: -0.02em; - } + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: var(--font-sans); + letter-spacing: -0.02em; + } } @layer utilities { - - /* Heading font utility — the logo applies its own dark-mode tracking + /* Heading font utility — the logo applies its own dark-mode tracking to offset optical bloom at large sizes. For small UI text (menus, nav items) we keep a single tight tracking in both themes, relying on global antialiased font-smoothing to neutralize the bloom. */ - .font-heading { - font-family: var(--font-heading); - letter-spacing: -0.01em; - } + .font-heading { + font-family: var(--font-heading); + letter-spacing: -0.01em; + } - /* Dark mode loosens tracking to offset optical bloom on dark surfaces. */ - .tracking-nav { - letter-spacing: 0.015em; - } - .dark .tracking-nav { - letter-spacing: 0.03em; - } + /* Dark mode loosens tracking to offset optical bloom on dark surfaces. */ + .tracking-nav { + letter-spacing: 0.015em; + } + .dark .tracking-nav { + letter-spacing: 0.03em; + } - .nav-icon-btn { - @apply inline-flex h-7 w-7 items-center justify-center rounded-[10px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring; - } + .nav-icon-btn { + @apply inline-flex h-7 w-7 items-center justify-center rounded-[10px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring; + } - /* Standard icon size — drives every nav/menu/action-bar icon + /* Standard icon size — drives every nav/menu/action-bar icon (left sidebar, app-user menu, settings tabs, chat config toggle, right-panel close, chat message action bars, code-block actions). Pulls from --icon-size so a single edit retunes them all. */ - .size-icon { - width: var(--icon-size); - height: var(--icon-size); - } + .size-icon { + width: var(--icon-size); + height: var(--icon-size); + } - /* Pins Inter across themes; parent `font-heading` resolves to Geist in dark. */ - .nav-badge { - font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif; - } + /* Pins Inter across themes; parent `font-heading` resolves to Geist in dark. */ + .nav-badge { + font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif; + } - .sidebar-nav-btn { - color: var(--nav-fg); - } - .sidebar-nav-btn:hover, - .sidebar-nav-btn[data-active="true"], - .sidebar-nav-btn[data-state="open"], - .group\/recent-item:hover .sidebar-nav-btn, - .group\/recent-item:has(.sidebar-row-action[data-state="open"]) .sidebar-nav-btn, - .group\/run-item:hover .sidebar-nav-btn, - .group\/run-item:has(.sidebar-row-action[data-state="open"]) .sidebar-nav-btn { - background-color: var(--nav-surface-hover) !important; - color: #000 !important; - } - .dark .sidebar-nav-btn:hover, - .dark .sidebar-nav-btn[data-active="true"], - .dark .sidebar-nav-btn[data-state="open"], - .dark .group\/recent-item:hover .sidebar-nav-btn, - .dark .group\/recent-item:has(.sidebar-row-action[data-state="open"]) .sidebar-nav-btn, - .dark .group\/run-item:hover .sidebar-nav-btn, - .dark .group\/run-item:has(.sidebar-row-action[data-state="open"]) .sidebar-nav-btn { - color: #fff !important; - } + .sidebar-nav-btn { + color: var(--nav-fg); + } + .sidebar-nav-btn:hover, + .sidebar-nav-btn[data-active="true"], + .sidebar-nav-btn[data-state="open"], + .group\/recent-item:hover .sidebar-nav-btn, + .group\/recent-item:has(.sidebar-row-action[data-state="open"]) + .sidebar-nav-btn, + .group\/run-item:hover .sidebar-nav-btn, + .group\/run-item:has(.sidebar-row-action[data-state="open"]) + .sidebar-nav-btn { + background-color: var(--nav-surface-hover) !important; + color: #000 !important; + } + .dark .sidebar-nav-btn:hover, + .dark .sidebar-nav-btn[data-active="true"], + .dark .sidebar-nav-btn[data-state="open"], + .dark .group\/recent-item:hover .sidebar-nav-btn, + .dark + .group\/recent-item:has(.sidebar-row-action[data-state="open"]) + .sidebar-nav-btn, + .dark .group\/run-item:hover .sidebar-nav-btn, + .dark + .group\/run-item:has(.sidebar-row-action[data-state="open"]) + .sidebar-nav-btn { + color: #fff !important; + } - .sidebar-row-action { - @apply absolute top-0 bottom-0 right-0 inline-flex items-center justify-end pl-2 pr-1.5 opacity-0 pointer-events-none outline-none; - } - .sidebar-row-action[data-state="open"] { - @apply opacity-100 pointer-events-auto; - } - .sidebar-row-action-glyph { - @apply inline-flex size-6 items-center justify-center rounded-[10px] text-sidebar-foreground/55; - } + .sidebar-row-action { + @apply absolute top-0 bottom-0 right-0 inline-flex items-center justify-end pl-2 pr-1.5 opacity-0 pointer-events-none outline-none; + } + .sidebar-row-action[data-state="open"] { + @apply opacity-100 pointer-events-auto; + } + .sidebar-row-action-glyph { + @apply inline-flex size-6 items-center justify-center rounded-[10px] text-sidebar-foreground/55; + } - /* Branch picker chevron buttons sit beside action bar icon buttons + /* Branch picker chevron buttons sit beside action bar icon buttons (size-8, rounded-[10px]). Height + radius match for visual alignment, but width is tighter so the small chevron glyph reads as a compact control rather than a full-size icon button. */ - .aui-branch-chevron-btn { - @apply inline-flex h-8 w-6 cursor-pointer items-center justify-center rounded-[10px] p-0 text-chat-icon-fg transition-colors hover:bg-chat-icon-bg-hover hover:text-chat-icon-fg-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent; - } - .sidebar-row-action:hover .sidebar-row-action-glyph, - .sidebar-row-action[data-state="open"] .sidebar-row-action-glyph { - @apply bg-nav-surface-hover text-nav-fg; - } - .dark .sidebar-row-action:hover .sidebar-row-action-glyph, - .dark .sidebar-row-action[data-state="open"] .sidebar-row-action-glyph { - color: #fff; - } + .aui-branch-chevron-btn { + @apply inline-flex h-8 w-6 cursor-pointer items-center justify-center rounded-[10px] p-0 text-chat-icon-fg transition-colors hover:bg-chat-icon-bg-hover hover:text-chat-icon-fg-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent; + } + .sidebar-row-action:hover .sidebar-row-action-glyph, + .sidebar-row-action[data-state="open"] .sidebar-row-action-glyph { + @apply bg-nav-surface-hover text-nav-fg; + } + .dark .sidebar-row-action:hover .sidebar-row-action-glyph, + .dark .sidebar-row-action[data-state="open"] .sidebar-row-action-glyph { + color: #fff; + } - .sidebar-sticky-label { - @apply sticky top-0 z-20 rounded-none bg-sidebar pt-0 pb-1.5 pl-[18px] pr-4 text-[13px]! font-medium normal-case tracking-[0.04em] text-nav-fg-muted focus-visible:ring-0! focus-visible:outline-none shadow-[0_-8px_0_0_var(--sidebar)] transition-shadow duration-150; - } - .sidebar-sticky-label.is-scrolled { - @apply shadow-[0_-8px_0_0_var(--sidebar),0_0.5px_0_0_var(--sidebar-border)]; - } + .sidebar-sticky-label { + @apply sticky top-0 z-20 rounded-none bg-sidebar pt-0 pb-1.5 pl-[18px] pr-4 text-[13px]! font-medium normal-case tracking-[0.04em] text-nav-fg-muted focus-visible:ring-0! focus-visible:outline-none shadow-[0_-8px_0_0_var(--sidebar)] transition-shadow duration-150; + } + .sidebar-sticky-label.is-scrolled { + @apply shadow-[0_-8px_0_0_var(--sidebar),0_0.5px_0_0_var(--sidebar-border)]; + } - /* Neutral panel input surface — sidesteps the green cast on + .app-sidebar-top-actions { + position: relative; + z-index: 25; + transition: box-shadow var(--duration-fast) ease-out; + } + + .app-sidebar-top-actions.is-scrolled { + box-shadow: 0 0.5px 0 0 var(--sidebar-border), 0 10px 18px -18px + rgba(0, 0, 0, 0.42); + } + + .dark .app-sidebar-top-actions.is-scrolled { + box-shadow: 0 0.5px 0 0 var(--sidebar-border), 0 12px 20px -18px + rgba(0, 0, 0, 0.72); + } + + .app-sidebar-scroll-region { + mask-repeat: no-repeat; + mask-size: 100% 100%; + transition: mask-image var(--duration-fast) ease-out; + } + + .app-sidebar-scroll-region.is-scrolled { + mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 100%); + } + + .app-sidebar-scroll-region.can-scroll-down { + mask-image: linear-gradient( + to bottom, + #000 0, + #000 calc(100% - 18px), + transparent 100% + ); + } + + .app-sidebar-scroll-region.is-scrolled.can-scroll-down { + mask-image: linear-gradient( + to bottom, + transparent 0, + #000 18px, + #000 calc(100% - 18px), + transparent 100% + ); + } + + /* Neutral panel input surface — sidesteps the green cast on `--input` / `--border` (both have a small chroma at hue ~165 in light mode). Same value drives the preset input pill, the system prompt button, and the chat-template textarea so all three read as one quiet gray family, matching the focused-edit-number tint. */ - .panel-input-group { - @apply !h-9 min-h-9 min-w-0 items-stretch gap-0 rounded-[10px] pr-0 transition-colors focus-within:ring-0 focus-within:shadow-none; - border: 0 !important; - background-color: var(--panel-input-surface); - } - .panel-input-group:has([data-slot="input-group-control"]:focus-visible) { - border: 0 !important; - box-shadow: none; - } + .panel-input-group { + @apply !h-9 min-h-9 min-w-0 items-stretch gap-0 rounded-[10px] pr-0 transition-colors focus-within:ring-0 focus-within:shadow-none; + border: 0 !important; + background-color: var(--panel-input-surface); + } + .panel-input-group:has([data-slot="input-group-control"]:focus-visible) { + border: 0 !important; + box-shadow: none; + } - /* Neutral surface for the larger panel text containers — system + /* Neutral surface for the larger panel text containers — system prompt preview button and chat-template textarea — so they share the same gray as the preset input pill and don't pick up the theme's slight green-cast `--input`. */ - .panel-text-surface { - @apply rounded-[20px] border-0 transition-colors; - background-color: var(--panel-input-surface); - } - .panel-text-surface:hover { - background-color: var(--panel-input-surface-hover); - } + .panel-text-surface { + @apply rounded-[20px] border-0 transition-colors; + background-color: var(--panel-input-surface); + } + .panel-text-surface:hover { + background-color: var(--panel-input-surface-hover); + } - /* Sidebar sliders: soft neutral grays — active fill and thumb stay + /* Sidebar sliders: soft neutral grays — active fill and thumb stay in the same neutral family as the panel surface so the controls read as quiet, modern, and uncluttered. Flat (no shadow), small thumb, no ring. The track's translucent neutral adapts to either theme; the fill/thumb pick a mid-gray with enough contrast to read on the panel without competing with text. */ - /* Inactive track: barely-there alpha so it reads as a faint hint + /* Inactive track: barely-there alpha so it reads as a faint hint rather than a visible bar — the active fill carries the value, the track just suggests the slider's extent. Same alpha both themes; the black/white base flips automatically per theme. */ - .panel-slider [data-slot="slider-track"] { - height: 0.25rem !important; - background-color: rgb(0 0 0 / 0.025) !important; - } - .dark .panel-slider [data-slot="slider-track"] { - background-color: rgb(255 255 255 / 0.025) !important; - } - /* Sliders in the right-side parameters panel. + .panel-slider [data-slot="slider-track"] { + height: 0.25rem !important; + background-color: rgb(0 0 0 / 0.025) !important; + } + .dark .panel-slider [data-slot="slider-track"] { + background-color: rgb(255 255 255 / 0.025) !important; + } + /* Sliders in the right-side parameters panel. * * Color: every interactive surface (active fill, thumb body, thumb * border, hover/press halo) resolves through a single token — @@ -608,33 +661,33 @@ * Halo lifecycle: deliberately no `:focus` — pointer focus persists * after release and would leave a stale halo. `:focus-visible` * keeps keyboard navigation accessible (Tab + arrows). */ - .panel-slider .bg-primary { - background-color: var(--panel-slider-fg) !important; - } - .panel-slider [data-slot="slider-thumb"] { - width: 0.875rem !important; - height: 0.875rem !important; - background-color: var(--panel-slider-fg) !important; - border-color: var(--panel-slider-fg) !important; - transform: none !important; - box-shadow: none !important; - transition: box-shadow 140ms ease-out !important; - } - .panel-slider [data-slot="slider-thumb"]:hover, - .panel-slider [data-slot="slider-thumb"]:focus-visible, - .panel-slider:active [data-slot="slider-thumb"] { - box-shadow: 0 0 0 10px - color-mix(in srgb, var(--panel-slider-fg) 18%, transparent) !important; - } - /* Active press: slightly larger / more opaque ring than passive + .panel-slider .bg-primary { + background-color: var(--panel-slider-fg) !important; + } + .panel-slider [data-slot="slider-thumb"] { + width: 0.875rem !important; + height: 0.875rem !important; + background-color: var(--panel-slider-fg) !important; + border-color: var(--panel-slider-fg) !important; + transform: none !important; + box-shadow: none !important; + transition: box-shadow 140ms ease-out !important; + } + .panel-slider [data-slot="slider-thumb"]:hover, + .panel-slider [data-slot="slider-thumb"]:focus-visible, + .panel-slider:active [data-slot="slider-thumb"] { + box-shadow: 0 0 0 10px + color-mix(in srgb, var(--panel-slider-fg) 18%, transparent) !important; + } + /* Active press: slightly larger / more opaque ring than passive hover, so the haptic reads stronger when the user is actively manipulating the value. */ - .panel-slider:active [data-slot="slider-thumb"] { - box-shadow: 0 0 0 12px - color-mix(in srgb, var(--panel-slider-fg) 22%, transparent) !important; - } + .panel-slider:active [data-slot="slider-thumb"] { + box-shadow: 0 0 0 12px + color-mix(in srgb, var(--panel-slider-fg) 22%, transparent) !important; + } - /* Inline numeric input — used for slider values and Context Length. + /* Inline numeric input — used for slider values and Context Length. Designed to read as *editable text* rather than a pill button so it doesn't mirror the Select/dropdown components on the panel. Default: transparent box, no border, no ring, sized by the @@ -642,443 +695,494 @@ Hover/focus: very light bg fade-in to signal editability — just enough to read as interactive, not enough to compete with the slider row's quiet aesthetic. */ - .panel-number-input { - @apply h-7 rounded-md border-0 bg-transparent px-1.5 text-right text-[13px]! font-medium tabular-nums text-nav-fg shadow-none transition-colors hover:bg-black/[0.04] focus:bg-black/[0.05] focus-visible:ring-0! focus-visible:outline-none md:text-[13px]!; - } - .dark .panel-number-input { - @apply hover:bg-white/[0.04] focus:bg-white/[0.06]; - } + .panel-number-input { + @apply h-7 rounded-md border-0 bg-transparent px-1.5 text-right text-[13px]! font-medium tabular-nums text-nav-fg shadow-none transition-colors hover:bg-black/[0.04] focus:bg-black/[0.05] focus-visible:ring-0! focus-visible:outline-none md:text-[13px]!; + } + .dark .panel-number-input { + @apply hover:bg-white/[0.04] focus:bg-white/[0.06]; + } - /* Switch — unsloth-green track when active, slider-gray thumb in + /* Switch — unsloth-green track when active, slider-gray thumb in both states. Keeps the on-state recognizable as an "engaged" primary control while the moving thumb sits in the same neutral palette as the panel sliders, tying every control in the panel to a single gray family. Unchecked track keeps shadcn's default bg-input for the standard off affordance. */ - .panel-switch[data-state="checked"] { - background-color: var(--primary) !important; - } - .panel-switch [data-slot="switch-thumb"] { - background-color: var(--panel-slider-fg) !important; - } - .panel-switch[data-state="checked"] [data-slot="switch-thumb"] { - background-color: #ffffff !important; - } + .panel-switch[data-state="checked"] { + background-color: var(--primary) !important; + } + .panel-switch [data-slot="switch-thumb"] { + background-color: var(--panel-slider-fg) !important; + } + .panel-switch[data-state="checked"] [data-slot="switch-thumb"] { + background-color: #ffffff !important; + } - /* Compact tooltip — small black pill with white text. Used for short + /* Compact tooltip — small black pill with white text. Used for short hover labels on chat-area icon buttons (Copy, Edit, Delete, Refresh, More, code-block actions) and the panel's info-icon hints. Corner radius is fixed at 8px so it tracks with the underlying icon button corners (also 8px) — keeps the tooltip visually anchored to its trigger rather than reading as a much larger floating pill. */ - .tooltip-compact { - @apply rounded-[10px] border-transparent bg-black px-2 py-1.5 text-[11px] font-medium leading-snug text-white shadow-md; - } + .tooltip-compact { + @apply rounded-[10px] border-transparent bg-black px-2 py-1.5 text-[11px] font-medium leading-snug text-white shadow-md; + } - /* Rich tooltip — used for the context-usage and token-counter + /* Rich tooltip — used for the context-usage and token-counter popups (multi-row metric breakdowns). Same black surface as the compact tooltips so chat-area popovers feel like one family. Corner radius matches the user-profile dropdown in the left sidebar (14px) so panel-level menu surfaces share a single roundness. Uses the heading font with tracking for the structured content. Same in both themes. */ - .tooltip-rich { - @apply rounded-[16px] border-transparent bg-black px-4 py-3 font-heading tracking-wide text-white shadow-[0_8px_28px_-6px_rgba(0,0,0,0.32)]; - } - /* Row-label color override — the popups reuse the existing prose + .tooltip-rich { + @apply rounded-[16px] border-transparent bg-black px-4 py-3 font-heading tracking-wide text-white shadow-[0_8px_28px_-6px_rgba(0,0,0,0.32)]; + } + /* Row-label color override — the popups reuse the existing prose `text-muted-foreground` class. Fixed light gray on the black surface keeps the label clearly legible while staying distinct from the values (full white). */ - .tooltip-rich .text-muted-foreground { - color: #b1b1b1 !important; - } - .tooltip-rich .border-border\/40 { - border-color: rgb(255 255 255 / 0.12) !important; - } + .tooltip-rich .text-muted-foreground { + color: #b1b1b1 !important; + } + .tooltip-rich .border-border\/40 { + border-color: rgb(255 255 255 / 0.12) !important; + } - .app-user-menu [data-slot="dropdown-menu-item"] { - height: 32px; - padding: 0 0.625rem !important; - gap: 8.5px !important; - border-radius: 10px; - font-weight: 500; - font-size: 14.5px; - line-height: 19px; - letter-spacing: 0.015em; - color: var(--nav-fg); - } - .dark .app-user-menu [data-slot="dropdown-menu-item"] { - letter-spacing: 0.03em; - } - .app-user-menu [data-slot="dropdown-menu-item"] svg { - width: 19px !important; - height: 19px !important; - flex-shrink: 0; - } - .app-user-menu [data-slot="dropdown-menu-item"]:focus { - background-color: var(--nav-surface-hover); - color: #000; - } - .dark .app-user-menu [data-slot="dropdown-menu-item"]:focus { - color: #fff; - } - .app-user-menu [data-slot="dropdown-menu-item"]:focus * { - color: #000 !important; - } - .dark .app-user-menu [data-slot="dropdown-menu-item"]:focus * { - color: #fff !important; - } + .app-user-menu [data-slot="dropdown-menu-item"] { + height: 32px; + padding: 0 0.625rem !important; + gap: 8.5px !important; + border-radius: 10px; + font-weight: 500; + font-size: 14.5px; + line-height: 19px; + letter-spacing: 0.015em; + color: var(--nav-fg); + } + .dark .app-user-menu [data-slot="dropdown-menu-item"] { + letter-spacing: 0.03em; + } + .app-user-menu [data-slot="dropdown-menu-item"] svg { + width: 19px !important; + height: 19px !important; + flex-shrink: 0; + } + .app-user-menu [data-slot="dropdown-menu-item"]:focus { + background-color: var(--nav-surface-hover); + color: #000; + } + .dark .app-user-menu [data-slot="dropdown-menu-item"]:focus { + color: #fff; + } + .app-user-menu [data-slot="dropdown-menu-item"]:focus * { + color: #000 !important; + } + .dark .app-user-menu [data-slot="dropdown-menu-item"]:focus * { + color: #fff !important; + } - .menu-flat-destructive { - --destructive: #dc4848; - } - .dark .menu-flat-destructive { - --destructive: #ed7878; - } - .app-user-menu [data-slot="dropdown-menu-item"][data-variant="destructive"], - .app-user-menu [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus { - color: var(--destructive); - } - .app-user-menu [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus { - background-color: color-mix(in oklab, var(--destructive) 10%, transparent); - } - .app-user-menu [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus * { - color: var(--destructive) !important; - } + .menu-flat-destructive { + --destructive: #dc4848; + } + .dark .menu-flat-destructive { + --destructive: #ed7878; + } + .app-user-menu [data-slot="dropdown-menu-item"][data-variant="destructive"], + .app-user-menu + [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus { + color: var(--destructive); + } + .app-user-menu + [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus { + background-color: color-mix(in oklab, var(--destructive) 10%, transparent); + } + .app-user-menu + [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus + * { + color: var(--destructive) !important; + } - /* Elevated surface shadow (use ring-* for borders) */ - .shadow-border { - --tw-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); - --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), - var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - } + /* Elevated surface shadow (use ring-* for borders) */ + .shadow-border { + --tw-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } - .dark .shadow-border { - --tw-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); - } + .dark .shadow-border { + --tw-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); + } - .menu-soft-surface, - .menu-soft-surface-up { - --menu-soft-edge: rgba(0, 0, 0, 0.14); - --menu-soft-shadow: rgba(0, 0, 0, 0.18); - --menu-soft-offset-y: 8px; - --menu-soft-blur: 28px; - --menu-soft-spread: -6px; - @apply bg-popover text-popover-foreground; - box-shadow: - inset 0 0 0 1px var(--menu-soft-edge), - 0 var(--menu-soft-offset-y) var(--menu-soft-blur) - var(--menu-soft-spread) var(--menu-soft-shadow); - } - .menu-soft-surface-up { - --menu-soft-offset-y: -6px; - --menu-soft-spread: -8px; - } - .dark .menu-soft-surface, - .dark .menu-soft-surface-up { - --menu-soft-edge: rgba(255, 255, 255, 0.07); - --menu-soft-shadow: rgba(0, 0, 0, 0.28); - } + .menu-soft-surface, + .menu-soft-surface-up { + --menu-soft-edge: rgba(0, 0, 0, 0.14); + --menu-soft-shadow: rgba(0, 0, 0, 0.18); + --menu-soft-offset-y: 8px; + --menu-soft-blur: 28px; + --menu-soft-spread: -6px; + @apply bg-popover text-popover-foreground; + box-shadow: inset 0 0 0 1px var(--menu-soft-edge), 0 + var(--menu-soft-offset-y) var(--menu-soft-blur) var(--menu-soft-spread) + var(--menu-soft-shadow); + } + .menu-soft-surface-up { + --menu-soft-offset-y: -6px; + --menu-soft-spread: -8px; + } + .dark .menu-soft-surface, + .dark .menu-soft-surface-up { + --menu-soft-edge: rgba(255, 255, 255, 0.07); + --menu-soft-shadow: rgba(0, 0, 0, 0.28); + } - .chat-composer-surface { - @apply relative flex w-full flex-col rounded-[24px] bg-background dark:bg-card px-1 pt-2 outline-none transition-shadow; - font-family: var(--font-sans); - background-clip: padding-box; - box-shadow: 0 2px 8px -2px rgba(27, 27, 31, 0.16); - } + .chat-composer-surface { + @apply relative flex w-full flex-col rounded-[32px] bg-white dark:bg-card px-3 py-3 outline-none transition-shadow; + font-family: var(--font-sans); + background-clip: padding-box; + box-shadow: 0px 2px 8px -2px rgba(0, 0, 0, 0.16); + } - .dark .chat-composer-surface { - background-color: #2a2a2c; - box-shadow: none; - } + .dark .chat-composer-surface { + background-color: #2a2a2c; + box-shadow: none; + } - .composer-pill-btn { - @apply flex cursor-pointer items-center gap-1.5 rounded-full px-1.5 py-1.5 text-[14px] font-medium text-muted-foreground/70 transition-colors hover:bg-primary/10 dark:hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-40; - } + .composer-pill-btn { + @apply flex h-6 cursor-pointer items-center gap-1 rounded-full pl-1 pr-2 py-0 text-[14px] font-medium leading-6 text-muted-foreground/75 transition-colors hover:bg-black/[0.06] dark:hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-40; + } - .composer-pill-btn[data-active="true"] { - color: var(--primary); - } + .composer-pill-btn:is(:hover, :focus-visible), + .composer-pill-btn[data-active="true"] { + background-color: rgba(0, 0, 0, 0.08); + color: var(--foreground); + } - .composer-input { - @apply mt-2 mb-1 mx-3 min-h-12 w-[calc(100%-1.5rem)] resize-none overflow-y-auto bg-transparent pl-2 pr-4 pt-2 pb-3 text-sm font-[450] outline-none placeholder:text-muted-foreground focus-visible:ring-0; - } + .dark .composer-pill-btn:is(:hover, :focus-visible), + .dark .composer-pill-btn[data-active="true"] { + background-color: rgba(255, 255, 255, 0.08); + color: var(--foreground); + } - .composer-action-wrapper { - @apply relative mx-2 mb-2 flex items-center justify-between; - } + .composer-pill-btn svg { + width: 16px !important; + height: 16px !important; + flex-shrink: 0; + } - .composer-footer-note { - @apply mt-1.5 text-center text-[11px] tracking-[0.04em] text-muted-foreground; - font-family: var(--font-sans); - } + .composer-pill-close { + display: none; + } - /* Pill composer; own classes so compare-mode keeps its stacked layout. */ - .unsloth-composer-surface { - @apply relative flex w-full flex-col rounded-[28px] bg-background dark:bg-card px-3 py-2.5 outline-none transition-shadow; - font-family: var(--font-sans); - background-clip: padding-box; - /* Light-mode elevation matches Gemini's search box (Lumi level-1): a soft, - diffuse ambient shadow rather than a tight drop shadow. */ - box-shadow: - 0 1px 2px 0 rgba(0, 0, 0, 0.04), - 0 4px 12px 0 rgba(0, 0, 0, 0.08), - 0 8px 24px 0 rgba(0, 0, 0, 0.06); - } + .composer-pill-btn[data-active="true"]:not(:disabled):is( + :hover, + :focus-visible + ) { + padding-right: 0.25rem; + } - .unsloth-composer-surface:focus-within { - box-shadow: - 0 1px 2px 0 rgba(0, 0, 0, 0.04), - 0 4px 12px 0 rgba(0, 0, 0, 0.08), - 0 8px 24px 0 rgba(0, 0, 0, 0.06); - } + .composer-pill-btn[data-active="true"]:not(:disabled):is( + :hover, + :focus-visible + ) + .composer-pill-close { + display: inline-flex; + } - .dark .unsloth-composer-surface { - background-color: #2a2a2c; - box-shadow: none; - } + .composer-input { + @apply mb-1 min-h-10 w-full resize-none overflow-y-auto bg-transparent px-1.5 py-2 text-[15px] font-[450] leading-6 outline-none placeholder:text-muted-foreground focus-visible:ring-0; + } - /* Keep the expand/collapse width swap instant. A transition on width (e.g. + .composer-action-wrapper { + @apply relative mt-1 flex items-center justify-between; + } + + .composer-footer-note { + @apply mt-1.5 text-center text-[11px] tracking-[0.04em] text-muted-foreground; + font-family: var(--font-sans); + } + + /* Pill composer; own classes so compare-mode keeps its stacked layout. */ + .unsloth-composer-surface { + @apply relative flex w-full flex-col rounded-[32px] bg-white dark:bg-card px-3 py-3 outline-none transition-shadow; + font-family: var(--font-sans); + background-clip: padding-box; + box-shadow: 0px 2px 8px -2px rgba(0, 0, 0, 0.16); + } + + .unsloth-composer-surface:focus-within { + box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.18); + } + + .dark .unsloth-composer-surface, + .dark .unsloth-composer-surface:focus-within { + background-color: #2a2a2c; + box-shadow: none; + } + + /* Keep the expand/collapse width swap instant. A transition on width (e.g. the reduced-motion blanket rule) makes getComputedStyle().width lag a frame, so autosize measures the stale width and leaves a stray blank row. */ - .unsloth-composer-line, - .unsloth-composer-line .unsloth-composer-input, - .unsloth-composer-left { - transition-property: none !important; - } + .unsloth-composer-line, + .unsloth-composer-line .unsloth-composer-input, + .unsloth-composer-left { + transition-property: none !important; + } - /* Composer row: one centered line when empty; two rows (input over controls) + /* Composer row: one centered line when empty; two rows (input over controls) when filled, so the textarea never remounts. */ - .unsloth-composer-line { - @apply flex w-full flex-wrap items-center gap-0.5 px-1; - } + .unsloth-composer-line { + @apply flex w-full flex-wrap items-center gap-0.5 px-0; + } - .unsloth-composer-left { - @apply flex shrink-0 items-center gap-0.5; - order: 1; - /* Pull the plus button closer to the composer edge. */ - margin-left: -0.375rem; - } + .unsloth-composer-left { + @apply flex shrink-0 items-center gap-0.5; + order: 1; + /* Pull the plus button closer to the composer edge. */ + margin-left: -0.25rem; + } - .unsloth-composer-line .unsloth-composer-input { - order: 2; - } + .unsloth-composer-line .unsloth-composer-input { + order: 2; + } - .unsloth-composer-line .aui-composer-action-wrapper { - order: 3; - margin-left: auto; - } + .unsloth-composer-line .aui-composer-action-wrapper { + order: 3; + margin-left: auto; + } - .unsloth-composer-line[data-expanded="true"] .unsloth-composer-input { - order: 1; - flex-basis: 100%; - width: 100%; - /* Sits close to the left edge, near the plus. */ - padding-left: 0.375rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - } + .unsloth-composer-line[data-expanded="true"] .unsloth-composer-input { + order: 1; + flex-basis: 100%; + width: 100%; + /* Sits close to the left edge, near the plus. */ + padding-left: 0.375rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } - .unsloth-composer-line[data-expanded="true"] .unsloth-composer-left { - order: 2; - } + .unsloth-composer-line[data-expanded="true"] .unsloth-composer-left { + order: 2; + } - /* Empty (placeholder shown): clamp back to one row. max-height beats the + /* Empty (placeholder shown): clamp back to one row. max-height beats the autosize textarea's inline !important height, so a cleared message leaves no stale tall box or stray scrollbar. */ - .unsloth-composer-input:placeholder-shown { - max-height: 40px !important; - overflow-y: hidden !important; - } + .unsloth-composer-input:placeholder-shown { + max-height: 40px !important; + overflow-y: hidden !important; + } - .unsloth-composer-input { - @apply min-h-[40px] min-w-0 flex-1 resize-none overflow-y-auto bg-transparent pl-0.5 pr-2 py-2 text-[15px] font-[450] leading-6 outline-none placeholder:text-muted-foreground focus-visible:ring-0; - } + .unsloth-composer-input { + @apply min-h-[40px] min-w-0 flex-1 resize-none overflow-y-auto bg-transparent pl-0.5 pr-2 py-2 text-[15px] font-[450] leading-6 outline-none placeholder:text-muted-foreground focus-visible:ring-0; + } - .unsloth-composer-plus { - @apply flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full text-foreground transition-colors hover:bg-muted-foreground/15 disabled:cursor-not-allowed disabled:opacity-40; - } + .unsloth-composer-plus { + @apply flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-foreground transition-colors hover:bg-muted-foreground/15 disabled:cursor-not-allowed disabled:opacity-40; + } - .unsloth-composer-plus[data-state="open"] { - @apply bg-muted-foreground/15; - /* Radix's modal menu sets body pointer-events:none; re-enable on the open + .unsloth-composer-plus svg { + transition: transform var(--duration-normal) ease-in-out; + transform-origin: center; + } + + .unsloth-composer-plus[data-state="open"] { + @apply bg-muted-foreground/15; + /* Radix's modal menu sets body pointer-events:none; re-enable on the open trigger so the cursor and click-to-close work. */ - pointer-events: auto; - cursor: pointer; - } + pointer-events: auto; + cursor: pointer; + } - /* Set Hellix explicitly; .aui-thread-root resets --font-heading to sans. */ - .unsloth-welcome-title { - font-family: "Hellix", "Space Grotesk Variable", var(--font-sans); - font-weight: 500; - } + .unsloth-composer-plus[data-state="open"] svg { + transform: rotate(35deg); + } - /* Right-side Thinking pill (toggle or dropdown). */ - .unsloth-thinking-pill { - @apply inline-flex shrink-0 cursor-pointer items-center gap-1 rounded-full px-2.5 py-1.5 text-[14px] font-medium text-muted-foreground transition-colors hover:bg-muted-foreground/10 disabled:cursor-not-allowed disabled:opacity-40; - } + /* Set Hellix explicitly; .aui-thread-root resets --font-heading to sans. */ + .unsloth-welcome-title { + font-family: "Hellix", "Space Grotesk Variable", var(--font-sans); + font-weight: 500; + } - .unsloth-thinking-pill[data-active="true"] { - color: var(--primary); - } + /* Right-side Thinking pill (toggle or dropdown). */ + .unsloth-thinking-pill { + @apply inline-flex h-6 shrink-0 cursor-pointer items-center gap-1 rounded-full px-2 py-0 text-[14px] font-medium leading-6 text-muted-foreground transition-colors hover:bg-black/[0.06] dark:hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-40; + } - .unsloth-thinking-pill[data-state="open"] { - @apply bg-muted-foreground/10; - /* See .unsloth-composer-plus: re-enable pointer-events on the open trigger. */ - pointer-events: auto; - cursor: pointer; - } + .unsloth-thinking-pill[data-active="true"], + .unsloth-thinking-pill[data-state="open"] { + background-color: rgba(0, 0, 0, 0.08); + color: var(--foreground); + /* See .unsloth-composer-plus: re-enable pointer-events on the open trigger. */ + pointer-events: auto; + cursor: pointer; + } - /* Smaller tick for selected Thinking options. */ - .unsloth-tick { - width: 0.8rem !important; - height: 0.8rem !important; - } + .dark .unsloth-thinking-pill[data-active="true"], + .dark .unsloth-thinking-pill[data-state="open"] { + background-color: rgba(255, 255, 255, 0.08); + color: var(--foreground); + } - /* Soft elevation; [data-slot] outranks the component ring-1, dropping the border. */ - .unsloth-plus-menu[data-slot] { - /* Pin radius so dark matches light (rounded-lg resolves smaller in dark). */ - border-radius: 18px; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - box-shadow: - 0 1px 2px oklch(0 0 0 / 0.04), - 0 6px 18px oklch(0 0 0 / 0.08); - } + /* Smaller tick for selected Thinking options. */ + .unsloth-tick { + width: 0.8rem !important; + height: 0.8rem !important; + } - .dark .unsloth-plus-menu[data-slot] { - background-color: #2a2a2c; - /* Shadow tinted to the page bg so it blends, not a dark halo. */ - box-shadow: 0 4px 14px var(--background); - } + /* Soft elevation; [data-slot] outranks the component ring-1, dropping the border. */ + .unsloth-plus-menu[data-slot] { + /* Pin radius so dark matches light (rounded-lg resolves smaller in dark). */ + border-radius: 18px; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + box-shadow: 0 1px 2px oklch(0 0 0 / 0.04), 0 6px 18px oklch(0 0 0 / 0.08); + } - /* Compact items; also applied to portaled sub-content. */ - .unsloth-plus-menu :is( - [data-slot="dropdown-menu-item"], - [data-slot="dropdown-menu-sub-trigger"] - ) { - @apply gap-3 pl-4 pr-3 py-2 text-[14px]; - cursor: pointer; - /* Pin hover-box radius so dark matches light (same as the container). */ - border-radius: 1.1rem; - } + .dark .unsloth-plus-menu[data-slot] { + background-color: #2a2a2c; + /* Shadow tinted to the page bg so it blends, not a dark halo. */ + box-shadow: 0 4px 14px var(--background); + } - .unsloth-plus-menu [data-slot="dropdown-menu-label"] { - @apply pl-4 pr-3 py-1.5 text-[12px]; - } + /* Compact items; also applied to portaled sub-content. */ + .unsloth-plus-menu + :is( + [data-slot="dropdown-menu-item"], + [data-slot="dropdown-menu-sub-trigger"] + ) { + @apply gap-3 pl-4 pr-3 py-2 text-[14px]; + cursor: pointer; + /* Pin hover-box radius so dark matches light (same as the container). */ + border-radius: 1.1rem; + } - /* Dark hover: the accent nearly matches the surface, so use a clear overlay. */ - .dark .unsloth-plus-menu :is( - [data-slot="dropdown-menu-item"], - [data-slot="dropdown-menu-sub-trigger"] - ):is(:hover, :focus, :focus-visible, [data-highlighted], [data-state="open"]) { - background-color: rgba(255, 255, 255, 0.08) !important; - } + .unsloth-plus-menu [data-slot="dropdown-menu-label"] { + @apply pl-4 pr-3 py-1.5 text-[12px]; + } - .unsloth-plus-menu :is( - [data-slot="dropdown-menu-item"], - [data-slot="dropdown-menu-sub-trigger"] - ) - svg { - width: 1.05rem; - height: 1.05rem; - } + /* Dark hover: the accent nearly matches the surface, so use a clear overlay. */ + .dark + .unsloth-plus-menu + :is( + [data-slot="dropdown-menu-item"], + [data-slot="dropdown-menu-sub-trigger"] + ):is( + :hover, + :focus, + :focus-visible, + [data-highlighted], + [data-state="open"] + ) { + background-color: rgba(255, 255, 255, 0.08) !important; + } - /* Thinking menu: tighter gap; nowrap keeps "Preserve thinking" on one line + .unsloth-plus-menu + :is( + [data-slot="dropdown-menu-item"], + [data-slot="dropdown-menu-sub-trigger"] + ) + svg { + width: 1.05rem; + height: 1.05rem; + } + + /* Thinking menu: tighter gap; nowrap keeps "Preserve thinking" on one line so the menu sizes to its content. */ - .unsloth-thinking-menu :is( - [data-slot="dropdown-menu-item"], - [data-slot="dropdown-menu-sub-trigger"] - ) { - @apply gap-1.5 pl-2.5 pr-2.5; - white-space: nowrap; - } + .unsloth-thinking-menu + :is( + [data-slot="dropdown-menu-item"], + [data-slot="dropdown-menu-sub-trigger"] + ) { + @apply gap-1.5 pl-2.5 pr-2.5; + white-space: nowrap; + } - /* Fine-tuning Studio: equal default height, expandable when needed (md+) */ - .min-h-studio-config-column { - @apply md:min-h-[470px]; - } + /* Fine-tuning Studio: equal default height, expandable when needed (md+) */ + .min-h-studio-config-column { + @apply md:min-h-[470px]; + } - .h-studio-config-column { - @apply md:h-[470px]; - } + .h-studio-config-column { + @apply md:h-[470px]; + } - [data-streamdown="unordered-list"] { - list-style-type: disc; - list-style-position: outside; - padding-left: 1.25rem; - margin-block: 0.5rem; - } + [data-streamdown="unordered-list"] { + list-style-type: disc; + list-style-position: outside; + padding-left: 1.25rem; + margin-block: 0.5rem; + } - [data-streamdown="ordered-list"] { - list-style-type: decimal; - list-style-position: outside; - padding-left: 1.25rem; - margin-block: 0.5rem; - } + [data-streamdown="ordered-list"] { + list-style-type: decimal; + list-style-position: outside; + padding-left: 1.25rem; + margin-block: 0.5rem; + } - [data-streamdown="list-item"] { - display: list-item; - } + [data-streamdown="list-item"] { + display: list-item; + } - /* Flatten code blocks: single border, language label, then code directly */ - [data-streamdown="code-block-body"] { - border: none !important; - border-radius: 0 !important; - background: transparent !important; - padding: 0 !important; - } + /* Flatten code blocks: single border, language label, then code directly */ + [data-streamdown="code-block-body"] { + border: none !important; + border-radius: 0 !important; + background: transparent !important; + padding: 0 !important; + } - [data-streamdown="code-block"] { - gap: 0.25rem; - padding: 0.75rem 1rem; - border-radius: 1.5rem; - /* Wide lines must scroll inside the thread column, not widen past the composer (flex min-width:auto). */ - max-width: 100%; - min-width: 0; - overflow-x: auto; - } + [data-streamdown="code-block"] { + gap: 0.25rem; + padding: 0.75rem 1rem; + border-radius: 1.5rem; + /* Wide lines must scroll inside the thread column, not widen past the composer (flex min-width:auto). */ + max-width: 100%; + min-width: 0; + overflow-x: auto; + } - [data-streamdown="code-block-header"] { - padding-left: 0; - } + [data-streamdown="code-block-header"] { + padding-left: 0; + } - .aui-thread-root [data-streamdown="code-block"] code > span::before { - content: none !important; - display: none !important; - margin: 0 !important; - width: 0 !important; - } + .aui-thread-root [data-streamdown="code-block"] code > span::before { + content: none !important; + display: none !important; + margin: 0 !important; + width: 0 !important; + } - /* Chat thread: code slightly smaller by default; step up when the thread column is wide. */ - .aui-thread-root [data-streamdown="code-block"] { - font-size: 0.8125rem; - line-height: 1.55; - } + /* Chat thread: code slightly smaller by default; step up when the thread column is wide. */ + .aui-thread-root [data-streamdown="code-block"] { + font-size: 0.8125rem; + line-height: 1.55; + } - .aui-thread-root [data-streamdown="code-block-header"] { - font-size: 0.6875rem; - } + .aui-thread-root [data-streamdown="code-block-header"] { + font-size: 0.6875rem; + } - @container (min-width: 36rem) { - .aui-thread-root [data-streamdown="code-block"] { - font-size: 0.875rem; - } + @container (min-width: 36rem) { + .aui-thread-root [data-streamdown="code-block"] { + font-size: 0.875rem; + } - .aui-thread-root [data-streamdown="code-block-header"] { - font-size: 0.75rem; - } - } + .aui-thread-root [data-streamdown="code-block-header"] { + font-size: 0.75rem; + } + } - /* Chat: use the app sans stack for UI + prose. */ - .aui-thread-root { - --font-heading: var(--font-sans); - font-family: var(--font-sans); - } + /* Chat: use the app sans stack for UI + prose. */ + .aui-thread-root { + --font-heading: var(--font-sans); + font-family: var(--font-sans); + } - /* Normalize the trailing margin of the last element inside an + /* Normalize the trailing margin of the last element inside an assistant message so the gap above the action bar is the same regardless of whether the response ends with a paragraph (margin-bottom: 0 by Tailwind preflight) or a streamdown block @@ -1090,16 +1194,31 @@ walks that depth without using a generic descendant `:last-child` (which would also zero last-paragraph-in-list margins). The visible gap is then driven solely by the footer's own `mt-*`. */ - .aui-assistant-message-content > *:last-child, - .aui-assistant-message-content > *:last-child > *:last-child, - .aui-assistant-message-content > *:last-child > *:last-child > *:last-child, - .aui-assistant-message-content > *:last-child > *:last-child > *:last-child > *:last-child, - .aui-assistant-message-content > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child, - .aui-assistant-message-content > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child { - margin-bottom: 0 !important; - } + .aui-assistant-message-content > *:last-child, + .aui-assistant-message-content > *:last-child > *:last-child, + .aui-assistant-message-content > *:last-child > *:last-child > *:last-child, + .aui-assistant-message-content + > *:last-child + > *:last-child + > *:last-child + > *:last-child, + .aui-assistant-message-content + > *:last-child + > *:last-child + > *:last-child + > *:last-child + > *:last-child, + .aui-assistant-message-content + > *:last-child + > *:last-child + > *:last-child + > *:last-child + > *:last-child + > *:last-child { + margin-bottom: 0 !important; + } - /* The streamdown code-block wrapper carries `my-4` (16px top + 16px + /* The streamdown code-block wrapper carries `my-4` (16px top + 16px bottom margin). The bottom margin is what stretches the gap between the code-block box and the action-bar below it on a trailing code block. We zero `margin-bottom` on every code block @@ -1113,36 +1232,42 @@ matching a text-trailing message. The wrapper's own `padding-bottom` is preserved, so the last line of code keeps its natural breathing room inside the box. */ - .aui-assistant-message-content [data-streamdown="code-block"] { - margin-bottom: 0 !important; - } + .aui-assistant-message-content [data-streamdown="code-block"] { + margin-bottom: 0 !important; + } - /* Keep monospace for code fences and inline code (not KaTeX). */ - .aui-thread-root [data-streamdown="code-block"] pre, - .aui-thread-root [data-streamdown="code-block"] code { - font-family: "Fira Code", ui-monospace, monospace; - } + /* Keep monospace for code fences and inline code (not KaTeX). */ + .aui-thread-root [data-streamdown="code-block"] pre, + .aui-thread-root [data-streamdown="code-block"] code { + font-family: "Fira Code", ui-monospace, monospace; + } - .aui-thread-root :where(p, li, td, th, blockquote, h1, h2, h3, h4, h5, h6) code { - font-family: "Fira Code", ui-monospace, monospace; - } + .aui-thread-root + :where(p, li, td, th, blockquote, h1, h2, h3, h4, h5, h6) + code { + font-family: "Fira Code", ui-monospace, monospace; + } - /* Align fenced code blocks with the main chat column even when nested in lists. */ - .aui-thread-root [data-streamdown="list-item"] > [data-streamdown="code-block"], - .aui-thread-root [data-streamdown="list-item"] [data-streamdown="code-block"] { - margin-left: -1.25rem; - width: calc(100% + 1.25rem); - max-width: calc(100% + 1.25rem); - } + /* Align fenced code blocks with the main chat column even when nested in lists. */ + .aui-thread-root + [data-streamdown="list-item"] + > [data-streamdown="code-block"], + .aui-thread-root + [data-streamdown="list-item"] + [data-streamdown="code-block"] { + margin-left: -1.25rem; + width: calc(100% + 1.25rem); + max-width: calc(100% + 1.25rem); + } - .dark .aui-thread-root [data-streamdown="code-block"] { - /* Streamdown `pre` uses `dark:bg-[var(--shiki-dark-bg,...)]`; keep one surface on the outer shell. */ - --shiki-dark-bg: transparent; - background: var(--color-code-block); - border: 1px solid oklch(1 0 0 / 0.08); - } + .dark .aui-thread-root [data-streamdown="code-block"] { + /* Streamdown `pre` uses `dark:bg-[var(--shiki-dark-bg,...)]`; keep one surface on the outer shell. */ + --shiki-dark-bg: transparent; + background: var(--color-code-block); + border: 1px solid oklch(1 0 0 / 0.08); + } - /* Streamdown code-block stability hardening. + /* Streamdown code-block stability hardening. * * Two streamdown internals cause a visible "reload"-style flicker on * trailing code blocks the moment streaming ends. Both are addressable @@ -1165,28 +1290,28 @@ * whole block at once — exactly the visual that reads as the chat * area "reloading for a frame." We disable the animation only * inside code blocks; prose token fade-in elsewhere is untouched. */ - .aui-thread-root [data-streamdown="code-block"] { - content-visibility: visible !important; - contain-intrinsic-size: none !important; - } - .aui-thread-root [data-streamdown="code-block"] [data-sd-animate] { - animation: none !important; - } + .aui-thread-root [data-streamdown="code-block"] { + content-visibility: visible !important; + contain-intrinsic-size: none !important; + } + .aui-thread-root [data-streamdown="code-block"] [data-sd-animate] { + animation: none !important; + } } /* No border line; same drop shadow as the composer (.unsloth-composer-surface). !important because Sonner injects its base rules at runtime. */ -[data-sonner-toast][data-styled='true'] { - padding: 10px 16px !important; - box-shadow: 0 2px 8px -2px rgba(27, 27, 31, 0.16) !important; - /* Pin to the light --radius so dark mode (smaller --radius) matches. */ - border-radius: 1.1rem !important; +[data-sonner-toast][data-styled="true"] { + padding: 10px 16px !important; + box-shadow: 0 2px 8px -2px rgba(27, 27, 31, 0.16) !important; + /* Pin to the light --radius so dark mode (smaller --radius) matches. */ + border-radius: 1.1rem !important; } /* Match the composer (.unsloth-composer-surface) in dark mode: same surface color, no shadow. */ -.dark [data-sonner-toast][data-styled='true'] { - background-color: #2a2a2c !important; - box-shadow: none !important; +.dark [data-sonner-toast][data-styled="true"] { + background-color: #2a2a2c !important; + box-shadow: none !important; } /* Selectable toast text; non-selectable toast buttons. */ @@ -1196,8 +1321,8 @@ [data-sonner-toast] [data-description], [data-sonner-toast] p, [data-sonner-toast] span { - -webkit-user-select: text; - user-select: text; + -webkit-user-select: text; + user-select: text; } /* Text cursor only on actual text nodes, so the toast container does @@ -1206,79 +1331,79 @@ [data-sonner-toast] [data-description], [data-sonner-toast] p, [data-sonner-toast] span { - cursor: text; + cursor: text; } [data-sonner-toast] button, [data-sonner-toast] [data-button], [data-sonner-toast] [data-cancel], [data-sonner-toast] [data-close-button] { - -webkit-user-select: none; - user-select: none; - cursor: pointer; + -webkit-user-select: none; + user-select: none; + cursor: pointer; } /* Flat scrollbar chrome */ * { - scrollbar-width: thin; - scrollbar-color: oklch(0.5 0 0 / 0.54) transparent; + scrollbar-width: thin; + scrollbar-color: oklch(0.5 0 0 / 0.54) transparent; } .dark * { - scrollbar-color: oklch(0.67 0 0 / 0.5) transparent; + scrollbar-color: oklch(0.67 0 0 / 0.5) transparent; } /* Webkit (Chrome, Safari, Edge) */ ::-webkit-scrollbar { - width: 8px; - height: 8px; - background: transparent; - border: none; - box-shadow: none; + width: 8px; + height: 8px; + background: transparent; + border: none; + box-shadow: none; } ::-webkit-scrollbar-track { - background: transparent; - border: none; - box-shadow: none; + background: transparent; + border: none; + box-shadow: none; } ::-webkit-scrollbar-track-piece { - background: transparent; - border: none; - box-shadow: none; + background: transparent; + border: none; + box-shadow: none; } ::-webkit-scrollbar-thumb { - background: oklch(0.5 0 0 / 0.54); - border-radius: 9999px; - border: none; - box-shadow: none; + background: oklch(0.5 0 0 / 0.54); + border-radius: 9999px; + border: none; + box-shadow: none; } ::-webkit-scrollbar-corner { - background: transparent; - border: none; - box-shadow: none; + background: transparent; + border: none; + box-shadow: none; } ::-webkit-scrollbar-button { - display: none; - width: 0; - height: 0; + display: none; + width: 0; + height: 0; } .dark *::-webkit-scrollbar-thumb { - background: oklch(0.67 0 0 / 0.5); + background: oklch(0.67 0 0 / 0.5); } /* Chat viewport: solid track matching sidebar so the scrollbar reads as a full-height rail flush to the right edge, without a separate decorative strip. */ .aui-thread-viewport { - scrollbar-color: oklch(0.5 0 0 / 0.54) var(--sidebar); - /* Reserve scrollbar space always so absolute-positioned overlays (topbar) + scrollbar-color: oklch(0.5 0 0 / 0.54) var(--sidebar); + /* Reserve scrollbar space always so absolute-positioned overlays (topbar) can stop flush with the gutter edge without covering the scrollbar. */ - scrollbar-gutter: stable; + scrollbar-gutter: stable; } /* Marker class applied only to actual streaming-thread viewports @@ -1288,7 +1413,7 @@ areas; the stabilizer must only attach to viewports the useIntentAwareAutoScroll hook actually drives. */ .aui-stream-viewport { - /* Scroll stabilizer: compensates for transient scrollHeight shrinks + /* Scroll stabilizer: compensates for transient scrollHeight shrinks (most visibly, shiki re-highlighting a trailing code block the instant streaming ends). The useIntentAwareAutoScroll hook sets this variable to the exact pixel amount of any content shrink @@ -1297,130 +1422,130 @@ so no jump is ever painted. Released back to 0 as content genuinely grows past its prior high-water mark, and on user detach so the bottom stays flush when they come back. */ - padding-bottom: var(--aui-scroll-stabilizer, 0px); + padding-bottom: var(--aui-scroll-stabilizer, 0px); } .dark .aui-thread-viewport { - scrollbar-color: oklch(0.72 0 0 / 0.25) #23252a; + scrollbar-color: oklch(0.72 0 0 / 0.25) #23252a; } .dark .aui-thread-viewport::-webkit-scrollbar-thumb { - background: oklch(0.72 0 0 / 0.25); + background: oklch(0.72 0 0 / 0.25); } .aui-thread-viewport::-webkit-scrollbar-track { - background: var(--sidebar); + background: var(--sidebar); } .dark .aui-thread-viewport::-webkit-scrollbar-track { - background: #23252a; + background: #23252a; } [data-sidebar="content"] { - scrollbar-color: oklch(0.5 0 0 / 0.22) var(--sidebar); + scrollbar-color: oklch(0.5 0 0 / 0.22) var(--sidebar); } .dark [data-sidebar="content"] { - scrollbar-color: oklch(0.72 0 0 / 0.25) var(--sidebar); + scrollbar-color: oklch(0.72 0 0 / 0.25) var(--sidebar); } [data-sidebar="content"]::-webkit-scrollbar-track { - background: var(--sidebar); + background: var(--sidebar); } [data-sidebar="content"]::-webkit-scrollbar-thumb { - background: oklch(0.5 0 0 / 0.22); + background: oklch(0.5 0 0 / 0.22); } .dark [data-sidebar="content"]::-webkit-scrollbar-thumb { - background: oklch(0.72 0 0 / 0.25); + background: oklch(0.72 0 0 / 0.25); } /*---break---*/ @layer base { - * { - @apply border-border outline-ring/50; - } + * { + @apply border-border outline-ring/50; + } - body { - @apply bg-background text-foreground; - } + body { + @apply bg-background text-foreground; + } } ::view-transition-old(root), ::view-transition-new(root) { - animation: none; - mix-blend-mode: normal; + animation: none; + mix-blend-mode: normal; } /* Override sonner top: 0 and pin to theme tokens (--gray2 hover ignores data-sonner-theme). */ [data-sonner-toast][data-styled="true"] [data-close-button] { - top: 8px !important; - background: var(--popover) !important; - color: var(--popover-foreground) !important; - border-color: transparent !important; + top: 8px !important; + background: var(--popover) !important; + color: var(--popover-foreground) !important; + border-color: transparent !important; } /* Keep the (borderless) close button blended with the dark toast surface. */ .dark [data-sonner-toast][data-styled="true"] [data-close-button] { - background: #2a2a2c !important; + background: #2a2a2c !important; } [data-sonner-toast][data-styled="true"] [data-close-button] svg { - stroke-width: 2.25; + stroke-width: 2.25; } [data-sonner-toast][data-styled="true"]:hover [data-close-button]:hover { - background: var(--muted) !important; - color: var(--popover-foreground) !important; - border-color: transparent !important; + background: var(--muted) !important; + color: var(--popover-foreground) !important; + border-color: transparent !important; } .generated-image-loading-card { - position: relative; - overflow: hidden; - contain: paint; + position: relative; + overflow: hidden; + contain: paint; } .generated-image-loading-wave { - position: relative; - display: grid; - grid-template-columns: repeat(8, minmax(0, 1fr)); - gap: 14px; - width: min(66%, 18rem); - padding: 1.5rem; - border-radius: 1.5rem; + position: relative; + display: grid; + grid-template-columns: repeat(8, minmax(0, 1fr)); + gap: 14px; + width: min(66%, 18rem); + padding: 1.5rem; + border-radius: 1.5rem; } .generated-image-loading-dot { - width: 7px; - height: 7px; - border-radius: 9999px; - background: color-mix(in oklch, var(--muted-foreground) 82%, var(--primary)); - opacity: 0.12; - transform: translate3d(0, 4px, 0) scale(0.72); - animation: generated-image-dot-wave 1850ms var(--ease-out-quart) infinite; - animation-delay: calc((var(--dot-row) * 72ms) + (var(--dot-col) * 72ms)); - will-change: transform, opacity; + width: 7px; + height: 7px; + border-radius: 9999px; + background: color-mix(in oklch, var(--muted-foreground) 82%, var(--primary)); + opacity: 0.12; + transform: translate3d(0, 4px, 0) scale(0.72); + animation: generated-image-dot-wave 1850ms var(--ease-out-quart) infinite; + animation-delay: calc((var(--dot-row) * 72ms) + (var(--dot-col) * 72ms)); + will-change: transform, opacity; } @keyframes generated-image-dot-wave { - 0%, - 22%, - 100% { - opacity: 0.1; - transform: translate3d(0, 4px, 0) scale(0.72); - } + 0%, + 22%, + 100% { + opacity: 0.1; + transform: translate3d(0, 4px, 0) scale(0.72); + } - 46% { - opacity: 0.46; - transform: translate3d(0, -3px, 0) scale(0.96); - } + 46% { + opacity: 0.46; + transform: translate3d(0, -3px, 0) scale(0.96); + } - 66% { - opacity: 0.2; - transform: translate3d(0, 0, 0) scale(0.82); - } + 66% { + opacity: 0.2; + transform: translate3d(0, 0, 0) scale(0.82); + } } /* @@ -1439,22 +1564,22 @@ * so they keep animating. */ @media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behavior: auto !important; - } + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } - .animate-spin { - animation-duration: 1.5s !important; - animation-iteration-count: infinite !important; - } + .animate-spin { + animation-duration: 1.5s !important; + animation-iteration-count: infinite !important; + } - .generated-image-loading-dot { - animation-duration: 1850ms !important; - animation-iteration-count: infinite !important; - } + .generated-image-loading-dot { + animation-duration: 1850ms !important; + animation-iteration-count: infinite !important; + } }