@wrongstack/webui 0.54.1 → 0.66.13

package/dist/index.css

@@ -127,13 +127,10 @@ html,
   -o-tab-size: 4;
   tab-size: 4;
   font-family:
+    IBM Plex Sans Variable,
     ui-sans-serif,
     system-ui,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+    sans-serif;
   font-feature-settings: normal;
   font-variation-settings: normal;
   -webkit-tap-highlight-color: transparent;
@@ -173,13 +170,10 @@ kbd,
 samp,
 pre {
   font-family:
+    IBM Plex Mono,
     ui-monospace,
-    SFMono-Regular,
+    SF Mono,
     Menlo,
-    Monaco,
-    Consolas,
-    "Liberation Mono",
-    "Courier New",
     monospace;
   font-feature-settings: normal;
   font-variation-settings: normal;
@@ -333,54 +327,131 @@ video {
   display: none;
 }
 :root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 84% 4.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
-  --primary: 221.2 92.2% 55.4%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 221.2 92.2% 55.4%;
-  --radius: 0.5rem;
+  --background: 40 33% 97%;
+  --foreground: 222 24% 13%;
+  --card: 40 33% 99%;
+  --card-foreground: 222 24% 13%;
+  --popover: 40 33% 99%;
+  --popover-foreground: 222 24% 13%;
+  --primary: 28 92% 46%;
+  --primary-foreground: 40 40% 99%;
+  --secondary: 40 22% 92%;
+  --secondary-foreground: 222 24% 16%;
+  --muted: 40 20% 92%;
+  --muted-foreground: 222 10% 42%;
+  --accent: 40 24% 90%;
+  --accent-foreground: 28 92% 38%;
+  --destructive: 0 72% 48%;
+  --destructive-foreground: 40 40% 99%;
+  --border: 40 16% 85%;
+  --input: 40 16% 87%;
+  --ring: 28 92% 46%;
+  --success: 150 58% 36%;
+  --warning: 32 92% 44%;
+  --info: 200 80% 40%;
+  --running: 28 92% 46%;
+  --radius: 0.625rem;
+  --font-sans:
+    "IBM Plex Sans Variable",
+    ui-sans-serif,
+    system-ui,
+    sans-serif;
+  --font-mono:
+    "IBM Plex Mono",
+    ui-monospace,
+    "SF Mono",
+    Menlo,
+    monospace;
+  --grid-line: 222 24% 13%;
+  --grid-opacity: 0.05;
+  --shadow-color: 222 30% 30%;
 }
 .dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-  --card: 222.2 84% 4.9%;
-  --card-foreground: 210 40% 98%;
-  --popover: 222.2 84% 4.9%;
-  --popover-foreground: 210 40% 98%;
-  --primary: 217.2 91.2% 60%;
-  --primary-foreground: 222.2 47.4% 11.2%;
-  --secondary: 217.2 32.6% 17.5%;
-  --secondary-foreground: 210 40% 98%;
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
-  --destructive: 0 62.8% 50.6%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 217.2 32.6% 25%;
-  --input: 217.2 32.6% 25%;
-  --ring: 224.3 76.3% 48%;
+  --background: 225 17% 8%;
+  --foreground: 40 22% 92%;
+  --card: 225 15% 11%;
+  --card-foreground: 40 22% 92%;
+  --popover: 225 16% 10%;
+  --popover-foreground: 40 22% 92%;
+  --primary: 36 96% 56%;
+  --primary-foreground: 28 60% 8%;
+  --secondary: 225 12% 16%;
+  --secondary-foreground: 40 22% 92%;
+  --muted: 225 12% 15%;
+  --muted-foreground: 225 9% 60%;
+  --accent: 225 13% 17%;
+  --accent-foreground: 36 96% 62%;
+  --destructive: 0 70% 55%;
+  --destructive-foreground: 40 40% 96%;
+  --border: 225 12% 18%;
+  --input: 225 12% 17%;
+  --ring: 36 96% 56%;
+  --success: 150 64% 46%;
+  --warning: 36 96% 56%;
+  --info: 198 82% 56%;
+  --running: 36 96% 56%;
+  --grid-line: 40 22% 92%;
+  --grid-opacity: 0.045;
+  --shadow-color: 225 60% 2%;
 }
 * {
   border-color: hsl(var(--border));
 }
