@blade-hq/agent-react 1.2.1-beta.9 → 2608.0.0

package/dist/style.full.css

@@ -0,0 +1,675 @@
+/* 本文件由 scripts/gen-embed-styles.mjs 生成，请勿手改（已 gitignore）。 */
+/* style.full.css 专用：把 Tailwind preflight 里组件真正依赖的几条，限定在 .blade-chat
+ * 子树内重放一遍。
+ *
+ * 为什么不直接用 preflight：它作用在整个文档上（`*`、`html`、`button`、`ol,ul`……），
+ * 而 React 接入方是全局 import 这份样式的，宿主自己的业务界面会被一起推平——标题塌成
+ * 正文、列表没有符号、按钮丢掉边框和背景。Shadow DOM 里的 embed-styles.css 不受影响，
+ * 所以那份仍然用完整 preflight。
+ *
+ * 两个优先级前提，改这个文件前先确认还成立：
+ * - 必须放在 style.css **之前**。`.blade-chat *` 和 style.css 里的 .blade-chat-xxx
+ *   同为 (0,1,0)，靠先后顺序分胜负；放后面会把输入框边框这类兜底样式抹掉。
+ * - 必须包在 @layer base 里。style.css 是无层样式，优先级高于任何 @layer；这里如果
+ *   也不分层，就会盖住 @layer utilities 里的 Tailwind 工具类，组件的 p-4、gap-2 全部失效。 */
+@layer theme, base, components, utilities;
+
+@layer base {
+  /* preflight 是在 html 上设 line-height 的，组件内所有排版都按它算。不补这一条，
+   * 行距会退回浏览器的 normal（约 1.2），整个聊天区比 Shadow DOM 版挤一圈。
+   * 字体不跟着设：让组件继承宿主的字体，和"宿主自己装了 Tailwind"那条路径一致。 */
+  .blade-chat {
+    line-height: 1.5;
+  }
+
+  .blade-chat,
+  .blade-chat *,
+  .blade-chat *::before,
+  .blade-chat *::after {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+
+  .blade-chat h1,
+  .blade-chat h2,
+  .blade-chat h3,
+  .blade-chat h4,
+  .blade-chat h5,
+  .blade-chat h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  .blade-chat ol,
+  .blade-chat ul,
+  .blade-chat menu {
+    list-style: none;
+  }
+
+  .blade-chat img,
+  .blade-chat svg,
+  .blade-chat video,
+  .blade-chat canvas,
+  .blade-chat audio,
+  .blade-chat iframe,
+  .blade-chat embed,
+  .blade-chat object {
+    display: block;
+    vertical-align: middle;
+  }
+
+  .blade-chat img,
+  .blade-chat video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .blade-chat button,
+  .blade-chat input,
+  .blade-chat select,
+  .blade-chat optgroup,
+  .blade-chat textarea {
+    font: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    background-color: transparent;
+    border-radius: 0;
+    opacity: 1;
+  }
+
+  .blade-chat button,
+  .blade-chat input:where([type="button"], [type="reset"], [type="submit"]) {
+    appearance: button;
+  }
+
+  .blade-chat textarea {
+    resize: vertical;
+  }
+
+  .blade-chat ::placeholder {
+    opacity: 1;
+    color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
+
+  .blade-chat a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  .blade-chat b,
+  .blade-chat strong {
+    font-weight: bolder;
+  }
+
+  .blade-chat code,
+  .blade-chat kbd,
+  .blade-chat samp,
+  .blade-chat pre {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    font-size: 1em;
+  }
+
+  .blade-chat table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  .blade-chat hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  .blade-chat summary {
+    display: list-item;
+  }
+
+  .blade-chat [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+
+/*
+ * @blade-hq/agent-react 自包含样式。
+ *
+ * 组件同时携带 Tailwind class 与 blade-chat-* 前缀类：宿主项目装了 Tailwind 时
+ * 由 Tailwind 提供完整视觉；没装时，本文件为核心布局与配色提供等效的普通 CSS，
+ * 保证聊天界面开箱可用。所有颜色经由 CSS 变量，宿主可整体换肤。
+ */
+
+:root,
+:host {
+  --background: 0 0% 100%;
+  --foreground: 215 13% 15%;
+  --card: 0 0% 100%;
+  --card-foreground: 215 13% 15%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 215 13% 15%;
+  --primary: 223 100% 54%;
+  --primary-foreground: 0 0% 100%;
+  --muted: 220 40% 95%;
+  --muted-foreground: 220 9% 52%;
+  --accent: 220 100% 92%;
+  --accent-foreground: 215 13% 15%;
+  --destructive: 0 100% 50%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 220 20% 90%;
+  --input: 220 20% 96%;
+  --ring: 223 100% 54%;
+  --radius: 0.4rem;
+  --user-msg-bg: 220 9% 95%;
+  --user-msg-fg: 215 13% 15%;
+  --user-msg-border: 220 15% 88%;
+}
+
+[data-theme="dark"] {
+  --background: 222 22% 5%;
+  --foreground: 210 18% 88%;
+  --card: 222 20% 8%;
+  --card-foreground: 210 18% 88%;
+  --popover: 222 18% 10%;
+  --popover-foreground: 210 18% 88%;
+  --primary: 38 88% 60%;
+  --primary-foreground: 222 22% 6%;
+  --muted: 222 16% 11%;
+  --muted-foreground: 220 8% 48%;
+  --accent: 222 16% 13%;
+  --accent-foreground: 210 18% 88%;
+  --destructive: 0 65% 55%;
+  --destructive-foreground: 210 18% 95%;
+  --border: 222 12% 17%;
+  --input: 222 12% 13%;
+  --ring: 38 88% 60%;
+  --user-msg-bg: 38 22% 12%;
+  --user-msg-fg: 38 65% 80%;
+  --user-msg-border: 38 30% 19%;
+}
+
+/* ---------------------------------------------------------------- 布局骨架 */
+
+/* <blade-chat> 宿主默认块级 + 默认高度；页面对元素写的任何尺寸规则都会覆盖
+ * :host 默认值。host 容器把高度传导给内部 flex 链，消息区撑满、输入框钉底。 */
+:host {
+  display: block;
+  height: 560px;
+}
+
+.blade-chat-host {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 聊天根容器。SDK 常被嵌进只有 300-400px 宽的侧栏，而宿主页面视口是全宽的，
+ * 所以内边距一律按「容器宽度」伸缩，不能用视口断点——那会在窄容器里反向命中最大值。
+ * container-type 建在这里（而不是消息区），是为了让消息区和输入区共享同一个 cqi
+ * 基准，两者左右边缘才对得齐。代价是内部内容不再向外传递固有宽度，所以宿主需要给
+ * 容器一个确定宽度（flex/grid 拉伸或显式宽度都可以）。 */
+.blade-chat {
+  /* 具名容器：宿主或以后的子组件万一在中间又建了个匿名 query container，
+   * 下面的 @container 查询不会悄悄改成以那个为基准。 */
+  container: blade-chat / inline-size;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  --blade-chat-gutter: 1rem;
+  --blade-chat-turn-gap: 1.5rem;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    "PingFang SC",
+    "Microsoft YaHei",
+    sans-serif;
+}
+
+/* 上面两个变量的兜底值必须留在 @supports 外面。不能靠「同一个变量写两遍、让浏览器
+ * 丢掉无效的那条」降级：自定义属性在声明处不做类型校验，带 cqi 的值在旧浏览器里同样是
+ * 合法 token、照样覆盖兜底值，失效发生在 padding: var(...) 的使用处——结果是整条 padding
+ * 作废变成 0，而不是回落到兜底值。 */
+@supports (container-type: inline-size) and (width: 1cqi) {
+  .blade-chat {
+    --blade-chat-gutter: clamp(0.875rem, 4cqi, 2.5rem);
+    --blade-chat-turn-gap: clamp(1.25rem, 3cqi, 2.25rem);
+  }
+}
+
+.blade-chat-messages {
+  position: relative;
+  flex: 1 1 0%;
+  min-height: 0;
+}
+
+/* 滚动内容的内边距。这一层过去只有 Tailwind class，宿主没装 Tailwind 时消息完全贴边。 */
+.blade-chat-messages-scroll {
+  padding: calc(var(--blade-chat-gutter) * 1.4) var(--blade-chat-gutter)
+    calc(var(--blade-chat-gutter) * 1.1);
+}
+
+.blade-chat-messages-content {
+  margin: 0 auto;
+  max-width: 748px;
+}
+
+.blade-chat-messages-content > div {
+  display: flex;
+  flex-direction: column;
+  gap: var(--blade-chat-turn-gap);
+  min-width: 0;
+}
+
+.blade-chat-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  /* 这里的双写是有效降级：cqi 出现在属性值里，旧浏览器会丢掉整条声明并回落到上一条。 */
+  padding: 4rem 0;
+  padding: clamp(2.5rem, 12cqi, 6rem) 0;
+  color: hsl(var(--muted-foreground));
+}
+
+.blade-chat-login,
+.blade-chat-version-mismatch {
+  display: flex;
+  flex: 1 1 0%;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+}
+
+/* ---------------------------------------------------------------- 消息气泡 */
+
+.blade-chat-user-row {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.blade-chat-user-col {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.75rem;
+  max-width: 72%;
+}
+
+/* 窄容器里 72% 只剩 250px 左右，一句话就折三行，这里放宽。
+ * 这类需要跳变而非连续伸缩的值才用 @container 查询。 */
+@container blade-chat (max-width: 480px) {
+  .blade-chat-user-col {
+    max-width: 88%;
+  }
+
+  .blade-chat-scroll-bottom-label {
+    display: none;
+  }
+}
+
+.blade-chat-user-bubble {
+  max-width: 100%;
+  border: 1px solid hsl(var(--user-msg-border));
+  background: hsl(var(--user-msg-bg));
+  color: hsl(var(--user-msg-fg));
+  border-radius: 20px;
+  border-bottom-right-radius: 6px;
+  padding: 13px 18px;
+  font-size: 0.875rem;
+  line-height: 1.65;
+}
+
+.blade-chat-assistant-turn {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.blade-chat-assistant-text {
+  font-size: 15px;
+  line-height: 2;
+  color: hsl(var(--foreground));
+}
+
+.blade-chat-error-row {
+  display: flex;
+  justify-content: center;
+}
+
+.blade-chat-error-block {
+  max-width: 85%;
+  border-left: 3px solid hsl(var(--border));
+  padding: 0.25rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.75rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.blade-chat-error-bar {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  border-bottom: 1px solid hsl(var(--destructive) / 0.3);
+  background: hsl(var(--destructive) / 0.08);
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  color: hsl(var(--destructive));
+}
+
+/* ---------------------------------------------------------------- 输入区 */
+
+/* 左右内边距和消息区共用同一个 gutter，否则输入框与消息文字左边缘对不齐。 */
+.blade-chat-input {
+  border-top: 1px solid hsl(var(--border));
+  padding: 0.75rem var(--blade-chat-gutter);
+}
+
+.blade-chat-input-inner {
+  margin: 0 auto;
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  max-width: 748px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+  border-radius: 1rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.blade-chat-textarea {
+  flex: 1 1 0%;
+  resize: none;
+  border: 0;
+  background: transparent;
+  color: hsl(var(--foreground));
+  font: inherit;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  padding: 0.25rem 0;
+  min-height: 28px;
+  max-height: 12rem;
+  outline: none;
+}
+
+.blade-chat-input-inner button {
+  cursor: pointer;
+  border: 0;
+}
+
+/* ------------------------------------------------------------ 文件下载卡片 */
+
+.blade-chat-file-card {
+  display: inline-flex;
+  max-width: 100%;
+  margin: 0.25rem 0.5rem 0.25rem 0;
+  align-items: center;
+  gap: 0.5rem;
+  vertical-align: middle;
+}
+
+.blade-chat-file-card button {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.375rem;
+  cursor: pointer;
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  background: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  text-align: left;
+}
+
+.blade-chat-file-card button:hover:not(:disabled) {
+  background: hsl(var(--accent) / 0.45);
+  border-color: hsl(var(--primary) / 0.45);
+}
+
+.blade-chat-file-card button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.blade-chat-file-card-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: hsl(var(--primary));
+}
+
+/* 窄容器里文件名不能写死上限，否则短名字留白、长名字仍然顶宽。 */
+.blade-chat-file-card-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 15rem;
+  max-width: min(15rem, 60cqi);
+}
+
+.blade-chat-file-card-action {
+  flex-shrink: 0;
+  color: hsl(var(--muted-foreground));
+}
+
+.blade-chat-file-card-error {
+  font-size: 0.6875rem;
+  color: hsl(var(--destructive));
+}
+
+/* ---------------------------------------------------------------- 工具块 */
+
+.blade-chat-tool,
+.blade-chat-agent-loop,
+.blade-chat-thinking {
+  margin-left: 1rem;
+  font-size: 0.75rem;
+}
+
+.blade-chat-tool-detail pre {
+  overflow: auto;
+  white-space: pre-wrap;
+  border-radius: 0.375rem;
+  background: hsl(var(--muted));
+  padding: 0.5rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  color: hsl(var(--foreground));
+}
+
+/* ---------------------------------------------------------------- Markdown */
+
+.blade-chat-markdown {
+  overflow-wrap: break-word;
+  min-width: 0;
+}
+
+/* 窄容器里真正把版面撑破的是内容而不是内边距：宽表格、大图、超长 URL 都会把整个
+ * 消息区顶宽，然后出现一条横向滚动条。表格自己滚，图片自己缩，长 token 强制断行。 */
+.blade-chat-markdown [data-streamdown="table-wrapper"] {
+  max-width: 100%;
+  min-width: 0;
+}
+
+/* 横向滚动发生在 table 的父层。streamdown 用 Tailwind 的 overflow-x-auto 实现它，
+ * 宿主没装 Tailwind 时那个类是空的，所以这里用普通 CSS 兜住。 */
+.blade-chat-markdown [data-streamdown="table-wrapper"] > div:last-child {
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+.blade-chat-markdown img,
+.blade-chat-markdown video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* 长 URL 和长内联代码是撑宽的另外两个常见肇事者。用 anywhere 而不是 break-word：
+ * 只有 anywhere 参与 min-content 计算，break-word 挡不住 flex item 被顶宽。 */
+.blade-chat-markdown :not(pre) > code,
+.blade-chat-markdown a {
+  overflow-wrap: anywhere;
+}
+
+.blade-chat-prose p {
+  margin: 0.5em 0;
+}
+
+.blade-chat-prose > p:first-child,
+.blade-chat-prose > ul:first-child,
+.blade-chat-prose > ol:first-child {
+  margin-top: 0;
+}
+
+.blade-chat-prose > p:last-child,
+.blade-chat-prose > ul:last-child,
+.blade-chat-prose > ol:last-child {
+  margin-bottom: 0;
+}
+
+.blade-chat-prose ul,
+.blade-chat-prose ol {
+  margin: 0.5em 0;
+  padding-left: 1.4em;
+}
+
+.blade-chat-prose li {
+  margin: 0.25em 0;
+}
+
+.blade-chat-prose h1 {
+  font-size: 1.25em;
+  font-weight: 600;
+  margin: 1em 0 0.5em;
+}
+
+.blade-chat-prose h2 {
+  font-size: 1.15em;
+  font-weight: 600;
+  margin: 1em 0 0.5em;
+}
+
+.blade-chat-prose h3,
+.blade-chat-prose h4 {
+  font-size: 1.05em;
+  font-weight: 600;
+  margin: 0.9em 0 0.4em;
+}
+
+.blade-chat-prose blockquote {
+  border-left: 3px solid hsl(var(--border));
+  margin: 0.5em 0;
+  padding-left: 0.9em;
+  color: hsl(var(--muted-foreground));
+}
+
+.blade-chat-prose a {
+  color: hsl(var(--primary));
+  text-decoration: underline;
+}
+
+.blade-chat-prose code {
+  background: hsl(var(--muted) / 0.6);
+  border-radius: 0.25rem;
+  padding: 0.1em 0.35em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.9em;
+}
+
+.blade-chat-prose table {
+  border-collapse: collapse;
+  margin: 0.75em 0;
+  width: 100%;
+}
+
+.blade-chat-prose th,
+.blade-chat-prose td {
+  border: 1px solid hsl(var(--border));
+  padding: 0.4em 0.7em;
+  text-align: left;
+}
+
+.blade-chat-codeblock {
+  margin: 0.75rem 0;
+  overflow: hidden;
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.75rem;
+}
+
+.blade-chat-codeblock-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 34px;
+  border-bottom: 1px solid hsl(var(--border));
+  background: hsl(var(--muted) / 0.5);
+  padding: 0 0.375rem 0 0.875rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.blade-chat-codeblock-header button {
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: inherit;
+}
+
+.blade-chat-codeblock-body {
+  margin: 0;
+  overflow-x: auto;
+  background: hsl(var(--muted) / 0.25);
+  padding: 0.875rem 1rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13.5px;
+  line-height: 1.7;
+}
+
+.blade-chat-codeblock-body code {
+  background: transparent;
+  padding: 0;
+}
+
+/* ---------------------------------------------------------------- 动效 */
+
+.blade-shimmer-text {
+  background: linear-gradient(
+    90deg,
+    hsl(var(--muted-foreground)) 0%,
+    hsl(var(--foreground)) 50%,
+    hsl(var(--muted-foreground)) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: blade-shimmer 2s linear infinite;
+}
+
+@keyframes blade-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+
+/* ---- Tailwind 编译产物（无 preflight） ---- */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-amber-100:oklch(96.2% .059 95.617);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-500:oklch(62.3% .214 259.815);--color-rose-100:oklch(94.1% .03 12.58);--color-rose-500:oklch(64.5% .246 16.439);--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-lg:32rem;--container-2xl:42rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--font-weight-medium:500;--font-weight-semibold:600;--tracking-wider:.05em;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer utilities{.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.static{position:static}.right-4{right:calc(var(--spacing) * 4)}.bottom-4{bottom:calc(var(--spacing) * 4)}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-0{margin:0}.mx-auto{margin-inline:auto}.my-3{margin-block:calc(var(--spacing) * 3)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mb-1{margin-bottom:var(--spacing)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.ml-4{margin-left:calc(var(--spacing) * 4)}.flex{display:flex}.grid{display:grid}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-\[34px\]{height:34px}.h-full{height:100%}.h-px{height:1px}.max-h-48{max-height:calc(var(--spacing) * 48)}.max-h-64{max-height:calc(var(--spacing) * 64)}.max-h-\[400px\]{max-height:400px}.min-h-0{min-height:0}.min-h-\[28px\]{min-height:28px}.w-4{width:calc(var(--spacing) * 4)}.w-8{width:calc(var(--spacing) * 8)}.w-fit{width:fit-content}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-56{max-width:calc(var(--spacing) * 56)}.max-w-\[72\%\]{max-width:72%}.max-w-\[85\%\]{max-width:85%}.max-w-\[748px\]{max-width:748px}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.rotate-90{rotate:90deg}.rotate-180{rotate:180deg}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.resize{resize:both}.resize-none{resize:none}.flex-col{flex-direction:column}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-hidden{overflow-y:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\[20px\]{border-radius:20px}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-br-\[6px\]{border-bottom-right-radius:6px}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-l-\[3px\]{border-left-style:var(--tw-border-style);border-left-width:3px}.border-\[hsl\(var\(--border\)\)\]{border-color:hsl(var(--border))}.border-\[hsl\(var\(--primary\)\/0\.8\)\]{border-color:hsl(var(--primary)/.8)}.border-\[hsl\(var\(--primary\)\/0\.45\)\]{border-color:hsl(var(--primary)/.45)}.border-\[hsl\(var\(--primary-foreground\)\/0\.6\)\]{border-color:hsl(var(--primary-foreground)/.6)}.border-\[hsl\(var\(--ring\)\/0\.6\)\]{border-color:hsl(var(--ring)/.6)}.border-\[hsl\(var\(--user-msg-border\)\)\]{border-color:hsl(var(--user-msg-border))}.border-amber-500\/25{border-color:#f99c0040}@supports (color:color-mix(in lab, red, red)){.border-amber-500\/25{border-color:color-mix(in oklab, var(--color-amber-500) 25%, transparent)}}.border-amber-500\/30{border-color:#f99c004d}@supports (color:color-mix(in lab, red, red)){.border-amber-500\/30{border-color:color-mix(in oklab, var(--color-amber-500) 30%, transparent)}}.border-amber-500\/35{border-color:#f99c0059}@supports (color:color-mix(in lab, red, red)){.border-amber-500\/35{border-color:color-mix(in oklab, var(--color-amber-500) 35%, transparent)}}.border-rose-500\/25{border-color:#ff235740}@supports (color:color-mix(in lab, red, red)){.border-rose-500\/25{border-color:color-mix(in oklab, var(--color-rose-500) 25%, transparent)}}.border-l-\[hsl\(var\(--muted-foreground\)\/0\.5\)\]{border-left-color:hsl(var(--muted-foreground)/.5)}.border-l-\[hsl\(var\(--primary\)\)\]{border-left-color:hsl(var(--primary))}.border-l-amber-400{border-left-color:var(--color-amber-400)}.border-l-blue-500{border-left-color:var(--color-blue-500)}.bg-\[hsl\(var\(--accent\)\)\]{background-color:hsl(var(--accent))}.bg-\[hsl\(var\(--background\)\)\]{background-color:hsl(var(--background))}.bg-\[hsl\(var\(--card\)\)\]{background-color:hsl(var(--card))}.bg-\[hsl\(var\(--muted\)\)\/0\.5\]{background-color:hsl(var(--muted))/.5}.bg-\[hsl\(var\(--muted\)\)\]{background-color:hsl(var(--muted))}.bg-\[hsl\(var\(--muted\)\/0\.2\)\]{background-color:hsl(var(--muted)/.2)}.bg-\[hsl\(var\(--muted\)\/0\.3\)\]{background-color:hsl(var(--muted)/.3)}.bg-\[hsl\(var\(--muted\)\/0\.35\)\]{background-color:hsl(var(--muted)/.35)}.bg-\[hsl\(var\(--primary\)\)\]{background-color:hsl(var(--primary))}.bg-\[hsl\(var\(--primary\)\/0\.08\)\]{background-color:hsl(var(--primary)/.08)}.bg-\[hsl\(var\(--primary\)\/0\.12\)\]{background-color:hsl(var(--primary)/.12)}.bg-\[hsl\(var\(--primary-foreground\)\/0\.2\)\]{background-color:hsl(var(--primary-foreground)/.2)}.bg-\[hsl\(var\(--user-msg-bg\)\)\]{background-color:hsl(var(--user-msg-bg))}.bg-amber-500\/8{background-color:#f99c0014}@supports (color:color-mix(in lab, red, red)){.bg-amber-500\/8{background-color:color-mix(in oklab, var(--color-amber-500) 8%, transparent)}}.bg-amber-500\/10{background-color:#f99c001a}@supports (color:color-mix(in lab, red, red)){.bg-amber-500\/10{background-color:color-mix(in oklab, var(--color-amber-500) 10%, transparent)}}.bg-rose-500\/10{background-color:#ff23571a}@supports (color:color-mix(in lab, red, red)){.bg-rose-500\/10{background-color:color-mix(in oklab, var(--color-rose-500) 10%, transparent)}}.bg-transparent{background-color:#0000}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-transparent{--tw-gradient-from:transparent;--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))}.via-amber-400\/40{--tw-gradient-via:#fcbb0066}@supports (color:color-mix(in lab, red, red)){.via-amber-400\/40{--tw-gradient-via:color-mix(in oklab, var(--color-amber-400) 40%, transparent)}}.via-amber-400\/40{--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-transparent{--tw-gradient-to:transparent;--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))}.object-cover{object-fit:cover}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-\[18px\]{padding-inline:18px}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-\[13px\]{padding-block:13px}.pt-3{padding-top:calc(var(--spacing) * 3)}.pr-1{padding-right:var(--spacing)}.pr-1\.5{padding-right:calc(var(--spacing) * 1.5)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-3\.5{padding-left:calc(var(--spacing) * 3.5)}.pl-5{padding-left:calc(var(--spacing) * 5)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.leading-6{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.leading-7{--tw-leading:calc(var(--spacing) * 7);line-height:calc(var(--spacing) * 7)}.leading-8{--tw-leading:calc(var(--spacing) * 8);line-height:calc(var(--spacing) * 8)}.leading-\[1\.65\]{--tw-leading:1.65;line-height:1.65}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.12em\]{--tw-tracking:.12em;letter-spacing:.12em}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.break-words{overflow-wrap:break-word}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[hsl\(var\(--destructive\)\)\]{color:hsl(var(--destructive))}.text-\[hsl\(var\(--foreground\)\)\]{color:hsl(var(--foreground))}.text-\[hsl\(var\(--muted-foreground\)\)\/0\.85\]{color:hsl(var(--muted-foreground))/.85}.text-\[hsl\(var\(--muted-foreground\)\)\],.text-\[hsl\(var\(--muted-foreground\)\)\]\/70{color:hsl(var(--muted-foreground))}@supports (color:color-mix(in lab, red, red)){.text-\[hsl\(var\(--muted-foreground\)\)\]\/70{color:color-mix(in oklab, hsl(var(--muted-foreground)) 70%, transparent)}}.text-\[hsl\(var\(--primary\)\)\]{color:hsl(var(--primary))}.text-\[hsl\(var\(--primary-foreground\)\)\]{color:hsl(var(--primary-foreground))}.text-\[hsl\(var\(--user-msg-fg\)\)\]{color:hsl(var(--user-msg-fg))}.text-amber-100{color:var(--color-amber-100)}.text-amber-100\/55{color:#fef3c68c}@supports (color:color-mix(in lab, red, red)){.text-amber-100\/55{color:color-mix(in oklab, var(--color-amber-100) 55%, transparent)}}.text-amber-100\/75{color:#fef3c6bf}@supports (color:color-mix(in lab, red, red)){.text-amber-100\/75{color:color-mix(in oklab, var(--color-amber-100) 75%, transparent)}}.text-amber-300{color:var(--color-amber-300)}.text-blue-300{color:var(--color-blue-300)}.text-rose-100{color:var(--color-rose-100)}.uppercase{text-transform:uppercase}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.placeholder\:text-\[hsl\(var\(--muted-foreground\)\/0\.5\)\]::placeholder{color:hsl(var(--muted-foreground)/.5)}.placeholder\:text-\[hsl\(var\(--muted-foreground\)\/0\.6\)\]::placeholder{color:hsl(var(--muted-foreground)/.6)}@media (hover:hover){.hover\:border-\[hsl\(var\(--ring\)\/0\.3\)\]:hover{border-color:hsl(var(--ring)/.3)}.hover\:border-\[hsl\(var\(--ring\)\/0\.4\)\]:hover{border-color:hsl(var(--ring)/.4)}.hover\:bg-\[hsl\(var\(--accent\)\)\]:hover{background-color:hsl(var(--accent))}.hover\:bg-white\/3:hover{background-color:#ffffff08}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/3:hover{background-color:color-mix(in oklab, var(--color-white) 3%, transparent)}}.hover\:text-\[hsl\(var\(--foreground\)\)\]:hover{color:hsl(var(--foreground))}.hover\:opacity-90:hover{opacity:.9}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-1:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-\[hsl\(var\(--ring\)\)\]:focus-visible{--tw-ring-color:hsl(var(--ring))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-60:disabled{opacity:.6}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@keyframes spin{to{transform:rotate(360deg)}}