@retrivora-ai/rag-engine 1.9.6 → 1.9.8

package/dist/index.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -59,13 +60,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AmbientBackground: () => AmbientBackground,
+  ArchitectureCardsSection: () => ArchitectureCardsSection,
   AuthenticationException: () => AuthenticationException,
   ChatWidget: () => ChatWidget,
   ChatWindow: () => ChatWindow,
   ConfigProvider: () => ConfigProvider,
   ConfigurationException: () => ConfigurationException,
   DocumentUpload: () => DocumentUpload,
+  Documentation: () => Documentation,
   EmbeddingFailedException: () => EmbeddingFailedException,
+  Hero: () => Hero,
+  Lifecycle: () => Lifecycle,
   MessageBubble: () => MessageBubble,
   ObservabilityPanel: () => ObservabilityPanel,
   ProviderNotFoundException: () => ProviderNotFoundException,
@@ -78,7 +84,31 @@ __export(index_exports, {
   useRagChat: () => useRagChat
 });
 module.exports = __toCommonJS(index_exports);
-var import_index = require("./index.css");
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/index.css
+styleInject('/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root,\n  :host {\n    --font-sans:\n      ui-sans-serif,\n      system-ui,\n      sans-serif,\n      "Apple Color Emoji",\n      "Segoe UI Emoji",\n      "Segoe UI Symbol",\n      "Noto Color Emoji";\n    --font-mono:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      "Liberation Mono",\n      "Courier New",\n      monospace;\n    --color-red-50: oklch(97.1% 0.013 17.38);\n    --color-red-100: oklch(93.6% 0.032 17.717);\n    --color-red-200: oklch(88.5% 0.062 18.334);\n    --color-red-400: oklch(70.4% 0.191 22.216);\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-red-600: oklch(57.7% 0.245 27.325);\n    --color-amber-50: oklch(98.7% 0.022 95.277);\n    --color-amber-100: oklch(96.2% 0.059 95.617);\n    --color-amber-200: oklch(92.4% 0.12 95.746);\n    --color-amber-400: oklch(82.8% 0.189 84.429);\n    --color-amber-500: oklch(76.9% 0.188 70.08);\n    --color-amber-600: oklch(66.6% 0.179 58.318);\n    --color-emerald-50: oklch(97.9% 0.021 166.113);\n    --color-emerald-100: oklch(95% 0.052 163.051);\n    --color-emerald-200: oklch(90.5% 0.093 164.15);\n    --color-emerald-300: oklch(84.5% 0.143 164.978);\n    --color-emerald-400: oklch(76.5% 0.177 163.223);\n    --color-emerald-500: oklch(69.6% 0.17 162.48);\n    --color-emerald-600: oklch(59.6% 0.145 163.225);\n    --color-emerald-700: oklch(50.8% 0.118 165.612);\n    --color-blue-400: oklch(70.7% 0.165 254.624);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-indigo-50: oklch(96.2% 0.018 272.314);\n    --color-indigo-100: oklch(93% 0.034 272.788);\n    --color-indigo-200: oklch(87% 0.065 274.039);\n    --color-indigo-300: oklch(78.5% 0.115 274.713);\n    --color-indigo-400: oklch(67.3% 0.182 276.935);\n    --color-indigo-500: oklch(58.5% 0.233 277.117);\n    --color-indigo-600: oklch(51.1% 0.262 276.966);\n    --color-indigo-700: oklch(45.7% 0.24 277.023);\n    --color-violet-50: oklch(96.9% 0.016 293.756);\n    --color-violet-200: oklch(89.4% 0.057 293.283);\n    --color-violet-300: oklch(81.1% 0.111 293.571);\n    --color-violet-500: oklch(60.6% 0.25 292.717);\n    --color-violet-600: oklch(54.1% 0.281 293.009);\n    --color-violet-700: oklch(49.1% 0.27 292.581);\n    --color-rose-50: oklch(96.9% 0.015 12.422);\n    --color-rose-100: oklch(94.1% 0.03 12.58);\n    --color-rose-200: oklch(89.2% 0.058 10.001);\n    --color-rose-400: oklch(71.2% 0.194 13.428);\n    --color-rose-500: oklch(64.5% 0.246 16.439);\n    --color-rose-600: oklch(58.6% 0.253 17.585);\n    --color-slate-50: oklch(98.4% 0.003 247.858);\n    --color-slate-100: oklch(96.8% 0.007 247.896);\n    --color-slate-200: oklch(92.9% 0.013 255.508);\n    --color-slate-300: oklch(86.9% 0.022 252.894);\n    --color-slate-400: oklch(70.4% 0.04 256.788);\n    --color-slate-500: oklch(55.4% 0.046 257.417);\n    --color-slate-600: oklch(44.6% 0.043 257.281);\n    --color-slate-700: oklch(37.2% 0.044 257.287);\n    --color-slate-800: oklch(27.9% 0.041 260.031);\n    --color-slate-900: oklch(20.8% 0.042 265.755);\n    --color-slate-950: oklch(12.9% 0.042 264.695);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-xs: 20rem;\n    --container-md: 28rem;\n    --container-lg: 32rem;\n    --container-xl: 36rem;\n    --container-2xl: 42rem;\n    --container-5xl: 64rem;\n    --container-6xl: 72rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --text-3xl: 1.875rem;\n    --text-3xl--line-height: calc(2.25 / 1.875);\n    --text-4xl: 2.25rem;\n    --text-4xl--line-height: calc(2.5 / 2.25);\n    --text-5xl: 3rem;\n    --text-5xl--line-height: 1;\n    --text-6xl: 3.75rem;\n    --text-6xl--line-height: 1;\n    --text-7xl: 4.5rem;\n    --text-7xl--line-height: 1;\n    --text-8xl: 6rem;\n    --text-8xl--line-height: 1;\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --font-weight-extrabold: 800;\n    --font-weight-black: 900;\n    --tracking-tight: -0.025em;\n    --tracking-wider: 0.05em;\n    --tracking-widest: 0.1em;\n    --leading-tight: 1.25;\n    --leading-relaxed: 1.625;\n    --radius-sm: 0.25rem;\n    --radius-md: 0.375rem;\n    --radius-lg: 0.5rem;\n    --radius-xl: 0.75rem;\n    --radius-2xl: 1rem;\n    --radius-3xl: 1.5rem;\n    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --animate-spin: spin 1s linear infinite;\n    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    --animate-bounce: bounce 1s infinite;\n    --blur-sm: 8px;\n    --blur-md: 12px;\n    --blur-lg: 16px;\n    --blur-xl: 24px;\n    --blur-3xl: 64px;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *,\n  ::after,\n  ::before,\n  ::backdrop,\n  ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html,\n  :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b,\n  strong {\n    font-weight: bolder;\n  }\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub,\n  sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol,\n  ul,\n  menu {\n    list-style: none;\n  }\n  img,\n  svg,\n  video,\n  canvas,\n  audio,\n  iframe,\n  embed,\n  object {\n    display: block;\n    vertical-align: middle;\n  }\n  img,\n  video {\n    max-width: 100%;\n    height: auto;\n  }\n  button,\n  input,\n  select,\n  optgroup,\n  textarea,\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit,\n  ::-webkit-datetime-edit-year-field,\n  ::-webkit-datetime-edit-month-field,\n  ::-webkit-datetime-edit-day-field,\n  ::-webkit-datetime-edit-hour-field,\n  ::-webkit-datetime-edit-minute-field,\n  ::-webkit-datetime-edit-second-field,\n  ::-webkit-datetime-edit-millisecond-field,\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button,\n  input:where([type=button], [type=reset], [type=submit]),\n  ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=until-found])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-auto {\n    pointer-events: auto;\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .static {\n    position: static;\n  }\n  .sticky {\n    position: sticky;\n  }\n  .-inset-3 {\n    inset: calc(var(--spacing) * -3);\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .-top-8 {\n    top: calc(var(--spacing) * -8);\n  }\n  .-top-20 {\n    top: calc(var(--spacing) * -20);\n  }\n  .-top-24 {\n    top: calc(var(--spacing) * -24);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1 / 2 * 100%);\n  }\n  .top-2 {\n    top: calc(var(--spacing) * 2);\n  }\n  .top-4 {\n    top: calc(var(--spacing) * 4);\n  }\n  .-right-2 {\n    right: calc(var(--spacing) * -2);\n  }\n  .-right-4 {\n    right: calc(var(--spacing) * -4);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-2 {\n    right: calc(var(--spacing) * 2);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .right-5 {\n    right: calc(var(--spacing) * 5);\n  }\n  .right-6 {\n    right: calc(var(--spacing) * 6);\n  }\n  .-bottom-1\\.5 {\n    bottom: calc(var(--spacing) * -1.5);\n  }\n  .-bottom-3 {\n    bottom: calc(var(--spacing) * -3);\n  }\n  .-bottom-4 {\n    bottom: calc(var(--spacing) * -4);\n  }\n  .bottom-6 {\n    bottom: calc(var(--spacing) * 6);\n  }\n  .bottom-20 {\n    bottom: calc(var(--spacing) * 20);\n  }\n  .-left-4 {\n    left: calc(var(--spacing) * -4);\n  }\n  .-left-24 {\n    left: calc(var(--spacing) * -24);\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1 / 2 * 100%);\n  }\n  .left-2 {\n    left: calc(var(--spacing) * 2);\n  }\n  .left-5 {\n    left: calc(var(--spacing) * 5);\n  }\n  .left-6 {\n    left: calc(var(--spacing) * 6);\n  }\n  .z-0 {\n    z-index: 0;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .z-\\[100\\] {\n    z-index: 100;\n  }\n  .z-\\[9998\\] {\n    z-index: 9998;\n  }\n  .z-\\[9999\\] {\n    z-index: 9999;\n  }\n  .container {\n    width: 100%;\n    @media (width >= 40rem) {\n      max-width: 40rem;\n    }\n    @media (width >= 48rem) {\n      max-width: 48rem;\n    }\n    @media (width >= 64rem) {\n      max-width: 64rem;\n    }\n    @media (width >= 80rem) {\n      max-width: 80rem;\n    }\n    @media (width >= 96rem) {\n      max-width: 96rem;\n    }\n  }\n  .mx-1 {\n    margin-inline: calc(var(--spacing) * 1);\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .my-1\\.5 {\n    margin-block: calc(var(--spacing) * 1.5);\n  }\n  .my-2 {\n    margin-block: calc(var(--spacing) * 2);\n  }\n  .my-3 {\n    margin-block: calc(var(--spacing) * 3);\n  }\n  .my-4 {\n    margin-block: calc(var(--spacing) * 4);\n  }\n  .my-5 {\n    margin-block: calc(var(--spacing) * 5);\n  }\n  .my-6 {\n    margin-block: calc(var(--spacing) * 6);\n  }\n  .mt-0\\.5 {\n    margin-top: calc(var(--spacing) * 0.5);\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-1\\.5 {\n    margin-top: calc(var(--spacing) * 1.5);\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mt-3 {\n    margin-top: calc(var(--spacing) * 3);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-5 {\n    margin-top: calc(var(--spacing) * 5);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mt-8 {\n    margin-top: calc(var(--spacing) * 8);\n  }\n  .mt-10 {\n    margin-top: calc(var(--spacing) * 10);\n  }\n  .mt-14 {\n    margin-top: calc(var(--spacing) * 14);\n  }\n  .mt-auto {\n    margin-top: auto;\n  }\n  .mr-2 {\n    margin-right: calc(var(--spacing) * 2);\n  }\n  .mb-0\\.5 {\n    margin-bottom: calc(var(--spacing) * 0.5);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-1\\.5 {\n    margin-bottom: calc(var(--spacing) * 1.5);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-3 {\n    margin-bottom: calc(var(--spacing) * 3);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-5 {\n    margin-bottom: calc(var(--spacing) * 5);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .mb-12 {\n    margin-bottom: calc(var(--spacing) * 12);\n  }\n  .mb-14 {\n    margin-bottom: calc(var(--spacing) * 14);\n  }\n  .ml-1 {\n    margin-left: calc(var(--spacing) * 1);\n  }\n  .ml-1\\.5 {\n    margin-left: calc(var(--spacing) * 1.5);\n  }\n  .ml-2 {\n    margin-left: calc(var(--spacing) * 2);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .line-clamp-1 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n  }\n  .line-clamp-2 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n  }\n  .\\!table {\n    display: table !important;\n  }\n  .\\!table-cell {\n    display: table-cell !important;\n  }\n  .\\!table-header-group {\n    display: table-header-group !important;\n  }\n  .\\!table-row {\n    display: table-row !important;\n  }\n  .\\!table-row-group {\n    display: table-row-group !important;\n  }\n  .block {\n    display: block;\n  }\n  .contents {\n    display: contents;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .table {\n    display: table;\n  }\n  .aspect-\\[4\\/3\\] {\n    aspect-ratio: 4/3;\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .h-0\\.5 {\n    height: calc(var(--spacing) * 0.5);\n  }\n  .h-1 {\n    height: calc(var(--spacing) * 1);\n  }\n  .h-1\\.5 {\n    height: calc(var(--spacing) * 1.5);\n  }\n  .h-2 {\n    height: calc(var(--spacing) * 2);\n  }\n  .h-2\\.5 {\n    height: calc(var(--spacing) * 2.5);\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3);\n  }\n  .h-3\\.5 {\n    height: calc(var(--spacing) * 3.5);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-7 {\n    height: calc(var(--spacing) * 7);\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n  .h-9 {\n    height: calc(var(--spacing) * 9);\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n  .h-11 {\n    height: calc(var(--spacing) * 11);\n  }\n  .h-12 {\n    height: calc(var(--spacing) * 12);\n  }\n  .h-14 {\n    height: calc(var(--spacing) * 14);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-28 {\n    height: calc(var(--spacing) * 28);\n  }\n  .h-32 {\n    height: calc(var(--spacing) * 32);\n  }\n  .h-40 {\n    height: calc(var(--spacing) * 40);\n  }\n  .h-\\[400\\%\\] {\n    height: 400%;\n  }\n  .h-\\[480px\\] {\n    height: 480px;\n  }\n  .h-\\[500px\\] {\n    height: 500px;\n  }\n  .h-\\[600px\\] {\n    height: 600px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .max-h-24 {\n    max-height: calc(var(--spacing) * 24);\n  }\n  .max-h-32 {\n    max-height: calc(var(--spacing) * 32);\n  }\n  .max-h-40 {\n    max-height: calc(var(--spacing) * 40);\n  }\n  .max-h-56 {\n    max-height: calc(var(--spacing) * 56);\n  }\n  .max-h-60 {\n    max-height: calc(var(--spacing) * 60);\n  }\n  .max-h-64 {\n    max-height: calc(var(--spacing) * 64);\n  }\n  .max-h-\\[320px\\] {\n    max-height: 320px;\n  }\n  .max-h-\\[400px\\] {\n    max-height: 400px;\n  }\n  .max-h-\\[800px\\] {\n    max-height: 800px;\n  }\n  .min-h-0 {\n    min-height: calc(var(--spacing) * 0);\n  }\n  .min-h-\\[300px\\] {\n    min-height: 300px;\n  }\n  .min-h-\\[400px\\] {\n    min-height: 400px;\n  }\n  .min-h-\\[560px\\] {\n    min-height: 560px;\n  }\n  .min-h-screen {\n    min-height: 100vh;\n  }\n  .w-1\\.5 {\n    width: calc(var(--spacing) * 1.5);\n  }\n  .w-2 {\n    width: calc(var(--spacing) * 2);\n  }\n  .w-2\\.5 {\n    width: calc(var(--spacing) * 2.5);\n  }\n  .w-3 {\n    width: calc(var(--spacing) * 3);\n  }\n  .w-3\\.5 {\n    width: calc(var(--spacing) * 3.5);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n  .w-7 {\n    width: calc(var(--spacing) * 7);\n  }\n  .w-8 {\n    width: calc(var(--spacing) * 8);\n  }\n  .w-9 {\n    width: calc(var(--spacing) * 9);\n  }\n  .w-10 {\n    width: calc(var(--spacing) * 10);\n  }\n  .w-11 {\n    width: calc(var(--spacing) * 11);\n  }\n  .w-12 {\n    width: calc(var(--spacing) * 12);\n  }\n  .w-14 {\n    width: calc(var(--spacing) * 14);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-20 {\n    width: calc(var(--spacing) * 20);\n  }\n  .w-28 {\n    width: calc(var(--spacing) * 28);\n  }\n  .w-36 {\n    width: calc(var(--spacing) * 36);\n  }\n  .w-40 {\n    width: calc(var(--spacing) * 40);\n  }\n  .w-44 {\n    width: calc(var(--spacing) * 44);\n  }\n  .w-\\[400\\%\\] {\n    width: 400%;\n  }\n  .w-\\[500px\\] {\n    width: 500px;\n  }\n  .w-\\[600px\\] {\n    width: 600px;\n  }\n  .w-\\[min\\(88\\%\\,18rem\\)\\] {\n    width: min(88%, 18rem);\n  }\n  .w-fit {\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .w-px {\n    width: 1px;\n  }\n  .max-w-2xl {\n    max-width: var(--container-2xl);\n  }\n  .max-w-5xl {\n    max-width: var(--container-5xl);\n  }\n  .max-w-6xl {\n    max-width: var(--container-6xl);\n  }\n  .max-w-\\[90\\%\\] {\n    max-width: 90%;\n  }\n  .max-w-\\[92\\%\\] {\n    max-width: 92%;\n  }\n  .max-w-\\[94\\%\\] {\n    max-width: 94%;\n  }\n  .max-w-\\[calc\\(100vw-3rem\\)\\] {\n    max-width: calc(100vw - 3rem);\n  }\n  .max-w-full {\n    max-width: 100%;\n  }\n  .max-w-lg {\n    max-width: var(--container-lg);\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .max-w-none {\n    max-width: none;\n  }\n  .max-w-xl {\n    max-width: var(--container-xl);\n  }\n  .max-w-xs {\n    max-width: var(--container-xs);\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n  .min-w-\\[11rem\\] {\n    min-width: 11rem;\n  }\n  .min-w-\\[400px\\] {\n    min-width: 400px;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-shrink-0 {\n    flex-shrink: 0;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .flex-grow {\n    flex-grow: 1;\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1 {\n    --tw-translate-y: calc(var(--spacing) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-0 {\n    --tw-translate-y: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-4 {\n    --tw-translate-y: calc(var(--spacing) * 4);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .scale-90 {\n    --tw-scale-x: 90%;\n    --tw-scale-y: 90%;\n    --tw-scale-z: 90%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-95 {\n    --tw-scale-x: 95%;\n    --tw-scale-y: 95%;\n    --tw-scale-z: 95%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-100 {\n    --tw-scale-x: 100%;\n    --tw-scale-y: 100%;\n    --tw-scale-z: 100%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-110 {\n    --tw-scale-x: 110%;\n    --tw-scale-y: 110%;\n    --tw-scale-z: 110%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-\\[1\\.03\\] {\n    scale: 1.03;\n  }\n  .rotate-0 {\n    rotate: 0deg;\n  }\n  .rotate-45 {\n    rotate: 45deg;\n  }\n  .rotate-90 {\n    rotate: 90deg;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-\\[pulse_1\\.2s_infinite\\] {\n    animation: pulse 1.2s infinite;\n  }\n  .animate-bounce {\n    animation: var(--animate-bounce);\n  }\n  .animate-ping {\n    animation: var(--animate-ping);\n  }\n  .animate-pulse {\n    animation: var(--animate-pulse);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-not-allowed {\n    cursor: not-allowed;\n  }\n  .cursor-nw-resize {\n    cursor: nw-resize;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .resize-none {\n    resize: none;\n  }\n  .snap-x {\n    scroll-snap-type: x var(--tw-scroll-snap-strictness);\n  }\n  .snap-mandatory {\n    --tw-scroll-snap-strictness: mandatory;\n  }\n  .snap-start {\n    scroll-snap-align: start;\n  }\n  .scrollbar-thin {\n    scrollbar-width: thin;\n  }\n  .scrollbar-thumb-slate-200 {\n    --tw-scrollbar-thumb: var(--color-slate-200);\n    scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);\n  }\n  .scrollbar-track-transparent {\n    --tw-scrollbar-track: transparent;\n    scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-row-reverse {\n    flex-direction: row-reverse;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-end {\n    align-items: flex-end;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0\\.5 {\n    gap: calc(var(--spacing) * 0.5);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-2\\.5 {\n    gap: calc(var(--spacing) * 2.5);\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .gap-5 {\n    gap: calc(var(--spacing) * 5);\n  }\n  .gap-7 {\n    gap: calc(var(--spacing) * 7);\n  }\n  .gap-8 {\n    gap: calc(var(--spacing) * 8);\n  }\n  .gap-12 {\n    gap: calc(var(--spacing) * 12);\n  }\n  .space-y-0\\.5 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-1 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-1\\.5 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-3 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-5 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .divide-y {\n    :where(& > :not(:last-child)) {\n      --tw-divide-y-reverse: 0;\n      border-bottom-style: var(--tw-border-style);\n      border-top-style: var(--tw-border-style);\n      border-top-width: calc(1px * var(--tw-divide-y-reverse));\n      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n    }\n  }\n  .divide-slate-100 {\n    :where(& > :not(:last-child)) {\n      border-color: var(--color-slate-100);\n    }\n  }\n  .self-center {\n    align-self: center;\n  }\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .overflow-auto {\n    overflow: auto;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-auto {\n    overflow-x: auto;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-2xl {\n    border-radius: var(--radius-2xl);\n  }\n  .rounded-3xl {\n    border-radius: var(--radius-3xl);\n  }\n  .rounded-\\[2px\\] {\n    border-radius: 2px;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .rounded-none {\n    border-radius: 0;\n  }\n  .rounded-sm {\n    border-radius: var(--radius-sm);\n  }\n  .rounded-xl {\n    border-radius: var(--radius-xl);\n  }\n  .rounded-t-2xl {\n    border-top-left-radius: var(--radius-2xl);\n    border-top-right-radius: var(--radius-2xl);\n  }\n  .rounded-t-md {\n    border-top-left-radius: var(--radius-md);\n    border-top-right-radius: var(--radius-md);\n  }\n  .rounded-tl-\\[2px\\] {\n    border-top-left-radius: 2px;\n  }\n  .rounded-tl-sm {\n    border-top-left-radius: var(--radius-sm);\n  }\n  .rounded-tr-sm {\n    border-top-right-radius: var(--radius-sm);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-2 {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-r {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-l-2 {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 2px;\n  }\n  .border-dashed {\n    --tw-border-style: dashed;\n    border-style: dashed;\n  }\n  .border-amber-100 {\n    border-color: var(--color-amber-100);\n  }\n  .border-amber-200 {\n    border-color: var(--color-amber-200);\n  }\n  .border-emerald-100 {\n    border-color: var(--color-emerald-100);\n  }\n  .border-emerald-200 {\n    border-color: var(--color-emerald-200);\n  }\n  .border-emerald-500 {\n    border-color: var(--color-emerald-500);\n  }\n  .border-emerald-500\\/20 {\n    border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);\n    }\n  }\n  .border-indigo-100 {\n    border-color: var(--color-indigo-100);\n  }\n  .border-indigo-200 {\n    border-color: var(--color-indigo-200);\n  }\n  .border-indigo-500 {\n    border-color: var(--color-indigo-500);\n  }\n  .border-indigo-600 {\n    border-color: var(--color-indigo-600);\n  }\n  .border-red-100 {\n    border-color: var(--color-red-100);\n  }\n  .border-red-200 {\n    border-color: var(--color-red-200);\n  }\n  .border-rose-100 {\n    border-color: var(--color-rose-100);\n  }\n  .border-rose-200 {\n    border-color: var(--color-rose-200);\n  }\n  .border-slate-100 {\n    border-color: var(--color-slate-100);\n  }\n  .border-slate-200 {\n    border-color: var(--color-slate-200);\n  }\n  .border-slate-200\\/50 {\n    border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-slate-200) 50%, transparent);\n    }\n  }\n  .border-slate-200\\/60 {\n    border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 60%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-slate-200) 60%, transparent);\n    }\n  }\n  .border-slate-200\\/80 {\n    border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 80%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-slate-200) 80%, transparent);\n    }\n  }\n  .border-slate-300 {\n    border-color: var(--color-slate-300);\n  }\n  .border-slate-800 {\n    border-color: var(--color-slate-800);\n  }\n  .border-transparent {\n    border-color: transparent;\n  }\n  .border-violet-200 {\n    border-color: var(--color-violet-200);\n  }\n  .border-violet-600 {\n    border-color: var(--color-violet-600);\n  }\n  .border-white {\n    border-color: var(--color-white);\n  }\n  .border-white\\/5 {\n    border-color: color-mix(in srgb, #fff 5%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n    }\n  }\n  .border-white\\/8 {\n    border-color: color-mix(in srgb, #fff 8%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-white) 8%, transparent);\n    }\n  }\n  .border-t-transparent {\n    border-top-color: transparent;\n  }\n  .bg-\\[\\#0d0d1a\\] {\n    background-color: #0d0d1a;\n  }\n  .bg-\\[\\#080818\\] {\n    background-color: #080818;\n  }\n  .bg-amber-50 {\n    background-color: var(--color-amber-50);\n  }\n  .bg-amber-500 {\n    background-color: var(--color-amber-500);\n  }\n  .bg-amber-500\\/80 {\n    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 80%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-amber-500) 80%, transparent);\n    }\n  }\n  .bg-emerald-50 {\n    background-color: var(--color-emerald-50);\n  }\n  .bg-emerald-50\\/50 {\n    background-color: color-mix(in srgb, oklch(97.9% 0.021 166.113) 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-emerald-50) 50%, transparent);\n    }\n  }\n  .bg-emerald-100 {\n    background-color: var(--color-emerald-100);\n  }\n  .bg-emerald-500 {\n    background-color: var(--color-emerald-500);\n  }\n  .bg-emerald-500\\/10 {\n    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);\n    }\n  }\n  .bg-emerald-500\\/80 {\n    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 80%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-emerald-500) 80%, transparent);\n    }\n  }\n  .bg-indigo-50 {\n    background-color: var(--color-indigo-50);\n  }\n  .bg-indigo-500 {\n    background-color: var(--color-indigo-500);\n  }\n  .bg-indigo-600 {\n    background-color: var(--color-indigo-600);\n  }\n  .bg-red-50 {\n    background-color: var(--color-red-50);\n  }\n  .bg-red-500 {\n    background-color: var(--color-red-500);\n  }\n  .bg-rose-50 {\n    background-color: var(--color-rose-50);\n  }\n  .bg-rose-500 {\n    background-color: var(--color-rose-500);\n  }\n  .bg-rose-500\\/80 {\n    background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 80%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-rose-500) 80%, transparent);\n    }\n  }\n  .bg-slate-50 {\n    background-color: var(--color-slate-50);\n  }\n  .bg-slate-50\\/20 {\n    background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-slate-50) 20%, transparent);\n    }\n  }\n  .bg-slate-50\\/50 {\n    background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-slate-50) 50%, transparent);\n    }\n  }\n  .bg-slate-100 {\n    background-color: var(--color-slate-100);\n  }\n  .bg-slate-100\\/50 {\n    background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-slate-100) 50%, transparent);\n    }\n  }\n  .bg-slate-200 {\n    background-color: var(--color-slate-200);\n  }\n  .bg-slate-400 {\n    background-color: var(--color-slate-400);\n  }\n  .bg-slate-800 {\n    background-color: var(--color-slate-800);\n  }\n  .bg-slate-900 {\n    background-color: var(--color-slate-900);\n  }\n  .bg-slate-900\\/50 {\n    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-slate-900) 50%, transparent);\n    }\n  }\n  .bg-slate-900\\/90 {\n    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-slate-900) 90%, transparent);\n    }\n  }\n  .bg-slate-950 {\n    background-color: var(--color-slate-950);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-violet-50 {\n    background-color: var(--color-violet-50);\n  }\n  .bg-violet-600 {\n    background-color: var(--color-violet-600);\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .bg-white\\/20 {\n    background-color: color-mix(in srgb, #fff 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n    }\n  }\n  .bg-white\\/60 {\n    background-color: color-mix(in srgb, #fff 60%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 60%, transparent);\n    }\n  }\n  .bg-white\\/80 {\n    background-color: color-mix(in srgb, #fff 80%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);\n    }\n  }\n  .bg-white\\/90 {\n    background-color: color-mix(in srgb, #fff 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);\n    }\n  }\n  .bg-gradient-to-br {\n    --tw-gradient-position: to bottom right in oklab;\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .from-slate-100 {\n    --tw-gradient-from: var(--color-slate-100);\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .to-slate-200 {\n    --tw-gradient-to: var(--color-slate-200);\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .bg-clip-text {\n    background-clip: text;\n  }\n  .object-cover {\n    object-fit: cover;\n  }\n  .p-0\\.5 {\n    padding: calc(var(--spacing) * 0.5);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-1\\.5 {\n    padding: calc(var(--spacing) * 1.5);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-2\\.5 {\n    padding: calc(var(--spacing) * 2.5);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-5 {\n    padding: calc(var(--spacing) * 5);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .p-8 {\n    padding: calc(var(--spacing) * 8);\n  }\n  .p-10 {\n    padding: calc(var(--spacing) * 10);\n  }\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\n  }\n  .px-1\\.5 {\n    padding-inline: calc(var(--spacing) * 1.5);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-2\\.5 {\n    padding-inline: calc(var(--spacing) * 2.5);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-3\\.5 {\n    padding-inline: calc(var(--spacing) * 3.5);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-5 {\n    padding-inline: calc(var(--spacing) * 5);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .px-8 {\n    padding-inline: calc(var(--spacing) * 8);\n  }\n  .py-0\\.5 {\n    padding-block: calc(var(--spacing) * 0.5);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-2\\.5 {\n    padding-block: calc(var(--spacing) * 2.5);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-3\\.5 {\n    padding-block: calc(var(--spacing) * 3.5);\n  }\n  .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n  .py-5 {\n    padding-block: calc(var(--spacing) * 5);\n  }\n  .py-12 {\n    padding-block: calc(var(--spacing) * 12);\n  }\n  .pt-0\\.5 {\n    padding-top: calc(var(--spacing) * 0.5);\n  }\n  .pt-1 {\n    padding-top: calc(var(--spacing) * 1);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-5 {\n    padding-top: calc(var(--spacing) * 5);\n  }\n  .pr-1 {\n    padding-right: calc(var(--spacing) * 1);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pb-5 {\n    padding-bottom: calc(var(--spacing) * 5);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .align-middle {\n    vertical-align: middle;\n  }\n  .font-mono {\n    font-family: var(--font-mono);\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-3xl {\n    font-size: var(--text-3xl);\n    line-height: var(--tw-leading, var(--text-3xl--line-height));\n  }\n  .text-5xl {\n    font-size: var(--text-5xl);\n    line-height: var(--tw-leading, var(--text-5xl--line-height));\n  }\n  .text-8xl {\n    font-size: var(--text-8xl);\n    line-height: var(--tw-leading, var(--text-8xl--line-height));\n  }\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .text-\\[8px\\] {\n    font-size: 8px;\n  }\n  .text-\\[9px\\] {\n    font-size: 9px;\n  }\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .text-\\[11px\\] {\n    font-size: 11px;\n  }\n  .text-\\[12px\\] {\n    font-size: 12px;\n  }\n  .text-\\[13px\\] {\n    font-size: 13px;\n  }\n  .leading-\\[1\\.05\\] {\n    --tw-leading: 1.05;\n    line-height: 1.05;\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .leading-relaxed {\n    --tw-leading: var(--leading-relaxed);\n    line-height: var(--leading-relaxed);\n  }\n  .leading-tight {\n    --tw-leading: var(--leading-tight);\n    line-height: var(--leading-tight);\n  }\n  .font-black {\n    --tw-font-weight: var(--font-weight-black);\n    font-weight: var(--font-weight-black);\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-extrabold {\n    --tw-font-weight: var(--font-weight-extrabold);\n    font-weight: var(--font-weight-extrabold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .tracking-\\[0\\.3em\\] {\n    --tw-tracking: 0.3em;\n    letter-spacing: 0.3em;\n  }\n  .tracking-\\[0\\.15em\\] {\n    --tw-tracking: 0.15em;\n    letter-spacing: 0.15em;\n  }\n  .tracking-\\[0\\.22em\\] {\n    --tw-tracking: 0.22em;\n    letter-spacing: 0.22em;\n  }\n  .tracking-tight {\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n  .tracking-wider {\n    --tw-tracking: var(--tracking-wider);\n    letter-spacing: var(--tracking-wider);\n  }\n  .tracking-widest {\n    --tw-tracking: var(--tracking-widest);\n    letter-spacing: var(--tracking-widest);\n  }\n  .break-words {\n    overflow-wrap: break-word;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .whitespace-pre {\n    white-space: pre;\n  }\n  .whitespace-pre-line {\n    white-space: pre-line;\n  }\n  .whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n  .text-amber-400 {\n    color: var(--color-amber-400);\n  }\n  .text-amber-500 {\n    color: var(--color-amber-500);\n  }\n  .text-amber-600 {\n    color: var(--color-amber-600);\n  }\n  .text-emerald-400 {\n    color: var(--color-emerald-400);\n  }\n  .text-emerald-500 {\n    color: var(--color-emerald-500);\n  }\n  .text-emerald-500\\/70 {\n    color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 70%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-emerald-500) 70%, transparent);\n    }\n  }\n  .text-emerald-600 {\n    color: var(--color-emerald-600);\n  }\n  .text-emerald-700 {\n    color: var(--color-emerald-700);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-indigo-200\\/85 {\n    color: color-mix(in srgb, oklch(87% 0.065 274.039) 85%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-indigo-200) 85%, transparent);\n    }\n  }\n  .text-indigo-400 {\n    color: var(--color-indigo-400);\n  }\n  .text-indigo-500 {\n    color: var(--color-indigo-500);\n  }\n  .text-indigo-600 {\n    color: var(--color-indigo-600);\n  }\n  .text-indigo-700 {\n    color: var(--color-indigo-700);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-red-600 {\n    color: var(--color-red-600);\n  }\n  .text-rose-400 {\n    color: var(--color-rose-400);\n  }\n  .text-rose-500 {\n    color: var(--color-rose-500);\n  }\n  .text-rose-600 {\n    color: var(--color-rose-600);\n  }\n  .text-slate-100 {\n    color: var(--color-slate-100);\n  }\n  .text-slate-200 {\n    color: var(--color-slate-200);\n  }\n  .text-slate-300 {\n    color: var(--color-slate-300);\n  }\n  .text-slate-400 {\n    color: var(--color-slate-400);\n  }\n  .text-slate-500 {\n    color: var(--color-slate-500);\n  }\n  .text-slate-600 {\n    color: var(--color-slate-600);\n  }\n  .text-slate-700 {\n    color: var(--color-slate-700);\n  }\n  .text-slate-800 {\n    color: var(--color-slate-800);\n  }\n  .text-slate-900 {\n    color: var(--color-slate-900);\n  }\n  .text-transparent {\n    color: transparent;\n  }\n  .text-violet-500 {\n    color: var(--color-violet-500);\n  }\n  .text-violet-700 {\n    color: var(--color-violet-700);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .text-white\\/25 {\n    color: color-mix(in srgb, #fff 25%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-white) 25%, transparent);\n    }\n  }\n  .text-white\\/35 {\n    color: color-mix(in srgb, #fff 35%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-white) 35%, transparent);\n    }\n  }\n  .lowercase {\n    text-transform: lowercase;\n  }\n  .uppercase {\n    text-transform: uppercase;\n  }\n  .italic {\n    font-style: italic;\n  }\n  .tabular-nums {\n    --tw-numeric-spacing: tabular-nums;\n    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n  }\n  .antialiased {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .placeholder-slate-400 {\n    &::placeholder {\n      color: var(--color-slate-400);\n    }\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-20 {\n    opacity: 20%;\n  }\n  .opacity-25 {\n    opacity: 25%;\n  }\n  .opacity-30 {\n    opacity: 30%;\n  }\n  .opacity-35 {\n    opacity: 35%;\n  }\n  .opacity-40 {\n    opacity: 40%;\n  }\n  .opacity-70 {\n    opacity: 70%;\n  }\n  .opacity-80 {\n    opacity: 80%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .opacity-\\[0\\.05\\] {\n    opacity: 0.05;\n  }\n  .opacity-\\[0\\.025\\] {\n    opacity: 0.025;\n  }\n  .shadow-2xl {\n    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .shadow-md {\n    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .shadow-xl {\n    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .ring {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .ring-1 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .ring-2 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .shadow-rose-500\\/20 {\n    --tw-shadow-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-rose-500) 20%, transparent) var(--tw-shadow-alpha), transparent);\n    }\n  }\n  .shadow-slate-200\\/80 {\n    --tw-shadow-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 80%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-slate-200) 80%, transparent) var(--tw-shadow-alpha), transparent);\n    }\n  }\n  .ring-slate-200\\/80 {\n    --tw-ring-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 80%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-ring-color: color-mix(in oklab, var(--color-slate-200) 80%, transparent);\n    }\n  }\n  .ring-offset-1 {\n    --tw-ring-offset-width: 1px;\n    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  }\n  .ring-offset-transparent {\n    --tw-ring-offset-color: transparent;\n  }\n  .blur-3xl {\n    --tw-blur: blur(var(--blur-3xl));\n    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,);\n  }\n  .blur-lg {\n    --tw-blur: blur(var(--blur-lg));\n    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,);\n  }\n  .drop-shadow-2xl {\n    --tw-drop-shadow-size: drop-shadow(0 25px 25px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));\n    --tw-drop-shadow: drop-shadow(var(--drop-shadow-2xl));\n    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,);\n  }\n  .filter {\n    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,);\n  }\n  .backdrop-blur-md {\n    --tw-backdrop-blur: blur(var(--blur-md));\n    -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,);\n    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,);\n  }\n  .backdrop-blur-sm {\n    --tw-backdrop-blur: blur(var(--blur-sm));\n    -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,);\n    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,);\n  }\n  .backdrop-blur-xl {\n    --tw-backdrop-blur: blur(var(--blur-xl));\n    -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,);\n    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,);\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-colors {\n    transition-property:\n      color,\n      background-color,\n      border-color,\n      outline-color,\n      text-decoration-color,\n      fill,\n      stroke,\n      --tw-gradient-from,\n      --tw-gradient-via,\n      --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-shadow {\n    transition-property: box-shadow;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-transform {\n    transition-property:\n      transform,\n      translate,\n      scale,\n      rotate;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .duration-500 {\n    --tw-duration: 500ms;\n    transition-duration: 500ms;\n  }\n  .duration-700 {\n    --tw-duration: 700ms;\n    transition-duration: 700ms;\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .select-text {\n    -webkit-user-select: text;\n    user-select: text;\n  }\n  .\\[animation-delay\\:0ms\\] {\n    animation-delay: 0ms;\n  }\n  .\\[animation-delay\\:150ms\\] {\n    animation-delay: 150ms;\n  }\n  .\\[animation-delay\\:300ms\\] {\n    animation-delay: 300ms;\n  }\n  .group-hover\\:translate-x-1 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        --tw-translate-x: calc(var(--spacing) * 1);\n        translate: var(--tw-translate-x) var(--tw-translate-y);\n      }\n    }\n  }\n  .group-hover\\:translate-y-0 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        --tw-translate-y: calc(var(--spacing) * 0);\n        translate: var(--tw-translate-x) var(--tw-translate-y);\n      }\n    }\n  }\n  .group-hover\\:scale-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        --tw-scale-x: 100%;\n        --tw-scale-y: 100%;\n        --tw-scale-z: 100%;\n        scale: var(--tw-scale-x) var(--tw-scale-y);\n      }\n    }\n  }\n  .group-hover\\:scale-105 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        --tw-scale-x: 105%;\n        --tw-scale-y: 105%;\n        --tw-scale-z: 105%;\n        scale: var(--tw-scale-x) var(--tw-scale-y);\n      }\n    }\n  }\n  .group-hover\\:scale-110 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        --tw-scale-x: 110%;\n        --tw-scale-y: 110%;\n        --tw-scale-z: 110%;\n        scale: var(--tw-scale-x) var(--tw-scale-y);\n      }\n    }\n  }\n  .group-hover\\:animate-\\[gradientMove_3\\.5s_ease-in-out_infinite_alternate\\] {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        animation: gradientMove 3.5s ease-in-out infinite alternate;\n      }\n    }\n  }\n  .group-hover\\:animate-\\[shapeshift_5s_ease-in-out_infinite_forwards\\] {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        animation: shapeshift 5s ease-in-out infinite forwards;\n      }\n    }\n  }\n  .group-hover\\:rounded-none {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        border-radius: 0;\n      }\n    }\n  }\n  .group-hover\\:border-slate-500 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        border-color: var(--color-slate-500);\n      }\n    }\n  }\n  .group-hover\\:text-indigo-600 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        color: var(--color-indigo-600);\n      }\n    }\n  }\n  .group-hover\\:opacity-80 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 80%;\n      }\n    }\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .group-hover\\:opacity-\\[0\\.08\\] {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 0.08;\n      }\n    }\n  }\n  .focus-within\\:border-slate-300 {\n    &:focus-within {\n      border-color: var(--color-slate-300);\n    }\n  }\n  .hover\\:-translate-y-0\\.5 {\n    &:hover {\n      @media (hover: hover) {\n        --tw-translate-y: calc(var(--spacing) * -0.5);\n        translate: var(--tw-translate-x) var(--tw-translate-y);\n      }\n    }\n  }\n  .hover\\:-translate-y-1 {\n    &:hover {\n      @media (hover: hover) {\n        --tw-translate-y: calc(var(--spacing) * -1);\n        translate: var(--tw-translate-x) var(--tw-translate-y);\n      }\n    }\n  }\n  .hover\\:scale-105 {\n    &:hover {\n      @media (hover: hover) {\n        --tw-scale-x: 105%;\n        --tw-scale-y: 105%;\n        --tw-scale-z: 105%;\n        scale: var(--tw-scale-x) var(--tw-scale-y);\n      }\n    }\n  }\n  .hover\\:scale-110 {\n    &:hover {\n      @media (hover: hover) {\n        --tw-scale-x: 110%;\n        --tw-scale-y: 110%;\n        --tw-scale-z: 110%;\n        scale: var(--tw-scale-x) var(--tw-scale-y);\n      }\n    }\n  }\n  .hover\\:scale-\\[1\\.01\\] {\n    &:hover {\n      @media (hover: hover) {\n        scale: 1.01;\n      }\n    }\n  }\n  .hover\\:scale-\\[1\\.02\\] {\n    &:hover {\n      @media (hover: hover) {\n        scale: 1.02;\n      }\n    }\n  }\n  .hover\\:border-emerald-200 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-emerald-200);\n      }\n    }\n  }\n  .hover\\:border-indigo-200 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-indigo-200);\n      }\n    }\n  }\n  .hover\\:border-indigo-300 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-indigo-300);\n      }\n    }\n  }\n  .hover\\:border-rose-200 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-rose-200);\n      }\n    }\n  }\n  .hover\\:border-slate-300 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-slate-300);\n      }\n    }\n  }\n  .hover\\:border-slate-300\\/60 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 60%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          border-color: color-mix(in oklab, var(--color-slate-300) 60%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:border-slate-800 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-slate-800);\n      }\n    }\n  }\n  .hover\\:border-violet-300 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-violet-300);\n      }\n    }\n  }\n  .hover\\:bg-emerald-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-emerald-50);\n      }\n    }\n  }\n  .hover\\:bg-indigo-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-indigo-50);\n      }\n    }\n  }\n  .hover\\:bg-rose-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-rose-50);\n      }\n    }\n  }\n  .hover\\:bg-rose-600 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-rose-600);\n      }\n    }\n  }\n  .hover\\:bg-slate-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-slate-50);\n      }\n    }\n  }\n  .hover\\:bg-slate-50\\/60 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 60%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-slate-50) 60%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-slate-50\\/70 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 70%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-slate-50) 70%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-slate-100 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-slate-100);\n      }\n    }\n  }\n  .hover\\:bg-slate-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-slate-200);\n      }\n    }\n  }\n  .hover\\:bg-slate-800 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-slate-800);\n      }\n    }\n  }\n  .hover\\:bg-violet-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-violet-50);\n      }\n    }\n  }\n  .hover\\:bg-white {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-white);\n      }\n    }\n  }\n  .hover\\:bg-white\\/5 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #fff 5%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:text-\\[\\#CB3837\\] {\n    &:hover {\n      @media (hover: hover) {\n        color: #CB3837;\n      }\n    }\n  }\n  .hover\\:text-blue-500 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-blue-500);\n      }\n    }\n  }\n  .hover\\:text-emerald-400 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-emerald-400);\n      }\n    }\n  }\n  .hover\\:text-emerald-500 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-emerald-500);\n      }\n    }\n  }\n  .hover\\:text-indigo-300 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-indigo-300);\n      }\n    }\n  }\n  .hover\\:text-indigo-500 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-indigo-500);\n      }\n    }\n  }\n  .hover\\:text-indigo-600 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-indigo-600);\n      }\n    }\n  }\n  .hover\\:text-indigo-700 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-indigo-700);\n      }\n    }\n  }\n  .hover\\:text-rose-500 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-rose-500);\n      }\n    }\n  }\n  .hover\\:text-slate-600 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-slate-600);\n      }\n    }\n  }\n  .hover\\:text-slate-900 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-slate-900);\n      }\n    }\n  }\n  .hover\\:text-violet-700 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-violet-700);\n      }\n    }\n  }\n  .hover\\:text-white\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        color: color-mix(in srgb, #fff 80%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          color: color-mix(in oklab, var(--color-white) 80%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:opacity-90 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 90%;\n      }\n    }\n  }\n  .hover\\:shadow-lg {\n    &:hover {\n      @media (hover: hover) {\n        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n        box-shadow:\n          var(--tw-inset-shadow),\n          var(--tw-inset-ring-shadow),\n          var(--tw-ring-offset-shadow),\n          var(--tw-ring-shadow),\n          var(--tw-shadow);\n      }\n    }\n  }\n  .hover\\:shadow-md {\n    &:hover {\n      @media (hover: hover) {\n        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n        box-shadow:\n          var(--tw-inset-shadow),\n          var(--tw-inset-ring-shadow),\n          var(--tw-ring-offset-shadow),\n          var(--tw-ring-shadow),\n          var(--tw-shadow);\n      }\n    }\n  }\n  .hover\\:shadow-xl {\n    &:hover {\n      @media (hover: hover) {\n        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n        box-shadow:\n          var(--tw-inset-shadow),\n          var(--tw-inset-ring-shadow),\n          var(--tw-ring-offset-shadow),\n          var(--tw-ring-shadow),\n          var(--tw-shadow);\n      }\n    }\n  }\n  .hover\\:shadow-slate-200\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        --tw-shadow-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 80%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-slate-200) 80%, transparent) var(--tw-shadow-alpha), transparent);\n        }\n      }\n    }\n  }\n  .focus\\:border-emerald-500 {\n    &:focus {\n      border-color: var(--color-emerald-500);\n    }\n  }\n  .active\\:scale-95 {\n    &:active {\n      --tw-scale-x: 95%;\n      --tw-scale-y: 95%;\n      --tw-scale-z: 95%;\n      scale: var(--tw-scale-x) var(--tw-scale-y);\n    }\n  }\n  .active\\:scale-\\[0\\.98\\] {\n    &:active {\n      scale: 0.98;\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .disabled\\:opacity-30 {\n    &:disabled {\n      opacity: 30%;\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n  .disabled\\:hover\\:scale-100 {\n    &:disabled {\n      &:hover {\n        @media (hover: hover) {\n          --tw-scale-x: 100%;\n          --tw-scale-y: 100%;\n          --tw-scale-z: 100%;\n          scale: var(--tw-scale-x) var(--tw-scale-y);\n        }\n      }\n    }\n  }\n  .disabled\\:active\\:scale-100 {\n    &:disabled {\n      &:active {\n        --tw-scale-x: 100%;\n        --tw-scale-y: 100%;\n        --tw-scale-z: 100%;\n        scale: var(--tw-scale-x) var(--tw-scale-y);\n      }\n    }\n  }\n  .sm\\:grid-cols-2 {\n    @media (width >= 40rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .sm\\:grid-cols-3 {\n    @media (width >= 40rem) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n  .sm\\:flex-nowrap {\n    @media (width >= 40rem) {\n      flex-wrap: nowrap;\n    }\n  }\n  .md\\:text-4xl {\n    @media (width >= 48rem) {\n      font-size: var(--text-4xl);\n      line-height: var(--tw-leading, var(--text-4xl--line-height));\n    }\n  }\n  .md\\:text-6xl {\n    @media (width >= 48rem) {\n      font-size: var(--text-6xl);\n      line-height: var(--tw-leading, var(--text-6xl--line-height));\n    }\n  }\n  .md\\:text-xl {\n    @media (width >= 48rem) {\n      font-size: var(--text-xl);\n      line-height: var(--tw-leading, var(--text-xl--line-height));\n    }\n  }\n  .md\\:opacity-0 {\n    @media (width >= 48rem) {\n      opacity: 0%;\n    }\n  }\n  .md\\:group-hover\\/carousel\\:opacity-100 {\n    @media (width >= 48rem) {\n      &:is(:where(.group\\/carousel):hover *) {\n        @media (hover: hover) {\n          opacity: 100%;\n        }\n      }\n    }\n  }\n  .lg\\:sticky {\n    @media (width >= 64rem) {\n      position: sticky;\n    }\n  }\n  .lg\\:top-6 {\n    @media (width >= 64rem) {\n      top: calc(var(--spacing) * 6);\n    }\n  }\n  .lg\\:h-\\[calc\\(100vh-6rem\\)\\] {\n    @media (width >= 64rem) {\n      height: calc(100vh - 6rem);\n    }\n  }\n  .lg\\:min-h-\\[520px\\] {\n    @media (width >= 64rem) {\n      min-height: 520px;\n    }\n  }\n  .lg\\:grid-cols-2 {\n    @media (width >= 64rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .lg\\:grid-cols-4 {\n    @media (width >= 64rem) {\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n    }\n  }\n  .lg\\:grid-cols-\\[270px_1fr\\] {\n    @media (width >= 64rem) {\n      grid-template-columns: 270px 1fr;\n    }\n  }\n  .xl\\:gap-16 {\n    @media (width >= 80rem) {\n      gap: calc(var(--spacing) * 16);\n    }\n  }\n  .xl\\:text-7xl {\n    @media (width >= 80rem) {\n      font-size: var(--text-7xl);\n      line-height: var(--tw-leading, var(--text-7xl--line-height));\n    }\n  }\n  .dark\\:scrollbar-thumb-white\\/10 {\n    @media (prefers-color-scheme: dark) {\n      --tw-scrollbar-thumb: color-mix(in srgb, #fff 10%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-scrollbar-thumb: color-mix(in oklab, var(--color-white) 10%, transparent);\n      }\n      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);\n    }\n  }\n  .dark\\:divide-white\\/5 {\n    @media (prefers-color-scheme: dark) {\n      :where(& > :not(:last-child)) {\n        border-color: color-mix(in srgb, #fff 5%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          border-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n        }\n      }\n    }\n  }\n  .dark\\:border-amber-400\\/20 {\n    @media (prefers-color-scheme: dark) {\n      border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 20%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);\n      }\n    }\n  }\n  .dark\\:border-amber-500\\/20 {\n    @media (prefers-color-scheme: dark) {\n      border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);\n      }\n    }\n  }\n  .dark\\:border-emerald-400\\/20 {\n    @media (prefers-color-scheme: dark) {\n      border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 20%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);\n      }\n    }\n  }\n  .dark\\:border-emerald-500\\/20 {\n    @media (prefers-color-scheme: dark) {\n      border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);\n      }\n    }\n  }\n  .dark\\:border-emerald-500\\/25 {\n    @media (prefers-color-scheme: dark) {\n      border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(in oklab, var(--color-emerald-500) 25%, transparent);\n      }\n    }\n  }\n  .dark\\:border-indigo-500\\/20 {\n    @media (prefers-color-scheme: dark) {\n      border-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 20%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(in oklab, var(--color-indigo-500) 20%, transparent);\n      }\n    }\n  }\n  .dark\\:border-red-500\\/20 {\n    @media (prefers-color-scheme: dark) {\n      border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);\n      }\n    }\n  }\n  .dark\\:border-rose-400\\/20 {\n    @media (prefers-color-scheme: dark) {\n      border-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 20%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);\n      }\n    }\n  }\n  .dark\\:border-rose-500\\/20 {\n    @media (prefers-color-scheme: dark) {\n      border-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent);\n      }\n    }\n  }\n  .dark\\:border-rose-500\\/25 {\n    @media (prefers-color-scheme: dark) {\n      border-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(in oklab, var(--color-rose-500) 25%, transparent);\n      }\n    }\n  }\n  .dark\\:border-white\\/5 {\n    @media (prefers-color-scheme: dark) {\n      border-color: color-mix(in srgb, #fff 5%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n      }\n    }\n  }\n  .dark\\:border-white\\/8 {\n    @media (prefers-color-scheme: dark) {\n      border-color: color-mix(in srgb, #fff 8%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(in oklab, var(--color-white) 8%, transparent);\n      }\n    }\n  }\n  .dark\\:border-white\\/10 {\n    @media (prefers-color-scheme: dark) {\n      border-color: color-mix(in srgb, #fff 10%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n      }\n    }\n  }\n  .dark\\:border-white\\/20 {\n    @media (prefers-color-scheme: dark) {\n      border-color: color-mix(in srgb, #fff 20%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-\\[\\#0f0f1a\\] {\n    @media (prefers-color-scheme: dark) {\n      background-color: #0f0f1a;\n    }\n  }\n  .dark\\:bg-\\[\\#0f0f1a\\]\\/90 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in oklab, #0f0f1a 90%, transparent);\n    }\n  }\n  .dark\\:bg-\\[\\#080811\\] {\n    @media (prefers-color-scheme: dark) {\n      background-color: #080811;\n    }\n  }\n  .dark\\:bg-\\[\\#080811\\]\\/80 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in oklab, #080811 80%, transparent);\n    }\n  }\n  .dark\\:bg-amber-400\\/10 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 10%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-amber-500\\/10 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-black\\/30 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, #000 30%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 30%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-black\\/60 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, #000 60%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 60%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-emerald-400 {\n    @media (prefers-color-scheme: dark) {\n      background-color: var(--color-emerald-400);\n    }\n  }\n  .dark\\:bg-emerald-400\\/10 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 10%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-emerald-400) 10%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-emerald-500\\/5 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 5%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-emerald-500) 5%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-emerald-500\\/10 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-indigo-400 {\n    @media (prefers-color-scheme: dark) {\n      background-color: var(--color-indigo-400);\n    }\n  }\n  .dark\\:bg-indigo-500\\/10 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 10%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-indigo-500) 10%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-red-500\\/10 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-rose-400\\/10 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 10%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-rose-400) 10%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-rose-500\\/10 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 10%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-rose-500) 10%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-slate-700 {\n    @media (prefers-color-scheme: dark) {\n      background-color: var(--color-slate-700);\n    }\n  }\n  .dark\\:bg-slate-800 {\n    @media (prefers-color-scheme: dark) {\n      background-color: var(--color-slate-800);\n    }\n  }\n  .dark\\:bg-slate-900 {\n    @media (prefers-color-scheme: dark) {\n      background-color: var(--color-slate-900);\n    }\n  }\n  .dark\\:bg-slate-900\\/50 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-slate-900) 50%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-slate-900\\/60 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 60%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-slate-900) 60%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-slate-900\\/80 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 80%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-slate-900) 80%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-slate-950 {\n    @media (prefers-color-scheme: dark) {\n      background-color: var(--color-slate-950);\n    }\n  }\n  .dark\\:bg-transparent {\n    @media (prefers-color-scheme: dark) {\n      background-color: transparent;\n    }\n  }\n  .dark\\:bg-white\\/3 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, #fff 3%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-white) 3%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-white\\/5 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, #fff 5%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-white\\/8 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, #fff 8%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-white) 8%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-white\\/10 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, #fff 10%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-white\\/60 {\n    @media (prefers-color-scheme: dark) {\n      background-color: color-mix(in srgb, #fff 60%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-white) 60%, transparent);\n      }\n    }\n  }\n  .dark\\:from-white\\/10 {\n    @media (prefers-color-scheme: dark) {\n      --tw-gradient-from: color-mix(in srgb, #fff 10%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-gradient-from: color-mix(in oklab, var(--color-white) 10%, transparent);\n      }\n      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n    }\n  }\n  .dark\\:to-white\\/5 {\n    @media (prefers-color-scheme: dark) {\n      --tw-gradient-to: color-mix(in srgb, #fff 5%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-gradient-to: color-mix(in oklab, var(--color-white) 5%, transparent);\n      }\n      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n    }\n  }\n  .dark\\:text-amber-400 {\n    @media (prefers-color-scheme: dark) {\n      color: var(--color-amber-400);\n    }\n  }\n  .dark\\:text-emerald-300 {\n    @media (prefers-color-scheme: dark) {\n      color: var(--color-emerald-300);\n    }\n  }\n  .dark\\:text-emerald-400 {\n    @media (prefers-color-scheme: dark) {\n      color: var(--color-emerald-400);\n    }\n  }\n  .dark\\:text-emerald-500\\/50 {\n    @media (prefers-color-scheme: dark) {\n      color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 50%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, var(--color-emerald-500) 50%, transparent);\n      }\n    }\n  }\n  .dark\\:text-indigo-400 {\n    @media (prefers-color-scheme: dark) {\n      color: var(--color-indigo-400);\n    }\n  }\n  .dark\\:text-indigo-400\\/70 {\n    @media (prefers-color-scheme: dark) {\n      color: color-mix(in srgb, oklch(67.3% 0.182 276.935) 70%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, var(--color-indigo-400) 70%, transparent);\n      }\n    }\n  }\n  .dark\\:text-red-400 {\n    @media (prefers-color-scheme: dark) {\n      color: var(--color-red-400);\n    }\n  }\n  .dark\\:text-rose-400 {\n    @media (prefers-color-scheme: dark) {\n      color: var(--color-rose-400);\n    }\n  }\n  .dark\\:text-slate-300 {\n    @media (prefers-color-scheme: dark) {\n      color: var(--color-slate-300);\n    }\n  }\n  .dark\\:text-slate-400 {\n    @media (prefers-color-scheme: dark) {\n      color: var(--color-slate-400);\n    }\n  }\n  .dark\\:text-white {\n    @media (prefers-color-scheme: dark) {\n      color: var(--color-white);\n    }\n  }\n  .dark\\:text-white\\/20 {\n    @media (prefers-color-scheme: dark) {\n      color: color-mix(in srgb, #fff 20%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, var(--color-white) 20%, transparent);\n      }\n    }\n  }\n  .dark\\:text-white\\/30 {\n    @media (prefers-color-scheme: dark) {\n      color: color-mix(in srgb, #fff 30%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, var(--color-white) 30%, transparent);\n      }\n    }\n  }\n  .dark\\:text-white\\/40 {\n    @media (prefers-color-scheme: dark) {\n      color: color-mix(in srgb, #fff 40%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, var(--color-white) 40%, transparent);\n      }\n    }\n  }\n  .dark\\:text-white\\/50 {\n    @media (prefers-color-scheme: dark) {\n      color: color-mix(in srgb, #fff 50%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, var(--color-white) 50%, transparent);\n      }\n    }\n  }\n  .dark\\:text-white\\/60 {\n    @media (prefers-color-scheme: dark) {\n      color: color-mix(in srgb, #fff 60%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, var(--color-white) 60%, transparent);\n      }\n    }\n  }\n  .dark\\:text-white\\/70 {\n    @media (prefers-color-scheme: dark) {\n      color: color-mix(in srgb, #fff 70%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, var(--color-white) 70%, transparent);\n      }\n    }\n  }\n  .dark\\:text-white\\/75 {\n    @media (prefers-color-scheme: dark) {\n      color: color-mix(in srgb, #fff 75%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, var(--color-white) 75%, transparent);\n      }\n    }\n  }\n  .dark\\:text-white\\/80 {\n    @media (prefers-color-scheme: dark) {\n      color: color-mix(in srgb, #fff 80%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, var(--color-white) 80%, transparent);\n      }\n    }\n  }\n  .dark\\:text-white\\/90 {\n    @media (prefers-color-scheme: dark) {\n      color: color-mix(in srgb, #fff 90%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, var(--color-white) 90%, transparent);\n      }\n    }\n  }\n  .dark\\:placeholder-white\\/30 {\n    @media (prefers-color-scheme: dark) {\n      &::placeholder {\n        color: color-mix(in srgb, #fff 30%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          color: color-mix(in oklab, var(--color-white) 30%, transparent);\n        }\n      }\n    }\n  }\n  .dark\\:ring-white\\/10 {\n    @media (prefers-color-scheme: dark) {\n      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n      }\n    }\n  }\n  .dark\\:group-hover\\:border-white\\/50 {\n    @media (prefers-color-scheme: dark) {\n      &:is(:where(.group):hover *) {\n        @media (hover: hover) {\n          border-color: color-mix(in srgb, #fff 50%, transparent);\n          @supports (color: color-mix(in lab, red, red)) {\n            border-color: color-mix(in oklab, var(--color-white) 50%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .dark\\:focus-within\\:border-white\\/20 {\n    @media (prefers-color-scheme: dark) {\n      &:focus-within {\n        border-color: color-mix(in srgb, #fff 20%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          border-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:border-emerald-500\\/20 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);\n          @supports (color: color-mix(in lab, red, red)) {\n            border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:border-rose-500\\/20 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          border-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent);\n          @supports (color: color-mix(in lab, red, red)) {\n            border-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:border-white\\/15 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          border-color: color-mix(in srgb, #fff 15%, transparent);\n          @supports (color: color-mix(in lab, red, red)) {\n            border-color: color-mix(in oklab, var(--color-white) 15%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:border-white\\/20 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          border-color: color-mix(in srgb, #fff 20%, transparent);\n          @supports (color: color-mix(in lab, red, red)) {\n            border-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:bg-emerald-500\\/10 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);\n          @supports (color: color-mix(in lab, red, red)) {\n            background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:bg-rose-500\\/10 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 10%, transparent);\n          @supports (color: color-mix(in lab, red, red)) {\n            background-color: color-mix(in oklab, var(--color-rose-500) 10%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:bg-white\\/5 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          background-color: color-mix(in srgb, #fff 5%, transparent);\n          @supports (color: color-mix(in lab, red, red)) {\n            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:bg-white\\/10 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          background-color: color-mix(in srgb, #fff 10%, transparent);\n          @supports (color: color-mix(in lab, red, red)) {\n            background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:bg-white\\/20 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          background-color: color-mix(in srgb, #fff 20%, transparent);\n          @supports (color: color-mix(in lab, red, red)) {\n            background-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:text-\\[\\#CB3837\\] {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          color: #CB3837;\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:text-blue-400 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          color: var(--color-blue-400);\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:text-emerald-400 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          color: var(--color-emerald-400);\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:text-indigo-300 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          color: var(--color-indigo-300);\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:text-indigo-400 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          color: var(--color-indigo-400);\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:text-rose-400 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          color: var(--color-rose-400);\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:text-white\\/60 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          color: color-mix(in srgb, #fff 60%, transparent);\n          @supports (color: color-mix(in lab, red, red)) {\n            color: color-mix(in oklab, var(--color-white) 60%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:text-white\\/70 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          color: color-mix(in srgb, #fff 70%, transparent);\n          @supports (color: color-mix(in lab, red, red)) {\n            color: color-mix(in oklab, var(--color-white) 70%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:text-white\\/80 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          color: color-mix(in srgb, #fff 80%, transparent);\n          @supports (color: color-mix(in lab, red, red)) {\n            color: color-mix(in oklab, var(--color-white) 80%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:text-white\\/90 {\n    @media (prefers-color-scheme: dark) {\n      &:hover {\n        @media (hover: hover) {\n          color: color-mix(in srgb, #fff 90%, transparent);\n          @supports (color: color-mix(in lab, red, red)) {\n            color: color-mix(in oklab, var(--color-white) 90%, transparent);\n          }\n        }\n      }\n    }\n  }\n}\n@layer base {\n  :root {\n    --star: shape(evenodd from 50% 24.787%, curve by 7.143% 18.016% with 0% 0% / 2.9725% 13.814%, curve by 17.882% 7.197% with 4.171% 4.2025% / 17.882% 7.197%, curve by -17.882% 8.6765% with 0% 0% / -13.711% 4.474%, curve by -7.143% 16.5365% with -4.1705% 4.202% / -7.143% 16.5365%, curve by -8.6115% -16.5365% with 0% 0% / -4.441% -12.3345%, curve by -16.4135% -8.6765% with -4.171% -4.2025% / -16.4135% -8.6765%, curve by 16.4135% -7.197% with 0% 0% / 12.2425% -2.9945%, curve by 8.6115% -18.016% with 4.1705% -4.202% / 8.6115% -18.016%, close);\n    --flower: shape(evenodd from 17.9665% 82.0335%, curve by -12.349% -32.0335% with -13.239% -5.129% / -18.021% -15.402%, curve by -0.0275% -22.203% with -3.1825% -9.331% / -3.074% -16.6605%, curve by 12.3765% -9.8305% with 2.3835% -4.3365% / 6.565% -7.579%, curve by 32.0335% -12.349% with 5.129% -13.239% / 15.402% -18.021%, curve by 20.4535% -0.8665% with 8.3805% -2.858% / 15.1465% -3.062%, curve by 11.58% 13.2155% with 5.225% 2.161% / 9.0355% 6.6475%, curve by 12.349% 32.0335% with 13.239% 5.129% / 18.021% 15.402%, curve by 0.5715% 21.1275% with 2.9805% 8.7395% / 3.0745% 15.723%, curve by -12.9205% 10.906% with -2.26% 4.88% / -6.638% 8.472%, curve by -32.0335% 12.349% with -5.129% 13.239% / -15.402% 18.021%, curve by -21.1215% 0.5745% with -8.736% 2.9795% / -15.718% 3.0745%, curve by -10.912% -12.9235% with -4.883% -2.2595% / -8.477% -6.6385%, close);\n    --hexagon: shape(evenodd from 6.47% 67.001%, curve by 0% -34.002% with -1.1735% -7.7% / -1.1735% -26.302%, curve by 7.0415% -12.1965% with 0.7075% -4.641% / 3.3765% -9.2635%, curve by 29.447% -17.001% with 6.0815% -4.8665% / 22.192% -14.1675%, curve by 14.083% 0% with 4.3725% -1.708% / 9.7105% -1.708%, curve by 29.447% 17.001% with 7.255% 2.8335% / 23.3655% 12.1345%, curve by 7.0415% 12.1965% with 3.665% 2.933% / 6.334% 7.5555%, curve by 0% 34.002% with 1.1735% 7.7% / 1.1735% 26.302%, curve by -7.0415% 12.1965% with -0.7075% 4.641% / -3.3765% 9.2635%, curve by -29.447% 17.001% with -6.0815% 4.8665% / -22.192% 14.1675%, curve by -14.083% 0% with -4.3725% 1.708% / -9.7105% 1.708%, curve by -29.447% -17.001% with -7.255% -2.8335% / -23.3655% -12.1345%, curve by -7.0415% -12.1965% with -3.665% -2.933% / -6.334% -7.5555%, close);\n    --cylinder: shape(evenodd from 10.5845% 59.7305%, curve by 0% -19.461% with -0.113% -1.7525% / -0.11% -18.14%, curve by 10.098% -26.213% with 0.837% -10.0375% / 3.821% -19.2625%, curve by 29.3175% -13.0215% with 7.2175% -7.992% / 17.682% -13.0215%, curve by 19.5845% 5.185% with 7.1265% 0% / 13.8135% 1.887%, curve by 9.8595% 7.9775% with 3.7065% 2.1185% / 7.035% 4.8195%, curve by 9.9715% 26.072% with 6.2015% 6.933% / 9.4345% 16.082%, curve by 0% 19.461% with 0.074% 1.384% / 0.0745% 17.7715%, curve by -13.0065% 29.1155% with -0.511% 11.5345% / -5.021% 21.933%, curve by -26.409% 10.119% with -6.991% 6.288% / -16.254% 10.119%, curve by -20.945% -5.9995% with -7.6935% 0% / -14.8755% -2.199%, curve by -8.713% -7.404% with -3.255% -2.0385% / -6.1905% -4.537%, curve by -9.7575% -25.831% with -6.074% -6.9035% / -9.1205% -15.963%, close);\n    --circle: shape(evenodd from 13.482% 79.505%, curve by -7.1945% -12.47% with -1.4985% -1.8575% / -6.328% -10.225%, curve by 0.0985% -33.8965% with -4.1645% -10.7945% / -4.1685% -23.0235%, curve by 6.9955% -12.101% with 1.72% -4.3825% / 4.0845% -8.458%, curve by 30.125% -17.119% with 7.339% -9.1825% / 18.4775% -15.5135%, curve by 13.4165% 0.095% with 4.432% -0.6105% / 8.9505% -0.5855%, curve by 29.364% 16.9% with 11.6215% 1.77% / 22.102% 7.9015%, curve by 7.176% 12.4145% with 3.002% 3.7195% / 5.453% 7.968%, curve by -0.0475% 33.8925% with 4.168% 10.756% / 4.2305% 22.942%, curve by -7.1135% 12.2825% with -1.74% 4.4535% / -4.1455% 8.592%, curve by -29.404% 16.9075% with -7.202% 8.954% / -18.019% 15.137%, curve by -14.19% -0.018% with -4.6635% 0.7255% / -9.4575% 0.7205%, curve by -29.226% -16.8875% with -11.573% -1.8065% / -21.9955% -7.9235%, close);\n    --heart: shape(evenodd from 51.311% 83.603%, curve by -8.333% -20.508% with -14.104% -4.287% / -16.406% -16.185%, curve by -4.271% -37.41% with -5.419% -9.658% / -6.815% -22.733%, curve by 13.589% -33.586% with 3.982% -7.448% / 8.411% -15.994%, curve by 28.187% -21.985% with 4.029% -4.29% / 4.029% -4.29%, curve by 33.835% 0.721% with 9.618% 4.647% / 22.541% 9.618%, curve by 37.596% 21.304% with 3.306% 13.266% / 7.589% 24.251%, curve by 21.985% 43.613% with -4.208% 3.982% / -15.994% 8.411%, curve by 0.721% 37.596% with -7.448% 4.029% / -15.994% 8.411%, curve by -16.185% 28.187% with -9.658% 5.419% / -22.733% 6.815%, curve by -37.41% 4.271% with -4.29% 4.029% / -4.29% 4.029%, curve by -33.586% -13.589% with -7.448% 3.982% / -15.994% 8.411%, curve by -28.187% -32.094% with -4.029% 4.029% / -4.029% 4.029%, close);\n    --spiral: shape(evenodd from 13.347% 30.885%, curve by 5.502% 18.447% with 11.052% 5.562% / 19.995% 9.169%, curve by -20.309% 16.907% with -7.146% -1.332% / -9.016% -2.812%, curve by -25.848% -13.087% with -7.017% -7.46% / -9.941% -15.041%, curve by 10.154% -25.731% with 2.473% -6.063% / 7.163% -10.656%, curve by 31.473% -7.963% with 8.814% 2.403% / 13.84% 8.748%, curve by 16.526% 20.487% with -4.058% 1.502% / -9.51% 3.304%, curve by 5.502% 18.447% with 11.052% 5.562% / 19.995% 9.169%, close);\n    --sun: shape(evenodd from 12.758% 22.039%, curve by 2.2585% 27.561% with 4.517% 18.961% / 2.2585% 27.561%, curve by 3.187% -11.541% with 2.2585% -8.483% / 4.7615% -12.541%, curve by 31.034% 31.034% with 31.034% 31.034% / 31.034% 31.034%, curve by 33.825% -14.163% with 8.961% -7.455% / 13.585% -11.059%, curve by 19.814% -34.731% with 4.7615% -12.541% / 2.2585% -27.561%, curve by 33.825% -14.163% with 2.2585% -8.483% / 4.517% -18.961%, curve by 19.814% -34.731% with 0% 0% / -3.187% 11.541%, curve by 33.825% -14.163% with 8.961% -7.455% / 13.585% -11.059%, curve by 31.034% 31.034% with 31.034% 31.034% / 31.034% 31.034%, curve by 19.814% -34.731% with 4.7615% -12.541% / 2.2585% -27.561%, curve by 33.825% -14.163% with 2.2585% -8.483% / 4.517% -18.961%, close);\n    --star2: shape(open from 28.947% 47.744%, curve by 24.042% -2.139% with 0% 0% / -24.042% 2.139%, curve by 4.208% -25.165% with 4.208% -25.165% / 4.208% -25.165%, curve by 2.341% -18.447% with 0% 0% / 1.888% -1.438%, curve by 32.355% 1.085% with 0% 0% / 25.984% 1.085%, curve by -4.655% 25.165% with 0% 0% / -4.655% 25.165%, curve by -4.208% -25.165% with -4.208% -25.165% / -4.208% -25.165%, curve by 2.566% -4.208% with 0% 0% / 2.072% -1.639%, curve by 30.069% 1.085% with 0% 0% / 24.156% 1.085%, curve by -2.791% 25.165% with 0% 0% / -2.791% 25.165%, curve by -4.208% -25.165% with -4.208% -25.165% / -4.208% -25.165%, curve by 2.116% -4.208% with 0% 0% / 1.659% -1.557%, close);\n    --tri-star: shape(open from 25% 25%, curve by 25% 25% with 0% 0% / 25% 25%, close);\n  }\n}\n@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-rotate-x { syntax: "*"; inherits: false; }\n@property --tw-rotate-y { syntax: "*"; inherits: false; }\n@property --tw-rotate-z { syntax: "*"; inherits: false; }\n@property --tw-skew-x { syntax: "*"; inherits: false; }\n@property --tw-skew-y { syntax: "*"; inherits: false; }\n@property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; }\n@property --tw-scrollbar-thumb { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-scrollbar-track { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-gradient-position { syntax: "*"; inherits: false; }\n@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }\n@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }\n@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-leading { syntax: "*"; inherits: false; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-tracking { syntax: "*"; inherits: false; }\n@property --tw-ordinal { syntax: "*"; inherits: false; }\n@property --tw-slashed-zero { syntax: "*"; inherits: false; }\n@property --tw-numeric-figure { syntax: "*"; inherits: false; }\n@property --tw-numeric-spacing { syntax: "*"; inherits: false; }\n@property --tw-numeric-fraction { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@property --tw-backdrop-blur { syntax: "*"; inherits: false; }\n@property --tw-backdrop-brightness { syntax: "*"; inherits: false; }\n@property --tw-backdrop-contrast { syntax: "*"; inherits: false; }\n@property --tw-backdrop-grayscale { syntax: "*"; inherits: false; }\n@property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-backdrop-invert { syntax: "*"; inherits: false; }\n@property --tw-backdrop-opacity { syntax: "*"; inherits: false; }\n@property --tw-backdrop-saturate { syntax: "*"; inherits: false; }\n@property --tw-backdrop-sepia { syntax: "*"; inherits: false; }\n@property --tw-duration { syntax: "*"; inherits: false; }\n@property --tw-ease { syntax: "*"; inherits: false; }\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes bounce {\n  0%, 100% {\n    transform: translateY(-25%);\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  }\n  50% {\n    transform: none;\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n}\n@keyframes shapeshift {\n  0% {\n    clip-path: var(--circle);\n    rotate: 0turn;\n  }\n  25% {\n    clip-path: var(--flower);\n  }\n  50% {\n    clip-path: var(--cylinder);\n  }\n  75% {\n    clip-path: var(--hexagon);\n  }\n  100% {\n    clip-path: var(--circle);\n    rotate: 1turn;\n  }\n  120% {\n    clip-path: var(--flower);\n  }\n  140% {\n    clip-path: var(--cylinder);\n  }\n  160% {\n    clip-path: var(--hexagon);\n  }\n  180% {\n    clip-path: var(--circle);\n    rotate: 1turn;\n  }\n}\n@keyframes gradientMove {\n  0% {\n    translate: 0 0;\n  }\n  100% {\n    translate: -75% -75%;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *,\n    ::before,\n    ::after,\n    ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-scroll-snap-strictness: proximity;\n      --tw-scrollbar-thumb: #0000;\n      --tw-scrollbar-track: #0000;\n      --tw-space-y-reverse: 0;\n      --tw-divide-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-ordinal: initial;\n      --tw-slashed-zero: initial;\n      --tw-numeric-figure: initial;\n      --tw-numeric-spacing: initial;\n      --tw-numeric-fraction: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-backdrop-blur: initial;\n      --tw-backdrop-brightness: initial;\n      --tw-backdrop-contrast: initial;\n      --tw-backdrop-grayscale: initial;\n      --tw-backdrop-hue-rotate: initial;\n      --tw-backdrop-invert: initial;\n      --tw-backdrop-opacity: initial;\n      --tw-backdrop-saturate: initial;\n      --tw-backdrop-sepia: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n    }\n  }\n}\n');
 
 // src/components/ChatWidget.tsx
 var import_react13 = require("react");
