super-agent-sdk 1.0.13 → 1.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/widget.cjs +17 -17
  2. package/dist/widget.d.ts +8 -2
  3. package/dist/widget.mjs +2119 -2064
  4. package/package.json +1 -1
package/dist/widget.d.ts CHANGED
@@ -705,6 +705,10 @@ declare interface UseChatReturn {
705
705
  stop: () => void;
706
706
  regenerate: () => void;
707
707
  setMessages: (messages: UIMessage[]) => void;
708
+ /** 会话定向展示：优先 live 缓存（in-flight 切回续看），传入 msgs 则作为缓存源（历史拉取路径） */
709
+ showSession: (sessionId: string, msgs?: UIMessage[]) => void;
710
+ /** 目标会话有 in-flight 流时返回 live 缓存（切换时免拉历史），否则 null */
711
+ getLiveMessages: (sessionId: string) => UIMessage[] | null;
708
712
  respondToInterrupt: (interruptId: string, response: InterruptResponse) => void;
709
713
  }
710
714
 
@@ -723,7 +727,9 @@ declare interface UseConversationsReturn {
723
727
  hasMore: boolean;
724
728
  loadConversations: () => Promise<void>;
725
729
  loadMore: () => Promise<void>;
726
- switchConversation: (sessionId: string) => Promise<UIMessage[]>;
730
+ switchConversation: (sessionId: string, opts?: {
731
+ fetchHistory?: boolean;
732
+ }) => Promise<UIMessage[]>;
727
733
  newConversation: () => Promise<void>;
728
734
  deleteConversation: (sessionId: string) => Promise<void>;
729
735
  renameConversation: (sessionId: string, title: string) => Promise<void>;
@@ -758,6 +764,6 @@ export declare interface WidgetInstance {
758
764
 
759
765
  export declare type WidgetMode = 'floating' | 'fullpage';
760
766
 
761
- export declare const widgetStyles = "\n [data-super-agent-widget] {\n --sa-primary-dark: color-mix(in srgb, var(--sa-primary) 82%, #000);\n --sa-primary-light: color-mix(in srgb, var(--sa-primary) 10%, #fff);\n --sa-text: #1f2937;\n --sa-text-muted: #6b7280;\n --sa-text-light: #9ca3af;\n --sa-border: #e5e7eb;\n --sa-surface: #f9fafb;\n --sa-hover: #f3f4f6;\n\n font-family: var(--sa-font);\n color: var(--sa-text);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n }\n\n [data-super-agent-widget] *,\n [data-super-agent-widget] *::before,\n [data-super-agent-widget] *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n /* \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 scroll-behavior: smooth;\n }\n\n .sa-thread::-webkit-scrollbar {\n width: 6px;\n }\n\n .sa-thread::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.14);\n border-radius: 3px;\n }\n\n .sa-thread::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.24);\n }\n\n /* \u2500\u2500 Message\uFF1A\u6D6E\u7A97\u9ED8\u8BA4 hr-for-help \u98CE\u683C\uFF08AI \u5934\u50CF\u72EC\u5360\u4E00\u884C\uFF09\uFF1B\n fullpage \u6A21\u5F0F\u5728 .sa-fp-content-row \u4E0B\u6062\u590D\u539F\u6A2A\u6392\u5E03\u5C40\uFF0C\u4E92\u4E0D\u5F71\u54CD \u2500\u2500 */\n\n .sa-message {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n width: 100%;\n }\n\n .sa-message-user {\n justify-content: flex-end;\n }\n\n /* AI \u6D88\u606F\uFF1A\u5217\u5E03\u5C40\uFF0C\u5934\u50CF\u72EC\u5360\u4E00\u884C\uFF08\u4EC5\u6D6E\u7A97\uFF0C\u5BF9\u9F50 hr-for-help msgAi\uFF09 */\n .sa-message-assistant {\n flex-direction: column;\n align-items: flex-start;\n gap: 6px;\n }\n\n .sa-message-content {\n max-width: 78%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .sa-message-user .sa-message-content {\n max-width: 90%;\n }\n\n .sa-message-assistant .sa-message-content {\n max-width: 100%;\n min-width: 0;\n width: 100%;\n }\n\n .sa-message-body {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n /* \u6D6E\u7A97\u6C14\u6CE1\uFF1A\u7528\u6237\u6D45\u84DD\u3001AI \u767D\u5E95\u63CF\u8FB9\uFF08\u5BF9\u9F50 hr-for-help\uFF09 */\n .sa-message-user .sa-message-body {\n padding: 8px 12px;\n border-radius: 8px 8px 0 8px;\n background: #E8F1FE;\n color: #333333;\n font-size: 14px;\n line-height: 1.6;\n word-break: break-word;\n }\n\n .sa-message-assistant .sa-message-body {\n padding: 10px 12px;\n border-radius: 8px;\n background: #ffffff;\n border: 1px solid #E0E0E0;\n color: var(--sa-text);\n font-size: 14px;\n line-height: 1.5;\n word-break: break-word;\n }\n\n .sa-message-time {\n font-size: 11px;\n color: var(--sa-text-muted);\n opacity: 0.7;\n }\n\n .sa-message-time-right {\n text-align: right;\n }\n\n /* \u6D88\u606F\u5934\u50CF\uFF1A\u88F8\u5C55\u793A\uFF0C\u65E0\u80CC\u666F\u8272\uFF08\u5BF9\u9F50 hr-for-help msgAvatar\uFF09 */\n .sa-msg-avatar {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n object-fit: cover;\n flex-shrink: 0;\n display: block;\n }\n\n .sa-msg-avatar-text {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n font-weight: 400;\n }\n\n /* \u2500\u2500 fullpage \u8986\u76D6\uFF1A\u6062\u590D\u6A2A\u6392\u5934\u50CF + \u7ECF\u5178\u6C14\u6CE1\uFF08\u4E0D\u53D7\u6D6E\u7A97 hr-for-help \u6539\u7248\u5F71\u54CD\uFF09 \u2500\u2500 */\n\n .sa-fp-content-row .sa-message-assistant {\n flex-direction: row;\n gap: 10px;\n }\n\n .sa-fp-content-row .sa-message-assistant .sa-message-content {\n max-width: 88%;\n width: auto;\n }\n\n .sa-fp-content-row .sa-message-user .sa-message-content {\n max-width: 78%;\n }\n\n // .sa-fp-content-row .sa-message-user .sa-message-body {\n // padding: 10px 14px;\n // border-radius: 16px;\n // border-bottom-right-radius: 4px;\n // background: var(--sa-primary);\n // color: #ffffff;\n // font-size: 14px;\n // line-height: 1.55;\n // word-break: break-word;\n // }\n\n .sa-fp-content-row .sa-message-assistant .sa-message-body {\n padding: 10px 14px;\n border-radius: 16px;\n background: #ffffff;\n color: var(--sa-text);\n font-size: 14px;\n line-height: 1.55;\n word-break: break-word;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n }\n\n .sa-fp-content-row .sa-msg-avatar {\n width: 24px;\n height: 24px;\n }\n\n .sa-fp-content-row .sa-msg-avatar-text {\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n color: #ffffff;\n font-size: 12px;\n font-weight: 600;\n }\n\n /* 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 .sa-thinking-arrow {\n font-size: 12px;\n transition: transform 0.2s ease;\n }\n\n .sa-thinking-arrow.expanded {\n transform: rotate(90deg);\n }\n\n .sa-thinking-content {\n margin-top: 8px;\n color: #4b5563;\n white-space: pre-wrap;\n line-height: 1.55;\n }\n\n /* \u2500\u2500 Tool call / result \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-tool-call-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-call-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n font-size: 13px;\n user-select: none;\n }\n\n .sa-tool-call-header:hover {\n background: var(--sa-surface);\n }\n\n .sa-tool-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-tool-name {\n flex: 1;\n color: #374151;\n font-weight: 500;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-tool-args {\n margin: 0;\n padding: 10px 12px;\n border-top: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n overflow-x: auto;\n }\n\n .sa-tool-result-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-result-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-bottom: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-size: 13px;\n font-weight: 500;\n }\n\n .sa-tool-result-content {\n max-height: 256px;\n overflow: auto;\n margin: 8px 0 0;\n padding: 10px 12px;\n color: #4b5563;\n font-size: 13px;\n line-height: 1.55;\n white-space: pre-wrap;\n word-break: break-word;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n background: #f9fafb;\n border-radius: 8px;\n }\n\n .sa-tool-result-actions {\n display: flex;\n gap: 8px;\n margin: 4px 0;\n }\n\n /* \u2500\u2500 Error part \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-error-part {\n margin: 6px 0;\n padding: 10px 12px;\n border: 1px solid #fecaca;\n border-radius: 10px;\n background: #fef2f2;\n color: #b91c1c;\n }\n\n .sa-error-content {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 13px;\n line-height: 1.5;\n }\n\n .sa-error-icon {\n font-size: 14px;\n line-height: 1.4;\n }\n\n .sa-error-retry {\n margin-top: 8px;\n padding: 6px 14px;\n border: none;\n border-radius: 8px;\n background: #ef4444;\n color: #ffffff;\n font-size: 13px;\n cursor: pointer;\n transition: background 0.2s ease;\n }\n\n .sa-error-retry:hover {\n background: #dc2626;\n }\n\n /* \u2500\u2500 Action bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-action-bar {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 6px;\n position: relative;\n }\n\n .sa-action-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n flex: none;\n white-space: nowrap;\n line-height: 1;\n padding: 4px 10px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--sa-text-muted);\n font-size: 12px;\n cursor: pointer;\n transition: color 0.15s ease, background 0.15s ease;\n }\n\n .sa-action-btn svg {\n display: block;\n flex: none;\n }\n\n .sa-action-btn:hover {\n color: var(--sa-text);\n background: rgba(0, 0, 0, 0.05);\n }\n\n .sa-action-btn-active {\n color: var(--sa-primary) !important;\n background: var(--sa-primary-light) !important;\n }\n\n .sa-action-divider {\n width: 1px;\n height: 16px;\n background: var(--sa-border);\n margin: 0 2px;\n align-self: center;\n }\n\n /* \u2500\u2500 Dislike Panel \u2500\u2500 */\n .sa-dislike-panel {\n position: absolute; top: 100%; left: 0; right: 0;\n margin-top: 6px; padding: 12px;\n background: #fff; border: 1px solid var(--sa-border); border-radius: 10px;\n box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n animation: sa-fade-in-up 0.2s cubic-bezier(0.16,1,0.3,1) both;\n z-index: 10;\n }\n .sa-dislike-panel-title { font-size: 13px; font-weight: 500; color: var(--sa-text); margin-bottom: 8px; }\n .sa-dislike-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }\n .sa-dislike-reason-btn {\n padding: 4px 10px; border: 1px solid var(--sa-border); border-radius: 6px;\n background: #fff; color: var(--sa-text); font-size: 12px; cursor: pointer;\n transition: border-color 0.15s, background 0.15s, color 0.15s;\n }\n .sa-dislike-reason-btn:hover { border-color: var(--sa-primary); color: var(--sa-primary); }\n .sa-dislike-reason-btn.active { background: var(--sa-primary); color: #fff; border-color: var(--sa-primary); }\n .sa-dislike-remark {\n width: 100%; padding: 8px 10px; border: 1px solid var(--sa-border); border-radius: 8px;\n font-size: 13px; color: var(--sa-text); resize: none; outline: none;\n transition: border-color 0.15s;\n }\n .sa-dislike-remark:focus { border-color: var(--sa-primary); }\n .sa-dislike-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }\n .sa-dislike-submit {\n padding: 5px 14px; border: none; border-radius: 6px;\n background: var(--sa-primary); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer;\n transition: opacity 0.15s;\n }\n .sa-dislike-submit:hover { opacity: 0.9; }\n .sa-dislike-cancel {\n padding: 5px 14px; border: 1px solid var(--sa-border); border-radius: 6px;\n background: #fff; color: var(--sa-text-muted); font-size: 13px; cursor: pointer;\n transition: background 0.15s;\n }\n .sa-dislike-cancel:hover { background: var(--sa-surface); }\n\n /* \u2500\u2500 Composer\uFF08\u8F93\u5165\u533A\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 tailwind.css \u7684 .sa-input-form/.sa-send-btn\uFF09 \u2500\u2500 */\n\n /* \u2500\u2500 Slash Menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-slash-menu {\n position: absolute;\n bottom: 100%;\n left: 14px;\n right: 14px;\n max-width: 400px;\n max-height: 200px;\n overflow-y: auto;\n background: var(--sa-surface);\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);\n margin-bottom: 4px;\n z-index: 10;\n }\n\n .sa-slash-menu-empty {\n padding: 12px 14px;\n color: #9ca3af;\n font-size: 13px;\n text-align: center;\n }\n\n .sa-slash-menu-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .sa-slash-menu-item:hover,\n .sa-slash-menu-item--active {\n background: var(--sa-hover);\n }\n\n .sa-slash-menu-item-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--sa-text);\n white-space: nowrap;\n }\n\n .sa-slash-menu-item-desc {\n font-size: 12px;\n color: #9ca3af;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n min-width: 0;\n }\n\n /* \u2500\u2500 Thread list\uFF08\u5185\u5D4C\u4FA7\u8FB9\u680F\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 FullpageLayout.tsx / ThreadList.tsx\uFF09 \u2500\u2500 */\n\n /* \u6D88\u606F\u533A\u52A0\u8F7D\u6001 */\n .sa-messages-loading {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n color: #9ca3af;\n font-size: 14px;\n }\n\n .sa-loading-spinner {\n width: 16px;\n height: 16px;\n border: 2px solid var(--sa-border, #e5e7eb);\n border-top-color: var(--sa-primary, #6366f1);\n border-radius: 50%;\n animation: sa-spin 0.8s linear infinite;\n flex-shrink: 0;\n }\n\n @keyframes sa-spin {\n to { transform: rotate(360deg); }\n }\n\n /* \u2500\u2500 Welcome\uFF08\u9996\u9875\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 tailwind.css\uFF09 \u2500\u2500 */\n\n .sa-thinking-indicator {\n color: #9ca3af;\n font-size: 14px;\n animation: sa-blink 1.2s ease-in-out infinite;\n }\n\n /* \u2500\u2500 Interrupt cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-interrupt-card {\n margin: 8px 0;\n padding: 14px;\n border: 1px solid #e0e7ff;\n border-radius: 10px;\n background: #f8faff;\n }\n\n .sa-interrupt-content {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 13px;\n line-height: 1.6;\n color: var(--sa-text);\n margin-bottom: 12px;\n }\n\n .sa-interrupt-actions {\n display: flex;\n gap: 8px;\n margin-top: 10px;\n }\n\n .sa-interrupt-btn {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 14px;\n border: none;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s, opacity 0.15s;\n }\n\n .sa-interrupt-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .sa-interrupt-btn-primary {\n background: var(--sa-primary);\n color: #fff;\n }\n\n .sa-interrupt-btn-primary:hover:not(:disabled) {\n opacity: 0.9;\n }\n\n .sa-interrupt-btn-secondary {\n background: #f3f4f6;\n color: #374151;\n }\n\n .sa-interrupt-btn-secondary:hover:not(:disabled) {\n background: #e5e7eb;\n }\n\n .sa-interrupt-btn-danger {\n background: #fef2f2;\n color: #dc2626;\n }\n\n .sa-interrupt-btn-danger:hover:not(:disabled) {\n background: #fee2e2;\n }\n\n .sa-interrupt-options {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .sa-interrupt-option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n background: #fff;\n color: var(--sa-text);\n font-size: 13px;\n cursor: pointer;\n text-align: left;\n transition: border-color 0.12s, background 0.12s;\n }\n\n .sa-interrupt-option:hover {\n border-color: var(--sa-primary);\n background: #f5f3ff;\n }\n\n .sa-interrupt-option-selected {\n border-color: var(--sa-primary);\n background: #ede9fe;\n color: var(--sa-primary);\n font-weight: 500;\n }\n\n .sa-interrupt-option-danger {\n color: #ef4444;\n }\n\n .sa-interrupt-option-danger:hover {\n border-color: #ef4444;\n background: #fef2f2;\n }\n\n .sa-interrupt-option-desc {\n font-size: 11px;\n color: var(--sa-text-muted);\n margin-left: auto;\n }\n\n .sa-interrupt-input-area {\n margin-top: 4px;\n }\n\n .sa-interrupt-input,\n .sa-interrupt-textarea,\n .sa-interrupt-select {\n width: 100%;\n padding: 8px 12px;\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n background: #fff;\n color: var(--sa-text);\n font-size: 13px;\n font-family: inherit;\n outline: none;\n transition: border-color 0.15s;\n }\n\n .sa-interrupt-input:focus,\n .sa-interrupt-textarea:focus,\n .sa-interrupt-select:focus {\n border-color: var(--sa-primary);\n }\n\n .sa-interrupt-textarea {\n resize: vertical;\n min-height: 60px;\n }\n\n .sa-interrupt-form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin-top: 4px;\n }\n\n .sa-interrupt-form-field {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .sa-interrupt-form-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--sa-text);\n }\n\n .sa-interrupt-form-required {\n color: #ef4444;\n margin-left: 2px;\n }\n\n .sa-interrupt-submitted {\n margin-top: 8px;\n font-size: 12px;\n color: #9ca3af;\n }\n\n .sa-interrupt-btn-answered {\n background: var(--sa-primary) !important;\n color: #fff !important;\n opacity: 0.7;\n }\n\n .sa-interrupt-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .sa-interrupt-option:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n .sa-interrupt-input:disabled,\n .sa-interrupt-textarea:disabled,\n .sa-interrupt-select:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n background: #f9fafb;\n }\n\n .sa-interrupt-unknown {\n padding: 8px 12px;\n border-radius: 8px;\n background: #fef3c7;\n color: #92400e;\n font-size: 13px;\n margin: 6px 0;\n }\n\n /* \u2500\u2500 Animations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n @keyframes sa-blink {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n }\n\n /* \u2500\u2500 Fullpage Layout (DeepSeek-style) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-fullpage {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n background: var(--sa-bg, #ffffff);\n }\n\n /* Sidebar\uFF08fullpage \u9ED8\u8BA4\u4FA7\u8FB9\u680F\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u5BF9\u9F50\u6D6E\u7A97\u5386\u53F2\u5BF9\u8BDD\u6837\u5F0F\uFF0C\u89C1 FullpageLayout.tsx\uFF09 */\n\n /* Sidebar wrapper (for custom ThreadList slot)\uFF1A\u5BBD\u5EA6\u4E0E\u9ED8\u8BA4\u4FA7\u8FB9\u680F 220px \u5BF9\u9F50 */\n .sa-fp-sidebar-wrapper {\n width: 220px;\n flex-shrink: 0;\n overflow: hidden;\n border-right: 1px solid #ECECEC;\n background: #FAFAFA;\n transition: width 0.2s cubic-bezier(0.16,1,0.3,1);\n }\n\n .sa-fp-sidebar-wrapper-collapsed {\n width: 0;\n border-right: none;\n }\n\n /* Main area */\n .sa-fp-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n background: #fff;\n }\n\n .sa-fp-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n border-bottom: 1px solid #f0f0f0;\n background: #fff;\n flex-shrink: 0;\n min-height: 52px;\n }\n\n .sa-fp-header-title {\n flex: 1;\n font-size: 15px;\n font-weight: 500;\n color: #18181b;\n letter-spacing: -0.2px;\n }\n\n .sa-fp-header-actions {\n display: flex;\n gap: 4px;\n }\n\n .sa-fp-header-btn {\n min-width: 34px;\n height: 34px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: #71717a;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.12s, color 0.12s;\n }\n\n .sa-fp-header-btn:hover {\n background: #f4f4f5;\n color: #18181b;\n }\n\n /* Fullpage thread/composer override */\n .sa-fp-main .sa-thread {\n margin: 0 auto;\n width: 100%;\n padding: 24px 24px;\n }\n\n /* \u2500\u2500 Artifact file cards (in ToolResultPart) \u2500\u2500 */\n .sa-artifact-file-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }\n .sa-artifact-file-card {\n display: flex; align-items: center; gap: 10px; padding: 8px 10px;\n border: 1px solid var(--sa-border); border-radius: 10px; background: var(--sa-surface);\n font-size: 13px; color: var(--sa-text);\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-artifact-file-card:hover { border-color: var(--sa-primary); background: #fff; box-shadow: 0 2px 8px rgba(99,102,241,0.1); transform: translateY(-1px); }\n .sa-artifact-file-card:active { transform: translateY(0) scale(0.99); }\n .sa-artifact-file-icon { flex-shrink: 0; }\n .sa-artifact-chip-type {\n display: inline-flex; align-items: center; justify-content: center;\n min-width: 36px; padding: 2px 6px; border-radius: 5px;\n background: var(--sa-primary); color: #fff;\n font-size: 10px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.4;\n }\n .sa-artifact-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }\n .sa-artifact-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }\n .sa-artifact-file-size { color: var(--sa-text-muted); font-size: 12px; }\n .sa-artifact-file-download {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex;\n transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;\n }\n .sa-artifact-file-download:hover { color: var(--sa-primary); background: rgba(99,102,241,0.08); }\n .sa-artifact-file-download:active { transform: scale(0.9); }\n\n /* \u2500\u2500 Inline HTML rendering (render_mode=html) \u2500\u2500 */\n /* HTML \u5DE5\u5177\u7ED3\u679C\uFF1A\u5916\u5C42\u6EDA\u52A8\u5BB9\u5668 + \u5185\u5C42\u5185\u5BB9\u5C42\uFF08\u4E0E Playground \u4E00\u81F4\uFF0C\u65E0 iframe\uFF09 */\n .sa-tool-result-html-scroll { margin-top: 8px; max-height: 60vh; overflow: auto; border: 1px solid var(--sa-border); border-radius: 8px; }\n .sa-tool-result-html { padding: 12px; background: #fff; min-width: 100%; width: max-content; }\n\n /* \u2500\u2500 Header artifact button \u2500\u2500 */\n .sa-header-btn-artifact {\n display: inline-flex; align-items: center; gap: 4px;\n padding: 4px 12px !important; border-radius: 8px;\n background: var(--sa-primary) !important; color: #fff !important;\n font-size: 12px; font-weight: 600;\n transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;\n box-shadow: 0 1px 4px rgba(99,102,241,0.25);\n }\n .sa-header-btn-artifact:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(99,102,241,0.3); }\n .sa-header-btn-artifact:active { transform: translateY(0) scale(0.97); }\n .sa-header-btn-artifact svg { stroke: #fff; }\n .sa-header-btn-artifact.sa-artifact-pulse { animation: sa-artifact-pulse 2s ease-in-out 3; }\n\n /* \u2500\u2500 Artifact drawer (right side panel) \u2500\u2500 */\n .sa-artifact-drawer {\n display: flex; flex-direction: column; min-width: 240px; max-width: 70%;\n border-left: 1px solid var(--sa-border); background: #fff; flex-shrink: 0; overflow: hidden;\n animation: sa-slide-in-right 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n position: relative;\n }\n .sa-artifact-drawer.sa-drawer-closing {\n animation: sa-slide-out-right 0.25s cubic-bezier(0.4, 0, 1, 1) both;\n }\n .sa-drawer-resize-handle {\n position: absolute; left: -3px; top: 0; bottom: 0; width: 6px;\n cursor: col-resize; z-index: 2;\n transition: background 0.15s ease;\n }\n .sa-drawer-resize-handle:hover, .sa-drawer-resize-handle:active {\n background: var(--sa-primary); opacity: 0.3; border-radius: 3px;\n }\n .sa-artifact-drawer-header {\n display: flex; align-items: center; gap: 8px; padding: 12px 14px;\n border-bottom: 1px solid var(--sa-border); font-weight: 600; font-size: 15px; color: var(--sa-text);\n background: var(--sa-surface);\n }\n .sa-artifact-drawer-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .sa-drawer-btn {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex; align-items: center;\n transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;\n }\n .sa-drawer-btn:hover { background: var(--sa-border); color: var(--sa-text); }\n .sa-drawer-btn:active { transform: scale(0.92); }\n .sa-drawer-btn-sm {\n border: 1px solid var(--sa-border); background: #fff; cursor: pointer; color: var(--sa-primary);\n padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;\n transition: background 0.15s ease, border-color 0.15s ease;\n }\n .sa-drawer-btn-sm:hover { background: var(--sa-surface); border-color: var(--sa-primary); }\n /* flex \u5217\u5BB9\u5668\uFF1A\u8BA9 .sa-drawer-view-enter\uFF08flex:1\uFF09\u4E0E\u5185\u5C42\u6EDA\u52A8/iframe \u6709\u771F\u5B9E\u9AD8\u5EA6\u94FE */\n .sa-artifact-drawer-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }\n .sa-drawer-empty { padding: 48px 24px; text-align: center; color: var(--sa-text-muted); font-size: 14px; }\n .sa-drawer-file-list { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; }\n .sa-drawer-file-card {\n display: flex; align-items: center; gap: 10px; padding: 12px 14px;\n border: 1px solid var(--sa-border); border-radius: 10px; cursor: pointer; background: #fff;\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-drawer-file-card:nth-child(1) { animation-delay: 0s; }\n .sa-drawer-file-card:nth-child(2) { animation-delay: 0.04s; }\n .sa-drawer-file-card:nth-child(3) { animation-delay: 0.08s; }\n .sa-drawer-file-card:nth-child(4) { animation-delay: 0.12s; }\n .sa-drawer-file-card:nth-child(5) { animation-delay: 0.16s; }\n .sa-drawer-file-card:hover { border-color: var(--sa-primary); background: var(--sa-surface); box-shadow: 0 2px 8px rgba(99,102,241,0.08); transform: translateY(-1px); }\n .sa-drawer-file-card:active { transform: translateY(0) scale(0.98); }\n .sa-drawer-file-icon { flex-shrink: 0; }\n .sa-drawer-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }\n .sa-drawer-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 14px; color: var(--sa-text); }\n .sa-drawer-file-size { color: var(--sa-text-muted); font-size: 12px; }\n\n /* \u2500\u2500 Drawer preview \u2500\u2500 */\n .sa-drawer-preview-iframe { width: 100%; height: 100%; border: none; background: #fff; animation: sa-fade-in 0.3s ease both; }\n /* html/docx \u5185\u8054\u9884\u89C8\uFF1A\u4E0E\u6D88\u606F\u6D41 ToolResultPart \u4E00\u81F4\uFF08\u65E0 iframe\uFF09 */\n .sa-drawer-preview-html-scroll { flex: 1; min-height: 0; overflow: auto; padding: 12px; background: #fff; animation: sa-fade-in 0.3s ease both; }\n .sa-drawer-preview-html { max-width: none; }\n .sa-drawer-preview-loading {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n height: 100%; gap: 12px; color: var(--sa-text-muted); font-size: 14px;\n }\n .sa-drawer-preview-loading::before {\n content: ''; width: 28px; height: 28px; border-radius: 50%;\n border: 3px solid var(--sa-border); border-top-color: var(--sa-primary);\n animation: sa-spinner 0.7s linear infinite;\n }\n .sa-drawer-preview-error {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 14px; height: 100%; color: var(--sa-text-muted); font-size: 14px;\n animation: sa-fade-in 0.2s ease both;\n }\n\n /* \u2500\u2500 Drawer view transition \u2500\u2500 */\n /* flex \u5217 + flex:1 \u6491\u6EE1 drawer body\uFF0C\u8BA9\u5185\u5C42 .sa-drawer-preview-html-scroll \u7684\n flex:1/min-height:0 \u4E0E pdf iframe \u7684 height:100% \u6709\u771F\u5B9E\u9AD8\u5EA6\u94FE */\n .sa-drawer-view-enter { display: flex; flex-direction: column; flex: 1; min-height: 0; animation: sa-drawer-view-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }\n\n /* \u2500\u2500 Layout helpers for drawer alongside thread \u2500\u2500 */\n .sa-panel-content { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-panel-content .sa-thread { flex: 1; min-width: 120px; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n .sa-panel-content .sa-artifact-drawer { max-width: 60%; }\n .sa-fp-content-row { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-fp-content-row .sa-thread { flex: 1; min-width: 0; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n\n /* \u2500\u2500 Page overlay\uFF08\u9762\u677F\u7EA7\u6574\u5C4F\u9875\u9762\uFF1A\u66FF\u6362\u5185\u5BB9\u533A + \u8F93\u5165\u533A\uFF0CHeader \u4FDD\u7559\uFF09 \u2500\u2500 */\n .sa-page-overlay {\n display: flex; flex-direction: column; flex: 1; min-height: 0;\n position: relative; z-index: 2; background: #fff; overflow: hidden;\n animation: sa-page-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n /* \u5927\u7A97\u6001\u4E0E\u5185\u5BB9\u533A/\u8F93\u5165\u533A\u4E00\u81F4\u7684 800px \u5C45\u4E2D */\n .sa-page-overlay-centered { width: 100%; max-width: 800px; margin: 0 auto; }\n .sa-page-overlay-bar {\n display: flex; align-items: center; gap: 8px; flex-shrink: 0;\n padding: 10px 14px; border-bottom: 1px solid var(--sa-border);\n background: var(--sa-surface); color: var(--sa-text);\n font-size: 15px; font-weight: 600;\n }\n .sa-page-overlay-back-label { font-size: 13px; font-weight: 400; }\n .sa-page-overlay-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n /* \u6EDA\u52A8\u5F52 SDK\uFF0C\u4E1A\u52A1\u9875\u4E0D\u5199\u6EDA\u52A8\u5BB9\u5668 */\n .sa-page-overlay-body { flex: 1; min-height: 0; overflow-y: auto; }\n /* \u2500\u2500 Artifact keyframes \u2500\u2500 */\n @keyframes sa-slide-in-right {\n from { opacity: 0; transform: translateX(100%); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes sa-slide-out-right {\n from { opacity: 1; transform: translateX(0); }\n to { opacity: 0; transform: translateX(100%); }\n }\n @keyframes sa-fade-in-up {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes sa-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes sa-spinner {\n to { transform: rotate(360deg); }\n }\n @keyframes sa-artifact-pulse {\n 0%, 100% { box-shadow: 0 1px 4px rgba(99,102,241,0.25); }\n 50% { box-shadow: 0 2px 12px rgba(99,102,241,0.5); }\n }\n @keyframes sa-drawer-view-in {\n from { opacity: 0; transform: translateX(12px); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes sa-page-in {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n";
767
+ export declare const widgetStyles = "\n [data-super-agent-widget] {\n --sa-primary-dark: color-mix(in srgb, var(--sa-primary) 82%, #000);\n --sa-primary-light: color-mix(in srgb, var(--sa-primary) 10%, #fff);\n --sa-text: #1f2937;\n --sa-text-muted: #6b7280;\n --sa-text-light: #9ca3af;\n --sa-border: #e5e7eb;\n --sa-surface: #f9fafb;\n --sa-hover: #f3f4f6;\n\n font-family: var(--sa-font);\n color: var(--sa-text);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n }\n\n [data-super-agent-widget] *,\n [data-super-agent-widget] *::before,\n [data-super-agent-widget] *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n /* \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 scroll-behavior: smooth;\n }\n\n .sa-thread::-webkit-scrollbar {\n width: 6px;\n }\n\n .sa-thread::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.14);\n border-radius: 3px;\n }\n\n .sa-thread::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.24);\n }\n\n /* \u2500\u2500 Message\uFF1A\u6D6E\u7A97\u9ED8\u8BA4 hr-for-help \u98CE\u683C\uFF08AI \u5934\u50CF\u72EC\u5360\u4E00\u884C\uFF09\uFF1B\n fullpage \u6A21\u5F0F\u5728 .sa-fp-content-row \u4E0B\u6062\u590D\u539F\u6A2A\u6392\u5E03\u5C40\uFF0C\u4E92\u4E0D\u5F71\u54CD \u2500\u2500 */\n\n .sa-message {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n width: 100%;\n }\n\n .sa-message-user {\n justify-content: flex-end;\n }\n\n /* AI \u6D88\u606F\uFF1A\u5217\u5E03\u5C40\uFF0C\u5934\u50CF\u72EC\u5360\u4E00\u884C\uFF08\u4EC5\u6D6E\u7A97\uFF0C\u5BF9\u9F50 hr-for-help msgAi\uFF09 */\n .sa-message-assistant {\n flex-direction: column;\n align-items: flex-start;\n gap: 6px;\n }\n\n .sa-message-content {\n max-width: 78%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .sa-message-user .sa-message-content {\n max-width: 90%;\n }\n\n .sa-message-assistant .sa-message-content {\n max-width: 100%;\n min-width: 0;\n width: 100%;\n }\n\n .sa-message-body {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n /* \u6D6E\u7A97\u6C14\u6CE1\uFF1A\u7528\u6237\u6D45\u84DD\u3001AI \u767D\u5E95\u63CF\u8FB9\uFF08\u5BF9\u9F50 hr-for-help\uFF09 */\n .sa-message-user .sa-message-body {\n padding: 8px 12px;\n border-radius: 8px 8px 0 8px;\n background: #E8F1FE;\n color: #333333;\n font-size: 14px;\n line-height: 1.6;\n word-break: break-word;\n }\n\n .sa-message-assistant .sa-message-body {\n padding: 10px 12px;\n border-radius: 8px;\n background: #ffffff;\n border: 1px solid #E0E0E0;\n color: var(--sa-text);\n font-size: 14px;\n line-height: 1.5;\n word-break: break-word;\n }\n\n .sa-message-time {\n font-size: 11px;\n color: var(--sa-text-muted);\n opacity: 0.7;\n }\n\n .sa-message-time-right {\n text-align: right;\n }\n\n /* \u6D88\u606F\u5934\u50CF\uFF1A\u88F8\u5C55\u793A\uFF0C\u65E0\u80CC\u666F\u8272\uFF08\u5BF9\u9F50 hr-for-help msgAvatar\uFF09 */\n .sa-msg-avatar {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n object-fit: cover;\n flex-shrink: 0;\n display: block;\n }\n\n .sa-msg-avatar-text {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n font-weight: 400;\n }\n\n /* \u2500\u2500 fullpage \u8986\u76D6\uFF1A\u6062\u590D\u6A2A\u6392\u5934\u50CF + \u7ECF\u5178\u6C14\u6CE1\uFF08\u4E0D\u53D7\u6D6E\u7A97 hr-for-help \u6539\u7248\u5F71\u54CD\uFF09 \u2500\u2500 */\n\n .sa-fp-content-row .sa-message-assistant {\n flex-direction: row;\n gap: 10px;\n }\n\n .sa-fp-content-row .sa-message-assistant .sa-message-content {\n max-width: 88%;\n width: auto;\n }\n\n .sa-fp-content-row .sa-message-user .sa-message-content {\n max-width: 78%;\n }\n\n // .sa-fp-content-row .sa-message-user .sa-message-body {\n // padding: 10px 14px;\n // border-radius: 16px;\n // border-bottom-right-radius: 4px;\n // background: var(--sa-primary);\n // color: #ffffff;\n // font-size: 14px;\n // line-height: 1.55;\n // word-break: break-word;\n // }\n\n .sa-fp-content-row .sa-message-assistant .sa-message-body {\n padding: 10px 14px;\n border-radius: 16px;\n background: #ffffff;\n color: var(--sa-text);\n font-size: 14px;\n line-height: 1.55;\n word-break: break-word;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n }\n\n .sa-fp-content-row .sa-msg-avatar {\n width: 24px;\n height: 24px;\n }\n\n .sa-fp-content-row .sa-msg-avatar-text {\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n color: #ffffff;\n font-size: 12px;\n font-weight: 600;\n }\n\n /* 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 .sa-thinking-arrow {\n font-size: 12px;\n transition: transform 0.2s ease;\n }\n\n .sa-thinking-arrow.expanded {\n transform: rotate(90deg);\n }\n\n .sa-thinking-content {\n margin-top: 8px;\n color: #4b5563;\n white-space: pre-wrap;\n line-height: 1.55;\n }\n\n /* \u2500\u2500 Tool call / result \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-tool-call-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-call-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n font-size: 13px;\n user-select: none;\n }\n\n .sa-tool-call-header:hover {\n background: var(--sa-surface);\n }\n\n .sa-tool-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-tool-name {\n flex: 1;\n color: #374151;\n font-weight: 500;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-tool-args {\n margin: 0;\n padding: 10px 12px;\n border-top: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n overflow-x: auto;\n }\n\n .sa-tool-result-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-result-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-bottom: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-size: 13px;\n font-weight: 500;\n }\n\n .sa-tool-result-content {\n max-height: 256px;\n overflow: auto;\n margin: 8px 0 0;\n padding: 10px 12px;\n color: #4b5563;\n font-size: 13px;\n line-height: 1.55;\n white-space: pre-wrap;\n word-break: break-word;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n background: #f9fafb;\n border-radius: 8px;\n }\n\n .sa-tool-result-actions {\n display: flex;\n gap: 8px;\n margin: 4px 0;\n }\n\n /* \u2500\u2500 Error part \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-error-part {\n margin: 6px 0;\n padding: 10px 12px;\n border: 1px solid #fecaca;\n border-radius: 10px;\n background: #fef2f2;\n color: #b91c1c;\n }\n\n .sa-error-content {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 13px;\n line-height: 1.5;\n }\n\n .sa-error-icon {\n font-size: 14px;\n line-height: 1.4;\n }\n\n .sa-error-retry {\n margin-top: 8px;\n padding: 6px 14px;\n border: none;\n border-radius: 8px;\n background: #ef4444;\n color: #ffffff;\n font-size: 13px;\n cursor: pointer;\n transition: background 0.2s ease;\n }\n\n .sa-error-retry:hover {\n background: #dc2626;\n }\n\n /* \u2500\u2500 Action bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-action-bar {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 6px;\n position: relative;\n }\n\n .sa-action-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n flex: none;\n white-space: nowrap;\n line-height: 1;\n padding: 4px 10px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--sa-text-muted);\n font-size: 12px;\n cursor: pointer;\n transition: color 0.15s ease, background 0.15s ease;\n }\n\n .sa-action-btn svg {\n display: block;\n flex: none;\n }\n\n .sa-action-btn:hover {\n color: var(--sa-text);\n background: rgba(0, 0, 0, 0.05);\n }\n\n .sa-action-btn-active {\n color: var(--sa-primary) !important;\n background: var(--sa-primary-light) !important;\n }\n\n .sa-action-divider {\n width: 1px;\n height: 16px;\n background: var(--sa-border);\n margin: 0 2px;\n align-self: center;\n }\n\n /* \u2500\u2500 Dislike Panel \u2500\u2500 */\n .sa-dislike-panel {\n position: absolute; top: 100%; left: 0; right: 0;\n margin-top: 6px; padding: 12px;\n background: #fff; border: 1px solid var(--sa-border); border-radius: 10px;\n box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n animation: sa-fade-in-up 0.2s cubic-bezier(0.16,1,0.3,1) both;\n z-index: 10;\n }\n .sa-dislike-panel-title { font-size: 13px; font-weight: 500; color: var(--sa-text); margin-bottom: 8px; }\n .sa-dislike-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }\n .sa-dislike-reason-btn {\n padding: 4px 10px; border: 1px solid var(--sa-border); border-radius: 6px;\n background: #fff; color: var(--sa-text); font-size: 12px; cursor: pointer;\n transition: border-color 0.15s, background 0.15s, color 0.15s;\n }\n .sa-dislike-reason-btn:hover { border-color: var(--sa-primary); color: var(--sa-primary); }\n .sa-dislike-reason-btn.active { background: var(--sa-primary); color: #fff; border-color: var(--sa-primary); }\n .sa-dislike-remark {\n width: 100%; padding: 8px 10px; border: 1px solid var(--sa-border); border-radius: 8px;\n font-size: 13px; color: var(--sa-text); resize: none; outline: none;\n transition: border-color 0.15s;\n }\n .sa-dislike-remark:focus { border-color: var(--sa-primary); }\n .sa-dislike-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }\n .sa-dislike-submit {\n padding: 5px 14px; border: none; border-radius: 6px;\n background: var(--sa-primary); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer;\n transition: opacity 0.15s;\n }\n .sa-dislike-submit:hover { opacity: 0.9; }\n .sa-dislike-cancel {\n padding: 5px 14px; border: 1px solid var(--sa-border); border-radius: 6px;\n background: #fff; color: var(--sa-text-muted); font-size: 13px; cursor: pointer;\n transition: background 0.15s;\n }\n .sa-dislike-cancel:hover { background: var(--sa-surface); }\n\n /* \u2500\u2500 Composer\uFF08\u8F93\u5165\u533A\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 tailwind.css \u7684 .sa-input-form/.sa-send-btn\uFF09 \u2500\u2500 */\n\n /* \u2500\u2500 Slash Menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-slash-menu {\n position: absolute;\n bottom: 100%;\n left: 14px;\n right: 14px;\n max-width: 400px;\n max-height: 200px;\n overflow-y: auto;\n background: var(--sa-surface);\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);\n margin-bottom: 4px;\n z-index: 10;\n }\n\n .sa-slash-menu-empty {\n padding: 12px 14px;\n color: #9ca3af;\n font-size: 13px;\n text-align: center;\n }\n\n .sa-slash-menu-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .sa-slash-menu-item:hover,\n .sa-slash-menu-item--active {\n background: var(--sa-hover);\n }\n\n .sa-slash-menu-item-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--sa-text);\n white-space: nowrap;\n }\n\n .sa-slash-menu-item-desc {\n font-size: 12px;\n color: #9ca3af;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n min-width: 0;\n }\n\n /* \u2500\u2500 Thread list\uFF08\u5185\u5D4C\u4FA7\u8FB9\u680F\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 FullpageLayout.tsx / ThreadList.tsx\uFF09 \u2500\u2500 */\n\n /* \u6D88\u606F\u533A\u52A0\u8F7D\u6001 */\n .sa-messages-loading {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n color: #9ca3af;\n font-size: 14px;\n }\n\n .sa-loading-spinner {\n width: 16px;\n height: 16px;\n border: 2px solid var(--sa-border, #e5e7eb);\n border-top-color: var(--sa-primary, #6366f1);\n border-radius: 50%;\n animation: sa-spin 0.8s linear infinite;\n flex-shrink: 0;\n }\n\n @keyframes sa-spin {\n to { transform: rotate(360deg); }\n }\n\n /* \u2500\u2500 Welcome\uFF08\u9996\u9875\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 tailwind.css\uFF09 \u2500\u2500 */\n\n .sa-thinking-indicator {\n color: #9ca3af;\n font-size: 14px;\n animation: sa-blink 1.2s ease-in-out infinite;\n }\n\n /* \u2500\u2500 Interrupt cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-interrupt-card {\n margin: 8px 0;\n padding: 14px;\n border: 1px solid #e0e7ff;\n border-radius: 10px;\n background: #f8faff;\n }\n\n .sa-interrupt-content {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 13px;\n line-height: 1.6;\n color: var(--sa-text);\n margin-bottom: 12px;\n }\n\n .sa-interrupt-actions {\n display: flex;\n gap: 8px;\n margin-top: 10px;\n }\n\n .sa-interrupt-btn {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 14px;\n border: none;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s, opacity 0.15s;\n }\n\n .sa-interrupt-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .sa-interrupt-btn-primary {\n background: var(--sa-primary);\n color: #fff;\n }\n\n .sa-interrupt-btn-primary:hover:not(:disabled) {\n opacity: 0.9;\n }\n\n .sa-interrupt-btn-secondary {\n background: #f3f4f6;\n color: #374151;\n }\n\n .sa-interrupt-btn-secondary:hover:not(:disabled) {\n background: #e5e7eb;\n }\n\n .sa-interrupt-btn-danger {\n background: #fef2f2;\n color: #dc2626;\n }\n\n .sa-interrupt-btn-danger:hover:not(:disabled) {\n background: #fee2e2;\n }\n\n .sa-interrupt-options {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .sa-interrupt-option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n background: #fff;\n color: var(--sa-text);\n font-size: 13px;\n cursor: pointer;\n text-align: left;\n transition: border-color 0.12s, background 0.12s;\n }\n\n .sa-interrupt-option:hover {\n border-color: var(--sa-primary);\n background: #f5f3ff;\n }\n\n .sa-interrupt-option-selected {\n border-color: var(--sa-primary);\n background: #ede9fe;\n color: var(--sa-primary);\n font-weight: 500;\n }\n\n .sa-interrupt-option-danger {\n color: #ef4444;\n }\n\n .sa-interrupt-option-danger:hover {\n border-color: #ef4444;\n background: #fef2f2;\n }\n\n .sa-interrupt-option-desc {\n font-size: 11px;\n color: var(--sa-text-muted);\n margin-left: auto;\n }\n\n .sa-interrupt-input-area {\n margin-top: 4px;\n }\n\n .sa-interrupt-input,\n .sa-interrupt-textarea,\n .sa-interrupt-select {\n width: 100%;\n padding: 8px 12px;\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n background: #fff;\n color: var(--sa-text);\n font-size: 13px;\n font-family: inherit;\n outline: none;\n transition: border-color 0.15s;\n }\n\n .sa-interrupt-input:focus,\n .sa-interrupt-textarea:focus,\n .sa-interrupt-select:focus {\n border-color: var(--sa-primary);\n }\n\n .sa-interrupt-textarea {\n resize: vertical;\n min-height: 60px;\n }\n\n .sa-interrupt-form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin-top: 4px;\n }\n\n .sa-interrupt-form-field {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .sa-interrupt-form-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--sa-text);\n }\n\n .sa-interrupt-form-required {\n color: #ef4444;\n margin-left: 2px;\n }\n\n .sa-interrupt-submitted {\n margin-top: 8px;\n font-size: 12px;\n color: #9ca3af;\n }\n\n .sa-interrupt-btn-answered {\n background: var(--sa-primary) !important;\n color: #fff !important;\n opacity: 0.7;\n }\n\n .sa-interrupt-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .sa-interrupt-option:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n .sa-interrupt-input:disabled,\n .sa-interrupt-textarea:disabled,\n .sa-interrupt-select:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n background: #f9fafb;\n }\n\n .sa-interrupt-unknown {\n padding: 8px 12px;\n border-radius: 8px;\n background: #fef3c7;\n color: #92400e;\n font-size: 13px;\n margin: 6px 0;\n }\n\n /* \u2500\u2500 Animations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n @keyframes sa-blink {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n }\n\n /* \u2500\u2500 Fullpage Layout (DeepSeek-style) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-fullpage {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n background: var(--sa-bg, #ffffff);\n }\n\n /* Sidebar\uFF08fullpage \u9ED8\u8BA4\u4FA7\u8FB9\u680F\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u5BF9\u9F50\u6D6E\u7A97\u5386\u53F2\u5BF9\u8BDD\u6837\u5F0F\uFF0C\u89C1 FullpageLayout.tsx\uFF09 */\n\n /* Sidebar wrapper (for custom ThreadList slot)\uFF1A\u5BBD\u5EA6\u4E0E\u9ED8\u8BA4\u4FA7\u8FB9\u680F 220px \u5BF9\u9F50 */\n .sa-fp-sidebar-wrapper {\n width: 220px;\n flex-shrink: 0;\n overflow: hidden;\n border-right: 1px solid #ECECEC;\n background: #FAFAFA;\n transition: width 0.2s cubic-bezier(0.16,1,0.3,1);\n }\n\n .sa-fp-sidebar-wrapper-collapsed {\n width: 0;\n border-right: none;\n }\n\n /* Main area */\n .sa-fp-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n background: #fff;\n }\n\n .sa-fp-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n border-bottom: 1px solid #f0f0f0;\n background: #fff;\n flex-shrink: 0;\n min-height: 52px;\n }\n\n .sa-fp-header-title {\n flex: 1;\n font-size: 15px;\n font-weight: 500;\n color: #18181b;\n letter-spacing: -0.2px;\n }\n\n .sa-fp-header-actions {\n display: flex;\n gap: 4px;\n }\n\n .sa-fp-header-btn {\n min-width: 34px;\n height: 34px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: #71717a;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.12s, color 0.12s;\n }\n\n .sa-fp-header-btn:hover {\n background: #f4f4f5;\n color: #18181b;\n }\n\n /* Fullpage thread/composer override */\n .sa-fp-main .sa-thread {\n margin: 0 auto;\n width: 100%;\n padding: 24px 24px;\n }\n\n /* \u2500\u2500 Artifact file cards (in ToolResultPart) \u2500\u2500 */\n .sa-artifact-file-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }\n .sa-artifact-file-card {\n display: flex; align-items: center; gap: 10px; padding: 8px 10px;\n border: 1px solid var(--sa-border); border-radius: 10px; background: var(--sa-surface);\n font-size: 13px; color: var(--sa-text);\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-artifact-file-card:hover { border-color: var(--sa-primary); background: #fff; box-shadow: 0 2px 8px rgba(99,102,241,0.1); transform: translateY(-1px); }\n .sa-artifact-file-card:active { transform: translateY(0) scale(0.99); }\n .sa-artifact-file-icon { flex-shrink: 0; }\n .sa-artifact-chip-type {\n display: inline-flex; align-items: center; justify-content: center;\n min-width: 36px; padding: 2px 6px; border-radius: 5px;\n background: var(--sa-primary); color: #fff;\n font-size: 10px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.4;\n }\n .sa-artifact-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }\n .sa-artifact-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }\n .sa-artifact-file-size { color: var(--sa-text-muted); font-size: 12px; }\n .sa-artifact-file-download {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex;\n transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;\n }\n .sa-artifact-file-download:hover { color: var(--sa-primary); background: rgba(99,102,241,0.08); }\n .sa-artifact-file-download:active { transform: scale(0.9); }\n\n /* \u2500\u2500 Inline HTML rendering (render_mode=html) \u2500\u2500 */\n /* HTML \u5DE5\u5177\u7ED3\u679C\uFF1A\u5916\u5C42\u6EDA\u52A8\u5BB9\u5668 + \u5185\u5C42\u5185\u5BB9\u5C42\uFF08\u4E0E Playground \u4E00\u81F4\uFF0C\u65E0 iframe\uFF09 */\n .sa-tool-result-html-scroll { margin-top: 8px; max-height: 60vh; overflow: auto; border: 1px solid var(--sa-border); border-radius: 8px; }\n .sa-tool-result-html { padding: 12px; background: #fff; min-width: 100%; }\n\n /* \u2500\u2500 Header artifact button \u2500\u2500 */\n .sa-header-btn-artifact {\n display: inline-flex; align-items: center; gap: 4px;\n padding: 4px 12px !important; border-radius: 8px;\n background: var(--sa-primary) !important; color: #fff !important;\n font-size: 12px; font-weight: 600;\n transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;\n box-shadow: 0 1px 4px rgba(99,102,241,0.25);\n }\n .sa-header-btn-artifact:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(99,102,241,0.3); }\n .sa-header-btn-artifact:active { transform: translateY(0) scale(0.97); }\n .sa-header-btn-artifact svg { stroke: #fff; }\n .sa-header-btn-artifact.sa-artifact-pulse { animation: sa-artifact-pulse 2s ease-in-out 3; }\n\n /* \u2500\u2500 Artifact drawer (right side panel) \u2500\u2500 */\n .sa-artifact-drawer {\n display: flex; flex-direction: column; min-width: 240px; max-width: 70%;\n border-left: 1px solid var(--sa-border); background: #fff; flex-shrink: 0; overflow: hidden;\n animation: sa-slide-in-right 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n position: relative;\n }\n .sa-artifact-drawer.sa-drawer-closing {\n animation: sa-slide-out-right 0.25s cubic-bezier(0.4, 0, 1, 1) both;\n }\n .sa-drawer-resize-handle {\n position: absolute; left: -3px; top: 0; bottom: 0; width: 6px;\n cursor: col-resize; z-index: 2;\n transition: background 0.15s ease;\n }\n .sa-drawer-resize-handle:hover, .sa-drawer-resize-handle:active {\n background: var(--sa-primary); opacity: 0.3; border-radius: 3px;\n }\n .sa-artifact-drawer-header {\n display: flex; align-items: center; gap: 8px; padding: 12px 14px;\n border-bottom: 1px solid var(--sa-border); font-weight: 600; font-size: 15px; color: var(--sa-text);\n background: var(--sa-surface);\n }\n .sa-artifact-drawer-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .sa-drawer-btn {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex; align-items: center;\n transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;\n }\n .sa-drawer-btn:hover { background: var(--sa-border); color: var(--sa-text); }\n .sa-drawer-btn:active { transform: scale(0.92); }\n .sa-drawer-btn-sm {\n border: 1px solid var(--sa-border); background: #fff; cursor: pointer; color: var(--sa-primary);\n padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;\n transition: background 0.15s ease, border-color 0.15s ease;\n }\n .sa-drawer-btn-sm:hover { background: var(--sa-surface); border-color: var(--sa-primary); }\n /* flex \u5217\u5BB9\u5668\uFF1A\u8BA9 .sa-drawer-view-enter\uFF08flex:1\uFF09\u4E0E\u5185\u5C42\u6EDA\u52A8/iframe \u6709\u771F\u5B9E\u9AD8\u5EA6\u94FE */\n .sa-artifact-drawer-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }\n .sa-drawer-empty { padding: 48px 24px; text-align: center; color: var(--sa-text-muted); font-size: 14px; }\n .sa-drawer-file-list { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; }\n .sa-drawer-file-card {\n display: flex; align-items: center; gap: 10px; padding: 12px 14px;\n border: 1px solid var(--sa-border); border-radius: 10px; cursor: pointer; background: #fff;\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-drawer-file-card:nth-child(1) { animation-delay: 0s; }\n .sa-drawer-file-card:nth-child(2) { animation-delay: 0.04s; }\n .sa-drawer-file-card:nth-child(3) { animation-delay: 0.08s; }\n .sa-drawer-file-card:nth-child(4) { animation-delay: 0.12s; }\n .sa-drawer-file-card:nth-child(5) { animation-delay: 0.16s; }\n .sa-drawer-file-card:hover { border-color: var(--sa-primary); background: var(--sa-surface); box-shadow: 0 2px 8px rgba(99,102,241,0.08); transform: translateY(-1px); }\n .sa-drawer-file-card:active { transform: translateY(0) scale(0.98); }\n .sa-drawer-file-icon { flex-shrink: 0; }\n .sa-drawer-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }\n .sa-drawer-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 14px; color: var(--sa-text); }\n .sa-drawer-file-size { color: var(--sa-text-muted); font-size: 12px; }\n\n /* \u2500\u2500 Drawer preview \u2500\u2500 */\n .sa-drawer-preview-iframe { width: 100%; height: 100%; border: none; background: #fff; animation: sa-fade-in 0.3s ease both; }\n /* html/docx \u5185\u8054\u9884\u89C8\uFF1A\u4E0E\u6D88\u606F\u6D41 ToolResultPart \u4E00\u81F4\uFF08\u65E0 iframe\uFF09 */\n .sa-drawer-preview-html-scroll { flex: 1; min-height: 0; overflow: auto; padding: 12px; background: #fff; animation: sa-fade-in 0.3s ease both; }\n .sa-drawer-preview-html { max-width: none; }\n .sa-drawer-preview-loading {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n height: 100%; gap: 12px; color: var(--sa-text-muted); font-size: 14px;\n }\n .sa-drawer-preview-loading::before {\n content: ''; width: 28px; height: 28px; border-radius: 50%;\n border: 3px solid var(--sa-border); border-top-color: var(--sa-primary);\n animation: sa-spinner 0.7s linear infinite;\n }\n .sa-drawer-preview-error {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 14px; height: 100%; color: var(--sa-text-muted); font-size: 14px;\n animation: sa-fade-in 0.2s ease both;\n }\n\n /* \u2500\u2500 Drawer view transition \u2500\u2500 */\n /* flex \u5217 + flex:1 \u6491\u6EE1 drawer body\uFF0C\u8BA9\u5185\u5C42 .sa-drawer-preview-html-scroll \u7684\n flex:1/min-height:0 \u4E0E pdf iframe \u7684 height:100% \u6709\u771F\u5B9E\u9AD8\u5EA6\u94FE */\n .sa-drawer-view-enter { display: flex; flex-direction: column; flex: 1; min-height: 0; animation: sa-drawer-view-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }\n\n /* \u2500\u2500 Layout helpers for drawer alongside thread \u2500\u2500 */\n .sa-panel-content { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-panel-content .sa-thread { flex: 1; min-width: 120px; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n .sa-panel-content .sa-artifact-drawer { max-width: 60%; }\n .sa-fp-content-row { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-fp-content-row .sa-thread { flex: 1; min-width: 0; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n\n /* \u2500\u2500 Page overlay\uFF08\u9762\u677F\u7EA7\u6574\u5C4F\u9875\u9762\uFF1A\u66FF\u6362\u5185\u5BB9\u533A + \u8F93\u5165\u533A\uFF0CHeader \u4FDD\u7559\uFF09 \u2500\u2500 */\n .sa-page-overlay {\n display: flex; flex-direction: column; flex: 1; min-height: 0;\n position: relative; z-index: 2; background: #fff; overflow: hidden;\n animation: sa-page-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n /* \u5927\u7A97\u6001\u4E0E\u5185\u5BB9\u533A/\u8F93\u5165\u533A\u4E00\u81F4\u7684 800px \u5C45\u4E2D */\n .sa-page-overlay-centered { width: 100%; max-width: 800px; margin: 0 auto; }\n .sa-page-overlay-bar {\n display: flex; align-items: center; gap: 8px; flex-shrink: 0;\n padding: 10px 14px; border-bottom: 1px solid var(--sa-border);\n background: var(--sa-surface); color: var(--sa-text);\n font-size: 15px; font-weight: 600;\n }\n .sa-page-overlay-back-label { font-size: 13px; font-weight: 400; }\n .sa-page-overlay-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n /* \u6EDA\u52A8\u5F52 SDK\uFF0C\u4E1A\u52A1\u9875\u4E0D\u5199\u6EDA\u52A8\u5BB9\u5668 */\n .sa-page-overlay-body { flex: 1; min-height: 0; overflow-y: auto; }\n /* \u2500\u2500 Artifact keyframes \u2500\u2500 */\n @keyframes sa-slide-in-right {\n from { opacity: 0; transform: translateX(100%); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes sa-slide-out-right {\n from { opacity: 1; transform: translateX(0); }\n to { opacity: 0; transform: translateX(100%); }\n }\n @keyframes sa-fade-in-up {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes sa-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes sa-spinner {\n to { transform: rotate(360deg); }\n }\n @keyframes sa-artifact-pulse {\n 0%, 100% { box-shadow: 0 1px 4px rgba(99,102,241,0.25); }\n 50% { box-shadow: 0 2px 12px rgba(99,102,241,0.5); }\n }\n @keyframes sa-drawer-view-in {\n from { opacity: 0; transform: translateX(12px); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes sa-page-in {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n";
762
768
 
763
769
  export { }