@eka-care/medassist-widget-embed 0.2.4 → 0.2.5

package/src/medassist-widget.css

@@ -1,3 +1,83 @@
+/**
+ * Design tokens – aligned with Figma variables
+ * https://www.figma.com/design/rWEkKtR9prGtHy0JJrwvm6/AI-Chatbot-%7C-Eka-Internal?node-id=56-2385
+ *
+ * Structure: color / black | color / white | color / base | color / accent | opacity
+ *
+ * :root = document scope (dev, iframe). :host = Shadow DOM scope (widget-embed).
+ */
+
+:root,
+:host {
+  /* ========== opacity ========== */
+  --opacity-0: 0;
+  --opacity-1: 0.1;
+  --opacity-2: 0.2;
+  --opacity-3: 0.3;
+  --opacity-4: 0.4;
+  --opacity-5: 0.5;
+  --opacity-6: 0.6;
+  --opacity-7: 0.7;
+  --opacity-8: 0.8;
+  --opacity-9: 0.9;
+  --opacity-10: 1;
+
+  /* ========== color / black (#000000 at varying opacity) ========== */
+  /* black-100: 10% · black-200: 20% · … · black-500: 50% · … · black-1000: 100% */
+  --black-50: rgba(0, 0, 0, 0.05);
+  --black-100: rgba(0, 0, 0, 0.1);
+  --black-200: rgba(0, 0, 0, 0.2);
+  --black-300: rgba(0, 0, 0, 0.3);
+  --black-400: rgba(0, 0, 0, 0.4);
+  --black-500: rgba(0, 0, 0, 0.5); /* #000000 · 50% */
+  --black-600: rgba(0, 0, 0, 0.6);
+  --black-700: rgba(0, 0, 0, 0.7);
+  --black-800: rgba(0, 0, 0, 0.8);
+  --black-900: rgba(0, 0, 0, 0.9);
+  --black-1000: #000000;
+
+  /* ========== color / white (#FFFFFF at varying opacity) ========== */
+  --white-50: rgba(255, 255, 255, 0.05);
+  --white-100: rgba(255, 255, 255, 0.1);
+  --white-200: rgba(255, 255, 255, 0.2);
+  --white-300: rgba(255, 255, 255, 0.3);
+  --white-400: rgba(255, 255, 255, 0.4);
+  --white-500: rgba(255, 255, 255, 0.5);
+  --white-600: rgba(255, 255, 255, 0.6);
+  --white-700: rgba(255, 255, 255, 0.7);
+  --white-800: rgba(255, 255, 255, 0.8);
+  --white-900: rgba(255, 255, 255, 0.9);
+  --white-1000: #ffffff;
+
+  /* ========== color / base (grayscale) ========== */
+  --base-00: #ffffff;
+  --base-50: #f0f0f0;
+  --base-100: #e6e6e6;
+  --base-200: #cccccc;
+  --base-300: #b3b3b3;
+  --base-400: #999999;
+  --base-500: #808080;
+  --base-600: #666666;
+  --base-700: #4d4d4d;
+  --base-800: #333333;
+  --base-900: #191919;
+  --base-1000: #000000;
+
+  /* ========== color / accent ========== */
+  --accent-50: #f7f6fd;
+  --accent-100: #f0eefb;
+  --accent-200: #dad6f7;
+  --accent-300: #b5adef;
+  --accent-400: #9084e7;
+  --accent-500: #6b5ce0;
+  --accent-500-op50: rgba(107, 92, 224, 0.5);
+  --accent-600: #5a4ebe;
+  --accent-700: #453b91;
+  --accent-800: #302964;
+  --accent-900: #1a1738;
+  --accent-1000: #0a0916;
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -104,9 +184,12 @@
   --tw-contain-layout:  ;
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
-}/*
-! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
-*//*
+}
+
+/*! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
+ */
+
+/*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
@@ -423,6 +506,7 @@ menu {
 /*
 Reset default styling for dialogs.
 */
+
 dialog {
   padding: 0;
 }
@@ -463,6 +547,7 @@ button,
 /*
 Make sure disabled buttons don't get the pointer cursor.
 */
+
 :disabled {
   cursor: default;
 }
@@ -496,1280 +581,1703 @@ video {
 }
 
 /* Make elements with the HTML hidden attribute stay hidden by default */
+
 [hidden]:where(:not([hidden="until-found"])) {
   display: none;
 }
