@q9labsai/chalk-ui 4.1.17 → 5.0.0

package/dist/styles.css

@@ -52,739 +52,171 @@
    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;
-
-  /* Sidebar: a chalkboard slate that anchors the paper canvas beside it. */
-  --sidebar: #171a18;
-  --sidebar-foreground: #b9c0ba;
-  --sidebar-primary: #f7f6f2;
-  --sidebar-primary-foreground: #121512;
-  --sidebar-accent: #2b302c;
-  --sidebar-accent-foreground: #ffffff;
-  --sidebar-border: #2c312d;
-  --sidebar-ring: #8fbf87;
-  --sidebar-width: 16rem;
-  --sidebar-width-icon: 3.25rem;
-  --sidebar-width-mobile: 18rem;
-
-  --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;
+[data-chalk]:not([data-chalk] [data-chalk]) {
+  --background: var(--chalk-canvas);
+  --foreground: var(--chalk-text);
+  --card: var(--chalk-surface);
+  --card-foreground: var(--chalk-text);
+  --popover: var(--chalk-popover);
+  --popover-foreground: var(--chalk-text);
+  --primary: var(--chalk-text);
+  --primary-foreground: var(--chalk-canvas);
+  --secondary: var(--chalk-raised);
+  --secondary-foreground: var(--chalk-text);
+  --muted: var(--chalk-raised);
+  --muted-foreground: var(--chalk-muted-text);
+  --accent: var(--chalk-hover);
+  --accent-foreground: var(--chalk-text);
+  --destructive: var(--chalk-danger);
+  --destructive-foreground: var(--chalk-on-overlay);
+  --success: var(--chalk-positive);
+  --warning: var(--chalk-warning);
+  --border: var(--chalk-line);
+  --input: var(--chalk-line-strong);
+  --ring: var(--chalk-focus);
+  --chalk-canvas: #0b0c0e;
+  --chalk-surface: #151619;
+  --chalk-raised: #1d1f23;
+  --chalk-hover: #272a2f;
+  --chalk-pressed: #30333a;
+  --chalk-line: rgba(255, 255, 255, 0.08);
+  --chalk-line-strong: rgba(255, 255, 255, 0.14);
+  --chalk-text: #ececee;
+  --chalk-muted-text: #9a9ca3;
+  --chalk-danger: #e5484d;
+  --chalk-danger-pressed: #c93d42;
+  --chalk-danger-hover: #ec5d61;
+  --chalk-danger-text: #ff6b6b;
+  --chalk-positive: #80b879;
+  --chalk-warning: #d9b641;
+  --chalk-accent: #55aac9;
+  --chalk-tile: #151619;
+  --chalk-popover: #1d1f23;
+  --chalk-text-strong: #fff;
+  --chalk-soft-text: #c4c6cc;
+  --chalk-wash: rgba(255, 255, 255, 0.05);
+  --chalk-wash-strong: rgba(255, 255, 255, 0.08);
+  --chalk-chrome: #0b0c0e;
+  --chalk-stage: #0b0c0e;
+  --chalk-accent-text: #0b0c0e;
+  --chalk-danger-surface: #1d1f23;
+  --chalk-focus: #ececee;
+  --chalk-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
+  --chalk-overlay: rgba(12, 14, 18, 0.75);
+  --chalk-overlay-strong: rgba(12, 14, 18, 0.82);
+  --chalk-overlay-hover: rgba(40, 42, 48, 0.95);
+  --chalk-on-overlay: #ffffff;
+  --chalk-overlay-warning: #e2bd3a;
+  --chalk-overlay-danger: #ff6b6b;
+  --chalk-scrim: rgba(0, 0, 0, 0.55);
+  --chalk-app-canvas: var(--chalk-canvas);
+  --chalk-app-chrome: var(--chalk-canvas);
+  --chalk-app-stage: var(--chalk-canvas);
+  --chalk-app-panel: var(--chalk-surface);
+  --chalk-app-tile-base: var(--chalk-tile);
+  --chalk-app-text: var(--chalk-text);
+  --chalk-app-text-muted: var(--chalk-muted-text);
+  --chalk-app-line: var(--chalk-line);
+  --chalk-app-line-strong: var(--chalk-line-strong);
+  --chalk-app-control: var(--chalk-raised);
+  --chalk-app-control-hover: var(--chalk-hover);
+  --chalk-app-control-group: var(--chalk-raised);
+  --chalk-app-control-primary: var(--chalk-text);
+  --chalk-app-control-primary-hover: var(--chalk-soft-text);
+  --chalk-app-control-active: var(--chalk-text);
+  --chalk-app-control-active-line: var(--chalk-focus);
+  --chalk-app-control-active-text: var(--chalk-canvas);
+  --chalk-app-message-remote: var(--chalk-raised);
+  --chalk-app-message-local: var(--chalk-text);
+  --chalk-app-message-local-text: var(--chalk-canvas);
+  --chalk-app-input: var(--chalk-surface);
+  --chalk-app-danger: var(--chalk-danger);
+  --chalk-app-danger-hover: var(--chalk-danger-hover);
+  --chalk-app-success: var(--chalk-positive);
+  --chalk-app-warning: var(--chalk-warning);
+  --chalk-app-info: var(--chalk-accent);
+  --chalk-app-shadow-xs: var(--chalk-shadow);
+  --chalk-app-shadow-sm: var(--chalk-shadow);
+  --chalk-app-shadow-control: var(--chalk-shadow);
+  --chalk-bg-stage: var(--chalk-canvas);
+  --chalk-bg-tile: var(--chalk-tile);
+  --chalk-bg-controls: var(--chalk-raised);
+  --chalk-bg-glass: var(--chalk-surface);
+  --chalk-paper: var(--chalk-surface);
+  --chalk-ink: var(--chalk-text);
+  --chalk-ink-2: var(--chalk-muted-text);
+  --chalk-ink-3: var(--chalk-muted-text);
+  --chalk-pill-bg: var(--chalk-raised);
+  --chalk-pill-bg-hover: var(--chalk-hover);
+  --chalk-pill-text: var(--chalk-text);
+  --chalk-pill-text-hover: var(--chalk-text);
+  --chalk-pill-border: var(--chalk-line);
+  --chalk-pill-bg-active: var(--chalk-text);
+  --chalk-pill-text-active: var(--chalk-canvas);
+  --chalk-shadow-sm: var(--chalk-shadow);
+  --chalk-shadow-md: var(--chalk-shadow);
+  --chalk-shadow-lg: var(--chalk-shadow);
+  --chalk-shadow-xl: var(--chalk-shadow);
+  --chalk-entrance-primary: var(--chalk-text);
+  --chalk-entrance-primary-hover: var(--chalk-soft-text);
+  --chalk-entrance-gradient: var(--chalk-canvas);
+  --chalk-entrance-glass-bg: var(--chalk-surface);
+  --chalk-entrance-glass-border: var(--chalk-line);
+  --chalk-accent-speaking: var(--chalk-positive);
+  --chalk-accent-speaking-glow: var(--chalk-line);
+  --chalk-tile-gradient-end: var(--chalk-tile);
+  --chalk-app-tile-color-strength: 0%;
+  --chalk-font-family: Figtree, system-ui, sans-serif;
+  --chalk-font-mono: "Spline Sans Mono", ui-monospace, 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-border-radius-sm: 6px;
+  --chalk-border-radius-md: 12px;
+  --chalk-border-radius-lg: 16px;
+  --chalk-border-radius-xl: 16px;
+  --chalk-border-radius-full: 999px;
   --chalk-duration-fast: 150ms;
-  --chalk-duration-normal: 200ms;
+  --chalk-duration-normal: 220ms;
   --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-entrance-primary: #202329;
-  --chalk-entrance-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;
-  --sidebar: #121719;
-  --sidebar-foreground: #a4b0b5;
-  --sidebar-primary: #dde3e6;
-  --sidebar-primary-foreground: #0f1115;
-  --sidebar-accent: #232a2e;
-  --sidebar-accent-foreground: #ffffff;
-  --sidebar-border: #232a2e;
-  --sidebar-ring: #8fbf87;
-  --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="cosmic-chalk"] {
-  --chalk-app-canvas: #080f20;
-  --chalk-app-chrome: #10182b;
-  --chalk-app-stage: #0b1427;
-  --chalk-app-panel: #10182b;
-  --chalk-app-tile-base: #10182b;
-  --chalk-app-tile-color-strength: 18%;
-  --chalk-app-text: #f4ecd7;
-  --chalk-app-text-muted: #aeb8c9;
-  --chalk-app-line: #2c3d59;
-  --chalk-app-line-strong: #415571;
-  --chalk-app-control: #121e34;
-  --chalk-app-control-hover: #192944;
-  --chalk-app-control-group: #0c162a;
-  --chalk-app-control-primary: #1b3953;
-  --chalk-app-control-primary-hover: #244b68;
-  --chalk-app-control-active: #172b45;
-  --chalk-app-control-active-line: #8fdcff;
-  --chalk-app-control-active-text: #f4ecd7;
-  --chalk-app-message-remote: #17243c;
-  --chalk-app-message-local: #1b3953;
-  --chalk-app-message-local-text: #f4ecd7;
-  --chalk-app-input: #0c1629;
-  --chalk-app-danger: #ff9ba8;
-  --chalk-app-danger-hover: #ffb4be;
-  --chalk-app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32);
-  --chalk-app-shadow-sm: 0 12px 36px rgba(0, 0, 0, 0.34);
-  --chalk-app-shadow-control: 0 7px 22px rgba(0, 0, 0, 0.42);
-}
-
-[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);
+[data-chalk][data-chalk-theme="light"]:not([data-chalk] [data-chalk]) {
+  --chalk-canvas: #f3f3f5;
+  --chalk-surface: #ffffff;
+  --chalk-raised: #ececf0;
+  --chalk-hover: #e1e1e6;
+  --chalk-pressed: #d3d3d9;
+  --chalk-tile: #e2e2e7;
+  --chalk-popover: #ffffff;
+  --chalk-line: rgba(0, 0, 0, 0.09);
+  --chalk-line-strong: rgba(0, 0, 0, 0.15);
+  --chalk-text: #18181b;
+  --chalk-text-strong: #000;
+  --chalk-muted-text: #5c5d65;
+  --chalk-soft-text: #3d3e45;
+  --chalk-danger: #d93a3f;
+  --chalk-danger-pressed: #c93d42;
+  --chalk-danger-hover: #e04b50;
+  --chalk-danger-text: #bf272c;
+  --chalk-positive: #2b8a3e;
+  --chalk-warning: #8a6400;
+  --chalk-accent: #1b70a0;
+  --chalk-wash: rgba(0, 0, 0, 0.04);
+  --chalk-wash-strong: rgba(0, 0, 0, 0.07);
+  --chalk-chrome: #f3f3f5;
+  --chalk-stage: #f3f3f5;
+  --chalk-accent-text: #f3f3f5;
+  --chalk-danger-surface: #ececf0;
+  --chalk-focus: #18181b;
+  --chalk-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+  color-scheme: light;
 }
 
 .chalk-participant-wash {
   background-color: color-mix(in srgb, var(--chalk-participant-color) var(--chalk-app-tile-color-strength), var(--chalk-app-tile-base));
 }
 
