super-agent-sdk 1.0.25 → 1.0.27

package/dist/widget.d.ts

@@ -94,6 +94,8 @@ declare interface ChatEvent {
     type: "session.start" | "user" | "thinking" | "ai" | "tool_call" | "tool_delta" | "tool_result" | "done" | "stop" | "error" | "interrupt";
     content: string;
     toolName?: string;
+    /** 工具的 LLM 调用标识（SSE 帧 code；toolCallDisplay.visibleTools 白名单按它匹配） */
+    toolCode?: string;
     toolCallId?: string;
     args?: string;
     sessionId?: string;
@@ -127,7 +129,7 @@ declare interface ChatOptions {
     signal?: AbortSignal;
 }
 
-export declare function ChatProvider({ sdk, hooks, attachmentUploader, nosUpload, mode, children }: ChatProviderProps): default_2.JSX.Element;
+export declare function ChatProvider({ sdk, hooks, attachmentUploader, nosUpload, mode, toolCallDisplay, children }: ChatProviderProps): default_2.JSX.Element;
 
 declare interface ChatProviderProps {
     sdk: SuperAgentSDK;
@@ -139,6 +141,8 @@ declare interface ChatProviderProps {
     /** 宿主模式：floating（小窗/大窗）抽屉恒覆盖——两列分栏体验差（用户决策）；
      * fullpage 宽度驱动分栏（宽屏边聊边看） */
     mode?: 'floating' | 'fullpage';
+    /** 工具调用展示控制（mount 配置 toolCallDisplay：显示开关/白名单/折叠节奏） */
+    toolCallDisplay?: ToolCallDisplayOptions;
     children: default_2.ReactNode;
 }
 
@@ -209,20 +213,6 @@ declare interface ChatWidgetProps extends MountOptions {
     onOpenChange?: (isOpen: boolean) => void;
 }
 
-/** 折叠内容展示配置（思维链 / 工具调用共用形态，字段可扩展） */
-declare interface CollapseDisplayConfig {
-    /** 流式期间自动展开、结束自动收起；默认 true */
-    expandWhileStreaming?: boolean;
-    /** 收起条显示耗时（思维链有效；live 轮有数据，历史回显无）；默认 true */
-    showDuration?: boolean;
-}
-
-/** 折叠内容展示配置组：collapse 对象出现即全开，子项仅覆盖缺省值 */
-declare interface CollapseDisplayOptions {
-    thinking?: CollapseDisplayConfig;
-    toolCall?: CollapseDisplayConfig;
-}
-
 /**
  * 底部输入区（样式对齐 hr-for-help inputArea）：
  * 渐变描边输入框（聚焦/有内容时渐变点亮）+ 附件按钮 + 发送/停止按钮 + 底部 AI 提示文案。
@@ -323,7 +313,11 @@ declare interface FullpageLayoutProps {
     avatar?: AvatarConfig;
     artifactPreview?: boolean;
     showTimestamp?: boolean;
-    collapse?: CollapseDisplayOptions;
+    collapse?: {
+        thinking?: {
+            showDuration?: boolean;
+        };
+    };
 }
 
 export declare function Header({ onClose, onToggleThreadList, isMaximized, onToggleMaximize, showHome, onHome, showClose, artifactCount, onToggleArtifactDrawer, panelTitle, }: InternalHeaderProps): JSX_2.Element;
@@ -386,8 +380,12 @@ declare interface InternalMessageProps {
     artifactPreview?: boolean;
     /** 显示消息时间戳（默认 false，对齐 hr-for-help 不显示） */
     showTimestamp?: boolean;
-    /** 折叠内容（思维链/工具调用）展示配置（mount 配置 collapse） */
-    collapse?: CollapseDisplayOptions;
+    /** 思维链折叠展示配置（mount 配置 collapse.thinking） */
+    collapse?: {
+        thinking?: {
+            showDuration?: boolean;
+        };
+    };
 }
 
 export declare function InterruptCard({ interrupt, resolved, response, onRespond }: InterruptCardProps): JSX_2.Element;
@@ -493,8 +491,12 @@ export declare interface MessageProps {
     onFeedback?: (messageId: string, feedback: 'like' | 'dislike') => void;
     /** 是否显示消息时间戳（mount 配置 showTimestamp），默认 false 不显示 */
     showTimestamp?: boolean;
-    /** 折叠内容（思维链/工具调用）展示配置（mount 配置 collapse），未配置走默认行为 */
-    collapse?: CollapseDisplayOptions;
+    /** 思维链折叠展示配置（mount 配置 collapse.thinking），未配置走默认行为 */
+    collapse?: {
+        thinking?: {
+            showDuration?: boolean;
+        };
+    };
 }
 
 export declare function mount(target: string | HTMLElement, options: MountOptions): WidgetInstance;
@@ -521,6 +523,11 @@ export declare interface MountOptions {
     triggerLogo?: string;
     /** 显示消息时间戳，默认 false（对齐 hr-for-help，不显示时间） */
     showTimestamp?: boolean;
+    /**
+     * 工具调用的展示控制（统一配置面）：显示开关 + 白名单 + 折叠节奏。
+     * 未配置 = 现状（全显示、默认收起、无 pending 自动展开）。
+     */
+    toolCallDisplay?: ToolCallDisplayOptions;
     /**
      * 附件上传器（完全自定义，优先于 nosUpload）：把 File 直传 NOS 并返回 ChatAttachment。
      * 不配置则输入区不显示附件按钮（功能关闭，零影响）。
@@ -532,12 +539,15 @@ export declare interface MountOptions {
      */
     nosUpload?: NosUploadConfig;
     /**
-     * 折叠内容（思维链 / 工具调用）的 DeepSeek 式展示：流式期间自动展开、结束收起，
-     * 思维链收起条显示「已深度思考 · 用时 Ns」（仅 live 轮有耗时数据）。
-     * 对象出现（含 {}）即整体开启；子项/子字段仅做覆盖，缺省全 true。
-     * 未配置 = 现状（默认收起、无耗时）。对象结构可扩展。
+     * 思维链的 ThoughtChain 式节点展示：步骤节点默认收起、点击展开，
+     * 收起条显示「已深度思考 · 用时 Ns」（仅 live 轮有耗时数据）。
+     * 对象出现（含 {}）即开启；子项仅做覆盖（如 { showDuration: false }）。
      */
-    collapse?: CollapseDisplayOptions;
+    collapse?: {
+        thinking?: {
+            showDuration?: boolean;
+        };
+    };
 }
 
 /** 内置 NOS 直传配置（协议对齐 @netease-ehr/ui Upload 的 nosUpload 路径） */
@@ -649,7 +659,9 @@ declare interface SuperAgentSDK {
     listConversations(params?: ListConversationsParams): Promise<ListConversationsResult>;
     renameConversation(sessionId: string, title: string): Promise<void>;
     deleteConversation(sessionId: string): Promise<void>;
-    getMessages(sessionId: string): Promise<UIMessage[]>;
+    getMessages(sessionId: string, options?: {
+        isToolCallVisible?: (toolCode?: string, toolName?: string) => boolean;
+    }): Promise<UIMessage[]>;
     /** 响应中断事件（返回 SSE 流，后端继续推送后续事件）；signal 供调用方中断续流 */
     respondInterrupt(interruptId: string, sessionId: string, response: InterruptResponse, onMessage?: (event: ChatEvent) => void, onError?: (error: Error) => void, signal?: AbortSignal): Promise<void>;
     setToken(token: string): void;
@@ -689,7 +701,9 @@ export declare interface ThemeConfig {
 /** Convert ThemeConfig to CSS custom properties string */
 export declare function themeToCSSVars(theme: ThemeConfig): string;
 
-export declare function ThinkingPart({ content, isStreaming, durationMs, expandWhileStreaming, showDuration }: ThinkingPartProps): JSX_2.Element;
+/** 思维链步骤节点（ThoughtChain 风格）：默认收起，点击展开。
+ * loading 态转圈、完成后变实心勾；耗时显示在标题行（已深度思考 · 用时 3.2s）。 */
+export declare function ThinkingPart({ content, isStreaming, durationMs, showDuration }: ThinkingPartProps): JSX_2.Element;
 
 export declare interface ThinkingPartProps {
     content: string;
@@ -697,8 +711,6 @@ export declare interface ThinkingPartProps {
     isStreaming?: boolean;
     /** 思维链耗时 ms（live 轮有，历史回显无数据不显示） */
     durationMs?: number;
-    /** 流式期间自动展开、结束收起（collapse.thinking.expandWhileStreaming，默认 true） */
-    expandWhileStreaming?: boolean;
     /** 收起条显示耗时（collapse.thinking.showDuration，默认 true） */
     showDuration?: boolean;
 }
@@ -735,10 +747,26 @@ declare interface ThreadProps {
     quickLinks?: QuickLinkItem[];
     logo?: string;
     showTimestamp?: boolean;
-    collapse?: CollapseDisplayOptions;
+    collapse?: {
+        thinking?: {
+            showDuration?: boolean;
+        };
+    };
+}
+
+/** 工具调用展示控制（单一配置面）：显示开关 + 白名单。
+ *  hidden=true 时 visibleTools 白名单放行，其余工具调用与返回完全隐藏。 */
+declare interface ToolCallDisplayOptions {
+    /** 隐藏工具调用与返回（tool_call + tool_result 双向过滤）；默认 false = 全显示 */
+    hidden?: boolean;
+    /** 白名单：其中的工具照常显示，其余全藏。条目为工具 id（code，admin 工具管理-编码列）；
+     *  兼容展示名匹配（忽略大小写）。仅在 hidden: true 时生效；缺省/空 = 全藏 */
+    visibleTools?: string[];
 }
 
-export declare function ToolCallPart({ toolName, toolCallId, args, pending, expandWhileStreaming }: ToolCallPartProps): JSX_2.Element;
+/** 工具调用步骤节点（ThoughtChain 风格）：默认收起，点击展开参数。
+ * pending 执行中转圈，完成变实心 zap。 */
+export declare function ToolCallPart({ toolName, toolCallId, args, pending }: ToolCallPartProps): JSX_2.Element;
 
 export declare interface ToolCallPartProps {
     toolName: string;
@@ -746,10 +774,11 @@ export declare interface ToolCallPartProps {
     args: string;
     /** 工具结果未返回（pending）中 */
     pending?: boolean;
-    /** pending 期间自动展开、结果返回后收起（collapse.toolCall.expandWhileStreaming，默认 true） */
-    expandWhileStreaming?: boolean;
 }
 
+/** 工具结果步骤节点（ThoughtChain 式，链上收尾）：
+ *  默认收起一行状态（绿色勾 + 工具名 + 摘要），点击展开详情
+ *  （JSON/文本/富文本 html / 复制）。defaultExpanded（config/html 推导）仍生效。 */
 export declare function ToolResultPart({ toolName, content, renderMode, html, defaultExpanded }: ToolResultPartProps): default_2.JSX.Element;
 
 export declare interface ToolResultPartProps {
@@ -817,6 +846,8 @@ declare interface UseChatOptions {
     onStreamEnd?: (sessionId: string) => void;
     onError?: (error: Error) => void;
     onMessageSend?: (message: string) => void;
+    /** 工具调用显示过滤（spec: hide-tool-calls）：不可见的 tool_call/tool_result 不进消息列表 */
+    isToolCallVisible?: (toolCode?: string, toolName?: string) => boolean;
 }
 
 declare interface UseChatReturn {
@@ -840,6 +871,7 @@ declare interface UseConversationsOptions {
     sdk: SuperAgentSDK;
     onConversationChange?: (sessionId: string) => void;
     enabled?: boolean;
+    isToolCallVisible?: (toolCode?: string, toolName?: string) => boolean;
 }
 
 declare interface UseConversationsReturn {
@@ -886,6 +918,6 @@ export declare interface WidgetInstance {
 
 export declare type WidgetMode = 'floating' | 'fullpage';
 
-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  }\n\n  /* \u5BBF\u4E3B\u53EF\u80FD\u672A\u542F\u7528 Tailwind preflight\uFF08\u6D4F\u89C8\u5668 UA \u9ED8\u8BA4\u7ED9 button \u52A0\u7070\u8FB9\u6846/\u5E95\u8272\uFF09\uFF0C\n     \u6B64\u5904\u91CD\u7F6E\u3002:where() \u4F7F\u7279\u5F02\u6027\u5F52\u96F6\uFF0C\u4E0D\u4F1A\u538B\u8FC7\u4E0B\u65B9 .sa-* \u53CA\u5BBF\u4E3B\u6837\u5F0F */\n  :where([data-super-agent-widget]) button {\n    border: 0 solid;\n    background: none;\n    font-family: inherit;\n    cursor: pointer;\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  }\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  /* AI \u6D88\u606F Markdown \u6392\u7248\uFF08Claude \u98CE\u683C\uFF0C\u8272\u503C\u5BF9\u9F50 tokens.ts\uFF09 */\n\n  .sa-text-part {\n    font-size: 14px;\n    line-height: 1.65;\n    color: var(--sa-text);\n    word-break: break-word;\n  }\n\n  .sa-text-part p {\n    margin: 0 0 10px;\n  }\n\n  .sa-text-part > *:first-child {\n    margin-top: 0;\n  }\n\n  .sa-text-part > *:last-child {\n    margin-bottom: 0;\n  }\n\n  .sa-text-part strong {\n    color: #141413; /* ink */\n    font-weight: 600;\n  }\n\n  .sa-text-part em {\n    font-style: italic;\n  }\n\n  .sa-text-part del {\n    color: #b0aea5; /* mist */\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: 20px 0 8px;\n    color: #141413; /* ink */\n    font-weight: 600;\n    line-height: 1.35;\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: #d97757; /* clay */\n    text-decoration: underline;\n    text-decoration-thickness: 1px;\n    text-underline-offset: 2px;\n  }\n\n  .sa-text-part a:hover {\n    color: color-mix(in srgb, #d97757 82%, #000); /* clay \u6DF1\u4E00\u6B65 */\n  }\n\n  /* \u884C\u5185\u4EE3\u7801\uFF1Aparchment \u586B\u5145\u5E95\uFF0Cink \u6587\u5B57 */\n  .sa-text-part code {\n    padding: 2px 5px;\n    border-radius: 4px;\n    background: #e8e6dc; /* parchment */\n    color: #141413; /* ink */\n    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n    font-size: 0.875em;\n  }\n\n  /* \u4EE3\u7801\u5757\uFF1Acard \u5E95 + hairline \u8FB9\u6846\uFF08\u6D45\u8272\u6696\u8C03\uFF0CClaude \u98CE\uFF09\uFF1B\u5185\u90E8 code \u590D\u4F4D\u884C\u5185\u6837\u5F0F */\n  .sa-text-part pre {\n    margin: 10px 0;\n    padding: 12px 14px;\n    border: 1px solid #e3e1d8; /* border */\n    border-radius: 8px;\n    background: #efede6; /* card */\n    color: #141413; /* ink */\n    overflow-x: auto;\n    font-size: 13px;\n    line-height: 1.6;\n  }\n\n  .sa-text-part pre code {\n    padding: 0;\n    background: none;\n    color: inherit;\n    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n    font-size: 1em;\n    white-space: pre;\n  }\n\n  /* \u5217\u8868\uFF1Amarker \u67D4\u548C\u7070 */\n  .sa-text-part ul,\n  .sa-text-part ol {\n    margin: 8px 0;\n    padding-left: 22px;\n  }\n\n  .sa-text-part ul {\n    list-style: disc;\n  }\n\n  .sa-text-part ol {\n    list-style: decimal;\n  }\n\n  .sa-text-part li {\n    margin: 4px 0;\n    line-height: 1.6;\n  }\n\n  .sa-text-part li::marker {\n    color: #666560; /* inkMuted */\n  }\n\n  .sa-text-part li > input[type='checkbox'] {\n    margin-right: 6px;\n    accent-color: #d97757; /* clay */\n  }\n\n  .sa-text-part ul:has(> li > input[type='checkbox']) {\n    list-style: none;\n    padding-left: 4px;\n  }\n\n  /* GFM \u8868\u683C\uFF1Ath parchment \u5E95 + hairline \u8FB9\u6846 */\n  .sa-text-part table {\n    margin: 10px 0;\n    border-collapse: collapse;\n    font-size: 0.95em;\n  }\n\n  .sa-text-part th,\n  .sa-text-part td {\n    padding: 6px 12px;\n    border: 1px solid #e3e1d8; /* border */\n    text-align: left;\n  }\n\n  .sa-text-part th {\n    background: #e8e6dc; /* parchment */\n    color: #141413; /* ink */\n    font-weight: 600;\n  }\n\n  /* \u5F15\u7528\u5757\uFF1Aclay \u5DE6\u70B9\u7F00 + inkMuted \u6B63\u6587 */\n  .sa-text-part blockquote {\n    margin: 10px 0;\n    padding: 2px 14px;\n    border-left: 3px solid #d97757; /* clay */\n    color: #666560; /* inkMuted */\n  }\n\n  .sa-text-part hr {\n    margin: 16px 0;\n    border: none;\n    border-top: 1px solid #e3e1d8; /* border */\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  /* DeepSeek \u5F0F\u6536\u8D77\u6761\u8017\u65F6\u540E\u7F00\uFF08\u5DF2\u6DF1\u5EA6\u601D\u8003 \u00B7 \u7528\u65F6 3.2s\uFF09 */\n  .sa-thinking-duration {\n    color: #9ca3af;\n    font-weight: 400;\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    cursor: pointer;\n    user-select: none;\n  }\n\n  .sa-tool-result-header:hover {\n    background: #f0f0f1;\n  }\n\n  .sa-tool-result-label {\n    flex: 1;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\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  /* \u9762\u677F\u5BBD\u5EA6\u4E0E\u8F93\u5165\u533A\uFF08.sa-input-form\uFF09\u5BF9\u9F50\uFF1A\u8F93\u5165\u533A\u5728 wrapper \u7684 px-[15px] \u5185\uFF0C\n     \u6545\u6B64\u5904\u540C\u6837\u53D6 15px \u5DE6\u53F3\u5185\u7F29\u3002\u4E0D\u518D\u8BBE max-width\u2014\u2014\u6B64\u524D 400px \u4E0A\u9650\u4F1A\u8BA9\u9762\u677F\u6BD4\n     \u8F93\u5165\u6846\u7A84\u4E00\u622A\u4E14\u5DE6\u5BF9\u9F50\uFF0C\u89C6\u89C9\u4E0A\"\u6CA1\u5BF9\u9F50\"\u3002 */\n  .sa-slash-menu {\n    position: absolute;\n    bottom: 100%;\n    left: 15px;\n    right: 15px;\n    display: flex;\n    flex-direction: column;\n    max-height: 280px;\n    overflow: hidden; /* \u8BA9\u5706\u89D2\u88C1\u6389\u6EDA\u52A8\u5185\u5BB9 */\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  /* \u8BA1\u6570\u5934\uFF1A\u56FA\u5B9A\u5728\u9762\u677F\u9876\u90E8\uFF08\u5217\u8868\u4F53\u72EC\u7ACB\u6EDA\u52A8\uFF09\uFF0C\u6545 flex-shrink:0 */\n  .sa-slash-menu-header {\n    flex-shrink: 0;\n    padding: 7px 12px;\n    border-bottom: 1px solid var(--sa-border);\n    background: var(--sa-surface);\n    color: #9ca3af;\n    font-size: 12px;\n    line-height: 1.4;\n  }\n\n  /* \u5217\u8868\u4F53\uFF1A\u552F\u4E00\u7684\u6EDA\u52A8\u5BB9\u5668 */\n  .sa-slash-menu-body {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\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: 6px;\n    padding: 7px 12px;\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  /* \u6280\u80FD\u56FE\u6807\uFF1A\u4E0E\u8F93\u5165\u533A chip \u540C\u4E00\u679A\uFF0C\u989C\u8272\u5F31\u5316\u8BA9\u540D\u79F0\u6210\u4E3A\u89C6\u89C9\u4E3B\u4F53 */\n  .sa-slash-menu-item-icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    color: #9ca3af;\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  /* Team \u4E2D\u5F52\u5C5E\u67D0\u4E2A\u6210\u5458\u7684\u6280\u80FD\uFF1A\u6210\u5458\u540D\u5FBD\u6807\uFF0C\u7528\u4E8E\u533A\u5206\u540C\u540D\u6280\u80FD */\n  .sa-slash-menu-item-owner {\n    flex-shrink: 0;\n    padding: 1px 5px;\n    border-radius: 3px;\n    background: var(--sa-hover);\n    color: var(--sa-text-muted);\n    font-size: 11px;\n    line-height: 1.4;\n  }\n\n  /* \u4E0D\u53EF\u70B9\u540D\u7684\u6280\u80FD\uFF08Pipeline \u6A21\u5F0F\u4E0B\u5F52\u5C5E\u6210\u5458\u7684\u6280\u80FD\uFF09\uFF1A\u5217\u51FA\u4F46\u7F6E\u7070\u3002\n     hover \u4E0D\u7ED9\u53CD\u9988\uFF0C\u907F\u514D\u8BEF\u4EE5\u4E3A\u53EF\u70B9\u2014\u2014\u89C4\u5219\u89C1 design D5\u3002 */\n  .sa-slash-menu-item--disabled {\n    cursor: not-allowed;\n    opacity: 0.55;\n  }\n\n  .sa-slash-menu-item--disabled:hover {\n    background: transparent;\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  /* \u5DF2\u63D0\u4EA4\u5361\u7247\u7684\u7B54\u6848\u515C\u5E95\u56DE\u663E\uFF08\u81EA\u7531\u6587\u672C\u4F5C\u7B54\u4E0D\u5339\u914D\u9009\u9879/\u6309\u94AE\u65F6\uFF09 */\n  .sa-interrupt-answer {\n    margin-top: 8px;\n    display: flex;\n    align-items: flex-start;\n    gap: 4px;\n    font-size: 12px;\n    line-height: 1.5;\n    color: #4b5563;\n    background: #f3f4f6;\n    border-radius: 4px;\n    padding: 6px 8px;\n    word-break: break-all;\n  }\n\n  .sa-interrupt-answer svg {\n    flex-shrink: 0;\n    margin-top: 1px;\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%; }\n\n  /* \u2500\u2500 Header artifact button \u2500\u2500 */\n  /* \u8F7B\u91CF\u67D4\u548C\uFF1A\u6D45 primary tint \u5E95 + primary \u6587\u5B57/\u56FE\u6807\uFF0C\u65E0\u5B9E\u5FC3\u5757\u4E0E\u6295\u5F71 */\n  .sa-header-btn-artifact {\n    display: inline-flex; align-items: center; gap: 5px;\n    padding: 5px 11px; border-radius: 8px;\n    background: rgba(99,102,241,0.08); color: var(--sa-primary);\n    font-size: 12px; font-weight: 500;\n    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;\n  }\n  .sa-header-btn-artifact:hover { background: rgba(99,102,241,0.14); color: var(--sa-primary); }\n  .sa-header-btn-artifact:active { transform: scale(0.97); }\n  .sa-header-btn-artifact svg { stroke: var(--sa-primary); }\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;\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  /* \u2014\u2014 \u4EA7\u7269\u62BD\u5C49\u4E09\u6001\u5E03\u5C40\uFF08spec: artifact-preview-responsive\uFF09\u2014\u2014\n     shell \u6052\u5B58\u5728\uFF1A\u5305\u4F4F header/body\uFF0Ccover/split/fullscreen \u5207\u6362\u4EC5\u6539 root \u5B9A\u4F4D\u7C7B\u540D\uFF0C\n     PreviewBody \u5143\u7D20\u8EAB\u4EFD\u7A33\u5B9A\uFF08\u4E0D\u91CD\u6302\u8F7D\uFF0CPDF/HTML \u4E0D\u91CD\u8F7D\uFF09\u3002\n     \u6CE8\u610F\uFF1Acover/fullscreen \u6001 root \u4E0D\u5F97\u643A\u5E26 inline width\uFF08\u5426\u5219 left:0+right:0+width\n     over-constrained\u3001right \u88AB\u5FFD\u7565\uFF0C\u6E32\u67D3\u6210\u5DE6\u951A\u5B9A\u5B9A\u5BBD\u9762\u677F\uFF09\u2014\u2014\u5BBD\u5EA6\u4EC5\u5728 split \u6001\u7531 JS \u6CE8\u5165 */\n  .sa-drawer-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; }\n  /* cover\uFF1A\u6574\u9762\u677F\u8986\u76D6\u5185\u5BB9\u533A\uFF08\u951A\u5B9A = ChatSurface \u6839 relative\uFF09\u3002\u4E0D\u91CD\u590D\u58F0\u660E animation\u2014\u2014\n     \u5426\u5219\u540C\u7279\u5F02\u6027\u4E0B\u4F1A\u8986\u76D6 .sa-drawer-closing \u7684\u9000\u51FA\u52A8\u753B\uFF08cover \u6001\u5173\u95ED\u65E0\u52A8\u753B\uFF09\u3002\n     background \u663E\u5F0F\u58F0\u660E\uFF1Acover \u4E0D\u900F\u660E\u6027\u662F spec \u9A8C\u6536\u9879\uFF08\u804A\u5929\u5185\u5BB9\u4E0D\u5F97\u900F\u51FA\uFF09\uFF0C\u4E0D\u4F9D\u8D56\u57FA\u7C7B\u9690\u5F0F\u63D0\u4F9B */\n  .sa-artifact-drawer.sa-drawer-cover {\n    position: absolute; inset: 0; z-index: 3;\n    border-left: none; background: #fff;\n  }\n  /* fullscreen\uFF1Aroot \u81EA\u8EAB\u5373\u906E\u7F69\uFF08position:fixed \u4E0D\u53D7\u81EA\u8EAB transform \u5F71\u54CD\uFF1Bslide-in\n     \u7684 both \u6B8B\u7559 translateX(0) \u4F1A\u8BA9\u5D4C\u5957 fixed \u5B50\u5143\u7D20\u9519\u951A\uFF0C\u6545\u906E\u7F69\u5FC5\u987B\u662F root \u800C\u975E\u5B50\u5143\u7D20\uFF09 */\n  .sa-artifact-drawer.sa-drawer-fullscreen {\n    position: fixed; inset: 0; z-index: 3;\n    border-left: none; background: rgba(0, 0, 0, 0.45);\n    display: flex; flex-direction: row; align-items: center; justify-content: center;\n    padding: 5vh 5vw;\n  }\n  .sa-drawer-fullscreen .sa-drawer-shell {\n    width: 100%; height: 100%;\n    background: #fff; border: 1px solid var(--sa-border); border-radius: 12px;\n    overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);\n  }\n  /* \u624B\u67C4\u6052\u6302\u8F7D\u3001cover/fullscreen \u4E0B\u7C7B\u9690\u85CF\uFF08\u6761\u4EF6\u5378\u8F7D\u4F1A\u4F7F\u5144\u5F1F fiber \u4F4D\u79FB \u2192 PreviewBody \u91CD\u6302\uFF09 */\n  .sa-drawer-handle-hidden { display: none; }\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-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\uFF1B\u65E0\u8FD4\u56DE\u680F\uFF0C\u7EAF\u767D\u5E95\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  /* \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";
+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  }\n\n  /* \u5BBF\u4E3B\u53EF\u80FD\u672A\u542F\u7528 Tailwind preflight\uFF08\u6D4F\u89C8\u5668 UA \u9ED8\u8BA4\u7ED9 button \u52A0\u7070\u8FB9\u6846/\u5E95\u8272\uFF09\uFF0C\n     \u6B64\u5904\u91CD\u7F6E\u3002:where() \u4F7F\u7279\u5F02\u6027\u5F52\u96F6\uFF0C\u4E0D\u4F1A\u538B\u8FC7\u4E0B\u65B9 .sa-* \u53CA\u5BBF\u4E3B\u6837\u5F0F */\n  :where([data-super-agent-widget]) button {\n    border: 0 solid;\n    background: none;\n    font-family: inherit;\n    cursor: pointer;\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  }\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  /* AI \u6D88\u606F Markdown \u6392\u7248\uFF08Claude \u98CE\u683C\uFF0C\u8272\u503C\u5BF9\u9F50 tokens.ts\uFF09 */\n\n  .sa-text-part {\n    font-size: 14px;\n    line-height: 1.65;\n    color: var(--sa-text);\n    word-break: break-word;\n  }\n\n  .sa-text-part p {\n    margin: 0 0 10px;\n  }\n\n  .sa-text-part > *:first-child {\n    margin-top: 0;\n  }\n\n  .sa-text-part > *:last-child {\n    margin-bottom: 0;\n  }\n\n  .sa-text-part strong {\n    color: #141413; /* ink */\n    font-weight: 600;\n  }\n\n  .sa-text-part em {\n    font-style: italic;\n  }\n\n  .sa-text-part del {\n    color: #b0aea5; /* mist */\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: 20px 0 8px;\n    color: #141413; /* ink */\n    font-weight: 600;\n    line-height: 1.35;\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: #d97757; /* clay */\n    text-decoration: underline;\n    text-decoration-thickness: 1px;\n    text-underline-offset: 2px;\n  }\n\n  .sa-text-part a:hover {\n    color: color-mix(in srgb, #d97757 82%, #000); /* clay \u6DF1\u4E00\u6B65 */\n  }\n\n  /* \u884C\u5185\u4EE3\u7801\uFF1Aparchment \u586B\u5145\u5E95\uFF0Cink \u6587\u5B57 */\n  .sa-text-part code {\n    padding: 2px 5px;\n    border-radius: 4px;\n    background: #e8e6dc; /* parchment */\n    color: #141413; /* ink */\n    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n    font-size: 0.875em;\n  }\n\n  /* \u4EE3\u7801\u5757\uFF1Acard \u5E95 + hairline \u8FB9\u6846\uFF08\u6D45\u8272\u6696\u8C03\uFF0CClaude \u98CE\uFF09\uFF1B\u5185\u90E8 code \u590D\u4F4D\u884C\u5185\u6837\u5F0F */\n  .sa-text-part pre {\n    margin: 10px 0;\n    padding: 12px 14px;\n    border: 1px solid #e3e1d8; /* border */\n    border-radius: 8px;\n    background: #efede6; /* card */\n    color: #141413; /* ink */\n    overflow-x: auto;\n    font-size: 13px;\n    line-height: 1.6;\n  }\n\n  .sa-text-part pre code {\n    padding: 0;\n    background: none;\n    color: inherit;\n    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n    font-size: 1em;\n    white-space: pre;\n  }\n\n  /* \u5217\u8868\uFF1Amarker \u67D4\u548C\u7070 */\n  .sa-text-part ul,\n  .sa-text-part ol {\n    margin: 8px 0;\n    padding-left: 22px;\n  }\n\n  .sa-text-part ul {\n    list-style: disc;\n  }\n\n  .sa-text-part ol {\n    list-style: decimal;\n  }\n\n  .sa-text-part li {\n    margin: 4px 0;\n    line-height: 1.6;\n  }\n\n  .sa-text-part li::marker {\n    color: #666560; /* inkMuted */\n  }\n\n  .sa-text-part li > input[type='checkbox'] {\n    margin-right: 6px;\n    accent-color: #d97757; /* clay */\n  }\n\n  .sa-text-part ul:has(> li > input[type='checkbox']) {\n    list-style: none;\n    padding-left: 4px;\n  }\n\n  /* GFM \u8868\u683C\uFF1Ath parchment \u5E95 + hairline \u8FB9\u6846 */\n  .sa-text-part table {\n    margin: 10px 0;\n    border-collapse: collapse;\n    font-size: 0.95em;\n  }\n\n  .sa-text-part th,\n  .sa-text-part td {\n    padding: 6px 12px;\n    border: 1px solid #e3e1d8; /* border */\n    text-align: left;\n  }\n\n  .sa-text-part th {\n    background: #e8e6dc; /* parchment */\n    color: #141413; /* ink */\n    font-weight: 600;\n  }\n\n  /* \u5F15\u7528\u5757\uFF1Aclay \u5DE6\u70B9\u7F00 + inkMuted \u6B63\u6587 */\n  .sa-text-part blockquote {\n    margin: 10px 0;\n    padding: 2px 14px;\n    border-left: 3px solid #d97757; /* clay */\n    color: #666560; /* inkMuted */\n  }\n\n  .sa-text-part hr {\n    margin: 16px 0;\n    border: none;\n    border-top: 1px solid #e3e1d8; /* border */\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  /* \uFF08\u65E7 .sa-thinking-part \u7CFB\u5217\u5DF2\u7531 ThoughtChain \u5F0F .sa-chain-node \u53D6\u4EE3\uFF0C\n     \u89C1\u4E0A\u65B9\"ThoughtChain \u5F0F\u6B65\u9AA4\u8282\u70B9\"\u5757\uFF09 */\n  /* \u2500\u2500 ThoughtChain \u5F0F\u6B65\u9AA4\u8282\u70B9\uFF08\u601D\u7EF4\u94FE/\u5DE5\u5177\u8C03\u7528\u5171\u7528\uFF09\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     \u7AD6\u5411\u94FE\uFF1A\u5DE6\u8F68\uFF08\u56FE\u6807+\u8FDE\u7EBF\uFF09+ \u53F3\u4E3B\u4F53\uFF08\u6807\u9898\u884C+\u53EF\u6298\u53E0\u5185\u5BB9\uFF09\u3002\n     loading \u6001\u56FE\u6807\u6362 spinner\uFF1B\u8FDE\u7EBF\u8D2F\u7A7F\u8282\u70B9\uFF08sa-chain-node \u4E0A\u4E0B\u8D2F\u7A7F\uFF0C\n     .sa-chain-block \u5185\u8FDE\u7EED\u8282\u70B9\u81EA\u7136\u8FDE\u6210\u4E00\u6761\u94FE\uFF09\u3002 */\n  .sa-chain-node {\n    display: flex;\n    gap: 0;\n    margin: 0;\n  }\n  .sa-chain-rail {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 24px;\n    flex-shrink: 0;\n  }\n  .sa-chain-icon {\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--sa-primary-light);\n    color: var(--sa-primary);\n    flex-shrink: 0;\n  }\n  .sa-chain-done .sa-chain-icon { color: var(--sa-primary); }\n  .sa-chain-line {\n    width: 1.5px;\n    flex: 1;\n    min-height: 6px;\n    background: var(--sa-border);\n    margin-top: 2px;\n    margin-bottom: 2px;\n  }\n  /* \u6700\u540E\u4E00\u4E2A\u8282\u70B9\u4E0D\u753B\u5C3E\u5DF4\u7EBF\uFF08:last-child \u7531\u5BB9\u5668\u7EA7 CSS \u5904\u7406\uFF0C\u89C1 .sa-chain-block\uFF09 */\n  .sa-chain-spinner {\n    width: 12px;\n    height: 12px;\n    border: 2px solid var(--sa-primary-light);\n    border-top-color: var(--sa-primary);\n    border-radius: 50%;\n    animation: sa-spinner 0.7s linear infinite;\n  }\n  .sa-chain-main {\n    flex: 1;\n    min-width: 0;\n    padding: 0 0 12px 8px;\n  }\n  .sa-chain-header {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    min-height: 20px;\n    cursor: pointer;\n    font-size: 13px;\n    color: var(--sa-text);\n    user-select: none;\n  }\n  .sa-chain-title { flex: 1; color:#999; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: baseline; gap: 8px; min-width: 0; }\n  .sa-chain-loading .sa-chain-title { color: var(--sa-primary); }\n  .sa-chain-duration { color: var(--sa-text-light); font-weight: 400; }\n  .sa-chain-arrow { color: var(--sa-text-light); transition: transform 0.2s ease; }\n  .sa-chain-arrow.expanded { transform: rotate(90deg); }\n  .sa-chain-content {\n    margin-top: 4px;\n    padding: 0 0 0 10px;\n    border-left: 1px solid #f5f5f5;\n    color: var(--sa-text-muted);\n    white-space: pre-wrap;\n    line-height: 1.55;\n    font-size: 12.5px;\n    animation: sa-fade-in 0.2s ease both;\n  }\n  /* \u94FE\u5C3E\uFF1A\u5757\u5185\u6700\u540E\u4E00\u4E2A\u8282\u70B9\u53BB\u6389\u5C3E\u5DF4\u7EBF\u4E0E\u5E95\u90E8\u7A7A\u9699 */\n  .sa-chain-block .sa-chain-node:last-child .sa-chain-line { display: none; }\n  .sa-chain-block .sa-chain-node:last-child .sa-chain-main { padding-bottom: 0; }\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  /* \u5DE5\u5177\u8C03\u7528/\u7ED3\u679C\u5747\u5DF2\u94FE\u5316\uFF08.sa-chain-node \u57FA\u7C7B\uFF09\uFF0C\u6B64\u5904\u4EC5\u4FDD\u7559\u5C55\u5F00\u5185\u5BB9\u6837\u5F0F */\n\n  .sa-tool-args {\n    margin: 4px 0 0;\n    padding: 0 0 0 10px;\n    border-left: 1px solid #f5f5f5;\n    color: var(--sa-text-muted);\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-chain-icon-success {\n    background: #ecfdf5;\n    color: #10b981;\n  }\n\n  .sa-tool-result-name {\n    font-weight: 500;\n    flex-shrink: 0;\n    max-width: 40%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* \u6458\u8981\uFF08\u7070\u8272\u8F7B\u91CF\uFF0C\u8DDF\u5728\u5DE5\u5177\u540D\u540E\uFF09\uFF1ADeepSeek\"\u5DF2\u641C\u7D22 5 \u4E2A\u7F51\u9875\"\u5F0F\u4E00\u884C\u72B6\u6001 */\n  .sa-tool-result-summary {\n    color: var(--sa-text-light);\n    font-weight: 400;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n  }\n\n  .sa-tool-result-content {\n    max-height: 256px;\n    overflow: auto;\n    margin: 4px 0 0;\n    padding: 0 0 0 10px;\n    border-left: 1px solid #f5f5f5;\n    color: var(--sa-text-muted);\n    font-size: 12.5px;\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  }\n\n  .sa-tool-result-actions {\n    display: flex;\n    gap: 8px;\n    margin: 4px 0 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  /* \u9762\u677F\u5BBD\u5EA6\u4E0E\u8F93\u5165\u533A\uFF08.sa-input-form\uFF09\u5BF9\u9F50\uFF1A\u8F93\u5165\u533A\u5728 wrapper \u7684 px-[15px] \u5185\uFF0C\n     \u6545\u6B64\u5904\u540C\u6837\u53D6 15px \u5DE6\u53F3\u5185\u7F29\u3002\u4E0D\u518D\u8BBE max-width\u2014\u2014\u6B64\u524D 400px \u4E0A\u9650\u4F1A\u8BA9\u9762\u677F\u6BD4\n     \u8F93\u5165\u6846\u7A84\u4E00\u622A\u4E14\u5DE6\u5BF9\u9F50\uFF0C\u89C6\u89C9\u4E0A\"\u6CA1\u5BF9\u9F50\"\u3002 */\n  .sa-slash-menu {\n    position: absolute;\n    bottom: 100%;\n    left: 15px;\n    right: 15px;\n    display: flex;\n    flex-direction: column;\n    max-height: 280px;\n    overflow: hidden; /* \u8BA9\u5706\u89D2\u88C1\u6389\u6EDA\u52A8\u5185\u5BB9 */\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  /* \u8BA1\u6570\u5934\uFF1A\u56FA\u5B9A\u5728\u9762\u677F\u9876\u90E8\uFF08\u5217\u8868\u4F53\u72EC\u7ACB\u6EDA\u52A8\uFF09\uFF0C\u6545 flex-shrink:0 */\n  .sa-slash-menu-header {\n    flex-shrink: 0;\n    padding: 7px 12px;\n    border-bottom: 1px solid var(--sa-border);\n    background: var(--sa-surface);\n    color: #9ca3af;\n    font-size: 12px;\n    line-height: 1.4;\n  }\n\n  /* \u5217\u8868\u4F53\uFF1A\u552F\u4E00\u7684\u6EDA\u52A8\u5BB9\u5668 */\n  .sa-slash-menu-body {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\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: 6px;\n    padding: 7px 12px;\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  /* \u6280\u80FD\u56FE\u6807\uFF1A\u4E0E\u8F93\u5165\u533A chip \u540C\u4E00\u679A\uFF0C\u989C\u8272\u5F31\u5316\u8BA9\u540D\u79F0\u6210\u4E3A\u89C6\u89C9\u4E3B\u4F53 */\n  .sa-slash-menu-item-icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    color: #9ca3af;\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  /* Team \u4E2D\u5F52\u5C5E\u67D0\u4E2A\u6210\u5458\u7684\u6280\u80FD\uFF1A\u6210\u5458\u540D\u5FBD\u6807\uFF0C\u7528\u4E8E\u533A\u5206\u540C\u540D\u6280\u80FD */\n  .sa-slash-menu-item-owner {\n    flex-shrink: 0;\n    padding: 1px 5px;\n    border-radius: 3px;\n    background: var(--sa-hover);\n    color: var(--sa-text-muted);\n    font-size: 11px;\n    line-height: 1.4;\n  }\n\n  /* \u4E0D\u53EF\u70B9\u540D\u7684\u6280\u80FD\uFF08Pipeline \u6A21\u5F0F\u4E0B\u5F52\u5C5E\u6210\u5458\u7684\u6280\u80FD\uFF09\uFF1A\u5217\u51FA\u4F46\u7F6E\u7070\u3002\n     hover \u4E0D\u7ED9\u53CD\u9988\uFF0C\u907F\u514D\u8BEF\u4EE5\u4E3A\u53EF\u70B9\u2014\u2014\u89C4\u5219\u89C1 design D5\u3002 */\n  .sa-slash-menu-item--disabled {\n    cursor: not-allowed;\n    opacity: 0.55;\n  }\n\n  .sa-slash-menu-item--disabled:hover {\n    background: transparent;\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  /* Markdown \u6B63\u6587\u5360\u6EE1\u56FE\u6807\u53F3\u4FA7\u5269\u4F59\u5BBD\u5EA6\uFF0C\u957F\u8BCD/\u8868\u683C\u53EF\u6362\u884C\u4E0D\u6EA2\u51FA\u5361\u7247\uFF1B\u5B57\u53F7\u8DDF\u968F\u5361\u7247 */\n  .sa-interrupt-markdown {\n    flex: 1;\n    min-width: 0;\n    font-size: 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  /* \u5DF2\u63D0\u4EA4\u5361\u7247\u7684\u7B54\u6848\u515C\u5E95\u56DE\u663E\uFF08\u81EA\u7531\u6587\u672C\u4F5C\u7B54\u4E0D\u5339\u914D\u9009\u9879/\u6309\u94AE\u65F6\uFF09 */\n  .sa-interrupt-answer {\n    margin-top: 8px;\n    display: flex;\n    align-items: flex-start;\n    gap: 4px;\n    font-size: 12px;\n    line-height: 1.5;\n    color: #4b5563;\n    background: #f3f4f6;\n    border-radius: 4px;\n    padding: 6px 8px;\n    word-break: break-all;\n  }\n\n  .sa-interrupt-answer svg {\n    flex-shrink: 0;\n    margin-top: 1px;\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\u65E0\u6846\u65E0\u5E95\u8272\uFF08\u8F7B\u91CF\uFF0C\u4E0E\u94FE\u8282\u70B9\u4E00\u81F4\uFF09\uFF1B\u4EC5\u6781\u6DE1\u5706\u89D2\u5E95\u533A\u5206\u6B63\u6587 */\n  .sa-tool-result-html-scroll { margin-top: 4px; max-height: 60vh; overflow: auto; }\n  .sa-tool-result-html { padding: 4px; background: var(--sa-surface); border-radius: 6px; min-width: 100%; }\n\n  /* \u2500\u2500 Header artifact button \u2500\u2500 */\n  /* \u8F7B\u91CF\u67D4\u548C\uFF1A\u6D45 primary tint \u5E95 + primary \u6587\u5B57/\u56FE\u6807\uFF0C\u65E0\u5B9E\u5FC3\u5757\u4E0E\u6295\u5F71 */\n  .sa-header-btn-artifact {\n    display: inline-flex; align-items: center; gap: 5px;\n    padding: 5px 11px; border-radius: 8px;\n    background: rgba(99,102,241,0.08); color: var(--sa-primary);\n    font-size: 12px; font-weight: 500;\n    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;\n  }\n  .sa-header-btn-artifact:hover { background: rgba(99,102,241,0.14); color: var(--sa-primary); }\n  .sa-header-btn-artifact:active { transform: scale(0.97); }\n  .sa-header-btn-artifact svg { stroke: var(--sa-primary); }\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;\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  /* \u2014\u2014 \u4EA7\u7269\u62BD\u5C49\u4E09\u6001\u5E03\u5C40\uFF08spec: artifact-preview-responsive\uFF09\u2014\u2014\n     shell \u6052\u5B58\u5728\uFF1A\u5305\u4F4F header/body\uFF0Ccover/split/fullscreen \u5207\u6362\u4EC5\u6539 root \u5B9A\u4F4D\u7C7B\u540D\uFF0C\n     PreviewBody \u5143\u7D20\u8EAB\u4EFD\u7A33\u5B9A\uFF08\u4E0D\u91CD\u6302\u8F7D\uFF0CPDF/HTML \u4E0D\u91CD\u8F7D\uFF09\u3002\n     \u6CE8\u610F\uFF1Acover/fullscreen \u6001 root \u4E0D\u5F97\u643A\u5E26 inline width\uFF08\u5426\u5219 left:0+right:0+width\n     over-constrained\u3001right \u88AB\u5FFD\u7565\uFF0C\u6E32\u67D3\u6210\u5DE6\u951A\u5B9A\u5B9A\u5BBD\u9762\u677F\uFF09\u2014\u2014\u5BBD\u5EA6\u4EC5\u5728 split \u6001\u7531 JS \u6CE8\u5165 */\n  .sa-drawer-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; }\n  /* cover\uFF1A\u6574\u9762\u677F\u8986\u76D6\u5185\u5BB9\u533A\uFF08\u951A\u5B9A = ChatSurface \u6839 relative\uFF09\u3002\u4E0D\u91CD\u590D\u58F0\u660E animation\u2014\u2014\n     \u5426\u5219\u540C\u7279\u5F02\u6027\u4E0B\u4F1A\u8986\u76D6 .sa-drawer-closing \u7684\u9000\u51FA\u52A8\u753B\uFF08cover \u6001\u5173\u95ED\u65E0\u52A8\u753B\uFF09\u3002\n     background \u663E\u5F0F\u58F0\u660E\uFF1Acover \u4E0D\u900F\u660E\u6027\u662F spec \u9A8C\u6536\u9879\uFF08\u804A\u5929\u5185\u5BB9\u4E0D\u5F97\u900F\u51FA\uFF09\uFF0C\u4E0D\u4F9D\u8D56\u57FA\u7C7B\u9690\u5F0F\u63D0\u4F9B */\n  .sa-artifact-drawer.sa-drawer-cover {\n    position: absolute; inset: 0; z-index: 3;\n    border-left: none; background: #fff;\n  }\n  /* fullscreen\uFF1Aroot \u81EA\u8EAB\u5373\u906E\u7F69\uFF08position:fixed \u4E0D\u53D7\u81EA\u8EAB transform \u5F71\u54CD\uFF1Bslide-in\n     \u7684 both \u6B8B\u7559 translateX(0) \u4F1A\u8BA9\u5D4C\u5957 fixed \u5B50\u5143\u7D20\u9519\u951A\uFF0C\u6545\u906E\u7F69\u5FC5\u987B\u662F root \u800C\u975E\u5B50\u5143\u7D20\uFF09 */\n  .sa-artifact-drawer.sa-drawer-fullscreen {\n    position: fixed; inset: 0; z-index: 3;\n    border-left: none; background: rgba(0, 0, 0, 0.45);\n    display: flex; flex-direction: row; align-items: center; justify-content: center;\n    padding: 5vh 5vw;\n  }\n  .sa-drawer-fullscreen .sa-drawer-shell {\n    width: 100%; height: 100%;\n    background: #fff; border: 1px solid var(--sa-border); border-radius: 12px;\n    overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);\n  }\n  /* \u624B\u67C4\u6052\u6302\u8F7D\u3001cover/fullscreen \u4E0B\u7C7B\u9690\u85CF\uFF08\u6761\u4EF6\u5378\u8F7D\u4F1A\u4F7F\u5144\u5F1F fiber \u4F4D\u79FB \u2192 PreviewBody \u91CD\u6302\uFF09 */\n  .sa-drawer-handle-hidden { display: none; }\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-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\uFF1B\u65E0\u8FD4\u56DE\u680F\uFF0C\u7EAF\u767D\u5E95\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  /* \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";
 
 export { }