super-agent-sdk 1.0.9 → 1.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +87 -3
  2. package/dist/widget.cjs +52 -28
  3. package/dist/widget.d.ts +73 -3
  4. package/dist/widget.mjs +1557 -1405
  5. package/package.json +1 -1
package/dist/widget.d.ts CHANGED
@@ -2,6 +2,7 @@ import { ComponentType } from 'react';
2
2
  import { CSSProperties } from 'react';
3
3
  import { default as default_2 } from 'react';
4
4
  import { JSX as JSX_2 } from 'react';
5
+ import { ReactElement } from 'react';
5
6
  import { RefObject } from 'react';
6
7
 
7
8
  export declare function ActionBar({ message, onCopy, onRegenerate, onFeedback }: ActionBarProps): JSX_2.Element | null;
@@ -16,6 +17,19 @@ export declare interface ActionBarProps {
16
17
  }) => void;
17
18
  }
18
19
 
20
+ /** 已打开的业务浮层（link 不入状态） */
21
+ export declare interface ActivePanel {
22
+ type: 'page';
23
+ component: PanelContent;
24
+ /** 标题栏标题 */
25
+ title?: string;
26
+ }
27
+
28
+ /** slots.AppendContainer 收到的 props：首屏业务定制区，点一下就开浮层 */
29
+ export declare interface AppendContainerProps {
30
+ openPanel: (action: PanelAction) => void;
31
+ }
32
+
19
33
  /** 通用产物（INTERFACE 约定：type + data，适配 table/chart/file/text/image/html/custom） */
