@import "tailwindcss";
@import "@copilotkit/react-core/v2/styles.css";
@custom-variant dark (&:where(.dark, .dark *));
/* Map the CSS variables declared on :root below into Tailwind v4 theme tokens
* so utilities like `bg-background`, `text-foreground`, `bg-muted`,
* `border-border`, etc. actually generate CSS. Without this block the
* shadcn / AI Elements / prompt-kit primitives fall back to no styling. */
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--card);
--color-popover-foreground: var(--card-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-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
}
:root {
--copilot-kit-background-color: #ffff;
--copilot-kit-primary-color: #0d6e3f;
--copilot-kit-response-button-background-color: #f5f5f3;
--copilot-kit-response-button-color: #1a1a18;
--background: #ffff;
--foreground: #1a1a18;
--card: #ffffff;
--card-foreground: #1a1a18;
--primary: #1a1a18;
--primary-foreground: #ffffff;
--secondary: #ededf5;
--secondary-foreground: #1a1a18;
--muted: #ededf5;
--muted-foreground: #57575b;
--accent: #eee6fe;
--accent-foreground: #1a1a18;
--destructive: #fa5f67;
--destructive-foreground: #ffffff;
--border: #dbdbe5;
--input: #dbdbe5;
--ring: #bec2ff;
--radius: 0.75rem;
}
:root.dark,
.dark {
--background: #0a0a0a;
--foreground: #fafafa;
--card: #191a1e;
--card-foreground: #fafafa;
--primary: #fafafa;
--primary-foreground: #1a1a18;
--secondary: #242529;
--secondary-foreground: #fafafa;
--muted: #242529;
--muted-foreground: #adadb2;
--accent: #303136;
--accent-foreground: #fafafa;
--destructive: #fa5f67;
--destructive-foreground: #ffffff;
--border: #303136;
--input: #303136;
--ring: #bec2ff;
}
* {
box-sizing: border-box;
}
html {
height: 100%;
width: 100%;
overflow: hidden;
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--background);
color: var(--foreground);
}
/* `body` deliberately does NOT have `width: 100%`. Letting it auto-size
* lets shrink the document via `margin-inline-end` so
* the sidebar pushes the page content instead of overlapping it. */
body {
height: 100%;
overflow: hidden;
background: var(--background);
color: var(--foreground);
}
/* When a Radix overlay (Select / Dialog / Popover) opens, react-remove-scroll
* adds `body[data-scroll-locked]` with `padding-right` equal to what it
* thinks is the scrollbar width. Because our uses `margin-inline-end`
* to make room for , the lib mis-detects the sidebar
* width as scrollbar width and injects a matching padding-right, which
* shrinks the page on every dropdown open. We have no real scrollbar
* (`overflow: hidden` above) so the compensation is unnecessary — neutralize
* it here. */
body[data-scroll-locked] {
padding-right: 0 !important;
}
.demo-card {
display: block;
padding: 1rem 1.125rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
text-decoration: none;
color: inherit;
transition:
transform 120ms ease,
border-color 120ms ease,
box-shadow 120ms ease,
background 120ms ease;
}
.demo-card:hover {
border-color: color-mix(in oklab, var(--ring) 70%, var(--border));
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 4px 16px rgba(0, 0, 0, 0.04);
transform: translateY(-1px);
background: var(--card);
}
.demo-card:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 2px;
}
/* Slot Atlas: each marker shows its label only when the cursor is on THAT
* marker, not on a descendant. Markers nest (welcomeScreen wraps the input
* and suggestions, each of which is its own marker), so a plain
* `:hover .slot-label { opacity: 1 }` would light up every nested label as
* soon as the cursor entered the outermost marker. The `:not(:has(...))`
* predicate excludes the case where a descendant marker is also hovered. */
.slot-marker:hover:not(:has(.slot-marker:hover)) > .slot-label {
opacity: 1;
}