@tangle-network/sandbox-ui 0.18.0 → 0.19.0

package/dist/styles.css

@@ -7,27 +7,44 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-200: oklch(88.5% 0.062 18.334);
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-red-700: oklch(50.5% 0.213 27.518);
     --color-orange-400: oklch(75% 0.183 55.934);
     --color-amber-500: oklch(76.9% 0.188 70.08);
     --color-amber-600: oklch(66.6% 0.179 58.318);
     --color-yellow-400: oklch(85.2% 0.199 91.936);
+    --color-yellow-500: oklch(79.5% 0.184 86.047);
+    --color-yellow-600: oklch(68.1% 0.162 75.834);
     --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-500: oklch(72.3% 0.219 149.579);
+    --color-green-600: oklch(62.7% 0.194 149.214);
+    --color-emerald-400: oklch(76.5% 0.177 163.223);
     --color-emerald-500: oklch(69.6% 0.17 162.48);
     --color-sky-400: oklch(74.6% 0.16 232.661);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-violet-300: oklch(81.1% 0.111 293.571);
+    --color-violet-400: oklch(70.2% 0.183 293.541);
     --color-violet-500: oklch(60.6% 0.25 292.717);
     --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-900: oklch(21% 0.034 264.665);
+    --color-zinc-400: oklch(70.5% 0.015 286.067);
+    --color-neutral-400: oklch(70.8% 0 0);
+    --color-neutral-500: oklch(55.6% 0 0);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-sm: 24rem;
     --container-md: 28rem;
+    --container-lg: 32rem;
     --container-2xl: 42rem;
     --container-3xl: 48rem;
+    --container-4xl: 56rem;
+    --container-5xl: 64rem;
     --container-6xl: 72rem;
     --container-7xl: 80rem;
     --text-xs: 0.75rem;
@@ -72,8 +89,10 @@
     --animate-spin: spin 1s linear infinite;
     --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --animate-bounce: bounce 1s infinite;
     --blur-sm: 8px;
     --blur-md: 12px;
+    --blur-xl: 24px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -229,6 +248,9 @@
   }
 }
 @layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
   .pointer-events-none {
     pointer-events: none;
   }
@@ -291,6 +313,9 @@
   .-top-4 {
     top: calc(var(--spacing) * -4);
   }
+  .-top-6 {
+    top: calc(var(--spacing) * -6);
+  }
   .-top-12 {
     top: calc(var(--spacing) * -12);
   }
@@ -315,6 +340,9 @@
   .top-14 {
     top: calc(var(--spacing) * 14);
   }
+  .top-\[50\%\] {
+    top: 50%;
+  }
   .top-full {
     top: 100%;
   }
@@ -333,12 +361,21 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
   .bottom-6 {
     bottom: calc(var(--spacing) * 6);
   }
+  .bottom-\[-0\.75rem\] {
+    bottom: -0.75rem;
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
@@ -354,6 +391,9 @@
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
+  .left-\[50\%\] {
+    left: 50%;
+  }
   .z-0 {
     z-index: 0;
   }
@@ -369,6 +409,9 @@
   .z-50 {
     z-index: 50;
   }
+  .z-\[100\] {
+    z-index: 100;
+  }
   .col-span-12 {
     grid-column: span 12 / span 12;
   }
@@ -390,24 +433,45 @@
       max-width: 96rem;
     }
   }
+  .-mx-1 {
+    margin-inline: calc(var(--spacing) * -1);
+  }
   .mx-1 {
     margin-inline: calc(var(--spacing) * 1);
   }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
+  .mx-4 {
+    margin-inline: calc(var(--spacing) * 4);
+  }
   .mx-auto {
     margin-inline: auto;
   }
+  .my-1 {
+    margin-block: calc(var(--spacing) * 1);
+  }
   .my-2 {
     margin-block: calc(var(--spacing) * 2);
   }
+  .my-3 {
+    margin-block: calc(var(--spacing) * 3);
+  }
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
   .my-8 {
     margin-block: calc(var(--spacing) * 8);
   }
+  .-mt-0\.5 {
+    margin-top: calc(var(--spacing) * -0.5);
+  }
+  .-mt-10 {
+    margin-top: calc(var(--spacing) * -10);
+  }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -444,6 +508,9 @@
   .mr-3 {
     margin-right: calc(var(--spacing) * 3);
   }
+  .-mb-px {
+    margin-bottom: -1px;
+  }
   .mb-0\.5 {
     margin-bottom: calc(var(--spacing) * 0.5);
   }
@@ -471,6 +538,15 @@
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
+  .mb-10 {
+    margin-bottom: calc(var(--spacing) * 10);
+  }
+  .-ml-1 {
+    margin-left: calc(var(--spacing) * -1);
+  }
+  .ml-0\.5 {
+    margin-left: calc(var(--spacing) * 0.5);
+  }
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
@@ -522,6 +598,9 @@
   .table {
     display: table;
   }
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }
@@ -570,12 +649,18 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
+  .h-13 {
+    height: calc(var(--spacing) * 13);
+  }
   .h-14 {
     height: calc(var(--spacing) * 14);
   }
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
   .h-28 {
     height: calc(var(--spacing) * 28);
   }
@@ -591,12 +676,39 @@
   .h-\[3px\] {
     height: 3px;
   }
+  .h-\[70vh\] {
+    height: 70vh;
+  }
   .h-\[72\%\] {
     height: 72%;
   }
+  .h-\[380px\] {
+    height: 380px;
+  }
+  .h-\[480px\] {
+    height: 480px;
+  }
   .h-\[500px\] {
     height: 500px;
   }
+  .h-\[var\(--avatar-size\)\] {
+    height: var(--avatar-size);
+  }
+  .h-\[var\(--control-height\)\] {
+    height: var(--control-height);
+  }
+  .h-\[var\(--indicator-dot-size\)\] {
+    height: var(--indicator-dot-size);
+  }
+  .h-\[var\(--radix-select-trigger-height\)\] {
+    height: var(--radix-select-trigger-height);
+  }
+  .h-\[var\(--timeline-dot-size\)\] {
+    height: var(--timeline-dot-size);
+  }
+  .h-\[var\(--tool-icon-size\)\] {
+    height: var(--tool-icon-size);
+  }
   .h-auto {
     height: auto;
   }
@@ -612,12 +724,27 @@
   .max-h-48 {
     max-height: calc(var(--spacing) * 48);
   }
+  .max-h-60 {
+    max-height: calc(var(--spacing) * 60);
+  }
+  .max-h-72 {
+    max-height: calc(var(--spacing) * 72);
+  }
   .max-h-80 {
     max-height: calc(var(--spacing) * 80);
   }