@@ -1461,86 +1491,6 @@ function ObservabilityPanel({ trace, primaryColor = "#6366f1" }) {
   ] });
 }
 
-// src/components/HourglassLoader.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var HourglassLoader = ({
-  size = 16,
-  primaryColor = "#10b981",
-  glow = false
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 100 100",
-      preserveAspectRatio: "xMidYMid",
-      style: {
-        width: size,
-        height: size,
-        background: "transparent",
-        filter: glow ? `drop-shadow(0 0 4px ${primaryColor})` : "none"
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          "animateTransform",
-          {
-            attributeName: "transform",
-            type: "rotate",
-            calcMode: "spline",
-            values: "0 50 50; 0 50 50; 180 50 50",
-            keyTimes: "0; 0.8; 1",
-            keySplines: "0 0 1 1; 0.4 0 0.2 1",
-            dur: "2s",
-            repeatCount: "indefinite"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          "path",
-          {
-            d: "M 25 15 L 75 15 L 75 20 L 55 50 L 75 80 L 75 85 L 25 85 L 25 80 L 45 50 L 25 20 Z",
-            fill: "none",
-            stroke: primaryColor,
-            strokeWidth: "5",
-            strokeLinejoin: "round",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { fill: primaryColor, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          "animate",
-          {
-            attributeName: "d",
-            values: "M 30 20 L 70 20 L 50 50 L 50 50 Z; M 50 50 L 50 50 L 50 50 L 50 50 Z; M 50 50 L 50 50 L 50 50 L 50 50 Z",
-            keyTimes: "0; 0.8; 1",
-            dur: "2s",
-            repeatCount: "indefinite"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { fill: primaryColor, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          "animate",
-          {
-            attributeName: "d",
-            values: "M 30 80 L 70 80 L 70 80 L 30 80 Z; M 30 80 L 70 80 L 50 50 L 50 50 Z; M 30 80 L 70 80 L 50 50 L 50 50 Z",
-            keyTimes: "0; 0.8; 1",
-            dur: "2s",
-            repeatCount: "indefinite"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "50", y1: "50", x2: "50", y2: "80", stroke: primaryColor, strokeWidth: "3", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            values: "0; 1; 1; 0; 0",
-            keyTimes: "0; 0.1; 0.7; 0.8; 1",
-            dur: "2s",
-            repeatCount: "indefinite"
-          }
-        ) })
-      ] })
-    }
-  );
-};
-var HourglassLoader_default = HourglassLoader;
-
 // src/utils/synonyms.ts
 var FIELD_SYNONYMS = {
   name: ["product", "item", "title", "label", "heading", "subject", "product name", "item name"],
@@ -1913,7 +1863,7 @@ var import_react8 = __toESM(require("react"));
 
 // src/components/UIDispatcher.tsx
 var import_react7 = __toESM(require("react"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function normalizeTabularRows(rows, columns) {
   if (!Array.isArray(rows)) return [];
   const SYNONYMS = {
@@ -2027,13 +1977,13 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
     }
   }, [rawContent, isStreaming]);
   if ("loading" in result) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "my-4 p-8 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex flex-col items-center justify-center gap-3 animate-pulse", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-5 h-5 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-slate-500 font-medium italic", children: "Preparing view..." })
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "my-4 p-8 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex flex-col items-center justify-center gap-3 animate-pulse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "w-5 h-5 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-slate-500 font-medium italic", children: "Preparing view..." })
     ] });
   }
   if ("error" in result) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("pre", { className: "p-4 my-2 bg-slate-900 text-slate-100 rounded-lg text-[10px] overflow-auto max-h-40", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { children: rawContent }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("pre", { className: "p-4 my-2 bg-slate-900 text-slate-100 rounded-lg text-[10px] overflow-auto max-h-40", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { children: rawContent }) });
   }
   const { config } = result;
   const isCompact = viewportSize === "compact";
