@class-kit/react 0.1.1 → 0.1.2

package/dist/styles/components.css

@@ -3,33 +3,41 @@
     ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     sans-serif;
   --cc-radius-sm: 4px;
-  --cc-radius-md: 8px;
-  --cc-radius-lg: 10px;
+  --cc-radius-md: 4px;
+  --cc-radius-lg: 4px;
   --cc-radius-pill: 999px;
-  --cc-color-text: #111111;
-  --cc-color-muted: #626262;
-  --cc-color-border: #d8d8d8;
-  --cc-color-border-hover: #a3a3a3;
-  --cc-color-border-focus: #111111;
-  --cc-color-divider: #e9e9e9;
+  --cc-color-text: #1d2129;
+  --cc-color-muted: #86909c;
+  --cc-color-border: #e5e6eb;
+  --cc-color-border-hover: #c9cdd4;
+  --cc-color-border-focus: #1d2129;
+  --cc-color-divider: #f2f3f5;
   --cc-color-surface: #ffffff;
-  --cc-color-surface-soft: #f7f7f7;
-  --cc-color-danger: #b91c1c;
-  --cc-color-success: #166534;
-  --cc-color-warning: #92400e;
-  --cc-color-accent: #111111;
-  --cc-color-accent-hover: #000000;
+  --cc-color-surface-soft: #f7f8fa;
+  --cc-color-danger: #f53f3f;
+  --cc-color-success: #00b42a;
+  --cc-color-warning: #ff7d00;
+  --cc-color-accent: #1d2129;
+  --cc-color-accent-hover: #0a0c10;
   --cc-color-accent-contrast: #ffffff;
-  --cc-shadow-focus: 0 0 0 3px rgba(124, 58, 237, 0.18);
-  --cc-shadow-floating: 0 22px 64px rgba(124, 58, 237, 0.2);
+  --cc-scrollbar-size: 4px;
+  --cc-scrollbar-track-color: transparent;
+  --cc-scrollbar-thumb-color: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 56%,
+    transparent
+  );
+  --cc-scrollbar-thumb-hover-color: var(--cc-form-color-accent);
+  --cc-shadow-focus: 0 0 0 3px rgba(29, 33, 41, 0.18);
+  --cc-shadow-floating: 0 22px 64px rgba(29, 33, 41, 0.2);
   --cc-form-gap: 16px;
   --cc-form-control-height: 40px;
   --cc-form-control-radius: var(--cc-radius-md);
-  --cc-form-control-background: transparent;
-  --cc-form-control-hover-background: transparent;
-  --cc-form-control-focus-background: transparent;
-  --cc-form-control-readonly-background: transparent;
-  --cc-form-control-disabled-background: transparent;
+  --cc-form-control-background: var(--cc-form-color-surface);
+  --cc-form-control-hover-background: var(--cc-form-color-surface-soft);
+  --cc-form-control-focus-background: var(--cc-form-color-surface);
+  --cc-form-control-readonly-background: var(--cc-form-color-surface-soft);
+  --cc-form-control-disabled-background: var(--cc-form-color-surface-soft);
   --cc-form-placeholder-color: var(--cc-color-muted);
   --cc-form-placeholder-font-size: inherit;
   --cc-form-font: var(--cc-font-family);
@@ -87,7 +95,11 @@
   --cc-switch-track-checked-background: var(--cc-form-color-accent);
   --cc-switch-thumb-background: var(--cc-form-color-surface);
   --cc-switch-thumb-shadow: 0 1px 3px rgba(23, 32, 38, 0.24);
-  --cc-rating-star-color: var(--cc-form-color-border);
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
   --cc-rating-star-active-color: var(--cc-form-color-accent);
   --cc-canvas-editor-background: color-mix(
     in srgb,
@@ -96,7 +108,7 @@
   );
   --cc-canvas-editor-card-background: var(--cc-form-color-surface);
   --cc-canvas-editor-card-border-color: var(--cc-form-color-border);
-  --cc-canvas-editor-card-shadow: 0 10px 24px rgba(49, 32, 88, 0.08);
+  --cc-canvas-editor-card-shadow: 0 10px 24px rgba(29, 33, 41, 0.08);
   --cc-canvas-editor-line-color: color-mix(
     in srgb,
     var(--cc-form-color-accent) 48%,
@@ -197,7 +209,7 @@
   --cc-code-border-color: transparent;
   --cc-code-text-color: var(--cc-form-color-text);
   --cc-code-padding: 10px;
-  --cc-qr-code-logo-shadow: 0 4px 14px rgba(49, 32, 88, 0.16);
+  --cc-qr-code-logo-shadow: 0 4px 14px rgba(29, 33, 41, 0.16);
   --cc-lazy-image-radius: var(--cc-radius-lg);
   --cc-lazy-image-border-color: transparent;
   --cc-lazy-image-placeholder-background: transparent;
@@ -218,22 +230,92 @@
   --cc-tilt-card-border-color: var(--cc-form-color-border);
   --cc-tilt-card-color: var(--cc-form-color-text);
   --cc-tilt-card-radius: var(--cc-radius-lg);
-  --cc-tilt-card-shadow: 0 18px 42px rgba(49, 32, 88, 0.14);
-  --cc-tilt-card-shadow-active: 0 24px 64px rgba(124, 58, 237, 0.22);
+  --cc-tilt-card-shadow: 0 18px 42px rgba(29, 33, 41, 0.14);
+  --cc-tilt-card-shadow-active: 0 24px 64px rgba(29, 33, 41, 0.22);
   --cc-tilt-card-glare-color: rgba(255, 255, 255, 0.55);
+  --cc-orbital-sphere-size: 360px;
+  --cc-orbital-sphere-radius: 50%;
+  --cc-orbital-sphere-item-size: 72px;
+  --cc-orbital-sphere-duration: 9000ms;
+  --cc-orbital-sphere-cycle-duration: 12000ms;
+  --cc-orbital-sphere-border-color: color-mix(
+    in srgb,
+    var(--cc-form-color-text) 16%,
+    transparent
+  );
+  --cc-orbital-sphere-shadow-color: color-mix(
+    in srgb,
+    var(--cc-form-color-text) 28%,
+    transparent
+  );
+  --cc-orbital-sphere-item-background: color-mix(
+    in srgb,
+    var(--cc-form-color-surface) 78%,
+    transparent
+  );
+  --cc-orbital-sphere-item-border-color: color-mix(
+    in srgb,
+    var(--cc-form-color-border) 86%,
+    transparent
+  );
+  --cc-menu-width: 240px;
+  --cc-menu-collapsed-width: 64px;
+  --cc-menu-item-height: 40px;
+  --cc-menu-collapsed-item-size: 48px;
+  --cc-menu-icon-size: 28px;
+  --cc-menu-icon-inner-size: 18px;
+  --cc-menu-icon-radius: var(--cc-radius-md);
+  --cc-menu-background: var(--cc-form-color-surface);
+  --cc-menu-border-color: var(--cc-form-color-border);
+  --cc-menu-text-color: var(--cc-form-color-text);
+  --cc-menu-muted-color: var(--cc-form-color-muted);
+  --cc-menu-item-color: var(--cc-menu-text-color);
+  --cc-menu-item-muted-color: var(--cc-menu-muted-color);
+  --cc-menu-item-hover-background: var(--cc-form-control-hover-background);
+  --cc-menu-item-hover-color: var(--cc-menu-text-color);
+  --cc-menu-item-active-background: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 10%,
+    transparent
+  );
+  --cc-menu-item-active-color: var(--cc-form-color-accent);
+  --cc-menu-item-active-border-color: var(--cc-form-color-accent);
+  --cc-menu-item-icon-color: var(--cc-menu-muted-color);
+  --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
+  --cc-menu-shadow: 0 18px 42px rgba(29, 33, 41, 0.08);
+  --cc-code-preview-background: var(--cc-form-color-surface);
+  --cc-code-preview-bar-background: var(--cc-code-preview-background);
+  --cc-code-preview-panel-background: var(--cc-form-color-surface-soft);
+  --cc-code-preview-border-color: var(--cc-form-color-border);
+  --cc-code-preview-color: var(--cc-form-color-text);
+  --cc-code-preview-muted-color: var(--cc-form-color-muted);
+  --cc-code-preview-accent-color: var(--cc-form-color-accent);
+  --cc-code-preview-line-color: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 32%,
+    transparent
+  );
+  --cc-code-preview-shadow: var(--cc-form-shadow-floating);
+  --cc-drag-drop-preview-background: var(
+    --cc-drag-drop-slot-dragging-background
+  );
+  --cc-drag-drop-preview-border-color: var(
+    --cc-drag-drop-slot-dragging-border-color
+  );
+  --cc-drag-drop-preview-color: var(--cc-form-color-text);
   --cc-gradient-text-background: linear-gradient(
     90deg,
     var(--cc-form-color-accent),
-    #ec4899,
-    #22d3ee
+    #d64d8c,
+    #36bffb
   );
   --cc-gradient-text-background-size: 200% 100%;
   --cc-gradient-text-duration: 3600ms;
   --cc-gradient-text-easing: cubic-bezier(0.22, 0.8, 0.28, 1);
   --cc-gradient-text-font-weight: 700;
   --cc-design-effect-color-1: var(--cc-form-color-accent);