+  .max-h-96 {
+    max-height: calc(var(--spacing) * 96);
+  }
+  .max-h-\[70vh\] {
+    max-height: 70vh;
+  }
   .max-h-\[90vh\] {
     max-height: 90vh;
   }
+  .max-h-\[160px\] {
+    max-height: 160px;
+  }
   .max-h-\[440px\] {
     max-height: 440px;
   }
@@ -630,6 +757,21 @@
   .min-h-\[2px\] {
     min-height: 2px;
   }
+  .min-h-\[6rem\] {
+    min-height: 6rem;
+  }
+  .min-h-\[12rem\] {
+    min-height: 12rem;
+  }
+  .min-h-\[14rem\] {
+    min-height: 14rem;
+  }
+  .min-h-\[16rem\] {
+    min-height: 16rem;
+  }
+  .min-h-\[42px\] {
+    min-height: 42px;
+  }
   .min-h-\[44px\] {
     min-height: 44px;
   }
@@ -639,9 +781,18 @@
   .min-h-\[80px\] {
     min-height: 80px;
   }
+  .min-h-\[120px\] {
+    min-height: 120px;
+  }
   .min-h-\[160px\] {
     min-height: 160px;
   }
+  .min-h-\[200px\] {
+    min-height: 200px;
+  }
+  .min-h-full {
+    min-height: 100%;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -654,9 +805,15 @@
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
+  .w-1\/2 {
+    width: calc(1 / 2 * 100%);
+  }
   .w-1\/3 {
     width: calc(1 / 3 * 100%);
   }
+  .w-1\/4 {
+    width: calc(1 / 4 * 100%);
+  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -672,9 +829,15 @@
   .w-3\.5 {
     width: calc(var(--spacing) * 3.5);
   }
+  .w-3\/4 {
+    width: calc(3 / 4 * 100%);
+  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
+  .w-4\/6 {
+    width: calc(4 / 6 * 100%);
+  }
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
@@ -702,6 +865,9 @@
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
+  .w-14 {
+    width: calc(var(--spacing) * 14);
+  }
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
@@ -711,12 +877,27 @@
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
+  .w-28 {
+    width: calc(var(--spacing) * 28);
+  }
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
+  .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
+  .w-44 {
+    width: calc(var(--spacing) * 44);
+  }
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
+  .w-52 {
+    width: calc(var(--spacing) * 52);
+  }
+  .w-56 {
+    width: calc(var(--spacing) * 56);
+  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
@@ -726,6 +907,9 @@
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
+  .w-96 {
+    width: calc(var(--spacing) * 96);
+  }
   .w-\[3px\] {
     width: 3px;
   }
@@ -744,24 +928,51 @@
   .w-\[420px\] {
     width: 420px;
   }
+  .w-\[480px\] {
+    width: 480px;
+  }
+  .w-\[520px\] {
+    width: 520px;
+  }
   .w-\[560px\] {
     width: 560px;
   }
+  .w-\[600px\] {
+    width: 600px;
+  }
   .w-\[640px\] {
     width: 640px;
   }
   .w-\[680px\] {
     width: 680px;
   }
+  .w-\[900px\] {
+    width: 900px;
+  }
   .w-\[min\(88vw\,24rem\)\] {
     width: min(88vw, 24rem);
   }
+  .w-\[var\(--avatar-size\)\] {
+    width: var(--avatar-size);
+  }
+  .w-\[var\(--control-height\)\] {
+    width: var(--control-height);
+  }
+  .w-\[var\(--indicator-dot-size\)\] {
+    width: var(--indicator-dot-size);
+  }
   .w-\[var\(--radix-dropdown-menu-trigger-width\)\] {
     width: var(--radix-dropdown-menu-trigger-width);
   }
   .w-\[var\(--radix-select-trigger-width\)\] {
     width: var(--radix-select-trigger-width);
   }
+  .w-\[var\(--timeline-dot-size\)\] {
+    width: var(--timeline-dot-size);
+  }
+  .w-\[var\(--tool-icon-size\)\] {
+    width: var(--tool-icon-size);
+  }
   .w-full {
     width: 100%;
   }
@@ -777,6 +988,12 @@
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
+  .max-w-4xl {
+    max-width: var(--container-4xl);
+  }
+  .max-w-5xl {
+    max-width: var(--container-5xl);
+  }
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
@@ -786,12 +1003,27 @@
   .max-w-\[14rem\] {
     max-width: 14rem;
   }
+  .max-w-\[72\%\] {
+    max-width: 72%;
+  }
   .max-w-\[75\%\] {
     max-width: 75%;
   }
+  .max-w-\[78\%\] {
+    max-width: 78%;
+  }
+  .max-w-\[85\%\] {
+    max-width: 85%;
+  }
   .max-w-\[90vw\] {
     max-width: 90vw;
   }
+  .max-w-\[120px\] {
+    max-width: 120px;
+  }
+  .max-w-\[150px\] {
+    max-width: 150px;
+  }
   .max-w-\[160px\] {
     max-width: 160px;
   }
@@ -807,12 +1039,21 @@
   .max-w-\[480px\] {
     max-width: 480px;
   }
+  .max-w-full {
+    max-width: 100%;
+  }
+  .max-w-lg {
+    max-width: var(--container-lg);
+  }
   .max-w-md {
     max-width: var(--container-md);
   }
   .max-w-none {
     max-width: none;
   }
+  .max-w-prose {
+    max-width: 65ch;
+  }
   .max-w-sm {
     max-width: var(--container-sm);
   }
@@ -822,6 +1063,9 @@
   .min-w-4 {
     min-width: calc(var(--spacing) * 4);
   }
+  .min-w-\[8rem\] {
+    min-width: 8rem;
+  }
   .min-w-\[20px\] {
     min-width: 20px;
   }
@@ -840,6 +1084,9 @@
   .min-w-\[360px\] {
     min-width: 360px;
   }
+  .min-w-\[var\(--radix-select-trigger-width\)\] {
+    min-width: var(--radix-select-trigger-width);
+  }
   .flex-1 {
     flex: 1;
   }
@@ -849,12 +1096,18 @@
   .flex-none {
     flex: none;
   }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
   .grow {
     flex-grow: 1;
   }
+  .caption-bottom {
+    caption-side: bottom;
+  }
   .border-collapse {
     border-collapse: collapse;
   }
@@ -886,10 +1139,18 @@
     --tw-translate-x: calc(var(--spacing) * 12);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-\[-50\%\] {
+    --tw-translate-x: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-y-\[-50\%\] {
+    --tw-translate-y: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .scale-\[1\.02\] {
     scale: 1.02;
   }
@@ -906,6 +1167,9 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-bounce {
+    animation: var(--animate-bounce);
+  }
   .animate-ping {
     animation: var(--animate-ping);
   }
@@ -966,18 +1230,30 @@
   .grid-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
+  .grid-cols-\[1\.25rem_minmax\(0\,1fr\)\] {
+    grid-template-columns: 1.25rem minmax(0,1fr);
+  }
   .grid-cols-\[100px_1fr\] {
     grid-template-columns: 100px 1fr;
   }
+  .grid-cols-\[auto_minmax\(0\,1fr\)\] {
+    grid-template-columns: auto minmax(0,1fr);
+  }
   .flex-col {
     flex-direction: column;
   }
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
   .flex-row {
     flex-direction: row;
   }
   .flex-row-reverse {
     flex-direction: row-reverse;
   }
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -1038,6 +1314,15 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  .gap-10 {
+    gap: calc(var(--spacing) * 10);
+  }
+  .gap-\[3px\] {
+    gap: 3px;
+  }
+  .gap-\[5px\] {
+    gap: 5px;
+  }
   .gap-px {
     gap: 1px;
   }
@@ -1146,6 +1431,22 @@
       margin-block-end: calc(1px * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .gap-x-2 {
+    column-gap: calc(var(--spacing) * 2);
+  }
+  .gap-x-4 {
+    column-gap: calc(var(--spacing) * 4);
+  }
+  .-space-x-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
+  .gap-y-1 {
+    row-gap: calc(var(--spacing) * 1);
+  }
   .gap-y-3 {
     row-gap: calc(var(--spacing) * 3);
   }
@@ -1190,9 +1491,33 @@
   .rounded-\[16px\] {
     border-radius: 16px;
   }
+  .rounded-\[18px\] {
+    border-radius: 18px;
+  }
+  .rounded-\[20px\] {
+    border-radius: 20px;
+  }
+  .rounded-\[22px\] {
+    border-radius: 22px;
+  }
   .rounded-\[24px\] {
     border-radius: 24px;
   }
+  .rounded-\[26px\] {
+    border-radius: 26px;
+  }
+  .rounded-\[28px\] {
+    border-radius: 28px;
+  }
+  .rounded-\[calc\(var\(--radius-md\)\+2px\)\] {
+    border-radius: calc(var(--radius-md) + 2px);
+  }
+  .rounded-\[calc\(var\(--radius-xl\)\+2px\)\] {
+    border-radius: calc(var(--radius-xl) + 2px);
+  }
+  .rounded-\[var\(--radius-full\)\] {
+    border-radius: var(--radius-full);
+  }
   .rounded-\[var\(--radius-lg\)\] {
     border-radius: var(--radius-lg);
   }
@@ -1214,13 +1539,38 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .rounded-none {
+    border-radius: 0;
+  }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-t-\[var\(--radius-lg\)\] {
+    border-top-left-radius: var(--radius-lg);
+    border-top-right-radius: var(--radius-lg);
+  }
+  .rounded-t-\[var\(--radius-sm\)\] {
+    border-top-left-radius: var(--radius-sm);
+    border-top-right-radius: var(--radius-sm);
+  }
   .rounded-t-sm {
     border-top-left-radius: var(--radius-sm);
     border-top-right-radius: var(--radius-sm);
   }
+  .rounded-b-\[var\(--radius-lg\)\] {
+    border-bottom-right-radius: var(--radius-lg);
+    border-bottom-left-radius: var(--radius-lg);
+  }
+  .rounded-b-\[var\(--radius-sm\)\] {
+    border-bottom-right-radius: var(--radius-sm);
+    border-bottom-left-radius: var(--radius-sm);
+  }
+  .rounded-br-\[12px\] {
+    border-bottom-right-radius: 12px;
+  }
   .rounded-bl-lg {
     border-bottom-left-radius: var(--radius-lg);
   }
@@ -1276,18 +1626,48 @@
     --tw-border-style: none;
     border-style: none;
   }
+  .border-\[var\(--accent-text\)\] {
+    border-color: var(--accent-text);
+  }
   .border-\[var\(--border-accent\)\] {
     border-color: var(--border-accent);
   }
   .border-\[var\(--border-accent\,transparent\)\] {
     border-color: var(--border-accent,transparent);
   }
+  .border-\[var\(--border-subtle\)\] {
+    border-color: var(--border-subtle);
+  }
+  .border-\[var\(--border-subtle\,hsl\(var\(--border\)\)\)\] {
+    border-color: var(--border-subtle,hsl(var(--border)));
+  }
+  .border-\[var\(--brand-cool\,hsl\(var\(--ring\)\)\)\] {
+    border-color: var(--brand-cool,hsl(var(--ring)));
+  }
+  .border-\[var\(--brand-emerald\)\]\/50 {
+    border-color: var(--brand-emerald);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--brand-emerald) 50%, transparent);
+    }
+  }
+  .border-\[var\(--chat-input-border\,var\(--border-default\)\)\] {
+    border-color: var(--chat-input-border,var(--border-default));
+  }
+  .border-\[var\(--chat-send-border\,var\(--border-accent\)\)\] {
+    border-color: var(--chat-send-border,var(--border-accent));
+  }
   .border-\[var\(--code-error\)\]\/20 {
     border-color: var(--code-error);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--code-error) 20%, transparent);
     }
   }