@@ -2041,10 +1991,10 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
   const hasDescription = typeof config.description === "string" && config.description.trim().length > 0;
   switch (config.view) {
     case "chart":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `${isCompact ? "my-4 p-3" : "my-6 p-4"} bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden`, children: [
-        config.title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h4", { className: `${isCompact ? "text-[11px] mb-3" : "text-xs mb-4"} font-semibold text-slate-500 px-2`, children: config.title }),
-        hasDescription && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: `px-2 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60`, children: config.description }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${isCompact ? "my-4 p-3" : "my-6 p-4"} bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden`, children: [
+        config.title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h4", { className: `${isCompact ? "text-[11px] mb-3" : "text-xs mb-4"} font-semibold text-slate-500 px-2`, children: config.title }),
+        hasDescription && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: `px-2 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60`, children: config.description }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           DynamicChart,
           {
             config: {
@@ -2060,7 +2010,7 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
             isStreaming
           }
         ),
-        hasInsights && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-4 flex flex-wrap gap-2 px-2", children: (_a = config.insights) == null ? void 0 : _a.map((insight, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        hasInsights && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-4 flex flex-wrap gap-2 px-2", children: (_a = config.insights) == null ? void 0 : _a.map((insight, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "span",
           {
             className: `rounded-full border border-emerald-200 bg-emerald-50 ${isCompact ? "px-2.5 py-1 text-[10px]" : "px-3 py-1 text-[11px]"} font-medium text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300`,
@@ -2070,10 +2020,10 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
         )) })
       ] });
     case "carousel":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "my-4", children: [
-        config.title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h4", { className: `${isCompact ? "mb-1.5 text-[11px]" : "mb-2 text-xs"} font-semibold text-slate-500`, children: config.title }),
-        hasDescription && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60`, children: config.description }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ProductCarousel, { products: config.data.map((item) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "my-4", children: [
+        config.title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h4", { className: `${isCompact ? "mb-1.5 text-[11px]" : "mb-2 text-xs"} font-semibold text-slate-500`, children: config.title }),
+        hasDescription && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60`, children: config.description }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ProductCarousel, { products: config.data.map((item) => {
           var _a2;
           return __spreadProps(__spreadValues({}, item), {
             image: (_a2 = item.image) != null ? _a2 : typeof resolveImage === "function" ? resolveImage(item) : void 0
@@ -2081,10 +2031,10 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
         }), primaryColor, onAddToCart })
       ] });
     case "table":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `${isCompact ? "my-3 p-3 max-h-[320px]" : "my-4 p-4 max-h-[400px]"} bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-auto`, children: [
-        config.title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h4", { className: `${isCompact ? "text-[11px]" : "text-xs"} font-semibold text-slate-500 mb-2`, children: config.title }),
-        hasDescription && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60`, children: config.description }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${isCompact ? "my-3 p-3 max-h-[320px]" : "my-4 p-4 max-h-[400px]"} bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-auto`, children: [
+        config.title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h4", { className: `${isCompact ? "text-[11px]" : "text-xs"} font-semibold text-slate-500 mb-2`, children: config.title }),
+        hasDescription && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60`, children: config.description }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           VisualizationRenderer,
           {
             data: {
@@ -2107,7 +2057,7 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
 }
 
 // src/components/MarkdownComponents.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function createMarkdownComponents({
   primaryColor,
   accentColor,
@@ -2122,12 +2072,12 @@ function createMarkdownComponents({
     table: (_a) => {
       var props = __objRest(_a, []);
       if (isStreaming) {
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "my-5 p-6 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex items-center justify-center gap-3 select-none", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs text-slate-500 font-medium italic animate-pulse", children: "Generating data table..." })
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "my-5 p-6 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex items-center justify-center gap-3 select-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-slate-500 font-medium italic animate-pulse", children: "Generating data table..." })
         ] });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "not-prose overflow-hidden my-5 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm bg-white dark:bg-slate-900/50", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "not-prose overflow-hidden my-5 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm bg-white dark:bg-slate-900/50", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "table",
         __spreadValues({
           className: "!table w-full text-left border-collapse min-w-[400px] text-sm"
@@ -2136,7 +2086,7 @@ function createMarkdownComponents({
     },
     thead: (_b) => {
       var props = __objRest(_b, []);
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "thead",
         __spreadValues({
           className: "!table-header-group bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10"
@@ -2145,11 +2095,11 @@ function createMarkdownComponents({
     },
     tbody: (_c) => {
       var props = __objRest(_c, []);
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", __spreadValues({ className: "!table-row-group divide-y divide-slate-100 dark:divide-white/5" }, props));
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tbody", __spreadValues({ className: "!table-row-group divide-y divide-slate-100 dark:divide-white/5" }, props));
     },
     tr: (_d) => {
       var props = __objRest(_d, []);
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "tr",
         __spreadValues({
           className: "!table-row hover:bg-slate-50/70 dark:hover:bg-white/5 transition-colors"
@@ -2158,7 +2108,7 @@ function createMarkdownComponents({
     },
     th: (_e) => {
       var _f = _e, { children } = _f, props = __objRest(_f, ["children"]);
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "th",
         __spreadProps(__spreadValues({
           className: "!table-cell px-4 py-3 font-bold text-slate-700 dark:text-white/90 whitespace-nowrap text-[11px] uppercase tracking-wider text-left"
@@ -2169,7 +2119,7 @@ function createMarkdownComponents({
     },
     td: (_g) => {
       var _h = _g, { children } = _h, props = __objRest(_h, ["children"]);
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "td",
         __spreadProps(__spreadValues({
           className: "!table-cell px-4 py-3 text-slate-600 dark:text-white/70 whitespace-nowrap text-sm"
@@ -2192,7 +2142,7 @@ function createMarkdownComponents({
       const lang = (_a = /language-(\w+)/.exec(className != null ? className : "")) == null ? void 0 : _a[1];
       if (!inline && (lang === "ui" || lang === "chart" || lang === "json")) {
         const content = String(children != null ? children : "").trim();
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           UIDispatcher,
           {
             rawContent: content,
@@ -2207,7 +2157,7 @@ function createMarkdownComponents({
       if (!inline) {
         const content = String(children != null ? children : "").trim();
         if (content.startsWith("{") && content.endsWith("}")) {
-          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             UIDispatcher,
             {
               rawContent: content,
@@ -2219,10 +2169,47 @@ function createMarkdownComponents({
             }
           );
         }
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CodeBlock, { language: lang, children: content });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("code", __spreadProps(__spreadValues({ className }, props), { children: typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children) }));
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", __spreadProps(__spreadValues({ className: "px-1.5 py-0.5 rounded bg-slate-100 dark:bg-white/10 text-rose-600 dark:text-rose-400 font-mono text-[11px]" }, props), { children: typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children) }));
+    }
+  };
+}
+function CodeBlock({ children, language }) {
+  const [copied, setCopied] = import_react8.default.useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(children);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (e) {
+      console.warn("Failed to copy code", e);
     }
   };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "not-prose my-4 rounded-xl border border-slate-200 dark:border-white/10 overflow-hidden bg-slate-900 text-slate-100 shadow-lg select-text", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between px-4 py-2 bg-slate-950 border-b border-slate-800 text-xs font-semibold text-slate-400 select-none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-mono lowercase", children: language || "code" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "button",
+        {
+          onClick: handleCopy,
+          className: "flex items-center gap-1.5 px-2 py-1 rounded hover:bg-slate-800 hover:text-slate-250 transition-colors cursor-pointer text-slate-400 border border-transparent hover:border-slate-800",
+          type: "button",
+          children: copied ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", className: "text-emerald-500", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("polyline", { points: "20 6 9 17 4 12" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-emerald-500", children: "Copied!" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Copy" })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "p-4 overflow-x-auto font-mono text-[11px] leading-relaxed text-slate-200 bg-slate-900/90 whitespace-pre", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { children }) })
+  ] });
 }
 function normaliseChild(children) {
   if (typeof children === "object" && children !== null && !Array.isArray(children) && !import_react8.default.isValidElement(children)) {
@@ -2234,7 +2221,7 @@ function normaliseChild(children) {
 // src/components/ThinkingBlock.tsx
 var import_react9 = require("react");
 var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function ThinkingBlock({ thinking, thinkingMs, isStreaming = false }) {
   const [isExpanded, setIsExpanded] = (0, import_react9.useState)(true);
   const containerRef = (0, import_react9.useRef)(null);
@@ -2251,22 +2238,22 @@ function ThinkingBlock({ thinking, thinkingMs, isStreaming = false }) {
     }
   }, [thinking, isStreaming, isExpanded]);
   const durationSec = thinkingMs ? (thinkingMs / 1e3).toFixed(1) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-full max-w-2xl my-1.5 border border-slate-200 dark:border-white/10 rounded-xl bg-slate-50/50 dark:bg-white/5 overflow-hidden transition-all duration-200", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "w-full max-w-2xl my-1.5 border border-slate-200 dark:border-white/10 rounded-xl bg-slate-50/50 dark:bg-white/5 overflow-hidden transition-all duration-200", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "button",
       {
         onClick: () => setIsExpanded(!isExpanded),
         className: "w-full px-4 py-2.5 flex items-center justify-between text-xs font-medium text-slate-500 dark:text-white/40 hover:bg-slate-100 dark:hover:bg-white/10 transition-colors cursor-pointer select-none",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
-            isStreaming ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.Loader2, { className: "w-3.5 h-3.5 animate-spin text-slate-400 dark:text-white/30" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.Brain, { className: "w-3.5 h-3.5 text-slate-400 dark:text-white/40" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: isStreaming ? "Thinking..." : durationSec ? `Thought for ${durationSec}s` : "Thinking process" })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2", children: [
+            isStreaming ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react6.Loader2, { className: "w-3.5 h-3.5 animate-spin text-slate-400 dark:text-white/30" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react6.Brain, { className: "w-3.5 h-3.5 text-slate-400 dark:text-white/40" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: isStreaming ? "Thinking..." : durationSec ? `Thought for ${durationSec}s` : "Thinking process" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.ChevronDown, { className: "w-3.5 h-3.5 text-slate-400 dark:text-white/30" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.ChevronRight, { className: "w-3.5 h-3.5 text-slate-400 dark:text-white/30" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react6.ChevronDown, { className: "w-3.5 h-3.5 text-slate-400 dark:text-white/30" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react6.ChevronRight, { className: "w-3.5 h-3.5 text-slate-400 dark:text-white/30" }) })
         ]
       }
     ),
-    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "div",
       {
         ref: containerRef,
@@ -2278,7 +2265,7 @@ function ThinkingBlock({ thinking, thinkingMs, isStreaming = false }) {
 }
 
 // src/components/MessageBubble.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function normalizePlusSeparatedLists(raw) {
   return raw.split("\n").map((line) => {
     const productListLine = /[—:]\s*\d+\s+\+\s+[A-Za-z]/.test(line) || /\b(products?|categories?|in stock|out of stock)\b/i.test(line);
@@ -2287,7 +2274,62 @@ function normalizePlusSeparatedLists(raw) {
   }).join("\n");
 }
 function stripLeakedAnswerWrappers2(raw) {
-  return raw.replace(/<prose\s+answer(?:\s+in\s+[^>]*)?>\s*([\s\S]*?)\s*<\/prose>/gi, "$1").replace(/<\/?prose(?:\s+answer)?[^>]*>/gi, "").replace(/\n{3,}/g, "\n\n").trim();
+  return raw.replace(/<prose\s+answer(?:\s+in\s+[^>]*)?>[\s\S]*?<\/prose>/gi, "$1").replace(/<\/?prose(?:\s+answer)?[^>]*>/gi, "").replace(/\n{3,}/g, "\n\n").trim();
+}
+function formatTime(isoString) {
+  if (!isoString) return "";
+  try {
+    const d = new Date(isoString);
+    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  } catch (e) {
+    return "";
+  }
+}
+function FeedbackBar({ messageId, onFeedback, primaryColor }) {
+  const [rating, setRating] = import_react10.default.useState(null);
+  const [submitting, setSubmitting] = import_react10.default.useState(false);
+  const handleRate = async (r) => {
+    if (rating !== null || submitting) return;
+    setSubmitting(true);
+    setRating(r);
+    try {
+      await onFeedback(messageId, r);
+    } catch (e) {
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const isLocked = rating !== null;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "h-3 w-px bg-slate-200 dark:bg-white/10 mx-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "button",
+      {
+        onClick: () => handleRate("thumbs_up"),
+        disabled: isLocked,
+        title: rating === "thumbs_up" ? "You liked this" : "Good response",
+        className: `group relative flex items-center justify-center w-6 h-6 rounded-lg transition-all duration-200 cursor-pointer border ${rating === "thumbs_up" ? "bg-emerald-50 dark:bg-emerald-500/10 border-emerald-200 dark:border-emerald-500/25 text-emerald-600 dark:text-emerald-400 scale-110" : rating === "thumbs_down" ? "opacity-30 border-transparent text-slate-300 dark:text-white/20 cursor-not-allowed" : "border-transparent text-slate-300 dark:text-white/20 hover:text-emerald-500 dark:hover:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-emerald-500/10 hover:border-emerald-200 dark:hover:border-emerald-500/20 hover:scale-110"}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.ThumbsUp, { className: "w-3 h-3" }),
+          !isLocked && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 text-[10px] font-medium bg-slate-800 dark:bg-slate-700 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap shadow-lg z-10", children: "Good response" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "button",
+      {
+        onClick: () => handleRate("thumbs_down"),
+        disabled: isLocked,
+        title: rating === "thumbs_down" ? "You disliked this" : "Bad response",
+        className: `group relative flex items-center justify-center w-6 h-6 rounded-lg transition-all duration-200 cursor-pointer border ${rating === "thumbs_down" ? "bg-rose-50 dark:bg-rose-500/10 border-rose-200 dark:border-rose-500/25 text-rose-600 dark:text-rose-400 scale-110" : rating === "thumbs_up" ? "opacity-30 border-transparent text-slate-300 dark:text-white/20 cursor-not-allowed" : "border-transparent text-slate-300 dark:text-white/20 hover:text-rose-500 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-500/10 hover:border-rose-200 dark:hover:border-rose-500/20 hover:scale-110"}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.ThumbsDown, { className: "w-3 h-3" }),
+          !isLocked && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 text-[10px] font-medium bg-slate-800 dark:bg-slate-700 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap shadow-lg z-10", children: "Bad response" })
+        ]
+      }
+    ),
+    isLocked && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `ml-1 text-[10px] font-semibold px-2 py-0.5 rounded-full border transition-all duration-300 ${rating === "thumbs_up" ? "text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10 border-emerald-200 dark:border-emerald-500/20" : "text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-500/10 border-rose-200 dark:border-rose-500/20"}`, children: rating === "thumbs_up" ? "Helpful" : "Not helpful" })
+  ] });
 }
 function MessageBubble({
   message,
@@ -2296,7 +2338,8 @@ function MessageBubble({
   primaryColor = "#6366f1",
   accentColor = "#8b5cf6",
   onAddToCart,
-  viewportSize = "large"
+  viewportSize = "large",
+  onFeedback
 }) {
   var _a;
   const isUser = message.role === "user";
@@ -2324,7 +2367,7 @@ function MessageBubble({
       if (type && !["text", "table"].includes(type)) return true;
     }
     if (structuredContent.payload) {
-      return /"?(?:view|type|chartType)"?\s*:\s*"?(?:chart|carousel|pie|bar|line|product_carousel)"?/i.test(structuredContent.payload);
+      return /\"?(?:view|type|chartType)\"?\s*:\s*\"?(?:chart|carousel|pie|bar|line|product_carousel)\"?/i.test(structuredContent.payload);
     }
     return false;
   }, [message.uiTransformation, structuredContent.payload]);
@@ -2390,17 +2433,19 @@ ${match.trim()}
     () => createMarkdownComponents({ primaryColor, accentColor, isStreaming, onAddToCart, viewportSize }),
     [primaryColor, accentColor, isStreaming, onAddToCart, viewportSize]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `flex ${isCompact ? "gap-2" : "gap-3"} ${isUser ? "flex-row-reverse" : "flex-row"} items-start`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const timeLabel = formatTime(message.createdAt);
+  const isCompleted = !isStreaming && message.content;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex ${isCompact ? "gap-2" : "gap-3"} ${isUser ? "flex-row-reverse" : "flex-row"} items-start`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
-        className: `flex-shrink-0 ${isCompact ? "w-7 h-7" : "w-8 h-8"} rounded-full flex items-center justify-center shadow-lg ${isUser ? "text-white" : "bg-slate-100 dark:bg-white/10 text-slate-700 dark:text-white/80"}`,
+        className: `flex-shrink-0 ${isCompact ? "w-7 h-7" : "w-8 h-8"} rounded-full flex items-center justify-center shadow-md transition-all duration-300 ${isUser ? "text-white" : "bg-gradient-to-br from-slate-100 to-slate-200 dark:from-white/10 dark:to-white/5 text-slate-600 dark:text-white/70 ring-1 ring-slate-200/80 dark:ring-white/10"} ${isStreaming && !isUser ? "ring-2 ring-offset-1 ring-offset-transparent animate-pulse" : ""}`,
         style: isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {},
-        children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.User, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"} text-white` }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Bot, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"}` })
+        children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.User, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"} text-white` }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Bot, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"}` })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `flex flex-col gap-1 min-w-0 ${isCompact ? "max-w-[94%]" : isMedium ? "max-w-[92%]" : "max-w-[90%]"} ${isUser ? "items-end" : "items-start"}`, children: [
-      !isUser && message.thinking && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex flex-col gap-1 min-w-0 ${isCompact ? "max-w-[94%]" : isMedium ? "max-w-[92%]" : "max-w-[90%]"} ${isUser ? "items-end" : "items-start"}`, children: [
+      !isUser && message.thinking && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         ThinkingBlock,
         {
           thinking: message.thinking,
@@ -2408,27 +2453,27 @@ ${match.trim()}
           isStreaming: isStreaming && !message.content
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         "div",
         {
-          className: `relative group ${isCompact ? "px-3 py-2.5 text-[13px]" : "px-4 py-3 text-sm"} rounded-2xl leading-relaxed shadow-sm dark:shadow-lg ${isUser ? "text-white rounded-tr-sm" : "bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-800 dark:text-white/90 rounded-tl-sm"}`,
+          className: `relative group ${isCompact ? "px-3 py-2.5 text-[13px]" : "px-4 py-3 text-sm"} rounded-2xl leading-relaxed transition-shadow duration-200 ${isUser ? "text-white rounded-tr-sm shadow-md hover:shadow-lg" : "bg-white dark:bg-white/5 border border-slate-200/80 dark:border-white/10 text-slate-800 dark:text-white/90 rounded-tl-sm shadow-sm hover:shadow-md hover:border-slate-300/60 dark:hover:border-white/15"}`,
           style: isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {},
           children: [
-            !isUser && !isStreaming && message.content && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            !isUser && isCompleted && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "button",
               {
                 onClick: handleCopy,
-                className: `absolute top-2 right-2 p-1.5 rounded-lg border transition-all duration-200 cursor-pointer ${copied ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-500 dark:text-emerald-400" : "bg-slate-500/5 hover:bg-slate-500/10 border-slate-200 dark:border-white/10 text-slate-400 dark:text-white/30 hover:text-slate-600 dark:hover:text-white/60"} opacity-0 group-hover:opacity-100 backdrop-blur-sm shadow-sm scale-95 group-hover:scale-100`,
+                className: `absolute top-2 right-2 p-1.5 rounded-lg border transition-all duration-200 cursor-pointer ${copied ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-500 dark:text-emerald-400" : "bg-white/60 dark:bg-white/5 hover:bg-white dark:hover:bg-white/10 border-slate-200/60 dark:border-white/10 text-slate-300 dark:text-white/20 hover:text-slate-600 dark:hover:text-white/60 hover:border-slate-300 dark:hover:border-white/20"} opacity-0 group-hover:opacity-100 backdrop-blur-sm shadow-sm scale-95 group-hover:scale-100`,
                 title: copied ? "Copied!" : "Copy response",
-                children: copied ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Check, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Copy, { className: "w-3.5 h-3.5" })
+                children: copied ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Check, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Copy, { className: "w-3.5 h-3.5" })
               }
             ),
-            isStreaming && !message.content ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-1 py-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:0ms]" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:150ms]" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:300ms]" })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `prose ${isCompact ? "prose-xs" : "prose-sm"} max-w-none break-words ${isUser ? "prose-invert" : "dark:prose-invert"}`, children: [
-              !isUser && structuredContent.payload && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            isStreaming && !message.content ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex items-center gap-1 py-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:0ms]" }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:150ms]" }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:300ms]" })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `prose ${isCompact ? "prose-xs" : "prose-sm"} max-w-none break-words ${isUser ? "prose-invert" : "dark:prose-invert"}`, children: [
+              !isUser && structuredContent.payload && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 UIDispatcher,
                 {
                   rawContent: structuredContent.payload,
@@ -2439,19 +2484,14 @@ ${match.trim()}
                   viewportSize
                 }
               ),
-              !shouldRenderStructuredOnly && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_markdown.default, { components: markdownComponents, children: processedMarkdown }),
-              isStreaming && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "inline-flex items-center gap-1.5 ml-2 text-emerald-500 animate-pulse align-middle text-xs font-medium", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                  HourglassLoader_default,
-                  {
-                    size: 18,
-                    primaryColor,
-                    accentColor,
-                    glow: false
-                  }
-                ),
-                "Thinking..."
-              ] })
+              !shouldRenderStructuredOnly && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_markdown.default, { components: markdownComponents, children: processedMarkdown }),
+              isStreaming && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "span",
+                {
+                  className: "inline-block w-2.5 h-4 ml-1.5 animate-[pulse_1.2s_infinite] align-middle rounded-sm",
+                  style: { backgroundColor: primaryColor }
+                }
+              )
             ] })
           ]
         }
@@ -2466,7 +2506,7 @@ ${match.trim()}
             )
           );
           if (hasProductSource) {
-            return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               VisualizationRenderer,
               {
                 data: { type: "product_carousel", title: "Recommended Products", description: "Loading...", data: [] },
@@ -2484,7 +2524,7 @@ ${match.trim()}
         const isNegativeOrFallbackText = textContent.toLowerCase().includes("cannot answer") || textContent.toLowerCase().includes("no relevant data") || textContent.toLowerCase().includes("no data available") || typeof ui.title === "string" && ui.title.toLowerCase().includes("no data") || typeof ui.description === "string" && ui.description.toLowerCase().includes("no relevant data");
         const shouldShow = !isNegativeOrFallbackText && (ui.type === "table" || !["text", "table"].includes(ui.type) || ui.type === "text" && !hasRichUI && allProducts.length === 0 && textContent && !processedMarkdown.toLowerCase().includes(textContent.trim().toLowerCase()));
         if (!shouldShow) return null;
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           VisualizationRenderer,
           {
             data: ui,
@@ -2495,7 +2535,7 @@ ${match.trim()}
           }
         ) });
       })(),