-  --cc-design-effect-color-2: #ec4899;
-  --cc-design-effect-color-3: #22d3ee;
+  --cc-design-effect-color-2: #d64d8c;
+  --cc-design-effect-color-3: #36bffb;
   --cc-design-effect-alpha: 0.72;
   --cc-design-effect-radius: var(--cc-radius-lg);
   --cc-design-effect-border-color: color-mix(
@@ -337,7 +419,7 @@
   --cc-chat-virtual-list-radius: var(--cc-radius-lg);
   --cc-chat-virtual-list-text-color: var(--cc-form-color-text);
   --cc-button-radius: var(--cc-form-control-radius);
-  --cc-button-shadow: 0 1px 2px rgba(49, 32, 88, 0.08);
+  --cc-button-shadow: 0 1px 2px rgba(29, 33, 41, 0.08);
   --cc-button-primary-background: var(--cc-form-color-accent);
   --cc-button-primary-background-hover: var(--cc-form-color-accent-hover);
   --cc-button-primary-color: var(--cc-form-color-accent-contrast);
@@ -349,7 +431,10 @@
   --cc-button-ghost-color: var(--cc-form-color-accent);
   --cc-button-danger-background: var(--cc-form-color-danger);
   --cc-button-danger-color: #fff;
-  --cc-modal-overlay-background: rgba(31, 26, 46, 0.52);
+  --cc-button-hover-transform: translateY(-1px);
+  --cc-button-active-transform: translateY(0);
+  --cc-button-active-shadow: var(--cc-button-shadow);
+  --cc-modal-overlay-background: rgba(29, 33, 41, 0.52);
   --cc-modal-radius: var(--cc-radius-lg);
   --cc-modal-background: var(--cc-form-color-surface);
   --cc-modal-color: var(--cc-form-color-text);
@@ -377,25 +462,43 @@
   --cc-popup-slide-distance: 100%;
   --cc-popup-overlay-enter-opacity: 1;
   --cc-popup-overlay-exit-opacity: 0;
-  --cc-tooltip-background: #2f2450;
+  --cc-tooltip-background: #1d2129;
   --cc-tooltip-color: #fff;
   --cc-tooltip-radius: var(--cc-radius-md);
-  --cc-tooltip-shadow: 0 10px 24px rgba(49, 32, 88, 0.2);
+  --cc-tooltip-shadow: 0 10px 24px rgba(29, 33, 41, 0.2);
   --cc-toast-radius: var(--cc-radius-lg);
   --cc-toast-background: var(--cc-form-color-surface);
   --cc-toast-border-color: var(--cc-form-color-border);
   --cc-toast-accent-color: var(--cc-form-color-accent);
-  --cc-toast-shadow: 0 12px 30px rgba(49, 32, 88, 0.16);
+  --cc-toast-shadow: 0 12px 30px rgba(29, 33, 41, 0.16);
   --cc-toast-slide-distance: 16px;
   --cc-toast-scale-enter: 0.9;
   --cc-toast-scale-active: 1;
+  --cc-toast-stack-gap: 10px;
+  --cc-toast-max-height: 160px;
   --cc-tabs-radius: var(--cc-radius-lg);
   --cc-tabs-list-border-color: var(--cc-form-color-border);
-  --cc-tabs-tab-color: var(--cc-form-color-muted);
+  --cc-tabs-tab-color: color-mix(
+    in srgb,
+    var(--cc-form-color-text) 72%,
+    var(--cc-form-color-muted)
+  );
+  --cc-tabs-tab-hover-background: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 8%,
+    transparent
+  );
+  --cc-tabs-tab-hover-color: var(--cc-form-color-accent);
+  --cc-tabs-tab-active-background: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 12%,
+    var(--cc-form-color-surface)
+  );
   --cc-tabs-tab-active-color: var(--cc-form-color-accent);
   --cc-animation-duration: 180ms;
   --cc-animation-easing: cubic-bezier(0.22, 0.8, 0.28, 1);
   --cc-theme-backdrop-filter: none;
+  --cc-theme-overlay-backdrop-filter: none;
   --cc-theme-glass-highlight: linear-gradient(
     135deg,
     rgba(255, 255, 255, 0.72),
@@ -403,6 +506,30 @@
   );
 }
 
+* {
+  scrollbar-color: var(--cc-scrollbar-thumb-color)
+    var(--cc-scrollbar-track-color);
+  scrollbar-width: thin;
+}
+
+*::-webkit-scrollbar {
+  height: var(--cc-scrollbar-size);
+  width: var(--cc-scrollbar-size);
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--cc-scrollbar-track-color);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--cc-scrollbar-thumb-color);
+  border-radius: var(--cc-radius-pill);
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--cc-scrollbar-thumb-hover-color);
+}
+
 .cc-icon {
   display: inline-block;
   flex: none;
@@ -412,29 +539,6 @@
   width: 1em;
 }
 
-.cc-field__control,
-.cc-color-picker__panel,
-.cc-verification-code__input,
-.cc-select__menu,
-.cc-virtual-select__menu,
-.cc-date-picker__panel,
-.cc-date-range-picker__panel,
-.cc-calendar,
-.cc-canvas-image,
-.cc-canvas-editor,
-.cc-canvas-editor__toolbar,
-.cc-canvas-editor__card,
-.cc-tilt-card__surface,
-.cc-table,
-.cc-upload,
-.cc-modal__panel,
-.cc-popup__panel,
-.cc-tooltip__content,
-.cc-toast {
-  backdrop-filter: var(--cc-theme-backdrop-filter);
-  -webkit-backdrop-filter: var(--cc-theme-backdrop-filter);
-}
-
 .cc-form {
   display: grid;
   gap: var(--cc-form-gap);
@@ -488,6 +592,45 @@
     box-shadow 120ms ease;
 }
 