-  :root {
-    --background: 0 0% 100%;
+
+:root {
+    /* COLO_CUSTOMIZATION: background → card → popover → primary */
+    /* Default background: base-50 (#F0F0F0) */
+    --background: 0 0% 94.1%; /* #F0F0F0 in HSL */
     --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
+    --card: 0 0% 100% / 0.6;
     --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
+    --popover: 0 0% 100%; /* white (opposite of default black text) */
+    --popover-foreground: 0 0% 3.9%; /* black text */
+    --theme-background-image: none;
+    --theme-background-blur: 24px;
+    --theme-background-overlay: rgba(0, 0, 0, 0.4);
+
+    --primary: 262 83% 58%;
     --primary-foreground: 0 0% 98%;
+    --ring: var(--primary);
+    --border-primary: var(--primary);
+
     --secondary: 0 0% 96.1%;
     --secondary-foreground: 0 0% 9%;
     --muted: 0 0% 96.1%;
     --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
+    --accent: var(--primary);
+    --accent-foreground: var(--primary-foreground);
+
+    --surface: 0 0% 94.1%; /* base-50 (#F0F0F0) - matches default background */
+    --surface-secondary: 0 0% 96.1%;
+    --surface-tertiary: 0 0% 98%;
+    --border-subtle: 0 0% 89.8%;
+    --border-medium: 0 0% 80%;
+    --text-primary: 0 0% 3.9%;
+    --text-secondary: 0 0% 45.1%;
+    --text-tertiary: 0 0% 63.9%;
+    --text-muted: 0 0% 45.1%;
+    --bot-message-border: 0 0% 96%;
+    --bot-message-bg: rgba(0, 0, 0, 0.1); /* Default: black-100 (10% opacity) */
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
     --border: 0 0% 89.8%;
     --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
   }
-  * {
+
+/* Theme variant for background image: glass chat window (messages area) */
+
+.theme-with-background .synapse-chat-window {
+    backdrop-filter: blur(3px);
+    -webkit-backdrop-filter: blur(3px);
+  }
+
+.theme-with-background[data-text-color="white"] .synapse-chat-window {
+    background-color: rgba(0, 0, 0, 0.12);
+  }
+
+.theme-with-background[data-text-color="black"] .synapse-chat-window {
+    background-color: rgba(255, 255, 255, 0.12);
+  }
+
+/* Header & footer: bg-[opposite of text-color]-500/50 + border-primary/40 + backdrop-blur-lg */
+
+.theme-with-background .synapse-chat-widget-header,
+  .theme-with-background .synapse-chat-widget-footer {
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+  }
+
+.theme-with-background[data-text-color="white"] .synapse-chat-widget-header {
+    background-color: rgba(0, 0, 0, 0.4) !important;
+    border-bottom: 1px solid var(--white-200) !important;
+  }
+
+.theme-with-background[data-text-color="black"] .synapse-chat-widget-header {
+    background-color: rgba(255, 255, 255, 0.4) !important;
+    border-bottom: 1px solid var(--black-200) !important;
+  }
+
+.theme-with-background[data-text-color="white"] .synapse-chat-widget-footer {
+    background-color: rgba(0, 0, 0, 0.4) !important;
+    border-top: 1px solid hsl(var(--border-primary) / 0.5) !important;
+  }
+
+.theme-with-background[data-text-color="black"] .synapse-chat-widget-footer {
+    background-color: rgba(255, 255, 255, 0.4) !important;
+    border-top: 1px solid hsl(var(--border-primary) / 0.5) !important;
+  }
+
+* {
   border-color: hsl(var(--border));
 }
-  body {
+
+body {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
     font-feature-settings: "rlig" 1, "calt" 1;
 }
+
 .container {
   width: 100%;
 }
+
 @media (min-width: 640px) {
 
   .container {
     max-width: 640px;
   }
 }
+
 @media (min-width: 768px) {
 
   .container {
     max-width: 768px;
   }
 }
+
 @media (min-width: 1024px) {
 
   .container {
     max-width: 1024px;
   }
 }
+
 @media (min-width: 1280px) {
 
   .container {
     max-width: 1280px;
   }
 }
+
 @media (min-width: 1536px) {
 
   .container {
     max-width: 1536px;
   }
 }
+
 .pointer-events-none {
   pointer-events: none;
 }
+
 .pointer-events-auto {
   pointer-events: auto;
 }
+
 .visible {
   visibility: visible;
 }
+
 .fixed {
   position: fixed;
 }
+
 .absolute {
   position: absolute;
 }
+
 .relative {
   position: relative;
 }
+
 .sticky {
   position: sticky;
 }
+
+.inset-0 {
+  inset: 0px;
+}
+
 .bottom-0 {
   bottom: 0px;
 }
+
 .bottom-\[10px\] {
   bottom: 10px;
 }
+
 .left-1\/2 {
   left: 50%;
 }
+
 .right-0 {
   right: 0px;
 }
+
+.right-0\.5 {
+  right: 0.125rem;
+}
+
 .right-3 {
   right: 0.75rem;
 }
+
 .top-0 {
   top: 0px;
 }
+
+.top-1\/2 {
+  top: 50%;
+}
+
 .isolate {
   isolation: isolate;
 }
+
+.-z-10 {
+  z-index: -10;
+}
+
 .z-10 {
   z-index: 10;
 }
+
 .z-50 {
   z-index: 50;
 }
+
 .z-\[2147483647\] {
   z-index: 2147483647;
 }
+
 .m-0 {
   margin: 0px;
 }
+
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
 }
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
+
 .my-3 {
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
 }
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+
 .mb-3 {
   margin-bottom: 0.75rem;
 }
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .mr-1 {
   margin-right: 0.25rem;
 }
+
 .mr-2 {
   margin-right: 0.5rem;
 }
+
 .mt-0\.5 {
   margin-top: 0.125rem;
 }
+
 .mt-1 {
   margin-top: 0.25rem;
 }
+
 .mt-2 {
   margin-top: 0.5rem;
 }
+
 .mt-3 {
   margin-top: 0.75rem;
 }
+
 .box-border {
   box-sizing: border-box;
 }
+
 .line-clamp-2 {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
+
 .block {
   display: block;
 }
+
 .inline-block {
   display: inline-block;
 }
+
 .inline {
   display: inline;
 }
+
 .flex {
   display: flex;
 }
+
 .inline-flex {
   display: inline-flex;
 }
+
 .grid {
   display: grid;
 }
+
 .hidden {
   display: none;
 }
+
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
+
 .size-4 {
   width: 1rem;
   height: 1rem;
 }
+
 .h-10 {
   height: 2.5rem;
 }
+
 .h-12 {
   height: 3rem;
 }
+
 .h-16 {
   height: 4rem;
 }
+
 .h-2 {
   height: 0.5rem;
 }
+
 .h-2\.5 {
   height: 0.625rem;
 }
+
 .h-20 {
   height: 5rem;
 }
+
 .h-24 {
   height: 6rem;
 }
+
 .h-3 {
   height: 0.75rem;
 }
+
 .h-3\.5 {
   height: 0.875rem;
 }
+
 .h-4 {
   height: 1rem;
 }
+
 .h-5 {
   height: 1.25rem;
 }
+
 .h-6 {
   height: 1.5rem;
 }
+
 .h-8 {
   height: 2rem;
 }
+
 .h-9 {
   height: 2.25rem;
 }
+
 .h-\[100svh\] {
   height: 100svh;
 }
+
 .h-\[600px\] {
   height: 600px;
 }
+
 .h-auto {
   height: auto;
 }
+
 .h-full {
   height: 100%;
 }
+
 .max-h-48 {
   max-height: 12rem;
 }
+
 .max-h-\[300px\] {
   max-height: 300px;
 }
+
 .min-h-0 {
   min-height: 0px;
 }
+
 .min-h-8 {
   min-height: 2rem;
 }
+
 .min-h-9 {
   min-height: 2.25rem;
 }
+
 .min-h-\[60px\] {
   min-height: 60px;
 }
+
 .w-10 {
   width: 2.5rem;
 }
+
 .w-12 {
   width: 3rem;
 }
+
 .w-2 {
   width: 0.5rem;
 }
+
 .w-2\.5 {
   width: 0.625rem;
 }
+
 .w-20 {
   width: 5rem;
 }
+
 .w-3 {
   width: 0.75rem;
 }
+
 .w-3\.5 {
   width: 0.875rem;
 }
+
 .w-4 {
   width: 1rem;
 }
+
 .w-5 {
   width: 1.25rem;
 }
+
 .w-6 {
   width: 1.5rem;
 }
+
 .w-8 {
   width: 2rem;
 }
+
 .w-9 {
   width: 2.25rem;
 }
+
 .w-96 {
   width: 24rem;
 }
+
 .w-full {
   width: 100%;
 }
+
 .w-screen {
   width: 100vw;
 }
+
 .min-w-0 {
   min-width: 0px;
 }
+
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
+
 .max-w-\[200px\] {
   max-width: 200px;
 }
+
 .max-w-\[60\%\] {
   max-width: 60%;
 }
+
 .max-w-full {
   max-width: 100%;
 }
+
 .max-w-md {
   max-width: 28rem;
 }
+
 .max-w-xs {
   max-width: 20rem;
 }
+
 .flex-1 {
   flex: 1 1 0%;
 }
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }
+
 .shrink-0 {
   flex-shrink: 0;
 }
+
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   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));
 }