-[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"] :where(button, a, input, select, textarea, [tabindex]):focus-visible {
-  outline: 2px dashed var(--chalk-focus, #8fdcff);
-  outline-offset: 2px;
-}
-
-main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::before,
-main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::after {
-  content: "";
-  position: absolute;
-  pointer-events: none;
-  z-index: 0;
-}
-
-main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::before {
-  inset: 0;
-  opacity: 0.28;
-  background: radial-gradient(circle at 12% 18%, #8fdcff 0 1px, transparent 1.7px), radial-gradient(circle at 76% 13%, #f5d88c 0 1px, transparent 1.7px), radial-gradient(circle at 88% 72%, #8fdcff 0 1px, transparent 1.7px), radial-gradient(circle at 22% 84%, #f4ecd7 0 1px, transparent 1.7px);
-}
-
-main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::after {
-  inset: 9% 7%;
-  opacity: 0.14;
-  background: linear-gradient(24deg, transparent 0 49.4%, #8fdcff 49.6% 49.9%, transparent 50.1%), linear-gradient(156deg, transparent 0 49.6%, #f5d88c 49.8% 50%, transparent 50.2%);
-}
-
-main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"] > * {
-  position: relative;
-  z-index: 1;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::before,
-  main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::after {
-    opacity: 0.18;
-  }
-}
-
 /* =============================================================================
    Base Styles & Scoped Reset
 
@@ -1125,18 +557,6 @@ main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"] > *
   }
 }
 
-@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;
@@ -1165,65 +585,6 @@ main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"] > *
   }
 }
 
-@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);
@@ -1527,98 +888,6 @@ main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"] > *
   animation: chalk-panel-slide-in var(--chalk-duration-slow) var(--chalk-ease-out-expo);
 }
 
-/* Space drawer: a right-hand sheet below 1024px, a docked column that pushes the stage above it. */
-@keyframes chalk-drawer-slide-out {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-
-  to {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-}
-
-@keyframes chalk-drawer-grow {
-  from {
-    width: 0;
-  }
-
-  to {
-    width: var(--chalk-drawer-width);
-  }
-}
-
-@keyframes chalk-drawer-shrink {
-  from {
-    width: var(--chalk-drawer-width);
-  }
-
-  to {
-    width: 0;
-  }
-}
-
-.chalk-drawer {
-  --chalk-drawer-width: 396px;
-  position: fixed;
-  inset: 0 0 0 auto;
-  z-index: 50;
-  width: min(100%, 420px);
-  overflow: hidden;
-}
-
-.chalk-drawer[data-state="open"] {
-  animation: chalk-panel-slide-in var(--chalk-duration-slow) var(--chalk-ease-out-expo);
-}
-
-.chalk-drawer[data-state="closing"] {
-  animation: chalk-drawer-slide-out var(--chalk-duration-normal) var(--chalk-ease-out-expo) forwards;
-  pointer-events: none;
-}
-
-.chalk-drawer-content {
-  position: absolute;
-  inset: 0 0 0 auto;
-  width: 100%;
-}
-
-.chalk-drawer-scrim {
-  position: fixed;
-  inset: 0;
-  z-index: 49;
-}
-
-@media (min-width: 1024px) {
-  .chalk-drawer {
-    position: relative;
-    inset: auto;
-    z-index: auto;
-    flex: none;
-    width: var(--chalk-drawer-width);
-  }
-
-  .chalk-drawer[data-state="open"] {
-    animation: chalk-drawer-grow var(--chalk-duration-slow) var(--chalk-ease-out-expo);
-  }
-
-  .chalk-drawer[data-state="closing"] {
-    animation: chalk-drawer-shrink var(--chalk-duration-normal) var(--chalk-ease-out-expo) forwards;
-  }
-
-  /* Docked: the panel is a card with the same insets as the stage, not a wall against the header. */
-  .chalk-drawer-content {
-    inset: 4px 20px 16px 0;
-    width: calc(var(--chalk-drawer-width) - 20px);
-    border-radius: 10px;
-  }
-
-  .chalk-drawer-scrim {
-    display: none;
-  }
-}
-
 .chalk-animate-float-up {
   animation: chalk-float-up 2s ease-out forwards;
 }
@@ -1692,18 +961,6 @@ main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"] > *
   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);
 }
@@ -1730,226 +987,862 @@ main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"] > *
   animation: chalk-spin-reverse-slow 12s linear infinite;
 }
 