+  .border-\[var\(--code-error\)\]\/30 {
+    border-color: var(--code-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--code-error) 30%, transparent);
+    }
+  }
   .border-\[var\(--code-number\)\]\/20 {
     border-color: var(--code-number);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1300,6 +1680,9 @@
       border-color: color-mix(in oklab, var(--code-success) 20%, transparent);
     }
   }
+  .border-\[var\(--glass-border\)\] {
+    border-color: var(--glass-border);
+  }
   .border-\[var\(--status-running\)\]\/30 {
     border-color: var(--status-running);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1321,9 +1704,63 @@
   .border-\[var\(--surface-success-border\)\] {
     border-color: var(--surface-success-border);
   }
+  .border-\[var\(--surface-teal-border\)\] {
+    border-color: var(--surface-teal-border);
+  }
+  .border-\[var\(--surface-violet-border\)\] {
+    border-color: var(--surface-violet-border);
+  }
   .border-\[var\(--surface-warning-border\)\] {
     border-color: var(--surface-warning-border);
   }
+  .border-blue-400 {
+    border-color: var(--color-blue-400);
+  }
+  .border-blue-500\/30 {
+    border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
+    }
+  }
+  .border-emerald-500\/30 {
+    border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
+    }
+  }
+  .border-emerald-500\/40 {
+    border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-emerald-500) 40%, transparent);
+    }
+  }
+  .border-green-500\/30 {
+    border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-green-500) 30%, transparent);
+    }
+  }
+  .border-red-500\/20 {
+    border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
+    }
+  }
+  .border-red-500\/30 {
+    border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
+    }
+  }
+  .border-transparent {
+    border-color: transparent;
+  }
+  .border-violet-500\/30 {
+    border-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-violet-500) 30%, transparent);
+    }
+  }
   .border-white\/10 {
     border-color: color-mix(in srgb, #fff 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1336,9 +1773,33 @@
       border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
     }
   }