+.cc-field__control:-webkit-autofill,
+.cc-field__control:-webkit-autofill:hover,
+.cc-field__control:-webkit-autofill:focus,
+.cc-chat-textarea__control:-webkit-autofill,
+.cc-chat-textarea__control:-webkit-autofill:hover,
+.cc-chat-textarea__control:-webkit-autofill:focus,
+.cc-canvas-editor__card input:-webkit-autofill,
+.cc-canvas-editor__card input:-webkit-autofill:hover,
+.cc-canvas-editor__card input:-webkit-autofill:focus,
+.cc-canvas-editor__card textarea:-webkit-autofill,
+.cc-canvas-editor__card textarea:-webkit-autofill:hover,
+.cc-canvas-editor__card textarea:-webkit-autofill:focus {
+  box-shadow: 0 0 0 1000px var(--cc-form-control-background) inset;
+  caret-color: var(--cc-form-color-text);
+  transition:
+    background-color 9999s ease-out,
+    color 9999s ease-out;
+  -webkit-text-fill-color: var(--cc-form-color-text);
+}
+
+.cc-field__control::-ms-clear,
+.cc-field__control::-ms-reveal,
+.cc-field__control::-webkit-search-cancel-button,
+.cc-field__control::-webkit-search-decoration {
+  display: none;
+}
+
+.cc-field__control[type="number"] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.cc-field__control[type="number"]::-webkit-inner-spin-button,
+.cc-field__control[type="number"]::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+  -webkit-appearance: none;
+}
+
 .cc-field__control--clearable {
   padding-right: 38px;
 }