20
34
  export declare interface Artifact {
21
35
  type: string;
@@ -114,6 +128,8 @@ export declare interface ChatState {
114
128
  isArtifactDrawerOpen: boolean;
115
129
  allArtifacts: ArtifactFile[];
116
130
  activePreviewArtifact: ArtifactFile | null;
131
+ /** 当前打开的业务浮层（null = 聊天态） */
132
+ activePanel: ActivePanel | null;
117
133
  hasMore: boolean;
118
134
  conversationsLoading: boolean;
119
135
  messagesLoading: boolean;
@@ -130,6 +146,10 @@ export declare interface ChatState {
130
146
  setThreadListOpen: (open: boolean) => void;
131
147
  toggleArtifactDrawer: () => void;
132
148
  openArtifactPreview: (artifact: ArtifactFile) => void;
149
+ /** 打开业务浮层（page / link） */
150
+ openPanel: (action: PanelAction) => void;
151
+ /** 关闭当前浮层 */
152
+ closePanel: () => void;
133
153
  feedback: (messageId: string, feedback: 'like' | 'dislike', options?: {
134
154
  reason?: number;
135
155
  remark?: string;
@@ -401,6 +421,44 @@ export declare interface MountOptions {
401
421
  showTimestamp?: boolean;
402
422
  }
403
423
 
424
+ /**
425
+ * 面板级整屏容器：替换「内容区 + 输入区」，Header 保留。
426
+ * 滚动由 body 承担，业务页不写滚动容器；单层不叠栈。
427
+ */
428
+ export declare function PageOverlay({ page, onBack, centered }: PageOverlayProps): JSX_2.Element;
429
+
430
+ declare interface PageOverlayProps {
431
+ page: ActivePanel;
432
+ /** 返回聊天 */
433
+ onBack: () => void;
434
+ /** 大窗态：与内容区/输入区一致，800px 居中 */
435
+ centered?: boolean;
436
+ }
437
+
438
+ /** 浮层组件收到的 props */
439
+ export declare interface PageProps {
440
+ /** 关闭本浮层，回到聊天 */
441
+ close: () => void;
442
+ }
443
+
444
+ /**
445
+ * 业务浮层动作：
446
+ * - `page`：整屏容器，替换「内容区 + 输入区」，Header 保留
447
+ * - `link`：打开外链，默认新窗口
448
+ */
449
+ export declare type PanelAction = ActivePanel | {
450
+ type: 'link';
451
+ url: string;
452
+ target?: '_blank' | '_self';
453
+ };
454
+
455
+ /**
456
+ * 浮层内容：组件类型，或已带好参数的元素。
457
+ * 元素形态由 SDK 用 cloneElement 注入 close，业务组件应声明 `close: () => void`。
458
+ * 这里不收 ReactElement<PageProps>，否则调用处写 `<Detail id={3} />` 会被要求手填 close。
459
+ */
460
+ export declare type PanelContent = ComponentType<PageProps> | ReactElement;
461
+
404
462
  /** 首页快速入口条目 */
405
463
  export declare interface QuickLinkItem {
406
464
  /** 图标 URL，不传则不渲染图标 */
@@ -409,7 +467,9 @@ export declare interface QuickLinkItem {
409
467
  label: string;
410
468
  /** 点击后发送的消息（如提供则点击即发送该消息） */
411
469
  prompt?: string;
412
- /** 自定义点击行为（优先于 prompt） */
470
+ /** 点击行为：整屏容器 / 外链（优先于 prompt） */
471
+ action?: PanelAction;
472
+ /** 自定义点击行为（优先于 action / prompt） */
413
473
  onClick?: () => void;
414
474
  }
415
475
 
@@ -434,6 +494,8 @@ export declare interface Slots {
434
494
  ErrorPart?: ComponentType<ErrorPartProps>;
435
495
  InterruptCard?: ComponentType<InterruptCardProps>;
436
496
  WelcomeScreen?: ComponentType<WelcomeScreenProps>;
497
+ /** 首屏底部业务定制容器（未配置则不产生任何 DOM）；拿 openPanel 点一下开整屏容器 */
498
+ AppendContainer?: ComponentType<AppendContainerProps>;
437
499
  }
438
500
 
439
501
  declare interface SuperAgentSDK {
@@ -543,6 +605,12 @@ export declare interface ToolResultPartProps {
543
605
  artifactPreview?: boolean;
544
606
  }
545
607
 
608
+ /**
609
+ * 浮窗触发按钮：支持拖拽换位（与聊天窗口拖拽一致的手感）。
610
+ * - 4px 移动阈值区分点击/拖拽：未超过阈值 → 触发 onClick（打开面板）
611
+ * - 拖拽落点钳制在视口内，位置保留在组件 state（不持久化）
612
+ * - 未拖拽过 → 保持右下角默认锚定
613
+ */
546
614
  export declare function Trigger({ isOpen, onClick, triggerLogo }: TriggerProps): JSX_2.Element;
547
615
 
548
616
  export declare interface TriggerProps {
@@ -616,7 +684,7 @@ declare interface UseConversationsReturn {
616
684
  * 首页欢迎视图（布局对齐 hr-for-help）：
617
685
  * 居中 Logo（浮动动画）+ 流光渐变标题 + 能力清单 + 建议 chips（交错入场）+ 快速入口
618
686
  */
619
- export declare function WelcomeScreen({ message, suggestedPrompts, onPromptClick, capabilities, quickLinks, logo }: WelcomeScreenProps): JSX_2.Element;
687
+ export declare function WelcomeScreen({ message, suggestedPrompts, onPromptClick, capabilities, quickLinks, logo, openPanel }: WelcomeScreenProps): JSX_2.Element;
620
688
 
621
689
  export declare interface WelcomeScreenProps {
622
690
  message?: string;
@@ -628,6 +696,8 @@ export declare interface WelcomeScreenProps {
628
696
  quickLinks?: QuickLinkItem[];
629
697
  /** 首页居中 Logo（URL），默认 SDK 内置 Logo */
630
698
  logo?: string;
699
+ /** 打开业务浮层，供 quickLinks 的 action 字段使用 */
700
+ openPanel?: (action: PanelAction) => void;
631
701
  }
632
702
 
633
703
  export declare interface WidgetInstance {
@@ -638,6 +708,6 @@ export declare interface WidgetInstance {
638
708
 
639
709
  export declare type WidgetMode = 'floating' | 'fullpage';
640
710
 
641
- export declare const widgetStyles = "\n [data-super-agent-widget] {\n --sa-primary-dark: color-mix(in srgb, var(--sa-primary) 82%, #000);\n --sa-primary-light: color-mix(in srgb, var(--sa-primary) 10%, #fff);\n --sa-text: #1f2937;\n --sa-text-muted: #6b7280;\n --sa-text-light: #9ca3af;\n --sa-border: #e5e7eb;\n --sa-surface: #f9fafb;\n --sa-hover: #f3f4f6;\n\n font-family: var(--sa-font);\n color: var(--sa-text);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n }\n\n [data-super-agent-widget] *,\n [data-super-agent-widget] *::before,\n [data-super-agent-widget] *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n [data-super-agent-widget] button {\n font-family: inherit;\n }\n\n /* \u2500\u2500 Trigger / Panel / Header\uFF08\u6D6E\u7A97\u6846\u67B6\u5DF2\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 tailwind.css\uFF09 \u2500\u2500 */\n\n /* \u2500\u2500 Thread / messages \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-thread {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 16px;\n overflow-y: auto;\n padding: 16px;\n background: var(--sa-surface);\n scroll-behavior: smooth;\n }\n\n .sa-thread::-webkit-scrollbar {\n width: 6px;\n }\n\n .sa-thread::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.14);\n border-radius: 3px;\n }\n\n .sa-thread::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.24);\n }\n\n /* \u2500\u2500 Message\uFF1A\u6D6E\u7A97\u9ED8\u8BA4 hr-for-help \u98CE\u683C\uFF08AI \u5934\u50CF\u72EC\u5360\u4E00\u884C\uFF09\uFF1B\n fullpage \u6A21\u5F0F\u5728 .sa-fp-content-row \u4E0B\u6062\u590D\u539F\u6A2A\u6392\u5E03\u5C40\uFF0C\u4E92\u4E0D\u5F71\u54CD \u2500\u2500 */\n\n .sa-message {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n width: 100%;\n }\n\n .sa-message-user {\n justify-content: flex-end;\n }\n\n /* AI \u6D88\u606F\uFF1A\u5217\u5E03\u5C40\uFF0C\u5934\u50CF\u72EC\u5360\u4E00\u884C\uFF08\u4EC5\u6D6E\u7A97\uFF0C\u5BF9\u9F50 hr-for-help msgAi\uFF09 */\n .sa-message-assistant {\n flex-direction: column;\n align-items: flex-start;\n gap: 6px;\n }\n\n .sa-message-content {\n max-width: 78%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .sa-message-user .sa-message-content {\n max-width: 90%;\n }\n\n .sa-message-assistant .sa-message-content {\n max-width: 100%;\n min-width: 0;\n width: 100%;\n }\n\n .sa-message-body {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n /* \u6D6E\u7A97\u6C14\u6CE1\uFF1A\u7528\u6237\u6D45\u84DD\u3001AI \u767D\u5E95\u63CF\u8FB9\uFF08\u5BF9\u9F50 hr-for-help\uFF09 */\n .sa-message-user .sa-message-body {\n padding: 8px 12px;\n border-radius: 8px 8px 0 8px;\n background: #E8F1FE;\n color: #333333;\n font-size: 14px;\n line-height: 1.6;\n word-break: break-word;\n }\n\n .sa-message-assistant .sa-message-body {\n padding: 10px 12px;\n border-radius: 8px;\n background: #ffffff;\n border: 1px solid #E0E0E0;\n color: var(--sa-text);\n font-size: 14px;\n line-height: 1.5;\n word-break: break-word;\n }\n\n .sa-message-time {\n font-size: 11px;\n color: var(--sa-text-muted);\n opacity: 0.7;\n }\n\n .sa-message-time-right {\n text-align: right;\n }\n\n /* \u6D88\u606F\u5934\u50CF\uFF1A\u88F8\u5C55\u793A\uFF0C\u65E0\u80CC\u666F\u8272\uFF08\u5BF9\u9F50 hr-for-help msgAvatar\uFF09 */\n .sa-msg-avatar {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n object-fit: cover;\n flex-shrink: 0;\n display: block;\n }\n\n .sa-msg-avatar-text {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n font-weight: 400;\n }\n\n /* \u2500\u2500 fullpage \u8986\u76D6\uFF1A\u6062\u590D\u6A2A\u6392\u5934\u50CF + \u7ECF\u5178\u6C14\u6CE1\uFF08\u4E0D\u53D7\u6D6E\u7A97 hr-for-help \u6539\u7248\u5F71\u54CD\uFF09 \u2500\u2500 */\n\n .sa-fp-content-row .sa-message-assistant {\n flex-direction: row;\n gap: 10px;\n }\n\n .sa-fp-content-row .sa-message-assistant .sa-message-content {\n max-width: 88%;\n width: auto;\n }\n\n .sa-fp-content-row .sa-message-user .sa-message-content {\n max-width: 78%;\n }\n\n // .sa-fp-content-row .sa-message-user .sa-message-body {\n // padding: 10px 14px;\n // border-radius: 16px;\n // border-bottom-right-radius: 4px;\n // background: var(--sa-primary);\n // color: #ffffff;\n // font-size: 14px;\n // line-height: 1.55;\n // word-break: break-word;\n // }\n\n .sa-fp-content-row .sa-message-assistant .sa-message-body {\n padding: 10px 14px;\n border-radius: 16px;\n background: #ffffff;\n color: var(--sa-text);\n font-size: 14px;\n line-height: 1.55;\n word-break: break-word;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n }\n\n .sa-fp-content-row .sa-msg-avatar {\n width: 24px;\n height: 24px;\n }\n\n .sa-fp-content-row .sa-msg-avatar-text {\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n color: #ffffff;\n font-size: 12px;\n font-weight: 600;\n }\n\n /* \u2500\u2500 Text part (markdown) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-text-part {\n font-size: 14px;\n line-height: 1.6;\n word-break: break-word;\n }\n\n .sa-text-part p {\n margin: 0 0 8px;\n }\n\n .sa-text-part p:last-child {\n margin-bottom: 0;\n }\n\n .sa-text-part strong {\n font-weight: 600;\n }\n\n .sa-text-part em {\n font-style: italic;\n }\n\n .sa-text-part h1,\n .sa-text-part h2,\n .sa-text-part h3,\n .sa-text-part h4,\n .sa-text-part h5,\n .sa-text-part h6 {\n margin: 12px 0 6px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .sa-text-part h1 {\n font-size: 1.4em;\n }\n\n .sa-text-part h2 {\n font-size: 1.25em;\n }\n\n .sa-text-part h3 {\n font-size: 1.1em;\n }\n\n .sa-text-part h4,\n .sa-text-part h5,\n .sa-text-part h6 {\n font-size: 1em;\n }\n\n .sa-text-part a {\n color: var(--sa-primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n\n .sa-text-part a:hover {\n color: var(--sa-primary-dark);\n }\n\n .sa-inline-code {\n padding: 2px 5px;\n border-radius: 4px;\n background: rgba(0, 0, 0, 0.06);\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 0.9em;\n }\n\n .sa-code-block {\n margin: 8px 0;\n padding: 12px 14px;\n border-radius: 10px;\n background: #1e293b;\n color: #e2e8f0;\n overflow-x: auto;\n font-size: 13px;\n line-height: 1.55;\n }\n\n .sa-code-block code {\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n white-space: pre;\n }\n\n .sa-list {\n margin: 6px 0;\n padding-left: 22px;\n }\n\n .sa-list li {\n margin: 3px 0;\n line-height: 1.5;\n }\n\n ul.sa-list {\n list-style: disc;\n }\n\n ol.sa-list {\n list-style: decimal;\n }\n\n /* \u2500\u2500 Thinking part \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-thinking-part {\n margin: 6px 0;\n padding: 8px 12px;\n border-left: 3px solid var(--sa-primary);\n border-radius: 8px;\n background: var(--sa-primary-light);\n cursor: pointer;\n font-size: 13px;\n }\n\n .sa-thinking-header {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--sa-primary-dark);\n font-weight: 500;\n user-select: none;\n }\n\n .sa-thinking-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-thinking-label {\n flex: 1;\n }\n\n .sa-thinking-arrow {\n font-size: 12px;\n transition: transform 0.2s ease;\n }\n\n .sa-thinking-arrow.expanded {\n transform: rotate(90deg);\n }\n\n .sa-thinking-content {\n margin-top: 8px;\n color: #4b5563;\n white-space: pre-wrap;\n line-height: 1.55;\n }\n\n /* \u2500\u2500 Tool call / result \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-tool-call-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-call-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n font-size: 13px;\n user-select: none;\n }\n\n .sa-tool-call-header:hover {\n background: var(--sa-surface);\n }\n\n .sa-tool-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-tool-name {\n flex: 1;\n color: #374151;\n font-weight: 500;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-tool-args {\n margin: 0;\n padding: 10px 12px;\n border-top: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n overflow-x: auto;\n }\n\n .sa-tool-result-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-result-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-bottom: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-size: 13px;\n font-weight: 500;\n }\n\n .sa-tool-result-content {\n max-height: 256px;\n overflow: auto;\n margin: 8px 0 0;\n padding: 10px 12px;\n color: #4b5563;\n font-size: 13px;\n line-height: 1.55;\n white-space: pre-wrap;\n word-break: break-word;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n background: #f9fafb;\n border-radius: 8px;\n }\n\n .sa-tool-result-actions {\n display: flex;\n gap: 8px;\n margin: 4px 0;\n }\n\n /* \u2500\u2500 Error part \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-error-part {\n margin: 6px 0;\n padding: 10px 12px;\n border: 1px solid #fecaca;\n border-radius: 10px;\n background: #fef2f2;\n color: #b91c1c;\n }\n\n .sa-error-content {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 13px;\n line-height: 1.5;\n }\n\n .sa-error-icon {\n font-size: 14px;\n line-height: 1.4;\n }\n\n .sa-error-retry {\n margin-top: 8px;\n padding: 6px 14px;\n border: none;\n border-radius: 8px;\n background: #ef4444;\n color: #ffffff;\n font-size: 13px;\n cursor: pointer;\n transition: background 0.2s ease;\n }\n\n .sa-error-retry:hover {\n background: #dc2626;\n }\n\n /* \u2500\u2500 Action bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-action-bar {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 6px;\n position: relative;\n }\n\n .sa-action-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n flex: none;\n white-space: nowrap;\n line-height: 1;\n padding: 4px 10px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--sa-text-muted);\n font-size: 12px;\n cursor: pointer;\n transition: color 0.15s ease, background 0.15s ease;\n }\n\n .sa-action-btn svg {\n display: block;\n flex: none;\n }\n\n .sa-action-btn:hover {\n color: var(--sa-text);\n background: rgba(0, 0, 0, 0.05);\n }\n\n .sa-action-btn-active {\n color: var(--sa-primary) !important;\n background: var(--sa-primary-light) !important;\n }\n\n .sa-action-divider {\n width: 1px;\n height: 16px;\n background: var(--sa-border);\n margin: 0 2px;\n align-self: center;\n }\n\n /* \u2500\u2500 Dislike Panel \u2500\u2500 */\n .sa-dislike-panel {\n position: absolute; top: 100%; left: 0; right: 0;\n margin-top: 6px; padding: 12px;\n background: #fff; border: 1px solid var(--sa-border); border-radius: 10px;\n box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n animation: sa-fade-in-up 0.2s cubic-bezier(0.16,1,0.3,1) both;\n z-index: 10;\n }\n .sa-dislike-panel-title { font-size: 13px; font-weight: 500; color: var(--sa-text); margin-bottom: 8px; }\n .sa-dislike-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }\n .sa-dislike-reason-btn {\n padding: 4px 10px; border: 1px solid var(--sa-border); border-radius: 6px;\n background: #fff; color: var(--sa-text); font-size: 12px; cursor: pointer;\n transition: border-color 0.15s, background 0.15s, color 0.15s;\n }\n .sa-dislike-reason-btn:hover { border-color: var(--sa-primary); color: var(--sa-primary); }\n .sa-dislike-reason-btn.active { background: var(--sa-primary); color: #fff; border-color: var(--sa-primary); }\n .sa-dislike-remark {\n width: 100%; padding: 8px 10px; border: 1px solid var(--sa-border); border-radius: 8px;\n font-size: 13px; color: var(--sa-text); resize: none; outline: none;\n transition: border-color 0.15s;\n }\n .sa-dislike-remark:focus { border-color: var(--sa-primary); }\n .sa-dislike-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }\n .sa-dislike-submit {\n padding: 5px 14px; border: none; border-radius: 6px;\n background: var(--sa-primary); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer;\n transition: opacity 0.15s;\n }\n .sa-dislike-submit:hover { opacity: 0.9; }\n .sa-dislike-cancel {\n padding: 5px 14px; border: 1px solid var(--sa-border); border-radius: 6px;\n background: #fff; color: var(--sa-text-muted); font-size: 13px; cursor: pointer;\n transition: background 0.15s;\n }\n .sa-dislike-cancel:hover { background: var(--sa-surface); }\n\n /* \u2500\u2500 Composer\uFF08\u8F93\u5165\u533A\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 tailwind.css \u7684 .sa-input-form/.sa-send-btn\uFF09 \u2500\u2500 */\n\n /* \u2500\u2500 Slash Menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-slash-menu {\n position: absolute;\n bottom: 100%;\n left: 14px;\n right: 14px;\n max-width: 400px;\n max-height: 200px;\n overflow-y: auto;\n background: var(--sa-surface);\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);\n margin-bottom: 4px;\n z-index: 10;\n }\n\n .sa-slash-menu-empty {\n padding: 12px 14px;\n color: #9ca3af;\n font-size: 13px;\n text-align: center;\n }\n\n .sa-slash-menu-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .sa-slash-menu-item:hover,\n .sa-slash-menu-item--active {\n background: var(--sa-hover);\n }\n\n .sa-slash-menu-item-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--sa-text);\n white-space: nowrap;\n }\n\n .sa-slash-menu-item-desc {\n font-size: 12px;\n color: #9ca3af;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n min-width: 0;\n }\n\n /* \u2500\u2500 Thread list\uFF08\u5185\u5D4C\u4FA7\u8FB9\u680F\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 FullpageLayout.tsx / ThreadList.tsx\uFF09 \u2500\u2500 */\n\n /* \u6D88\u606F\u533A\u52A0\u8F7D\u6001 */\n .sa-messages-loading {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n color: #9ca3af;\n font-size: 14px;\n }\n\n .sa-loading-spinner {\n width: 16px;\n height: 16px;\n border: 2px solid var(--sa-border, #e5e7eb);\n border-top-color: var(--sa-primary, #6366f1);\n border-radius: 50%;\n animation: sa-spin 0.8s linear infinite;\n flex-shrink: 0;\n }\n\n @keyframes sa-spin {\n to { transform: rotate(360deg); }\n }\n\n /* \u2500\u2500 Welcome\uFF08\u9996\u9875\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 tailwind.css\uFF09 \u2500\u2500 */\n\n .sa-thinking-indicator {\n color: #9ca3af;\n font-size: 14px;\n animation: sa-blink 1.2s ease-in-out infinite;\n }\n\n /* \u2500\u2500 Interrupt cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-interrupt-card {\n margin: 8px 0;\n padding: 14px;\n border: 1px solid #e0e7ff;\n border-radius: 10px;\n background: #f8faff;\n }\n\n .sa-interrupt-content {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 13px;\n line-height: 1.6;\n color: var(--sa-text);\n margin-bottom: 12px;\n }\n\n .sa-interrupt-actions {\n display: flex;\n gap: 8px;\n margin-top: 10px;\n }\n\n .sa-interrupt-btn {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 14px;\n border: none;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s, opacity 0.15s;\n }\n\n .sa-interrupt-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .sa-interrupt-btn-primary {\n background: var(--sa-primary);\n color: #fff;\n }\n\n .sa-interrupt-btn-primary:hover:not(:disabled) {\n opacity: 0.9;\n }\n\n .sa-interrupt-btn-secondary {\n background: #f3f4f6;\n color: #374151;\n }\n\n .sa-interrupt-btn-secondary:hover:not(:disabled) {\n background: #e5e7eb;\n }\n\n .sa-interrupt-btn-danger {\n background: #fef2f2;\n color: #dc2626;\n }\n\n .sa-interrupt-btn-danger:hover:not(:disabled) {\n background: #fee2e2;\n }\n\n .sa-interrupt-options {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .sa-interrupt-option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n background: #fff;\n color: var(--sa-text);\n font-size: 13px;\n cursor: pointer;\n text-align: left;\n transition: border-color 0.12s, background 0.12s;\n }\n\n .sa-interrupt-option:hover {\n border-color: var(--sa-primary);\n background: #f5f3ff;\n }\n\n .sa-interrupt-option-selected {\n border-color: var(--sa-primary);\n background: #ede9fe;\n color: var(--sa-primary);\n font-weight: 500;\n }\n\n .sa-interrupt-option-danger {\n color: #ef4444;\n }\n\n .sa-interrupt-option-danger:hover {\n border-color: #ef4444;\n background: #fef2f2;\n }\n\n .sa-interrupt-option-desc {\n font-size: 11px;\n color: var(--sa-text-muted);\n margin-left: auto;\n }\n\n .sa-interrupt-input-area {\n margin-top: 4px;\n }\n\n .sa-interrupt-input,\n .sa-interrupt-textarea,\n .sa-interrupt-select {\n width: 100%;\n padding: 8px 12px;\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n background: #fff;\n color: var(--sa-text);\n font-size: 13px;\n font-family: inherit;\n outline: none;\n transition: border-color 0.15s;\n }\n\n .sa-interrupt-input:focus,\n .sa-interrupt-textarea:focus,\n .sa-interrupt-select:focus {\n border-color: var(--sa-primary);\n }\n\n .sa-interrupt-textarea {\n resize: vertical;\n min-height: 60px;\n }\n\n .sa-interrupt-form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin-top: 4px;\n }\n\n .sa-interrupt-form-field {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .sa-interrupt-form-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--sa-text);\n }\n\n .sa-interrupt-form-required {\n color: #ef4444;\n margin-left: 2px;\n }\n\n .sa-interrupt-submitted {\n margin-top: 8px;\n font-size: 12px;\n color: #9ca3af;\n }\n\n .sa-interrupt-btn-answered {\n background: var(--sa-primary) !important;\n color: #fff !important;\n opacity: 0.7;\n }\n\n .sa-interrupt-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .sa-interrupt-option:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n .sa-interrupt-input:disabled,\n .sa-interrupt-textarea:disabled,\n .sa-interrupt-select:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n background: #f9fafb;\n }\n\n .sa-interrupt-unknown {\n padding: 8px 12px;\n border-radius: 8px;\n background: #fef3c7;\n color: #92400e;\n font-size: 13px;\n margin: 6px 0;\n }\n\n /* \u2500\u2500 Animations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n @keyframes sa-blink {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n }\n\n /* \u2500\u2500 Fullpage Layout (DeepSeek-style) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-fullpage {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n background: var(--sa-bg, #ffffff);\n }\n\n /* Sidebar\uFF08fullpage \u9ED8\u8BA4\u4FA7\u8FB9\u680F\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u5BF9\u9F50\u6D6E\u7A97\u5386\u53F2\u5BF9\u8BDD\u6837\u5F0F\uFF0C\u89C1 FullpageLayout.tsx\uFF09 */\n\n /* Sidebar wrapper (for custom ThreadList slot)\uFF1A\u5BBD\u5EA6\u4E0E\u9ED8\u8BA4\u4FA7\u8FB9\u680F 220px \u5BF9\u9F50 */\n .sa-fp-sidebar-wrapper {\n width: 220px;\n flex-shrink: 0;\n overflow: hidden;\n border-right: 1px solid #ECECEC;\n background: #FAFAFA;\n transition: width 0.2s cubic-bezier(0.16,1,0.3,1);\n }\n\n .sa-fp-sidebar-wrapper-collapsed {\n width: 0;\n border-right: none;\n }\n\n /* Main area */\n .sa-fp-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n background: #fff;\n }\n\n .sa-fp-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n border-bottom: 1px solid #f0f0f0;\n background: #fff;\n flex-shrink: 0;\n min-height: 52px;\n }\n\n .sa-fp-header-title {\n flex: 1;\n font-size: 15px;\n font-weight: 500;\n color: #18181b;\n letter-spacing: -0.2px;\n }\n\n .sa-fp-header-actions {\n display: flex;\n gap: 4px;\n }\n\n .sa-fp-header-btn {\n min-width: 34px;\n height: 34px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: #71717a;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.12s, color 0.12s;\n }\n\n .sa-fp-header-btn:hover {\n background: #f4f4f5;\n color: #18181b;\n }\n\n /* Fullpage thread/composer override */\n .sa-fp-main .sa-thread {\n margin: 0 auto;\n width: 100%;\n padding: 24px 24px;\n }\n\n .sa-fp-main .sa-composer {\n margin: 0 auto;\n width: 100%;\n padding: 12px 24px 20px;\n border-top: none;\n background: transparent;\n }\n\n .sa-fp-main .sa-composer-input {\n background: #f7f7f8;\n border: 1px solid #e4e4e7;\n box-shadow: none;\n }\n\n .sa-fp-main .sa-composer-input:focus {\n background: #fff;\n border-color: #d4d4d8;\n box-shadow: 0 0 0 3px rgba(99,102,241,0.08);\n }\n\n /* \u2500\u2500 Artifact file cards (in ToolResultPart) \u2500\u2500 */\n .sa-artifact-file-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }\n .sa-artifact-file-card {\n display: flex; align-items: center; gap: 10px; padding: 8px 10px;\n border: 1px solid var(--sa-border); border-radius: 10px; background: var(--sa-surface);\n font-size: 13px; color: var(--sa-text);\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-artifact-file-card:hover { border-color: var(--sa-primary); background: #fff; box-shadow: 0 2px 8px rgba(99,102,241,0.1); transform: translateY(-1px); }\n .sa-artifact-file-card:active { transform: translateY(0) scale(0.99); }\n .sa-artifact-file-icon { flex-shrink: 0; }\n .sa-artifact-chip-type {\n display: inline-flex; align-items: center; justify-content: center;\n min-width: 36px; padding: 2px 6px; border-radius: 5px;\n background: var(--sa-primary); color: #fff;\n font-size: 10px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.4;\n }\n .sa-artifact-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }\n .sa-artifact-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }\n .sa-artifact-file-size { color: var(--sa-text-muted); font-size: 12px; }\n .sa-artifact-file-download {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex;\n transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;\n }\n .sa-artifact-file-download:hover { color: var(--sa-primary); background: rgba(99,102,241,0.08); }\n .sa-artifact-file-download:active { transform: scale(0.9); }\n\n /* \u2500\u2500 Inline HTML rendering (render_mode=html) \u2500\u2500 */\n /* HTML \u5DE5\u5177\u7ED3\u679C\uFF1A\u5916\u5C42\u6EDA\u52A8\u5BB9\u5668 + \u5185\u5C42\u5185\u5BB9\u5C42\uFF08\u4E0E Playground \u4E00\u81F4\uFF0C\u65E0 iframe\uFF09 */\n .sa-tool-result-html-scroll { margin-top: 8px; max-height: 60vh; overflow: auto; border: 1px solid var(--sa-border); border-radius: 8px; }\n .sa-tool-result-html { padding: 12px; background: #fff; min-width: 100%; width: max-content; }\n\n /* \u2500\u2500 Header artifact button \u2500\u2500 */\n .sa-header-btn-artifact {\n display: inline-flex; align-items: center; gap: 4px;\n padding: 4px 12px !important; border-radius: 8px;\n background: var(--sa-primary) !important; color: #fff !important;\n font-size: 12px; font-weight: 600;\n transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;\n box-shadow: 0 1px 4px rgba(99,102,241,0.25);\n }\n .sa-header-btn-artifact:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(99,102,241,0.3); }\n .sa-header-btn-artifact:active { transform: translateY(0) scale(0.97); }\n .sa-header-btn-artifact svg { stroke: #fff; }\n .sa-header-btn-artifact.sa-artifact-pulse { animation: sa-artifact-pulse 2s ease-in-out 3; }\n\n /* \u2500\u2500 Artifact drawer (right side panel) \u2500\u2500 */\n .sa-artifact-drawer {\n display: flex; flex-direction: column; min-width: 240px; max-width: 70%;\n border-left: 1px solid var(--sa-border); background: #fff; flex-shrink: 0; overflow: hidden;\n animation: sa-slide-in-right 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n position: relative;\n }\n .sa-artifact-drawer.sa-drawer-closing {\n animation: sa-slide-out-right 0.25s cubic-bezier(0.4, 0, 1, 1) both;\n }\n .sa-drawer-resize-handle {\n position: absolute; left: -3px; top: 0; bottom: 0; width: 6px;\n cursor: col-resize; z-index: 2;\n transition: background 0.15s ease;\n }\n .sa-drawer-resize-handle:hover, .sa-drawer-resize-handle:active {\n background: var(--sa-primary); opacity: 0.3; border-radius: 3px;\n }\n .sa-artifact-drawer-header {\n display: flex; align-items: center; gap: 8px; padding: 12px 14px;\n border-bottom: 1px solid var(--sa-border); font-weight: 600; font-size: 15px; color: var(--sa-text);\n background: var(--sa-surface);\n }\n .sa-artifact-drawer-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .sa-drawer-btn {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex; align-items: center;\n transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;\n }\n .sa-drawer-btn:hover { background: var(--sa-border); color: var(--sa-text); }\n .sa-drawer-btn:active { transform: scale(0.92); }\n .sa-drawer-btn-sm {\n border: 1px solid var(--sa-border); background: #fff; cursor: pointer; color: var(--sa-primary);\n padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;\n transition: background 0.15s ease, border-color 0.15s ease;\n }\n .sa-drawer-btn-sm:hover { background: var(--sa-surface); border-color: var(--sa-primary); }\n .sa-artifact-drawer-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }\n .sa-drawer-empty { padding: 48px 24px; text-align: center; color: var(--sa-text-muted); font-size: 14px; }\n .sa-drawer-file-list { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; }\n .sa-drawer-file-card {\n display: flex; align-items: center; gap: 10px; padding: 12px 14px;\n border: 1px solid var(--sa-border); border-radius: 10px; cursor: pointer; background: #fff;\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-drawer-file-card:nth-child(1) { animation-delay: 0s; }\n .sa-drawer-file-card:nth-child(2) { animation-delay: 0.04s; }\n .sa-drawer-file-card:nth-child(3) { animation-delay: 0.08s; }\n .sa-drawer-file-card:nth-child(4) { animation-delay: 0.12s; }\n .sa-drawer-file-card:nth-child(5) { animation-delay: 0.16s; }\n .sa-drawer-file-card:hover { border-color: var(--sa-primary); background: var(--sa-surface); box-shadow: 0 2px 8px rgba(99,102,241,0.08); transform: translateY(-1px); }\n .sa-drawer-file-card:active { transform: translateY(0) scale(0.98); }\n .sa-drawer-file-icon { flex-shrink: 0; }\n .sa-drawer-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }\n .sa-drawer-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 14px; color: var(--sa-text); }\n .sa-drawer-file-size { color: var(--sa-text-muted); font-size: 12px; }\n\n /* \u2500\u2500 Drawer preview \u2500\u2500 */\n .sa-drawer-preview-iframe { width: 100%; height: 100%; border: none; background: #fff; animation: sa-fade-in 0.3s ease both; }\n .sa-drawer-preview-loading {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n height: 100%; gap: 12px; color: var(--sa-text-muted); font-size: 14px;\n }\n .sa-drawer-preview-loading::before {\n content: ''; width: 28px; height: 28px; border-radius: 50%;\n border: 3px solid var(--sa-border); border-top-color: var(--sa-primary);\n animation: sa-spinner 0.7s linear infinite;\n }\n .sa-drawer-preview-error {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 14px; height: 100%; color: var(--sa-text-muted); font-size: 14px;\n animation: sa-fade-in 0.2s ease both;\n }\n\n /* \u2500\u2500 Drawer view transition \u2500\u2500 */\n .sa-drawer-view-enter { animation: sa-drawer-view-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }\n\n /* \u2500\u2500 Layout helpers for drawer alongside thread \u2500\u2500 */\n .sa-panel-content { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-panel-content .sa-thread { flex: 1; min-width: 120px; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n .sa-panel-content .sa-artifact-drawer { max-width: 60%; }\n .sa-fp-content-row { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-fp-content-row .sa-thread { flex: 1; min-width: 0; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n\n /* \u2500\u2500 Artifact keyframes \u2500\u2500 */\n @keyframes sa-slide-in-right {\n from { opacity: 0; transform: translateX(100%); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes sa-slide-out-right {\n from { opacity: 1; transform: translateX(0); }\n to { opacity: 0; transform: translateX(100%); }\n }\n @keyframes sa-fade-in-up {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes sa-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes sa-spinner {\n to { transform: rotate(360deg); }\n }\n @keyframes sa-artifact-pulse {\n 0%, 100% { box-shadow: 0 1px 4px rgba(99,102,241,0.25); }\n 50% { box-shadow: 0 2px 12px rgba(99,102,241,0.5); }\n }\n @keyframes sa-drawer-view-in {\n from { opacity: 0; transform: translateX(12px); }\n to { opacity: 1; transform: translateX(0); }\n }\n";
711
+ export declare const widgetStyles = "\n [data-super-agent-widget] {\n --sa-primary-dark: color-mix(in srgb, var(--sa-primary) 82%, #000);\n --sa-primary-light: color-mix(in srgb, var(--sa-primary) 10%, #fff);\n --sa-text: #1f2937;\n --sa-text-muted: #6b7280;\n --sa-text-light: #9ca3af;\n --sa-border: #e5e7eb;\n --sa-surface: #f9fafb;\n --sa-hover: #f3f4f6;\n\n font-family: var(--sa-font);\n color: var(--sa-text);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n }\n\n /* \u8FF7\u4F60 preflight\uFF08scoped\uFF09\uFF1ATailwind preflight \u5DF2\u7981\u7528\uFF08\u907F\u514D\u6C61\u67D3\u5BBF\u4E3B\u9875\uFF09\uFF0C\n \u4F46 border \u5DE5\u5177\u7C7B\u53EA\u8F93\u51FA border-width\u3001\u65E0 border-style\uFF08CSS \u521D\u59CB\u503C none \u2192 \u8FB9\u6846\u4E0D\u6E32\u67D3\uFF09\uFF0C\n button/ul \u4E5F\u4F1A\u5403\u5230\u6D4F\u89C8\u5668\u539F\u751F\u6837\u5F0F\u3002\u6B64\u5904\u8865\u9F50\u7B49\u4EF7\u590D\u4F4D\uFF1A\n - \u7279\u5F02\u6027 (0,1,0)\uFF0C\u4F4E\u4E8E scoped utility (0,2,0)\uFF0C\u9760\u6E90\u987A\u5E8F\u8BA9\u4F4D\u4E8E\u540E\u7F6E\u7684 sa-* plain \u7C7B\n - \u4E24\u6761\u6CE8\u5165\u987A\u5E8F\u56FA\u5B9A\u4E3A widgetStyles + tailwindStyles\uFF08mount.ts\uFF09\uFF0Cutility \u6052\u5728\u5176\u540E */\n [data-super-agent-widget] *,\n [data-super-agent-widget] *::before,\n [data-super-agent-widget] *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border-width: 0;\n border-style: solid;\n border-color: var(--sa-border, #e5e7eb);\n }\n\n /* :where() \u96F6\u7279\u5F02\u6027\u8D21\u732E\uFF1Aplain-CSS \u7EC4\u4EF6\u7C7B\uFF08\u5982 .sa-new-chat \u7684\u6E10\u53D8\u5E95\uFF09\u4E0D\u53D7\u5F71\u54CD */\n [data-super-agent-widget] :where(button) {\n font-family: inherit;\n background-color: transparent;\n background-image: none;\n cursor: pointer;\n }\n\n [data-super-agent-widget] :where(ul, ol) {\n list-style: none;\n }\n\n /* \u2500\u2500 Trigger / Panel / Header\uFF08\u6D6E\u7A97\u6846\u67B6\u5DF2\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 tailwind.css\uFF09 \u2500\u2500 */\n\n /* \u2500\u2500 Thread / messages \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-thread {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 16px;\n overflow-y: auto;\n padding: 16px;\n background: var(--sa-surface);\n scroll-behavior: smooth;\n }\n\n .sa-thread::-webkit-scrollbar {\n width: 6px;\n }\n\n .sa-thread::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.14);\n border-radius: 3px;\n }\n\n .sa-thread::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.24);\n }\n\n /* \u2500\u2500 Message\uFF1A\u6D6E\u7A97\u9ED8\u8BA4 hr-for-help \u98CE\u683C\uFF08AI \u5934\u50CF\u72EC\u5360\u4E00\u884C\uFF09\uFF1B\n fullpage \u6A21\u5F0F\u5728 .sa-fp-content-row \u4E0B\u6062\u590D\u539F\u6A2A\u6392\u5E03\u5C40\uFF0C\u4E92\u4E0D\u5F71\u54CD \u2500\u2500 */\n\n .sa-message {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n width: 100%;\n }\n\n .sa-message-user {\n justify-content: flex-end;\n }\n\n /* AI \u6D88\u606F\uFF1A\u5217\u5E03\u5C40\uFF0C\u5934\u50CF\u72EC\u5360\u4E00\u884C\uFF08\u4EC5\u6D6E\u7A97\uFF0C\u5BF9\u9F50 hr-for-help msgAi\uFF09 */\n .sa-message-assistant {\n flex-direction: column;\n align-items: flex-start;\n gap: 6px;\n }\n\n .sa-message-content {\n max-width: 78%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .sa-message-user .sa-message-content {\n max-width: 90%;\n }\n\n .sa-message-assistant .sa-message-content {\n max-width: 100%;\n min-width: 0;\n width: 100%;\n }\n\n .sa-message-body {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n /* \u6D6E\u7A97\u6C14\u6CE1\uFF1A\u7528\u6237\u6D45\u84DD\u3001AI \u767D\u5E95\u63CF\u8FB9\uFF08\u5BF9\u9F50 hr-for-help\uFF09 */\n .sa-message-user .sa-message-body {\n padding: 8px 12px;\n border-radius: 8px 8px 0 8px;\n background: #E8F1FE;\n color: #333333;\n font-size: 14px;\n line-height: 1.6;\n word-break: break-word;\n }\n\n .sa-message-assistant .sa-message-body {\n padding: 10px 12px;\n border-radius: 8px;\n background: #ffffff;\n border: 1px solid #E0E0E0;\n color: var(--sa-text);\n font-size: 14px;\n line-height: 1.5;\n word-break: break-word;\n }\n\n .sa-message-time {\n font-size: 11px;\n color: var(--sa-text-muted);\n opacity: 0.7;\n }\n\n .sa-message-time-right {\n text-align: right;\n }\n\n /* \u6D88\u606F\u5934\u50CF\uFF1A\u88F8\u5C55\u793A\uFF0C\u65E0\u80CC\u666F\u8272\uFF08\u5BF9\u9F50 hr-for-help msgAvatar\uFF09 */\n .sa-msg-avatar {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n object-fit: cover;\n flex-shrink: 0;\n display: block;\n }\n\n .sa-msg-avatar-text {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n font-weight: 400;\n }\n\n /* \u2500\u2500 fullpage \u8986\u76D6\uFF1A\u6062\u590D\u6A2A\u6392\u5934\u50CF + \u7ECF\u5178\u6C14\u6CE1\uFF08\u4E0D\u53D7\u6D6E\u7A97 hr-for-help \u6539\u7248\u5F71\u54CD\uFF09 \u2500\u2500 */\n\n .sa-fp-content-row .sa-message-assistant {\n flex-direction: row;\n gap: 10px;\n }\n\n .sa-fp-content-row .sa-message-assistant .sa-message-content {\n max-width: 88%;\n width: auto;\n }\n\n .sa-fp-content-row .sa-message-user .sa-message-content {\n max-width: 78%;\n }\n\n // .sa-fp-content-row .sa-message-user .sa-message-body {\n // padding: 10px 14px;\n // border-radius: 16px;\n // border-bottom-right-radius: 4px;\n // background: var(--sa-primary);\n // color: #ffffff;\n // font-size: 14px;\n // line-height: 1.55;\n // word-break: break-word;\n // }\n\n .sa-fp-content-row .sa-message-assistant .sa-message-body {\n padding: 10px 14px;\n border-radius: 16px;\n background: #ffffff;\n color: var(--sa-text);\n font-size: 14px;\n line-height: 1.55;\n word-break: break-word;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n }\n\n .sa-fp-content-row .sa-msg-avatar {\n width: 24px;\n height: 24px;\n }\n\n .sa-fp-content-row .sa-msg-avatar-text {\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n color: #ffffff;\n font-size: 12px;\n font-weight: 600;\n }\n\n /* \u2500\u2500 Text part (markdown) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-text-part {\n font-size: 14px;\n line-height: 1.6;\n word-break: break-word;\n }\n\n .sa-text-part p {\n margin: 0 0 8px;\n }\n\n .sa-text-part p:last-child {\n margin-bottom: 0;\n }\n\n .sa-text-part strong {\n font-weight: 600;\n }\n\n .sa-text-part em {\n font-style: italic;\n }\n\n .sa-text-part h1,\n .sa-text-part h2,\n .sa-text-part h3,\n .sa-text-part h4,\n .sa-text-part h5,\n .sa-text-part h6 {\n margin: 12px 0 6px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .sa-text-part h1 {\n font-size: 1.4em;\n }\n\n .sa-text-part h2 {\n font-size: 1.25em;\n }\n\n .sa-text-part h3 {\n font-size: 1.1em;\n }\n\n .sa-text-part h4,\n .sa-text-part h5,\n .sa-text-part h6 {\n font-size: 1em;\n }\n\n .sa-text-part a {\n color: var(--sa-primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n\n .sa-text-part a:hover {\n color: var(--sa-primary-dark);\n }\n\n .sa-inline-code {\n padding: 2px 5px;\n border-radius: 4px;\n background: rgba(0, 0, 0, 0.06);\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 0.9em;\n }\n\n .sa-code-block {\n margin: 8px 0;\n padding: 12px 14px;\n border-radius: 10px;\n background: #1e293b;\n color: #e2e8f0;\n overflow-x: auto;\n font-size: 13px;\n line-height: 1.55;\n }\n\n .sa-code-block code {\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n white-space: pre;\n }\n\n .sa-list {\n margin: 6px 0;\n padding-left: 22px;\n }\n\n .sa-list li {\n margin: 3px 0;\n line-height: 1.5;\n }\n\n ul.sa-list {\n list-style: disc;\n }\n\n ol.sa-list {\n list-style: decimal;\n }\n\n /* \u2500\u2500 Thinking part \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-thinking-part {\n margin: 6px 0;\n padding: 8px 12px;\n border-left: 3px solid var(--sa-primary);\n border-radius: 8px;\n background: var(--sa-primary-light);\n cursor: pointer;\n font-size: 13px;\n }\n\n .sa-thinking-header {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--sa-primary-dark);\n font-weight: 500;\n user-select: none;\n }\n\n .sa-thinking-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-thinking-label {\n flex: 1;\n }\n\n .sa-thinking-arrow {\n font-size: 12px;\n transition: transform 0.2s ease;\n }\n\n .sa-thinking-arrow.expanded {\n transform: rotate(90deg);\n }\n\n .sa-thinking-content {\n margin-top: 8px;\n color: #4b5563;\n white-space: pre-wrap;\n line-height: 1.55;\n }\n\n /* \u2500\u2500 Tool call / result \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-tool-call-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-call-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n font-size: 13px;\n user-select: none;\n }\n\n .sa-tool-call-header:hover {\n background: var(--sa-surface);\n }\n\n .sa-tool-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-tool-name {\n flex: 1;\n color: #374151;\n font-weight: 500;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-tool-args {\n margin: 0;\n padding: 10px 12px;\n border-top: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n overflow-x: auto;\n }\n\n .sa-tool-result-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-result-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-bottom: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-size: 13px;\n font-weight: 500;\n }\n\n .sa-tool-result-content {\n max-height: 256px;\n overflow: auto;\n margin: 8px 0 0;\n padding: 10px 12px;\n color: #4b5563;\n font-size: 13px;\n line-height: 1.55;\n white-space: pre-wrap;\n word-break: break-word;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n background: #f9fafb;\n border-radius: 8px;\n }\n\n .sa-tool-result-actions {\n display: flex;\n gap: 8px;\n margin: 4px 0;\n }\n\n /* \u2500\u2500 Error part \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-error-part {\n margin: 6px 0;\n padding: 10px 12px;\n border: 1px solid #fecaca;\n border-radius: 10px;\n background: #fef2f2;\n color: #b91c1c;\n }\n\n .sa-error-content {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 13px;\n line-height: 1.5;\n }\n\n .sa-error-icon {\n font-size: 14px;\n line-height: 1.4;\n }\n\n .sa-error-retry {\n margin-top: 8px;\n padding: 6px 14px;\n border: none;\n border-radius: 8px;\n background: #ef4444;\n color: #ffffff;\n font-size: 13px;\n cursor: pointer;\n transition: background 0.2s ease;\n }\n\n .sa-error-retry:hover {\n background: #dc2626;\n }\n\n /* \u2500\u2500 Action bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-action-bar {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 6px;\n position: relative;\n }\n\n .sa-action-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n flex: none;\n white-space: nowrap;\n line-height: 1;\n padding: 4px 10px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--sa-text-muted);\n font-size: 12px;\n cursor: pointer;\n transition: color 0.15s ease, background 0.15s ease;\n }\n\n .sa-action-btn svg {\n display: block;\n flex: none;\n }\n\n .sa-action-btn:hover {\n color: var(--sa-text);\n background: rgba(0, 0, 0, 0.05);\n }\n\n .sa-action-btn-active {\n color: var(--sa-primary) !important;\n background: var(--sa-primary-light) !important;\n }\n\n .sa-action-divider {\n width: 1px;\n height: 16px;\n background: var(--sa-border);\n margin: 0 2px;\n align-self: center;\n }\n\n /* \u2500\u2500 Dislike Panel \u2500\u2500 */\n .sa-dislike-panel {\n position: absolute; top: 100%; left: 0; right: 0;\n margin-top: 6px; padding: 12px;\n background: #fff; border: 1px solid var(--sa-border); border-radius: 10px;\n box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n animation: sa-fade-in-up 0.2s cubic-bezier(0.16,1,0.3,1) both;\n z-index: 10;\n }\n .sa-dislike-panel-title { font-size: 13px; font-weight: 500; color: var(--sa-text); margin-bottom: 8px; }\n .sa-dislike-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }\n .sa-dislike-reason-btn {\n padding: 4px 10px; border: 1px solid var(--sa-border); border-radius: 6px;\n background: #fff; color: var(--sa-text); font-size: 12px; cursor: pointer;\n transition: border-color 0.15s, background 0.15s, color 0.15s;\n }\n .sa-dislike-reason-btn:hover { border-color: var(--sa-primary); color: var(--sa-primary); }\n .sa-dislike-reason-btn.active { background: var(--sa-primary); color: #fff; border-color: var(--sa-primary); }\n .sa-dislike-remark {\n width: 100%; padding: 8px 10px; border: 1px solid var(--sa-border); border-radius: 8px;\n font-size: 13px; color: var(--sa-text); resize: none; outline: none;\n transition: border-color 0.15s;\n }\n .sa-dislike-remark:focus { border-color: var(--sa-primary); }\n .sa-dislike-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }\n .sa-dislike-submit {\n padding: 5px 14px; border: none; border-radius: 6px;\n background: var(--sa-primary); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer;\n transition: opacity 0.15s;\n }\n .sa-dislike-submit:hover { opacity: 0.9; }\n .sa-dislike-cancel {\n padding: 5px 14px; border: 1px solid var(--sa-border); border-radius: 6px;\n background: #fff; color: var(--sa-text-muted); font-size: 13px; cursor: pointer;\n transition: background 0.15s;\n }\n .sa-dislike-cancel:hover { background: var(--sa-surface); }\n\n /* \u2500\u2500 Composer\uFF08\u8F93\u5165\u533A\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 tailwind.css \u7684 .sa-input-form/.sa-send-btn\uFF09 \u2500\u2500 */\n\n /* \u2500\u2500 Slash Menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-slash-menu {\n position: absolute;\n bottom: 100%;\n left: 14px;\n right: 14px;\n max-width: 400px;\n max-height: 200px;\n overflow-y: auto;\n background: var(--sa-surface);\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);\n margin-bottom: 4px;\n z-index: 10;\n }\n\n .sa-slash-menu-empty {\n padding: 12px 14px;\n color: #9ca3af;\n font-size: 13px;\n text-align: center;\n }\n\n .sa-slash-menu-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .sa-slash-menu-item:hover,\n .sa-slash-menu-item--active {\n background: var(--sa-hover);\n }\n\n .sa-slash-menu-item-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--sa-text);\n white-space: nowrap;\n }\n\n .sa-slash-menu-item-desc {\n font-size: 12px;\n color: #9ca3af;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n min-width: 0;\n }\n\n /* \u2500\u2500 Thread list\uFF08\u5185\u5D4C\u4FA7\u8FB9\u680F\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 FullpageLayout.tsx / ThreadList.tsx\uFF09 \u2500\u2500 */\n\n /* \u6D88\u606F\u533A\u52A0\u8F7D\u6001 */\n .sa-messages-loading {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n color: #9ca3af;\n font-size: 14px;\n }\n\n .sa-loading-spinner {\n width: 16px;\n height: 16px;\n border: 2px solid var(--sa-border, #e5e7eb);\n border-top-color: var(--sa-primary, #6366f1);\n border-radius: 50%;\n animation: sa-spin 0.8s linear infinite;\n flex-shrink: 0;\n }\n\n @keyframes sa-spin {\n to { transform: rotate(360deg); }\n }\n\n /* \u2500\u2500 Welcome\uFF08\u9996\u9875\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 tailwind.css\uFF09 \u2500\u2500 */\n\n .sa-thinking-indicator {\n color: #9ca3af;\n font-size: 14px;\n animation: sa-blink 1.2s ease-in-out infinite;\n }\n\n /* \u2500\u2500 Interrupt cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-interrupt-card {\n margin: 8px 0;\n padding: 14px;\n border: 1px solid #e0e7ff;\n border-radius: 10px;\n background: #f8faff;\n }\n\n .sa-interrupt-content {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 13px;\n line-height: 1.6;\n color: var(--sa-text);\n margin-bottom: 12px;\n }\n\n .sa-interrupt-actions {\n display: flex;\n gap: 8px;\n margin-top: 10px;\n }\n\n .sa-interrupt-btn {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 14px;\n border: none;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s, opacity 0.15s;\n }\n\n .sa-interrupt-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .sa-interrupt-btn-primary {\n background: var(--sa-primary);\n color: #fff;\n }\n\n .sa-interrupt-btn-primary:hover:not(:disabled) {\n opacity: 0.9;\n }\n\n .sa-interrupt-btn-secondary {\n background: #f3f4f6;\n color: #374151;\n }\n\n .sa-interrupt-btn-secondary:hover:not(:disabled) {\n background: #e5e7eb;\n }\n\n .sa-interrupt-btn-danger {\n background: #fef2f2;\n color: #dc2626;\n }\n\n .sa-interrupt-btn-danger:hover:not(:disabled) {\n background: #fee2e2;\n }\n\n .sa-interrupt-options {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .sa-interrupt-option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n background: #fff;\n color: var(--sa-text);\n font-size: 13px;\n cursor: pointer;\n text-align: left;\n transition: border-color 0.12s, background 0.12s;\n }\n\n .sa-interrupt-option:hover {\n border-color: var(--sa-primary);\n background: #f5f3ff;\n }\n\n .sa-interrupt-option-selected {\n border-color: var(--sa-primary);\n background: #ede9fe;\n color: var(--sa-primary);\n font-weight: 500;\n }\n\n .sa-interrupt-option-danger {\n color: #ef4444;\n }\n\n .sa-interrupt-option-danger:hover {\n border-color: #ef4444;\n background: #fef2f2;\n }\n\n .sa-interrupt-option-desc {\n font-size: 11px;\n color: var(--sa-text-muted);\n margin-left: auto;\n }\n\n .sa-interrupt-input-area {\n margin-top: 4px;\n }\n\n .sa-interrupt-input,\n .sa-interrupt-textarea,\n .sa-interrupt-select {\n width: 100%;\n padding: 8px 12px;\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n background: #fff;\n color: var(--sa-text);\n font-size: 13px;\n font-family: inherit;\n outline: none;\n transition: border-color 0.15s;\n }\n\n .sa-interrupt-input:focus,\n .sa-interrupt-textarea:focus,\n .sa-interrupt-select:focus {\n border-color: var(--sa-primary);\n }\n\n .sa-interrupt-textarea {\n resize: vertical;\n min-height: 60px;\n }\n\n .sa-interrupt-form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin-top: 4px;\n }\n\n .sa-interrupt-form-field {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .sa-interrupt-form-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--sa-text);\n }\n\n .sa-interrupt-form-required {\n color: #ef4444;\n margin-left: 2px;\n }\n\n .sa-interrupt-submitted {\n margin-top: 8px;\n font-size: 12px;\n color: #9ca3af;\n }\n\n .sa-interrupt-btn-answered {\n background: var(--sa-primary) !important;\n color: #fff !important;\n opacity: 0.7;\n }\n\n .sa-interrupt-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .sa-interrupt-option:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n .sa-interrupt-input:disabled,\n .sa-interrupt-textarea:disabled,\n .sa-interrupt-select:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n background: #f9fafb;\n }\n\n .sa-interrupt-unknown {\n padding: 8px 12px;\n border-radius: 8px;\n background: #fef3c7;\n color: #92400e;\n font-size: 13px;\n margin: 6px 0;\n }\n\n /* \u2500\u2500 Animations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n @keyframes sa-blink {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n }\n\n /* \u2500\u2500 Fullpage Layout (DeepSeek-style) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-fullpage {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n background: var(--sa-bg, #ffffff);\n }\n\n /* Sidebar\uFF08fullpage \u9ED8\u8BA4\u4FA7\u8FB9\u680F\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u5BF9\u9F50\u6D6E\u7A97\u5386\u53F2\u5BF9\u8BDD\u6837\u5F0F\uFF0C\u89C1 FullpageLayout.tsx\uFF09 */\n\n /* Sidebar wrapper (for custom ThreadList slot)\uFF1A\u5BBD\u5EA6\u4E0E\u9ED8\u8BA4\u4FA7\u8FB9\u680F 220px \u5BF9\u9F50 */\n .sa-fp-sidebar-wrapper {\n width: 220px;\n flex-shrink: 0;\n overflow: hidden;\n border-right: 1px solid #ECECEC;\n background: #FAFAFA;\n transition: width 0.2s cubic-bezier(0.16,1,0.3,1);\n }\n\n .sa-fp-sidebar-wrapper-collapsed {\n width: 0;\n border-right: none;\n }\n\n /* Main area */\n .sa-fp-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n background: #fff;\n }\n\n .sa-fp-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n border-bottom: 1px solid #f0f0f0;\n background: #fff;\n flex-shrink: 0;\n min-height: 52px;\n }\n\n .sa-fp-header-title {\n flex: 1;\n font-size: 15px;\n font-weight: 500;\n color: #18181b;\n letter-spacing: -0.2px;\n }\n\n .sa-fp-header-actions {\n display: flex;\n gap: 4px;\n }\n\n .sa-fp-header-btn {\n min-width: 34px;\n height: 34px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: #71717a;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.12s, color 0.12s;\n }\n\n .sa-fp-header-btn:hover {\n background: #f4f4f5;\n color: #18181b;\n }\n\n /* Fullpage thread/composer override */\n .sa-fp-main .sa-thread {\n margin: 0 auto;\n width: 100%;\n padding: 24px 24px;\n }\n\n /* \u2500\u2500 Artifact file cards (in ToolResultPart) \u2500\u2500 */\n .sa-artifact-file-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }\n .sa-artifact-file-card {\n display: flex; align-items: center; gap: 10px; padding: 8px 10px;\n border: 1px solid var(--sa-border); border-radius: 10px; background: var(--sa-surface);\n font-size: 13px; color: var(--sa-text);\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-artifact-file-card:hover { border-color: var(--sa-primary); background: #fff; box-shadow: 0 2px 8px rgba(99,102,241,0.1); transform: translateY(-1px); }\n .sa-artifact-file-card:active { transform: translateY(0) scale(0.99); }\n .sa-artifact-file-icon { flex-shrink: 0; }\n .sa-artifact-chip-type {\n display: inline-flex; align-items: center; justify-content: center;\n min-width: 36px; padding: 2px 6px; border-radius: 5px;\n background: var(--sa-primary); color: #fff;\n font-size: 10px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.4;\n }\n .sa-artifact-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }\n .sa-artifact-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }\n .sa-artifact-file-size { color: var(--sa-text-muted); font-size: 12px; }\n .sa-artifact-file-download {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex;\n transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;\n }\n .sa-artifact-file-download:hover { color: var(--sa-primary); background: rgba(99,102,241,0.08); }\n .sa-artifact-file-download:active { transform: scale(0.9); }\n\n /* \u2500\u2500 Inline HTML rendering (render_mode=html) \u2500\u2500 */\n /* HTML \u5DE5\u5177\u7ED3\u679C\uFF1A\u5916\u5C42\u6EDA\u52A8\u5BB9\u5668 + \u5185\u5C42\u5185\u5BB9\u5C42\uFF08\u4E0E Playground \u4E00\u81F4\uFF0C\u65E0 iframe\uFF09 */\n .sa-tool-result-html-scroll { margin-top: 8px; max-height: 60vh; overflow: auto; border: 1px solid var(--sa-border); border-radius: 8px; }\n .sa-tool-result-html { padding: 12px; background: #fff; min-width: 100%; width: max-content; }\n\n /* \u2500\u2500 Header artifact button \u2500\u2500 */\n .sa-header-btn-artifact {\n display: inline-flex; align-items: center; gap: 4px;\n padding: 4px 12px !important; border-radius: 8px;\n background: var(--sa-primary) !important; color: #fff !important;\n font-size: 12px; font-weight: 600;\n transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;\n box-shadow: 0 1px 4px rgba(99,102,241,0.25);\n }\n .sa-header-btn-artifact:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(99,102,241,0.3); }\n .sa-header-btn-artifact:active { transform: translateY(0) scale(0.97); }\n .sa-header-btn-artifact svg { stroke: #fff; }\n .sa-header-btn-artifact.sa-artifact-pulse { animation: sa-artifact-pulse 2s ease-in-out 3; }\n\n /* \u2500\u2500 Artifact drawer (right side panel) \u2500\u2500 */\n .sa-artifact-drawer {\n display: flex; flex-direction: column; min-width: 240px; max-width: 70%;\n border-left: 1px solid var(--sa-border); background: #fff; flex-shrink: 0; overflow: hidden;\n animation: sa-slide-in-right 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n position: relative;\n }\n .sa-artifact-drawer.sa-drawer-closing {\n animation: sa-slide-out-right 0.25s cubic-bezier(0.4, 0, 1, 1) both;\n }\n .sa-drawer-resize-handle {\n position: absolute; left: -3px; top: 0; bottom: 0; width: 6px;\n cursor: col-resize; z-index: 2;\n transition: background 0.15s ease;\n }\n .sa-drawer-resize-handle:hover, .sa-drawer-resize-handle:active {\n background: var(--sa-primary); opacity: 0.3; border-radius: 3px;\n }\n .sa-artifact-drawer-header {\n display: flex; align-items: center; gap: 8px; padding: 12px 14px;\n border-bottom: 1px solid var(--sa-border); font-weight: 600; font-size: 15px; color: var(--sa-text);\n background: var(--sa-surface);\n }\n .sa-artifact-drawer-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .sa-drawer-btn {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex; align-items: center;\n transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;\n }\n .sa-drawer-btn:hover { background: var(--sa-border); color: var(--sa-text); }\n .sa-drawer-btn:active { transform: scale(0.92); }\n .sa-drawer-btn-sm {\n border: 1px solid var(--sa-border); background: #fff; cursor: pointer; color: var(--sa-primary);\n padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;\n transition: background 0.15s ease, border-color 0.15s ease;\n }\n .sa-drawer-btn-sm:hover { background: var(--sa-surface); border-color: var(--sa-primary); }\n /* flex \u5217\u5BB9\u5668\uFF1A\u8BA9 .sa-drawer-view-enter\uFF08flex:1\uFF09\u4E0E\u5185\u5C42\u6EDA\u52A8/iframe \u6709\u771F\u5B9E\u9AD8\u5EA6\u94FE */\n .sa-artifact-drawer-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }\n .sa-drawer-empty { padding: 48px 24px; text-align: center; color: var(--sa-text-muted); font-size: 14px; }\n .sa-drawer-file-list { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; }\n .sa-drawer-file-card {\n display: flex; align-items: center; gap: 10px; padding: 12px 14px;\n border: 1px solid var(--sa-border); border-radius: 10px; cursor: pointer; background: #fff;\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-drawer-file-card:nth-child(1) { animation-delay: 0s; }\n .sa-drawer-file-card:nth-child(2) { animation-delay: 0.04s; }\n .sa-drawer-file-card:nth-child(3) { animation-delay: 0.08s; }\n .sa-drawer-file-card:nth-child(4) { animation-delay: 0.12s; }\n .sa-drawer-file-card:nth-child(5) { animation-delay: 0.16s; }\n .sa-drawer-file-card:hover { border-color: var(--sa-primary); background: var(--sa-surface); box-shadow: 0 2px 8px rgba(99,102,241,0.08); transform: translateY(-1px); }\n .sa-drawer-file-card:active { transform: translateY(0) scale(0.98); }\n .sa-drawer-file-icon { flex-shrink: 0; }\n .sa-drawer-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }\n .sa-drawer-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 14px; color: var(--sa-text); }\n .sa-drawer-file-size { color: var(--sa-text-muted); font-size: 12px; }\n\n /* \u2500\u2500 Drawer preview \u2500\u2500 */\n .sa-drawer-preview-iframe { width: 100%; height: 100%; border: none; background: #fff; animation: sa-fade-in 0.3s ease both; }\n /* html/docx \u5185\u8054\u9884\u89C8\uFF1A\u4E0E\u6D88\u606F\u6D41 ToolResultPart \u4E00\u81F4\uFF08\u65E0 iframe\uFF09 */\n .sa-drawer-preview-html-scroll { flex: 1; min-height: 0; overflow: auto; padding: 12px; background: #fff; animation: sa-fade-in 0.3s ease both; }\n .sa-drawer-preview-html { max-width: none; }\n .sa-drawer-preview-loading {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n height: 100%; gap: 12px; color: var(--sa-text-muted); font-size: 14px;\n }\n .sa-drawer-preview-loading::before {\n content: ''; width: 28px; height: 28px; border-radius: 50%;\n border: 3px solid var(--sa-border); border-top-color: var(--sa-primary);\n animation: sa-spinner 0.7s linear infinite;\n }\n .sa-drawer-preview-error {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 14px; height: 100%; color: var(--sa-text-muted); font-size: 14px;\n animation: sa-fade-in 0.2s ease both;\n }\n\n /* \u2500\u2500 Drawer view transition \u2500\u2500 */\n /* flex \u5217 + flex:1 \u6491\u6EE1 drawer body\uFF0C\u8BA9\u5185\u5C42 .sa-drawer-preview-html-scroll \u7684\n flex:1/min-height:0 \u4E0E pdf iframe \u7684 height:100% \u6709\u771F\u5B9E\u9AD8\u5EA6\u94FE */\n .sa-drawer-view-enter { display: flex; flex-direction: column; flex: 1; min-height: 0; animation: sa-drawer-view-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }\n\n /* \u2500\u2500 Layout helpers for drawer alongside thread \u2500\u2500 */\n .sa-panel-content { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-panel-content .sa-thread { flex: 1; min-width: 120px; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n .sa-panel-content .sa-artifact-drawer { max-width: 60%; }\n .sa-fp-content-row { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-fp-content-row .sa-thread { flex: 1; min-width: 0; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n\n /* \u2500\u2500 Page overlay\uFF08\u9762\u677F\u7EA7\u6574\u5C4F\u9875\u9762\uFF1A\u66FF\u6362\u5185\u5BB9\u533A + \u8F93\u5165\u533A\uFF0CHeader \u4FDD\u7559\uFF09 \u2500\u2500 */\n .sa-page-overlay {\n display: flex; flex-direction: column; flex: 1; min-height: 0;\n position: relative; z-index: 2; background: #fff; overflow: hidden;\n animation: sa-page-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n /* \u5927\u7A97\u6001\u4E0E\u5185\u5BB9\u533A/\u8F93\u5165\u533A\u4E00\u81F4\u7684 800px \u5C45\u4E2D */\n .sa-page-overlay-centered { width: 100%; max-width: 800px; margin: 0 auto; }\n .sa-page-overlay-bar {\n display: flex; align-items: center; gap: 8px; flex-shrink: 0;\n padding: 10px 14px; border-bottom: 1px solid var(--sa-border);\n background: var(--sa-surface); color: var(--sa-text);\n font-size: 15px; font-weight: 600;\n }\n .sa-page-overlay-back-label { font-size: 13px; font-weight: 400; }\n .sa-page-overlay-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n /* \u6EDA\u52A8\u5F52 SDK\uFF0C\u4E1A\u52A1\u9875\u4E0D\u5199\u6EDA\u52A8\u5BB9\u5668 */\n .sa-page-overlay-body { flex: 1; min-height: 0; overflow-y: auto; }\n /* \u2500\u2500 Artifact keyframes \u2500\u2500 */\n @keyframes sa-slide-in-right {\n from { opacity: 0; transform: translateX(100%); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes sa-slide-out-right {\n from { opacity: 1; transform: translateX(0); }\n to { opacity: 0; transform: translateX(100%); }\n }\n @keyframes sa-fade-in-up {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes sa-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes sa-spinner {\n to { transform: rotate(360deg); }\n }\n @keyframes sa-artifact-pulse {\n 0%, 100% { box-shadow: 0 1px 4px rgba(99,102,241,0.25); }\n 50% { box-shadow: 0 2px 12px rgba(99,102,241,0.5); }\n }\n @keyframes sa-drawer-view-in {\n from { opacity: 0; transform: translateX(12px); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes sa-page-in {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n";
642
712
 
643
713
  export { }