+html {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
 body {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
+  font-family: var(--font-sans);
+  font-feature-settings:
+    "liga" 1,
+    "calt" 1,
+    "ss03" 1;
+}
+#root {
+  position: relative;
+  z-index: 1;
+  isolation: isolate;
+  height: 100%;
+}
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(hsl(var(--grid-line) / var(--grid-opacity)) 1px, transparent 1px),
+    linear-gradient(
+      90deg,
+      hsl(var(--grid-line) / var(--grid-opacity)) 1px,
+      transparent 1px);
+  background-size: 34px 34px;
+  mask-image:
+    radial-gradient(
+      140% 90% at 50% -10%,
+      #000 30%,
+      transparent 82%);
+  -webkit-mask-image:
+    radial-gradient(
+      140% 90% at 50% -10%,
+      #000 30%,
+      transparent 82%);
+}
+::-moz-selection {
+  background-color: hsl(var(--primary) / 0.28);
+  color: hsl(var(--foreground));
+}
+::selection {
+  background-color: hsl(var(--primary) / 0.28);
+  color: hsl(var(--foreground));
+}
+.tabular {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
 }
 .container {
   width: 100%;
@@ -410,6 +481,17 @@ body {
     max-width: 1536px;
   }
 }
+.led {
+  display: inline-block;
+  border-radius: 9999px;
+  width: 0.5rem;
+  height: 0.5rem;
+  background: currentColor;
+  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 8px 0 currentColor;
+}
+.led-pulse {
+  animation: ledPulse 1.4s ease-in-out infinite;
+}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -746,6 +828,9 @@ body {
 .max-h-48 {
   max-height: 12rem;
 }
+.max-h-56 {
+  max-height: 14rem;
+}
 .max-h-60 {
   max-height: 15rem;
 }
@@ -854,6 +939,9 @@ body {
 .min-w-0 {
   min-width: 0px;
 }
+.min-w-\[15rem\] {
+  min-width: 15rem;
+}
 .min-w-\[280px\] {
   min-width: 280px;
 }
@@ -878,6 +966,9 @@ body {
 .max-w-\[16rem\] {
   max-width: 16rem;
 }
+.max-w-\[18rem\] {
+  max-width: 18rem;
+}
 .max-w-\[60\%\] {
   max-width: 60%;
 }
@@ -1025,6 +1116,9 @@ body {
 .flex-wrap {
   flex-wrap: wrap;
 }
+.place-items-center {
+  place-items: center;
+}
 .items-start {
   align-items: flex-start;
 }
@@ -1061,6 +1155,9 @@ body {
 .gap-2 {
   gap: 0.5rem;
 }
+.gap-2\.5 {
+  gap: 0.625rem;
+}
 .gap-3 {
   gap: 0.75rem;
 }
@@ -1070,6 +1167,11 @@ body {
 .gap-8 {
   gap: 2rem;
 }
+.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
+}
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1085,6 +1187,11 @@ body {
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
+}
 .space-y-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1192,9 +1299,8 @@ body {
 .border-\[--color-border-dark\] {
   border-color: var(--color-border-dark);
 }
-.border-amber-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
+.border-\[hsl\(var\(--success\)\/0\.35\)\] {
+  border-color: hsl(var(--success)/0.35);
 }
 .border-amber-300 {
   --tw-border-opacity: 1;
@@ -1236,10 +1342,6 @@ body {
 .border-destructive\/50 {
   border-color: hsl(var(--destructive) / 0.5);
 }
-.border-emerald-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
-}
 .border-emerald-500\/20 {
   border-color: rgb(16 185 129 / 0.2);
 }
@@ -1267,13 +1369,12 @@ body {
 .border-primary-foreground\/30 {
   border-color: hsl(var(--primary-foreground) / 0.3);
 }
+.border-primary\/30 {
+  border-color: hsl(var(--primary) / 0.3);
+}
 .border-primary\/40 {
   border-color: hsl(var(--primary) / 0.4);
 }
-.border-red-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
-}
 .border-red-500\/30 {
   border-color: rgb(239 68 68 / 0.3);
 }
@@ -1310,6 +1411,21 @@ body {
 .bg-\[--color-surface-dark\] {
   background-color: var(--color-surface-dark);
 }
+.bg-\[hsl\(var\(--info\)\/0\.15\)\] {
+  background-color: hsl(var(--info)/0.15);
+}
+.bg-\[hsl\(var\(--success\)\)\] {
+  background-color: hsl(var(--success));
+}
+.bg-\[hsl\(var\(--success\)\/0\.06\)\] {
+  background-color: hsl(var(--success)/0.06);
+}
+.bg-\[hsl\(var\(--success\)\/0\.15\)\] {
+  background-color: hsl(var(--success)/0.15);
+}
+.bg-\[hsl\(var\(--warning\)\)\] {
+  background-color: hsl(var(--warning));
+}
 .bg-accent {
   background-color: hsl(var(--accent));
 }
@@ -1319,10 +1435,6 @@ body {
 .bg-accent\/40 {
   background-color: hsl(var(--accent) / 0.4);
 }
-.bg-amber-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
-}
 .bg-amber-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
@@ -1331,9 +1443,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
 }
-.bg-amber-50\/30 {
-  background-color: rgb(255 251 235 / 0.3);
-}
 .bg-amber-50\/50 {
   background-color: rgb(255 251 235 / 0.5);
 }
@@ -1374,10 +1483,6 @@ body {
 .bg-black\/80 {
   background-color: rgb(0 0 0 / 0.8);
 }
-.bg-blue-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
-}
 .bg-blue-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
@@ -1408,6 +1513,9 @@ body {
 .bg-card\/50 {
   background-color: hsl(var(--card) / 0.5);
 }
+.bg-card\/70 {
+  background-color: hsl(var(--card) / 0.7);
+}
 .bg-card\/90 {
   background-color: hsl(var(--card) / 0.9);
 }
@@ -1424,6 +1532,9 @@ body {
 .bg-destructive\/10 {
   background-color: hsl(var(--destructive) / 0.1);
 }
+.bg-destructive\/15 {
+  background-color: hsl(var(--destructive) / 0.15);
+}
 .bg-destructive\/5 {
   background-color: hsl(var(--destructive) / 0.05);
 }
@@ -1439,9 +1550,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
 }
-.bg-emerald-50\/30 {
-  background-color: rgb(236 253 245 / 0.3);
-}
 .bg-emerald-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
@@ -1480,10 +1588,6 @@ body {
 .bg-muted\/80 {
   background-color: hsl(var(--muted) / 0.8);
 }
-.bg-orange-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
-}
 .bg-orange-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
@@ -1495,6 +1599,9 @@ body {
 .bg-orange-500\/10 {
   background-color: rgb(249 115 22 / 0.1);
 }
+.bg-orange-500\/15 {
+  background-color: rgb(249 115 22 / 0.15);
+}
 .bg-popover {
   background-color: hsl(var(--popover));
 }
@@ -1507,27 +1614,22 @@ body {
 .bg-primary\/10 {
   background-color: hsl(var(--primary) / 0.1);
 }
+.bg-primary\/15 {
+  background-color: hsl(var(--primary) / 0.15);
+}
 .bg-primary\/5 {
   background-color: hsl(var(--primary) / 0.05);
 }
 .bg-primary\/70 {
   background-color: hsl(var(--primary) / 0.7);
 }
-.bg-purple-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
-}
-.bg-red-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+.bg-primary\/\[0\.04\] {
+  background-color: hsl(var(--primary) / 0.04);
 }
 .bg-red-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
 }
-.bg-red-50\/30 {
-  background-color: rgb(254 242 242 / 0.3);
-}
 .bg-red-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
@@ -1551,9 +1653,8 @@ body {
 .bg-secondary {
   background-color: hsl(var(--secondary));
 }
-.bg-sky-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
+.bg-sky-500\/15 {
+  background-color: rgb(14 165 233 / 0.15);
 }
 .bg-slate-100 {
   --tw-bg-opacity: 1;
@@ -1569,6 +1670,9 @@ body {
 .bg-violet-500\/10 {
   background-color: rgb(139 92 246 / 0.1);
 }
+.bg-violet-500\/15 {
+  background-color: rgb(139 92 246 / 0.15);
+}
 .bg-violet-500\/\[0\.04\] {
   background-color: rgb(139 92 246 / 0.04);
 }
@@ -1773,6 +1877,9 @@ body {
 .pr-7 {
   padding-right: 1.75rem;
 }
+.pt-0\.5 {
+  padding-top: 0.125rem;
+}
 .pt-1 {
   padding-top: 0.25rem;
 }
@@ -1796,24 +1903,18 @@ body {
 }
 .font-mono {
   font-family:
+    IBM Plex Mono,
     ui-monospace,
-    SFMono-Regular,
+    SF Mono,
     Menlo,
-    Monaco,
-    Consolas,
-    "Liberation Mono",
-    "Courier New",
     monospace;
 }
 .font-sans {
   font-family:
+    IBM Plex Sans Variable,
     ui-sans-serif,
     system-ui,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+    sans-serif;
 }
 .text-2xl {
   font-size: 1.5rem;
@@ -1828,6 +1929,9 @@ body {
 .text-\[11px\] {
   font-size: 11px;
 }
+.text-\[9px\] {
+  font-size: 9px;
+}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1899,6 +2003,15 @@ body {
 .text-\[--color-text-dark-secondary\] {
   color: var(--color-text-dark-secondary);
 }
+.text-\[hsl\(var\(--info\)\)\] {
+  color: hsl(var(--info));
+}
+.text-\[hsl\(var\(--success\)\)\] {
+  color: hsl(var(--success));
+}
+.text-\[hsl\(var\(--warning\)\)\] {
+  color: hsl(var(--warning));
+}
 .text-accent-foreground {
   color: hsl(var(--accent-foreground));
 }
@@ -1925,9 +2038,8 @@ body {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity, 1));
 }
-.text-blue-700 {
-  --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
+.text-border {
+  color: hsl(var(--border));
 }
 .text-destructive {
   color: hsl(var(--destructive));
@@ -2014,10 +2126,6 @@ body {
 .text-primary-foreground\/60 {
   color: hsl(var(--primary-foreground) / 0.6);
 }
-.text-purple-700 {
-  --tw-text-opacity: 1;
-  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
-}
 .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
@@ -2048,9 +2156,9 @@ body {
 .text-secondary-foreground {
   color: hsl(var(--secondary-foreground));
 }
-.text-sky-700 {
+.text-sky-600 {
   --tw-text-opacity: 1;
-  color: rgb(3 105 161 / var(--tw-text-opacity, 1));
+  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
 }
 .text-slate-400 {
   --tw-text-opacity: 1;
@@ -2109,6 +2217,9 @@ body {
 .opacity-80 {
   opacity: 0.8;
 }
+.opacity-90 {
+  opacity: 0.9;
+}
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2125,6 +2236,22 @@ body {
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.shadow-\[0_0_0_1px_hsl\(var\(--primary\)\/0\.4\)\,0_2px_8px_-2px_hsl\(var\(--primary\)\/0\.5\)\] {
+  --tw-shadow: 0 0 0 1px hsl(var(--primary)/0.4),0 2px 8px -2px hsl(var(--primary)/0.5);
+  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 2px 8px -2px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.shadow-\[inset_0_0_0_1px_hsl\(var\(--primary\)\/0\.35\)\] {
+  --tw-shadow: inset 0 0 0 1px hsl(var(--primary)/0.35);
+  --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -2141,6 +2268,14 @@ body {
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .shadow-xl {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -2184,6 +2319,9 @@ body {
     var(--tw-ring-shadow),
     var(--tw-shadow, 0 0 #0000);
 }
+.ring-inset {
+  --tw-ring-inset: inset;
+}
 .ring-accent\/20 {
   --tw-ring-color: hsl(var(--accent) / 0.2);
 }
@@ -2260,6 +2398,9 @@ body {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.duration-150 {
+  transition-duration: 150ms;
+}
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -2278,19 +2419,31 @@ body {
 .\[animation-delay\:-0\.3s\] {
   animation-delay: -0.3s;
 }
+@keyframes ledPulse {
+  0%, 100% {
+    opacity: 1;
+    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 7px 0 currentColor;
+  }
+  50% {
+    opacity: 0.55;
+    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 13px 1px currentColor;
+  }
+}
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 9px;
+  height: 9px;
 }
 ::-webkit-scrollbar-track {
   background-color: transparent;
 }
 ::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--muted-foreground) / 0.28);
   border-radius: 9999px;
-  background-color: hsl(var(--border));
+  border: 2px solid transparent;
+  background-clip: padding-box;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background-color: hsl(var(--muted-foreground) / 0.5);
+  background-color: hsl(var(--primary) / 0.6);
 }
 @keyframes fadeIn {
   from {
@@ -2312,11 +2465,33 @@ body {
     transform: translateX(0);
   }
 }
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
 .animate-message {
-  animation: fadeIn 0.3s ease-out;
+  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .animate-tool {
-  animation: slideIn 0.25s ease-out;
+  animation: slideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.bar-sweep {
+  position: relative;
+  overflow: hidden;
+}
+.bar-sweep::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background:
+    linear-gradient(
+      90deg,
+      transparent,
+      hsl(var(--primary) / 0.7),
+      transparent);
+  animation: shimmer 1.5s infinite;
 }
 .markdown-content {
   line-height: 1.625;
@@ -2325,68 +2500,75 @@ body {
   margin-bottom: 0.75rem;
 }
 .markdown-content code {
+  font-family: var(--font-mono);
   border-radius: 0.25rem;
   background-color: hsl(var(--muted));
   padding-left: 0.375rem;
   padding-right: 0.375rem;
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    Monaco,
-    Consolas,
-    "Liberation Mono",
-    "Courier New",
-    monospace;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 0.85em;
+  border: 1px solid hsl(var(--border));
 }
 .markdown-content pre {
+  font-family: var(--font-mono);
   margin-bottom: 0.75rem;
   overflow-x: auto;
   border-radius: var(--radius);
   background-color: hsl(var(--muted));
   padding: 1rem;
+  border: 1px solid hsl(var(--border));
 }
 .markdown-content pre code {
   background-color: transparent;
   padding: 0px;
+  border: 0;
 }
 .markdown-content ul,
 .markdown-content ol {
   margin-bottom: 0.75rem;
   padding-left: 1.5rem;
 }
+.markdown-content ul {
+  list-style: disc;
+}
+.markdown-content ol {
+  list-style: decimal;
+}
 .markdown-content li {
   margin-bottom: 0.25rem;
 }
+.markdown-content a {
+  color: hsl(var(--primary));
+  text-decoration-line: underline;
+  text-underline-offset: 2px;
+}
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3 {
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
 .markdown-content blockquote {
-  border-left-width: 4px;
+  border-left-width: 2px;
   border-color: hsl(var(--primary));
   padding-left: 1rem;
   font-style: italic;
   color: hsl(var(--muted-foreground));
 }
 ::highlight(chat-search) {
-  background-color: rgb(250 204 21 / 0.35);
+  background-color: hsl(var(--primary) / 0.3);
   color: inherit;
 }
 ::highlight(chat-search-active) {
-  background-color: rgb(250 204 21 / 0.85);
-  color: rgb(24 24 27);
-}
-.dark ::highlight(chat-search) {
-  background-color: rgb(234 179 8 / 0.4);
-}
-.dark ::highlight(chat-search-active) {
-  background-color: rgb(250 204 21 / 0.95);
-  color: rgb(24 24 27);
+  background-color: hsl(var(--primary) / 0.85);
+  color: hsl(var(--primary-foreground));
 }
 [data-message-id][data-focused=true] {
   position: relative;
-  background-color: rgb(59 130 246 / 0.04);
+  background-color: hsl(var(--primary) / 0.05);
   border-radius: 0.5rem;
   transition: background-color 0.15s ease-out;
 }
@@ -2399,13 +2581,8 @@ body {
   width: 3px;
   border-radius: 2px;
   background-color: hsl(var(--primary));
+  box-shadow: 0 0 10px 0 hsl(var(--primary) / 0.6);
   pointer-events: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.dark [data-message-id][data-focused=true] {
-  background-color: rgb(96 165 250 / 0.06);
 }
 .file\:border-0::file-selector-button {
   border-width: 0px;
@@ -2447,6 +2624,9 @@ body {
 .hover\:border-primary\/40:hover {
   border-color: hsl(var(--primary) / 0.4);
 }
+.hover\:bg-\[hsl\(var\(--success\)\/0\.25\)\]:hover {
+  background-color: hsl(var(--success)/0.25);
+}
 .hover\:bg-accent:hover {
   background-color: hsl(var(--accent));
 }
@@ -2459,10 +2639,6 @@ body {
 .hover\:bg-accent\/50:hover {
   background-color: hsl(var(--accent) / 0.5);
 }
-.hover\:bg-amber-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
-}
 .hover\:bg-amber-500\/20:hover {
   background-color: rgb(245 158 11 / 0.2);
 }
@@ -2475,13 +2651,12 @@ body {
 .hover\:bg-background\/60:hover {
   background-color: hsl(var(--background) / 0.6);
 }
+.hover\:bg-destructive\/25:hover {
+  background-color: hsl(var(--destructive) / 0.25);
+}
 .hover\:bg-destructive\/90:hover {
   background-color: hsl(var(--destructive) / 0.9);
 }
-.hover\:bg-emerald-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
-}
 .hover\:bg-emerald-500\/15:hover {
   background-color: rgb(16 185 129 / 0.15);
 }
@@ -2509,13 +2684,12 @@ body {
 .hover\:bg-primary-foreground\/10:hover {
   background-color: hsl(var(--primary-foreground) / 0.1);
 }
+.hover\:bg-primary\/25:hover {
+  background-color: hsl(var(--primary) / 0.25);
+}
 .hover\:bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
 }
-.hover\:bg-red-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
-}
 .hover\:bg-red-500\/20:hover {
   background-color: rgb(239 68 68 / 0.2);
 }
@@ -2695,24 +2869,13 @@ body {
     background-color: hsl(var(--card) / 0.5);
   }
 }
-.dark\:bg-amber-900:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(120 53 15 / var(--tw-bg-opacity, 1));
-}
 .dark\:bg-amber-950:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(69 26 3 / var(--tw-bg-opacity, 1));
 }
-.dark\:bg-amber-950\/20:is(.dark *) {
-  background-color: rgb(69 26 3 / 0.2);
-}
 .dark\:bg-amber-950\/30:is(.dark *) {
   background-color: rgb(69 26 3 / 0.3);
 }
-.dark\:bg-blue-900:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
-}
 .dark\:bg-blue-950:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(23 37 84 / var(--tw-bg-opacity, 1));
@@ -2725,36 +2888,14 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(2 44 34 / var(--tw-bg-opacity, 1));
 }
-.dark\:bg-emerald-950\/20:is(.dark *) {
-  background-color: rgb(2 44 34 / 0.2);
-}
-.dark\:bg-orange-900:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(124 45 18 / var(--tw-bg-opacity, 1));
-}
 .dark\:bg-orange-950:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(67 20 7 / var(--tw-bg-opacity, 1));
 }
-.dark\:bg-purple-900:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(88 28 135 / var(--tw-bg-opacity, 1));
-}
-.dark\:bg-red-900:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
-}
 .dark\:bg-red-950:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1));
 }
-.dark\:bg-red-950\/20:is(.dark *) {
-  background-color: rgb(69 10 10 / 0.2);
-}
-.dark\:bg-sky-900:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(12 74 110 / var(--tw-bg-opacity, 1));
-}
 .dark\:bg-slate-800:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
@@ -2770,10 +2911,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(251 191 36 / var(--tw-text-opacity, 1));
 }
-.dark\:text-blue-300:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
-}
 .dark\:text-blue-400:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(96 165 250 / var(--tw-text-opacity, 1));
@@ -2798,10 +2935,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(251 146 60 / var(--tw-text-opacity, 1));
 }
-.dark\:text-purple-300:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
-}
 .dark\:text-red-300:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(252 165 165 / var(--tw-text-opacity, 1));
@@ -2818,9 +2951,9 @@ body {
   --tw-text-opacity: 1;
   color: rgb(251 113 133 / var(--tw-text-opacity, 1));
 }
-.dark\:text-sky-300:is(.dark *) {
+.dark\:text-sky-400:is(.dark *) {
   --tw-text-opacity: 1;
-  color: rgb(125 211 252 / var(--tw-text-opacity, 1));
+  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
 }
 .dark\:text-slate-400:is(.dark *) {
   --tw-text-opacity: 1;