@@ -742,13 +885,13 @@
 
 .cc-color-picker__channels {
   display: grid;
-  gap: 8px;
+  gap: 6px;
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
 .cc-color-picker__channels label {
   display: grid;
-  gap: 4px;
+  gap: 3px;
 }
 
 .cc-color-picker__channels span {
@@ -760,10 +903,13 @@
   background: transparent;
   border: 1px solid var(--cc-form-color-border);
   border-radius: var(--cc-radius-md);
+  box-sizing: border-box;
   color: var(--cc-form-color-text);
-  font-size: 14px;
+  font-size: 12px;
+  height: 24px;
+  line-height: 1.2;
   min-width: 0;
-  padding: 7px 8px;
+  padding: 2px 6px;
 }
 
 .cc-color-picker__channels[data-show-steppers="false"] input[type="number"] {
@@ -1652,6 +1798,108 @@
   top: 18px;
 }
 
+.cc-chat-textarea {
+  color: var(--cc-form-color-text);
+  display: block;
+  min-width: 0;
+  position: relative;
+  width: 100%;
+}
+
+.cc-chat-textarea__control {
+  appearance: none;
+  background: var(--cc-form-control-background);
+  border: 1px solid var(--cc-form-color-border);
+  border-radius: var(--cc-form-control-radius);
+  box-shadow: none;
+  color: inherit;
+  display: block;
+  font: inherit;
+  line-height: 1.5;
+  min-height: var(--cc-form-control-height);
+  outline: none;
+  overflow-wrap: break-word;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  padding: 8px 12px;
+  resize: none;
+  scrollbar-width: thin;
+  scrollbar-color: var(--cc-form-color-border-hover) transparent;
+  word-break: normal;
+  transition:
+    background-color var(--cc-animation-duration) var(--cc-animation-easing),
+    border-color var(--cc-animation-duration) var(--cc-animation-easing),
+    box-shadow var(--cc-animation-duration) var(--cc-animation-easing),
+    color var(--cc-animation-duration) var(--cc-animation-easing);
+  width: 100%;
+}
+
+.cc-chat-textarea__control--clearable {
+  padding-right: 38px;
+}
+
+.cc-chat-textarea__clear {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--cc-radius-pill);
+  color: var(--cc-form-color-muted);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: 18px;
+  height: 18px;
+  justify-content: center;
+  line-height: 1;
+  padding: 0;
+  position: absolute;
+  right: 10px;
+  top: 12px;
+  transition:
+    background 120ms ease,
+    color 120ms ease;
+  width: 18px;
+}
+
+.cc-chat-textarea__clear:hover {
+  background: var(--cc-form-color-surface-soft);
+  color: var(--cc-form-color-text);
+}
+
+.cc-chat-textarea__clear:focus-visible {
+  box-shadow: var(--cc-form-shadow-focus);
+  outline: none;
+}
+
+.cc-chat-textarea__control::placeholder {
+  color: var(--cc-form-placeholder-color);
+}
+
+.cc-chat-textarea__control:hover:not(:disabled):not([readonly]) {
+  background: var(--cc-form-control-hover-background);
+  border-color: var(--cc-form-color-border-hover);
+}
+
+.cc-chat-textarea__control:focus {
+  background: var(--cc-form-control-focus-background);
+  border-color: var(--cc-form-color-border-focus);
+  box-shadow: var(--cc-form-shadow-focus);
+}
+
+.cc-chat-textarea__control:disabled,
+.cc-chat-textarea__control[readonly] {
+  background: var(--cc-form-readonly-background);
+  border-color: var(--cc-form-readonly-border-color);
+  box-shadow: none;
+  color: var(--cc-form-readonly-color);
+  cursor: default;
+}
+
+.cc-chat-textarea__control:disabled {
+  opacity: var(--cc-form-disabled-opacity);
+}
+
 .cc-field__control:focus {
   border-color: var(--cc-form-color-border-focus);
   box-shadow: var(--cc-form-shadow-focus);
@@ -2468,7 +2716,7 @@
 }
 
 .cc-design-effect--neon {
-  background: color-mix(in srgb, #0f172a 88%, var(--cc-design-effect-color-1));
+  background: color-mix(in srgb, #17191f 88%, var(--cc-design-effect-color-1));
   border-color: color-mix(
     in srgb,
     var(--cc-design-effect-color-2) 68%,
@@ -2603,6 +2851,60 @@
   }
 }
 
+@keyframes cc-orbital-item-drift {
+  0%,
+  100% {
+    transform: translate3d(
+        calc(var(--cc-orbital-item-start-x) * var(--cc-orbital-item-travel-x)),
+        calc(var(--cc-orbital-item-start-y) * var(--cc-orbital-item-travel-y)),
+        0
+      )
+      scale(var(--cc-orbital-item-scale));
+  }
+
+  28% {
+    transform: translate3d(
+        calc(var(--cc-orbital-item-mid-x) * var(--cc-orbital-item-travel-x)),
+        calc(var(--cc-orbital-item-mid-y) * var(--cc-orbital-item-travel-y)),
+        0
+      )
+      scale(var(--cc-orbital-item-scale));
+  }
+
+  54% {
+    transform: translate3d(
+        calc(var(--cc-orbital-item-end-x) * var(--cc-orbital-item-travel-x)),
+        calc(var(--cc-orbital-item-end-y) * var(--cc-orbital-item-travel-y)),
+        0
+      )
+      scale(var(--cc-orbital-item-scale));
+  }
+
+  78% {
+    transform: translate3d(
+        calc(var(--cc-orbital-item-alt-x) * var(--cc-orbital-item-travel-x)),
+        calc(var(--cc-orbital-item-alt-y) * var(--cc-orbital-item-travel-y)),
+        0
+      )
+      scale(var(--cc-orbital-item-scale));
+  }
+}
+
+@keyframes cc-orbital-item-presence {
+  0%,
+  58%,
+  100% {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  68%,
+  84% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
 .cc-video-player__video {
   border-radius: var(--cc-video-player-radius);
   display: block;
@@ -5264,8 +5566,13 @@
       cubic-bezier(0.2, 0.85, 0.22, 1);
 }
 
-.cc-drag-drop-board__preview > * {
+.cc-drag-drop-board__preview > *,
+.cc-drag-drop-board__preview.cc-drag-drop-board__preview
+  > [data-dragging="true"] {
+  background: var(--cc-drag-drop-preview-background);
+  border-color: var(--cc-drag-drop-preview-border-color);
   box-shadow: var(--cc-drag-drop-preview-shadow);
+  color: var(--cc-drag-drop-preview-color);
   filter: saturate(1.06);
   height: 100%;
   transform: scale(0.96);
@@ -5861,68 +6168,745 @@
   z-index: 0;
 }
 
-@keyframes cc-lazy-image-skeleton {
-  from {
-    background-position: 120% 0;
-  }
-  to {
-    background-position: -120% 0;
-  }
-}
-
-.cc-ellipsis {
-  --cc-ellipsis-background: var(--cc-form-color-surface);
-  --cc-ellipsis-line-height: 1.6em;
-  --cc-ellipsis-text-color: var(--cc-form-color-text);
-  color: var(--cc-ellipsis-text-color);
-  display: block;
+.cc-orbital-sphere {
+  color: var(--cc-form-color-text);
+  display: grid;
   font-family: var(--cc-form-font);
-  line-height: var(--cc-ellipsis-line-height);
-  min-width: 0;
+  height: var(--cc-orbital-sphere-size);
+  isolation: isolate;
+  place-items: center;
   position: relative;
+  width: var(--cc-orbital-sphere-size);
 }
 
-.cc-ellipsis__content {
+.cc-orbital-sphere *,
+.cc-orbital-sphere *::before,
+.cc-orbital-sphere *::after {
   box-sizing: border-box;
-  line-height: var(--cc-ellipsis-line-height);
-  max-height: var(
-    --cc-ellipsis-collapsed-height,
-    var(--cc-ellipsis-line-height)
-  );
-  min-width: 0;
-  overflow: hidden;
-  width: 100%;
-  transition: max-height var(--cc-ellipsis-transition-duration, 180ms) ease;
-}
-
-.cc-ellipsis[data-expandable="true"] {
-  cursor: pointer;
 }
 
-.cc-ellipsis[data-expandable="true"]:focus-visible {
-  border-radius: var(--cc-radius-sm);
-  outline: 2px solid var(--cc-form-color-accent);
-  outline-offset: 3px;
+.cc-orbital-sphere__shell {
+  border: 1px solid var(--cc-orbital-sphere-border-color);
+  border-radius: var(--cc-orbital-sphere-radius);
+  box-shadow:
+    inset 22px 22px 46px var(--cc-orbital-sphere-shadow-color),
+    inset -18px -18px 42px rgba(255, 255, 255, 0.46),
+    0 22px 70px color-mix(in srgb, var(--cc-form-color-text) 12%, transparent);
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  transform: translateZ(0);
 }
 
-.cc-ellipsis[data-lines="multiple"] .cc-ellipsis__content {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--cc-ellipsis-lines, 1);
-  line-clamp: var(--cc-ellipsis-lines, 1);
+.cc-orbital-sphere__shell::before {
+  background:
+    radial-gradient(
+      circle at 30% 22%,
+      rgba(255, 255, 255, 0.42),
+      transparent 22%
+    ),
+    radial-gradient(
+      circle at 68% 76%,
+      var(--cc-orbital-sphere-shadow-color),
+      transparent 34%
+    );
+  border-radius: inherit;
+  content: "";
+  inset: 0;
+  opacity: 0.9;
+  position: absolute;
 }
 
-.cc-ellipsis[data-lines="single"] .cc-ellipsis__content {
-  display: block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.cc-orbital-sphere__stage {
+  border-radius: inherit;
+  height: calc(100% - var(--cc-orbital-sphere-item-size));
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - var(--cc-orbital-sphere-item-size));
 }
 
-.cc-ellipsis[data-expanded="true"] .cc-ellipsis__content {
-  display: block;
-  max-height: var(--cc-ellipsis-expanded-max-height, 999px);
-  text-overflow: clip;
-  white-space: normal;
+.cc-orbital-sphere__item {
+  --cc-orbital-item-travel-x: calc(
+    var(--cc-orbital-sphere-size) - (var(--cc-orbital-sphere-item-size) * 2)
+  );
+  --cc-orbital-item-travel-y: calc(
+    var(--cc-orbital-sphere-size) - (var(--cc-orbital-sphere-item-size) * 2)
+  );
+  align-items: center;
+  appearance: none;
+  background: var(--cc-orbital-sphere-item-background);
+  border: 1px solid var(--cc-orbital-sphere-item-border-color);
+  border-radius: var(--cc-radius-md);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.62),
+    0 12px 30px color-mix(in srgb, var(--cc-form-color-text) 14%, transparent);
+  color: var(--cc-form-color-text);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 760;
+  height: var(--cc-orbital-sphere-item-size);
+  justify-content: center;
+  left: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0 10px;
+  position: absolute;
+  text-align: center;
+  top: 0;
+  transform: translate3d(
+      calc(var(--cc-orbital-item-start-x) * var(--cc-orbital-item-travel-x)),
+      calc(var(--cc-orbital-item-start-y) * var(--cc-orbital-item-travel-y)),
+      0
+    )
+    scale(var(--cc-orbital-item-scale));
+  transition:
+    border-color var(--cc-animation-duration) var(--cc-animation-easing),
+    box-shadow var(--cc-animation-duration) var(--cc-animation-easing),
+    opacity 420ms var(--cc-animation-easing),
+    transform var(--cc-animation-duration) var(--cc-animation-easing);
+  width: var(--cc-orbital-sphere-item-size);
+  z-index: calc(10 + var(--cc-orbital-index));
+}
+
+.cc-orbital-sphere[data-animated="true"] .cc-orbital-sphere__item {
+  animation: cc-orbital-item-drift var(--cc-orbital-item-duration) linear
+    var(--cc-orbital-item-delay) infinite;
+}
+
+.cc-orbital-sphere[data-animated="true"][data-overflow="true"]
+  .cc-orbital-sphere__item {
+  animation:
+    cc-orbital-item-drift var(--cc-orbital-item-duration) linear
+      var(--cc-orbital-item-delay) infinite,
+    cc-orbital-item-presence var(--cc-orbital-sphere-cycle-duration) ease-in-out
+      var(--cc-orbital-item-presence-delay) infinite;
+}
+
+.cc-orbital-sphere__item:hover,
+.cc-orbital-sphere__item:focus-visible {
+  border-color: var(--cc-form-color-accent);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    0 16px 38px color-mix(in srgb, var(--cc-form-color-accent) 20%, transparent);
+  outline: none;
+}
+
+.cc-orbital-sphere[data-disabled="true"] .cc-orbital-sphere__item {
+  cursor: default;
+  opacity: var(--cc-form-disabled-opacity);
+  pointer-events: none;
+}
+
+.cc-orbital-sphere__item-content {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cc-menu {
+  background: var(--cc-menu-background);
+  border: 1px solid var(--cc-menu-border-color);
+  border-radius: var(--cc-radius-lg);
+  box-sizing: border-box;
+  box-shadow: var(--cc-menu-shadow);
+  color: var(--cc-menu-text-color);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--cc-form-font);
+  gap: 8px;
+  max-height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  padding: 8px;
+  transition:
+    width var(--cc-animation-duration) var(--cc-animation-easing),
+    border-color var(--cc-animation-duration) var(--cc-animation-easing),
+    box-shadow var(--cc-animation-duration) var(--cc-animation-easing);
+  width: var(--cc-menu-width);
+}
+
+.cc-menu *,
+.cc-menu *::before,
+.cc-menu *::after {
+  box-sizing: border-box;
+}
+
+.cc-menu[data-collapsed="true"] {
+  align-items: center;
+  gap: 4px;
+  padding: 6px;
+  width: var(--cc-menu-collapsed-width);
+}
+
+.cc-menu__collapse,
+.cc-menu__button {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--cc-radius-md);
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  min-width: 0;
+  outline: none;
+  transition:
+    background-color var(--cc-animation-duration) var(--cc-animation-easing),
+    color var(--cc-animation-duration) var(--cc-animation-easing),
+    box-shadow var(--cc-animation-duration) var(--cc-animation-easing);
+}
+
+.cc-menu__collapse {
+  border-radius: var(--cc-radius-pill);
+  color: var(--cc-menu-muted-color);
+  height: var(--cc-menu-collapsed-item-size);
+  justify-content: center;
+  margin-left: auto;
+  width: var(--cc-menu-collapsed-item-size);
+}
+
+.cc-menu__collapse > .cc-icon {
+  height: 16px;
+  stroke-width: 2.2;
+  width: 16px;
+}
+
+.cc-menu__collapse:hover,
+.cc-menu__button:hover {
+  background: var(--cc-menu-item-hover-background);
+  color: var(--cc-menu-text-color);
+}
+
+.cc-menu__collapse:focus-visible,
+.cc-menu__button:focus-visible {
+  box-shadow: var(--cc-form-shadow-focus);
+}
+
+.cc-menu__list {
+  display: grid;
+  gap: 4px;
+  list-style: none;
+  margin: 0;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0;
+  scrollbar-width: thin;
+  width: 100%;
+}
+
+.cc-menu__list--child {
+  border-left: 1px solid
+    color-mix(in srgb, var(--cc-menu-border-color) 72%, transparent);
+  gap: 2px;
+  margin-left: calc(var(--cc-menu-icon-size) / 2);
+  margin-top: 0;
+  overflow: visible;
+  padding-left: 10px;
+}
+
+.cc-menu__transition {
+  width: 100%;
+}
+
+.cc-menu__transition-content {
+  min-height: 0;
+}
+
+.cc-menu__item {
+  min-width: 0;
+}
+
+.cc-menu__button {
+  gap: 10px;
+  color: var(--cc-menu-item-color);
+  min-height: var(--cc-menu-item-height);
+  padding: 0 10px;
+  position: relative;
+  text-align: left;
+  width: 100%;
+}
+
+.cc-menu__button::before {
+  background: var(--cc-menu-item-active-border-color);
+  border-radius: 999px;
+  content: "";
+  height: 18px;
+  left: 2px;
+  opacity: 0;
+  position: absolute;
+  transition: opacity var(--cc-animation-duration) var(--cc-animation-easing);
+  width: 3px;
+}
+
+.cc-menu__item[data-active="true"] > .cc-menu__button {
+  background: var(--cc-menu-item-active-background);
+  color: var(--cc-menu-item-active-color);
+  font-weight: 700;
+}
+
+.cc-menu__item[data-active="true"] > .cc-menu__button::before {
+  opacity: 1;
+}
+
+.cc-menu__item[data-disabled="true"] {
+  opacity: var(--cc-form-disabled-opacity);
+  pointer-events: none;
+}
+
+.cc-menu__icon {
+  align-items: center;
+  border-radius: var(--cc-menu-icon-radius);
+  color: var(--cc-menu-item-icon-color);
+  display: inline-flex;
+  flex: 0 0 var(--cc-menu-icon-size);
+  font-size: 13px;
+  font-weight: 800;
+  height: var(--cc-menu-icon-size);
+  justify-content: center;
+  line-height: 1;
+  overflow: hidden;
+  width: var(--cc-menu-icon-size);
+}
+
+.cc-menu__icon :where(svg, img) {
+  border-radius: inherit;
+  display: block;
+  height: var(--cc-menu-icon-inner-size);
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: cover;
+  width: var(--cc-menu-icon-inner-size);
+}
+
+.cc-menu__item[data-active="true"] > .cc-menu__button .cc-menu__icon {
+  color: var(--cc-menu-item-active-icon-color);
+}
+
+.cc-menu__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cc-menu__arrow {
+  color: var(--cc-menu-item-muted-color);
+  flex: 0 0 14px;
+  font-size: 14px;
+  height: 14px;
+  transition: transform var(--cc-animation-duration) var(--cc-animation-easing);
+  width: 14px;
+}
+
+.cc-menu__item[data-expanded="true"] > .cc-menu__button .cc-menu__arrow {
+  transform: rotate(180deg);
+}
+
+.cc-menu__item[data-level="1"] > .cc-menu__button {
+  color: var(--cc-menu-item-muted-color);
+  font-size: 13px;
+  font-weight: 560;
+  min-height: 36px;
+}
+
+.cc-menu__item[data-level="2"] > .cc-menu__button,
+.cc-menu__item[data-level="3"] > .cc-menu__button {
+  color: color-mix(
+    in srgb,
+    var(--cc-menu-item-muted-color) 88%,
+    var(--cc-menu-item-color)
+  );
+  font-size: 12.5px;
+  min-height: 34px;
+}
+
+.cc-menu__item[data-level="1"] > .cc-menu__button::before,
+.cc-menu__item[data-level="2"] > .cc-menu__button::before,
+.cc-menu__item[data-level="3"] > .cc-menu__button::before {
+  height: 14px;
+}
+
+.cc-menu[data-collapsed="true"] .cc-menu__collapse {
+  margin-left: 0;
+}
+
+.cc-menu[data-collapsed="true"] > .cc-menu__list {
+  gap: 2px;
+}
+
+.cc-menu[data-collapsed="true"] .cc-menu__button {
+  height: var(--cc-menu-collapsed-item-size);
+  justify-content: center;
+  padding: 0;
+  width: var(--cc-menu-collapsed-item-size);
+}
+
+.cc-menu[data-collapsed="true"] .cc-menu__icon {
+  flex-basis: var(--cc-menu-icon-size);
+  height: var(--cc-menu-icon-size);
+  width: var(--cc-menu-icon-size);
+}
+
+.cc-menu[data-collapsed="true"] .cc-menu__label,
+.cc-menu[data-collapsed="true"] .cc-menu__arrow {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .cc-menu {
+    --cc-menu-width: min(100%, calc(100vw - 24px));
+    --cc-menu-collapsed-width: 56px;
+    --cc-menu-collapsed-item-size: 44px;
+    --cc-menu-icon-size: 24px;
+    --cc-menu-item-height: 38px;
+    border-radius: var(--cc-radius-md);
+    gap: 6px;
+    padding: 6px;
+  }
+
+  .cc-menu__list {
+    gap: 3px;
+    max-height: min(70dvh, 520px);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding-right: 2px;
+    scrollbar-width: thin;
+  }
+
+  .cc-menu__button {
+    gap: 8px;
+    padding: 0 10px;
+  }
+
+  .cc-menu__list--child {
+    margin-left: 12px;
+    padding-left: 8px;
+  }
+}
+
+.cc-height-transition {
+  overflow: hidden;
+  transition:
+    height var(--cc-height-transition-duration, 220ms)
+      var(--cc-height-transition-easing, var(--cc-animation-easing)),
+    grid-template-rows var(--cc-height-transition-duration, 220ms)
+      var(--cc-height-transition-easing, var(--cc-animation-easing)),
+    transform var(--cc-height-transition-duration, 220ms)
+      var(--cc-height-transition-easing, var(--cc-animation-easing)),
+    opacity var(--cc-height-transition-duration, 220ms)
+      var(--cc-height-transition-easing, var(--cc-animation-easing));
+}
+
+.cc-height-transition[data-mode="auto"] {
+  height: 0;
+}
+
+.cc-height-transition[data-mode="auto"][data-expanded="true"] {
+  height: var(--cc-height-transition-height, auto);
+}
+
+.cc-height-transition[data-mode="grid"] {
+  display: grid;
+  grid-template-rows: 0fr;
+}
+
+.cc-height-transition[data-mode="grid"][data-expanded="true"] {
+  grid-template-rows: 1fr;
+}
+
+.cc-height-transition[data-mode="flip"] {
+  height: 0;
+  opacity: 0;
+  transform: scaleY(0.96);
+  transform-origin: top;
+}
+
+.cc-height-transition[data-mode="flip"][data-expanded="true"] {
+  height: var(--cc-height-transition-height, auto);
+  opacity: 1;
+  transform: scaleY(1);
+}
+
+.cc-height-transition__content {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.cc-code-preview {
+  color: var(--cc-code-preview-color);
+  font-family: var(--cc-form-font);
+  position: relative;
+}
+
+.cc-code-preview__bar {
+  align-items: center;
+  background: var(--cc-code-preview-bar-background);
+  border: 1px solid var(--cc-code-preview-border-color);
+  border-radius: var(--cc-radius-lg);
+  box-shadow: inset 0 1px 0
+    color-mix(in srgb, var(--cc-code-preview-background) 84%, transparent);
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  min-height: 44px;
+  padding: 8px 10px 8px 14px;
+}
+
+.cc-code-preview__meta {
+  align-items: center;
+  display: inline-flex;
+  gap: 8px;
+  min-width: 0;
+}
+
+.cc-code-preview__title {
+  font-size: 13px;
+  font-weight: 780;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cc-code-preview__lang {
+  background: color-mix(
+    in srgb,
+    var(--cc-code-preview-panel-background) 78%,
+    transparent
+  );
+  border: 1px solid var(--cc-code-preview-border-color);
+  border-radius: 999px;
+  color: var(--cc-code-preview-muted-color);
+  font-size: 11px;
+  font-weight: 720;
+  padding: 3px 8px;
+}
+
+.cc-code-preview__actions {
+  display: inline-flex;
+  flex: none;
+  gap: 6px;
+}
+
+.cc-code-preview__actions button {
+  appearance: none;
+  background: var(--cc-code-preview-background);
+  border: 1px solid var(--cc-code-preview-border-color);
+  border-radius: var(--cc-radius-md);
+  color: var(--cc-code-preview-color);
+  cursor: pointer;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 760;
+  height: 30px;
+  padding: 0 10px;
+  transition:
+    background var(--cc-animation-duration, 180ms)
+      var(--cc-animation-easing, ease),
+    border-color var(--cc-animation-duration, 180ms)
+      var(--cc-animation-easing, ease),
+    color var(--cc-animation-duration, 180ms) var(--cc-animation-easing, ease),
+    transform var(--cc-animation-duration, 180ms)
+      var(--cc-animation-easing, ease);
+}
+
+.cc-code-preview__actions button:hover {
+  background: color-mix(
+    in srgb,
+    var(--cc-code-preview-accent-color) 7%,
+    var(--cc-code-preview-background)
+  );
+  border-color: var(--cc-code-preview-accent-color);
+  color: var(--cc-code-preview-accent-color);
+}
+
+.cc-code-preview__actions button:active {
+  transform: translateY(1px);
+}
+
+.cc-code-preview__actions button:focus-visible {
+  outline: 2px solid
+    color-mix(in srgb, var(--cc-code-preview-accent-color) 28%, transparent);
+  outline-offset: 2px;
+}
+
+.cc-code-preview__panel {
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--cc-code-preview-background) 42%, transparent),
+      transparent 36%
+    ),
+    var(--cc-code-preview-panel-background);
+  border: 1px solid var(--cc-code-preview-border-color);
+  border-radius: var(--cc-radius-lg);
+  box-shadow:
+    inset 0 1px 0
+      color-mix(in srgb, var(--cc-code-preview-background) 78%, transparent),
+    var(--cc-code-preview-shadow);
+  left: 0;
+  margin: 0;
+  max-height: min(420px, calc(100vh - 48px));
+  overflow: auto;
+  padding: 0;
+  position: absolute;
+  right: auto;
+  top: calc(100% + 10px);
+  width: min(720px, calc(100vw - 48px));
+  z-index: 40;
+}
+
+.cc-code-preview__panel[data-expanded="false"] {
+  border-color: transparent;
+  box-shadow: none;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.cc-code-preview__transition {
+  width: 100%;
+}
+
+.cc-code-preview[data-strategy="fixed"] .cc-code-preview__panel,
+.cc-code-preview__panel[data-strategy="fixed"] {
+  bottom: auto;
+  max-height: min(420px, calc(100dvh - 20px));
+  position: fixed;
+  right: auto;
+  z-index: 1000;
+}
+
+.cc-code-preview__panel::before {
+  background: var(--cc-code-preview-line-color);
+  content: "";
+  height: 1px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.cc-code-preview[data-placement="top"] .cc-code-preview__panel {
+  bottom: calc(100% + 10px);
+  top: auto;
+}
+
+.cc-code-preview[data-placement="right"] .cc-code-preview__panel {
+  left: calc(100% + 10px);
+  top: 0;
+}
+
+.cc-code-preview[data-placement="left"] .cc-code-preview__panel {
+  left: auto;
+  right: calc(100% + 10px);
+  top: 0;
+}
+
+.cc-code-preview[data-strategy="fixed"][data-placement="top"]
+  .cc-code-preview__panel,
+.cc-code-preview[data-strategy="fixed"][data-placement="right"]
+  .cc-code-preview__panel,
+.cc-code-preview[data-strategy="fixed"][data-placement="left"]
+  .cc-code-preview__panel,
+.cc-code-preview__panel[data-strategy="fixed"][data-placement="top"],
+.cc-code-preview__panel[data-strategy="fixed"][data-placement="right"],
+.cc-code-preview__panel[data-strategy="fixed"][data-placement="left"] {
+  bottom: auto;
+  right: auto;
+}
+
+.cc-code-preview__panel-content {
+  min-height: 0;
+}
+
+.cc-code-preview__panel pre {
+  margin: 0;
+  padding: 16px;
+}
+
+.cc-code-preview__panel > code {
+  padding: 16px;
+}
+
+.cc-code-preview__panel code {
+  color: var(--cc-code-preview-color);
+  display: block;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 12px;
+  font-weight: 520;
+  line-height: 1.68;
+  tab-size: 2;
+  white-space: pre;
+}
+
+@keyframes cc-lazy-image-skeleton {
+  from {
+    background-position: 120% 0;
+  }
+  to {
+    background-position: -120% 0;
+  }
+}
+
+.cc-ellipsis {
+  --cc-ellipsis-background: var(--cc-form-color-surface);
+  --cc-ellipsis-line-height: 1.6em;
+  --cc-ellipsis-text-color: var(--cc-form-color-text);
+  color: var(--cc-ellipsis-text-color);
+  display: block;
+  font-family: var(--cc-form-font);
+  line-height: var(--cc-ellipsis-line-height);
+  min-width: 0;
+  position: relative;
+}
+
+.cc-ellipsis__content {
+  box-sizing: border-box;
+  line-height: var(--cc-ellipsis-line-height);
+  max-height: var(
+    --cc-ellipsis-collapsed-height,
+    var(--cc-ellipsis-line-height)
+  );
+  min-width: 0;
+  overflow: hidden;
+  width: 100%;
+  transition: max-height var(--cc-ellipsis-transition-duration, 180ms) ease;
+}
+
+.cc-ellipsis[data-expandable="true"] {
+  cursor: pointer;
+}
+
+.cc-ellipsis[data-expandable="true"]:focus-visible {
+  border-radius: var(--cc-radius-sm);
+  outline: 2px solid var(--cc-form-color-accent);
+  outline-offset: 3px;
+}
+
+.cc-ellipsis[data-lines="multiple"] .cc-ellipsis__content {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--cc-ellipsis-lines, 1);
+  line-clamp: var(--cc-ellipsis-lines, 1);
+}
+
+.cc-ellipsis[data-lines="single"] .cc-ellipsis__content {
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cc-ellipsis[data-expanded="true"] .cc-ellipsis__content {
+  display: block;
+  max-height: var(--cc-ellipsis-expanded-max-height, 999px);
+  text-overflow: clip;
+  white-space: normal;
   -webkit-line-clamp: unset;
   line-clamp: unset;
 }
@@ -6387,13 +7371,14 @@
   will-change: transform;
 }
 
-.cc-chat-virtual-list__top-loading {
+.cc-loading.cc-chat-virtual-list__top-loading {
   align-items: center;
-  background: color-mix(in srgb, var(--cc-color-surface) 92%, transparent);
-  border: 1px solid color-mix(in srgb, var(--cc-color-border) 72%, transparent);
+  background: color-mix(in srgb, var(--cc-form-color-surface) 92%, transparent);
+  border: 1px solid
+    color-mix(in srgb, var(--cc-form-color-border) 72%, transparent);
   border-radius: 999px;
   box-shadow: var(--cc-shadow-sm);
-  color: var(--cc-color-text-muted);
+  color: var(--cc-form-color-accent);
   display: inline-flex;
   font-size: 12px;
   font-weight: 600;
@@ -6414,36 +7399,24 @@
   z-index: 2;
 }
 
-.cc-chat-virtual-list__top-loading::before {
-  animation: cc-chat-top-loading-spin 720ms linear infinite;
-  border: 2px solid color-mix(in srgb, var(--cc-color-primary) 24%, transparent);
-  border-top-color: var(--cc-color-primary);
-  border-radius: 999px;
-  content: "";
-  height: 12px;
-  width: 12px;
-}
-
-.cc-chat-virtual-list__top-loading[data-active="true"] {
+.cc-loading.cc-chat-virtual-list__top-loading[data-active="true"] {
   opacity: 1;
   transform: translate3d(-50%, 0, 0);
 }
 
-@keyframes cc-chat-top-loading-spin {
-  to {
-    transform: rotate(360deg);
-  }
+.cc-loading.cc-chat-virtual-list__top-loading .cc-loading__bolt {
+  filter: drop-shadow(
+    0 4px 8px color-mix(in srgb, var(--cc-form-color-accent) 24%, transparent)
+  );
+  height: 16px;
+  width: 16px;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .cc-chat-virtual-list__top-loading {
+  .cc-loading.cc-chat-virtual-list__top-loading {
     transition-duration: 1ms;
   }
 
-  .cc-chat-virtual-list__top-loading::before {
-    animation: none;
-  }
-
   .cc-rolling-number__track {
     transition-duration: 1ms;
   }
@@ -6478,7 +7451,12 @@
 }
 
 .cc-button:hover:not(:disabled) {
-  transform: translateY(-1px);
+  transform: var(--cc-button-hover-transform);
+}
+
+.cc-button:active:not(:disabled) {
+  box-shadow: var(--cc-button-active-shadow);
+  transform: var(--cc-button-active-transform);
 }
 
 .cc-button:disabled {
@@ -6541,7 +7519,7 @@
     110deg,
     var(--cc-form-color-accent),
     var(--cc-form-color-accent-hover),
-    #27d9ff
+    #36bffb
   );
   color: var(--cc-form-color-accent-contrast);
   overflow: hidden;
@@ -7106,6 +8084,11 @@
   position: relative;
 }
 
+.cc-popconfirm--portal {
+  position: fixed;
+  z-index: 1200;
+}
+
 .cc-popconfirm__panel {
   background: var(--cc-form-color-surface);
   border: 1px solid var(--cc-form-color-border);
@@ -7943,6 +8926,12 @@
   position: relative;
 }
 
+.cc-tooltip--portal {
+  pointer-events: none;
+  position: fixed;
+  z-index: 1200;
+}
+
 .cc-tooltip__content {
   background: var(--cc-tooltip-background);
   border-radius: var(--cc-tooltip-radius);
@@ -8034,10 +9023,18 @@
 }
 
 .cc-toast-viewport {
-  --cc-toast-enter-transform: translateX(var(--cc-toast-slide-distance))
-    scale(1);
-  display: grid;
-  gap: 10px;
+  --cc-toast-enter-transform: translateY(
+      calc(-1 * var(--cc-toast-slide-distance))
+    )
+    scale(0.98);
+  --cc-toast-exit-transform: translateY(
+      calc(-1 * var(--cc-toast-slide-distance))
+    )
+    scale(0.98);
+  --cc-toast-stack-gap: 10px;
+  --cc-toast-max-height: 160px;
+  display: flex;
+  flex-direction: column;
   max-width: min(360px, calc(100vw - 32px));
   position: fixed;
   right: 16px;
@@ -8049,24 +9046,26 @@
   --cc-toast-enter-transform: translateY(
       calc(-1 * var(--cc-toast-slide-distance))
     )
-    scale(1);
+    scale(0.98);
   left: 50%;
   right: auto;
   transform: translateX(-50%);
 }
 
 .cc-toast-viewport--top-left {
-  --cc-toast-enter-transform: translateX(
+  --cc-toast-enter-transform: translateY(
       calc(-1 * var(--cc-toast-slide-distance))
     )
-    scale(1);
+    scale(0.98);
   left: 16px;
   right: auto;
 }
 
 .cc-toast-viewport--top-right {
-  --cc-toast-enter-transform: translateX(var(--cc-toast-slide-distance))
-    scale(1);
+  --cc-toast-enter-transform: translateY(
+      calc(-1 * var(--cc-toast-slide-distance))
+    )
+    scale(0.98);
   right: 16px;
 }
 
@@ -8079,24 +9078,28 @@
 
 .cc-toast-viewport--bottom {
   --cc-toast-enter-transform: translateY(var(--cc-toast-slide-distance))
-    scale(1);
+    scale(0.98);
+  --cc-toast-exit-transform: translateY(var(--cc-toast-slide-distance))
+    scale(0.98);
   left: 50%;
   right: auto;
   transform: translateX(-50%);
 }
 
 .cc-toast-viewport--bottom-left {
-  --cc-toast-enter-transform: translateX(
-      calc(-1 * var(--cc-toast-slide-distance))
-    )
-    scale(1);
+  --cc-toast-enter-transform: translateY(var(--cc-toast-slide-distance))
+    scale(0.98);
+  --cc-toast-exit-transform: translateY(var(--cc-toast-slide-distance))
+    scale(0.98);
   left: 16px;
   right: auto;
 }
 
 .cc-toast-viewport--bottom-right {
-  --cc-toast-enter-transform: translateX(var(--cc-toast-slide-distance))
-    scale(1);
+  --cc-toast-enter-transform: translateY(var(--cc-toast-slide-distance))
+    scale(0.98);
+  --cc-toast-exit-transform: translateY(var(--cc-toast-slide-distance))
+    scale(0.98);
   right: 16px;
 }
 
@@ -8109,6 +9112,8 @@
 }
 
 .cc-toast {
+  --cc-toast-stack-offset: 0px;
+  --cc-toast-stack-index: 0;
   align-items: start;
   background: var(--cc-toast-background);
   border: 1px solid var(--cc-toast-border-color);
@@ -8120,39 +9125,84 @@
   font-family: var(--cc-form-font);
   gap: 4px 10px;
   grid-template-columns: 1fr auto;
+  max-height: var(--cc-toast-max-height);
+  margin: 0;
   opacity: 0;
+  overflow: hidden;
   padding: 12px;
-  transform: var(--cc-toast-enter-transform);
+  transform: translate3d(0, var(--cc-toast-stack-offset), 0)
+    var(--cc-toast-enter-transform);
   transition:
+    border-color var(--cc-animation-duration) var(--cc-animation-easing),
+    filter var(--cc-animation-duration) var(--cc-animation-easing),
+    opacity var(--cc-animation-duration) var(--cc-animation-easing);
+  will-change: auto;
+}
+
+.cc-toast[data-motion="true"] {
+  transition:
+    border-color var(--cc-animation-duration) var(--cc-animation-easing),
+    filter var(--cc-animation-duration) var(--cc-animation-easing),
+    margin var(--cc-animation-duration) var(--cc-animation-easing),
+    max-height var(--cc-animation-duration) var(--cc-animation-easing),
     opacity var(--cc-animation-duration) var(--cc-animation-easing),
+    padding var(--cc-animation-duration) var(--cc-animation-easing),
     transform var(--cc-animation-duration) var(--cc-animation-easing);
+  will-change: transform, opacity, filter;
+}
+
+.cc-toast + .cc-toast {
+  margin-top: var(--cc-toast-stack-gap);
 }
 
 .cc-toast[data-state="enter"] {
+  filter: blur(0);
   opacity: 1;
-  transform: translate3d(0, 0, 0) scale(var(--cc-toast-scale-active));
+  transform: translate3d(0, var(--cc-toast-stack-offset), 0)
+    scale(var(--cc-toast-scale-active));
+}
+
+.cc-toast[data-state="prepare"] {
+  filter: blur(2px);
+  opacity: 0;
+  transform: translate3d(0, var(--cc-toast-stack-offset), 0)
+    var(--cc-toast-enter-transform);
 }
 
 .cc-toast[data-state="exit"] {
+  filter: blur(2px);
+  margin-top: 0;
+  max-height: 0;
   opacity: 0;
-  transform: var(--cc-toast-enter-transform);
+  padding-bottom: 0;
+  padding-top: 0;
+  pointer-events: none;
+  transform: translate3d(0, var(--cc-toast-stack-offset), 0)
+    var(--cc-toast-exit-transform);
+}
+
+.cc-toast[data-state="exit"] + .cc-toast {
+  margin-top: 0;
 }
 
 .cc-toast[data-animation="fade"],
 .cc-toast[data-animation="fade"][data-state="exit"] {
-  transform: translate3d(0, 0, 0) scale(1);
+  transform: translate3d(0, var(--cc-toast-stack-offset), 0) scale(1);
 }
 
 .cc-toast[data-animation="scale"] {
-  transform: scale(var(--cc-toast-scale-enter));
+  transform: translate3d(0, var(--cc-toast-stack-offset), 0)
+    scale(var(--cc-toast-scale-enter));
 }
 
 .cc-toast[data-animation="scale"][data-state="enter"] {
-  transform: scale(var(--cc-toast-scale-active));
+  transform: translate3d(0, var(--cc-toast-stack-offset), 0)
+    scale(var(--cc-toast-scale-active));
 }
 
 .cc-toast[data-animation="scale"][data-state="exit"] {
-  transform: scale(var(--cc-toast-scale-enter));
+  transform: translate3d(0, var(--cc-toast-stack-offset), 0)
+    scale(var(--cc-toast-scale-enter));
 }
 
 .cc-toast[data-animation="none"] {
@@ -8185,14 +9235,35 @@
 }
 
 .cc-toast__close {
+  align-items: center;
   background: transparent;
-  border: 0;
+  border: 1px solid transparent;
+  border-radius: var(--cc-radius-md);
   color: var(--cc-form-color-muted);
   cursor: pointer;
+  display: inline-flex;
   font: inherit;
   grid-column: 2;
   grid-row: 1 / span 2;
-  padding: 0 2px;
+  height: 28px;
+  justify-content: center;
+  padding: 0;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease;
+  width: 28px;
+}
+
+.cc-toast__close:hover {
+  background: var(--cc-form-color-surface-soft);
+  border-color: var(--cc-form-color-border);
+  color: var(--cc-form-color-text);
+}
+
+.cc-toast__close:focus-visible {
+  box-shadow: var(--cc-form-shadow-focus);
+  outline: none;
 }
 
 .cc-tabs {
@@ -8220,6 +9291,7 @@
 }
 
 .cc-tabs__tab {
+  background: transparent;
   border: 0;
   border-radius: var(--cc-form-control-radius);
   color: var(--cc-tabs-tab-color);
@@ -8228,9 +9300,18 @@
   font-weight: 600;
   min-height: 38px;
   padding: 0 12px;
+  transition:
+    background var(--cc-animation-duration) var(--cc-animation-easing),
+    color var(--cc-animation-duration) var(--cc-animation-easing);
+}
+
+.cc-tabs__tab:hover:not(:disabled) {
+  background: var(--cc-tabs-tab-hover-background);
+  color: var(--cc-tabs-tab-hover-color);
 }
 
 .cc-tabs__tab[aria-selected="true"] {
+  background: var(--cc-tabs-tab-active-background);
   color: var(--cc-tabs-tab-active-color);
 }
 
@@ -8353,6 +9434,8 @@
   .cc-popup__overlay,
   .cc-popup__panel,
   .cc-tooltip__content,
+  .cc-orbital-sphere__stage,
+  .cc-orbital-sphere__item,
   .cc-tilt-card,
   .cc-tilt-card__surface,
   .cc-tilt-card__glare,
@@ -8367,6 +9450,8 @@
   .cc-design-effect,
   .cc-design-effect__overlay,
   .cc-design-effect::after,
+  .cc-orbital-sphere__stage,
+  .cc-orbital-sphere__item,
   .cc-typewriter-text__cursor {
     animation: none;
   }