agentic-ui-libs 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/assets/style.css

@@ -566,6 +566,9 @@ video {
 .pointer-events-none {
   pointer-events: none;
 }
+.pointer-events-auto {
+  pointer-events: auto;
+}
 .visible {
   visibility: visible;
 }
@@ -599,6 +602,9 @@ video {
 .left-0 {
   left: 0px;
 }
+.left-1 {
+  left: 0.25rem;
+}
 .left-1\/2 {
   left: 50%;
 }
@@ -617,6 +623,9 @@ video {
 .right-0 {
   right: 0px;
 }
+.right-2 {
+  right: 0.5rem;
+}
 .right-full {
   right: 100%;
 }
@@ -626,6 +635,9 @@ video {
 .top-1\/2 {
   top: 50%;
 }
+.top-2 {
+  top: 0.5rem;
+}
 .top-\[-40px\] {
   top: -40px;
 }
@@ -662,13 +674,45 @@ video {
 .z-\[99999\] {
   z-index: 99999;
 }
+.z-\[9999\] {
+  z-index: 9999;
+}
 .col-span-2 {
   grid-column: span 2 / span 2;
 }
+.m-0 {
+  margin: 0px;
+}
+.m-3 {
+  margin: 0.75rem;
+}
+.mx-0\.5 {
+  margin-left: 0.125rem;
+  margin-right: 0.125rem;
+}
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.-ml-1 {
+  margin-left: -0.25rem;
+}
 .-mt-1 {
   margin-top: -0.25rem;
 }
@@ -678,6 +722,9 @@ video {
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.mb-2\.5 {
+  margin-bottom: 0.625rem;
+}
 .mb-3 {
   margin-bottom: 0.75rem;
 }
@@ -699,6 +746,12 @@ video {
 .mb-\[8px\] {
   margin-bottom: 8px;
 }
+.ml-0 {
+  margin-left: 0px;
+}
+.ml-0\.5 {
+  margin-left: 0.125rem;
+}
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -708,12 +761,18 @@ video {
 .ml-2 {
   margin-left: 0.5rem;
 }
+.ml-3 {
+  margin-left: 0.75rem;
+}
 .ml-4 {
   margin-left: 1rem;
 }
 .ml-\[56px\] {
   margin-left: 56px;
 }
+.ml-auto {
+  margin-left: auto;
+}
 .mr-1 {
   margin-right: 0.25rem;
 }
@@ -738,6 +797,9 @@ video {
 .mt-2 {
   margin-top: 0.5rem;
 }
+.mt-2\.5 {
+  margin-top: 0.625rem;
+}
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -756,6 +818,21 @@ video {
 .box-border {
   box-sizing: border-box;
 }
+.line-clamp-3 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+.line-clamp-4 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+.\!block {
+  display: block !important;
+}
 .block {
   display: block;
 }
@@ -823,18 +900,27 @@ video {
 .h-0\.5 {
   height: 0.125rem;
 }
+.h-1 {
+  height: 0.25rem;
+}
 .h-10 {
   height: 2.5rem;
 }
 .h-12 {
   height: 3rem;
 }
+.h-16 {
+  height: 4rem;
+}
 .h-2 {
   height: 0.5rem;
 }
 .h-3 {
   height: 0.75rem;
 }
+.h-3\.5 {
+  height: 0.875rem;
+}
 .h-32 {
   height: 8rem;
 }
@@ -850,6 +936,15 @@ video {
 .h-64 {
   height: 16rem;
 }
+.h-7 {
+  height: 1.75rem;
+}
+.h-8 {
+  height: 2rem;
+}
+.h-9 {
+  height: 2.25rem;
+}
 .h-\[12px\] {
   height: 12px;
 }
@@ -859,9 +954,15 @@ video {
 .h-\[16px\] {
   height: 16px;
 }
+.h-\[18px\] {
+  height: 18px;
+}
 .h-\[1px\] {
   height: 1px;
 }
+.h-\[22px\] {
+  height: 22px;
+}
 .h-\[24px\] {
   height: 24px;
 }
@@ -874,6 +975,9 @@ video {
 .h-\[32px\] {
   height: 32px;
 }
+.h-\[34px\] {
+  height: 34px;
+}
 .h-\[40px\] {
   height: 40px;
 }
@@ -889,6 +993,9 @@ video {
 .h-\[4px\] {
   height: 4px;
 }
+.h-\[52px\] {
+  height: 52px;
+}
 .h-\[56px\] {
   height: 56px;
 }
@@ -904,6 +1011,9 @@ video {
 .h-\[calc\(100\%\+40px\)\] {
   height: calc(100% + 40px);
 }
+.h-\[calc\(100\%-24px\)\] {
+  height: calc(100% - 24px);
+}
 .h-\[calc\(100\%-64px\)\] {
   height: calc(100% - 64px);
 }
@@ -916,6 +1026,9 @@ video {
 .h-screen {
   height: 100vh;
 }
+.max-h-0 {
+  max-height: 0px;
+}
 .max-h-48 {
   max-height: 12rem;
 }
@@ -925,12 +1038,30 @@ video {
 .max-h-80 {
   max-height: 20rem;
 }
+.max-h-\[100px\] {
+  max-height: 100px;
+}
+.max-h-\[180px\] {
+  max-height: 180px;
+}
+.max-h-\[280px\] {
+  max-height: 280px;
+}
 .max-h-\[300px\] {
   max-height: 300px;
 }
 .max-h-\[320px\] {
   max-height: 320px;
 }
+.max-h-\[360px\] {
+  max-height: 360px;
+}
+.max-h-\[70vh\] {
+  max-height: 70vh;
+}
+.max-h-\[80vh\] {
+  max-height: 80vh;
+}
 .max-h-\[calc\(100\%-40px\)\] {
   max-height: calc(100% - 40px);
 }
@@ -940,6 +1071,12 @@ video {
 .min-h-0 {
   min-height: 0px;
 }
+.min-h-\[200px\] {
+  min-height: 200px;
+}
+.min-h-\[36px\] {
+  min-height: 36px;
+}
 .min-h-\[380px\] {
   min-height: 380px;
 }
@@ -973,6 +1110,9 @@ video {
 .w-3 {
   width: 0.75rem;
 }
+.w-3\.5 {
+  width: 0.875rem;
+}
 .w-32 {
   width: 8rem;
 }
@@ -991,6 +1131,18 @@ video {
 .w-64 {
   width: 16rem;
 }
+.w-7 {
+  width: 1.75rem;
+}
+.w-8 {
+  width: 2rem;
+}
+.w-9 {
+  width: 2.25rem;
+}
+.w-\[120px\] {
+  width: 120px;
+}
 .w-\[12px\] {
   width: 12px;
 }
@@ -1000,6 +1152,9 @@ video {
 .w-\[16px\] {
   width: 16px;
 }
+.w-\[18px\] {
+  width: 18px;
+}
 .w-\[1px\] {
   width: 1px;
 }
@@ -1009,6 +1164,9 @@ video {
 .w-\[210px\] {
   width: 210px;
 }
+.w-\[22px\] {
+  width: 22px;
+}
 .w-\[24px\] {
   width: 24px;
 }
@@ -1018,18 +1176,30 @@ video {
 .w-\[280px\] {
   width: 280px;
 }
+.w-\[300px\] {
+  width: 300px;
+}
 .w-\[320px\] {
   width: 320px;
 }
 .w-\[32px\] {
   width: 32px;
 }
+.w-\[34px\] {
+  width: 34px;
+}
+.w-\[40\%\] {
+  width: 40%;
+}
 .w-\[400px\] {
   width: 400px;
 }
 .w-\[48px\] {
   width: 48px;
 }
+.w-\[52px\] {
+  width: 52px;
+}
 .w-\[600px\] {
   width: 600px;
 }
@@ -1042,6 +1212,9 @@ video {
 .w-\[8px\] {
   width: 8px;
 }
+.w-\[90\%\] {
+  width: 90%;
+}
 .w-full {
   width: 100%;
 }
@@ -1049,12 +1222,27 @@ video {
   width: -moz-max-content;
   width: max-content;
 }
+.w-px {
+  width: 1px;
+}
 .w-screen {
   width: 100vw;
 }
 .min-w-0 {
   min-width: 0px;
 }
+.min-w-7 {
+  min-width: 1.75rem;
+}
+.min-w-\[150px\] {
+  min-width: 150px;
+}
+.min-w-\[16px\] {
+  min-width: 16px;
+}
+.min-w-\[180px\] {
+  min-width: 180px;
+}
 .min-w-\[200px\] {
   min-width: 200px;
 }
@@ -1064,9 +1252,15 @@ video {
 .min-w-\[240px\] {
   min-width: 240px;
 }
+.min-w-\[280px\] {
+  min-width: 280px;
+}
 .min-w-\[300px\] {
   min-width: 300px;
 }
+.min-w-\[340px\] {
+  min-width: 340px;
+}
 .min-w-fit {
   min-width: -moz-fit-content;
   min-width: fit-content;
@@ -1083,12 +1277,30 @@ video {
 .max-w-\[1400px\] {
   max-width: 1400px;
 }
+.max-w-\[150px\] {
+  max-width: 150px;
+}
+.max-w-\[200px\] {
+  max-width: 200px;
+}
 .max-w-\[352px\] {
   max-width: 352px;
 }
+.max-w-\[500px\] {
+  max-width: 500px;
+}
+.max-w-\[600px\] {
+  max-width: 600px;
+}
 .max-w-\[80\%\] {
   max-width: 80%;
 }
+.max-w-\[85\%\] {
+  max-width: 85%;
+}
+.max-w-full {
+  max-width: 100%;
+}
 .max-w-lg {
   max-width: 32rem;
 }
@@ -1138,6 +1350,11 @@ video {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-50 {
   --tw-scale-x: .5;
   --tw-scale-y: .5;
@@ -1146,6 +1363,27 @@ video {
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.animate-\[ai-backdrop-in_0\.2s_ease-out\] {
+  animation: ai-backdrop-in 0.2s ease-out;
+}
+.animate-\[ai-drawer-slide-up_0\.4s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)\] {
+  animation: ai-drawer-slide-up 0.4s cubic-bezier(0.4,0,0.2,1);
+}
+.animate-\[ai-loading-slide_1\.5s_ease-in-out_infinite\] {
+  animation: ai-loading-slide 1.5s ease-in-out infinite;
+}
+.animate-\[ai-message-in_0\.3s_ease-out\] {
+  animation: ai-message-in 0.3s ease-out;
+}
+.animate-\[ai-new-selection-in_0\.3s_ease-out\] {
+  animation: ai-new-selection-in 0.3s ease-out;
+}
+.animate-\[ai-panel-slide-in_0\.3s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)\] {
+  animation: ai-panel-slide-in 0.3s cubic-bezier(0.4,0,0.2,1);
+}
+.animate-\[ai-popup-scale-in_0\.3s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)\] {
+  animation: ai-popup-scale-in 0.3s cubic-bezier(0.4,0,0.2,1);
+}
 @keyframes pulse {
 
   50% {
@@ -1164,6 +1402,12 @@ video {
 .animate-spin {
   animation: spin 1s linear infinite;
 }
+.cursor-default {
+  cursor: default;
+}
+.cursor-grab {
+  cursor: grab;
+}
 .cursor-help {
   cursor: help;
 }
@@ -1199,6 +1443,9 @@ video {
 .flex-row {
   flex-direction: row;
 }
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
 .flex-col {
   flex-direction: column;
 }
@@ -1235,6 +1482,9 @@ video {
 .justify-between {
   justify-content: space-between;
 }
+.gap-0\.5 {
+  gap: 0.125rem;
+}
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1244,6 +1494,9 @@ video {
 .gap-2 {
   gap: 0.5rem;
 }
+.gap-2\.5 {
+  gap: 0.625rem;
+}
 .gap-3 {
   gap: 0.75rem;
 }
@@ -1271,6 +1524,11 @@ video {
 .gap-\[8px\] {
   gap: 8px;
 }
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-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)));
@@ -1320,6 +1578,12 @@ video {
 .overflow-x-hidden {
   overflow-x: hidden;
 }
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+.scroll-smooth {
+  scroll-behavior: smooth;
+}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1346,12 +1610,21 @@ video {
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-2xl {
+  border-radius: 1rem;
+}
 .rounded-\[10px\] {
   border-radius: 10px;
 }
 .rounded-\[12px\] {
   border-radius: 12px;
 }
+.rounded-\[14px\] {
+  border-radius: 14px;
+}
+.rounded-\[20px\] {
+  border-radius: 20px;
+}
 .rounded-\[4px\] {
   border-radius: 4px;
 }
@@ -1376,6 +1649,30 @@ video {
 .rounded-md {
   border-radius: calc(var(--radius) - 2px);
 }
+.rounded-sm {
+  border-radius: calc(var(--radius) - 4px);
+}
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+.rounded-b-xl {
+  border-bottom-right-radius: 0.75rem;
+  border-bottom-left-radius: 0.75rem;
+}
+.rounded-t-\[24px\] {
+  border-top-left-radius: 24px;
+  border-top-right-radius: 24px;
+}
+.rounded-t-xl {
+  border-top-left-radius: 0.75rem;
+  border-top-right-radius: 0.75rem;
+}
+.rounded-bl-md {
+  border-bottom-left-radius: calc(var(--radius) - 2px);
+}
+.rounded-br-md {
+  border-bottom-right-radius: calc(var(--radius) - 2px);
+}
 .border {
   border-width: 1px;
 }
@@ -1385,6 +1682,9 @@ video {
 .border-2 {
   border-width: 2px;
 }
+.border-\[1\.5px\] {
+  border-width: 1.5px;
+}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1397,6 +1697,9 @@ video {
 .border-l-2 {
   border-left-width: 2px;
 }
+.border-l-\[3px\] {
+  border-left-width: 3px;
+}
 .border-l-\[4px\] {
   border-left-width: 4px;
 }
@@ -1446,10 +1749,20 @@ video {
 .border-\[0px_0px_1px\] {
   border-color: 0px 0px 1px;
 }
+.border-black\/5 {
+  border-color: rgb(0 0 0 / 0.05);
+}
+.border-black\/\[0\.08\] {
+  border-color: rgb(0 0 0 / 0.08);
+}
 .border-blue-200 {
   --tw-border-opacity: 1;
   border-color: rgb(178 204 255 / var(--tw-border-opacity, 1));
 }
+.border-blue-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(132 173 255 / var(--tw-border-opacity, 1));
+}
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(41 112 255 / var(--tw-border-opacity, 1));
@@ -1471,6 +1784,9 @@ video {
 .border-gray-300 {
   border-color: var(--colors-border-border-primary, #D0D5DD);
 }
+.border-gray-600 {
+  border-color: var(--component-colors-utility-gray-utility-gray-600, #475467);
+}
 .border-gray-700 {
   border-color: var(--colors-foreground-fg-secondary-700, #344054);
 }
@@ -1490,9 +1806,21 @@ video {
   --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);
+}
 .border-transparent {
   border-color: transparent;
 }
+.border-white\/10 {
+  border-color: rgb(255 255 255 / 0.1);
+}
+.border-white\/5 {
+  border-color: rgb(255 255 255 / 0.05);
+}
+.border-white\/60 {
+  border-color: rgb(255 255 255 / 0.6);
+}
 .border-r-gray-900 {
   border-right-color: var(--colors-text-text-primary-900, #101828);
 }
@@ -1530,6 +1858,12 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
+.bg-amber-500\/15 {
+  background-color: rgb(245 158 11 / 0.15);
+}
+.bg-amber-500\/20 {
+  background-color: rgb(245 158 11 / 0.2);
+}
 .bg-background {
   background-color: var(--colors-background-bg-primary, #FFFFFF);
 }
@@ -1537,9 +1871,24 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
 }
+.bg-black\/10 {
+  background-color: rgb(0 0 0 / 0.1);
+}
+.bg-black\/20 {
+  background-color: rgb(0 0 0 / 0.2);
+}
+.bg-black\/5 {
+  background-color: rgb(0 0 0 / 0.05);
+}
 .bg-black\/60 {
   background-color: rgb(0 0 0 / 0.6);
 }
+.bg-black\/\[0\.03\] {
+  background-color: rgb(0 0 0 / 0.03);
+}
+.bg-black\/\[0\.04\] {
+  background-color: rgb(0 0 0 / 0.04);
+}
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(209 224 255 / var(--tw-bg-opacity, 1));
@@ -1563,6 +1912,10 @@ video {
 .bg-card {
   background-color: var(--colors-background-bg-primary, #FFFFFF);
 }
+.bg-emerald-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
+}
 .bg-error-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(240 68 56 / var(--tw-bg-opacity, 1));
@@ -1640,13 +1993,44 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
 }
+.bg-red-900\/30 {
+  background-color: rgb(127 29 29 / 0.3);
+}
 .bg-transparent {
   background-color: transparent;
 }
+.bg-violet-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
+}
+.bg-violet-500\/10 {
+  background-color: rgb(139 92 246 / 0.1);
+}
+.bg-violet-500\/20 {
+  background-color: rgb(139 92 246 / 0.2);
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
+.bg-white\/10 {
+  background-color: rgb(255 255 255 / 0.1);
+}
+.bg-white\/15 {
+  background-color: rgb(255 255 255 / 0.15);
+}
+.bg-white\/20 {
+  background-color: rgb(255 255 255 / 0.2);
+}
+.bg-white\/5 {
+  background-color: rgb(255 255 255 / 0.05);
+}
+.bg-white\/80 {
+  background-color: rgb(255 255 255 / 0.8);
+}
+.bg-white\/90 {
+  background-color: rgb(255 255 255 / 0.9);
+}
 .bg-yellow-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
@@ -1664,29 +2048,106 @@ video {
 .bg-opacity-90 {
   --tw-bg-opacity: 0.9;
 }
+.bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+.bg-gradient-to-br {
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
+.from-blue-500 {
+  --tw-gradient-from: #2970FF var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(41 112 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-gray-200 {
+  --tw-gradient-from: var(--colors-background-bg-quaternary, #EAECF0) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-gray-50 {
+  --tw-gradient-from: var(--colors-background-bg-active, #F9FAFB) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-gray-600 {
+  --tw-gradient-from: var(--component-colors-utility-gray-utility-gray-600, #475467) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-gray-900 {
+  --tw-gradient-from: var(--colors-text-text-primary-900, #101828) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .from-transparent {
   --tw-gradient-from: transparent var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-violet-500 {
+  --tw-gradient-from: #8b5cf6 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .via-blue-400 {
   --tw-gradient-to: rgb(82 139 255 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #528BFF var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
+.via-gray-100 {
+  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--colors-background-bg-tertiary, #F2F4F7) var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
 .via-gray-300 {
   --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--colors-border-border-primary, #D0D5DD) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
+.via-indigo-500 {
+  --tw-gradient-to: rgb(99 102 241 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #6366f1 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+.to-black\/20 {
+  --tw-gradient-to: rgb(0 0 0 / 0.2) var(--tw-gradient-to-position);
+}
+.to-black\/\[0\.02\] {
+  --tw-gradient-to: rgb(0 0 0 / 0.02) var(--tw-gradient-to-position);
+}
+.to-blue-500 {
+  --tw-gradient-to: #2970FF var(--tw-gradient-to-position);
+}
+.to-blue-600 {
+  --tw-gradient-to: #155EEF var(--tw-gradient-to-position);
+}
+.to-gray-200 {
+  --tw-gradient-to: var(--colors-background-bg-quaternary, #EAECF0) var(--tw-gradient-to-position);
+}
+.to-gray-600 {
+  --tw-gradient-to: var(--component-colors-utility-gray-utility-gray-600, #475467) var(--tw-gradient-to-position);
+}
+.to-gray-800 {
+  --tw-gradient-to: var(--component-colors-utility-gray-utility-gray-800, #182230) var(--tw-gradient-to-position);
+}
+.to-indigo-500 {
+  --tw-gradient-to: #6366f1 var(--tw-gradient-to-position);
+}
 .to-transparent {
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
+.to-white {
+  --tw-gradient-to: #FFFFFF var(--tw-gradient-to-position);
+}
+.bg-\[length\:200\%_100\%\] {
+  background-size: 200% 100%;
+}
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
 }
+.p-0 {
+  padding: 0px;
+}
 .p-1 {
   padding: 0.25rem;
 }
@@ -1696,6 +2157,9 @@ video {
 .p-2 {
   padding: 0.5rem;
 }
+.p-2\.5 {
+  padding: 0.625rem;
+}
 .p-3 {
   padding: 0.75rem;
 }
@@ -1730,10 +2194,22 @@ video {
   padding-left: 0px;
   padding-right: 0px;
 }
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1790,6 +2266,10 @@ video {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1802,6 +2282,14 @@ video {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -1846,9 +2334,22 @@ video {
   padding-top: 8px;
   padding-bottom: 8px;
 }
+.py-px {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
 .pb-2 {
   padding-bottom: 0.5rem;
 }
+.pb-2\.5 {
+  padding-bottom: 0.625rem;
+}
+.pb-4 {
+  padding-bottom: 1rem;
+}
 .pb-\[12px\] {
   padding-bottom: 12px;
 }
@@ -1858,6 +2359,9 @@ video {
 .pb-\[8px\] {
   padding-bottom: 8px;
 }
+.pl-1 {
+  padding-left: 0.25rem;
+}
 .pl-4 {
   padding-left: 1rem;
 }
@@ -1876,6 +2380,9 @@ video {
 .pl-\[8px\] {
   padding-left: 8px;
 }
+.pr-12 {
+  padding-right: 3rem;
+}
 .pr-3 {
   padding-right: 0.75rem;
 }
@@ -1888,6 +2395,18 @@ video {
 .pt-0 {
   padding-top: 0px;
 }
+.pt-0\.5 {
+  padding-top: 0.125rem;
+}
+.pt-1 {
+  padding-top: 0.25rem;
+}
+.pt-2 {
+  padding-top: 0.5rem;
+}
+.pt-2\.5 {
+  padding-top: 0.625rem;
+}
 .pt-\[8px\] {
   padding-top: 8px;
 }
@@ -1903,6 +2422,9 @@ video {
 .text-end {
   text-align: end;
 }
+.align-middle {
+  vertical-align: middle;
+}
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -1913,6 +2435,9 @@ video {
 .text-\[10px\] {
   font-size: 10px;
 }
+.text-\[11px\] {
+  font-size: 11px;
+}
 .text-\[12px\] {
   font-size: 12px;
 }
@@ -1922,12 +2447,18 @@ video {
 .text-\[14px\] {
   font-size: 14px;
 }
+.text-\[15px\] {
+  font-size: 15px;
+}
 .text-\[16px\] {
   font-size: 16px;
 }
 .text-\[18px\] {
   font-size: 18px;
 }
+.text-\[9px\] {
+  font-size: 9px;
+}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1940,6 +2471,10 @@ video {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -1992,9 +2527,18 @@ video {
 .leading-none {
   line-height: 1;
 }
+.leading-relaxed {
+  line-height: 1.625;
+}
+.leading-snug {
+  line-height: 1.375;
+}
 .tracking-tight {
   letter-spacing: -0.025em;
 }
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
 .tracking-wider {
   letter-spacing: 0.05em;
 }
@@ -2026,6 +2570,14 @@ video {
   --tw-text-opacity: 1;
   color: rgb(152 162 179 / var(--tw-text-opacity, 1));
 }
+.text-amber-400 {
+  --tw-text-opacity: 1;
+  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
+}
+.text-amber-600 {
+  --tw-text-opacity: 1;
+  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
+}
 .text-blue-400 {
   --tw-text-opacity: 1;
   color: rgb(82 139 255 / var(--tw-text-opacity, 1));
@@ -2056,6 +2608,9 @@ video {
 .text-gray-100 {
   color: var(--colors-background-bg-tertiary, #F2F4F7);
 }
+.text-gray-200 {
+  color: var(--colors-background-bg-quaternary, #EAECF0);
+}
 .text-gray-300 {
   color: var(--colors-border-border-primary, #D0D5DD);
 }
@@ -2127,6 +2682,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(107 33 168 / var(--tw-text-opacity, 1));
 }
+.text-red-200 {
+  --tw-text-opacity: 1;
+  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
+}
 .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
@@ -2139,10 +2698,29 @@ video {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity, 1));
 }
+.text-violet-300 {
+  --tw-text-opacity: 1;
+  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
+}
+.text-violet-400 {
+  --tw-text-opacity: 1;
+  color: rgb(167 139 250 / var(--tw-text-opacity, 1));
+}
+.text-violet-600 {
+  --tw-text-opacity: 1;
+  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
+}
+.text-violet-700 {
+  --tw-text-opacity: 1;
+  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
+}
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
+.text-white\/90 {
+  color: rgb(255 255 255 / 0.9);
+}
 .text-yellow-600 {
   --tw-text-opacity: 1;
   color: rgb(202 138 4 / var(--tw-text-opacity, 1));
@@ -2165,6 +2743,32 @@ video {
 .opacity-60 {
   opacity: 0.6;
 }
+.opacity-70 {
+  opacity: 0.7;
+}
+.opacity-80 {
+  opacity: 0.8;
+}
+.shadow-\[-4px_0_32px_rgba\(0\2c 0\2c 0\2c 0\.12\)\] {
+  --tw-shadow: -4px 0 32px rgba(0,0,0,0.12);
+  --tw-shadow-colored: -4px 0 32px 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-\[-4px_0_32px_rgba\(0\2c 0\2c 0\2c 0\.4\)\] {
+  --tw-shadow: -4px 0 32px rgba(0,0,0,0.4);
+  --tw-shadow-colored: -4px 0 32px 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-\[0_-10px_40px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
+  --tw-shadow: 0 -10px 40px rgba(0,0,0,0.2);
+  --tw-shadow-colored: 0 -10px 40px 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-\[0_24px_48px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
+  --tw-shadow: 0 24px 48px rgba(0,0,0,0.2);
+  --tw-shadow-colored: 0 24px 48px 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-\[0px_1px_2px_0px_rgba\(16\2c 24\2c 40\2c 0\.04\)\] {
   --tw-shadow: 0px 1px 2px 0px rgba(16,24,40,0.04);
   --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);
@@ -2215,6 +2819,10 @@ video {
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-violet-500\/30 {
+  --tw-shadow-color: rgb(139 92 246 / 0.3);
+  --tw-shadow: var(--tw-shadow-colored);
+}
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2222,6 +2830,15 @@ video {
 .outline {
   outline-style: solid;
 }
+.ring-2 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.ring-blue-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(41 112 255 / var(--tw-ring-opacity, 1));
+}
 .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);
@@ -2229,6 +2846,16 @@ video {
 .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);
 }
+.backdrop-blur-sm {
+  --tw-backdrop-blur: blur(4px);
+  -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-\[flex\] {
+  transition-property: flex;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2244,11 +2871,19 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-shadow {
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.duration-100 {
+  transition-duration: 100ms;
+}
 .duration-150 {
   transition-duration: 150ms;
 }
@@ -2258,6 +2893,12 @@ video {
 .duration-300 {
   transition-duration: 300ms;
 }
+.duration-\[250ms\] {
+  transition-duration: 250ms;
+}
+.ease-\[cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)\] {
+  transition-timing-function: cubic-bezier(0.4,0,0.2,1);
+}
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -2334,6 +2975,22 @@ video {
   color: rgb(152 162 179 / var(--tw-text-opacity, 1));
 }
 
+.placeholder\:text-gray-400::-moz-placeholder {
+  color: var(--colors-foreground-fg-disabled, #98A2B3);
+}
+
+.placeholder\:text-gray-400::placeholder {
+  color: var(--colors-foreground-fg-disabled, #98A2B3);
+}
+
+.placeholder\:text-gray-500::-moz-placeholder {
+  color: var(--colors-foreground-fg-quarterary-500, #667085);
+}
+
+.placeholder\:text-gray-500::placeholder {
+  color: var(--colors-foreground-fg-quarterary-500, #667085);
+}
+
 .empty\:before\:text-gray-400:empty::before {
   content: var(--tw-content);
   color: var(--colors-foreground-fg-disabled, #98A2B3);
@@ -2344,6 +3001,29 @@ video {
   content: var(--tw-content);
 }
 
+.focus-within\:border-violet-500:focus-within {
+  --tw-border-opacity: 1;
+  border-color: rgb(139 92 246 / var(--tw-border-opacity, 1));
+}
+
+.focus-within\:shadow-\[0_0_0_4px_rgba\(139\2c 92\2c 246\2c 0\.1\)\]:focus-within {
+  --tw-shadow: 0 0 0 4px rgba(139,92,246,0.1);
+  --tw-shadow-colored: 0 0 0 4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.focus-within\:shadow-\[0_0_0_4px_rgba\(139\2c 92\2c 246\2c 0\.2\)\]:focus-within {
+  --tw-shadow: 0 0 0 4px rgba(139,92,246,0.2);
+  --tw-shadow-colored: 0 0 0 4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:scale-105:hover {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:\!border-blue-600:hover {
   --tw-border-opacity: 1 !important;
   border-color: rgb(21 94 239 / var(--tw-border-opacity, 1)) !important;
@@ -2354,11 +3034,35 @@ video {
   border-color: rgb(217 45 32 / var(--tw-border-opacity, 1));
 }
 
+.hover\:border-gray-300:hover {
+  border-color: var(--colors-border-border-primary, #D0D5DD);
+}
+
 .hover\:bg-\[\#f9fafb\]:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-black\/10:hover {
+  background-color: rgb(0 0 0 / 0.1);
+}
+
+.hover\:bg-black\/5:hover {
+  background-color: rgb(0 0 0 / 0.05);
+}
+
+.hover\:bg-black\/\[0\.02\]:hover {
+  background-color: rgb(0 0 0 / 0.02);
+}
+
+.hover\:bg-black\/\[0\.03\]:hover {
+  background-color: rgb(0 0 0 / 0.03);
+}
+
+.hover\:bg-black\/\[0\.08\]:hover {
+  background-color: rgb(0 0 0 / 0.08);
+}
+
 .hover\:bg-blue-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(209 224 255 / var(--tw-bg-opacity, 1));
@@ -2374,6 +3078,11 @@ video {
   background-color: rgb(0 78 235 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-emerald-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-error-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(217 45 32 / var(--tw-bg-opacity, 1));
@@ -2409,16 +3118,59 @@ video {
   background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-red-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-red-500\/20:hover {
+  background-color: rgb(239 68 68 / 0.2);
+}
+
+.hover\:bg-red-500\/80:hover {
+  background-color: rgb(239 68 68 / 0.8);
+}
+
 .hover\:bg-red-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-violet-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-violet-500\/20:hover {
+  background-color: rgb(139 92 246 / 0.2);
+}
+
+.hover\:bg-violet-900:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(76 29 149 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-white:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-white\/10:hover {
+  background-color: rgb(255 255 255 / 0.1);
+}
+
+.hover\:bg-white\/15:hover {
+  background-color: rgb(255 255 255 / 0.15);
+}
+
+.hover\:bg-white\/25:hover {
+  background-color: rgb(255 255 255 / 0.25);
+}
+
+.hover\:bg-white\/5:hover {
+  background-color: rgb(255 255 255 / 0.05);
+}
+
 .hover\:font-medium:hover {
   font-weight: 500;
 }
@@ -2428,6 +3180,11 @@ video {
   color: rgb(132 173 255 / var(--tw-text-opacity, 1));
 }
 
+.hover\:text-blue-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(82 139 255 / var(--tw-text-opacity, 1));
+}
+
 .hover\:text-blue-700:hover {
   --tw-text-opacity: 1;
   color: rgb(0 78 235 / var(--tw-text-opacity, 1));
@@ -2443,6 +3200,18 @@ video {
   color: rgb(0 53 158 / var(--tw-text-opacity, 1));
 }
 
+.hover\:text-gray-200:hover {
+  color: var(--colors-background-bg-quaternary, #EAECF0);
+}
+
+.hover\:text-gray-300:hover {
+  color: var(--colors-border-border-primary, #D0D5DD);
+}
+
+.hover\:text-gray-600:hover {
+  color: var(--component-colors-utility-gray-utility-gray-600, #475467);
+}
+
 .hover\:text-gray-700:hover {
   color: var(--colors-foreground-fg-secondary-700, #344054);
 }
@@ -2455,6 +3224,30 @@ video {
   color: var(--colors-text-text-primary-900, #101828);
 }
 
+.hover\:text-red-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-red-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-red-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.hover\:opacity-100:hover {
+  opacity: 1;
+}
+
 .hover\:opacity-70:hover {
   opacity: 0.7;
 }
@@ -2465,12 +3258,29 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
 }
 
+.hover\:shadow:hover {
+  --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);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:shadow-lg:hover {
+  --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);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .hover\:shadow-tab:hover {
   --tw-shadow: 0 1px 3px 0 rgba(16, 24, 40, 0.08), 0 1px 2px 0 rgba(16, 24, 40, 0.08);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 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);
 }
 
+.hover\:shadow-violet-500\/40:hover {
+  --tw-shadow-color: rgb(139 92 246 / 0.4);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .focus\:border-blue-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(41 112 255 / var(--tw-border-opacity, 1));
@@ -2504,6 +3314,12 @@ video {
   outline-offset: 2px;
 }
 
+.focus\:ring-0:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .focus\:ring-1:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2544,6 +3360,16 @@ video {
   --tw-ring-color: var(--colors-border-border-brand, #84ADFF);
 }
 
+.active\:scale-95:active {
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.active\:cursor-grabbing:active {
+  cursor: grabbing;
+}
+
 .disabled\:pointer-events-none:disabled {
   pointer-events: none;
 }
@@ -2577,6 +3403,11 @@ video {
   .sm\:flex-row {
     flex-direction: row;
   }
+
+  .sm\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -2600,4 +3431,728 @@ video {
   .lg\:grid-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
-} 
+
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+
+  .dark\:border-gray-700 {
+    border-color: var(--colors-foreground-fg-secondary-700, #344054);
+  }
+
+  .dark\:bg-gray-900 {
+    background-color: var(--colors-text-text-primary-900, #101828);
+  }
+
+  .dark\:from-gray-700 {
+    --tw-gradient-from: var(--colors-foreground-fg-secondary-700, #344054) var(--tw-gradient-from-position);
+    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+  }
+
+  .dark\:via-gray-600 {
+    --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-from), var(--component-colors-utility-gray-utility-gray-600, #475467) var(--tw-gradient-via-position), var(--tw-gradient-to);
+  }
+
+  .dark\:to-gray-700 {
+    --tw-gradient-to: var(--colors-foreground-fg-secondary-700, #344054) var(--tw-gradient-to-position);
+  }
+
+  .dark\:text-gray-100 {
+    color: var(--colors-background-bg-tertiary, #F2F4F7);
+  }
+
+  .dark\:text-gray-400 {
+    color: var(--colors-foreground-fg-disabled, #98A2B3);
+  }
+
+  .dark\:placeholder\:text-gray-600::-moz-placeholder {
+    color: var(--component-colors-utility-gray-utility-gray-600, #475467);
+  }
+
+  .dark\:placeholder\:text-gray-600::placeholder {
+    color: var(--component-colors-utility-gray-utility-gray-600, #475467);
+  }
+
+  .dark\:hover\:border-gray-600:hover {
+    border-color: var(--component-colors-utility-gray-utility-gray-600, #475467);
+  }
+
+  .dark\:hover\:bg-gray-700:hover {
+    background-color: var(--colors-foreground-fg-secondary-700, #344054);
+  }
+
+  .dark\:hover\:text-gray-100:hover {
+    color: var(--colors-background-bg-tertiary, #F2F4F7);
+  }
+} /* K-MD-Editor Styles - Minimal CSS (Tailwind handles most styling) */
+
+/* ============================================================================
+   Tippy.js / BubbleMenu Overrides (Required for popup positioning)
+   ============================================================================ */
+
+[data-tippy-root] {
+  z-index: 99999 !important;
+}
+
+.tippy-box {
+  pointer-events: auto !important;
+  z-index: 99999 !important;
+}
+
+.tippy-content {
+  pointer-events: auto !important;
+}
+
+/* ============================================================================
+   Theme Variables - Runtime theming support
+   ============================================================================ */
+
+.k-md-editor {
+  --k-md-editor-bg: #ffffff;
+  --k-md-editor-text: #1f2937;
+  --k-md-editor-text-muted: #6b7280;
+  --k-md-editor-border: #e5e7eb;
+  --k-md-editor-border-focus: #3b82f6;
+  --k-md-editor-selection: #dbeafe;
+  --k-md-editor-code-bg: #f3f4f6;
+  --k-md-editor-link: #2563eb;
+  --k-md-editor-placeholder: #9ca3af;
+
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: var(--k-md-editor-bg);
+  color: var(--k-md-editor-text);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 15px;
+  line-height: 1.6;
+  display: flex;
+  flex-direction: row;
+}
+
+/* Dark Theme */
+.k-md-editor--dark {
+  --k-md-editor-bg: #111827;
+  --k-md-editor-text: #f3f4f6;
+  --k-md-editor-text-muted: #9ca3af;
+  --k-md-editor-border: #374151;
+  --k-md-editor-border-focus: #60a5fa;
+  --k-md-editor-selection: #1e3a5f;
+  --k-md-editor-code-bg: #1f2937;
+  --k-md-editor-link: #60a5fa;
+  --k-md-editor-placeholder: #6b7280;
+}
+
+/* Ocean Light */
+.k-md-editor--ocean-light {
+  --k-md-editor-bg: #f0f7ff;
+  --k-md-editor-text: #0c4a6e;
+  --k-md-editor-text-muted: #0369a1;
+  --k-md-editor-border: #bae6fd;
+  --k-md-editor-border-focus: #0284c7;
+  --k-md-editor-selection: #e0f2fe;
+  --k-md-editor-code-bg: #e0f2fe;
+  --k-md-editor-link: #0284c7;
+  --k-md-editor-placeholder: #7dd3fc;
+}
+
+/* Ocean Dark */
+.k-md-editor--ocean-dark {
+  --k-md-editor-bg: #0c1929;
+  --k-md-editor-text: #e0f2fe;
+  --k-md-editor-text-muted: #7dd3fc;
+  --k-md-editor-border: #164e63;
+  --k-md-editor-border-focus: #22d3ee;
+  --k-md-editor-selection: #164e63;
+  --k-md-editor-code-bg: #0e2a3d;
+  --k-md-editor-link: #22d3ee;
+  --k-md-editor-placeholder: #0e7490;
+}
+
+/* Forest Light */
+.k-md-editor--forest-light {
+  --k-md-editor-bg: #f0fdf4;
+  --k-md-editor-text: #14532d;
+  --k-md-editor-text-muted: #166534;
+  --k-md-editor-border: #bbf7d0;
+  --k-md-editor-border-focus: #16a34a;
+  --k-md-editor-selection: #dcfce7;
+  --k-md-editor-code-bg: #dcfce7;
+  --k-md-editor-link: #16a34a;
+  --k-md-editor-placeholder: #86efac;
+}
+
+/* Forest Dark */
+.k-md-editor--forest-dark {
+  --k-md-editor-bg: #052e16;
+  --k-md-editor-text: #dcfce7;
+  --k-md-editor-text-muted: #86efac;
+  --k-md-editor-border: #166534;
+  --k-md-editor-border-focus: #4ade80;
+  --k-md-editor-selection: #14532d;
+  --k-md-editor-code-bg: #0a3d1f;
+  --k-md-editor-link: #4ade80;
+  --k-md-editor-placeholder: #166534;
+}
+
+/* Sunset Light */
+.k-md-editor--sunset-light {
+  --k-md-editor-bg: #fffbeb;
+  --k-md-editor-text: #78350f;
+  --k-md-editor-text-muted: #92400e;
+  --k-md-editor-border: #fde68a;
+  --k-md-editor-border-focus: #f59e0b;
+  --k-md-editor-selection: #fef3c7;
+  --k-md-editor-code-bg: #fef3c7;
+  --k-md-editor-link: #d97706;
+  --k-md-editor-placeholder: #fbbf24;
+}
+
+/* Sunset Dark */
+.k-md-editor--sunset-dark {
+  --k-md-editor-bg: #1c1208;
+  --k-md-editor-text: #fef3c7;
+  --k-md-editor-text-muted: #fcd34d;
+  --k-md-editor-border: #78350f;
+  --k-md-editor-border-focus: #fbbf24;
+  --k-md-editor-selection: #451a03;
+  --k-md-editor-code-bg: #292011;
+  --k-md-editor-link: #fbbf24;
+  --k-md-editor-placeholder: #92400e;
+}
+
+/* ============================================================================
+   Editor States
+   ============================================================================ */
+
+/* Readonly and loading states now use Tailwind utilities in component */
+
+/* ============================================================================
+   Editor Layout
+   ============================================================================ */
+
+/* Layout classes now use Tailwind utilities in component */
+/* k-md-editor__content class kept for ProseMirror and scrollbar styling selectors */
+
+.k-md-editor--drag-enabled .k-md-editor__content .ProseMirror {
+  padding-left: 52px;
+}
+
+/* ============================================================================
+   ProseMirror Content Styling (Required - can't be Tailwind)
+   ============================================================================ */
+
+.k-md-editor__content .ProseMirror {
+  outline: none;
+  padding: 16px 20px;
+  min-height: 100%;
+}
+
+.k-md-editor__content .ProseMirror:focus {
+  outline: none;
+}
+
+/* Placeholder */
+.k-md-editor__content .ProseMirror > p.is-empty::before,
+.k-md-editor__content .ProseMirror li > p.is-empty::before,
+.k-md-editor__content .ProseMirror blockquote > p.is-empty::before {
+  content: attr(data-placeholder);
+  color: var(--k-md-editor-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.k-md-editor__content .ProseMirror .tableWrapper.is-empty::before,
+.k-md-editor__content .ProseMirror table .is-empty::before,
+.k-md-editor__content .ProseMirror td.is-empty::before,
+.k-md-editor__content .ProseMirror th.is-empty::before {
+  content: none !important;
+  display: none !important;
+}
+
+/* Selection */
+.k-md-editor__content .ProseMirror ::-moz-selection {
+  background-color: var(--k-md-editor-selection);
+}
+.k-md-editor__content .ProseMirror ::selection {
+  background-color: var(--k-md-editor-selection);
+}
+
+/* Typography */
+.k-md-editor__content .ProseMirror h1,
+.k-md-editor__content .ProseMirror h2,
+.k-md-editor__content .ProseMirror h3 {
+  font-weight: 600;
+  line-height: 1.3;
+  margin: 1.5em 0 0.5em;
+}
+
+.k-md-editor__content .ProseMirror h1:first-child,
+.k-md-editor__content .ProseMirror h2:first-child,
+.k-md-editor__content .ProseMirror h3:first-child {
+  margin-top: 0;
+}
+
+.k-md-editor__content .ProseMirror h1 { font-size: 1.875rem; }
+.k-md-editor__content .ProseMirror h2 { font-size: 1.5rem; }
+.k-md-editor__content .ProseMirror h3 { font-size: 1.25rem; }
+
+.k-md-editor__content .ProseMirror p {
+  margin: 0 0 0.75em;
+}
+
+.k-md-editor__content .ProseMirror p:last-child {
+  margin-bottom: 0;
+}
+
+/* Lists */
+.k-md-editor__content .ProseMirror ul,
+.k-md-editor__content .ProseMirror ol {
+  margin: 0.75em 0;
+  padding-left: 1.5em;
+}
+
+.k-md-editor__content .ProseMirror ul { list-style-type: disc; }
+.k-md-editor__content .ProseMirror ol { list-style-type: decimal; }
+.k-md-editor__content .ProseMirror ul ul { list-style-type: circle; }
+.k-md-editor__content .ProseMirror ul ul ul { list-style-type: square; }
+
+.k-md-editor__content .ProseMirror li {
+  margin: 0.25em 0;
+  display: list-item;
+}
+
+.k-md-editor__content .ProseMirror li > p {
+  margin: 0;
+}
+
+/* Code */
+.k-md-editor__content .ProseMirror code {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 0.9em;
+  background-color: var(--k-md-editor-code-bg);
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+}
+
+.k-md-editor__content .ProseMirror pre {
+  background-color: var(--k-md-editor-code-bg);
+  padding: 12px 16px;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 0.75em 0;
+}
+
+.k-md-editor__content .ProseMirror pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.875rem;
+}
+
+/* Blockquote */
+.k-md-editor__content .ProseMirror blockquote {
+  border-left: 3px solid var(--k-md-editor-border);
+  margin: 0.75em 0;
+  padding-left: 1em;
+  color: var(--k-md-editor-text-muted);
+}
+
+.k-md-editor__content .ProseMirror blockquote p {
+  margin: 0;
+}
+
+/* Links */
+.k-md-editor__content .ProseMirror a {
+  color: var(--k-md-editor-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.k-md-editor__content .ProseMirror a:hover {
+  text-decoration: underline;
+}
+
+/* Horizontal Rule */
+.k-md-editor__content .ProseMirror hr {
+  border: none;
+  border-top: 1px solid var(--k-md-editor-border);
+  margin: 1.5em 0;
+}
+
+/* Table */
+.k-md-editor__content .ProseMirror table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1em 0;
+  table-layout: fixed;
+}
+
+.k-md-editor__content .ProseMirror table td,
+.k-md-editor__content .ProseMirror table th {
+  border: 1px solid var(--k-md-editor-border);
+  padding: 10px 12px;
+  position: relative;
+  text-align: left;
+  vertical-align: top;
+  min-width: 100px;
+}
+
+.k-md-editor__content .ProseMirror table th {
+  background-color: var(--k-md-editor-code-bg);
+  font-weight: 600;
+}
+
+.k-md-editor__content .ProseMirror table .selectedCell::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-color: var(--k-md-editor-selection);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.k-md-editor__content .ProseMirror .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  cursor: col-resize;
+  background-color: var(--k-md-editor-border-focus);
+  z-index: 10;
+}
+
+.k-md-editor__content .ProseMirror .tableWrapper {
+  overflow-x: auto;
+  margin: 1em 0;
+}
+
+/* ============================================================================
+   Drag Handle - Only CSS needed for pseudo-elements and JS-added states
+   ============================================================================ */
+
+/* Drop Indicator - needs CSS for ::before/::after pseudo-elements */
+.k-md-editor-drop-indicator {
+  position: absolute;
+  left: 52px;
+  right: 16px;
+  height: 3px;
+  background: linear-gradient(90deg, #3b82f6, #60a5fa);
+  border-radius: 2px;
+  z-index: 20;
+  pointer-events: none;
+  box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
+}
+
+.k-md-editor-drop-indicator::before,
+.k-md-editor-drop-indicator::after {
+  content: '';
+  position: absolute;
+  top: -4px;
+  width: 10px;
+  height: 10px;
+  background-color: #3b82f6;
+  border-radius: 50%;
+  border: 2px solid white;
+}
+
+.k-md-editor-drop-indicator::before { left: -5px; }
+.k-md-editor-drop-indicator::after { right: -5px; }
+
+/* Dragging States - added via JavaScript */
+.k-md-editor--dragging {
+  cursor: grabbing !important;
+}
+
+.k-md-editor--dragging * {
+  cursor: grabbing !important;
+}
+
+.k-md-editor--dragging .ProseMirror {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.k-md-editor-block--dragging {
+  opacity: 0.4;
+  background-color: rgba(59, 130, 246, 0.05);
+  border-radius: 4px;
+}
+
+/* ============================================================================
+   Animations (Referenced by Tailwind arbitrary values)
+   ============================================================================ */
+
+@keyframes ai-message-in {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes ai-new-selection-in {
+  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes ai-loading-slide {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(350%); }
+}
+
+@keyframes ai-panel-slide-in {
+  from { width: 0; min-width: 0; opacity: 0; }
+  to { width: 400px; min-width: 340px; opacity: 1; }
+}
+
+@keyframes ai-backdrop-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes ai-popup-scale-in {
+  from { transform: scale(0.9) translateY(20px); opacity: 0; }
+  to { transform: scale(1) translateY(0); opacity: 1; }
+}
+
+@keyframes ai-drawer-slide-up {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+/* ============================================================================
+   Scrollbar Styles - Subtle, appears on hover
+   ============================================================================ */
+
+/* Main editor scrollbar */
+.k-md-editor__content::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.k-md-editor__content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.k-md-editor__content::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 3px;
+  -webkit-transition: background-color 0.2s;
+  transition: background-color 0.2s;
+}
+
+.k-md-editor__content:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+
+.k-md-editor--dark .k-md-editor__content:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+.k-md-editor__content::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+.k-md-editor--dark .k-md-editor__content::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.25);
+}
+
+/* AI Panel scrollbar - extra subtle */
+.k-md-editor [class*="overflow-y-auto"]::-webkit-scrollbar {
+  width: 4px;
+}
+
+.k-md-editor [class*="overflow-y-auto"]::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.k-md-editor [class*="overflow-y-auto"]::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 2px;
+}
+
+.k-md-editor [class*="overflow-y-auto"]:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.k-md-editor--dark [class*="overflow-y-auto"]:hover::-webkit-scrollbar-thumb,
+.k-md-editor [class*="overflow-y-auto"][class*="from-gray-900"]:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* ============================================================================
+   AI Selection Box - Snake Border Animation
+   ============================================================================ */
+
+.k-md-editor-snake-border {
+  position: relative;
+  border-color: transparent !important;
+  background: 
+    linear-gradient(var(--snake-bg, #fafafa), var(--snake-bg, #fafafa)) padding-box,
+    conic-gradient(
+      from var(--snake-angle, 0deg),
+      transparent 0deg,
+      transparent 60deg,
+      #8b5cf6 80deg,
+      #c4b5fd 90deg,
+      #8b5cf6 100deg,
+      transparent 120deg,
+      transparent 360deg
+    ) border-box;
+  border: 2px solid transparent;
+  animation: snake-spin 1.2s linear infinite;
+}
+
+/* Light theme background */
+.k-md-editor-snake-border {
+  --snake-bg: #f9fafb;
+}
+
+/* Dark theme background */
+.k-md-editor--dark .k-md-editor-snake-border,
+[data-theme*="dark"] .k-md-editor-snake-border {
+  --snake-bg: #1f2937;
+}
+
+/* Use @property for smooth angle animation (Chrome/Edge) */
+@supports (background: conic-gradient(from 0deg, red, blue)) {
+  @property --snake-angle {
+    syntax: '<angle>';
+    initial-value: 0deg;
+    inherits: false;
+  }
+  
+  @keyframes snake-spin {
+    to {
+      --snake-angle: 360deg;
+    }
+  }
+}
+
+/* Fallback for Firefox/Safari - use pseudo-element rotation */
+@supports not (background: paint(something)) {
+  .k-md-editor-snake-border::before {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    border-radius: inherit;
+    background: conic-gradient(
+      from 0deg,
+      transparent 0deg,
+      transparent 60deg,
+      #8b5cf6 80deg,
+      #c4b5fd 90deg,
+      #8b5cf6 100deg,
+      transparent 120deg,
+      transparent 360deg
+    );
+    animation: snake-rotate 1.2s linear infinite;
+    z-index: -1;
+  }
+  
+  .k-md-editor-snake-border::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: calc(0.5rem - 2px);
+    background: var(--snake-bg, #f9fafb);
+    z-index: -1;
+  }
+  
+  @keyframes snake-rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+}
+
+/* ============================================================================
+   Raw Markdown Textarea
+   ============================================================================ */
+
+.k-md-editor__raw-textarea {
+  font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.7;
+  -moz-tab-size: 2;
+    -o-tab-size: 2;
+       tab-size: 2;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+/* Light theme */
+.k-md-editor .k-md-editor__raw-textarea {
+  background-color: #fafafa;
+  color: #1f2937;
+}
+
+.k-md-editor .k-md-editor__raw-textarea::-moz-placeholder {
+  color: #9ca3af;
+}
+
+.k-md-editor .k-md-editor__raw-textarea::placeholder {
+  color: #9ca3af;
+}
+
+/* Dark theme */
+.k-md-editor--dark .k-md-editor__raw-textarea {
+  background-color: #111827;
+  color: #f3f4f6;
+}
+
+.k-md-editor--dark .k-md-editor__raw-textarea::-moz-placeholder {
+  color: #6b7280;
+}
+
+.k-md-editor--dark .k-md-editor__raw-textarea::placeholder {
+  color: #6b7280;
+}
+
+/* Scrollbar for raw textarea */
+.k-md-editor__raw-textarea::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.k-md-editor__raw-textarea::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.k-md-editor__raw-textarea::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+}
+
+.k-md-editor__raw-textarea::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.k-md-editor--dark .k-md-editor__raw-textarea::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.k-md-editor--dark .k-md-editor__raw-textarea::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+/* ============================================================================
+   Print Styles
+   ============================================================================ */
+
+@media print {
+  .k-md-editor {
+    background: white;
+    color: black;
+  }
+
+  .k-md-editor-drag-handle-container {
+    display: none;
+  }
+}