-.chalk-animate-typing-dot {
-  animation: chalk-typing-dot 1.4s ease-in-out infinite;
+.chalk-logo {
+  display: block;
+  overflow: visible;
 }
 
-.chalk-animate-interim-pulse {
-  animation: chalk-interim-pulse 2s ease-in-out infinite;
+/* 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;
+  }
 }
 
-.chalk-animate-search-highlight {
-  animation: chalk-search-highlight 2s ease-in-out infinite;
+/* Approved call-mockup.html: role tokens and class names are the only substitutions. */
+.chalk-icon-button {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--chalk-raised);
+  color: var(--chalk-text);
+  position: relative;
+  transition:
+    transform 0.15s ease-out,
+    opacity 0.25s ease-out;
+}
+.chalk-icon-button:hover {
+  background: var(--chalk-hover);
+}
+.chalk-icon-button:active {
+  transform: scale(0.94);
+  background: var(--chalk-pressed);
+}
+.chalk-icon-button[aria-pressed="true"] {
+  background: var(--chalk-text);
+  color: var(--chalk-canvas);
+}
+.chalk-icon-button[aria-pressed="true"]:hover {
+  background: var(--chalk-text-strong);
+}
+.chalk-icon-button[data-chalk-tone="danger"] {
+  background: var(--chalk-danger);
+  color: var(--chalk-on-overlay);
+}
+.chalk-icon-button[data-chalk-tone="danger"]:hover {
+  background: var(--chalk-danger-hover);
+}
+.chalk-pill-button {
+  height: 36px;
+  padding: 0 14px;
+  border-radius: 999px;
+  background: var(--chalk-hover);
+  color: var(--chalk-text);
+  font-weight: 600;
+  font-size: 13px;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  transition:
+    transform 0.15s ease-out,
+    opacity 0.15s;
+}
+.chalk-pill-button:hover {
+  background: var(--chalk-pressed);
+}
+.chalk-pill-button:active {
+  transform: scale(0.97);
+}
+.chalk-pill-button[data-chalk-variant="solid"] {
+  background: var(--chalk-text);
+  color: var(--chalk-canvas);
+}
+.chalk-pill-button[data-chalk-variant="solid"]:hover {
+  background: var(--chalk-text-strong);
+}
+.chalk-pill-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  transform: none;
+}
+.chalk-menu {
+  position: absolute;
+  z-index: 80;
+  min-width: 250px;
+  padding: 6px;
+  background: var(--chalk-popover);
+  border: 1px solid var(--chalk-line-strong);
+  border-radius: 12px;
+  box-shadow: 0 12px 32px var(--chalk-menu-shadow-color);
+  animation: pin 0.18s var(--chalk-ease-out-expo);
+}
+.chalk-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 40px;
+  padding: 0 10px;
+  border-radius: 9px;
+  text-align: left;
+  white-space: nowrap;
+}
+.chalk-menu-item:hover,
+.chalk-menu-item[data-highlighted],
+.chalk-menu-item:focus-visible {
+  background: var(--chalk-hover);
+}
+.chalk-menu-check {
+  width: 18px;
+  display: grid;
+  place-items: center;
+  flex: none;
+}
+.chalk-menu-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--chalk-muted-text);
+  padding: 8px 10px 4px;
+}
+.chalk-tooltip {
+  position: absolute;
+  z-index: 95;
+  padding: 5px 9px;
+  border-radius: 7px;
+  background: var(--chalk-text);
+  color: var(--chalk-canvas);
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.12s ease-out;
+}
+.chalk-tooltip[data-open] {
+  opacity: 1;
+}
+.chalk-segmented {
+  margin-left: auto;
+  display: flex;
+  padding: 3px;
+  border-radius: 999px;
+  background: var(--chalk-surface);
+}
+.chalk-segmented button {
+  height: 38px;
+  padding: 0 14px;
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--chalk-muted-text);
+}
+.chalk-segmented button[aria-pressed="true"] {
+  background: var(--chalk-pressed);
+  color: var(--chalk-text);
+}
+.chalk-copy {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  flex: none;
+  color: var(--chalk-text);
+  transition: transform 0.15s ease-out;
+}
+.chalk-copy:hover {
+  background: var(--chalk-pressed);
+}
+.chalk-copy:active {
+  transform: scale(0.92);
+}
+.chalk-copy-icon {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+}
+.chalk-copy-icon svg {
+  position: absolute;
+  inset: 0;
+  width: 18px;
+  height: 18px;
+  transition:
+    opacity 0.2s var(--chalk-ease-out-expo),
+    transform 0.2s var(--chalk-ease-out-expo);
+}
+.chalk-copy-check {
+  opacity: 0;
+  transform: scale(0.4) rotate(-20deg);
+  color: var(--chalk-positive);
+}
+.chalk-copied .chalk-copy-source {
+  opacity: 0;
+  transform: scale(0.4) rotate(20deg);
+}
+.chalk-copied .chalk-copy-check {
+  opacity: 1;
+  transform: none;
+}
+.chalk-toasts {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 92px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  z-index: 90;
+  pointer-events: none;
+}
+.chalk-toast {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 48px;
+  max-width: calc(100% - 32px);
+  padding: 6px 6px 6px 14px;
+  background: var(--chalk-popover);
+  border: 1px solid var(--chalk-line);
+  border-radius: 12px;
+  box-shadow: 0 8px 24px var(--chalk-toast-shadow-color);
+  pointer-events: auto;
+  animation: tin 0.2s var(--chalk-ease-out-expo);
+  transition:
+    opacity 0.15s ease-out,
+    transform 0.15s ease-out;
+}
+.chalk-toast > span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 4px;
+}
+.chalk-toast[data-exiting] {
+  opacity: 0;
+  transform: translateY(4px);
 }
 
