@import "tailwindcss"; :root { --background: #ffffff; --foreground: #171717; /* Threads-panel theme-map — values pulled verbatim from CopilotKit's V2 design system (the same one this example's CopilotSidebar renders with; see @copilotkit/react-core/src/v2/styles/globals.css). The drawer is a left-side companion to that LIGHT sidebar, so it inherits the sidebar's exact neutral-gray palette, charcoal "primary" (NOT a brand accent — the sidebar's primary buttons are near-black), and 0.625rem radius scale. This keeps the threads panel reading as one product with the chat. */ --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); /* Match the V2 sidebar's radius scale exactly (--radius: 0.625rem there). */ --radius: 0.625rem; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); /* This example loads no custom web font — its body uses the system Arial stack — so the drawer follows the same stack (and a system monospace for the locked-state command well). */ --font-body: Arial, Helvetica, sans-serif; --font-code: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; } @media (prefers-color-scheme: dark) { :root { --background: #0a0a0a; --foreground: #ededed; } } /* This example's CopilotSidebar (CopilotKit's V2 chat) stays LIGHT regardless of the OS color scheme, so the threads panel is held light too — otherwise it would clash with the sidebar it sits beside. The panel reads --foreground for its titles/body text, which the dark-mode block above flips. The demo content (CopilotSidebar + ProverbsCard) uses its own colors, not these tokens, so re-pinning a stable light foreground/background on the threads layout wrapper keeps the panel readable without affecting anything else. The confirm dialog renders in a portal on , so re-pin there as well. Values mirror the V2 light theme (oklch(0.145 0 0) / oklch(1 0 0)). */ .threadsLayout, body > [role="presentation"] { --foreground: oklch(0.145 0 0); --background: oklch(1 0 0); } body { background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; } body, html { height: 100%; }