+
 .-translate-y-1 {
   --tw-translate-y: -0.25rem;
   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));
 }
+
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  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));
+}
+
 .translate-x-1 {
   --tw-translate-x: 0.25rem;
   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));
 }
+
 .rotate-180 {
   --tw-rotate: 180deg;
   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-95 {
   --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));
 }
+
 .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));
 }
+
 @keyframes pulse {
 
   50% {
     opacity: .5;
   }
 }
+
 .animate-pulse {
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
+
 @keyframes spin {
 
   to {
     transform: rotate(360deg);
   }
 }
+
 .animate-spin {
   animation: spin 1s linear infinite;
 }
+
 .cursor-not-allowed {
   cursor: not-allowed;
 }
+
 .cursor-pointer {
   cursor: pointer;
 }
+
 .touch-none {
   touch-action: none;
 }
+
 .select-none {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
+
+.resize-none {
+  resize: none;
+}
+
 .resize {
   resize: both;
 }
+
 .scroll-mt-\[80px\] {
   scroll-margin-top: 80px;
 }
+
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
+
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
+
 .flex-row {
   flex-direction: row;
 }
+
 .flex-row-reverse {
   flex-direction: row-reverse;
 }
+
 .flex-col {
   flex-direction: column;
 }
+
 .flex-wrap {
   flex-wrap: wrap;
 }
+
 .place-content-center {
   place-content: center;
 }
+
 .items-start {
   align-items: flex-start;
 }
+
 .items-center {
   align-items: center;
 }
+
 .items-baseline {
   align-items: baseline;
 }
+
 .justify-start {
   justify-content: flex-start;
 }
+
 .justify-end {
   justify-content: flex-end;
 }
+
 .justify-center {
   justify-content: center;
 }
+
 .justify-between {
   justify-content: space-between;
 }
+
 .gap-0\.5 {
   gap: 0.125rem;
 }
+
 .gap-1 {
   gap: 0.25rem;
 }
+
 .gap-1\.5 {
   gap: 0.375rem;
 }
+
 .gap-2 {
   gap: 0.5rem;
 }
+
 .gap-3 {
   gap: 0.75rem;
 }
+
 .space-x-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
+
 .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.375rem * 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)));
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
-.space-y-6 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+
+.self-start {
+  align-self: flex-start;
 }
+
 .overflow-hidden {
   overflow: hidden;
 }
+
 .overflow-x-auto {
   overflow-x: auto;
 }
+
 .overflow-y-auto {
   overflow-y: auto;
 }
+
 .overflow-x-hidden {
   overflow-x: hidden;
 }
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 .whitespace-normal {
   white-space: normal;
 }
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
+
 .whitespace-pre-wrap {
   white-space: pre-wrap;
 }
+
 .text-wrap {
   text-wrap: wrap;
 }
+
 .break-words {
   overflow-wrap: break-word;
 }
+
 .rounded-2xl {
   border-radius: 1rem;
 }
+
 .rounded-3xl {
   border-radius: 1.5rem;
 }
+
 .rounded-\[inherit\] {
   border-radius: inherit;
 }
+
 .rounded-full {
   border-radius: 9999px;
 }
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
+
 .rounded-md {
   border-radius: 0.375rem;
 }
+
 .rounded-none {
   border-radius: 0px;
 }
+
 .rounded-sm {
   border-radius: 0.125rem;
 }
+
 .rounded-xl {
   border-radius: 0.75rem;
 }
+
 .rounded-t-xl {
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
 }
-.rounded-bl-none {
-  border-bottom-left-radius: 0px;
-}
-.rounded-br-none {
-  border-bottom-right-radius: 0px;
-}
+
 .border {
   border-width: 1px;
 }
+
 .border-0 {
   border-width: 0px;
 }
+
 .border-2 {
   border-width: 2px;
 }
+
 .border-b {
   border-bottom-width: 1px;
 }