-/* Canonical logo motion: the chalk sticks move while the wordmark stays fixed. */
-.chalk-logo {
-  display: block;
+[data-chalk] {
+  --chalk-menu-shadow-color: rgba(0, 0, 0, 0.5);
+  --chalk-toast-shadow-color: rgba(0, 0, 0, 0.4);
+}
+.chalk-icon-button[data-chalk-size="md"]:not([data-chalk-tone="danger"]) {
+  width: 40px;
+  height: 40px;
+  background: var(--chalk-surface);
+}
+.chalk-icon-button[data-chalk-size="sm"] {
+  width: 36px;
+  height: 36px;
+}
+.chalk-icon-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  transform: none;
+}
+.chalk-icon-button svg {
+  width: 20px;
+  height: 20px;
+}
+.chalk-menu-positioner {
+  z-index: 80;
+}
+.chalk-popover-positioner {
+  z-index: 85;
+}
+.chalk-menu {
+  position: relative;
+}
+.chalk-menu-item {
+  cursor: pointer;
+}
+.chalk-menu-item[data-disabled] {
+  opacity: 0.4;
+  pointer-events: none;
+}
+.chalk-menu-item svg {
+  width: 18px;
+  height: 18px;
+  color: var(--chalk-muted-text);
+}
+.chalk-menu-check {
+  height: 18px;
+}
+.chalk-popover {
+  max-width: calc(100vw - 16px);
+}
+.chalk-switch {
+  position: relative;
+  width: 36px;
+  height: 22px;
+  border-radius: 999px;
+  background: var(--chalk-pressed);
+  flex: none;
+}
+.chalk-switch > span:first-child {
+  position: absolute;
+  left: 3px;
+  top: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--chalk-on-overlay);
+  transition: transform 0.15s ease-out;
+}
+.chalk-switch[aria-checked="true"] {
+  background: var(--chalk-positive);
+}
+.chalk-switch[aria-checked="true"] > span:first-child {
+  transform: translateX(14px);
+}
+.chalk-sheet-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 38;
+  background: var(--chalk-scrim);
+  transition: opacity 0.2s ease-out;
+}
+.chalk-sheet-scrim[data-starting-style],
+.chalk-sheet-scrim[data-ending-style] {
+  opacity: 0;
+}
+.chalk-sheet {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 41;
+  padding: 8px 12px 42px;
+  background: var(--chalk-surface);
+  border-radius: 24px 24px 0 0;
+  transition: transform 0.24s var(--chalk-ease-out-expo);
+}
+.chalk-sheet[data-starting-style],
+.chalk-sheet[data-ending-style] {
+  transform: translateY(100%);
+}
+.chalk-sheet-handle {
+  width: 36px;
+  height: 5px;
+  border-radius: 3px;
+  background: var(--chalk-line-strong);
+  margin: 4px auto 12px;
+}
+.chalk-sheet-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 4px 8px 14px;
+  font-weight: 600;
+  font-size: 16px;
+}
+.chalk-details-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-height: 40px;
+  padding: 0 10px;
+}
+.chalk-details .chalk-segmented {
+  background: var(--chalk-hover);
+}
+.chalk-details .chalk-segmented button {
+  height: 30px;
+  padding: 0 14px;
+  font-size: 13px;
+}
+.chalk-details .chalk-segmented button[aria-pressed="true"] {
+  background: var(--chalk-popover);
+  color: var(--chalk-text);
+  box-shadow: 0 1px 2px var(--chalk-segment-shadow);
+}
+[data-chalk] {
+  --chalk-segment-shadow: rgba(0, 0, 0, 0.2);
+}
+[data-chalk][data-chalk-theme="light"] :is(.chalk-menu, .chalk-toast) {
+  box-shadow:
+    0 0 0 1px var(--chalk-line),
+    0 12px 32px rgba(0, 0, 0, 0.12);
+}
+[data-chalk][data-chalk-theme="light"] .chalk-icon-button:not([data-chalk-tone="danger"]) {
+  box-shadow: 0 0 0 1px var(--chalk-line);
+}
+.chalk-frame {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: clip;
+  background: var(--chalk-canvas);
+  color: var(--chalk-text);
+  font: 14px/1.4 var(--chalk-font-family);
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+}
+.chalk-sheet-group {
+  background: var(--chalk-raised);
+  border-radius: 16px;
+  overflow: hidden;
+}
+.chalk-sheet-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  width: 100%;
+  min-height: 52px;
+  padding: 0 16px;
+  font-size: 16px;
+  text-align: left;
+}
+.chalk-sheet-row > svg:first-child {
+  width: 20px;
+  height: 20px;
+  flex: none;
+  color: var(--chalk-soft-text);
+}
+.chalk-sheet-row[data-part="dock-layout-row"] {
+  box-shadow: inset 0 1px 0 var(--chalk-line);
+}
+.chalk-frame-header {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 60px;
+  z-index: 30;
+  transition: opacity 0.25s ease-out;
+}
+.chalk-header {
+  display: flex;
+  height: 60px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px 0 24px;
+}
+.chalk-call-name {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 15px;
+  font-weight: 600;
+  height: 40px;
+  padding: 0 10px;
+  margin-left: -10px;
+  border-radius: 999px;
+  transition: transform 0.15s ease-out;
+}
+.chalk-call-name:hover {
+  background: var(--chalk-raised);
+}
+.chalk-call-name:active {
+  transform: scale(0.97);
+}
+.chalk-call-timer {
+  color: var(--chalk-muted-text);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+.chalk-frame-stage {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.chalk-stage-layout {
+  position: absolute;
+  inset: 60px 16px 84px;
+  pointer-events: auto;
+  min-height: 0;
+  min-width: 0;
+}
+.chalk-frame:has(.chalk-drawer[data-state="open"]) .chalk-stage-layout {
+  right: 368px;
+}
+.chalk-stage-layout [data-testid="stage"] {
   overflow: visible;
 }
-
-.chalk-logo__stick {
-  transform-box: fill-box;
-  transform-origin: center;
+.chalk-stage-layout [data-testid="stage"] > div > [aria-hidden="true"] {
+  visibility: hidden;
+  pointer-events: none;
 }
-
-@keyframes chalk-logo-orbit-green {
-  0%,
-  100% {
-    transform: translate(0, 0) rotate(0deg);
-  }
-
-  50% {
-    transform: translate(-4px, 3px) rotate(-5deg);
-  }
+.chalk-frame-dock {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 20px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  z-index: 30;
+  transition: opacity 0.25s ease-out;
+  pointer-events: none;
 }
-
-@keyframes chalk-logo-orbit-yellow {
-  0%,
-  100% {
-    transform: translate(0, 0) rotate(0deg);
-  }
-
-  50% {
-    transform: translate(3px, -4px) rotate(4deg);
+.chalk-frame-dock > * {
+  pointer-events: auto;
+}
+.chalk-frame-compact {
+  display: none;
+}
+.chalk-frame-overlays {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.chalk-frame-overlays > * {
+  pointer-events: auto;
+}
+.chalk-frame[data-idle="true"] :is(.chalk-frame-header, .chalk-frame-dock) {
+  opacity: 0;
+  pointer-events: none;
+}
+.chalk-frame[data-idle="true"] .chalk-frame-dock > * {
+  pointer-events: none;
+}
+.chalk-drawer {
+  position: absolute;
+  right: 12px;
+  top: 60px;
+  bottom: 84px;
+  width: 340px;
+  z-index: 40;
+}
+.chalk-drawer-content {
+  height: 100%;
+  border-radius: 16px;
+  overflow: hidden;
+  background: var(--chalk-surface);
+}
+@starting-style {
+  .chalk-drawer[data-state="open"] {
+    opacity: 0;
+    transform: translateX(16px);
   }
 }
-
-@keyframes chalk-logo-orbit-blue {
-  0%,
-  100% {
-    transform: translate(0, 0) rotate(0deg);
+.chalk-drawer[data-state="closing"] {
+  opacity: 0;
+  transform: translateX(16px);
+  transition:
+    opacity 0.2s var(--chalk-ease-out-expo),
+    transform 0.2s var(--chalk-ease-out-expo);
+  pointer-events: none;
+}
+.chalk-drawer-scrim {
+  display: none;
+}
+.chalk-tooltip {
+  position: relative;
+  opacity: 1;
+}
+@keyframes pin {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
   }
-
-  50% {
-    transform: translate(5px, 2px) rotate(5deg);
+}
+@keyframes tin {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
   }
 }
-
-@keyframes chalk-logo-orbit-pink {
-  0%,
-  100% {
-    transform: translate(0, 0) rotate(0deg);
+[data-chalk] :is(button, [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]):focus-visible {
+  outline: 2px solid var(--chalk-focus);
+  outline-offset: 2px;
+}
+[data-chalk] .chalk-menu-item:focus-visible {
+  outline-offset: -2px;
+}
+@media (max-width: 640px) {
+  .chalk-frame-header,
+  .chalk-header {
+    height: 52px;
   }
-
-  50% {
-    transform: translate(-3px, -3px) rotate(-4deg);
+  .chalk-header {
+    padding: 0 20px;
   }
-}
-
-@keyframes chalk-logo-burst-green {
-  0%,
-  100% {
-    transform: translate(0, 0) scale(1) rotate(0deg);
+  .chalk-header-layout {
+    display: none;
   }
-
-  24% {
-    transform: translate(-14px, -9px) scale(1.14) rotate(-8deg);
+  .chalk-stage-layout,
+  .chalk-frame:has(.chalk-drawer[data-state="open"]) .chalk-stage-layout {
+    inset: 52px 8px 106px;
   }
-
-  54% {
-    transform: translate(-2px, 2px) scale(0.98) rotate(2deg);
+  .chalk-frame-dock {
+    bottom: 42px;
+    height: 52px;
   }
-}
-
-@keyframes chalk-logo-burst-yellow {
-  0%,
-  100% {
-    transform: translate(0, 0) scale(1) rotate(0deg);
+  .chalk-frame-regular {
+    display: none;
   }
-
-  24% {
-    transform: translate(-4px, -14px) scale(1.14) rotate(-4deg);
+  .chalk-frame-compact {
+    display: block;
   }
-
-  54% {
-    transform: translate(1px, 1px) scale(0.98) rotate(1deg);
+  .chalk-menu-item {
+    min-height: 48px;
   }
-}
-
-@keyframes chalk-logo-burst-blue {
-  0%,
-  100% {
-    transform: translate(0, 0) scale(1) rotate(0deg);
+  .chalk-toasts {
+    bottom: 110px;
   }
-
-  24% {
-    transform: translate(14px, -6px) scale(1.16) rotate(8deg);
+  .chalk-drawer {
+    inset: auto 0 0;
+    width: 100%;
+    max-height: calc(100% - 52px);
+    height: 70%;
+    border-radius: 24px 24px 0 0;
   }
-
-  54% {
-    transform: translate(2px, 1px) scale(0.98) rotate(-2deg);
+  .chalk-drawer-content {
+    border-radius: 24px 24px 0 0;
   }
 }
-
-@keyframes chalk-logo-burst-pink {
-  0%,
-  100% {
-    transform: translate(0, 0) scale(1) rotate(0deg);
+@media (pointer: coarse) {
+  .chalk-icon-button {
+    min-width: 44px;
+    min-height: 44px;
   }
-
-  24% {
-    transform: translate(11px, 12px) scale(1.13) rotate(7deg);
-  }
-
-  54% {
-    transform: translate(1px, -1px) scale(0.98) rotate(-1deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-chalk] *,
+  [data-chalk] *::before,
+  [data-chalk] *::after {
+    animation: none !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
   }
 }
 
-[data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick {
-  animation-duration: 4.8s;
-  animation-iteration-count: infinite;
-  animation-timing-function: ease-in-out;
-  will-change: transform;
+.chalk-segmented[data-size="compact"] {
+  background: var(--chalk-hover);
 }
-
-[data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick--green {
-  animation-name: chalk-logo-orbit-green;
-  animation-delay: -120ms;
+.chalk-segmented[data-size="compact"] button {
+  height: 30px;
+  padding: 0 14px;
+  font-size: 13px;
 }
-
-[data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick--yellow {
-  animation-name: chalk-logo-orbit-yellow;
-  animation-delay: -760ms;
+.chalk-segmented[data-size="compact"] button[aria-pressed="true"] {
+  background: var(--chalk-popover);
+  color: var(--chalk-text);
+  box-shadow: 0 1px 2px var(--chalk-segment-shadow);
 }
 
-[data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick--blue {
-  animation-name: chalk-logo-orbit-blue;
-  animation-delay: -1.35s;
+.chalk-dismiss {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: var(--chalk-muted-text);
+  flex: none;
 }
-
-[data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick--pink {
-  animation-name: chalk-logo-orbit-pink;
-  animation-delay: -2.05s;
+.chalk-dismiss:hover {
+  background: var(--chalk-hover);
+  color: var(--chalk-text);
+}
+.chalk-dismiss:active {
+  background: var(--chalk-pressed);
+}
+.chalk-dismiss svg {
+  width: 18px;
+  height: 18px;
+}
+.chalk-call-details {
+  z-index: 85;
+  width: 368px;
+  max-height: calc(100vh - 150px);
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--chalk-pressed) transparent;
+  padding: 8px 8px 10px;
+  animation: none;
+  transition:
+    opacity 0.18s var(--chalk-ease-out-expo),
+    transform 0.18s var(--chalk-ease-out-expo);
+}
+.chalk-call-details[data-starting-style],
+.chalk-call-details[data-ending-style] {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+.chalk-call-name {
+  gap: 10px;
+}
+.chalk-call-name > svg {
+  color: var(--chalk-muted-text);
+  margin-left: -4px;
+}
+.chalk-call-name[aria-expanded="true"] {
+  background: var(--chalk-raised);
 }
 
-@media (hover: hover) and (pointer: fine) {
-  [data-chalk-logo-motion="orbit-burst"]:hover .chalk-logo__stick {
-    animation-duration: 1.1s;
-    animation-delay: 0ms;
-    animation-timing-function: var(--chalk-ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
+@media (min-width: 641px) {
+  .chalk-device-menu {
+    width: 320px;
   }
+}
+.chalk-header {
+  transition: opacity 0.25s ease-out;
+}
+.chalk-menu-check svg {
+  color: var(--chalk-text);
+}
+.chalk-tooltip[data-starting-style],
+.chalk-tooltip[data-ending-style] {
+  opacity: 0;
+}
+.chalk-frame[data-idle="true"] :is(.chalk-frame-header, .chalk-frame-dock) * {
+  pointer-events: none !important;
+}
 
-  [data-chalk-logo-motion="orbit-burst"]:hover .chalk-logo__stick--green {
-    animation-name: chalk-logo-burst-green;
+.chalk-icon-button[data-chalk-tone="danger"]:active {
+  background: var(--chalk-danger-pressed);
+}
+@media (pointer: coarse) {
+  :is(.chalk-switch, .chalk-segmented button, .chalk-pill-button, .chalk-dismiss, .chalk-copy) {
+    position: relative;
   }
-
-  [data-chalk-logo-motion="orbit-burst"]:hover .chalk-logo__stick--yellow {
-    animation-name: chalk-logo-burst-yellow;
+  :is(.chalk-switch, .chalk-segmented button, .chalk-pill-button, .chalk-dismiss, .chalk-copy)::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: max(100%, 44px);
+    height: max(100%, 44px);
+    transform: translate(-50%, -50%);
   }
+}
 
-  [data-chalk-logo-motion="orbit-burst"]:hover .chalk-logo__stick--blue {
-    animation-name: chalk-logo-burst-blue;
+@media (max-width: 640px) {
+  .chalk-frame-dock {
+    padding: 0 22px;
+    justify-content: space-between;
+    gap: 0;
   }
-
-  [data-chalk-logo-motion="orbit-burst"]:hover .chalk-logo__stick--pink {
-    animation-name: chalk-logo-burst-pink;
+  .chalk-icon-button[data-chalk-size="lg"] {
+    width: 52px;
+    height: 52px;
   }
 }
 
-:where(a, button):focus-visible [data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick,
-[data-chalk-logo-motion="orbit-burst"]:focus-visible .chalk-logo__stick {
-  animation-duration: 1.1s;
-  animation-delay: 0ms;
-  animation-timing-function: var(--chalk-ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
+.chalk-drawer {
+  background: var(--chalk-surface);
+  border: 1px solid var(--chalk-line);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition:
+    opacity 0.2s var(--chalk-ease-out-expo),
+    transform 0.2s var(--chalk-ease-out-expo);
+}
+.chalk-sheet[data-variant="details"] {
+  max-height: 88%;
+  overflow: auto;
+  padding: 8px 14px 42px;
+  background: var(--chalk-popover);
+  border: 1px solid var(--chalk-line-strong);
+  border-width: 1px 0 0;
+  box-shadow: 0 12px 32px var(--chalk-menu-shadow-color);
+  transform: translateY(32px);
+  scrollbar-width: thin;
+  scrollbar-color: var(--chalk-pressed) transparent;
+  transition:
+    opacity 0.18s var(--chalk-ease-out-expo),
+    transform 0.18s var(--chalk-ease-out-expo);
+}
+.chalk-sheet[data-variant="details"] .chalk-sheet-heading {
+  gap: 8px;
+  padding: 2px 0 4px 10px;
+  font-size: 15px;
+}
+.chalk-sheet[data-variant="details"]:is([data-starting-style], [data-ending-style]) {
+  opacity: 0;
+  transform: translateY(32px);
+}
+.chalk-sheet[data-variant="panel"] {
+  z-index: 40;
+  height: 78%;
+  max-height: none;
+  padding: 0;
+  background: var(--chalk-surface);
+  border: 1px solid var(--chalk-line);
+  border-width: 1px 0 0;
+  transition:
+    opacity 0.2s var(--chalk-ease-out-expo),
+    transform 0.2s var(--chalk-ease-out-expo);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transform: translateY(32px);
+}
+.chalk-sheet[data-variant="panel"]:is([data-starting-style], [data-ending-style]) {
+  opacity: 0;
+  transform: translateY(32px);
+}
+.chalk-sheet[data-variant="panel"] .chalk-sheet-handle {
+  margin: 8px auto 0;
+  flex: none;
+}
+[data-chalk][data-chalk-theme="light"] .chalk-sheet[data-variant="details"] {
+  box-shadow:
+    0 0 0 1px var(--chalk-line),
+    0 12px 32px rgba(0, 0, 0, 0.12);
+}
+@media (max-width: 640px) {
+  .chalk-header-title {
+    flex: 1;
+    justify-content: space-between;
+    font-size: 15px;
+    font-weight: 600;
+  }
+  .chalk-call-name-phone {
+    gap: 4px;
+    height: 44px;
+    padding: 0 6px;
+    margin-left: -6px;
+    transition: all 0s ease;
+  }
+  .chalk-call-name-phone > svg {
+    width: 16px;
+    height: 16px;
+    margin: 0;
+  }
 }
 
-:where(a, button):focus-visible [data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick--green,
-[data-chalk-logo-motion="orbit-burst"]:focus-visible .chalk-logo__stick--green {
-  animation-name: chalk-logo-burst-green;
+.chalk-menu,
+.chalk-sheet {
+  font: 14px/1.4 var(--chalk-font-family);
 }
 
-:where(a, button):focus-visible [data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick--yellow,
-[data-chalk-logo-motion="orbit-burst"]:focus-visible .chalk-logo__stick--yellow {
-  animation-name: chalk-logo-burst-yellow;
+.chalk-copy {
+  font-weight: 500;
 }
 
-:where(a, button):focus-visible [data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick--blue,
-[data-chalk-logo-motion="orbit-burst"]:focus-visible .chalk-logo__stick--blue {
-  animation-name: chalk-logo-burst-blue;
+.chalk-menu[data-ending-style] {
+  animation: none;
 }
-
-:where(a, button):focus-visible [data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick--pink,
-[data-chalk-logo-motion="orbit-burst"]:focus-visible .chalk-logo__stick--pink {
-  animation-name: chalk-logo-burst-pink;
+.chalk-sheet[data-variant="details"] .chalk-sheet-heading {
+  font-size: 14px;
+  font-weight: 400;
 }
-
-/* Low confidence text styling */
-.chalk-low-confidence {
-  text-decoration: underline;
-  text-decoration-style: dotted;
-  text-decoration-color: var(--warning);
-  text-underline-offset: 3px;
+.chalk-sheet-heading h2 {
+  font-size: 15px;
+  font-weight: 600;
 }
 
-/* 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;
-  }
+.chalk-call-name-phone:is(:hover, [aria-expanded="true"]) {
+  background: transparent;
 }