-      !isUser && !hasRichUI && !shouldSuppressProductCarousel && allProducts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      !isUser && !hasRichUI && !shouldSuppressProductCarousel && allProducts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         ProductCarousel,
         {
           products: allProducts,
@@ -2503,36 +2543,48 @@ ${match.trim()}
           onAddToCart
         }
       ) }),
-      !isUser && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-4 mt-1 w-full flex-wrap", children: [
-        sources && sources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      !isUser && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex items-center gap-3 mt-1.5 w-full flex-wrap ${isCompact ? "gap-2" : "gap-3"}`, children: [
+        sources && sources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "button",
           {
             onClick: () => setShowSources((s) => !s),
-            className: "text-[11px] text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-1",
+            className: "text-[11px] text-indigo-400 hover:text-indigo-300 dark:text-indigo-400/70 dark:hover:text-indigo-300 transition-colors flex items-center gap-1 font-medium",
             children: [
-              showSources ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ChevronRight, { className: "w-3 h-3" }),
+              showSources ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.ChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.ChevronRight, { className: "w-3 h-3" }),
               sources.length,
               " source",
-              sources.length !== 1 ? "s" : "",
-              " used"
+              sources.length !== 1 ? "s" : ""
             ]
           }
         ),
-        message.trace && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        message.trace && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "button",
           {
             onClick: () => setShowTrace((t) => !t),
-            className: "text-[11px] text-emerald-500 hover:text-emerald-400 transition-colors flex items-center gap-1",
+            className: "text-[11px] text-emerald-500/70 hover:text-emerald-400 dark:text-emerald-500/50 dark:hover:text-emerald-400 transition-colors flex items-center gap-1 font-medium",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Activity, { className: "w-3 h-3" }),
-              showTrace ? "Hide Trace" : "Trace"
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Activity, { className: "w-3 h-3" }),
+              showTrace ? "Hide trace" : "Trace"
             ]
           }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-1" }),
+        timeLabel && isCompleted && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex items-center gap-1 text-[10px] text-slate-300 dark:text-white/20 font-medium select-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Clock, { className: "w-2.5 h-2.5" }),
+          timeLabel
+        ] }),
+        isCompleted && onFeedback && message.id && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          FeedbackBar,
+          {
+            messageId: message.id,
+            onFeedback,
+            primaryColor
+          }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "w-full flex flex-col gap-2 min-w-0", children: [
-        showSources && sources && sources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mt-1 flex flex-col gap-2", children: sources.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SourceCard, { source: src, index: i }, src.id)) }),
-        showTrace && message.trace && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ObservabilityPanel, { trace: message.trace, primaryColor })
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-full flex flex-col gap-2 min-w-0", children: [
+        showSources && sources && sources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-1 flex flex-col gap-2", children: sources.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SourceCard, { source: src, index: i }, src.id)) }),
+        showTrace && message.trace && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ObservabilityPanel, { trace: message.trace, primaryColor })
       ] })
     ] })
   ] });
@@ -2559,9 +2611,19 @@ function readStoredMessages(storageKey) {
   }
 }
 function useStoredMessages(storageKey, persist) {
-  const [messages, setMessages] = React11.useState(() => persist ? readStoredMessages(storageKey) : []);
+  const [messages, setMessages] = React11.useState([]);
+  const isLoaded = React11.useRef(false);
   React11.useEffect(() => {
-    if (!persist || typeof window === "undefined") {
+    if (persist) {
+      const loaded = readStoredMessages(storageKey);
+      if (loaded.length > 0) {
+        setMessages(loaded);
+      }
+    }
+    isLoaded.current = true;
+  }, [storageKey, persist]);
+  React11.useEffect(() => {
+    if (!isLoaded.current || !persist || typeof window === "undefined") {
       return;
     }
     if (messages.length === 0) {
@@ -2593,6 +2655,7 @@ function parseSseChunk(raw) {
 function useRagChat(projectId, options = {}) {
   const {
     apiUrl = "/api/chat",
+    retrivoraApiBase = "/api/retrivora",
     namespace,
     persist = true,
     onReply,
@@ -2610,13 +2673,14 @@ function useRagChat(projectId, options = {}) {
   }, [messages]);
   const sendMessage = (0, import_react11.useCallback)(
     async (text, opts) => {
-      var _a, _b;
+      var _a, _b, _c;
       const trimmed = text.trim();
       if (!trimmed || isLoading) return;
       lastInputRef.current = trimmed;
+      const userMsgId = (opts == null ? void 0 : opts.skipUserMessage) ? ((_a = messagesRef.current.filter((m) => m.role === "user").pop()) == null ? void 0 : _a.id) || `user_${Date.now()}` : `user_${Date.now()}`;
       if (!(opts == null ? void 0 : opts.skipUserMessage)) {
         const userMessage = {
-          id: `user_${Date.now()}`,
+          id: userMsgId,
           role: "user",
           content: trimmed,
           createdAt: (/* @__PURE__ */ new Date()).toISOString()
@@ -2632,14 +2696,20 @@ function useRagChat(projectId, options = {}) {
       abortControllerRef.current = controller;
       try {
         const history = messagesRef.current.map(({ role, content }) => ({ role, content }));
+        const assistantMessageId = `assistant_${Date.now()}`;
         const response = await fetch(apiUrl, {
           method: "POST",
-          headers: { "Content-Type": "application/json" },
+          headers: __spreadValues({
+            "Content-Type": "application/json"
+          }, options.headers || {}),
           signal: controller.signal,
           body: JSON.stringify({
             message: trimmed,
             history,
-            namespace: namespace != null ? namespace : projectId
+            namespace: namespace != null ? namespace : projectId,
+            sessionId: options.sessionId || "default",
+            messageId: assistantMessageId,
+            userMessageId: userMsgId
           })
         });
         if (!response.ok) {
@@ -2680,7 +2750,6 @@ function useRagChat(projectId, options = {}) {
             requestAnimationFrame(() => flushTextUpdate(msgId));
           }
         };
-        const assistantMessageId = `assistant_${Date.now()}`;
         setMessages((prev) => [
           ...prev,
           {
@@ -2694,55 +2763,38 @@ function useRagChat(projectId, options = {}) {
           const { done, value } = await reader.read();
           if (done) break;
           buffer += decoder.decode(value, { stream: true });
-          const lastBoundary = buffer.lastIndexOf("\n\n");
-          if (lastBoundary === -1) continue;
-          const complete = buffer.slice(0, lastBoundary + 2);
-          buffer = buffer.slice(lastBoundary + 2);
-          let hasNonTextFrame = false;
-          for (const frame of parseSseChunk(complete)) {
-            if (frame.type === "text" && frame.text) {
+          const frames = parseSseChunk(buffer);
+          const lastIndex = buffer.lastIndexOf("\n\n");
+          if (lastIndex !== -1) {
+            buffer = buffer.slice(lastIndex + 2);
+          }
+          for (const frame of frames) {
+            if (frame.type === "text") {
               assistantContent += frame.text;
               pendingContentRef.current = assistantContent;
               scheduleFlush(assistantMessageId);
-            } else if (frame.type === "thinking" && frame.text) {
+            } else if (frame.type === "thinking") {
               thinkingContent += frame.text;
               pendingThinkingRef.current = thinkingContent;
               scheduleFlush(assistantMessageId);
             } else if (frame.type === "metadata") {
-              sources = (_a = frame.sources) != null ? _a : [];
+              sources = (_b = frame.sources) != null ? _b : [];
               thinkingMs = frame.thinkingMs;
-              hasNonTextFrame = true;
             } else if (frame.type === "ui_transformation") {
               uiTransformation = frame.data;
-              hasNonTextFrame = true;
             } else if (frame.type === "observability") {
               trace = frame.data;
-              hasNonTextFrame = true;
             } else if (frame.type === "error") {
-              setError(frame.error || "Stream error");
+              throw new Error(frame.error);
             }
           }
-          if (hasNonTextFrame) {
-            pendingFlush = false;
-            setMessages(
-              (prev) => prev.map(
-                (msg) => msg.id === assistantMessageId ? __spreadProps(__spreadValues({}, msg), {
-                  content: assistantContent,
-                  thinking: thinkingContent || void 0,
-                  thinkingMs,
-                  sources: sources.length > 0 ? sources : msg.sources,
-                  uiTransformation: uiTransformation || msg.uiTransformation
-                }) : msg
-              )
-            );
-          }
         }
         if (buffer.trim()) {
           for (const frame of parseSseChunk(buffer)) {
             if (frame.type === "text" && frame.text) assistantContent += frame.text;
             else if (frame.type === "thinking" && frame.text) thinkingContent += frame.text;
             else if (frame.type === "metadata") {
-              sources = (_b = frame.sources) != null ? _b : [];
+              sources = (_c = frame.sources) != null ? _c : [];
               thinkingMs = frame.thinkingMs;
             } else if (frame.type === "observability") trace = frame.data;
           }
@@ -2775,7 +2827,7 @@ function useRagChat(projectId, options = {}) {
         abortControllerRef.current = null;
       }
     },
-    [apiUrl, isLoading, namespace, onError, onReply, projectId, setMessages]
+    [apiUrl, isLoading, namespace, onError, onReply, projectId, setMessages, options.headers, options.sessionId]
   );
   const clear = (0, import_react11.useCallback)(() => {
     setMessages([]);
@@ -2797,6 +2849,70 @@ function useRagChat(projectId, options = {}) {
     }
     setIsLoading(false);
   }, []);
+  const loadHistory = (0, import_react11.useCallback)(async (sessionId) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`${retrivoraApiBase}/history?sessionId=${encodeURIComponent(sessionId)}`);
+      if (!res.ok) throw new Error(`Failed to load history: ${res.statusText}`);
+      const data = await res.json();
+      const loadedMessages = (data.history || []).map((msg) => ({
+        id: msg.id,
+        role: msg.role,
+        content: msg.content,
+        sources: msg.sources,
+        uiTransformation: msg.uiTransformation,
+        trace: msg.trace,
+        createdAt: msg.createdAt
+      }));
+      setMessages(loadedMessages);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to load history";
+      setError(msg);
+      onError == null ? void 0 : onError(msg);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [retrivoraApiBase, onError, setMessages]);
+  const clearHistory = (0, import_react11.useCallback)(async (sessionId) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`${retrivoraApiBase}/history/clear`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sessionId })
+      });
+      if (!res.ok) throw new Error(`Failed to clear history: ${res.statusText}`);
+      setMessages([]);
+      if (persist) localStorage.removeItem(storageKey);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to clear history";
+      setError(msg);
+      onError == null ? void 0 : onError(msg);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [retrivoraApiBase, onError, persist, setMessages, storageKey]);
+  const submitFeedback = (0, import_react11.useCallback)(async (messageId, rating, comment) => {
+    try {
+      const res = await fetch(`${retrivoraApiBase}/feedback`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          messageId,
+          sessionId: options.sessionId || "default",
+          rating,
+          comment
+        })
+      });
+      if (!res.ok) throw new Error(`Failed to submit feedback: ${res.statusText}`);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to submit feedback";
+      onError == null ? void 0 : onError(msg);
+      throw err;
+    }
+  }, [retrivoraApiBase, onError, options.sessionId]);
   return {
     messages,
     isLoading,
@@ -2805,12 +2921,15 @@ function useRagChat(projectId, options = {}) {
     clear,
     retry,
     setMessages,
-    stop
+    stop,
+    loadHistory,
+    clearHistory,
+    submitFeedback
   };
 }
 
 // src/components/ChatWindow.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function ChatWindow({
   className = "",
   style,
@@ -2821,7 +2940,10 @@ function ChatWindow({
   isResized = false,
   onMaximize,
   isMaximized = false,
-  onAddToCart
+  onAddToCart,
+  apiUrl,
+  retrivoraApiBase,
+  headers
 }) {
   var _a;
   const { ui, projectId } = useConfig();
@@ -2831,8 +2953,11 @@ function ChatWindow({
   const windowRef = (0, import_react12.useRef)(null);
   const bottomRef = (0, import_react12.useRef)(null);
   const inputRef = (0, import_react12.useRef)(null);
-  const { messages, send, clear, isLoading, error, stop } = useRagChat(projectId, {
-    namespace: projectId
+  const { messages, send, clear, isLoading, error, stop, submitFeedback } = useRagChat(projectId, {
+    namespace: projectId,
+    apiUrl,
+    retrivoraApiBase,
+    headers
   });
   const [suggestions, setSuggestions] = (0, import_react12.useState)([]);
   const [isSuggesting, setIsSuggesting] = (0, import_react12.useState)(false);
@@ -2964,85 +3089,85 @@ function ChatWindow({
     }, 800);
     return () => clearTimeout(timer);
   }, [input, projectId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       ref: windowRef,
       className: `relative flex flex-col border border-slate-200 dark:border-white/10 shadow-2xl transition-all duration-300 ${currentRadius} ${isGlass ? "bg-white/90 dark:bg-[#0f0f1a]/90 backdrop-blur-xl" : "bg-white dark:bg-[#0f0f1a]"} ${className}`,
       style: __spreadValues({ "--primary": ui.primaryColor, "--accent": ui.accentColor }, style),
       children: [
-        onResizeStart && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        onResizeStart && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "div",
           {
             onMouseDown: onResizeStart,
             className: "absolute top-0 left-0 w-6 h-6 cursor-nw-resize z-[100] group flex items-start justify-start p-1",
             title: "Drag to resize",
-            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-2.5 h-2.5 border-t-2 border-l-2 border-slate-300 dark:border-white/20 group-hover:border-slate-500 dark:group-hover:border-white/50 transition-colors rounded-tl-[2px]" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-2.5 h-2.5 border-t-2 border-l-2 border-slate-300 dark:border-white/20 group-hover:border-slate-500 dark:group-hover:border-white/50 transition-colors rounded-tl-[2px]" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "div",
           {
             className: "flex items-center justify-between px-5 py-4 border-b border-slate-200 dark:border-white/10",
             style: { background: `linear-gradient(135deg, ${ui.primaryColor}15, ${ui.accentColor}10)` },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-3", children: [
                 ui.logoUrl ? (
                   // eslint-disable-next-line @next/next/no-img-element
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("img", { src: ui.logoUrl, alt: "logo", className: "w-8 h-8 rounded-lg object-cover" })
-                ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: ui.logoUrl, alt: "logo", className: "w-8 h-8 rounded-lg object-cover" })
+                ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "div",
                   {
                     className: `w-9 h-9 flex items-center justify-center shadow-md ${ui.borderRadius === "full" ? "rounded-full" : "rounded-xl"}`,
                     style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.Bot, { className: "w-5 h-5 text-white" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Bot, { className: "w-5 h-5 text-white" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { className: "text-slate-900 dark:text-white font-semibold text-sm leading-tight", children: ui.title }),
-                  ui.poweredBy && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-slate-500 dark:text-white/40 text-[11px] leading-tight", children: `Powered by ${ui.poweredBy}` })
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "text-slate-900 dark:text-white font-semibold text-sm leading-tight", children: ui.title }),
+                  ui.poweredBy && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-slate-500 dark:text-white/40 text-[11px] leading-tight", children: `Powered by ${ui.poweredBy}` })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "flex items-center gap-1 text-[10px] text-emerald-500 dark:text-emerald-400 mr-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400 animate-pulse" }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-1 text-[10px] text-emerald-500 dark:text-emerald-400 mr-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400 animate-pulse" }),
                   "Online"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center bg-slate-100/50 dark:bg-white/5 rounded-lg p-0.5 border border-slate-200/50 dark:border-white/5", children: [
-                  mounted && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center bg-slate-100/50 dark:bg-white/5 rounded-lg p-0.5 border border-slate-200/50 dark:border-white/5", children: [
+                  mounted && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "button",
                     {
                       onClick: clearHistory,
                       title: "Clear conversation",
                       className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-rose-500 dark:text-white/40 dark:hover:text-rose-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.Trash2, { className: "w-3.5 h-3.5" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Trash2, { className: "w-3.5 h-3.5" })
                     }
                   ),
-                  isResized && onResetResize && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  isResized && onResetResize && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "button",
                     {
                       onClick: onResetResize,
                       title: "Reset to default size",
                       className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-blue-500 dark:text-white/40 dark:hover:text-blue-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.RotateCcw, { className: "w-3.5 h-3.5" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.RotateCcw, { className: "w-3.5 h-3.5" })
                     }
                   ),
-                  onMaximize && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  onMaximize && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "button",
                     {
                       onClick: onMaximize,
                       title: isMaximized ? "Minimize" : "Maximize",
                       className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-blue-500 dark:text-white/40 dark:hover:text-blue-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer",
-                      children: isMaximized ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.Minimize2, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.Maximize2, { className: "w-3.5 h-3.5" })
+                      children: isMaximized ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Minimize2, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Maximize2, { className: "w-3.5 h-3.5" })
                     }
                   ),
-                  showClose && onClose && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  showClose && onClose && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "button",
                     {
                       onClick: onClose,
                       title: "Close chat",
                       className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-slate-600 dark:text-white/40 dark:hover:text-white/70 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.X, { className: "w-4 h-4" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.X, { className: "w-4 h-4" })
                     }
                   )
                 ] })
@@ -3050,24 +3175,24 @@ function ChatWindow({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5 scrollbar-thin scrollbar-thumb-slate-200 dark:scrollbar-thumb-white/10 scrollbar-track-transparent min-h-0 bg-slate-50 dark:bg-transparent", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5 scrollbar-thin scrollbar-thumb-slate-200 dark:scrollbar-thumb-white/10 scrollbar-track-transparent min-h-0 bg-slate-50 dark:bg-transparent", children: [
           !mounted || isEmpty ? (
             /* Welcome state */
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "h-full flex flex-col items-center justify-center text-center gap-4 px-6 py-12", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "h-full flex flex-col items-center justify-center text-center gap-4 px-6 py-12", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "div",
                 {
                   className: `w-16 h-16 flex items-center justify-center shadow-lg ${ui.borderRadius === "full" ? "rounded-full" : "rounded-2xl"}`,
                   style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.Sparkles, { className: "w-8 h-8 text-white" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Sparkles, { className: "w-8 h-8 text-white" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-slate-800 dark:text-white/80 font-medium leading-relaxed", children: ui.welcomeMessage }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-slate-500 dark:text-white/30 text-sm mt-2", children: "Ask a question to get started" })
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-slate-800 dark:text-white/80 font-medium leading-relaxed", children: ui.welcomeMessage }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-slate-500 dark:text-white/30 text-sm mt-2", children: "Ask a question to get started" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-wrap gap-2 justify-center mt-2", children: CHAT_SUGGESTIONS.map(
-                (suggestion) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-wrap gap-2 justify-center mt-2", children: CHAT_SUGGESTIONS.map(
+                (suggestion) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "button",
                   {
                     onClick: () => {
@@ -3082,7 +3207,7 @@ function ChatWindow({
                 )
               ) })
             ] })
-          ) : messages.map((msg, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          ) : messages.map((msg, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             MessageBubble,
             {
               message: msg,
@@ -3091,11 +3216,12 @@ function ChatWindow({
               primaryColor: ui.primaryColor,
               accentColor: ui.accentColor,
               onAddToCart,
-              viewportSize
+              viewportSize,
+              onFeedback: submitFeedback
             },
             msg.id
           )),
-          isLoading && ((_a = messages[messages.length - 1]) == null ? void 0 : _a.role) !== "assistant" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          isLoading && ((_a = messages[messages.length - 1]) == null ? void 0 : _a.role) !== "assistant" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             MessageBubble,
             {
               message: { id: "loading", role: "assistant", content: "", createdAt: (/* @__PURE__ */ new Date()).toISOString() },
@@ -3106,22 +3232,22 @@ function ChatWindow({
               viewportSize
             }
           ),
-          error && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 text-rose-500 dark:text-rose-400 text-sm bg-rose-50 dark:bg-rose-400/10 border border-rose-200 dark:border-rose-400/20 rounded-xl px-4 py-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.TriangleAlert, { className: "w-4 h-4 flex-shrink-0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: error })
+          error && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 text-rose-500 dark:text-rose-400 text-sm bg-rose-50 dark:bg-rose-400/10 border border-rose-200 dark:border-rose-400/20 rounded-xl px-4 py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.TriangleAlert, { className: "w-4 h-4 flex-shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: error })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: bottomRef })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: bottomRef })
         ] }),
-        isUploadModalOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm rounded-inherit", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative w-full max-w-md bg-white dark:bg-[#0f0f1a] rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        isUploadModalOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm rounded-inherit", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative w-full max-w-md bg-white dark:bg-[#0f0f1a] rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               onClick: () => setIsUploadModalOpen(false),
               className: "absolute top-4 right-4 p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:hover:text-white/80 dark:hover:bg-white/10 transition-colors z-10",
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.X, { className: "w-5 h-5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.X, { className: "w-5 h-5" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             DocumentUpload,
             {
               namespace: projectId,
@@ -3129,9 +3255,9 @@ function ChatWindow({
             }
           )
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `px-4 pb-4 pt-2 border-t border-slate-200 dark:border-white/10 ${isGlass ? "bg-transparent" : "bg-white dark:bg-[#0f0f1a]"}`, children: [
-          (suggestions.length > 0 || isSuggesting) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "mb-3 flex flex-wrap gap-2 animate-in fade-in slide-in-from-bottom-2 duration-300", children: [
-            suggestions.map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `px-4 pb-4 pt-2 border-t border-slate-200 dark:border-white/10 ${isGlass ? "bg-transparent" : "bg-white dark:bg-[#0f0f1a]"}`, children: [
+          (suggestions.length > 0 || isSuggesting) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mb-3 flex flex-wrap gap-2 animate-in fade-in slide-in-from-bottom-2 duration-300", children: [
+            suggestions.map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
               "button",
               {
                 onClick: () => {
@@ -3142,19 +3268,19 @@ function ChatWindow({
                 },
                 className: "flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/60 hover:text-slate-900 dark:hover:text-white/90 hover:border-slate-300 dark:hover:border-white/20 transition-all shadow-sm cursor-pointer group",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.Sparkles, { className: "w-3 h-3 text-amber-400" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Sparkles, { className: "w-3 h-3 text-amber-400" }),
                   suggestion
                 ]
               },
               suggestion
             )),
-            isSuggesting && suggestions.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium text-slate-400 dark:text-white/30 animate-pulse", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.Sparkles, { className: "w-3 h-3" }),
+            isSuggesting && suggestions.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium text-slate-400 dark:text-white/30 animate-pulse", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Sparkles, { className: "w-3 h-3" }),
               "Thinking..."
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `flex items-end gap-2 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 p-2 focus-within:border-slate-300 dark:focus-within:border-white/20 transition-all ${ui.borderRadius === "full" ? "rounded-3xl" : "rounded-2xl"}`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `flex items-end gap-2 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 p-2 focus-within:border-slate-300 dark:focus-within:border-white/20 transition-all ${ui.borderRadius === "full" ? "rounded-3xl" : "rounded-2xl"}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "textarea",
               {
                 ref: inputRef,
@@ -3174,7 +3300,7 @@ function ChatWindow({
                 style: { scrollbarWidth: "none" }
               }
             ),
-            ui.enableVoiceInput !== false && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            ui.enableVoiceInput !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "button",
               {
                 type: "button",
@@ -3182,28 +3308,28 @@ function ChatWindow({
                 disabled: isLoading,
                 className: `flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100 ${isListening ? "bg-rose-500 text-white animate-pulse shadow-md shadow-rose-500/20" : "text-slate-400 dark:text-white/40 hover:bg-slate-200 dark:hover:bg-white/10"}`,
                 title: isListening ? "Stop listening" : "Start voice input",
-                children: isListening ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.MicOff, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.Mic, { className: "w-4 h-4" })
+                children: isListening ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.MicOff, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Mic, { className: "w-4 h-4" })
               }
             ),
