{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "step-indicator",
  "type": "registry:component",
  "title": "StepIndicator",
  "description": "Visual pending, active and completed workflow step marker; pair with a text label. A React component for AI agent and conversational UI.",
  "author": "Beibei Zhang",
  "dependencies": [
    "react@19.2.5",
    "react-dom@19.2.5",
    "lucide-react@1.14.0"
  ],
  "files": [
    {
      "path": "components/step-indicator.tsx",
      "type": "registry:file",
      "target": "~/src/components/frame/step-indicator.tsx",
      "content": "\"use client\";\n\n// Frame component source. Keep the accompanying LICENSE and frame.css.\nimport { Check } from 'lucide-react';\n\nexport function StepIndicator({ status }: {\n    status: 'done' | 'in-progress' | 'pending';\n}) {\n    if (status === 'done') {\n        return <Check size={14} className=\"text-text-primary shrink-0\"/>;\n    }\n    if (status === 'in-progress') {\n        return (<div className=\"w-3.5 h-3.5 rounded-full border-2 flex items-center justify-center shrink-0\" style={{ borderColor: 'var(--color-text-primary)' }}>\n        <div className=\"w-1.5 h-1.5 rounded-full\" style={{ background: 'var(--color-text-primary)' }}/>\n      </div>);\n    }\n    return <div className=\"w-3.5 h-3.5 rounded-full border-2 shrink-0\" style={{ borderColor: 'var(--color-stroke-outline)' }}/>;\n}\n"
    },
    {
      "path": "styles/frame.css",
      "type": "registry:file",
      "target": "~/src/components/frame/frame.css",
      "content": ".frame-root *, .frame-root ::before, .frame-root ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n\n.frame-root ::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}/*\n! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com\n*/\n\n.frame-root *, .frame-root ::before, .frame-root ::after {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n  border-color: #e5e7eb;\n}\n\n.frame-root ::before, .frame-root ::after {\n  --tw-content: '';\n}\n\n.frame-root, .frame-root {\n  line-height: 1.5;\n  -webkit-text-size-adjust: 100%;\n  -moz-tab-size: 4;\n  tab-size: 4;\n  font-family: -apple-system, BlinkMacSystemFont, SF Pro, Inter, sans-serif;\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.frame-root {\n  margin: 0;\n  line-height: inherit;\n}\n\n.frame-root hr {\n  height: 0;\n  color: inherit;\n  border-top-width: 1px;\n}\n\n.frame-root abbr:where([title]) {\n  text-decoration: underline dotted;\n}\n\n.frame-root h1, .frame-root h2, .frame-root h3, .frame-root h4, .frame-root h5, .frame-root h6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n.frame-root a {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n.frame-root b, .frame-root strong {\n  font-weight: bolder;\n}\n\n.frame-root code, .frame-root kbd, .frame-root samp, .frame-root pre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n  font-size: 1em;\n}\n\n.frame-root small {\n  font-size: 80%;\n}\n\n.frame-root sub, .frame-root sup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\n.frame-root sub {\n  bottom: -0.25em;\n}\n\n.frame-root sup {\n  top: -0.5em;\n}\n\n.frame-root table {\n  text-indent: 0;\n  border-color: inherit;\n  border-collapse: collapse;\n}\n\n.frame-root button, .frame-root input, .frame-root optgroup, .frame-root select, .frame-root textarea {\n  font-family: inherit;\n  font-feature-settings: inherit;\n  font-variation-settings: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\n\n.frame-root button, .frame-root select {\n  text-transform: none;\n}\n\n.frame-root button, .frame-root input:where([type='button']), .frame-root input:where([type='reset']), .frame-root input:where([type='submit']) {\n  -webkit-appearance: button;\n  background-color: transparent;\n  background-image: none;\n}\n\n.frame-root :-moz-focusring {\n  outline: auto;\n}\n\n.frame-root :-moz-ui-invalid {\n  box-shadow: none;\n}\n\n.frame-root progress {\n  vertical-align: baseline;\n}\n\n.frame-root ::-webkit-inner-spin-button, .frame-root ::-webkit-outer-spin-button {\n  height: auto;\n}\n\n.frame-root [type='search'] {\n  -webkit-appearance: textfield;\n  outline-offset: -2px;\n}\n\n.frame-root ::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n.frame-root ::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  font: inherit;\n}\n\n.frame-root summary {\n  display: list-item;\n}\n\n.frame-root blockquote, .frame-root dl, .frame-root dd, .frame-root h1, .frame-root h2, .frame-root h3, .frame-root h4, .frame-root h5, .frame-root h6, .frame-root hr, .frame-root figure, .frame-root p, .frame-root pre {\n  margin: 0;\n}\n\n.frame-root fieldset {\n  margin: 0;\n  padding: 0;\n}\n\n.frame-root legend {\n  padding: 0;\n}\n\n.frame-root ol, .frame-root ul, .frame-root menu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.frame-root dialog {\n  padding: 0;\n}\n\n.frame-root textarea {\n  resize: vertical;\n}\n\n.frame-root input::placeholder, .frame-root textarea::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\n.frame-root button, .frame-root [role=\"button\"] {\n  cursor: pointer;\n}\n.frame-root :disabled {\n  cursor: default;\n}\n\n.frame-root img, .frame-root svg, .frame-root video, .frame-root canvas, .frame-root audio, .frame-root iframe, .frame-root embed, .frame-root object {\n  display: block;\n  vertical-align: middle;\n}\n\n.frame-root img, .frame-root video {\n  max-width: 100%;\n  height: auto;\n}\n.frame-root [hidden]:where(:not([hidden=\"until-found\"])) {\n  display: none;\n}\n.frame-root {\n  --white: #FFFFFF;\n  --black: #000000;\n  --navy: #142740;\n  --navy-deep: #001424;\n  --ice: #E2F3FF;\n  --gray-100: #F3F4F5;\n  --neutral-900: #1A1A1A;\n  --blue-500: #3171FF;\n  --blue-300: #73B2FF;\n  --green-500: #028901;\n  --error-700: #B42318;\n  --error-300: #F97066;\n  --warning-500: #F79009;\n  --warning-300: #FDB022;\n\n  --color-text-primary: var(--navy);\n  --color-text-secondary: color-mix(in srgb, var(--navy) 60%, transparent);\n  --color-text-tertiary: color-mix(in srgb, var(--navy) 40%, transparent);\n  --color-bg-page: var(--gray-100);\n  --color-bg-message: color-mix(in srgb, var(--navy) 5%, transparent);\n  --color-bg-hover: color-mix(in srgb, var(--navy) 5%, transparent);\n  --color-stroke-outline: color-mix(in srgb, var(--navy) 10%, transparent);\n  --color-sidebar-bg: var(--gray-100);\n  --color-overlay-surface-bg: var(--color-sidebar-bg);\n  --color-selected-bg: color-mix(in srgb, var(--blue-500) 10%, transparent);\n  --color-selected-text: var(--blue-500);\n  --color-card-panel-bg: var(--white);\n  --color-input-bg-active: var(--white);\n  --color-accent-blue: var(--blue-500);\n  --color-accent-green: var(--green-500);\n\n  --color-warning: var(--warning-500);\n  --color-error: var(--error-700);\n  --color-tooltip-bg: var(--neutral-900);\n  --color-focus-ring: var(--blue-500);\n  --color-fixed-dark-text: var(--navy);\n  --color-fixed-light-text: var(--white);\n  --color-media-action-hover: color-mix(in srgb, var(--white) 15%, transparent);\n  --color-text-hidden: transparent;\n  --color-selected-icon-tint: rgba(255, 255, 255, 0.15);\n  --color-scrim: color-mix(in srgb, var(--black) 55%, transparent);\n  --color-scrim-hover: color-mix(in srgb, var(--black) 70%, transparent);\n  --color-scrim-inverted: color-mix(in srgb, var(--white) 92%, transparent);\n  --color-scrim-inverted-hover: var(--white);\n\n  --font-h2-size: 16px;\n  --font-h2-lh: 22px;\n  --font-h2-weight: 400;\n  --font-h2-emphasized-weight: 700;\n  --font-h2-tracking: 0px;\n\n  --font-body-size: 16px;\n  --font-body-lh: 32px;\n  --font-body-weight: 400;\n  --font-body-emphasized-weight: 700;\n  --font-body-tracking: 0px;\n  --font-detail-size: 16px;\n  --font-detail-lh: 22px;\n  --font-detail-weight: 400;\n  --font-detail-emphasized-lh: 18px;\n  --font-detail-emphasized-weight: 700;\n  --font-detail-tracking: 0px;\n  --font-caption-size: 12px;\n  --font-caption-lh: 16px;\n  --font-caption-weight: 400;\n  --font-caption-tracking: 0px;\n  --font-footnote-size: 11px;\n  --font-footnote-lh: 1;\n  --font-footnote-weight: 400;\n  --font-footnote-tracking: 0px;\n  --motion-duration-fast: 150ms;\n  --motion-duration-normal: 200ms;\n  --motion-duration-slow: 300ms;\n  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  --motion-ease-decelerate: cubic-bezier(0.16, 1, 0.3, 1);\n}\n.dark .frame-root, .frame-root.dark {\n  --color-fixed-light-text: var(--white);\n  --color-media-action-hover: color-mix(in srgb, var(--white) 15%, transparent);\n  --color-text-primary: var(--white);\n  --color-text-secondary: color-mix(in srgb, var(--ice) 80%, transparent);\n  --color-text-tertiary: color-mix(in srgb, var(--ice) 40%, transparent);\n  --color-bg-page: var(--navy-deep);\n  --color-bg-message: color-mix(in srgb, var(--ice) 10%, transparent);\n  --color-bg-hover: color-mix(in srgb, var(--ice) 10%, transparent);\n  --color-stroke-outline: color-mix(in srgb, var(--blue-300) 20%, transparent);\n  --color-sidebar-bg: var(--navy-deep);\n  --color-overlay-surface-bg: rgba(0, 0, 0, 0.5);\n  --overlay-surface-blur: 10px;\n  --color-overlay-modal-dim: rgba(0, 0, 0, 0.4);\n  --color-selected-bg: var(--blue-500);\n  --color-selected-text: var(--white);\n  --color-card-panel-bg: color-mix(in srgb, var(--ice) 10%, transparent);\n  --color-input-bg-active: color-mix(in srgb, var(--black) 20%, transparent);\n\n  --color-warning: var(--warning-300);\n  --color-error: var(--error-300);\n  --color-focus-ring: var(--blue-300);\n}\n@media (min-width: 768px) {\n  .frame-root, .dark .frame-root, .frame-root.dark {\n    --font-detail-size: 14px;\n  }\n}\n.frame-root {\n  --shadow-popup: 0px 5px 8px 0px rgba(3, 65, 133, 0.17);\n}\n.dark .frame-root, .frame-root.dark {\n  --shadow-popup: none;\n}\n.frame-root .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0\n}\n.frame-root .pointer-events-none {\n    pointer-events: none\n}\n.frame-root .fixed {\n    position: fixed\n}\n.frame-root .absolute {\n    position: absolute\n}\n.frame-root .relative {\n    position: relative\n}\n.frame-root .inset-0 {\n    inset: 0px\n}\n.frame-root .bottom-full {\n    bottom: 100%\n}\n.frame-root .left-1\\/2 {\n    left: 50%\n}\n.frame-root .right-0 {\n    right: 0px\n}\n.frame-root .top-0 {\n    top: 0px\n}\n.frame-root .z-50 {\n    z-index: 50\n}\n.frame-root .-mx-4 {\n    margin-left: -1rem;\n    margin-right: -1rem\n}\n.frame-root .-my-1\\.5 {\n    margin-top: -0.375rem;\n    margin-bottom: -0.375rem\n}\n.frame-root .mx-auto {\n    margin-left: auto;\n    margin-right: auto\n}\n.frame-root .-mr-1 {\n    margin-right: -0.25rem\n}\n.frame-root .mb-1\\.5 {\n    margin-bottom: 0.375rem\n}\n.frame-root .ml-1 {\n    margin-left: 0.25rem\n}\n.frame-root .mt-0\\.5 {\n    margin-top: 0.125rem\n}\n.frame-root .mt-1 {\n    margin-top: 0.25rem\n}\n.frame-root .mt-2 {\n    margin-top: 0.5rem\n}\n.frame-root .mt-3 {\n    margin-top: 0.75rem\n}\n.frame-root .inline-block {\n    display: inline-block\n}\n.frame-root .flex {\n    display: flex\n}\n.frame-root .inline-flex {\n    display: inline-flex\n}\n.frame-root .hidden {\n    display: none\n}\n.frame-root .h-1\\.5 {\n    height: 0.375rem\n}\n.frame-root .h-10 {\n    height: 2.5rem\n}\n.frame-root .h-11 {\n    height: 2.75rem\n}\n.frame-root .h-12 {\n    height: 3rem\n}\n.frame-root .h-2 {\n    height: 0.5rem\n}\n.frame-root .h-3 {\n    height: 0.75rem\n}\n.frame-root .h-3\\.5 {\n    height: 0.875rem\n}\n.frame-root .h-4 {\n    height: 1rem\n}\n.frame-root .h-6 {\n    height: 1.5rem\n}\n.frame-root .h-7 {\n    height: 1.75rem\n}\n.frame-root .h-8 {\n    height: 2rem\n}\n.frame-root .h-\\[30px\\] {\n    height: 30px\n}\n.frame-root .h-\\[48px\\] {\n    height: 48px\n}\n.frame-root .h-\\[52px\\] {\n    height: 52px\n}\n.frame-root .h-full {\n    height: 100%\n}\n.frame-root .max-h-72 {\n    max-height: 18rem\n}\n.frame-root .max-h-full {\n    max-height: 100%\n}\n.frame-root .min-h-0 {\n    min-height: 0px\n}\n.frame-root .min-h-11 {\n    min-height: 2.75rem\n}\n.frame-root .min-h-12 {\n    min-height: 3rem\n}\n.frame-root .w-1 {\n    width: 0.25rem\n}\n.frame-root .w-1\\.5 {\n    width: 0.375rem\n}\n.frame-root .w-10 {\n    width: 2.5rem\n}\n.frame-root .w-11 {\n    width: 2.75rem\n}\n.frame-root .w-12 {\n    width: 3rem\n}\n.frame-root .w-2 {\n    width: 0.5rem\n}\n.frame-root .w-3\\.5 {\n    width: 0.875rem\n}\n.frame-root .w-4 {\n    width: 1rem\n}\n.frame-root .w-6 {\n    width: 1.5rem\n}\n.frame-root .w-7 {\n    width: 1.75rem\n}\n.frame-root .w-8 {\n    width: 2rem\n}\n.frame-root .w-\\[2\\.5px\\] {\n    width: 2.5px\n}\n.frame-root .w-\\[2px\\] {\n    width: 2px\n}\n.frame-root .w-full {\n    width: 100%\n}\n.frame-root .min-w-0 {\n    min-width: 0px\n}\n.frame-root .min-w-11 {\n    min-width: 2.75rem\n}\n.frame-root .min-w-\\[220px\\] {\n    min-width: 220px\n}\n.frame-root .max-w-\\[280px\\] {\n    max-width: 280px\n}\n.frame-root .max-w-\\[80\\%\\] {\n    max-width: 80%\n}\n.frame-root .max-w-\\[863px\\] {\n    max-width: 863px\n}\n.frame-root .max-w-full {\n    max-width: 100%\n}\n.frame-root .flex-1 {\n    flex: 1 1 0%\n}\n.frame-root .shrink-0 {\n    flex-shrink: 0\n}\n.frame-root .-translate-x-1\\/2 {\n    --tw-translate-x: -50%;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n@keyframes frame-pulse {\n    50% {\n        opacity: .5\n    }\n}\n.frame-root .animate-pulse {\n    animation: frame-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite\n}\n@keyframes frame-spin {\n    to {\n        transform: rotate(360deg)\n    }\n}\n.frame-root .animate-spin {\n    animation: frame-spin 1s linear infinite\n}\n.frame-root .cursor-default {\n    cursor: default\n}\n.frame-root .cursor-grab {\n    cursor: grab\n}\n.frame-root .cursor-help {\n    cursor: help\n}\n.frame-root .cursor-not-allowed {\n    cursor: not-allowed\n}\n.frame-root .cursor-pointer {\n    cursor: pointer\n}\n.frame-root .select-none {\n    user-select: none\n}\n.frame-root .resize-none {\n    resize: none\n}\n.frame-root .resize {\n    resize: both\n}\n.frame-root .flex-row {\n    flex-direction: row\n}\n.frame-root .flex-row-reverse {\n    flex-direction: row-reverse\n}\n.frame-root .flex-col {\n    flex-direction: column\n}\n.frame-root .flex-wrap {\n    flex-wrap: wrap\n}\n.frame-root .content-start {\n    align-content: flex-start\n}\n.frame-root .items-start {\n    align-items: flex-start\n}\n.frame-root .items-end {\n    align-items: flex-end\n}\n.frame-root .items-center {\n    align-items: center\n}\n.frame-root .justify-end {\n    justify-content: flex-end\n}\n.frame-root .justify-center {\n    justify-content: center\n}\n.frame-root .gap-1 {\n    gap: 0.25rem\n}\n.frame-root .gap-1\\.5 {\n    gap: 0.375rem\n}\n.frame-root .gap-2 {\n    gap: 0.5rem\n}\n.frame-root .gap-2\\.5 {\n    gap: 0.625rem\n}\n.frame-root .gap-3 {\n    gap: 0.75rem\n}\n.frame-root .gap-3\\.5 {\n    gap: 0.875rem\n}\n.frame-root .gap-4 {\n    gap: 1rem\n}\n.frame-root .gap-\\[2\\.5px\\] {\n    gap: 2.5px\n}\n.frame-root .gap-\\[2px\\] {\n    gap: 2px\n}\n.frame-root .self-stretch {\n    align-self: stretch\n}\n.frame-root .overflow-hidden {\n    overflow: hidden\n}\n.frame-root .overflow-x-auto {\n    overflow-x: auto\n}\n.frame-root .overflow-y-auto {\n    overflow-y: auto\n}\n.frame-root .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap\n}\n.frame-root .whitespace-nowrap {\n    white-space: nowrap\n}\n.frame-root .whitespace-pre-wrap {\n    white-space: pre-wrap\n}\n.frame-root .break-words {\n    overflow-wrap: break-word\n}\n.frame-root .rounded {\n    border-radius: 0.25rem\n}\n.frame-root .rounded-\\[12px\\] {\n    border-radius: 12px\n}\n.frame-root .rounded-\\[16px\\] {\n    border-radius: 16px\n}\n.frame-root .rounded-\\[4px\\] {\n    border-radius: 4px\n}\n.frame-root .rounded-full {\n    border-radius: 9999px\n}\n.frame-root .rounded-lg {\n    border-radius: 0.5rem\n}\n.frame-root .rounded-md {\n    border-radius: 0.375rem\n}\n.frame-root .rounded-xl {\n    border-radius: 0.75rem\n}\n.frame-root .rounded-tl-\\[4px\\] {\n    border-top-left-radius: 4px\n}\n.frame-root .rounded-tr-\\[4px\\] {\n    border-top-right-radius: 4px\n}\n.frame-root .border {\n    border-width: 1px\n}\n.frame-root .border-2 {\n    border-width: 2px\n}\n.frame-root .border-stroke-outline {\n    border-color: var(--color-stroke-outline)\n}\n.frame-root .border-transparent {\n    border-color: transparent\n}\n.frame-root .bg-accent-blue {\n    background-color: var(--color-accent-blue)\n}\n.frame-root .bg-bg-hover {\n    background-color: var(--color-bg-hover)\n}\n.frame-root .bg-bg-message {\n    background-color: var(--color-bg-message)\n}\n.frame-root .bg-current {\n    background-color: currentColor\n}\n.frame-root .bg-scrim {\n    background-color: var(--color-scrim)\n}\n.frame-root .bg-scrim-inverted {\n    background-color: var(--color-scrim-inverted)\n}\n.frame-root .bg-selected-bg {\n    background-color: var(--color-selected-bg)\n}\n.frame-root .bg-tooltip {\n    background-color: var(--color-tooltip-bg)\n}\n.frame-root .bg-transparent {\n    background-color: transparent\n}\n.frame-root .object-contain {\n    object-fit: contain\n}\n.frame-root .object-cover {\n    object-fit: cover\n}\n.frame-root .p-1 {\n    padding: 0.25rem\n}\n.frame-root .p-4 {\n    padding: 1rem\n}\n.frame-root .px-1 {\n    padding-left: 0.25rem;\n    padding-right: 0.25rem\n}\n.frame-root .px-1\\.5 {\n    padding-left: 0.375rem;\n    padding-right: 0.375rem\n}\n.frame-root .px-2 {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem\n}\n.frame-root .px-3 {\n    padding-left: 0.75rem;\n    padding-right: 0.75rem\n}\n.frame-root .px-4 {\n    padding-left: 1rem;\n    padding-right: 1rem\n}\n.frame-root .px-5 {\n    padding-left: 1.25rem;\n    padding-right: 1.25rem\n}\n.frame-root .px-6 {\n    padding-left: 1.5rem;\n    padding-right: 1.5rem\n}\n.frame-root .py-0\\.5 {\n    padding-top: 0.125rem;\n    padding-bottom: 0.125rem\n}\n.frame-root .py-1 {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem\n}\n.frame-root .py-1\\.5 {\n    padding-top: 0.375rem;\n    padding-bottom: 0.375rem\n}\n.frame-root .py-2 {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem\n}\n.frame-root .py-2\\.5 {\n    padding-top: 0.625rem;\n    padding-bottom: 0.625rem\n}\n.frame-root .py-3 {\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem\n}\n.frame-root .py-4 {\n    padding-top: 1rem;\n    padding-bottom: 1rem\n}\n.frame-root .py-6 {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem\n}\n.frame-root .py-8 {\n    padding-top: 2rem;\n    padding-bottom: 2rem\n}\n.frame-root .pb-3 {\n    padding-bottom: 0.75rem\n}\n.frame-root .pb-6 {\n    padding-bottom: 1.5rem\n}\n.frame-root .pr-1 {\n    padding-right: 0.25rem\n}\n.frame-root .pr-2 {\n    padding-right: 0.5rem\n}\n.frame-root .pt-2 {\n    padding-top: 0.5rem\n}\n.frame-root .pt-4 {\n    padding-top: 1rem\n}\n.frame-root .text-left {\n    text-align: left\n}\n.frame-root .text-center {\n    text-align: center\n}\n.frame-root .align-middle {\n    vertical-align: middle\n}\n.frame-root .font-mono {\n    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace\n}\n.frame-root .font-normal {\n    font-weight: 400\n}\n.frame-root .tracking-\\[-0\\.3px\\] {\n    letter-spacing: -0.3px\n}\n.frame-root .text-error {\n    color: var(--color-error)\n}\n.frame-root .text-selected-text {\n    color: var(--color-selected-text)\n}\n.frame-root .text-text-fixed-dark {\n    color: var(--color-fixed-dark-text)\n}\n.frame-root .text-text-fixed-light {\n    color: var(--color-fixed-light-text)\n}\n.frame-root .text-text-hidden {\n    color: var(--color-text-hidden)\n}\n.frame-root .text-text-primary {\n    color: var(--color-text-primary)\n}\n.frame-root .text-text-secondary {\n    color: var(--color-text-secondary)\n}\n.frame-root .text-text-tertiary {\n    color: var(--color-text-tertiary)\n}\n.frame-root .text-white {\n    --tw-text-opacity: 1;\n    color: rgb(255 255 255 / var(--tw-text-opacity, 1))\n}\n.frame-root .line-through {\n    text-decoration-line: line-through\n}\n.frame-root .placeholder-error::placeholder {\n    color: var(--color-error)\n}\n.frame-root .placeholder-text-tertiary::placeholder {\n    color: var(--color-text-tertiary)\n}\n.frame-root .caret-text-primary {\n    caret-color: var(--color-text-primary)\n}\n.frame-root .opacity-0 {\n    opacity: 0\n}\n.frame-root .opacity-100 {\n    opacity: 1\n}\n.frame-root .opacity-40 {\n    opacity: 0.4\n}\n.frame-root .opacity-50 {\n    opacity: 0.5\n}\n.frame-root .opacity-60 {\n    opacity: 0.6\n}\n.frame-root .opacity-70 {\n    opacity: 0.7\n}\n.frame-root .outline-none {\n    outline: 2px solid transparent;\n    outline-offset: 2px\n}\n.frame-root .outline {\n    outline-style: solid\n}\n.frame-root .ring-1 {\n    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)\n}\n.frame-root .ring-text-fixed-light {\n    --tw-ring-color: var(--color-fixed-light-text)\n}\n.frame-root .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.frame-root .backdrop-blur-md {\n    --tw-backdrop-blur: blur(12px);\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.frame-root .transition-\\[border-radius\\2c background-color\\2c box-shadow\\] {\n    transition-property: border-radius,background-color,box-shadow;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms\n}\n.frame-root .transition-all {\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms\n}\n.frame-root .transition-colors {\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms\n}\n.frame-root .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms\n}\n.frame-root .duration-200 {\n    transition-duration: 200ms\n}\n.frame-root .ease-out {\n    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)\n}\n.frame-root .\\[overflow-wrap\\:anywhere\\] {\n    overflow-wrap: anywhere\n}\n.frame-root .\\[zoom\\:0\\.8\\] {\n    zoom: 0.8\n}\n.frame-root .placeholder\\:truncate::placeholder {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap\n}\n.frame-root .hover\\:bg-bg-hover:hover {\n    background-color: var(--color-bg-hover)\n}\n.frame-root .hover\\:bg-media-action-hover:hover {\n    background-color: var(--color-media-action-hover)\n}\n.frame-root .hover\\:bg-scrim-hover:hover {\n    background-color: var(--color-scrim-hover)\n}\n.frame-root .hover\\:bg-scrim-inverted-hover:hover {\n    background-color: var(--color-scrim-inverted-hover)\n}\n.frame-root .hover\\:text-text-primary:hover {\n    color: var(--color-text-primary)\n}\n.frame-root .hover\\:opacity-70:hover {\n    opacity: 0.7\n}\n.frame-root .focus-visible\\:outline-none:focus-visible {\n    outline: 2px solid transparent;\n    outline-offset: 2px\n}\n.frame-root .focus-visible\\:outline-offset-\\[-2px\\]:focus-visible {\n    outline-offset: -2px\n}\n.frame-root .focus-visible\\:ring-2:focus-visible {\n    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)\n}\n.frame-root .focus-visible\\:ring-text-fixed-light:focus-visible {\n    --tw-ring-color: var(--color-fixed-light-text)\n}\n.frame-root .focus-visible\\:ring-white:focus-visible {\n    --tw-ring-opacity: 1;\n    --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1))\n}\n.frame-root .active\\:cursor-grabbing:active {\n    cursor: grabbing\n}\n.frame-root .enabled\\:hover\\:bg-bg-hover:hover:enabled {\n    background-color: var(--color-bg-hover)\n}\n.frame-root .disabled\\:cursor-default:disabled {\n    cursor: default\n}\n.frame-root .disabled\\:opacity-40:disabled {\n    opacity: 0.4\n}\n.frame-root .disabled\\:opacity-50:disabled {\n    opacity: 0.5\n}\n.frame-root .group:focus-within .group-focus-within\\:opacity-100 {\n    opacity: 1\n}\n.frame-root .group:hover .group-hover\\:opacity-100 {\n    opacity: 1\n}\n@media (prefers-reduced-motion: reduce) {\n    .frame-root .motion-reduce\\:animate-none {\n        animation: none\n    }\n    .frame-root .motion-reduce\\:transition-none {\n        transition-property: none\n    }\n}\n@media not all and (min-width: 768px) {\n    .frame-root .max-md\\:h-11 {\n        height: 2.75rem\n    }\n    .frame-root .max-md\\:w-11 {\n        width: 2.75rem\n    }\n    .frame-root .max-md\\:pr-12 {\n        padding-right: 3rem\n    }\n}\n@media (min-width: 640px) {\n    .frame-root .sm\\:px-8 {\n        padding-left: 2rem;\n        padding-right: 2rem\n    }\n}\n@media (min-width: 768px) {\n    .frame-root .md\\:h-10 {\n        height: 2.5rem\n    }\n    .frame-root .md\\:h-3\\.5 {\n        height: 0.875rem\n    }\n    .frame-root .md\\:h-5 {\n        height: 1.25rem\n    }\n    .frame-root .md\\:h-9 {\n        height: 2.25rem\n    }\n    .frame-root .md\\:h-\\[18px\\] {\n        height: 18px\n    }\n    .frame-root .md\\:min-h-0 {\n        min-height: 0px\n    }\n    .frame-root .md\\:w-10 {\n        width: 2.5rem\n    }\n    .frame-root .md\\:w-3\\.5 {\n        width: 0.875rem\n    }\n    .frame-root .md\\:w-5 {\n        width: 1.25rem\n    }\n    .frame-root .md\\:w-9 {\n        width: 2.25rem\n    }\n    .frame-root .md\\:w-\\[18px\\] {\n        width: 18px\n    }\n    .frame-root .md\\:px-3 {\n        padding-left: 0.75rem;\n        padding-right: 0.75rem\n    }\n    .frame-root .md\\:py-1 {\n        padding-top: 0.25rem;\n        padding-bottom: 0.25rem\n    }\n    .frame-root .md\\:opacity-0 {\n        opacity: 0\n    }\n    .frame-root .md\\:focus\\:opacity-100:focus {\n        opacity: 1\n    }\n    .frame-root .group:hover .md\\:group-hover\\:opacity-100 {\n        opacity: 1\n    }\n}\n@media(pointer:coarse) {\n    .frame-root .\\[\\@media\\(pointer\\:coarse\\)\\]\\:flex {\n        display: flex\n    }\n    .frame-root .\\[\\@media\\(pointer\\:coarse\\)\\]\\:hidden {\n        display: none\n    }\n    .frame-root .\\[\\@media\\(pointer\\:coarse\\)\\]\\:h-11 {\n        height: 2.75rem\n    }\n}\n.frame-root * {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n.frame-root strong, .frame-root b {\n  font-weight: var(--font-body-emphasized-weight, 700);\n}\n.frame-root *:focus-visible {\n  outline: 2px solid var(--color-focus-ring);\n  outline-offset: 2px;\n}\n.frame-root *:focus:not(:focus-visible) {\n  outline: none;\n}\n@media (prefers-reduced-motion: reduce) {\n  .frame-root *, .frame-root *::before, .frame-root *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n.frame-root ::-webkit-scrollbar {\n  width: 4px;\n}\n.frame-root ::-webkit-scrollbar-track {\n  background: transparent;\n}\n.frame-root ::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n}\n.dark .frame-root ::-webkit-scrollbar-thumb, .frame-root.dark ::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.15);\n}\n.frame-root .scrollbar-autohide {\n  scrollbar-width: thin;\n  scrollbar-color: transparent transparent;\n}\n.frame-root .scrollbar-autohide::-webkit-scrollbar-thumb {\n  background: transparent;\n  transition: background var(--motion-duration-slow) var(--motion-ease-standard);\n}\n.frame-root .scrollbar-autohide:hover::-webkit-scrollbar-thumb, .frame-root .scrollbar-autohide:active::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.15);\n}\n.dark .frame-root .scrollbar-autohide:hover::-webkit-scrollbar-thumb, .frame-root.dark .scrollbar-autohide:hover::-webkit-scrollbar-thumb, .dark .frame-root .scrollbar-autohide:active::-webkit-scrollbar-thumb, .frame-root.dark .scrollbar-autohide:active::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.15);\n}\n.frame-root .scrollbar-autohide:hover {\n  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;\n}\n.dark .frame-root .scrollbar-autohide:hover, .frame-root.dark .scrollbar-autohide:hover {\n  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;\n}\n.dark .frame-root .icon-theme, .frame-root.dark .icon-theme {\n  filter: brightness(0) invert(1);\n}\n.frame-root .gradient-btn {\n  background: linear-gradient(35.85deg, #7652B9 0%, #B46470 51.92%, #CA9D8C 100%);\n  color: #FFFFFF;\n  box-shadow:\n    inset 0 0 0 1px rgba(255, 255, 255, 0.12),\n    0px 8px 11.7px 0px rgba(20, 39, 64, 0.17);\n  transition: box-shadow var(--motion-duration-fast) var(--motion-ease-standard);\n}\n.frame-root .gradient-btn svg { color: #FFFFFF; }\n.frame-root .gradient-btn:not(:disabled):hover {\n  box-shadow:\n    inset 0 0 0 1px rgba(255, 255, 255, 0.12),\n    0px 12px 20.1px 0px rgba(20, 39, 64, 0.22);\n}\n.frame-root .gradient-btn:not(:disabled):active {\n  box-shadow:\n    inset 0 0 0 1px rgba(255, 255, 255, 0.12),\n    0px 4px 8px 0px rgba(20, 39, 64, 0.2);\n}\n.dark .frame-root .gradient-btn:not(:disabled):hover, .frame-root.dark .gradient-btn:not(:disabled):hover {\n  box-shadow:\n    inset 0 0 0 1px rgba(255, 255, 255, 0.30),\n    0px 12px 20.1px 0px rgba(255, 255, 255, 0.20);\n}\n.dark .frame-root .gradient-btn:not(:disabled):active, .frame-root.dark .gradient-btn:not(:disabled):active {\n  box-shadow:\n    inset 0 0 0 1px rgba(255, 255, 255, 0.30),\n    0px 4px 8px 0px rgba(255, 255, 255, 0.24);\n}\n.frame-root .inverted-btn {\n  background: var(--color-text-primary);\n  color: var(--color-bg-page);\n  transition: box-shadow var(--motion-duration-fast) var(--motion-ease-standard);\n}\n.frame-root .inverted-btn:not(:disabled):hover {\n  box-shadow: 0px 8px 11.7px 0px rgba(20, 39, 64, 0.17);\n}\n.frame-root .inverted-btn:not(:disabled):active {\n  box-shadow: 0px 4px 8px 0px rgba(20, 39, 64, 0.2);\n}\n.dark .frame-root .inverted-btn:not(:disabled):hover, .frame-root.dark .inverted-btn:not(:disabled):hover {\n  box-shadow: 0px 8px 11.7px 0px rgba(255, 255, 255, 0.18);\n}\n.dark .frame-root .inverted-btn:not(:disabled):active, .frame-root.dark .inverted-btn:not(:disabled):active {\n  box-shadow: 0px 4px 8px 0px rgba(255, 255, 255, 0.24);\n}\n.frame-root .message-appear {\n  animation: frame-fadeInUp var(--motion-duration-normal) var(--motion-ease-decelerate);\n}\n.frame-root .typing-dot {\n  animation: frame-typingBounce 1.4s infinite ease-in-out;\n}\n.frame-root .typing-dot:nth-child(1) { animation-delay: 0s; }\n.frame-root .typing-dot:nth-child(2) { animation-delay: 0.2s; }\n.frame-root .typing-dot:nth-child(3) { animation-delay: 0.4s; }\n.frame-root .chip-gradient-hover, .frame-root .input-gradient-hover, .dark .frame-root .toolbar-gradient-hover, .frame-root.dark .toolbar-gradient-hover {\n  position: relative;\n}\n.frame-root .chip-gradient-hover:not(:disabled):hover, .frame-root .input-gradient-hover:not(:disabled):hover, .dark .frame-root .toolbar-gradient-hover:not(:disabled):hover, .frame-root.dark .toolbar-gradient-hover:not(:disabled):hover {\n  border-color: transparent !important;\n}\n.frame-root .chip-gradient-hover:not(:disabled):hover::before, .frame-root .input-gradient-hover:not(:disabled):hover::before, .dark .frame-root .toolbar-gradient-hover:not(:disabled):hover::before, .frame-root.dark .toolbar-gradient-hover:not(:disabled):hover::before {\n  content: '';\n  position: absolute;\n  border-radius: inherit;\n  padding: 1px;\n  background: linear-gradient(74deg, #7652B9 0%, #B46470 52%, #CA9D8C 100%);\n  -webkit-mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  mask-composite: exclude;\n  pointer-events: none;\n}\n.frame-root .chip-gradient-hover:not(:disabled):hover::before, .dark .frame-root .toolbar-gradient-hover:not(:disabled):hover::before, .frame-root.dark .toolbar-gradient-hover:not(:disabled):hover::before {\n  inset: -1px;\n}\n.frame-root .input-gradient-hover:not(:disabled):hover::before {\n  inset: -2px;\n}\n.frame-root .input-gradient-border {\n  position: relative;\n}\n.frame-root .input-gradient-border::before {\n  content: '';\n  position: absolute;\n  inset: -2px;\n  border-radius: inherit;\n  padding: 2px;\n  background: linear-gradient(74deg, #7652B9 0%, #B46470 52%, #CA9D8C 100%);\n  -webkit-mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  mask-composite: exclude;\n  pointer-events: none;\n}\n.frame-root .type-h2 {\n  font-size: var(--font-h2-size);\n  line-height: var(--font-h2-lh);\n  font-weight: var(--font-h2-weight);\n  letter-spacing: var(--font-h2-tracking);\n}\n.frame-root .type-h2-emphasized {\n  font-size: var(--font-h2-size);\n  line-height: var(--font-h2-lh);\n  font-weight: var(--font-h2-emphasized-weight);\n  letter-spacing: var(--font-h2-tracking);\n}\n.frame-root .type-body {\n  font-size: var(--font-body-size);\n  line-height: var(--font-body-lh);\n  font-weight: var(--font-body-weight);\n  letter-spacing: var(--font-body-tracking);\n}\n.frame-root .type-detail {\n  font-size: var(--font-detail-size);\n  line-height: var(--font-detail-lh);\n  font-weight: var(--font-detail-weight);\n  letter-spacing: var(--font-detail-tracking);\n}\n.frame-root .type-detail-emphasized {\n  font-size: var(--font-detail-size);\n  line-height: var(--font-detail-emphasized-lh);\n  font-weight: var(--font-detail-emphasized-weight);\n  letter-spacing: var(--font-detail-tracking);\n}\n.frame-root .type-caption {\n  font-size: var(--font-caption-size);\n  line-height: var(--font-caption-lh);\n  font-weight: var(--font-caption-weight);\n  letter-spacing: var(--font-caption-tracking);\n}\n.frame-root .type-footnote {\n  font-size: var(--font-footnote-size);\n  line-height: var(--font-footnote-lh);\n  font-weight: var(--font-footnote-weight);\n  letter-spacing: var(--font-footnote-tracking);\n}\n.frame-root .chip-selected {\n  background: var(--color-selected-bg);\n  color: var(--color-selected-text);\n  border: 1px solid transparent;\n}\n.frame-root .panel-border {\n  border: 1px solid var(--color-card-panel-bg);\n}\n.dark .frame-root .panel-border, .frame-root.dark .panel-border {\n  border-color: var(--color-stroke-outline);\n}\n.frame-root .overlay-surface {\n  background: var(--color-overlay-surface-bg);\n}\n.dark .frame-root .overlay-surface, .frame-root.dark .overlay-surface {\n  -webkit-backdrop-filter: blur(var(--overlay-surface-blur));\n  backdrop-filter: blur(var(--overlay-surface-blur));\n}\n.dark .frame-root .overlay-modal-dim, .frame-root.dark .overlay-modal-dim {\n  background: transparent;\n}\n.dark .frame-root .overlay-modal-dim-ring, .frame-root.dark .overlay-modal-dim-ring {\n  box-shadow: 0 0 0 100vmax var(--color-overlay-modal-dim);\n}\n.dark .frame-root .overlay-dialog-dim::backdrop, .frame-root.dark .overlay-dialog-dim::backdrop {\n  background: transparent;\n}\n.frame-root .status-pending     { --status-bg: rgba(245,158,11,0.15);  --status-fg: #B8541A; }\n.frame-root .status-in-progress { --status-bg: rgba(49,113,255,0.1);   --status-fg: #3171FF; }\n.frame-root .status-submitted   { --status-bg: rgba(118,82,185,0.15);  --status-fg: #6B54E6; }\n.frame-root .status-in-review   { --status-bg: rgba(234,179,8,0.18);   --status-fg: #A87725; }\n.frame-root .status-success     { --status-bg: rgba(2,137,1,0.1);      --status-fg: #028901; }\n.frame-root .status-failed      { --status-bg: rgba(220,38,38,0.12);   --status-fg: #C93838; }\n.frame-root .status-expired     { --status-bg: rgba(107,114,128,0.15); --status-fg: #6B7280; }\n.frame-root .status-neutral     { --status-bg: var(--color-bg-hover);  --status-fg: var(--color-text-primary); }\n.dark .frame-root .status-pending, .frame-root.dark .status-pending     { --status-bg: #F59E0B; --status-fg: #FFFFFF; }\n.dark .frame-root .status-in-progress, .frame-root.dark .status-in-progress { --status-bg: #3171FF; --status-fg: #FFFFFF; }\n.dark .frame-root .status-submitted, .frame-root.dark .status-submitted   { --status-bg: #7652B9; --status-fg: #FFFFFF; }\n.dark .frame-root .status-in-review, .frame-root.dark .status-in-review   { --status-bg: #EAB308; --status-fg: #FFFFFF; }\n.dark .frame-root .status-success, .frame-root.dark .status-success     { --status-bg: #028901; --status-fg: #FFFFFF; }\n.dark .frame-root .status-failed, .frame-root.dark .status-failed      { --status-bg: #DC2626; --status-fg: #FFFFFF; }\n.dark .frame-root .status-expired, .frame-root.dark .status-expired     { --status-bg: #6B7280; --status-fg: #FFFFFF; }\n.frame-root .chat-textarea {\n  scrollbar-width: none;\n}\n.frame-root .chat-textarea-inset {\n  padding-top: 11px;\n  padding-bottom: 11px;\n}\n.frame-root .chat-textarea::-webkit-scrollbar {\n  display: none;\n  width: 0;\n  height: 0;\n}\n@keyframes frame-fadeInUp {\n  from { opacity: 0; transform: translateY(8px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n@keyframes frame-typingBounce {\n  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }\n  30% { transform: translateY(-5px); opacity: 1; }\n}\n"
    }
  ],
  "docs": "React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import the accompanying frame.css once and wrap Frame content in a div with className=\"frame-root\". Set the wrapper background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface. Add dark to an ancestor or that wrapper for dark mode. CSS is generated from Tailwind 3 and scoped; it does not replace your Tailwind config or global theme. Optional microphone and voice features are off in examples. Import ./frame.css next to the installed components. Review LICENSE at the source repository."
}