+
 .border-b-2 {
   border-bottom-width: 2px;
 }
+
 .border-l {
   border-left-width: 1px;
 }
+
+.border-l-4 {
+  border-left-width: 4px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
-.border-\[\#FDD835\] {
+
+.border-\[\#F7B500\] {
   --tw-border-opacity: 1;
-  border-color: rgb(253 216 53 / var(--tw-border-opacity));
+  border-color: rgb(247 181 0 / var(--tw-border-opacity));
 }
+
 .border-\[\#FEE39B\] {
   --tw-border-opacity: 1;
   border-color: rgb(254 227 155 / var(--tw-border-opacity));
 }
+
 .border-\[var\(--color-primary\)\] {
   border-color: var(--color-primary);
 }
-.border-blue-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(191 219 254 / var(--tw-border-opacity));
+
+.border-\[var\(--white-300\)\] {
+  border-color: var(--white-300);
 }
-.border-gray-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+
+.border-border {
+  border-color: hsl(var(--border));
 }
-.border-gray-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+
+.border-border-medium {
+  border-color: hsl(var(--border-medium));
 }
-.border-gray-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+
+.border-border-subtle {
+  border-color: hsl(var(--border-subtle));
+}
+
+.border-border-subtle\/50 {
+  border-color: hsl(var(--border-subtle) / 0.5);
 }
+
 .border-input {
   border-color: hsl(var(--input));
 }
+
 .border-lavender-100 {
   --tw-border-opacity: 1;
   border-color: rgb(243 241 255 / var(--tw-border-opacity));
 }
+
 .border-lavender-200 {
   --tw-border-opacity: 1;
   border-color: rgb(232 228 255 / var(--tw-border-opacity));
 }
-.border-lavender-200\/40 {
-  border-color: rgb(232 228 255 / 0.4);
-}
-.border-lavender-200\/60 {
-  border-color: rgb(232 228 255 / 0.6);
-}
+
 .border-lavender-500 {
   --tw-border-opacity: 1;
   border-color: rgb(157 135 255 / var(--tw-border-opacity));
 }
+
 .border-lavender-600 {
   --tw-border-opacity: 1;
   border-color: rgb(124 95 245 / var(--tw-border-opacity));
 }
+
 .border-muted-foreground {
   border-color: hsl(var(--muted-foreground));
 }
+
 .border-neutral-300 {
   --tw-border-opacity: 1;
   border-color: rgb(212 212 212 / var(--tw-border-opacity));
 }
+
 .border-primary {
   border-color: hsl(var(--primary));
 }
+
+.border-primary\/20 {
+  border-color: hsl(var(--primary) / 0.2);
+}
+
+.border-primary\/40 {
+  border-color: hsl(var(--primary) / 0.4);
+}
+
 .border-slate-200 {
   --tw-border-opacity: 1;
   border-color: rgb(226 232 240 / var(--tw-border-opacity));
 }
-.border-white {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity));
-}
-.border-white\/20 {
-  border-color: rgb(255 255 255 / 0.2);
-}
-.border-white\/50 {
-  border-color: rgb(255 255 255 / 0.5);
+
+.border-l-\[var\(--accent-400\)\] {
+  border-left-color: var(--accent-400);
 }
+
 .border-l-transparent {
   border-left-color: transparent;
 }
+
 .border-t-transparent {
   border-top-color: transparent;
 }
-.bg-\[\#3B71F7\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 113 247 / var(--tw-bg-opacity));
-}
-.bg-\[\#F7B500\] {
+
+.bg-\[\#F7B500\] {
   --tw-bg-opacity: 1;
   background-color: rgb(247 181 0 / var(--tw-bg-opacity));
 }
-.bg-\[\#FDD835\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 216 53 / var(--tw-bg-opacity));
-}
+
 .bg-\[\#FFFBEB\] {
   --tw-bg-opacity: 1;
   background-color: rgb(255 251 235 / var(--tw-bg-opacity));
 }
+
+.bg-\[opposite\] {
+  background-color: opposite;
+}
+
+.bg-\[var\(--accent-400\)\] {
+  background-color: var(--accent-400);
+}
+
+.bg-\[var\(--base-900\)\] {
+  background-color: var(--base-900);
+}
+
 .bg-\[var\(--color-background-primary-subtle\)\] {
   background-color: var(--color-background-primary-subtle);
 }
+
 .bg-\[var\(--color-muted\)\] {
   background-color: var(--color-muted);
 }
+
+.bg-accent\/10 {
+  background-color: hsl(var(--accent) / var(--opacity-10));
+}
+
 .bg-accent\/50 {
   background-color: hsl(var(--accent) / 0.5);
 }
+
 .bg-amber-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(245 158 11 / var(--tw-bg-opacity));
 }
+
 .bg-background {
   background-color: hsl(var(--background));
 }
-.bg-blue-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+
+.bg-black-100 {
+  background-color: var(--black-100);
 }
+
 .bg-border {
   background-color: hsl(var(--border));
 }
+
+.bg-botMessage {
+  background-color: var(--bot-message-bg);
+}
+
 .bg-card {
   background-color: hsl(var(--card));
 }
+
 .bg-destructive {
   background-color: hsl(var(--destructive));
 }
-.bg-gray-100 {
+
+.bg-emerald-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  background-color: rgb(209 250 229 / var(--tw-bg-opacity));
 }
-.bg-gray-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+
+.bg-emerald-900\/80 {
+  background-color: rgb(6 78 59 / 0.8);
 }
-.bg-gray-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+
+.bg-foreground {
+  background-color: hsl(var(--foreground));
 }
+
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
+
 .bg-lavender-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 241 255 / var(--tw-bg-opacity));
 }
-.bg-lavender-100\/95 {
-  background-color: rgb(243 241 255 / 0.95);
-}
-.bg-lavender-200\/30 {
-  background-color: rgb(232 228 255 / 0.3);
-}
+
 .bg-lavender-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(250 249 255 / var(--tw-bg-opacity));
 }