-            ui.allowUpload !== false && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            ui.allowUpload !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "button",
               {
                 type: "button",
                 onClick: () => setIsUploadModalOpen(true),
                 className: "flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 text-slate-400 dark:text-white/40 hover:bg-slate-200 dark:hover:bg-white/10",
                 title: "Upload Document",
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.Paperclip, { className: "w-4 h-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Paperclip, { className: "w-4 h-4" })
               }
             ),
-            isLoading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            isLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "button",
               {
                 onClick: stop,
                 className: "flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 shadow-md bg-rose-500 hover:bg-rose-600 text-white cursor-pointer",
                 title: "Stop generating",
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-3.5 h-3.5 bg-white rounded-[2px]" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-3.5 h-3.5 bg-white rounded-[2px]" })
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "button",
               {
                 onClick: sendMessage,
@@ -3213,11 +3339,11 @@ function ChatWindow({
                   background: input.trim() ? `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` : "rgba(148, 163, 184, 0.2)"
                   // slate-400/20 for light mode disabled
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.ArrowUp, { className: "w-4 h-4 text-white" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.ArrowUp, { className: "w-4 h-4 text-white" })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-center text-[10px] text-slate-400 dark:text-white/20 mt-2", children: "Press Enter to send \xB7 Shift+Enter for new line" })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-center text-[10px] text-slate-400 dark:text-white/20 mt-2", children: "Press Enter to send \xB7 Shift+Enter for new line" })
         ] })
       ]
     }
