@moldable-ai/ui 0.2.18 → 0.2.20

package/src/styles/index.css

@@ -5,20 +5,260 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* Keep Sonner notifications visually aligned with Moldable's local-update notice. */
+[data-sonner-toaster].toaster [data-sonner-toast][data-styled='true'] {
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius);
+  box-shadow: var(--material-shadow-overlay);
+  font-size: 0.875rem;
+  -webkit-backdrop-filter: blur(var(--material-blur-overlay));
+  backdrop-filter: blur(var(--material-blur-overlay));
+}
+
+[data-sonner-toaster].toaster
+  [data-sonner-toast][data-styled='true']
+  [data-button] {
+  height: 1.75rem;
+  padding-inline: 0.75rem;
+  border-radius: calc(var(--radius) - 2px);
+  background: var(--primary);
+  color: var(--primary-foreground);
+  font-size: 0.75rem;
+  transition: background-color var(--motion-duration-fast)
+    var(--motion-ease-standard);
+}
+
+[data-sonner-toaster].toaster
+  [data-sonner-toast][data-styled='true']
+  [data-button]:hover {
+  background: color-mix(in oklch, var(--primary) 90%, transparent);
+}
+
+.message-scroller-viewport {
+  -webkit-mask-image: none;
+  mask-image: none;
+}
+
+.message-scroller-viewport[data-scrollable='end'] {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    black 0%,
+    black calc(100% - 4rem),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    black 0%,
+    black calc(100% - 4rem),
+    transparent 100%
+  );
+}
+
+.message-scroller-viewport[data-scrollable='start'] {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 4rem,
+    black 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 4rem,
+    black 100%
+  );
+}
+
+.message-scroller-viewport[data-scrollable='start end'] {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 4rem,
+    black calc(100% - 4rem),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 4rem,
+    black calc(100% - 4rem),
+    transparent 100%
+  );
+}
+
+/* ChatGPT-style user-message rail: compact at rest, expanding around hover. */
+[data-message-navigation-marker] {
+  --message-navigation-progress: 0;
+  transform: scaleX(calc(0.2308 + 0.7692 * var(--message-navigation-progress)));
+  transition:
+    transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 150ms ease,
+    opacity 150ms ease;
+}
+
+:is(
+    [data-message-navigation-row]:hover,
+    [data-message-navigation-row]:focus-visible
+  )
+  [data-message-navigation-marker] {
+  --message-navigation-progress: 1;
+  background-color: var(--foreground);
+  opacity: 1;
+}
+
+:is(
+    [data-message-navigation-row]:has(
+      + [data-message-navigation-row]:is(:hover, :focus-visible)
+    ),
+    [data-message-navigation-row]:is(:hover, :focus-visible)
+      + [data-message-navigation-row]
+  )
+  [data-message-navigation-marker] {
+  --message-navigation-progress: 0.7;
+}
+
+:is(
+    [data-message-navigation-row]:has(
+      + [data-message-navigation-row]
+        + [data-message-navigation-row]:is(:hover, :focus-visible)
+    ),
+    [data-message-navigation-row]:is(:hover, :focus-visible)
+      + [data-message-navigation-row]
+      + [data-message-navigation-row]
+  )
+  [data-message-navigation-marker] {
+  --message-navigation-progress: 0.4;
+}
+
+:is(
+    [data-message-navigation-row]:has(
+      + [data-message-navigation-row]
+        + [data-message-navigation-row]
+        + [data-message-navigation-row]:is(:hover, :focus-visible)
+    ),
+    [data-message-navigation-row]:is(:hover, :focus-visible)
+      + [data-message-navigation-row]
+      + [data-message-navigation-row]
+      + [data-message-navigation-row]
+  )
+  [data-message-navigation-marker] {
+  --message-navigation-progress: 0.2;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-message-navigation-marker] {
+    transition-duration: 0s;
+  }
+}
+
+@keyframes moldable-chat-fullscreen-enter {
+  from {
+    opacity: 0;
+    transform: translateY(1.5rem) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+[data-moldable-chat-fullscreen][data-state='open'] {
+  animation: moldable-chat-fullscreen-enter 280ms cubic-bezier(0.22, 1, 0.36, 1);
+  transform-origin: bottom center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-moldable-chat-fullscreen][data-state='open'] {
+    animation-duration: 0s;
+  }
+}
+
 /* Ensure Tailwind scans UI component class strings */
 @source "../../dist/**/*.{js,jsx,ts,tsx}";
+@source "../catalog/**/*.{js,jsx,ts,tsx}";
 @source "../components/**/*.{js,jsx,ts,tsx}";
 @source "../lib/**/*.{js,jsx,ts,tsx}";
 @source "../hooks/**/*.{js,jsx,ts,tsx}";
 @source "../index.{js,jsx,ts,tsx}";
 
 @theme inline {
+  --font-sans: var(--font-family-ui);
+  --font-mono: var(--font-family-mono);
+
+  --text-ui-display: var(--type-display-size);
+  --text-ui-display--line-height: var(--type-display-line-height);
+  --text-ui-display--font-weight: var(--type-display-weight);
+  --text-ui-display--letter-spacing: var(--type-display-tracking);
+  --text-ui-heading: var(--type-heading-size);
+  --text-ui-heading--line-height: var(--type-heading-line-height);
+  --text-ui-heading--font-weight: var(--type-heading-weight);
+  --text-ui-heading--letter-spacing: var(--type-heading-tracking);
+  --text-ui-title: var(--type-title-size);
+  --text-ui-title--line-height: var(--type-title-line-height);
+  --text-ui-title--font-weight: var(--type-title-weight);
+  --text-ui-title--letter-spacing: var(--type-title-tracking);
+  --text-ui-body: var(--type-body-size);
+  --text-ui-body--line-height: var(--type-body-line-height);
+  --text-ui-label: var(--type-label-size);
+  --text-ui-label--line-height: var(--type-label-line-height);
+  --text-ui-caption: var(--type-caption-size);
+  --text-ui-caption--line-height: var(--type-caption-line-height);
+
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+  --radius-control: var(--shape-control);
+  --radius-container: var(--shape-container);
+  --radius-overlay: var(--shape-overlay);
+  --radius-window: var(--window-corner-radius);
+
+  --spacing-control-gap: var(--density-control-gap);
+  --spacing-control-inline: var(--density-control-padding-inline);
+  --spacing-control-xs: var(--density-control-height-xs);
+  --spacing-control-sm: var(--density-control-height-sm);
+  --spacing-control-md: var(--density-control-height-md);
+  --spacing-control-lg: var(--density-control-height-lg);
+  --spacing-row: var(--density-row-height);
+  --spacing-toolbar: var(--density-toolbar-height);
+  --spacing-pane: var(--density-pane-padding);
+  --spacing-section: var(--density-section-gap);
+
+  --ease-standard: var(--motion-ease-standard);
+  --ease-enter: var(--motion-ease-enter);
+  --ease-exit: var(--motion-ease-exit);
+  --ease-spring: var(--motion-ease-spring);
+  --shadow-panel: var(--material-shadow-panel);
+  --shadow-overlay: var(--material-shadow-overlay);
+  --shadow-window: var(--material-shadow-window);
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-tertiary: var(--text-tertiary);
+  --color-text-disabled: var(--text-disabled);
+  --color-surface-canvas: var(--surface-canvas);
+  --color-surface-raised: var(--surface-raised);
+  --color-surface-recessed: var(--surface-recessed);
+  --color-surface-sidebar: var(--surface-sidebar);
+  --color-surface-toolbar: var(--surface-toolbar);
+  --color-surface-overlay: var(--surface-overlay);
+  --color-surface-selected: var(--surface-selected);
+  --color-separator: var(--separator);
+  --color-separator-strong: var(--separator-strong);
+  --color-control-hover: var(--control-hover);
+  --color-control-pressed: var(--control-pressed);
+  --color-control-selected: var(--control-selected);
+  --color-control-selected-foreground: var(--control-selected-foreground);
+  --color-control-disabled: var(--control-disabled);
+  --color-control-focus: var(--control-focus);
+  --color-control-invalid: var(--control-invalid);
+  --color-window-chrome: var(--window-chrome-background);
+  --color-window-chrome-foreground: var(--window-chrome-foreground);
+  --color-window-chrome-muted: var(--window-chrome-muted-foreground);
+  --color-window-border: var(--window-border);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
@@ -57,6 +297,8 @@
   --color-status-stopped: var(--status-stopped);
   --color-status-pending: var(--status-pending);
   --color-status-error: var(--status-error);
+  --color-model-effort-blue: var(--model-effort-blue);
+  --color-model-effort-purple: var(--model-effort-purple);
   --color-terminal: var(--terminal);
   --color-terminal-header: var(--terminal-header);
   --color-terminal-foreground: var(--terminal-foreground);
@@ -65,7 +307,7 @@
   --color-terminal-stdout: var(--terminal-stdout);
   --color-terminal-stderr: var(--terminal-stderr);
   --color-terminal-error: var(--terminal-error);
-  --chat-safe-padding: var(--chat-safe-padding);
+  --spacing-chat-safe: var(--chat-safe-padding);
 }
 
 @keyframes moldable-chat-shimmer {
@@ -77,6 +319,361 @@
   }
 }
 