+
 .bg-lavender-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(124 95 245 / var(--tw-bg-opacity));
 }
+
 .bg-muted {
   background-color: hsl(var(--muted));
 }
+
 .bg-popover {
   background-color: hsl(var(--popover));
 }
+
 .bg-primary {
   background-color: hsl(var(--primary));
 }
+
 .bg-purple-100\/50 {
   background-color: rgb(243 232 255 / 0.5);
 }
+
 .bg-red-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
+
 .bg-secondary {
   background-color: hsl(var(--secondary));
 }
-.bg-slate-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
-}
+
 .bg-slate-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
 }
-.bg-transparent {
-  background-color: transparent;
+
+.bg-surface {
+  background-color: hsl(var(--surface));
 }
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+
+.bg-surface-secondary {
+  background-color: hsl(var(--surface-secondary));
+}
+
+.bg-surface\/80 {
+  background-color: hsl(var(--surface) / 0.8);
+}
+
+.bg-surface\/90 {
+  background-color: hsl(var(--surface) / 0.9);
 }
-.bg-white\/70 {
-  background-color: rgb(255 255 255 / 0.7);
+
+.bg-text-tertiary {
+  background-color: hsl(var(--text-tertiary));
 }
-.bg-white\/80 {
-  background-color: rgb(255 255 255 / 0.8);
+
+.bg-transparent {
+  background-color: transparent;
 }
-.bg-white\/90 {
-  background-color: rgb(255 255 255 / 0.9);
+
+.bg-white-100 {
+  background-color: var(--white-100);
 }
+
 .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-lavender-400 {
-  --tw-gradient-from: #b8a9ff var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(184 169 255 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.from-lavender-500 {
-  --tw-gradient-from: #9d87ff var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(157 135 255 / 0) var(--tw-gradient-to-position);
+
+.from-primary {
+  --tw-gradient-from: hsl(var(--primary)) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+
 .from-red-400 {
   --tw-gradient-from: #f87171 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+
 .from-rose-400 {
   --tw-gradient-from: #fb7185 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(251 113 133 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.via-lavender-400 {
-  --tw-gradient-to: rgb(184 169 255 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), #b8a9ff var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-.via-lavender-500 {
-  --tw-gradient-to: rgb(157 135 255 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), #9d87ff var(--tw-gradient-via-position), var(--tw-gradient-to);
+
+.via-primary {
+  --tw-gradient-to: hsl(var(--primary) / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--primary)) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
+
 .to-indigo-500 {
   --tw-gradient-to: #6366f1 var(--tw-gradient-to-position);
 }
-.to-lavender-500 {
-  --tw-gradient-to: #9d87ff var(--tw-gradient-to-position);
+
+.to-primary {
+  --tw-gradient-to: hsl(var(--primary)) var(--tw-gradient-to-position);
 }
+
 .to-rose-500 {
   --tw-gradient-to: #f43f5e var(--tw-gradient-to-position);
 }
-.bg-clip-text {
-  -webkit-background-clip: text;
-          background-clip: text;
+
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
 }
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
 }
+
 .p-0 {
   padding: 0px;
 }
+
 .p-1 {
   padding: 0.25rem;
 }
+
+.p-1\.5 {
+  padding: 0.375rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
+
 .p-4 {
   padding: 1rem;
 }
+
+.p-5 {
+  padding: 1.25rem;
+}
+
 .p-6 {
   padding: 1.5rem;
 }
+
 .p-\[1px\] {
   padding: 1px;
 }
+
 .px-0\.5 {
   padding-left: 0.125rem;
   padding-right: 0.125rem;
 }
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
 }
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
+
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
 }
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+
 .py-2\.5 {
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
 }
+
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
+
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
+
 .pb-1\.5 {
   padding-bottom: 0.375rem;
 }
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
+
 .pb-3 {
   padding-bottom: 0.75rem;
 }
+
+.pr-11 {
+  padding-right: 2.75rem;
+}
+
 .pt-0 {
   padding-top: 0px;
 }
+
 .pt-1 {
   padding-top: 0.25rem;
 }
+
 .pt-3 {
   padding-top: 0.75rem;
 }
+
 .text-left {
   text-align: left;
 }
+
 .text-center {
   text-align: center;
 }
-.text-right {
-  text-align: right;
-}
+
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
+
 .text-\[10px\] {
   font-size: 10px;
 }
+
 .text-\[8px\] {
   font-size: 8px;
 }
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
 }
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
+
 .text-xl-minus {
   font-size: 1.1875rem;
   line-height: 1.75rem;
 }
+
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+
 .font-bold {
   font-weight: 700;
 }
+
 .font-medium {
   font-weight: 500;
 }
+
+.font-normal {
+  font-weight: 400;
+}
+
 .font-semibold {
   font-weight: 600;
 }
+
+.leading-4 {
+  line-height: 1rem;
+}
+
+.leading-\[14px\] {
+  line-height: 14px;
+}
+
 .leading-none {
   line-height: 1;
 }
+
 .leading-tight {
   line-height: 1.25;
 }
+
 .tracking-tight {
   letter-spacing: -0.025em;
 }
+
 .tracking-wide {
   letter-spacing: 0.025em;
 }
-.text-\[\#666666\] {
-  --tw-text-opacity: 1;
-  color: rgb(102 102 102 / var(--tw-text-opacity));
+
+.text-\[var\(--accent-1000\)\] {
+  color: var(--accent-1000);
 }
+
+.text-\[var\(--accent-300\)\] {
+  color: var(--accent-300);
+}
+
 .text-\[var\(--color-foreground\)\] {
   color: var(--color-foreground);
 }
+
 .text-\[var\(--color-muted-foreground\)\] {
   color: var(--color-muted-foreground);
 }
+
 .text-\[var\(--color-primary\)\] {
   color: var(--color-primary);
 }
+
+.text-\[var\(--white-1000\)\] {
+  color: var(--white-1000);
+}
+
+.text-\[var\(--white-600\)\] {
+  color: var(--white-600);
+}
+
+.text-\[var\(--white-900\)\] {
+  color: var(--white-900);
+}
+
 .text-amber-600 {
   --tw-text-opacity: 1;
   color: rgb(217 119 6 / var(--tw-text-opacity));
 }
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
+
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
+
 .text-card-foreground {
   color: hsl(var(--card-foreground));
 }
+
 .text-current {
   color: currentColor;
 }
+
 .text-destructive-foreground {
   color: hsl(var(--destructive-foreground));
 }
+
+.text-emerald-300 {
+  --tw-text-opacity: 1;
+  color: rgb(110 231 183 / var(--tw-text-opacity));
+}
+
+.text-emerald-800 {
+  --tw-text-opacity: 1;
+  color: rgb(6 95 70 / var(--tw-text-opacity));
+}
+
 .text-foreground {
   color: hsl(var(--foreground));
 }
+
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-.text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
-}
-.text-gray-700 {
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
+
 .text-green-600 {
   --tw-text-opacity: 1;
   color: rgb(22 163 74 / var(--tw-text-opacity));
 }
-.text-lavender-300 {
-  --tw-text-opacity: 1;
-  color: rgb(212 204 255 / var(--tw-text-opacity));
-}
-.text-lavender-400 {
-  --tw-text-opacity: 1;
-  color: rgb(184 169 255 / var(--tw-text-opacity));
-}
-.text-lavender-500 {
-  --tw-text-opacity: 1;
-  color: rgb(157 135 255 / var(--tw-text-opacity));
-}
+
 .text-lavender-600 {
   --tw-text-opacity: 1;
   color: rgb(124 95 245 / var(--tw-text-opacity));
 }
+
 .text-lavender-700 {
   --tw-text-opacity: 1;
   color: rgb(107 71 232 / var(--tw-text-opacity));
 }
+
 .text-muted-foreground {
   color: hsl(var(--muted-foreground));
 }
+
 .text-popover-foreground {
   color: hsl(var(--popover-foreground));
 }
+
 .text-primary {
   color: hsl(var(--primary));
 }
+
 .text-primary-foreground {
   color: hsl(var(--primary-foreground));
 }
+
+.text-primary\/50 {
+  color: hsl(var(--primary) / 0.5);
+}
+
 .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
+
 .text-red-600 {
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity));
 }
+
 .text-secondary-foreground {
   color: hsl(var(--secondary-foreground));
 }
+
 .text-slate-300 {
   --tw-text-opacity: 1;
   color: rgb(203 213 225 / var(--tw-text-opacity));
 }
-.text-slate-500 {
-  --tw-text-opacity: 1;
-  color: rgb(100 116 139 / var(--tw-text-opacity));
-}
+
 .text-slate-600 {
   --tw-text-opacity: 1;
   color: rgb(71 85 105 / var(--tw-text-opacity));
 }
-.text-slate-700 {
-  --tw-text-opacity: 1;
-  color: rgb(51 65 85 / var(--tw-text-opacity));
-}
-.text-slate-800 {
-  --tw-text-opacity: 1;
-  color: rgb(30 41 59 / var(--tw-text-opacity));
-}
+
 .text-slate-900 {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-.text-teal-600 {
-  --tw-text-opacity: 1;
-  color: rgb(13 148 136 / var(--tw-text-opacity));
+
+.text-text-primary {
+  color: hsl(var(--text-primary));
 }
-.text-transparent {
-  color: transparent;
+
+.text-text-secondary {
+  color: hsl(var(--text-secondary));
 }
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+
+.text-text-tertiary {
+  color: hsl(var(--text-tertiary));
 }
+
 .underline-offset-4 {
   text-underline-offset: 4px;
 }
+
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
 .opacity-0 {
-  opacity: 0;
+  opacity: var(--opacity-0);
 }
+
 .opacity-100 {
   opacity: 1;
 }
+
 .opacity-50 {
   opacity: 0.5;
 }
+
 .opacity-60 {
   opacity: 0.6;
 }
+
+.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);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .shadow-2xl {
   --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   --tw-shadow-colored: 0 25px 50px -12px 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_0_20px_rgba\(139\2c 92\2c 246\2c 0\.45\)\] {
   --tw-shadow: 0 0 20px rgba(139,92,246,0.45);
   --tw-shadow-colored: 0 0 20px 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);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -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-none {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), 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);
 }
+
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+
 .outline {
   outline-style: solid;
 }
+
+.ring {
+  --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(3px + 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-0 {
   --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);
 }
+
 .ring-1 {
   --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);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+
 .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-lavender-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(243 241 255 / var(--tw-ring-opacity));
-}
+
 .ring-lavender-200 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(232 228 255 / var(--tw-ring-opacity));
 }
-.ring-lavender-200\/40 {
-  --tw-ring-color: rgb(232 228 255 / 0.4);
+
+.ring-primary\/10 {
+  --tw-ring-color: hsl(var(--primary) / var(--opacity-10));
 }
-.ring-lavender-300\/40 {
-  --tw-ring-color: rgb(212 204 255 / 0.4);
+
+.ring-primary\/20 {
+  --tw-ring-color: hsl(var(--primary) / 0.2);
 }
-.ring-white\/60 {
-  --tw-ring-color: rgb(255 255 255 / 0.6);
+
+.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);
 }
+
 .grayscale {
   --tw-grayscale: grayscale(100%);
   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);
 }
+
 .backdrop-blur {
   --tw-backdrop-blur: blur(8px);
   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-2xl {
   --tw-backdrop-blur: blur(40px);
   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-md {
-  --tw-backdrop-blur: blur(12px);
-  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-sm {
   --tw-backdrop-blur: blur(4px);
   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(24px);
-  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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
 .transition-\[color\2c box-shadow\] {
   transition-property: color,box-shadow;
   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);
   transition-duration: 150ms;
 }
+
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
 .transition-opacity {
   transition-property: opacity;
   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-150 {
   transition-duration: 150ms;
 }
+
 .duration-200 {
   transition-duration: 200ms;
 }
+
 .duration-300 {
   transition-duration: 300ms;
 }
+
 .duration-500 {
   transition-duration: 500ms;
 }
+
 @keyframes enter {
 
   from {
@@ -1777,6 +2285,7 @@ video {
     transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
   }
 }
+
 @keyframes exit {
 
   to {
@@ -1784,6 +2293,7 @@ video {
     transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
   }
 }
+
 .animate-in {
   animation-name: enter;
   animation-duration: 150ms;
@@ -1793,29 +2303,37 @@ video {
   --tw-enter-translate-x: initial;
   --tw-enter-translate-y: initial;
 }
+
 .fade-in-0 {
-  --tw-enter-opacity: 0;
+  --tw-enter-opacity: var(--opacity-0);
 }
+
 .zoom-in-95 {
   --tw-enter-scale: .95;
 }
+
 .slide-in-from-top-2 {
   --tw-enter-translate-y: -0.5rem;
 }
+
 .duration-150 {
   animation-duration: 150ms;
 }
+
 .duration-200 {
   animation-duration: 200ms;
 }
+
 .duration-300 {
   animation-duration: 300ms;
 }
+
 .duration-500 {
   animation-duration: 500ms;
 }
 
 /* Custom markdown styling */
+
 .markdown-content {
   line-height: 1.4;
   color: inherit;
@@ -1836,9 +2354,11 @@ video {
 .markdown-content h1 {
   font-size: 1.5em;
 }
+
 .markdown-content h2 {
   font-size: 1.25em;
 }
+
 .markdown-content h3 {
   font-size: 1.125em;
 }
@@ -1865,6 +2385,7 @@ video {
 }
 
 /* Enhanced ordered list styling */
+
 .markdown-content ol {
   counter-reset: item;
   list-style: none;
@@ -1885,11 +2406,12 @@ video {
   left: 0;
   top: 0;
   font-weight: 600;
-  color: var(--color-primary, #3b82f6);
+  color: hsl(var(--primary));
   min-width: 1.5em;
 }
 
 /* Enhanced unordered list styling */
+
 .markdown-content ul > li {
   position: relative;
   padding-left: 1.5em;
@@ -1900,18 +2422,18 @@ video {
   position: absolute;
   left: 0;
   top: 0;
-  color: var(--color-primary, #3b82f6);
+  color: hsl(var(--primary));
   font-weight: bold;
   font-size: 1.2em;
 }
 
 .markdown-content blockquote {
-  border-left: 3px solid #e5e7eb;
+  border-left: 3px solid hsl(var(--border-subtle));
   padding: 0.5em 0 0.5em 1em;
   margin: 0.375em 0;
   font-style: normal;
-  color: #6b7280;
-  background-color: #f9fafb;
+  color: hsl(var(--text-secondary));
+  background-color: hsl(var(--surface-secondary));
   border-radius: 0.25rem;
 }
 
@@ -1924,7 +2446,7 @@ video {
 }
 
 .markdown-content code {
-  background-color: #f3f4f6;
+  background-color: hsl(var(--surface-secondary));
   padding: 0.125em 0.25em;
   border-radius: 0.25em;
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
@@ -1933,7 +2455,7 @@ video {
 }
 
 .markdown-content pre {
-  background-color: #f3f4f6;
+  background-color: hsl(var(--surface-secondary));
   padding: 1em;
   border-radius: 0.5em;
   overflow-x: auto;
@@ -1954,12 +2476,13 @@ video {
 }
 
 .markdown-content a {
-  color: #3b82f6;
+  color: hsl(var(--primary));
   text-decoration: underline;
 }
 
 .markdown-content a:hover {
-  color: #2563eb;
+  color: hsl(var(--primary));
+  opacity: 0.8;
 }
 
 .file\:border-0::file-selector-button {
@@ -1991,20 +2514,6 @@ video {
   color: hsl(var(--muted-foreground));
 }
 
-.focus-within\:border-lavender-100\/50:focus-within {
-  border-color: rgb(243 241 255 / 0.5);
-}
-
-.focus-within\:ring-2:focus-within {
-  --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);
-}
-
-.focus-within\:ring-lavender-400\/50:focus-within {
-  --tw-ring-color: rgb(184 169 255 / 0.5);
-}
-
 .hover\:scale-105:hover {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
@@ -2026,39 +2535,36 @@ video {
   border-color: rgb(107 71 232 / var(--tw-border-opacity));
 }
 
-.hover\:bg-\[\#2E5CD9\]:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(46 92 217 / var(--tw-bg-opacity));
+.hover\:border-primary\/30:hover {
+  border-color: hsl(var(--primary) / 0.3);
 }
 
-.hover\:bg-\[var\(--color-muted-foreground\)\]:hover {
-  background-color: var(--color-muted-foreground);
+.hover\:border-primary\/80:hover {
+  border-color: hsl(var(--primary) / 0.8);
 }
 
-.hover\:bg-accent:hover {
-  background-color: hsl(var(--accent));
+.hover\:border-primary\/90:hover {
+  border-color: hsl(var(--primary) / 0.9);
 }
 
-.hover\:bg-blue-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+.hover\:bg-\[var\(--accent-300\)\]:hover {
+  background-color: var(--accent-300);
 }
 
-.hover\:bg-destructive\/90:hover {
-  background-color: hsl(var(--destructive) / 0.9);
+.hover\:bg-\[var\(--color-muted-foreground\)\]:hover {
+  background-color: var(--color-muted-foreground);
 }
 
-.hover\:bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+.hover\:bg-\[var\(--white-100\)\]:hover {
+  background-color: var(--white-100);
 }
 
-.hover\:bg-lavender-100\/80:hover {
-  background-color: rgb(243 241 255 / 0.8);
+.hover\:bg-accent:hover {
+  background-color: hsl(var(--accent));
 }
 
-.hover\:bg-lavender-200\/40:hover {
-  background-color: rgb(232 228 255 / 0.4);
+.hover\:bg-destructive\/90:hover {
+  background-color: hsl(var(--destructive) / 0.9);
 }
 
 .hover\:bg-lavender-50:hover {
@@ -2071,6 +2577,10 @@ video {
   background-color: rgb(107 71 232 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-muted:hover {
+  background-color: hsl(var(--muted));
+}
+
 .hover\:bg-neutral-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
@@ -2081,31 +2591,32 @@ video {
   background-color: rgb(250 250 250 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-primary\/90:hover {
-  background-color: hsl(var(--primary) / 0.9);
+.hover\:bg-primary:hover {
+  background-color: hsl(var(--primary));
 }
 
-.hover\:bg-secondary\/80:hover {
-  background-color: hsl(var(--secondary) / 0.8);
+.hover\:bg-primary\/15:hover {
+  background-color: hsl(var(--primary) / 0.15);
 }
 
-.hover\:bg-white:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+.hover\:bg-primary\/90:hover {
+  background-color: hsl(var(--primary) / 0.9);
 }
 
-.hover\:bg-white\/60:hover {
-  background-color: rgb(255 255 255 / 0.6);
+.hover\:bg-secondary:hover {
+  background-color: hsl(var(--secondary));
+}
+
+.hover\:bg-secondary\/80:hover {
+  background-color: hsl(var(--secondary) / 0.8);
 }
 
-.hover\:bg-white\/95:hover {
-  background-color: rgb(255 255 255 / 0.95);
+.hover\:bg-surface:hover {
+  background-color: hsl(var(--surface));
 }
 
-.hover\:from-lavender-500:hover {
-  --tw-gradient-from: #9d87ff var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(157 135 255 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+.hover\:bg-surface\/95:hover {
+  background-color: hsl(var(--surface) / 0.95);
 }
 
 .hover\:from-red-500:hover {
@@ -2114,10 +2625,6 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.hover\:to-lavender-600:hover {
-  --tw-gradient-to: #7c5ff5 var(--tw-gradient-to-position);
-}
-
 .hover\:to-rose-600:hover {
   --tw-gradient-to: #e11d48 var(--tw-gradient-to-position);
 }
@@ -2130,19 +2637,17 @@ video {
   color: hsl(var(--accent-foreground));
 }
 
-.hover\:text-gray-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-
 .hover\:text-lavender-700:hover {
   --tw-text-opacity: 1;
   color: rgb(107 71 232 / var(--tw-text-opacity));
 }
 
-.hover\:text-slate-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(15 23 42 / var(--tw-text-opacity));
+.hover\:text-primary-foreground:hover {
+  color: hsl(var(--primary-foreground));
+}
+
+.hover\:text-primary\/90:hover {
+  color: hsl(var(--primary) / 0.9);
 }
 
 .hover\:underline:hover {
@@ -2230,10 +2735,6 @@ video {
   background-color: hsl(var(--accent) / 0.8);
 }
 
-.active\:bg-white\/80:active {
-  background-color: rgb(255 255 255 / 0.8);
-}
-
 .disabled\:pointer-events-none:disabled {
   pointer-events: none;
 }
@@ -2242,19 +2743,12 @@ video {
   cursor: not-allowed;
 }
 
-.disabled\:border-gray-200:disabled {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
-}
-
-.disabled\:bg-gray-100:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+.disabled\:bg-surface-secondary:disabled {
+  background-color: hsl(var(--surface-secondary));
 }
 
-.disabled\:text-gray-400:disabled {
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
+.disabled\:text-text-tertiary:disabled {
+  color: hsl(var(--text-tertiary));
 }
 
 .disabled\:opacity-50:disabled {
@@ -2269,9 +2763,8 @@ video {
   background-color: rgb(233 213 255 / 0.7);
 }
 
-.group:hover .group-hover\:text-lavender-600 {
-  --tw-text-opacity: 1;
-  color: rgb(124 95 245 / var(--tw-text-opacity));
+.group:hover .group-hover\:text-primary {
+  color: hsl(var(--primary));
 }
 
 .data-\[state\=checked\]\:bg-primary[data-state="checked"] {
@@ -2286,10 +2779,19 @@ video {
   color: hsl(var(--primary-foreground));
 }
 
+.dark\:bg-emerald-900\/40:is(.dark *) {
+  background-color: rgb(6 78 59 / 0.4);
+}
+
 .dark\:bg-input\/30:is(.dark *) {
   background-color: hsl(var(--input) / 0.3);
 }
 
+.dark\:text-emerald-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(110 231 183 / var(--tw-text-opacity));
+}
+
 .dark\:hover\:bg-input\/50:hover:is(.dark *) {
   background-color: hsl(var(--input) / 0.5);
 }
@@ -2302,6 +2804,22 @@ video {
   }
 }
 
+.\[\&\>\[data-radix-scroll-area-viewport\]\]\:flex>[data-radix-scroll-area-viewport] {
+  display: flex;
+}
+
+.\[\&\>\[data-radix-scroll-area-viewport\]\]\:min-h-full>[data-radix-scroll-area-viewport] {
+  min-height: 100%;
+}
+
+.\[\&\>\[data-radix-scroll-area-viewport\]\]\:flex-col>[data-radix-scroll-area-viewport] {
+  flex-direction: column;
+}
+
+.\[\&\>\[data-radix-scroll-area-viewport\]\]\:justify-end>[data-radix-scroll-area-viewport] {
+  justify-content: flex-end;
+}
+
 .\[\&_svg\:not\(\[class\*\=\"text-\"\]\)\]\:text-muted-foreground svg:not([class*="text-"]) {
   color: hsl(var(--muted-foreground));
 }