@@ -3225,7 +3351,7 @@ function ChatWindow({
 }
 
 // src/components/ChatWidget.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var DEFAULT_DIMENSIONS = { width: 380, height: 600 };
 var GEMINI_STYLES = `
   @keyframes shapeshift {
@@ -3264,7 +3390,7 @@ var GEMINI_STYLES = `
     --circle: shape(evenodd from 13.482% 79.505%, curve by -7.1945% -12.47% with -1.4985% -1.8575% / -6.328% -10.225%, curve by 0.0985% -33.8965% with -4.1645% -10.7945% / -4.1685% -23.0235%, curve by 6.9955% -12.101% with 1.72% -4.3825% / 4.0845% -8.458%, curve by 30.125% -17.119% with 7.339% -9.1825% / 18.4775% -15.5135%, curve by 13.4165% 0.095% with 4.432% -0.6105% / 8.9505% -0.5855%, curve by 29.364% 16.9% with 11.6215% 1.77% / 22.102% 7.9015%, curve by 7.176% 12.4145% with 3.002% 3.7195% / 5.453% 7.968%, curve by -0.0475% 33.8925% with 4.168% 10.756% / 4.2305% 22.942%, curve by -7.1135% 12.2825% with -1.74% 4.4535% / -4.1455% 8.592%, curve by -29.404% 16.9075% with -7.202% 8.954% / -18.019% 15.137%, curve by -14.19% -0.018% with -4.6635% 0.7255% / -9.4575% 0.7205%, curve by -29.226% -16.8875% with -11.573% -1.8065% / -21.9955% -7.9235%, close);
   }
 `;
-function ChatWidget({ position = "bottom-right", onAddToCart }) {
+function ChatWidget({ position = "bottom-right", onAddToCart, apiUrl, retrivoraApiBase, headers }) {
   const { ui } = useConfig();
   const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
   const [hasUnread, setHasUnread] = (0, import_react13.useState)(false);
@@ -3320,9 +3446,9 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
     }
   };
   const isResized = dimensions.width !== DEFAULT_DIMENSIONS.width || dimensions.height !== DEFAULT_DIMENSIONS.height;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("style", { dangerouslySetInnerHTML: { __html: GEMINI_STYLES } }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("style", { dangerouslySetInnerHTML: { __html: GEMINI_STYLES } }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "div",
       {
         className: `fixed z-[9998] max-w-[calc(100vw-3rem)] ease-in-out ${windowPositionClass} ${isOpen ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 translate-y-4 pointer-events-none"} ${isResizing ? "" : "transition-all duration-300"}`,
@@ -3332,7 +3458,7 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
           maxHeight: "calc(100vh - 6rem)"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             ChatWindow,
             {
               className: "h-full relative z-10",
@@ -3343,10 +3469,13 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
               isResized,
               onMaximize: ui.allowResize !== false ? handleMaximize : void 0,
               isMaximized,
-              onAddToCart
+              onAddToCart,
+              apiUrl,
+              retrivoraApiBase,
+              headers
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "div",
             {
               className: `absolute -bottom-1.5 w-4 h-4 rotate-45 border-r border-b border-slate-200 dark:border-white/10 z-0 ${ui.visualStyle === "solid" ? "bg-white dark:bg-[#0f0f1a]" : "bg-white/90 dark:bg-[#0f0f1a]/90 backdrop-blur-xl"} ${position === "bottom-left" ? "left-5" : "right-5"}`
@@ -3355,18 +3484,18 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "button",
       {
         onClick: isOpen ? () => setIsOpen(false) : handleOpen,
         className: `group fixed z-[9999] w-14 h-14 drop-shadow-2xl flex items-center justify-center transition-all duration-300 cursor-pointer hover:scale-110 active:scale-95 ${positionClass}`,
         "aria-label": "Open chat",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "div",
             {
               className: "absolute inset-0 transition-all duration-300 overflow-hidden rounded-full group-hover:rounded-none group-hover:animate-[shapeshift_5s_ease-in-out_infinite_forwards]",
-              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 "div",
                 {
                   className: "absolute top-0 left-0 w-[400%] h-[400%] transition-transform duration-300 group-hover:animate-[gradientMove_3.5s_ease-in-out_infinite_alternate]",
@@ -3377,23 +3506,800 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "span",
             {
               className: "absolute inset-0 rounded-full animate-ping opacity-20 pointer-events-none",
               style: { background: ui.primaryColor }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "span",
             {
               className: `relative z-10 transition-transform duration-300 ${isOpen ? "rotate-90 scale-90" : "rotate-0 scale-100"}`,
-              children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react9.X, { className: "w-6 h-6 text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react9.MessageSquare, { className: "w-6 h-6 text-white" })
+              children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react9.X, { className: "w-6 h-6 text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react9.MessageSquare, { className: "w-6 h-6 text-white" })
+            }
+          ),
+          hasUnread && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "absolute top-0 right-0 w-4 h-4 bg-rose-500 rounded-full border-2 border-white flex items-center justify-center text-[9px] font-bold text-white", children: "1" })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/Hero.tsx
+var import_link = __toESM(require("next/link"));
+
+// src/app/constants.tsx
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var LANDING_PAGE_CONTENT = {
+  hero: {
+    badge: "Dynamic & Universal Retrivora AI",
+    title: "The Universal Bridge for Generative AI",
+    subtitle: "Retrivora AI is a vendor-agnostic RAG engine that connects any Document to any LLM and Vector Database in minutes."
+  },
+  lifecycle: {
+    title: "The RAG Lifecycle"
+  },
+  guide: {
+    title: "Interactive Guide",
+    subtitle: "Universal RAG integration for your Next.js applications in minutes."
+  }
+};
+var VECTOR_DATABASES = [
+  { Icon: import_lucide_react10.Zap, label: "Pinecone" },
+  { Icon: import_lucide_react10.Database, label: "PostgreSQL" },
+  { Icon: import_lucide_react10.Layers, label: "MongoDB" },
+  { Icon: import_lucide_react10.Box, label: "Qdrant" },
+  { Icon: import_lucide_react10.Search, label: "Milvus" },
+  { Icon: import_lucide_react10.Package, label: "ChromaDB" },
+  { Icon: import_lucide_react10.Activity, label: "Redis" },
+  { Icon: import_lucide_react10.Hexagon, label: "Weaviate" }
+];
+var AI_MODELS = [
+  { Icon: import_lucide_react10.Rabbit, label: "Ollama" },
+  { Icon: import_lucide_react10.Sparkles, label: "OpenAI" },
+  { Icon: import_lucide_react10.Bot, label: "Anthropic" },
+  { Icon: import_lucide_react10.Brain, label: "Gemini" },
+  { Icon: import_lucide_react10.Cpu, label: "Groq" },
+  { Icon: import_lucide_react10.Cloud, label: "Qwen" },
+  { Icon: import_lucide_react10.Code, label: "Copilot" },
+  { Icon: import_lucide_react10.Terminal, label: "LiteLLM" }
+];
+var PIPELINE_STEPS = [
+  {
+    step: "01",
+    Icon: import_lucide_react10.FileText,
+    title: "Ingest",
+    desc: "Universal support for PDF, DOCX, CSV, and JSON. Documents are parsed, chunked, and embedded.",
+    colors: { from: "#10b981", to: "#14b8a6" }
+  },
+  {
+    step: "02",
+    Icon: import_lucide_react10.Search,
+    title: "Retrieve",
+    desc: "Queries are converted to vectors. Semantic search finds context across any configured Vector DB.",
+    colors: { from: "#14b8a6", to: "#06b6d4" }
+  },
+  {
+    step: "03",
+    Icon: import_lucide_react10.Puzzle,
+    title: "Augment",
+    desc: "Retrieved context is injected into the LLM prompt with namespaced project isolation.",
+    colors: { from: "#06b6d4", to: "#3b82f6" }
+  },
+  {
+    step: "04",
+    Icon: import_lucide_react10.MessageSquare,
+    title: "Generate",
+    desc: "Providers like OpenAI, Anthropic, or Gemini produce grounded, source-cited responses.",
+    colors: { from: "#3b82f6", to: "#6366f1" }
+  }
+];
+var SNIPPETS = [
+  {
+    id: "npm-setup",
+    title: "NPM Setup",
+    language: "typescript",
+    description: "How to install and import the client vs server components correctly in your application.",
+    code: `// \u2500\u2500\u2500 TERMINAL / BASH \u2500\u2500\u2500
+// Run this command to install the package in your project:
+// npm install @retrivora-ai/rag-engine
+
+// \u2500\u2500\u2500 SERVER API ROUTER (src/app/api/retrivora/[[...retrivora]]/route.ts) \u2500\u2500\u2500
+// Create a single catch-all file to handle all server endpoints dynamically:
+import { createRagHandler } from '@retrivora-ai/rag-engine/handlers';
+
+export const { GET, POST } = createRagHandler();
+
+// \u2500\u2500\u2500 CLIENT WIDGET (src/app/layout.tsx) \u2500\u2500\u2500
+// Import the React widget and config context (styles are auto-injected!):
+import { ConfigProvider, ChatWidget } from '@retrivora-ai/rag-engine';`
+  },
+  {
+    id: "pipeline",
+    title: "Pipeline API",
+    language: "typescript",
+    description: "Orchestrate the full RAG flow programmatically with the Pipeline class.",
+    code: `import { Pipeline, getRagConfig } from '@retrivora-ai/rag-engine/server';
+
+const config = getRagConfig();
+const pipeline = new Pipeline(config);
+
+// Ingest documents
+await pipeline.ingest([{
+  docId: 'doc-1',
+  content: 'Retrivora AI simplifies RAG...',
+  metadata: { source: 'docs' }
+}]);
+
+// Ask a question
+const { reply, sources } = await pipeline.ask('How does Retrivora work?');`
+  },
+  {
+    id: "handlers",
+    title: "Route Handlers",
+    language: "typescript",
+    description: "Mount pre-built API endpoints. Configuration is automatically read from environment variables, or can be passed explicitly.",
+    code: `// \u2500\u2500\u2500 OPTION A: ZERO CONFIG (Reads from environment variables) \u2500\u2500\u2500
+// src/app/api/chat/route.ts
+import { createStreamHandler } from '@retrivora-ai/rag-engine/handlers';
+export const POST = createStreamHandler();
+
+// \u2500\u2500\u2500 OPTION B: EXPLICIT CONFIGURATION \u2500\u2500\u2500
+// src/app/api/chat/route.ts
+import { createStreamHandler } from '@retrivora-ai/rag-engine/handlers';
+
+export const POST = createStreamHandler({
+  vectorDb: {
+    provider: 'pinecone',
+    apiKey: process.env.CUSTOM_PINECONE_KEY,
+    indexName: 'docs-index',
+  },
+  llm: {
+    provider: 'openai',
+    apiKey: process.env.CUSTOM_OPENAI_KEY,
+    model: 'gpt-4o',
+  }
+});`
+  },
+  {
+    id: "ui",
+    title: "React Components",
+    language: "typescript",
+    description: "Configure and embed themeable UI widgets using the ConfigProvider context.",
+    code: `import { ConfigProvider, ChatWidget } from '@retrivora-ai/rag-engine';
+
+export default function Layout({ children }) {
+  return (
+    <ConfigProvider config={{
+      projectId: 'my-project-id',
+      ui: {
+        title: 'Retrivora Assistant',
+        welcomeMessage: 'Hi! Ask me anything about our software.',
+        primaryColor: '#4f46e5',  // Custom primary brand color
+        accentColor: '#8b5cf6',   // Custom accent gradient color
+        borderRadius: 'lg',       // 'none' | 'sm' | 'md' | 'lg' | 'xl'
+        allowUpload: true,        // Toggle custom file uploading
+      }
+    }}>
+      {children}
+      <ChatWidget position="bottom-right" />
+    </ConfigProvider>
+  );
+}`
+  },
+  {
+    id: "config",
+    title: "Config Builder",
+    language: "typescript",
+    description: "Fluent, type-safe configuration builder for granular control over providers.",
+    code: `import { ConfigBuilder } from '@retrivora-ai/rag-engine/server';
+
+const config = new ConfigBuilder()
+  .vectorDb('pinecone', { apiKey: '...', indexName: 'docs' })
+  .llm('ollama', 'llama3.2')
+  .embedding('ollama', 'nomic-embed-text')
+  .build();`
+  },
+  {
+    id: "env",
+    title: "Environment",
+    language: "bash",
+    description: "The exact environment variable structure required for auto-configuration.",
+    code: `# Project Identity
+RAG_PROJECT_ID=my-project
+
+# Vector DB
+VECTOR_DB_PROVIDER=pinecone
+PINECONE_API_KEY=pcsk_...
+VECTOR_DB_INDEX=products
+
+# AI Services
+LLM_PROVIDER=openai
+LLM_MODEL=gpt-4o
+OPENAI_API_KEY=sk-...`
+  }
+];
+var ARCHITECTURE_CARDS = [
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react10.Database, { className: "text-indigo-600" }),
+    title: "Vector Store",
+    description: "Universal support for Pinecone, PGVector, MongoDB, Milvus, Qdrant, and more.",
+    badge: "Vector DB",
+    badgeColor: "bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border-indigo-200 dark:border-indigo-500/20"
+  },
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react10.Zap, { className: "text-amber-500" }),
+    title: "Embeddings",
+    description: "Seamlessly switch between OpenAI, Ollama, or custom embedding providers.",
+    badge: "Models",
+    badgeColor: "bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-200 dark:border-amber-500/20"
+  },
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react10.Bot, { className: "text-emerald-500" }),
+    title: "LLM Orchestration",
+    description: "Optimized inference across OpenAI, Anthropic, Gemini, and local LLMs.",
+    badge: "Inference",
+    badgeColor: "bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-200 dark:border-emerald-500/20"
+  }
+];
+var QUICK_START_STEPS = [
+  { id: "npm-setup", text: "Install Package & CSS" },
+  { id: "env", text: "Configure .env.local" },
+  { id: "handlers", text: "Mount API Handlers" },
+  { id: "ui", text: "Drop ChatWidget UI" }
+];
+var ADVANCED_STEPS = [
+  { id: "pipeline", text: "Programmatic SDK" },
+  { id: "config", text: "Fluent Config Builder" }
+];
+var API_ENDPOINTS = ["chat", "health", "ingest", "upload"];
+
+// src/components/Hero.tsx
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Hero() {
+  const { ui } = useConfig();
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "grid lg:grid-cols-2 gap-12 xl:gap-16 items-start", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col gap-7 pt-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        "div",
+        {
+          className: "inline-flex items-center gap-2.5 px-4 py-2 rounded-full text-xs font-semibold border w-fit",
+          style: {
+            borderColor: `${ui.primaryColor}30`,
+            color: ui.primaryColor,
+            background: `${ui.primaryColor}08`
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "span",
+              {
+                className: "w-2 h-2 rounded-full",
+                style: { background: ui.primaryColor, animation: "pulseRing 2.5s ease-in-out infinite" }
+              }
+            ),
+            LANDING_PAGE_CONTENT.hero.badge
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("h1", { className: "text-5xl md:text-6xl xl:text-7xl font-black text-slate-900 tracking-tight leading-[1.05]", children: [
+        LANDING_PAGE_CONTENT.hero.title.split("for")[0],
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("br", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          "span",
+          {
+            className: "text-transparent bg-clip-text",
+            style: { backgroundImage: `linear-gradient(135deg, ${ui.primaryColor} 0%, ${ui.accentColor} 60%, #a855f7 100%)` },
+            children: [
+              "for ",
+              LANDING_PAGE_CONTENT.hero.title.split("for")[1]
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-lg md:text-xl text-slate-500 max-w-lg leading-relaxed", children: LANDING_PAGE_CONTENT.hero.subtitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col gap-4 border-t border-slate-100", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[10px] font-black text-slate-400 uppercase tracking-[0.22em] ml-1", children: "Vector Ecosystem" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex flex-wrap gap-2", children: VECTOR_DATABASES.map(({ Icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+            "span",
+            {
+              className: "flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white border border-slate-200 text-slate-600 text-[11px] font-semibold hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 transition-all cursor-default group shadow-sm",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { className: "w-3 h-3 transition-transform group-hover:scale-110", style: { color: ui.primaryColor } }),
+                label
+              ]
+            },
+            label
+          )) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[10px] font-black text-slate-400 uppercase tracking-[0.22em] ml-1", children: "AI Model Garden" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex flex-wrap gap-2", children: AI_MODELS.map(({ Icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+            "span",
+            {
+              className: "flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white border border-slate-200 text-slate-600 text-[11px] font-semibold hover:border-violet-300 hover:bg-violet-50 hover:text-violet-700 transition-all cursor-default group shadow-sm",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { className: "w-3 h-3 transition-transform group-hover:scale-110", style: { color: ui.accentColor } }),
+                label
+              ]
+            },
+            label
+          )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex flex-wrap items-center gap-3 mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        import_link.default,
+        {
+          href: "/register",
+          className: "group flex items-center gap-2 px-6 py-3.5 rounded-xl text-sm font-bold text-white transition-all duration-200 shadow-lg hover:-translate-y-0.5",
+          style: {
+            background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})`,
+            boxShadow: `0 8px 24px -6px ${ui.primaryColor}45`
+          },
+          children: [
+            "Get Started Free",
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react11.ArrowRight, { className: "h-4 w-4 transition-transform group-hover:translate-x-1" })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative lg:sticky lg:top-6 h-[480px] lg:h-[calc(100vh-6rem)] min-h-[400px] lg:min-h-[520px] max-h-[800px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "div",
+        {
+          className: "absolute -inset-3 rounded-3xl pointer-events-none",
+          style: { background: `radial-gradient(ellipse at center, ${ui.primaryColor}12 0%, transparent 70%)` }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "relative h-full rounded-2xl overflow-hidden border border-slate-200 shadow-xl shadow-slate-200/80", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChatWindow, { className: "w-full h-full" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "absolute -bottom-3 left-1/2 -translate-x-1/2 flex items-center gap-1.5 px-3.5 py-1.5 bg-white border border-slate-200 rounded-full text-[10px] font-semibold text-slate-500 shadow-md whitespace-nowrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" }),
+        "Live Retrivora demo \u2014 powered by this SDK"
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/Lifecycle.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function Lifecycle() {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-center mb-14", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50 border border-indigo-100 text-[10px] font-bold uppercase tracking-widest text-indigo-600 mb-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-indigo-500 animate-pulse" }),
+        "How It Works"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: "text-3xl md:text-4xl font-black text-slate-900 mb-4", children: LANDING_PAGE_CONTENT.lifecycle.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-slate-500 max-w-lg mx-auto text-base leading-relaxed", children: "Four composable stages from raw documents to grounded AI responses." })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "grid sm:grid-cols-2 lg:grid-cols-4 gap-5 max-w-6xl mx-auto", children: PIPELINE_STEPS.map(({ step, Icon, title, desc, colors }, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      "div",
+      {
+        className: "group relative bg-white rounded-2xl border border-slate-200 p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-slate-200/80 overflow-hidden cursor-default",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "div",
+            {
+              className: "absolute top-0 left-0 right-0 h-0.5 rounded-t-2xl",
+              style: { background: `linear-gradient(90deg, ${colors.from}, ${colors.to})` }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "div",
+            {
+              className: "absolute -right-2 -bottom-4 text-8xl font-black opacity-[0.05] select-none pointer-events-none group-hover:opacity-[0.08] transition-opacity",
+              style: { color: colors.from },
+              children: step
             }
           ),
-          hasUnread && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "absolute top-0 right-0 w-4 h-4 bg-rose-500 rounded-full border-2 border-white flex items-center justify-center text-[9px] font-bold text-white", children: "1" })
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "div",
+            {
+              className: "relative z-10 w-11 h-11 rounded-xl flex items-center justify-center mb-5 transition-transform duration-300 group-hover:scale-105",
+              style: {
+                background: `linear-gradient(135deg, ${colors.from}18, ${colors.to}10)`,
+                border: `1px solid ${colors.from}25`
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { className: "w-5 h-5", style: { color: colors.from } })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative z-10", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+              "div",
+              {
+                className: "text-[10px] font-black uppercase tracking-widest mb-1.5",
+                style: { color: colors.from },
+                children: [
+                  "Step ",
+                  index + 1
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "text-base font-bold text-slate-900 mb-2", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-slate-500 leading-relaxed", children: desc })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "div",
+            {
+              className: "absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none",
+              style: { background: `radial-gradient(ellipse at 50% 0%, ${colors.from}07 0%, transparent 70%)` }
+            }
+          )
+        ]
+      },
+      step
+    )) })
+  ] });
+}
+
+// src/components/ArchitectureCardsSection.tsx
+var import_link2 = __toESM(require("next/link"));
+
+// src/components/ArchitectureCard.tsx
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function ArchitectureCard({ icon, title, description, badge, badgeColor, gradientFrom = "#6366f1", gradientTo = "#8b5cf6" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "group relative bg-white rounded-2xl border border-slate-200 p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-slate-200/80 overflow-hidden cursor-default", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "div",
+      {
+        className: "absolute top-0 left-0 right-0 h-0.5 rounded-t-2xl opacity-80 group-hover:opacity-100 transition-opacity",
+        style: { background: `linear-gradient(90deg, ${gradientFrom}, ${gradientTo})` }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "mb-5 flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "div",
+        {
+          className: "w-12 h-12 rounded-xl flex items-center justify-center text-2xl transition-transform duration-300 group-hover:scale-110",
+          style: {
+            background: `linear-gradient(135deg, ${gradientFrom}18, ${gradientTo}10)`,
+            border: `1px solid ${gradientFrom}20`
+          },
+          children: icon
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: `rounded-full border px-3 py-1 text-[10px] font-bold uppercase tracking-wider ${badgeColor}`, children: badge })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "mb-2 font-bold text-slate-900 text-base", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-slate-500 leading-relaxed", children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      "div",
+      {
+        className: "mt-5 flex items-center gap-1 text-[11px] font-semibold opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-y-1 group-hover:translate-y-0",
+        style: { color: gradientFrom },
+        children: [
+          "Learn more ",
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react12.ArrowRight, { className: "h-3 w-3" })
         ]
       }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "div",
+      {
+        className: "absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none",
+        style: { background: `radial-gradient(ellipse at 50% 0%, ${gradientFrom}05 0%, transparent 70%)` }
+      }
+    )
+  ] });
+}
+
+// src/components/ArchitectureCardsSection.tsx
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var CARD_GRADIENTS = [
+  { from: "#6366f1", to: "#8b5cf6" },
+  { from: "#f59e0b", to: "#f97316" },
+  { from: "#10b981", to: "#06b6d4" }
+];
+function ArchitectureCardsSection() {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "text-center mb-12", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "text-3xl md:text-4xl font-black text-slate-900 mb-4", children: "Built for every layer of the stack" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-slate-500 max-w-xl mx-auto text-base leading-relaxed", children: "Swap providers without rewriting a single line of business logic." })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "grid gap-5 sm:grid-cols-3 max-w-5xl mx-auto", children: ARCHITECTURE_CARDS.map((card, i) => {
+      var _a, _b;
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        ArchitectureCard,
+        __spreadProps(__spreadValues({}, card), {
+          gradientFrom: (_a = CARD_GRADIENTS[i]) == null ? void 0 : _a.from,
+          gradientTo: (_b = CARD_GRADIENTS[i]) == null ? void 0 : _b.to
+        }),
+        i
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mt-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      import_link2.default,
+      {
+        href: "/features",
+        className: "inline-flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-semibold text-slate-600 hover:text-indigo-600 border border-slate-200 hover:border-indigo-200 bg-white hover:bg-indigo-50 transition-all shadow-sm",
+        children: [
+          "Explore all features ",
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react13.ArrowRight, { className: "h-4 w-4" })
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/Documentation.tsx
+var import_react15 = __toESM(require("react"));
+var import_lucide_react16 = require("lucide-react");
+
+// src/components/CodeViewer.tsx
+var import_react14 = __toESM(require("react"));
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function CodeViewer({ snippet }) {
+  const [copied, setCopied] = import_react14.default.useState(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(snippet.code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col rounded-2xl border border-white/8 overflow-hidden min-h-[300px] shadow-xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between px-5 py-3 border-b border-white/5 bg-[#0d0d1a]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-2.5 h-2.5 rounded-full bg-rose-500/80" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-2.5 h-2.5 rounded-full bg-amber-500/80" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-2.5 h-2.5 rounded-full bg-emerald-500/80" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px] font-mono text-white/25 uppercase tracking-widest", children: snippet.language })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          onClick: handleCopy,
+          className: "flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[10px] font-bold text-white/35 hover:text-white/80 hover:bg-white/5 transition-all active:scale-95",
+          children: copied ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react14.Check, { size: 12, className: "text-emerald-400" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-emerald-400", children: "Copied!" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react14.Copy, { size: 12 }),
+            "Copy Code"
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "p-6 font-mono text-[12px] leading-relaxed overflow-auto flex-grow bg-[#080818]", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pre", { className: "whitespace-pre text-indigo-200/85", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("code", { children: snippet.code }) }) })
+  ] });
+}
+
+// src/components/DocViewer.tsx
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function DocViewer({ activeSnippet, setActiveSnippet }) {
+  const currentIndex = SNIPPETS.findIndex((s) => s.id === activeSnippet.id);
+  const totalSteps = SNIPPETS.length;
+  const isFirst = currentIndex === 0;
+  const isLast = currentIndex === totalSteps - 1;
+  const handlePrev = () => {
+    if (!isFirst) setActiveSnippet(SNIPPETS[currentIndex - 1]);
+  };
+  const handleNext = () => {
+    if (!isLast) setActiveSnippet(SNIPPETS[currentIndex + 1]);
+  };
+  const progressPercent = Math.round((currentIndex + 1) / totalSteps * 100);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col h-full p-6 gap-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-wrap gap-1.5 border-b border-slate-100 pb-5", children: SNIPPETS.map((snippet) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "button",
+      {
+        onClick: () => setActiveSnippet(snippet),
+        className: `px-4 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition-all border ${activeSnippet.id === snippet.id ? "bg-indigo-600 text-white border-indigo-600 shadow-sm scale-[1.03]" : "bg-slate-50 border-slate-200 text-slate-500 hover:text-indigo-600 hover:border-indigo-200 hover:bg-indigo-50"}`,
+        children: snippet.title
+      },
+      snippet.id
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "bg-slate-100 rounded-full h-1.5 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "div",
+      {
+        className: "h-full rounded-full transition-all duration-500",
+        style: {
+          width: `${progressPercent}%`,
+          background: "linear-gradient(90deg, #4f46e5, #7c3aed)",
+          boxShadow: "0 0 6px rgba(79, 102, 241, 0.4)"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex-grow flex flex-col gap-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-start justify-between gap-4 flex-wrap sm:flex-nowrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("h3", { className: "text-lg font-bold text-slate-900 mb-1.5 flex items-center gap-3", children: [
+            activeSnippet.title,
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-[9px] font-extrabold uppercase px-2 py-0.5 rounded bg-indigo-50 border border-indigo-100 text-indigo-600", children: [
+              "Step ",
+              currentIndex + 1,
+              " of ",
+              totalSteps
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-xs text-slate-500 leading-relaxed italic", children: activeSnippet.description })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-xs font-mono font-bold text-indigo-600 self-center shrink-0", children: [
+          progressPercent,
+          "% Complete"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CodeViewer, { snippet: activeSnippet }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between border-t border-slate-100 pt-5 mt-auto", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          "button",
+          {
+            onClick: handlePrev,
+            disabled: isFirst,
+            className: `flex items-center gap-2 px-5 py-2.5 rounded-xl text-xs font-bold transition-all border ${isFirst ? "opacity-35 cursor-not-allowed border-slate-100 text-slate-300 bg-slate-50" : "bg-white border-slate-200 text-slate-600 hover:border-slate-300 hover:bg-slate-50 active:scale-95"}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react15.ArrowLeft, { size: 13 }),
+              " Previous Step"
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          "button",
+          {
+            onClick: handleNext,
+            disabled: isLast,
+            className: `flex items-center gap-2 px-6 py-2.5 rounded-xl text-xs font-bold transition-all border ${isLast ? "opacity-35 cursor-not-allowed border-slate-100 text-slate-300 bg-slate-50" : "text-white border-transparent shadow-md active:scale-95 hover:-translate-y-0.5"}`,
+            style: !isLast ? { background: "linear-gradient(135deg, #4f46e5, #7c3aed)", boxShadow: "0 4px 14px -4px rgba(79,70,229,0.35)" } : {},
+            children: [
+              isLast ? "Complete!" : "Next Step",
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react15.ArrowRight, { size: 13 })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/Documentation.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function Documentation() {
+  const [activeSnippet, setActiveSnippet] = import_react15.default.useState(SNIPPETS[0]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "max-w-6xl mx-auto", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "text-center mb-14", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50 border border-indigo-100 text-[10px] font-bold uppercase tracking-widest text-indigo-600 mb-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-indigo-500 animate-pulse" }),
+        "Developer Guide"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "text-3xl md:text-4xl font-black text-slate-900 mb-4", children: LANDING_PAGE_CONTENT.guide.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-slate-500 max-w-xl mx-auto text-base leading-relaxed", children: LANDING_PAGE_CONTENT.guide.subtitle })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "w-full grid gap-8 lg:grid-cols-[270px_1fr] items-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("aside", { className: "flex flex-col gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("h2", { className: "mb-3 text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react16.FileText, { size: 12, className: "text-indigo-500" }),
+            " Quick Start"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ol", { className: "space-y-1", children: QUICK_START_STEPS.map((step, i) => {
+            const isActive = activeSnippet.id === step.id;
+            return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              "button",
+              {
+                onClick: () => {
+                  const s = SNIPPETS.find((s2) => s2.id === step.id);
+                  if (s) setActiveSnippet(s);
+                },
+                className: `w-full flex items-start gap-3 p-3 rounded-xl border text-left transition-all active:scale-[0.98] ${isActive ? "bg-indigo-50 border-indigo-200 shadow-sm" : "bg-white border-slate-200 hover:border-slate-300 hover:bg-slate-50"}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: `flex h-6 w-6 shrink-0 items-center justify-center rounded-lg font-mono text-[10px] font-bold border transition-all ${isActive ? "bg-indigo-600 text-white border-indigo-600 shadow-sm" : "bg-slate-100 text-slate-500 border-slate-200"}`, children: i + 1 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "pt-0.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: `text-xs font-semibold block ${isActive ? "text-indigo-700 font-bold" : "text-slate-700"}`, children: step.text }),
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "text-[9px] text-slate-400 block mt-0.5", children: [
+                      "Step ",
+                      i + 1
+                    ] })
+                  ] })
+                ]
+              }
+            ) }, step.id);
+          }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("h2", { className: "mb-3 text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react16.Code, { size: 12, className: "text-violet-500" }),
+            " Advanced Options"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ol", { className: "space-y-1", children: ADVANCED_STEPS.map((step, i) => {
+            const isActive = activeSnippet.id === step.id;
+            return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              "button",
+              {
+                onClick: () => {
+                  const s = SNIPPETS.find((s2) => s2.id === step.id);
+                  if (s) setActiveSnippet(s);
+                },
+                className: `w-full flex items-start gap-3 p-3 rounded-xl border text-left transition-all active:scale-[0.98] ${isActive ? "bg-violet-50 border-violet-200 shadow-sm" : "bg-white border-slate-200 hover:border-slate-300 hover:bg-slate-50"}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: `flex h-6 w-6 shrink-0 items-center justify-center rounded-lg font-mono text-[10px] font-bold border transition-all ${isActive ? "bg-violet-600 text-white border-violet-600 shadow-sm" : "bg-slate-100 text-slate-500 border-slate-200"}`, children: i + 5 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "pt-0.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: `text-xs font-semibold block ${isActive ? "text-violet-700 font-bold" : "text-slate-700"}`, children: step.text }),
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[9px] text-slate-400 block mt-0.5", children: "Extension" })
+                  ] })
+                ]
+              }
+            ) }, step.id);
+          }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { className: "rounded-2xl border border-slate-200 bg-white p-5 shadow-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("h2", { className: "mb-4 text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react16.Zap, { size: 12, className: "text-indigo-500" }),
+            " API Endpoints"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "grid gap-2", children: API_ENDPOINTS.map((slug) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            "div",
+            {
+              className: "flex items-center justify-between p-2.5 rounded-lg bg-slate-50 border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50 transition-all group",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "text-[10px] font-mono text-slate-500 group-hover:text-indigo-600 transition-colors", children: [
+                  "/api/",
+                  slug
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[8px] font-bold text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded border border-indigo-100", children: "POST" })
+              ]
+            },
+            slug
+          )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("section", { className: "flex flex-col h-full min-h-[560px]", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "rounded-2xl border border-slate-200 bg-white overflow-hidden h-full shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DocViewer, { activeSnippet, setActiveSnippet }) }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "mt-14 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "a",
+      {
+        href: "https://www.npmjs.com/package/@retrivora-ai/rag-engine",
+        target: "_blank",
+        rel: "noreferrer",
+        className: "inline-flex items-center gap-3 px-8 py-4 rounded-2xl text-white font-bold text-sm shadow-lg transition-all hover:-translate-y-0.5",
+        style: {
+          background: "linear-gradient(135deg, #4f46e5, #7c3aed)",
+          boxShadow: "0 8px 24px -6px rgba(79, 70, 229, 0.35)"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react16.Package, { className: "w-5 h-5" }),
+          "Get Started on NPM",
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react16.ExternalLink, { className: "w-4 h-4" })
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/AmbientBackground.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function AmbientBackground() {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "div",
+      {
+        className: "absolute -top-24 -left-24 w-[600px] h-[600px] rounded-full opacity-25 blur-3xl",
+        style: { background: "radial-gradient(circle, #c7d2fe 0%, #a5b4fc 40%, transparent 70%)" }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "div",
+      {
+        className: "absolute -top-20 right-0 w-[500px] h-[500px] rounded-full opacity-20 blur-3xl",
+        style: { background: "radial-gradient(circle, #ddd6fe 0%, #c4b5fd 50%, transparent 70%)" }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "div",
+      {
+        className: "absolute inset-0 opacity-[0.025]",
+        style: {
+          backgroundImage: "linear-gradient(#6366f1 1px, transparent 1px), linear-gradient(90deg, #6366f1 1px, transparent 1px)",
+          backgroundSize: "56px 56px"
+        }
+      }
     )
   ] });
 }
@@ -3439,13 +4345,18 @@ var AuthenticationException = class extends RetrivoraError {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AmbientBackground,
+  ArchitectureCardsSection,
   AuthenticationException,
   ChatWidget,
   ChatWindow,
   ConfigProvider,
   ConfigurationException,
   DocumentUpload,
+  Documentation,
   EmbeddingFailedException,
+  Hero,
+  Lifecycle,
   MessageBubble,
   ObservabilityPanel,
   ProviderNotFoundException,