+@property --model-effort-mask-position {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 0%;
+}
+
+@keyframes model-effort-power-reveal {
+  from {
+    --model-effort-mask-position: 100%;
+  }
+  to {
+    --model-effort-mask-position: 0%;
+  }
+}
+
+@keyframes model-effort-power-field {
+  0% {
+    transform: translate3d(-7%, -3%, 0) scale(1.02);
+  }
+  45% {
+    transform: translate3d(6%, 4%, 0) scale(1.12);
+  }
+  100% {
+    transform: translate3d(-1%, -6%, 0) scale(1.06);
+  }
+}
+
+@keyframes model-effort-power-particle-stream {
+  0% {
+    opacity: 0;
+    transform: translate3d(102%, -50%, 0);
+  }
+  10% {
+    opacity: calc(var(--particle-opacity) * 0.55);
+    transform: translate3d(98%, -50%, 0);
+  }
+  45% {
+    opacity: var(--particle-opacity);
+    transform: translate3d(75%, -50%, 0);
+  }
+  75% {
+    opacity: var(--particle-opacity);
+    transform: translate3d(38%, -50%, 0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(-6%, -50%, 0);
+  }
+}
+
+@keyframes model-effort-max-burst {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.35);
+  }
+  18% {
+    opacity: 0.95;
+  }
+  100% {
+    opacity: 0;
+    transform: translate(
+        calc(-50% + var(--burst-x)),
+        calc(-50% + var(--burst-y))
+      )
+      scale(0.12);
+  }
+}
+
+@keyframes model-effort-popover-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes model-effort-popover-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+}
+
+.model-effort-popover {
+  transform-origin: var(--radix-popover-content-transform-origin);
+  will-change: opacity, transform;
+}
+
+.model-effort-popover[data-state='open'] {
+  animation: model-effort-popover-in 320ms cubic-bezier(0.23, 1, 0.32, 1) 30ms
+    both;
+}
+
+.model-effort-popover[data-state='closed'] {
+  visibility: visible;
+  pointer-events: none;
+  animation: model-effort-popover-out 320ms cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+
+.model-effort-power-fill {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.model-effort-power-fill[data-level='light'] {
+  background: linear-gradient(
+    90deg,
+    color-mix(
+        in srgb,
+        var(--model-effort-sparkle) 94%,
+        var(--model-effort-blue)
+      )
+      0%,
+    color-mix(
+        in srgb,
+        var(--model-effort-sparkle) 80%,
+        var(--model-effort-blue)
+      )
+      100%
+  );
+}
+
+.model-effort-power-fill[data-level='medium'] {
+  background: linear-gradient(
+    90deg,
+    color-mix(
+        in srgb,
+        var(--model-effort-sparkle) 76%,
+        var(--model-effort-blue)
+      )
+      0%,
+    color-mix(
+        in srgb,
+        var(--model-effort-sparkle) 48%,
+        var(--model-effort-blue)
+      )
+      100%
+  );
+}
+
+.model-effort-power-fill[data-level='high'] {
+  background: linear-gradient(
+    90deg,
+    color-mix(
+        in srgb,
+        var(--model-effort-sparkle) 42%,
+        var(--model-effort-blue)
+      )
+      0%,
+    color-mix(
+        in srgb,
+        var(--model-effort-sparkle) 12%,
+        var(--model-effort-blue)
+      )
+      100%
+  );
+}
+
+.model-effort-power-fill[data-level='xhigh'] {
+  background: linear-gradient(
+    90deg,
+    color-mix(
+        in srgb,
+        var(--model-effort-sparkle) 16%,
+        var(--model-effort-blue)
+      )
+      0%,
+    color-mix(in srgb, var(--model-effort-blue) 76%, var(--model-effort-purple))
+      58%,
+    color-mix(in srgb, var(--model-effort-blue) 54%, var(--model-effort-purple))
+      100%
+  );
+}
+
+.model-effort-power-fill[data-level='max'] {
+  --model-effort-mask-position: 0%;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--model-effort-blue) 60%, var(--model-effort-purple))
+      0%,
+    var(--model-effort-purple) 55%,
+    color-mix(in srgb, var(--model-effort-purple) 72%, var(--model-effort-blue))
+      100%
+  );
+  --model-effort-reveal-mask: linear-gradient(
+    90deg,
+    transparent calc(var(--model-effort-mask-position) - 120px),
+    black var(--model-effort-mask-position),
+    black 100%
+  );
+  -webkit-mask-image: var(--model-effort-reveal-mask);
+  mask-image: var(--model-effort-reveal-mask);
+}
+
+.model-effort-power-fill[data-level='max'][data-reveal='true'] {
+  animation: model-effort-power-reveal 2s both;
+}
+
+.model-effort-power-field {
+  position: absolute;
+  inset: -90% -24%;
+  background:
+    radial-gradient(
+      circle at 18% 35%,
+      color-mix(
+          in srgb,
+          var(--model-effort-blue) 90%,
+          var(--model-effort-sparkle)
+        )
+        0 8%,
+      transparent 34%
+    ),
+    radial-gradient(
+      circle at 47% 60%,
+      color-mix(
+          in srgb,
+          var(--model-effort-purple) 78%,
+          var(--model-effort-sparkle)
+        )
+        0 11%,
+      transparent 38%
+    ),
+    radial-gradient(
+      circle at 78% 34%,
+      color-mix(in srgb, var(--model-effort-purple) 70%, var(--background)) 0
+        10%,
+      transparent 36%
+    ),
+    radial-gradient(
+      circle at 63% 72%,
+      color-mix(
+          in srgb,
+          var(--model-effort-purple) 84%,
+          var(--model-effort-blue)
+        )
+        0 9%,
+      transparent 34%
+    );
+  mix-blend-mode: luminosity;
+  animation: model-effort-power-field 4.8s ease-in-out infinite alternate;
+  will-change: transform;
+}
+
+.model-effort-power-fill[data-level='xhigh'] .model-effort-power-field {
+  opacity: 0.46;
+  animation-duration: 6.4s;
+}
+
+.model-effort-power-fill[data-level='light'] .model-effort-power-field {
+  opacity: 0.12;
+  animation-duration: 9s;
+}
+
+.model-effort-power-fill[data-level='medium'] .model-effort-power-field {
+  opacity: 0.22;
+  animation-duration: 8s;
+}
+
+.model-effort-power-fill[data-level='high'] .model-effort-power-field {
+  opacity: 0.34;
+  animation-duration: 7.1s;
+}
+
+.model-effort-power-fill[data-level='max'] .model-effort-power-field {
+  opacity: 0.9;
+}
+
+.model-effort-power-particles {
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+}
+
+.model-effort-power-fill[data-level='xhigh'] .model-effort-power-particles {
+  opacity: 0.42;
+}
+
+.model-effort-power-fill[data-level='light'] .model-effort-power-particles {
+  opacity: 0.12;
+}
+
+.model-effort-power-fill[data-level='medium'] .model-effort-power-particles {
+  opacity: 0.2;
+}
+
+.model-effort-power-fill[data-level='high'] .model-effort-power-particles {
+  opacity: 0.3;
+}
+
+.model-effort-power-fill[data-level='light']
+  .model-effort-power-particle:not(:nth-child(4n + 1)),
+.model-effort-power-fill[data-level='medium']
+  .model-effort-power-particle:nth-child(even) {
+  display: none;
+}
+
+.model-effort-power-fill[data-level='xhigh']
+  .model-effort-power-particle:nth-child(even) {
+  display: none;
+}
+
+.model-effort-power-particle {
+  position: absolute;
+  right: 0;
+  left: 0;
+  height: 3px;
+  animation-name: model-effort-power-particle-stream;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  will-change: opacity, transform;
+}
+
+.model-effort-power-particle::before {
+  display: block;
+  width: 3px;
+  height: 3px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--model-effort-sparkle) 72%, transparent);
+  box-shadow: 0 0 5px
+    color-mix(in srgb, var(--model-effort-sparkle) 34%, transparent);
+  content: '';
+  transform: scale(var(--particle-scale));
+}
+
+.model-effort-max-burst {
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  width: 76px;
+  height: 76px;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+}
+
+.model-effort-max-burst-particle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 5px;
+  height: 5px;
+  border-radius: 999px;
+  animation: model-effort-max-burst 620ms cubic-bezier(0.25, 1, 0.5, 1) both;
+}
+
 .moldable-chat-shimmer {
   color: transparent;
   background: linear-gradient(
@@ -94,6 +691,57 @@
 }
 
 :root {
+  /*
+   * Stable design decisions. Components and applications should consume these
+   * semantic roles instead of deriving their own grays, sizes, or timings.
+   */
+  --font-family-ui:
+    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-family-mono: ui-monospace, Menlo, Consolas, monospace;
+
+  --type-display-size: 2rem;
+  --type-display-line-height: 2.25rem;
+  --type-display-weight: 650;
+  --type-display-tracking: -0.035em;
+  --type-heading-size: 1.5rem;
+  --type-heading-line-height: 1.75rem;
+  --type-heading-weight: 650;
+  --type-heading-tracking: -0.025em;
+  --type-title-size: 1.125rem;
+  --type-title-line-height: 1.5rem;
+  --type-title-weight: 600;
+  --type-title-tracking: -0.015em;
+  --type-body-size: 0.8125rem;
+  --type-body-line-height: 1.25rem;
+  --type-label-size: 0.75rem;
+  --type-label-line-height: 1rem;
+  --type-caption-size: 0.625rem;
+  --type-caption-line-height: 0.75rem;
+
+  --density-control-height-xs: 1.5rem;
+  --density-control-height-sm: 2rem;
+  --density-control-height-md: 2.25rem;
+  --density-control-height-lg: 2.5rem;
+  --density-control-gap: 0.375rem;
+  --density-control-padding-inline: 0.75rem;
+  --density-row-height: 2.25rem;
+  --density-toolbar-height: 2.5rem;
+  --density-pane-padding: 0.75rem;
+  --density-section-gap: 1rem;
+
+  --shape-control: 0.5rem;
+  --shape-container: 0.65rem;
+  --shape-overlay: 0.75rem;
+
+  --motion-duration-instant: 80ms;
+  --motion-duration-fast: 120ms;
+  --motion-duration-normal: 180ms;
+  --motion-duration-slow: 280ms;
+  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --motion-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
+  --motion-ease-spring: cubic-bezier(0.22, 1.15, 0.36, 1);
+
   --radius: 0.65rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
@@ -114,6 +762,9 @@
   --border: oklch(0.92 0.004 286.32);
   --input: oklch(0.92 0.004 286.32);
   --ring: oklch(0.7145 0.185 45.03);
+  --model-effort-blue: #339cff;
+  --model-effort-purple: #924ff7;
+  --model-effort-sparkle: #fff;
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -135,6 +786,81 @@
   --status-stopped: oklch(0.552 0.016 285.938);
   --status-pending: oklch(0.75 0.15 75);
   --status-error: oklch(0.5866 0.1994 31.76);
+
+  --text-primary: var(--foreground);
+  --text-secondary: var(--muted-foreground);
+  --text-tertiary: color-mix(
+    in oklch,
+    var(--muted-foreground) 72%,
+    transparent
+  );
+  --text-disabled: color-mix(
+    in oklch,
+    var(--muted-foreground) 50%,
+    transparent
+  );
+  --surface-canvas: var(--background);
+  --surface-raised: var(--card);
+  --surface-recessed: color-mix(in oklch, var(--muted) 52%, var(--background));
+  --surface-sidebar: var(--sidebar);
+  --surface-toolbar: color-mix(in oklch, var(--background) 82%, transparent);
+  --surface-overlay: color-mix(in oklch, var(--popover) 92%, transparent);
+  --surface-selected: var(--accent);
+  --separator: color-mix(in oklch, var(--border) 78%, transparent);
+  --separator-strong: var(--border);
+  --control-hover: color-mix(in oklch, var(--foreground) 6%, transparent);
+  --control-pressed: color-mix(in oklch, var(--foreground) 10%, transparent);
+  --control-selected: var(--accent);
+  --control-selected-foreground: var(--accent-foreground);
+  --control-disabled: color-mix(
+    in oklch,
+    var(--muted-foreground) 10%,
+    transparent
+  );
+  --control-focus: var(--ring);
+  --control-invalid: var(--destructive);
+
+  --material-blur-toolbar: 16px;
+  --material-blur-overlay: 20px;
+  --material-saturation: 1.12;
+  --material-shadow-panel:
+    0 1px 2px oklch(0.15 0.005 285 / 6%), 0 4px 12px oklch(0.15 0.005 285 / 4%);
+  --material-shadow-overlay:
+    0 8px 24px oklch(0.15 0.005 285 / 12%), 0 2px 6px oklch(0.15 0.005 285 / 8%);
+  --material-shadow-window: 0 24px 80px oklch(0.1 0.005 285 / 22%);
+
+  /*
+   * Renderer boundary for embedded and standalone windows. The host may set
+   * these properties on the document root; zero-value defaults are safe in a
+   * normal browser or embedded webview.
+   */
+  --window-safe-area-top: env(safe-area-inset-top, 0px);
+  --window-safe-area-inline-end: env(safe-area-inset-right, 0px);
+  --window-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --window-safe-area-inline-start: env(safe-area-inset-left, 0px);
+  --window-titlebar-height: env(titlebar-area-height, 0px);
+  --window-drag-region-height: var(--window-titlebar-height);
+  --window-control-inset-inline-start: 0px;
+  --window-control-inset-inline-end: 0px;
+  --window-content-inset-top: max(
+    var(--window-safe-area-top),
+    var(--window-titlebar-height)
+  );
+  --window-content-inset-inline-end: max(
+    var(--window-safe-area-inline-end),
+    var(--window-control-inset-inline-end)
+  );
+  --window-content-inset-bottom: var(--window-safe-area-bottom);
+  --window-content-inset-inline-start: max(
+    var(--window-safe-area-inline-start),
+    var(--window-control-inset-inline-start)
+  );
+  --window-corner-radius: 0px;
+  --window-chrome-background: var(--surface-toolbar);
+  --window-chrome-foreground: var(--text-primary);
+  --window-chrome-muted-foreground: var(--text-secondary);
+  --window-border: var(--separator);
+
   /* Terminal - stays dark in both modes */
   --terminal: oklch(0.16 0 0);
   --terminal-header: oklch(0.22 0 0);
@@ -144,7 +870,33 @@
   --terminal-stdout: oklch(0.75 0 0);
   --terminal-stderr: oklch(0.78 0.12 75);
   --terminal-error: oklch(0.7 0.16 25);
-  --chat-safe-padding: 104px;
+  --chat-safe-padding: 0px;
+}
+
+:where([data-density='compact']) {
+  --density-control-height-xs: 1.375rem;
+  --density-control-height-sm: 1.75rem;
+  --density-control-height-md: 2rem;
+  --density-control-height-lg: 2.25rem;
+  --density-control-gap: 0.25rem;
+  --density-control-padding-inline: 0.625rem;
+  --density-row-height: 1.875rem;
+  --density-toolbar-height: 2rem;
+  --density-pane-padding: 0.625rem;
+  --density-section-gap: 0.75rem;
+}
+
+:where([data-density='comfortable']) {
+  --density-control-height-xs: 1.75rem;
+  --density-control-height-sm: 2.25rem;
+  --density-control-height-md: 2.5rem;
+  --density-control-height-lg: 2.75rem;
+  --density-control-gap: 0.5rem;
+  --density-control-padding-inline: 1rem;
+  --density-row-height: 2.75rem;
+  --density-toolbar-height: 3rem;
+  --density-pane-padding: 1rem;
+  --density-section-gap: 1.5rem;
 }
 
 .dark {
@@ -167,6 +919,9 @@
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.7145 0.185 45.03);
+  --model-effort-blue: #339cff;
+  --model-effort-purple: #ad7bf9;
+  --model-effort-sparkle: #fff;
   --chart-1: oklch(0.7145 0.185 45.03);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
@@ -188,6 +943,11 @@
   --status-stopped: oklch(0.705 0.015 286.067);
   --status-pending: oklch(0.8 0.12 75);
   --status-error: oklch(0.704 0.191 22.216);
+  --material-shadow-panel:
+    0 1px 2px oklch(0 0 0 / 24%), 0 6px 16px oklch(0 0 0 / 16%);
+  --material-shadow-overlay:
+    0 12px 32px oklch(0 0 0 / 34%), 0 2px 8px oklch(0 0 0 / 24%);
+  --material-shadow-window: 0 28px 96px oklch(0 0 0 / 48%);
   /* Terminal - same dark look in dark mode */
   --terminal: oklch(0.16 0 0);
   --terminal-header: oklch(0.22 0 0);
@@ -197,7 +957,76 @@
   --terminal-stdout: oklch(0.75 0 0);
   --terminal-stderr: oklch(0.78 0.12 75);
   --terminal-error: oklch(0.7 0.16 25);
-  --chat-safe-padding: 104px;
+  --chat-safe-padding: 0px;
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --text-tertiary: color-mix(
+      in oklch,
+      var(--muted-foreground) 92%,
+      var(--foreground)
+    );
+    --text-disabled: color-mix(
+      in oklch,
+      var(--muted-foreground) 72%,
+      transparent
+    );
+    --separator: color-mix(in oklch, var(--foreground) 32%, transparent);
+    --separator-strong: color-mix(in oklch, var(--foreground) 54%, transparent);
+    --control-hover: color-mix(in oklch, var(--foreground) 12%, transparent);
+    --control-pressed: color-mix(in oklch, var(--foreground) 18%, transparent);
+    --window-border: var(--separator-strong);
+  }
+}
+
+@media (forced-colors: active) {
+  :root {
+    --text-primary: CanvasText;
+    --text-secondary: CanvasText;
+    --text-tertiary: CanvasText;
+    --text-disabled: GrayText;
+    --surface-canvas: Canvas;
+    --surface-raised: Canvas;
+    --surface-recessed: Canvas;
+    --surface-sidebar: Canvas;
+    --surface-toolbar: Canvas;
+    --surface-overlay: Canvas;
+    --surface-selected: Highlight;
+    --separator: ButtonBorder;
+    --separator-strong: CanvasText;
+    --control-hover: transparent;
+    --control-pressed: transparent;
+    --control-selected: Highlight;
+    --control-selected-foreground: HighlightText;
+    --control-disabled: transparent;
+    --control-focus: Highlight;
+    --control-invalid: Mark;
+    --material-blur-toolbar: 0px;
+    --material-blur-overlay: 0px;
+    --material-saturation: 1;
+    --material-shadow-panel: none;
+    --material-shadow-overlay: none;
+    --material-shadow-window: none;
+  }
+}
+
+:where([data-transparency='reduced']) {
+  --surface-toolbar: var(--background);
+  --surface-overlay: var(--popover);
+  --material-blur-toolbar: 0px;
+  --material-blur-overlay: 0px;
+  --material-saturation: 1;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --surface-toolbar: var(--background);
+    --surface-overlay: var(--popover);
+    --material-blur-toolbar: 0px;
+    --material-blur-overlay: 0px;
+    --material-saturation: 1;
+  }
 }
 
 @layer base {
@@ -223,6 +1052,42 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-duration-instant: 1ms;
+    --motion-duration-fast: 1ms;
+    --motion-duration-normal: 1ms;
+    --motion-duration-slow: 1ms;
+    --motion-ease-standard: linear;
+    --motion-ease-enter: linear;
+    --motion-ease-exit: linear;
+    --motion-ease-spring: linear;
+  }
+
+  .model-effort-power-fill,
+  .model-effort-power-field,
+  .model-effort-power-particle,
+  .model-effort-max-burst-particle,
+  .model-effort-popover {
+    animation: none;
+  }
+
+  .model-effort-max-burst {
+    display: none;
+  }
+}
+
+:where([data-motion='reduced']) {
+  --motion-duration-instant: 1ms;
+  --motion-duration-fast: 1ms;
+  --motion-duration-normal: 1ms;
+  --motion-duration-slow: 1ms;
+  --motion-ease-standard: linear;
+  --motion-ease-enter: linear;
+  --motion-ease-exit: linear;
+  --motion-ease-spring: linear;
+}
+
 /* Shiki dual-theme support: override inline styles in dark mode */
 .dark .shiki,
 .dark .shiki span {