+  .border-yellow-500\/30 {
+    border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
+    }
+  }
   .border-t-transparent {
     border-top-color: transparent;
   }
+  .bg-\[\#8E59FF\] {
+    background-color: #8E59FF;
+  }
+  .bg-\[\#FEBC2E\] {
+    background-color: #FEBC2E;
+  }
+  .bg-\[\#FF5F57\] {
+    background-color: #FF5F57;
+  }
+  .bg-\[color\:color-mix\(in_srgb\,var\(--bg-card\)_94\%\,transparent\)\] {
+    background-color: var(--bg-card);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--bg-card) 94%,transparent);
+    }
+  }
+  .bg-\[var\(--accent-surface\)\] {
+    background-color: var(--accent-surface);
+  }
   .bg-\[var\(--accent-surface-soft\)\] {
     background-color: var(--accent-surface-soft);
   }
@@ -1351,6 +1812,9 @@
   .bg-\[var\(--accent-surface-strong\)\] {
     background-color: var(--accent-surface-strong);
   }
+  .bg-\[var\(--bg-card\)\] {
+    background-color: var(--bg-card);
+  }
   .bg-\[var\(--bg-root\)\] {
     background-color: var(--bg-root);
   }
@@ -1360,6 +1824,24 @@
       background-color: color-mix(in oklab, var(--border-accent) 5%, transparent);
     }
   }
+  .bg-\[var\(--border-hover\)\] {
+    background-color: var(--border-hover);
+  }
+  .bg-\[var\(--brand-cool\)\] {
+    background-color: var(--brand-cool);
+  }
+  .bg-\[var\(--brand-cool\,hsl\(var\(--primary\)\)\)\]\/15 {
+    background-color: var(--brand-cool,hsl(var(--primary)));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--brand-cool,hsl(var(--primary))) 15%, transparent);
+    }
+  }
+  .bg-\[var\(--brand-glow\)\] {
+    background-color: var(--brand-glow);
+  }
+  .bg-\[var\(--brand-primary\)\] {
+    background-color: var(--brand-primary);
+  }
   .bg-\[var\(--brand-primary\,hsl\(var\(--primary\)\)\)\] {
     background-color: var(--brand-primary,hsl(var(--primary)));
   }
@@ -1378,6 +1860,12 @@
       background-color: color-mix(in oklab, var(--code-error) 5%, transparent);
     }
   }
+  .bg-\[var\(--code-error\)\]\/14 {
+    background-color: var(--code-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--code-error) 14%, transparent);
+    }
+  }
   .bg-\[var\(--code-number\)\] {
     background-color: var(--code-number);
   }
@@ -1414,6 +1902,9 @@
   .bg-\[var\(--surface-info-bg\)\] {
     background-color: var(--surface-info-bg);
   }
+  .bg-\[var\(--surface-info-text\)\] {
+    background-color: var(--surface-info-text);
+  }
   .bg-\[var\(--surface-neutral-bg\)\] {
     background-color: var(--surface-neutral-bg);
   }
@@ -1423,6 +1914,12 @@
   .bg-\[var\(--surface-success-bg\)\] {
     background-color: var(--surface-success-bg);
   }
+  .bg-\[var\(--surface-success-text\)\] {
+    background-color: var(--surface-success-text);
+  }
+  .bg-\[var\(--surface-teal-bg\)\] {
+    background-color: var(--surface-teal-bg);
+  }
   .bg-\[var\(--surface-violet-bg\)\] {
     background-color: var(--surface-violet-bg);
   }
@@ -1438,6 +1935,12 @@
       background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
     }
   }
+  .bg-black\/40 {
+    background-color: color-mix(in srgb, #000 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
+    }
+  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1450,6 +1953,27 @@
       background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
     }
   }
+  .bg-blue-500 {
+    background-color: var(--color-blue-500);
+  }
+  .bg-blue-500\/8 {
+    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 8%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-500) 8%, transparent);
+    }
+  }
+  .bg-blue-500\/15 {
+    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-500) 15%, transparent);
+    }
+  }
+  .bg-blue-600\/20 {
+    background-color: color-mix(in srgb, oklch(54.6% 0.245 262.881) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-600) 20%, transparent);
+    }
+  }
   .bg-emerald-500\/10 {
     background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1465,9 +1989,39 @@
   .bg-green-500 {
     background-color: var(--color-green-500);
   }
+  .bg-green-600\/20 {
+    background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-green-600) 20%, transparent);
+    }
+  }
+  .bg-red-500 {
+    background-color: var(--color-red-500);
+  }
+  .bg-red-500\/10 {
+    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
+    }
+  }
+  .bg-red-600 {
+    background-color: var(--color-red-600);
+  }
+  .bg-red-600\/20 {
+    background-color: color-mix(in srgb, oklch(57.7% 0.245 27.325) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-red-600) 20%, transparent);
+    }
+  }
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-violet-500\/8 {
+    background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 8%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-violet-500) 8%, transparent);
+    }
+  }
   .bg-violet-500\/20 {
     background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1489,6 +2043,15 @@
       background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
     }
   }
+  .bg-yellow-500 {
+    background-color: var(--color-yellow-500);
+  }
+  .bg-yellow-600\/20 {
+    background-color: color-mix(in srgb, oklch(68.1% 0.162 75.834) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-yellow-600) 20%, transparent);
+    }
+  }
   .bg-gradient-to-br {
     --tw-gradient-position: to bottom right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -1503,6 +2066,9 @@
   .bg-\[linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.03\)\,transparent\)\] {
     background-image: linear-gradient(180deg,rgba(255,255,255,0.03),transparent);
   }
