@q9labsai/chalk-ui 4.0.0

package/dist/styles.css

@@ -0,0 +1,1461 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+/* =============================================================================
+   Tailwind Theme - Maps CSS variables to Tailwind colors
+   ============================================================================= */
+
+@theme inline {
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --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-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-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);
+  --radius-2xl: calc(var(--radius) + 8px);
+}
+
+/* =============================================================================
+   Chalk design tokens - scoped to [data-chalk] containers
+   ============================================================================= */
+
+[data-chalk] {
+  --background: #ffffff;
+  --foreground: #0f1115;
+  --card: #ffffff;
+  --card-foreground: #0f1115;
+  --popover: #ffffff;
+  --popover-foreground: #0f1115;
+  --primary: #0f1115;
+  --primary-foreground: #ffffff;
+  --secondary: #f4f5f3;
+  --secondary-foreground: #0f1115;
+  --muted: #f4f5f3;
+  --muted-foreground: #4b5563;
+  --accent: #eaf4fa;
+  --accent-foreground: #2f7da0;
+  --destructive: #c05151;
+  --destructive-foreground: #ffffff;
+  --success: #3e7647;
+  --success-foreground: #ffffff;
+  --warning: #e2c25f;
+  --warning-foreground: #0f1115;
+  --border: #e7e9ec;
+  --input: #d5d9de;
+  --ring: #0f1115;
+  --radius: 0.5rem;
+
+  --chalk-paper: #ffffff;
+  --chalk-ink: #0f1115;
+  --chalk-ink-2: #4b5563;
+  --chalk-ink-3: #9aa1ab;
+  --chalk-line: #e7e9ec;
+  --chalk-line-strong: #d5d9de;
+  --chalk-wash-blue: #eaf4fa;
+  --chalk-highlight: #c8e4f4;
+  --chalk-green: #8fbf87;
+  --chalk-green-deep: #3e7647;
+  --chalk-yellow: #e2c25f;
+  --chalk-blue: #7fc0d8;
+  --chalk-blue-deep: #2f7da0;
+  --chalk-pink: #dc9a9a;
+  --chalk-pink-light: #f8caca;
+  --chalk-font-family: "Figtree", "Plus Jakarta Sans", "Avenir Next", "Helvetica Neue", "Segoe UI", sans-serif;
+  --chalk-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --font-sans: var(--chalk-font-family);
+  --font-mono: var(--chalk-font-mono);
+
+  /* Video surfaces retain the cool neutral system. */
+  --chalk-bg-stage: #0f1115;
+  --chalk-bg-tile: #232a2e;
+  --chalk-bg-controls: rgba(255, 255, 255, 0.92);
+  --chalk-accent-speaking: #8fbf87;
+  --chalk-accent-speaking-glow: rgba(143, 191, 135, 0.4);
+
+  /* Glass effects */
+  --chalk-bg-glass: rgba(255, 255, 255, 0.88);
+
+  /* Tile gradient: 2-stop "Clean Fade" - no middle stop to prevent muddy transitions */
+  --chalk-tile-gradient-end: #eaf4fa;
+
+  /* Pills (control bar) */
+  --chalk-pill-bg: rgba(15, 17, 21, 0.06);
+  --chalk-pill-bg-hover: rgba(15, 17, 21, 0.1);
+  --chalk-pill-text: #0f1115;
+  --chalk-pill-text-hover: #0f1115;
+  --chalk-pill-border: rgba(15, 17, 21, 0.12);
+  --chalk-pill-bg-active: #0f1115;
+  --chalk-pill-text-active: #ffffff;
+
+  /* Shadows */
+  --chalk-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05);
+  --chalk-shadow-md: 0 2px 4px rgba(15, 23, 42, 0.05), 0 20px 50px rgba(15, 23, 42, 0.09);
+  --chalk-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.06);
+  --chalk-shadow-xl: 0 26px 60px rgba(15, 23, 42, 0.12);
+
+  /* Border radii */
+  --chalk-border-radius-sm: 0.5rem;
+  --chalk-border-radius-md: 0.875rem;
+  --chalk-border-radius-lg: 1.375rem;
+  --chalk-border-radius-xl: 1.375rem;
+  --chalk-border-radius-full: 9999px;
+
+  /* Transitions */
+  --chalk-duration-fast: 150ms;
+  --chalk-duration-normal: 200ms;
+  --chalk-duration-slow: 300ms;
+  --chalk-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --chalk-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* Soft watercolor washes used by the paper surfaces. */
+  --chalk-entrance-gradient: radial-gradient(560px 340px at 88% 6%, rgba(127, 192, 216, 0.16), transparent 70%), radial-gradient(640px 380px at 6% 96%, rgba(127, 192, 216, 0.12), transparent 70%), #ffffff;
+  --chalk-entrance-glass-bg: rgba(255, 255, 255, 0.88);
+  --chalk-entrance-glass-border: #e7e9ec;
+  --chalk-entrance-avatar-glow: rgba(127, 192, 216, 0.3);
+
+  /* Composable product appearance: palette and material are independent. */
+  --chalk-app-canvas: #f7f6f2;
+  --chalk-app-chrome: #fbfaf7;
+  --chalk-app-stage: #fbfaf7;
+  --chalk-app-panel: #ffffff;
+  --chalk-app-tile-base: #f1f0eb;
+  --chalk-app-tile-color-strength: 22%;
+  --chalk-app-text: #0c0e12;
+  --chalk-app-text-muted: #555b65;
+  --chalk-app-line: #deddd7;
+  --chalk-app-line-strong: #c9c8c2;
+  --chalk-app-control: #ffffff;
+  --chalk-app-control-hover: #f1f0eb;
+  --chalk-app-control-group: #f0efeb;
+  --chalk-app-control-primary: #202329;
+  --chalk-app-control-primary-hover: #343840;
+  --chalk-app-control-active: #dff2f7;
+  --chalk-app-control-active-line: #9dcfe1;
+  --chalk-app-control-active-text: #202329;
+  --chalk-app-message-remote: #f3f2ee;
+  --chalk-app-message-local: #202329;
+  --chalk-app-message-local-text: #ffffff;
+  --chalk-app-input: #fbfaf7;
+  --chalk-app-danger: #c94343;
+  --chalk-app-danger-hover: #b33b3b;
+  --chalk-app-shadow-xs: 0 1px 2px rgba(12, 14, 18, 0.08);
+  --chalk-app-shadow-sm: 0 8px 30px rgba(12, 14, 18, 0.06);
+  --chalk-app-shadow-control: 0 5px 16px rgba(12, 14, 18, 0.1);
+  --chalk-app-texture-image: none;
+  --chalk-app-texture-size: auto;
+  --chalk-app-texture-blend: normal;
+}
+
+[data-chalk][data-chalk-palette="warm-porcelain"] {
+  --chalk-app-canvas: #f2ebe2;
+  --chalk-app-chrome: #f8f3ec;
+  --chalk-app-stage: #eee4dc;
+  --chalk-app-panel: #fffaf5;
+  --chalk-app-tile-base: #eee4dc;
+  --chalk-app-tile-color-strength: 18%;
+  --chalk-app-text: #352f2b;
+  --chalk-app-text-muted: #70655e;
+  --chalk-app-line: #ded2c7;
+  --chalk-app-line-strong: #c8b8aa;
+  --chalk-app-control: #fffaf5;
+  --chalk-app-control-hover: #eee5dd;
+  --chalk-app-control-group: #eadfd5;
+  --chalk-app-control-primary: #51443c;
+  --chalk-app-control-primary-hover: #66564b;
+  --chalk-app-control-active: #dceef2;
+  --chalk-app-control-active-line: #6aa8ba;
+  --chalk-app-control-active-text: #29383d;
+  --chalk-app-message-remote: #eee7e0;
+  --chalk-app-message-local: #51443c;
+  --chalk-app-message-local-text: #fffaf5;
+  --chalk-app-input: #fffdf9;
+  --chalk-app-shadow-xs: 0 1px 2px rgba(72, 55, 43, 0.08);
+  --chalk-app-shadow-sm: 0 10px 30px rgba(72, 55, 43, 0.08);
+  --chalk-app-shadow-control: 0 6px 18px rgba(72, 55, 43, 0.13);
+}
+
+[data-chalk][data-chalk-palette="cool-mist"] {
+  --chalk-app-canvas: #edf2f5;
+  --chalk-app-chrome: #f6f8fa;
+  --chalk-app-stage: #e7eef2;
+  --chalk-app-panel: #fbfdfe;
+  --chalk-app-tile-base: #e7eef2;
+  --chalk-app-tile-color-strength: 18%;
+  --chalk-app-text: #24313b;
+  --chalk-app-text-muted: #65727e;
+  --chalk-app-line: #d4dde3;
+  --chalk-app-line-strong: #b8c6cf;
+  --chalk-app-control: #fbfdfe;
+  --chalk-app-control-hover: #e6edf1;
+  --chalk-app-control-group: #e1e9ee;
+  --chalk-app-control-primary: #34414d;
+  --chalk-app-control-primary-hover: #465563;
+  --chalk-app-control-active: #dceff7;
+  --chalk-app-control-active-line: #5599b5;
+  --chalk-app-control-active-text: #21343d;
+  --chalk-app-message-remote: #e9eef1;
+  --chalk-app-message-local: #34414d;
+  --chalk-app-message-local-text: #f8fbfc;
+  --chalk-app-input: #ffffff;
+  --chalk-app-shadow-xs: 0 1px 2px rgba(35, 54, 67, 0.08);
+  --chalk-app-shadow-sm: 0 10px 32px rgba(35, 54, 67, 0.08);
+  --chalk-app-shadow-control: 0 6px 18px rgba(35, 54, 67, 0.13);
+}
+
+[data-chalk][data-chalk-palette="paper-and-ink"] {
+  --chalk-app-canvas: #f4f4f0;
+  --chalk-app-chrome: #fafaf7;
+  --chalk-app-stage: #efefea;
+  --chalk-app-panel: #ffffff;
+  --chalk-app-tile-base: #eeeeea;
+  --chalk-app-tile-color-strength: 14%;
+  --chalk-app-text: #101214;
+  --chalk-app-text-muted: #555b62;
+  --chalk-app-line: #d7d8d5;
+  --chalk-app-line-strong: #b8bab8;
+  --chalk-app-control: #ffffff;
+  --chalk-app-control-hover: #e9e9e5;
+  --chalk-app-control-group: #e8e8e3;
+  --chalk-app-control-primary: #15171a;
+  --chalk-app-control-primary-hover: #2b2e32;
+  --chalk-app-control-active: #e3eff8;
+  --chalk-app-control-active-line: #196da8;
+  --chalk-app-control-active-text: #101214;
+  --chalk-app-message-remote: #eeeeea;
+  --chalk-app-message-local: #15171a;
+  --chalk-app-message-local-text: #ffffff;
+  --chalk-app-input: #ffffff;
+  --chalk-app-shadow-xs: 0 1px 2px rgba(16, 18, 20, 0.1);
+  --chalk-app-shadow-sm: 0 8px 26px rgba(16, 18, 20, 0.08);
+  --chalk-app-shadow-control: 0 5px 16px rgba(16, 18, 20, 0.14);
+}
+
+[data-chalk][data-chalk-palette="cream-and-clay"] {
+  --chalk-app-canvas: #f6eadf;
+  --chalk-app-chrome: #fbf3ea;
+  --chalk-app-stage: #f1ddcd;
+  --chalk-app-panel: #fffaf4;
+  --chalk-app-tile-base: #efddcf;
+  --chalk-app-tile-color-strength: 22%;
+  --chalk-app-text: #432d24;
+  --chalk-app-text-muted: #7d6458;
+  --chalk-app-line: #e2cfc0;
+  --chalk-app-line-strong: #c8ab97;
+  --chalk-app-control: #fffaf4;
+  --chalk-app-control-hover: #f0dfd1;
+  --chalk-app-control-group: #ead6c6;
+  --chalk-app-control-primary: #5c3828;
+  --chalk-app-control-primary-hover: #744733;
+  --chalk-app-control-active: #e8e8d5;
+  --chalk-app-control-active-line: #87945e;
+  --chalk-app-control-active-text: #354025;
+  --chalk-app-message-remote: #f1e5da;
+  --chalk-app-message-local: #5c3828;
+  --chalk-app-message-local-text: #fffaf4;
+  --chalk-app-input: #fffdf8;
+  --chalk-app-shadow-xs: 0 1px 2px rgba(86, 50, 34, 0.1);
+  --chalk-app-shadow-sm: 0 10px 32px rgba(86, 50, 34, 0.09);
+  --chalk-app-shadow-control: 0 6px 18px rgba(86, 50, 34, 0.15);
+}
+
+[data-chalk][data-chalk-palette="studio-canvas"] {
+  --chalk-app-canvas: #f0eee5;
+  --chalk-app-chrome: #f8f5ec;
+  --chalk-app-stage: #ebe9de;
+  --chalk-app-panel: #fdfbf5;
+  --chalk-app-tile-base: #e9e7dc;
+  --chalk-app-tile-color-strength: 22%;
+  --chalk-app-text: #303832;
+  --chalk-app-text-muted: #657067;
+  --chalk-app-line: #d8d7ca;
+  --chalk-app-line-strong: #b9bdad;
+  --chalk-app-control: #fdfbf5;
+  --chalk-app-control-hover: #e8e7dc;
+  --chalk-app-control-group: #e4e4d8;
+  --chalk-app-control-primary: #48594b;
+  --chalk-app-control-primary-hover: #5a6e5d;
+  --chalk-app-control-active: #dceff2;
+  --chalk-app-control-active-line: #5e9bab;
+  --chalk-app-control-active-text: #294047;
+  --chalk-app-message-remote: #ecebe2;
+  --chalk-app-message-local: #48594b;
+  --chalk-app-message-local-text: #fbfaf4;
+  --chalk-app-input: #fffef9;
+  --chalk-app-shadow-xs: 0 1px 2px rgba(48, 56, 50, 0.08);
+  --chalk-app-shadow-sm: 0 10px 30px rgba(48, 56, 50, 0.08);
+  --chalk-app-shadow-control: 0 6px 18px rgba(48, 56, 50, 0.13);
+}
+
+[data-chalk][data-chalk-palette="prism-daylight"] {
+  --chalk-app-canvas: #f4f1fb;
+  --chalk-app-chrome: #fbf9ff;
+  --chalk-app-stage: #eee8fa;
+  --chalk-app-panel: #fefcff;
+  --chalk-app-tile-base: #eee8f7;
+  --chalk-app-tile-color-strength: 26%;
+  --chalk-app-text: #2b2037;
+  --chalk-app-text-muted: #71657e;
+  --chalk-app-line: #ded5ea;
+  --chalk-app-line-strong: #c4b4d8;
+  --chalk-app-control: #fefcff;
+  --chalk-app-control-hover: #ebe3f5;
+  --chalk-app-control-group: #e9e1f2;
+  --chalk-app-control-primary: #4c2e78;
+  --chalk-app-control-primary-hover: #614091;
+  --chalk-app-control-active: #e5dcfb;
+  --chalk-app-control-active-line: #7651d2;
+  --chalk-app-control-active-text: #34204f;
+  --chalk-app-message-remote: #eee9f4;
+  --chalk-app-message-local: #3b245c;
+  --chalk-app-message-local-text: #ffffff;
+  --chalk-app-input: #ffffff;
+  --chalk-app-shadow-xs: 0 1px 2px rgba(54, 33, 78, 0.09);
+  --chalk-app-shadow-sm: 0 12px 36px rgba(75, 44, 110, 0.1);
+  --chalk-app-shadow-control: 0 7px 20px rgba(75, 44, 110, 0.16);
+}
+
+[data-chalk][data-chalk-palette="signal-white"] {
+  --chalk-app-canvas: #f3f7fb;
+  --chalk-app-chrome: #ffffff;
+  --chalk-app-stage: #edf4fa;
+  --chalk-app-panel: #ffffff;
+  --chalk-app-tile-base: #eef4f8;
+  --chalk-app-tile-color-strength: 22%;
+  --chalk-app-text: #0c1117;
+  --chalk-app-text-muted: #596674;
+  --chalk-app-line: #d8e0e7;
+  --chalk-app-line-strong: #b5c2cd;
+  --chalk-app-control: #ffffff;
+  --chalk-app-control-hover: #e8f0f6;
+  --chalk-app-control-group: #e5edf3;
+  --chalk-app-control-primary: #111820;
+  --chalk-app-control-primary-hover: #28323d;
+  --chalk-app-control-active: #e1f0ff;
+  --chalk-app-control-active-line: #1684e2;
+  --chalk-app-control-active-text: #0b4f87;
+  --chalk-app-message-remote: #edf1f4;
+  --chalk-app-message-local: #111820;
+  --chalk-app-message-local-text: #ffffff;
+  --chalk-app-input: #ffffff;
+  --chalk-app-shadow-xs: 0 1px 2px rgba(12, 17, 23, 0.09);
+  --chalk-app-shadow-sm: 0 10px 32px rgba(12, 38, 62, 0.08);
+  --chalk-app-shadow-control: 0 6px 18px rgba(12, 38, 62, 0.14);
+}
+
+/* Dark mode */
+[data-chalk].dark,
+[data-chalk][data-chalk-theme="dark"],
+.dark [data-chalk] {
+  --background: #1b2023;
+  --foreground: #dde3e6;
+  --card: #232a2e;
+  --card-foreground: #dde3e6;
+  --popover: #232a2e;
+  --popover-foreground: #dde3e6;
+  --primary: #ffffff;
+  --primary-foreground: #0f1115;
+  --secondary: #313a3f;
+  --secondary-foreground: #dde3e6;
+  --muted: #313a3f;
+  --muted-foreground: #8b979d;
+  --accent: #203c4a;
+  --accent-foreground: #b2e0f0;
+  --destructive: #d3675f;
+  --destructive-foreground: #1b2023;
+  --success: #5f9e7d;
+  --success-foreground: #1b2023;
+  --warning: #c99245;
+  --warning-foreground: #1b2023;
+  --border: #313a3f;
+  --input: #3d484e;
+  --ring: #ffffff;
+  --chalk-paper: #1b2023;
+  --chalk-ink: #dde3e6;
+  --chalk-ink-2: #8b979d;
+  --chalk-ink-3: #647178;
+  --chalk-line: #313a3f;
+  --chalk-line-strong: #3d484e;
+  --chalk-wash-blue: #203c4a;
+  --chalk-highlight: #2f6074;
+  --chalk-font-family: "Figtree", "Plus Jakarta Sans", "Avenir Next", "Helvetica Neue", "Segoe UI", sans-serif;
+  --font-sans: var(--chalk-font-family);
+
+  /* Video-specific - Dark mode */
+  --chalk-bg-stage: #0a0a0c;
+  --chalk-bg-tile: #141418;
+  --chalk-bg-controls: rgba(26, 26, 26, 0.92);
+
+  /* Glass effects - Dark mode */
+  --chalk-bg-glass: rgba(18, 18, 26, 0.72);
+
+  /* Pills - Dark mode */
+  --chalk-pill-bg: rgba(255, 255, 255, 0.08);
+  --chalk-pill-bg-hover: rgba(255, 255, 255, 0.16);
+  --chalk-pill-text: rgba(255, 255, 255, 0.72);
+  --chalk-pill-text-hover: #ffffff;
+  --chalk-pill-border: rgba(255, 255, 255, 0.12);
+  --chalk-pill-bg-active: rgba(255, 255, 255, 0.18);
+  --chalk-pill-text-active: #ffffff;
+
+  /* Shadows - Dark mode */
+  --chalk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --chalk-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.35);
+  --chalk-shadow-lg: 0 16px 30px rgba(0, 0, 0, 0.45);
+  --chalk-shadow-xl: 0 26px 60px rgba(0, 0, 0, 0.55);
+
+  /* Tile gradient: Dark mode - clean fade to black */
+  --chalk-tile-gradient-end: #000000;
+
+  /* Entrance-specific - Dark mode */
+  --chalk-entrance-gradient: radial-gradient(560px 340px at 88% 6%, rgba(85, 170, 201, 0.18), transparent 70%), #1b2023;
+  --chalk-entrance-glass-bg: rgba(0, 0, 0, 0.6);
+  --chalk-entrance-glass-border: rgba(255, 255, 255, 0.12);
+  --chalk-entrance-avatar-glow: rgba(85, 170, 201, 0.5);
+}
+
+[data-chalk][data-chalk-palette="warm-charcoal"] {
+  --chalk-app-canvas: #151513;
+  --chalk-app-chrome: #191917;
+  --chalk-app-stage: #1d1d1a;
+  --chalk-app-panel: #21211d;
+  --chalk-app-tile-base: #1c1c19;
+  --chalk-app-tile-color-strength: 20%;
+  --chalk-app-text: #f4f3ee;
+  --chalk-app-text-muted: #a8a79f;
+  --chalk-app-line: #34342e;
+  --chalk-app-line-strong: #4b4a42;
+  --chalk-app-control: #292925;
+  --chalk-app-control-hover: #34342e;
+  --chalk-app-control-group: #20201c;
+  --chalk-app-control-primary: #252823;
+  --chalk-app-control-primary-hover: #353a33;
+  --chalk-app-control-active: #263941;
+  --chalk-app-control-active-line: #65b4d0;
+  --chalk-app-control-active-text: #f4f3ee;
+  --chalk-app-message-remote: #2a2a25;
+  --chalk-app-message-local: #27323a;
+  --chalk-app-message-local-text: #f4f3ee;
+  --chalk-app-input: #1a1a17;
+  --chalk-app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --chalk-app-shadow-sm: 0 10px 34px rgba(0, 0, 0, 0.24);
+  --chalk-app-shadow-control: 0 6px 18px rgba(0, 0, 0, 0.34);
+}
+
+[data-chalk][data-chalk-palette="cool-graphite"] {
+  --chalk-app-canvas: #101318;
+  --chalk-app-chrome: #141820;
+  --chalk-app-stage: #171c24;
+  --chalk-app-panel: #1b2028;
+  --chalk-app-tile-base: #18202a;
+  --chalk-app-tile-color-strength: 22%;
+  --chalk-app-text: #f3f6f8;
+  --chalk-app-text-muted: #9da6b2;
+  --chalk-app-line: #303744;
+  --chalk-app-line-strong: #46505f;
+  --chalk-app-control: #202632;
+  --chalk-app-control-hover: #2a3240;
+  --chalk-app-control-group: #191f28;
+  --chalk-app-control-primary: #242b35;
+  --chalk-app-control-primary-hover: #313b49;
+  --chalk-app-control-active: #172f43;
+  --chalk-app-control-active-line: #55aac9;
+  --chalk-app-control-active-text: #f3f6f8;
+  --chalk-app-message-remote: #272e39;
+  --chalk-app-message-local: #141c25;
+  --chalk-app-message-local-text: #f3f6f8;
+  --chalk-app-input: #151a22;
+  --chalk-app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.34);
+  --chalk-app-shadow-sm: 0 12px 36px rgba(0, 0, 0, 0.3);
+  --chalk-app-shadow-control: 0 6px 18px rgba(0, 0, 0, 0.4);
+}
+
+[data-chalk][data-chalk-palette="high-contrast-ink"] {
+  --chalk-app-canvas: #0c0e12;
+  --chalk-app-chrome: #12151a;
+  --chalk-app-stage: #151920;
+  --chalk-app-panel: #191d23;
+  --chalk-app-tile-base: #171b22;
+  --chalk-app-tile-color-strength: 19%;
+  --chalk-app-text: #fafaf7;
+  --chalk-app-text-muted: #a3a8b0;
+  --chalk-app-line: #343941;
+  --chalk-app-line-strong: #4b525d;
+  --chalk-app-control: #242932;
+  --chalk-app-control-hover: #303640;
+  --chalk-app-control-group: #171b21;
+  --chalk-app-control-primary: #1f242c;
+  --chalk-app-control-primary-hover: #2c333d;
+  --chalk-app-control-active: #163247;
+  --chalk-app-control-active-line: #63b9d7;
+  --chalk-app-control-active-text: #fafaf7;
+  --chalk-app-message-remote: #252a32;
+  --chalk-app-message-local: #10141a;
+  --chalk-app-message-local-text: #fafaf7;
+  --chalk-app-input: #14181e;
+  --chalk-app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --chalk-app-shadow-sm: 0 12px 38px rgba(0, 0, 0, 0.34);
+  --chalk-app-shadow-control: 0 7px 20px rgba(0, 0, 0, 0.48);
+}
+
+[data-chalk][data-chalk-palette="espresso-night"] {
+  --chalk-app-canvas: #15110f;
+  --chalk-app-chrome: #1a1512;
+  --chalk-app-stage: #1e1714;
+  --chalk-app-panel: #211916;
+  --chalk-app-tile-base: #1d1614;
+  --chalk-app-tile-color-strength: 20%;
+  --chalk-app-text: #f5ede3;
+  --chalk-app-text-muted: #b8a79a;
+  --chalk-app-line: #4a3930;
+  --chalk-app-line-strong: #664b3d;
+  --chalk-app-control: #2c211d;
+  --chalk-app-control-hover: #3a2a24;
+  --chalk-app-control-group: #211916;
+  --chalk-app-control-primary: #2a211e;
+  --chalk-app-control-primary-hover: #3b2d28;
+  --chalk-app-control-active: #3d2c24;
+  --chalk-app-control-active-line: #c98656;
+  --chalk-app-control-active-text: #f5ede3;
+  --chalk-app-message-remote: #35271f;
+  --chalk-app-message-local: #1d252b;
+  --chalk-app-message-local-text: #f5ede3;
+  --chalk-app-input: #1a1412;
+  --chalk-app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.38);
+  --chalk-app-shadow-sm: 0 12px 38px rgba(0, 0, 0, 0.32);
+  --chalk-app-shadow-control: 0 7px 20px rgba(0, 0, 0, 0.44);
+}
+
+[data-chalk][data-chalk-palette="chalkboard-atelier"] {
+  --chalk-app-canvas: #0d1714;
+  --chalk-app-chrome: #111d19;
+  --chalk-app-stage: #14221d;
+  --chalk-app-panel: #1b2c26;
+  --chalk-app-tile-base: #15241f;
+  --chalk-app-tile-color-strength: 18%;
+  --chalk-app-text: #eff3e9;
+  --chalk-app-text-muted: #9bab9f;
+  --chalk-app-line: #30473d;
+  --chalk-app-line-strong: #466355;
+  --chalk-app-control: #20332c;
+  --chalk-app-control-hover: #2a4138;
+  --chalk-app-control-group: #172720;
+  --chalk-app-control-primary: #1e3029;
+  --chalk-app-control-primary-hover: #2c443a;
+  --chalk-app-control-active: #1c3b40;
+  --chalk-app-control-active-line: #76bed1;
+  --chalk-app-control-active-text: #eff3e9;
+  --chalk-app-message-remote: #263a32;
+  --chalk-app-message-local: #182d2f;
+  --chalk-app-message-local-text: #eff3e9;
+  --chalk-app-input: #13211c;
+  --chalk-app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.34);
+  --chalk-app-shadow-sm: 0 12px 36px rgba(0, 0, 0, 0.28);
+  --chalk-app-shadow-control: 0 6px 18px rgba(0, 0, 0, 0.4);
+}
+
+[data-chalk][data-chalk-palette="prism-nocturne"] {
+  --chalk-app-canvas: #100d17;
+  --chalk-app-chrome: #14101d;
+  --chalk-app-stage: #17131e;
+  --chalk-app-panel: #1a1424;
+  --chalk-app-tile-base: #18121f;
+  --chalk-app-tile-color-strength: 26%;
+  --chalk-app-text: #f5f0fa;
+  --chalk-app-text-muted: #a99db3;
+  --chalk-app-line: #3b3049;
+  --chalk-app-line-strong: #58446d;
+  --chalk-app-control: #231b30;
+  --chalk-app-control-hover: #302340;
+  --chalk-app-control-group: #1b1525;
+  --chalk-app-control-primary: #251b32;
+  --chalk-app-control-primary-hover: #352549;
+  --chalk-app-control-active: #2b1743;
+  --chalk-app-control-active-line: #9a63e6;
+  --chalk-app-control-active-text: #f5f0fa;
+  --chalk-app-message-remote: #2b2334;
+  --chalk-app-message-local: #191321;
+  --chalk-app-message-local-text: #f5f0fa;
+  --chalk-app-input: #17111f;
+  --chalk-app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --chalk-app-shadow-sm: 0 14px 42px rgba(0, 0, 0, 0.35);
+  --chalk-app-shadow-control: 0 7px 24px rgba(44, 15, 74, 0.46);
+}
+
+[data-chalk][data-chalk-palette="oled-signal"] {
+  --chalk-app-canvas: #000000;
+  --chalk-app-chrome: #030405;
+  --chalk-app-stage: #000000;
+  --chalk-app-panel: #07090c;
+  --chalk-app-tile-base: #07090c;
+  --chalk-app-tile-color-strength: 12%;
+  --chalk-app-text: #f7f8fa;
+  --chalk-app-text-muted: #8b949e;
+  --chalk-app-line: #242a31;
+  --chalk-app-line-strong: #3a424c;
+  --chalk-app-control: #11151a;
+  --chalk-app-control-hover: #1a2027;
+  --chalk-app-control-group: #080a0d;
+  --chalk-app-control-primary: #11151a;
+  --chalk-app-control-primary-hover: #20262e;
+  --chalk-app-control-active: #081b32;
+  --chalk-app-control-active-line: #2f86ff;
+  --chalk-app-control-active-text: #f7f8fa;
+  --chalk-app-message-remote: #14171b;
+  --chalk-app-message-local: #090b0f;
+  --chalk-app-message-local-text: #f7f8fa;
+  --chalk-app-input: #080a0d;
+  --chalk-app-shadow-xs: none;
+  --chalk-app-shadow-sm: none;
+  --chalk-app-shadow-control: 0 6px 18px rgba(0, 0, 0, 0.7);
+}
+
+[data-chalk][data-chalk-palette] {
+  --background: var(--chalk-app-canvas);
+  --foreground: var(--chalk-app-text);
+  --card: var(--chalk-app-panel);
+  --card-foreground: var(--chalk-app-text);
+  --popover: var(--chalk-app-panel);
+  --popover-foreground: var(--chalk-app-text);
+  --secondary: var(--chalk-app-control);
+  --secondary-foreground: var(--chalk-app-text);
+  --muted: var(--chalk-app-control-group);
+  --muted-foreground: var(--chalk-app-text-muted);
+  --accent: var(--chalk-app-control-active);
+  --accent-foreground: var(--chalk-app-text);
+  --border: var(--chalk-app-line);
+  --input: var(--chalk-app-line-strong);
+  --ring: var(--chalk-app-control-active-line);
+}
+
+[data-chalk][data-chalk-theme="dark"] {
+  color-scheme: dark;
+}
+
+[data-chalk][data-chalk-texture="paper"] {
+  --chalk-app-texture-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
+  --chalk-app-texture-size: 180px 180px;
+  --chalk-app-texture-blend: soft-light;
+}
+
+[data-chalk][data-chalk-texture="slate"] {
+  --chalk-app-texture-image:
+    repeating-linear-gradient(7deg, transparent 0 9px, rgba(255, 255, 255, 0.018) 10px, transparent 11px 19px),
+    url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.36' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
+  --chalk-app-texture-size: auto, 220px 220px;
+  --chalk-app-texture-blend: soft-light;
+}
+
+[data-chalk][data-chalk-theme="light"][data-chalk-texture="slate"] {
+  --chalk-app-texture-image:
+    repeating-linear-gradient(7deg, transparent 0 9px, rgba(12, 14, 18, 0.022) 10px, transparent 11px 19px),
+    url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.36' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
+  --chalk-app-texture-blend: multiply;
+}
+
+.chalk-textured-surface {
+  background-image: var(--chalk-app-texture-image);
+  background-size: var(--chalk-app-texture-size);
+  background-blend-mode: var(--chalk-app-texture-blend);
+}
+
+.chalk-participant-wash {
+  background-color: color-mix(in srgb, var(--chalk-participant-color) var(--chalk-app-tile-color-strength), var(--chalk-app-tile-base));
+}
+
+/* =============================================================================
+   Base Styles & Scoped Reset
+   ============================================================================= */
+
+:where([data-chalk], .chalk-root) {
+  font-family: var(--chalk-font-family);
+  color: var(--foreground);
+  background: var(--background);
+  line-height: 1.5;
+  font-size: 16px;
+  text-align: left;
+  text-transform: none;
+  letter-spacing: normal;
+  text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  isolation: isolate;
+}
+
+:where([data-chalk], .chalk-root),
+:where([data-chalk], .chalk-root) *,
+:where([data-chalk], .chalk-root) *::before,
+:where([data-chalk], .chalk-root) *::after {
+  box-sizing: border-box;
+}
+
+:where([data-chalk], .chalk-root) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
+  margin: 0;
+}
+
+:where([data-chalk], .chalk-root) :where(ul, ol) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:where([data-chalk], .chalk-root) :where(button, input, optgroup, select, textarea) {
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  text-transform: none;
+  margin: 0;
+}
+
+:where([data-chalk], .chalk-root) :where(button, [type="button"], [type="reset"], [type="submit"]) {
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+:where([data-chalk], .chalk-root) :where(img, svg, video, canvas, audio, iframe, embed, object) {
+  display: block;
+  vertical-align: middle;
+}
+
+:where([data-chalk], .chalk-root) :where(img) {
+  max-width: 100%;
+  height: auto;
+}
+
+:where([data-chalk], .chalk-root) :where(video) {
+  max-width: 100%;
+}
+
+/* =============================================================================
+   Animations
+   ============================================================================= */
+
+@keyframes chalk-episode-exit {
+  from {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+    filter: blur(4px);
+  }
+}
+
+.chalk-animate-exit {
+  animation: chalk-episode-exit 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes chalk-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes chalk-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes chalk-speaking-pulse {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 2px var(--chalk-accent-speaking),
+      0 0 16px var(--chalk-accent-speaking-glow);
+  }
+
+  50% {
+    box-shadow:
+      0 0 0 3px var(--chalk-accent-speaking),
+      0 0 28px var(--chalk-accent-speaking-glow);
+  }
+}
+
+@keyframes chalk-speaking-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 0 2px var(--chalk-accent-speaking);
+  }
+
+  50% {
+    box-shadow: 0 0 0 4px var(--chalk-accent-speaking);
+  }
+}
+
+@keyframes chalk-bounce {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.95);
+  }
+}
+
+@keyframes chalk-panel-slide-in {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes chalk-slide-right {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes chalk-slide-left {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes chalk-float-up {
+  0% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-50px) scale(1.2);
+  }
+}
+
+/* Enhanced reaction animations */
+@keyframes chalk-reaction-float {
+  0% {
+    opacity: 1;
+    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
+  }
+
+  20% {
+    opacity: 1;
+    transform: translateY(calc(var(--float-travel-y, 100px) * -0.2)) translateX(calc(var(--float-offset-x, 0px) * 0.5)) rotate(calc(var(--float-rotation, 0deg) * 0.3)) scale(var(--float-scale, 1.2));
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(calc(var(--float-travel-y, 100px) * -1)) translateX(var(--float-offset-x, 0px)) rotate(var(--float-rotation, 0deg)) scale(0.8);
+  }
+}
+
+@keyframes chalk-reaction-bounce-in {
+  0% {
+    transform: scale(0) rotate(-10deg);
+    opacity: 0;
+  }
+
+  50% {
+    transform: scale(1.3) rotate(5deg);
+    opacity: 1;
+  }
+
+  70% {
+    transform: scale(0.9) rotate(-3deg);
+  }
+
+  100% {
+    transform: scale(1) rotate(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes chalk-reaction-wiggle {
+  0%,
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+
+  25% {
+    transform: rotate(-8deg) scale(1.05);
+  }
+
+  75% {
+    transform: rotate(8deg) scale(1.05);
+  }
+}
+
+@keyframes chalk-particle-burst {
+  0% {
+    transform: translate(-50%, -50%) rotate(var(--particle-angle, 0deg)) translateY(0) scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) rotate(var(--particle-angle, 0deg)) translateY(calc(var(--particle-distance, 50px) * -1)) scale(0);
+    opacity: 0;
+  }
+}
+
+@keyframes chalk-particle-explode {
+  0% {
+    transform: translate(0, 0) scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(var(--particle-x, 0), var(--particle-y, 0)) scale(0);
+    opacity: 0;
+  }
+}
+
+@keyframes chalk-hand-wave {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+
+  10% {
+    transform: rotate(14deg);
+  }
+
+  20% {
+    transform: rotate(-8deg);
+  }
+
+  30% {
+    transform: rotate(14deg);
+  }
+
+  40% {
+    transform: rotate(-4deg);
+  }
+
+  50%,
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes chalk-hand-bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+@keyframes chalk-recording-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
+  }
+
+  50% {
+    opacity: 0.8;
+    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
+  }
+}
+
+@keyframes chalk-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes chalk-tooltip-in {
+  from {
+    opacity: 0;
+    transform: scale(0.92) translateY(4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes chalk-scale-spring {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  60% {
+    transform: scale(1.05);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes chalk-toast-in {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes chalk-highlight-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 4px oklch(0.6 0.1 185 / 50%);
+  }
+
+  50% {
+    box-shadow: 0 0 0 8px oklch(0.6 0.1 185 / 30%);
+  }
+}
+
+@keyframes chalk-transcript-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes chalk-typing-dot {
+  0%,
+  60%,
+  100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+
+  30% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes chalk-interim-pulse {
+  0%,
+  100% {
+    background-color: transparent;
+  }
+
+  50% {
+    background-color: oklch(0.6 0.1 185 / 5%);
+  }
+}
+
+@keyframes chalk-search-highlight {
+  0%,
+  100% {
+    box-shadow: 0 0 0 2px oklch(0.8 0.15 85 / 50%);
+  }
+
+  50% {
+    box-shadow: 0 0 0 4px oklch(0.8 0.15 85 / 30%);
+  }
+}
+
+@keyframes chalk-control-hover {
+  from {
+    transform: scale(1);
+  }
+
+  to {
+    transform: scale(1.04);
+  }
+}
+
+@keyframes chalk-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes chalk-glow-pulse {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 0 rgba(27, 182, 166, 0.4),
+      0 0 20px rgba(27, 182, 166, 0.2);
+  }
+
+  50% {
+    box-shadow:
+      0 0 0 8px rgba(27, 182, 166, 0),
+      0 0 40px rgba(27, 182, 166, 0.3);
+  }
+}
+
+@keyframes chalk-audio-pulse {
+  0%,
+  100% {
+    transform: scaleX(1);
+  }
+
+  50% {
+    transform: scaleX(1.02);
+  }
+}
+
+@keyframes chalk-ripple-expand {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.8;
+    border-width: 4px;
+  }
+
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+    border-width: 0;
+  }
+}
+
+@keyframes chalk-spin-slow {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes chalk-spin-reverse-slow {
+  from {
+    transform: rotate(360deg);
+  }
+
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+/* Transition for theme switching */
+.chalk-theme-transition,
+.chalk-theme-transition *,
+.chalk-theme-transition *::before,
+.chalk-theme-transition *::after {
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Tactile button base styles */
+.chalk-button-tactile {
+  transition-property: all;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+  /* Spring-like */
+}
+
+.chalk-button-tactile:active {
+  transform: scale(0.92);
+}
+
+.chalk-button-tactile:hover {
+  transform: scale(1.05);
+}
+
+/* Dock Entrance & Exit */
+@keyframes chalk-dock-slide-up {
+  0% {
+    transform: translateY(150%) scale(0.9);
+    opacity: 0;
+  }
+
+  60% {
+    transform: translateY(-10%) scale(1.02);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes chalk-dock-slide-down {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateY(150%);
+    opacity: 0;
+  }
+}
+
+/* Tile Staggered Entrance */
+@keyframes chalk-tile-pop-in {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Void Exit */
+@keyframes chalk-void-exit {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+    filter: blur(0);
+  }
+
+  100% {
+    transform: scale(0);
+    opacity: 0;
+    filter: blur(20px);
+  }
+}
+
+/* Harmonic Speaker Glow */
+@keyframes chalk-harmonic-pulse {
+  0% {
+    box-shadow: 0 0 0 0px rgba(34, 197, 94, 0);
+    border-color: rgba(34, 197, 94, 0);
+  }
+
+  50% {
+    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2);
+    border-color: rgba(34, 197, 94, 0.4);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0px rgba(34, 197, 94, 0);
+    border-color: rgba(34, 197, 94, 0);
+  }
+}
+
+/* Animation utilities */
+.chalk-animate-dock-up {
+  animation: chalk-dock-slide-up 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
+}
+
+.chalk-animate-dock-down {
+  animation: chalk-dock-slide-down 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
+}
+
+.chalk-animate-void-exit {
+  animation: chalk-void-exit 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
+}
+
+.chalk-animate-tile-pop {
+  animation: chalk-tile-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards !important;
+}
+
+.chalk-animate-harmonic-pulse {
+  animation: chalk-harmonic-pulse 3s infinite !important;
+}
+
+/* Animation utility classes */
+.chalk-animate-scale-in {
+  animation: chalk-scale-in var(--chalk-duration-normal) var(--chalk-ease-out-expo);
+}
+
+.chalk-animate-fade-out {
+  animation: chalk-fade-out var(--chalk-duration-normal) ease-out forwards;
+}
+
+.chalk-animate-speaking {
+  animation: chalk-speaking-pulse 1.5s ease-in-out infinite;
+}
+
+.chalk-animate-speaking-glow {
+  animation: chalk-speaking-glow 1.5s ease-in-out infinite;
+}
+
+.chalk-animate-bounce {
+  animation: chalk-bounce var(--chalk-duration-fast) ease-out;
+}
+
+.chalk-animate-slide-right {
+  animation: chalk-slide-right var(--chalk-duration-normal) var(--chalk-ease-out-expo);
+}
+
+.chalk-animate-slide-left {
+  animation: chalk-slide-left var(--chalk-duration-normal) var(--chalk-ease-out-expo);
+}
+
+.chalk-animate-panel-slide-in {
+  animation: chalk-panel-slide-in var(--chalk-duration-slow) var(--chalk-ease-out-expo);
+}
+
+.chalk-animate-float-up {
+  animation: chalk-float-up 2s ease-out forwards;
+}
+
+.chalk-animate-reaction-float {
+  animation: chalk-reaction-float var(--float-duration, 3000ms) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+}
+
+.chalk-animate-reaction-bounce-in {
+  animation: chalk-reaction-bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+}
+
+.chalk-animate-reaction-wiggle {
+  animation: chalk-reaction-wiggle 0.5s ease-in-out 0.3s 3;
+}
+
+.chalk-animate-hand-bounce {
+  animation: chalk-hand-bounce 0.6s ease-in-out infinite;
+}
+
+.chalk-animate-hand-wave {
+  animation: chalk-hand-wave 2.5s ease-in-out infinite;
+}
+
+.chalk-animate-pulse {
+  animation: chalk-pulse 2s ease-in-out infinite;
+}
+
+.chalk-animate-recording {
+  animation: chalk-recording-pulse 2s ease-in-out infinite;
+}
+
+.chalk-animate-toast-in {
+  animation: chalk-toast-in var(--chalk-duration-normal) var(--chalk-ease-out-expo);
+}
+
+.chalk-animate-tooltip-in {
+  animation: chalk-tooltip-in var(--chalk-duration-fast) var(--chalk-ease-out-back);
+}
+
+.chalk-animate-highlight {
+  animation: chalk-highlight-pulse 2s ease-in-out infinite;
+}
+
+.chalk-animate-transcript-in {
+  animation: chalk-transcript-in var(--chalk-duration-fast) var(--chalk-ease-out-expo);
+}
+
+.chalk-animate-scale-spring {
+  animation: chalk-scale-spring var(--chalk-duration-slow) var(--chalk-ease-out-back);
+}
+
+.chalk-animate-shimmer {
+  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
+  background-size: 200% 100%;
+  animation: chalk-shimmer 2s ease-in-out infinite;
+}
+
+.chalk-animate-glow-pulse {
+  animation: chalk-glow-pulse 2s ease-in-out infinite;
+}
+
+.chalk-animate-ripple {
+  animation: chalk-ripple-expand 2s ease-out infinite;
+}
+
+.chalk-animate-spin-slow {
+  animation: chalk-spin-slow 8s linear infinite;
+}
+
+.chalk-animate-spin-reverse-slow {
+  animation: chalk-spin-reverse-slow 12s linear infinite;
+}
+
+.chalk-animate-typing-dot {
+  animation: chalk-typing-dot 1.4s ease-in-out infinite;
+}
+
+.chalk-animate-interim-pulse {
+  animation: chalk-interim-pulse 2s ease-in-out infinite;
+}
+
+.chalk-animate-search-highlight {
+  animation: chalk-search-highlight 2s ease-in-out infinite;
+}
+
+/* Low confidence text styling */
+.chalk-low-confidence {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(--warning);
+  text-underline-offset: 3px;
+}
+
+/* Respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}