+  .bg-\[linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.04\)\,transparent\)\] {
+    background-image: linear-gradient(180deg,rgba(255,255,255,0.04),transparent);
+  }
   .from-white\/5 {
     --tw-gradient-from: color-mix(in srgb, #fff 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1514,6 +2080,9 @@
     --tw-gradient-to: transparent;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .fill-current {
+    fill: currentcolor;
+  }
   .object-contain {
     object-fit: contain;
   }
@@ -1532,6 +2101,9 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
@@ -1547,12 +2119,24 @@
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
+  .p-10 {
+    padding: calc(var(--spacing) * 10);
+  }
   .p-12 {
     padding: calc(var(--spacing) * 12);
   }
+  .p-14 {
+    padding: calc(var(--spacing) * 14);
+  }
   .p-16 {
     padding: calc(var(--spacing) * 16);
   }
+  .px-0 {
+    padding-inline: calc(var(--spacing) * 0);
+  }
+  .px-0\.5 {
+    padding-inline: calc(var(--spacing) * 0.5);
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -1568,6 +2152,9 @@
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
+  .px-3\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -1577,9 +2164,24 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .px-7 {
+    padding-inline: calc(var(--spacing) * 7);
+  }
   .px-8 {
     padding-inline: calc(var(--spacing) * 8);
   }
+  .px-9 {
+    padding-inline: calc(var(--spacing) * 9);
+  }
+  .px-\[var\(--chat-message-px\)\] {
+    padding-inline: var(--chat-message-px);
+  }
+  .px-\[var\(--tool-card-px\)\] {
+    padding-inline: var(--tool-card-px);
+  }
+  .py-0 {
+    padding-block: calc(var(--spacing) * 0);
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -1622,9 +2224,27 @@
   .py-20 {
     padding-block: calc(var(--spacing) * 20);
   }
+  .py-\[2px\] {
+    padding-block: 2px;
+  }
+  .py-\[var\(--chat-input-py\)\] {
+    padding-block: var(--chat-input-py);
+  }
+  .py-\[var\(--chat-message-py\)\] {
+    padding-block: var(--chat-message-py);
+  }
+  .py-\[var\(--tool-card-py\)\] {
+    padding-block: var(--tool-card-py);
+  }
   .py-px {
     padding-block: 1px;
   }
+  .pt-0 {
+    padding-top: calc(var(--spacing) * 0);
+  }
+  .pt-0\.5 {
+    padding-top: calc(var(--spacing) * 0.5);
+  }
   .pt-1 {
     padding-top: calc(var(--spacing) * 1);
   }
@@ -1640,6 +2260,9 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
   .pt-10 {
     padding-top: calc(var(--spacing) * 10);
   }
@@ -1655,9 +2278,18 @@
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
+  .pr-4 {
+    padding-right: calc(var(--spacing) * 4);
+  }
+  .pr-8 {
+    padding-right: calc(var(--spacing) * 8);
+  }
   .pr-10 {
     padding-right: calc(var(--spacing) * 10);
   }
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
   .pb-0\.5 {
     padding-bottom: calc(var(--spacing) * 0.5);
   }
@@ -1682,9 +2314,18 @@
   .pb-12 {
     padding-bottom: calc(var(--spacing) * 12);
   }
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
   .pl-7 {
     padding-left: calc(var(--spacing) * 7);
   }
+  .pl-8 {
+    padding-left: calc(var(--spacing) * 8);
+  }
   .pl-9 {
     padding-left: calc(var(--spacing) * 9);
   }
@@ -1697,6 +2338,15 @@
   .text-right {
     text-align: right;
   }
+  .align-middle {
+    vertical-align: middle;
+  }
+  .align-text-bottom {
+    vertical-align: text-bottom;
+  }
+  .align-top {
+    vertical-align: top;
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -1739,6 +2389,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[0\.85em\] {
+    font-size: 0.85em;
+  }
   .text-\[8px\] {
     font-size: 8px;
   }
@@ -1757,13 +2410,43 @@
   .text-\[13px\] {
     font-size: 13px;
   }
+  .text-\[15px\] {
+    font-size: 15px;
+  }
   .text-\[17px\] {
     font-size: 17px;
   }
+  .text-\[calc\(var\(--font-size-xs\)-1px\)\] {
+    font-size: calc(var(--font-size-xs) - 1px);
+  }
+  .leading-6 {
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+  }
+  .leading-6\.5 {
+    --tw-leading: calc(var(--spacing) * 6.5);
+    line-height: calc(var(--spacing) * 6.5);
+  }
+  .leading-7 {
+    --tw-leading: calc(var(--spacing) * 7);
+    line-height: calc(var(--spacing) * 7);
+  }
   .leading-\[1\.6\] {
     --tw-leading: 1.6;
     line-height: 1.6;
   }
+  .leading-\[1\.55\] {
+    --tw-leading: 1.55;
+    line-height: 1.55;
+  }
+  .leading-\[var\(--line-height-base\)\] {
+    --tw-leading: var(--line-height-base);
+    line-height: var(--line-height-base);
+  }
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
   .leading-relaxed {
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
@@ -1772,10 +2455,18 @@
     --tw-leading: var(--leading-tight);
     line-height: var(--leading-tight);
   }
+  .font-\[var\(--chat-label-weight\,600\)\] {
+    --tw-font-weight: var(--chat-label-weight,600);
+    font-weight: var(--chat-label-weight,600);
+  }
   .font-\[var\(--font-display\)\] {
     --tw-font-weight: var(--font-display);
     font-weight: var(--font-display);
   }
+  .font-\[var\(--font-sans\)\] {
+    --tw-font-weight: var(--font-sans);
+    font-weight: var(--font-sans);
+  }
   .font-black {
     --tw-font-weight: var(--font-weight-black);
     font-weight: var(--font-weight-black);
@@ -1804,14 +2495,26 @@
     --tw-tracking: 0.01em;
     letter-spacing: 0.01em;
   }
+  .tracking-\[0\.1em\] {
+    --tw-tracking: 0.1em;
+    letter-spacing: 0.1em;
+  }
   .tracking-\[0\.06em\] {
     --tw-tracking: 0.06em;
     letter-spacing: 0.06em;
   }
+  .tracking-\[0\.08em\] {
+    --tw-tracking: 0.08em;
+    letter-spacing: 0.08em;
+  }
   .tracking-\[0\.12em\] {
     --tw-tracking: 0.12em;
     letter-spacing: 0.12em;
   }
+  .tracking-\[0\.14em\] {
+    --tw-tracking: 0.14em;
+    letter-spacing: 0.14em;
+  }
   .tracking-\[0\.16em\] {
     --tw-tracking: 0.16em;
     letter-spacing: 0.16em;
@@ -1820,6 +2523,14 @@
     --tw-tracking: 0.18em;
     letter-spacing: 0.18em;
   }
+  .tracking-\[var\(--chat-label-tracking\,0\.14em\)\] {
+    --tw-tracking: var(--chat-label-tracking,0.14em);
+    letter-spacing: var(--chat-label-tracking,0.14em);
+  }
+  .tracking-\[var\(--chat-label-tracking\,0\.16em\)\] {
+    --tw-tracking: var(--chat-label-tracking,0.16em);
+    letter-spacing: var(--chat-label-tracking,0.16em);
+  }
   .tracking-normal {
     --tw-tracking: var(--tracking-normal);
     letter-spacing: var(--tracking-normal);
@@ -1847,15 +2558,36 @@
   .break-words {
     overflow-wrap: break-word;
   }
+  .break-all {
+    word-break: break-all;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .whitespace-pre {
+    white-space: pre;
+  }
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
   .text-\[var\(--accent-text\)\] {
     color: var(--accent-text);
   }
+  .text-\[var\(--accent-text\)\]\/80 {
+    color: var(--accent-text);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--accent-text) 80%, transparent);
+    }
+  }
+  .text-\[var\(--brand-cool\)\] {
+    color: var(--brand-cool);
+  }
+  .text-\[var\(--brand-cool\,hsl\(var\(--primary\)\)\)\] {
+    color: var(--brand-cool,hsl(var(--primary)));
+  }
+  .text-\[var\(--brand-emerald\)\] {
+    color: var(--brand-emerald);
+  }
   .text-\[var\(--brand-emerald\,\#10B981\)\] {
     color: var(--brand-emerald,#10B981);
   }
@@ -1871,18 +2603,36 @@
   .text-\[var\(--btn-primary-text\)\] {
     color: var(--btn-primary-text);
   }
+  .text-\[var\(--chat-label-size\,11px\)\] {
+    color: var(--chat-label-size,11px);
+  }
+  .text-\[var\(--chat-send-color\,white\)\] {
+    color: var(--chat-send-color,white);
+  }
   .text-\[var\(--code-error\)\] {
     color: var(--code-error);
   }
   .text-\[var\(--code-function\)\] {
     color: var(--code-function);
   }
+  .text-\[var\(--code-keyword\)\] {
+    color: var(--code-keyword);
+  }
   .text-\[var\(--code-number\)\] {
     color: var(--code-number);
   }
+  .text-\[var\(--code-string\)\] {
+    color: var(--code-string);
+  }
   .text-\[var\(--code-success\)\] {
     color: var(--code-success);
   }
+  .text-\[var\(--font-size-base\)\] {
+    color: var(--font-size-base);
+  }
+  .text-\[var\(--font-size-xs\)\] {
+    color: var(--font-size-xs);
+  }
   .text-\[var\(--md3-on-primary\)\] {
     color: var(--md3-on-primary);
   }
@@ -1919,18 +2669,45 @@
   .text-\[var\(--surface-warning-text\)\] {
     color: var(--surface-warning-text);
   }
+  .text-\[var\(--text-dim\)\] {
+    color: var(--text-dim);
+  }
+  .text-\[var\(--text-muted\)\] {
+    color: var(--text-muted);
+  }
+  .text-\[var\(--text-muted\,hsl\(var\(--muted-foreground\)\)\)\] {
+    color: var(--text-muted,hsl(var(--muted-foreground)));
+  }
+  .text-\[var\(--text-primary\)\] {
+    color: var(--text-primary);
+  }
+  .text-\[var\(--text-primary\,hsl\(var\(--foreground\)\)\)\] {
+    color: var(--text-primary,hsl(var(--foreground)));
+  }
   .text-amber-600 {
     color: var(--color-amber-600);
   }
+  .text-blue-400 {
+    color: var(--color-blue-400);
+  }
+  .text-emerald-400 {
+    color: var(--color-emerald-400);
+  }
   .text-emerald-500 {
     color: var(--color-emerald-500);
   }
   .text-green-400 {
     color: var(--color-green-400);
   }
+  .text-neutral-400 {
+    color: var(--color-neutral-400);
+  }
   .text-orange-400 {
     color: var(--color-orange-400);
   }
+  .text-red-200 {
+    color: var(--color-red-200);
+  }
   .text-red-400 {
     color: var(--color-red-400);
   }
@@ -1940,12 +2717,24 @@
   .text-violet-300 {
     color: var(--color-violet-300);
   }
+  .text-violet-400 {
+    color: var(--color-violet-400);
+  }
   .text-white {
     color: var(--color-white);
   }
+  .text-white\/60 {
+    color: color-mix(in srgb, #fff 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-white) 60%, transparent);
+    }
+  }
   .text-yellow-400 {
     color: var(--color-yellow-400);
   }
+  .text-zinc-400 {
+    color: var(--color-zinc-400);
+  }
   .capitalize {
     text-transform: capitalize;
   }
@@ -1968,9 +2757,19 @@
   .underline-offset-2 {
     text-underline-offset: 2px;
   }
+  .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
+  .antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
   .opacity-0 {
     opacity: 0%;
   }
+  .opacity-25 {
+    opacity: 25%;
+  }
   .opacity-30 {
     opacity: 30%;
   }
@@ -1980,6 +2779,9 @@
   .opacity-60 {
     opacity: 60%;
   }
+  .opacity-70 {
+    opacity: 70%;
+  }
   .opacity-75 {
     opacity: 75%;
   }
@@ -1997,10 +2799,34 @@
     --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_1px_2px_rgba\(15\,23\,42\,0\.04\)\] {
+    --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(15,23,42,0.04));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_6px_16px_rgba\(15\,23\,42\,0\.08\)\] {
+    --tw-shadow: 0 6px 16px var(--tw-shadow-color, rgba(15,23,42,0.08));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_8px_20px_rgba\(15\,23\,42\,0\.12\)\] {
+    --tw-shadow: 0 8px 20px var(--tw-shadow-color, rgba(15,23,42,0.12));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[inset_2px_0_0_hsl\(var\(--primary\)\)\] {
     --tw-shadow: inset 2px 0 0 var(--tw-shadow-color, hsl(var(--primary)));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[var\(--chat-input-shadow\,0_1px_2px_rgba\(15\,23\,42\,0\.05\)\)\] {
+    --tw-shadow: var(--chat-input-shadow,0 1px 2px rgba(15,23,42,0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[var\(--chat-send-shadow\,0_6px_16px_rgba\(15\,23\,42\,0\.12\)\)\] {
+    --tw-shadow: var(--chat-send-shadow,0 6px 16px rgba(15,23,42,0.12));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[var\(--shadow-accent\)\] {
+    --tw-shadow: var(--shadow-accent);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[var\(--shadow-card\)\] {
     --tw-shadow: var(--shadow-card);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2025,6 +2851,10 @@
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2037,6 +2867,10 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-0 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring-1 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2045,6 +2879,13 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-4 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .ring-\[var\(--bg-root\)\] {
+    --tw-ring-color: var(--bg-root);
+  }
   .ring-offset-2 {
     --tw-ring-offset-width: 2px;
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -2053,6 +2894,10 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -2066,11 +2911,21 @@
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-blur-xl {
+    --tw-backdrop-blur: blur(var(--blur-xl));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[border-color\,box-shadow\] {
+    transition-property: border-color,box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[left\,width\] {
     transition-property: left,width;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2127,6 +2982,10 @@
     --tw-duration: 500ms;
     transition-duration: 500ms;
   }
+  .duration-\[var\(--transition-default\)\] {
+    --tw-duration: var(--transition-default);
+    transition-duration: var(--transition-default);
+  }
   .duration-\[var\(--transition-fast\)\] {
     --tw-duration: var(--transition-fast);
     transition-duration: var(--transition-fast);
@@ -2147,6 +3006,15 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .\[background\:var\(--chat-input-bg\,var\(--bg-card\)\)\] {
+    background: var(--chat-input-bg,var(--bg-card));
+  }
+  .\[background\:var\(--chat-send-bg\,var\(--brand-primary\)\)\] {
+    background: var(--chat-send-bg,var(--brand-primary));
+  }
+  .\[scrollbar-gutter\:stable\] {
+    scrollbar-gutter: stable;
+  }
   .ring-inset {
     --tw-ring-inset: inset;
   }
@@ -2176,6 +3044,39 @@
       outline-style: none;
     }
   }
+  .peer-disabled\:cursor-not-allowed {
+    &:is(:where(.peer):disabled ~ *) {
+      cursor: not-allowed;
+    }
+  }
+  .peer-disabled\:opacity-70 {
+    &:is(:where(.peer):disabled ~ *) {
+      opacity: 70%;
+    }
+  }
+  .file\:border-0 {
+    &::file-selector-button {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
+  .file\:bg-transparent {
+    &::file-selector-button {
+      background-color: transparent;
+    }
+  }
+  .file\:text-sm {
+    &::file-selector-button {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .file\:font-medium {
+    &::file-selector-button {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  }
   .placeholder\:font-normal {
     &::placeholder {
       --tw-font-weight: var(--font-weight-normal);
@@ -2298,6 +3199,22 @@
       border-width: 0px;
     }
   }
+  .focus-within\:border-\[var\(--border-accent-hover\)\] {
+    &:focus-within {
+      border-color: var(--border-accent-hover);
+    }
+  }
+  .focus-within\:border-\[var\(--chat-input-focus-border\,var\(--border-accent\)\)\] {
+    &:focus-within {
+      border-color: var(--chat-input-focus-border,var(--border-accent));
+    }
+  }
+  .focus-within\:shadow-\[var\(--chat-input-focus-shadow\,0_10px_30px_rgba\(15\,23\,42\,0\.08\)\)\] {
+    &:focus-within {
+      --tw-shadow: var(--chat-input-focus-shadow,0 10px 30px rgba(15,23,42,0.08));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .hover\:-translate-y-0\.5 {
     &:hover {
       @media (hover: hover) {
@@ -2306,6 +3223,35 @@
       }
     }
   }
+  .hover\:translate-y-\[-1px\] {
+    &:hover {
+      @media (hover: hover) {
+        --tw-translate-y: -1px;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .hover\:border-\[var\(--border-accent\)\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--border-accent);
+      }
+    }
+  }
+  .hover\:border-\[var\(--border-accent-hover\)\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--border-accent-hover);
+      }
+    }
+  }
+  .hover\:border-\[var\(--border-default\,hsl\(var\(--border\)\)\)\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--border-default,hsl(var(--border)));
+      }
+    }
+  }
   .hover\:border-emerald-500\/30 {
     &:hover {
       @media (hover: hover) {
@@ -2340,6 +3286,13 @@
       }
     }
   }
+  .hover\:bg-\[var\(--bg-hover\,hsl\(var\(--accent\)\)\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--bg-hover,hsl(var(--accent)));
+      }
+    }
+  }
   .hover\:bg-\[var\(--btn-primary-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2347,6 +3300,16 @@
       }
     }
   }
+  .hover\:bg-\[var\(--code-error\)\]\/24 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--code-error);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--code-error) 24%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-\[var\(--surface-danger-bg\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2368,6 +3331,16 @@
       }
     }
   }
+  .hover\:bg-blue-600\/30 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(54.6% 0.245 262.881) 30%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-blue-600) 30%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-emerald-500\/10 {
     &:hover {
       @media (hover: hover) {
@@ -2378,6 +3351,16 @@
       }
     }
   }
+  .hover\:bg-green-600\/30 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 30%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-green-600) 30%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-red-500\/10 {
     &:hover {
       @media (hover: hover) {
@@ -2388,6 +3371,40 @@
       }
     }
   }
+  .hover\:bg-red-600\/30 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(57.7% 0.245 27.325) 30%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-red-600) 30%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-red-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-red-700);
+      }
+    }
+  }
+  .hover\:bg-transparent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: transparent;
+      }
+    }
+  }
+  .hover\:bg-yellow-600\/30 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(68.1% 0.162 75.834) 30%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-yellow-600) 30%, transparent);
+        }
+      }
+    }
+  }
   .hover\:text-\[var\(--accent-text\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2416,6 +3433,13 @@
       }
     }
   }
+  .hover\:opacity-100 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .hover\:shadow-md {
     &:hover {
       @media (hover: hover) {
@@ -2448,11 +3472,33 @@
       }
     }
   }
+  .hover\:\[background\:var\(--chat-send-hover-bg\,var\(--brand-strong\)\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background: var(--chat-send-hover-bg,var(--brand-strong));
+      }
+    }
+  }
+  .focus\:border-\[var\(--border-accent-hover\)\] {
+    &:focus {
+      border-color: var(--border-accent-hover);
+    }
+  }
   .focus\:border-transparent {
     &:focus {
       border-color: transparent;
     }
   }
+  .focus\:text-\[var\(--surface-danger-text\)\] {
+    &:focus {
+      color: var(--surface-danger-text);
+    }
+  }
+  .focus\:text-red-400 {
+    &:focus {
+      color: var(--color-red-400);
+    }
+  }
   .focus\:underline {
     &:focus {
       text-decoration-line: underline;
@@ -2476,6 +3522,28 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus\:ring-\[var\(--border-accent\)\] {
+    &:focus {
+      --tw-ring-color: var(--border-accent);
+    }
+  }
+  .focus\:ring-\[var\(--surface-danger-border\)\] {
+    &:focus {
+      --tw-ring-color: var(--surface-danger-border);
+    }
+  }
+  .focus\:ring-offset-0 {
+    &:focus {
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
+  .focus\:ring-offset-2 {
+    &:focus {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -2504,6 +3572,25 @@
       --tw-ring-color: var(--border-accent);
     }
   }
+  .focus-visible\:ring-\[var\(--chat-send-ring\,var\(--border-accent\)\)\] {
+    &:focus-visible {
+      --tw-ring-color: var(--chat-send-ring,var(--border-accent));
+    }
+  }
+  .focus-visible\:ring-\[var\(--code-error\)\]\/50 {
+    &:focus-visible {
+      --tw-ring-color: var(--code-error);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--code-error) 50%, transparent);
+      }
+    }
+  }
+  .focus-visible\:ring-offset-2 {
+    &:focus-visible {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
   .focus-visible\:outline-none {
     &:focus-visible {
       --tw-outline-style: none;
@@ -2546,6 +3633,11 @@
       background-color: var(--border-accent);
     }
   }
+  .disabled\:pointer-events-none {
+    &:disabled {
+      pointer-events: none;
+    }
+  }
   .disabled\:cursor-not-allowed {
     &:disabled {
       cursor: not-allowed;
@@ -2561,6 +3653,52 @@
       opacity: 50%;
     }
   }
+  .data-\[disabled\]\:pointer-events-none {
+    &[data-disabled] {
+      pointer-events: none;
+    }
+  }
+  .data-\[disabled\]\:opacity-50 {
+    &[data-disabled] {
+      opacity: 50%;
+    }
+  }
+  .data-\[side\=bottom\]\:translate-y-1 {
+    &[data-side="bottom"] {
+      --tw-translate-y: calc(var(--spacing) * 1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .data-\[side\=left\]\:-translate-x-1 {
+    &[data-side="left"] {
+      --tw-translate-x: calc(var(--spacing) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .data-\[side\=right\]\:translate-x-1 {
+    &[data-side="right"] {
+      --tw-translate-x: calc(var(--spacing) * 1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .data-\[side\=top\]\:-translate-y-1 {
+    &[data-side="top"] {
+      --tw-translate-y: calc(var(--spacing) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .data-\[state\=active\]\:shadow-sm {
+    &[data-state="active"] {
+      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .data-\[state\=checked\]\:translate-x-4 {
+    &[data-state="checked"] {
+      --tw-translate-x: calc(var(--spacing) * 4);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .data-\[state\=checked\]\:bg-\[var\(--accent-surface-soft\)\] {
     &[data-state="checked"] {
       background-color: var(--accent-surface-soft);
@@ -2581,6 +3719,12 @@
       rotate: 180deg;
     }
   }
+  .data-\[state\=unchecked\]\:translate-x-0 {
+    &[data-state="unchecked"] {
+      --tw-translate-x: calc(var(--spacing) * 0);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .sm\:mx-4 {
     @media (width >= 40rem) {
       margin-inline: calc(var(--spacing) * 4);
@@ -2611,6 +3755,11 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .sm\:flex-row {
+    @media (width >= 40rem) {
+      flex-direction: row;
+    }
+  }
   .sm\:flex-nowrap {
     @media (width >= 40rem) {
       flex-wrap: nowrap;
@@ -2621,6 +3770,25 @@
       justify-content: space-between;
     }
   }
+  .sm\:justify-end {
+    @media (width >= 40rem) {
+      justify-content: flex-end;
+    }
+  }
+  .sm\:space-x-2 {
+    @media (width >= 40rem) {
+      :where(& > :not(:last-child)) {
+        --tw-space-x-reverse: 0;
+        margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
+        margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
+      }
+    }
+  }
+  .sm\:text-left {
+    @media (width >= 40rem) {
+      text-align: left;
+    }
+  }
   .sm\:text-5xl {
     @media (width >= 40rem) {
       font-size: var(--text-5xl);
@@ -2658,6 +3826,11 @@
       margin-top: calc(var(--spacing) * 0);
     }
   }
+  .md\:block {
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
   .md\:flex {
     @media (width >= 48rem) {
       display: flex;
@@ -2758,6 +3931,27 @@
       grid-column: span 8 / span 8;
     }
   }
+  .xl\:grid-cols-4 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  .dark\:text-neutral-500 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-500);
+    }
+  }
+  .\[\&_svg\]\:pointer-events-none {
+    & svg {
+      pointer-events: none;
+    }
+  }
+  .\[\&_svg\]\:size-4 {
+    & svg {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+  }
   .\[\&_svg\]\:h-\[18px\] {
     & svg {
       height: 18px;
@@ -2768,6 +3962,23 @@
       width: 18px;
     }
   }
+  .\[\&_svg\]\:shrink-0 {
+    & svg {
+      flex-shrink: 0;
+    }
+  }
+  .\[\&_tr\]\:border-b {
+    & tr {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
+  .\[\&_tr\:last-child\]\:border-0 {
+    & tr:last-child {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
   .\[\&\:\:-moz-range-track\]\:h-2 {
     &::-moz-range-track {
       height: calc(var(--spacing) * 2);
@@ -2844,6 +4055,27 @@
       }
     }
   }
+  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
+    &:has([role=checkbox]) {
+      padding-right: calc(var(--spacing) * 0);
+    }
+  }
+  .\[\&\>span\]\:line-clamp-1 {
+    &>span {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+    }
+  }
+  .\[\&\>tr\]\:last\:border-b-0 {
+    &>tr {
+      &:last-child {
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 0px;
+      }
+    }
+  }
 }
 :root,
 [data-sandbox-ui] {
@@ -3550,6 +4782,11 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-divide-y-reverse {
   syntax: "*";
   inherits: false;
@@ -3837,6 +5074,16 @@
     opacity: 0.5;
   }
 }
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -3849,6 +5096,7 @@
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
+      --tw-space-x-reverse: 0;
       --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;