super-agent-sdk 1.0.6 → 1.0.8

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 (8) hide show
  1. package/README.md +141 -25
  2. package/dist/index.cjs +4 -4
  3. package/dist/index.d.ts +19 -3
  4. package/dist/index.mjs +227 -178
  5. package/dist/widget.cjs +239 -35
  6. package/dist/widget.d.ts +51 -12
  7. package/dist/widget.mjs +1864 -1106
  8. package/package.json +2 -2
package/dist/widget.d.ts CHANGED
@@ -1,15 +1,19 @@
1
1
  import { ComponentType } from 'react';
2
+ import { CSSProperties } from 'react';
2
3
  import { default as default_2 } from 'react';
3
4
  import { JSX as JSX_2 } from 'react';
4
5
  import { RefObject } from 'react';
5
6
 
6
- export declare function ActionBar({ message, onCopy, onRegenerate }: ActionBarProps): JSX_2.Element | null;
7
+ export declare function ActionBar({ message, onCopy, onRegenerate, onFeedback }: ActionBarProps): JSX_2.Element | null;
7
8
 
8
9
  export declare interface ActionBarProps {
9
10
  message: UIMessage;
10
11
  onCopy: () => void;
11
- onRegenerate: () => void;
12
- onFeedback?: (messageId: string, feedback: 'like' | 'dislike') => void;
12
+ onRegenerate?: () => void;
13
+ onFeedback?: (messageId: string, feedback: 'like' | 'dislike', options?: {
14
+ reason?: number;
15
+ remark?: string;
16
+ }) => void;
13
17
  }
14
18
 
15
19
  /** 通用产物（INTERFACE 约定：type + data，适配 table/chart/file/text/image/html/custom） */
@@ -36,7 +40,7 @@ export declare interface AvatarConfig {
36
40
  }
37
41
 
38
42
  declare interface ChatEvent {
39
- type: "user" | "thinking" | "ai" | "tool_call" | "tool_result" | "done" | "error" | "interrupt";
43
+ type: "user" | "thinking" | "ai" | "tool_call" | "tool_result" | "done" | "stop" | "error" | "interrupt";
40
44
  content: string;
41
45
  toolName?: string;
42
46
  toolCallId?: string;
@@ -72,6 +76,7 @@ declare interface ChatProviderProps {
72
76
  }
73
77
 
74
78
  export declare interface ChatState {
79
+ sdk: SuperAgentSDK;
75
80
  status: ChatStatus;
76
81
  error: Error | null;
77
82
  messages: UIMessage[];
@@ -81,6 +86,9 @@ export declare interface ChatState {
81
86
  isArtifactDrawerOpen: boolean;
82
87
  allArtifacts: ArtifactFile[];
83
88
  activePreviewArtifact: ArtifactFile | null;
89
+ hasMore: boolean;
90
+ conversationsLoading: boolean;
91
+ messagesLoading: boolean;
84
92
  sendMessage: (content: string) => void;
85
93
  stop: () => void;
86
94
  regenerate: () => void;
@@ -88,6 +96,7 @@ export declare interface ChatState {
88
96
  newConversation: () => void;
89
97
  deleteConversation: (sessionId: string) => void;
90
98
  renameConversation: (sessionId: string, title: string) => void;
99
+ loadMoreConversations: () => void;
91
100
  toggleThreadList: () => void;
92
101
  toggleArtifactDrawer: () => void;
93
102
  openArtifactPreview: (artifact: ArtifactFile) => void;
@@ -126,6 +135,16 @@ declare interface Conversation {
126
135
 
127
136
  export declare const defaultTheme: Required<ThemeConfig>;
128
137
 
138
+ /**
139
+ * SVG symbol 雪碧图加载。
140
+ *
141
+ * `Icon` 用 `<use href="#icon-xxx">` 引用 symbol，symbol 由阿里 iconfont 的 symbol js
142
+ * 注入到 `<body>` 下的雪碧图。此前要求宿主页自行 `<script src>`，漏引图标即全空；
143
+ * 现由 SDK 自己动态建 script 加载，宿主页零配置。
144
+ */
145
+ /** 确保雪碧图可用；多次调用只注入一次。SSR 下直接跳过。 */
146
+ export declare function ensureIconFont(url?: string): void;
147
+
129
148
  export declare function ErrorPart({ content, onRetry }: ErrorPartProps): JSX_2.Element;
130
149
 
131
150
  export declare interface ErrorPartProps {
@@ -146,14 +165,17 @@ export declare interface EventHooks {
146
165
  declare interface FormField {
147
166
  name: string;
148
167
  label: string;
149
- type: 'text' | 'number' | 'password' | 'textarea' | 'select' | 'date';
168
+ type: 'text' | 'number' | 'password' | 'textarea' | 'select' | 'multiSelect' | 'date';
150
169
  required?: boolean;
151
170
  placeholder?: string;
152
171
  defaultValue?: any;
153
- options?: string[];
172
+ options?: (string | {
173
+ value: string;
174
+ label: string;
175
+ })[];
154
176
  }
155
177
 
156
- export declare function FullpageLayout({ title, slots, welcomeMessage, suggestedPrompts, sidebarDefaultOpen, onClose, avatar, artifactPreview }: FullpageLayoutProps): default_2.JSX.Element;
178
+ export declare function FullpageLayout({ title, slots, welcomeMessage, suggestedPrompts, sidebarDefaultOpen, onClose, avatar, artifactPreview, }: FullpageLayoutProps): default_2.JSX.Element;
157
179
 
158
180
  declare interface FullpageLayoutProps {
159
181
  title: string;
@@ -174,14 +196,14 @@ export declare interface HeaderProps {
174
196
  onToggleThreadList: () => void;
175
197
  }
176
198
 
177
- export declare function Icon({ name, size, color, className, style }: IconProps): default_2.JSX.Element;
199
+ export declare function Icon({ name, size, color, className, style }: IconProps): JSX_2.Element;
178
200
 
179
201
  declare interface IconProps {
180
202
  name: string;
181
203
  size?: number;
182
204
  color?: string;
183
205
  className?: string;
184
- style?: default_2.CSSProperties;
206
+ style?: CSSProperties;
185
207
  }
186
208
 
187
209
  declare interface InternalHeaderProps {
@@ -249,7 +271,7 @@ declare interface ListConversationsResult {
249
271
  total: number;
250
272
  }
251
273
 
252
- export declare function Message({ message, isStreaming, isLast, slots, avatar, artifactPreview }: InternalMessageProps): JSX_2.Element;
274
+ export declare function Message({ message, isStreaming, isLast, slots, avatar, artifactPreview, }: InternalMessageProps): JSX_2.Element;
253
275
 
254
276
  declare type MessagePart = {
255
277
  type: "text";
@@ -307,6 +329,13 @@ export declare interface MountOptions {
307
329
  artifactPreview?: boolean;
308
330
  }
309
331
 
332
+ declare interface SkillInfo {
333
+ code: string;
334
+ name: string;
335
+ displayName: string | null;
336
+ description: string | null;
337
+ }
338
+
310
339
  export declare interface Slots {
311
340
  Trigger?: ComponentType<TriggerProps>;
312
341
  Header?: ComponentType<HeaderProps>;
@@ -324,6 +353,8 @@ export declare interface Slots {
324
353
  }
325
354
 
326
355
  declare interface SuperAgentSDK {
356
+ /** 当前 Bot ID（只读） */
357
+ readonly botId: number;
327
358
  /** 获取 token（调用 POST {tokenGateway}/v1/token），自动设置内部凭证 */
328
359
  getToken(): Promise<string>;
329
360
  /** 创建新会话，返回 sessionId */
@@ -343,6 +374,10 @@ declare interface SuperAgentSDK {
343
374
  }): Promise<void>;
344
375
  /** 取消消息反馈，DELETE /chat/messages/{messageId}/feedback */
345
376
  cancelFeedback(messageId: string): Promise<void>;
377
+ /** 获取当前 bot 绑定的 skill 列表，GET /chat/bots/{botId}/skills */
378
+ listSkills(): Promise<SkillInfo[]>;
379
+ /** 停止生成（双信号：POST /chat/stop 广播 + abort SSE），半截回复保留 */
380
+ stopGeneration(sessionId: string): Promise<void>;
346
381
  }
347
382
 
348
383
  export declare function TextPart({ content }: TextPartProps): default_2.JSX.Element;
@@ -381,6 +416,8 @@ export declare interface ThreadListProps {
381
416
  onNew: () => void;
382
417
  onDelete: (sessionId: string) => void;
383
418
  onRename: (sessionId: string, title: string) => void;
419
+ hasMore?: boolean;
420
+ onLoadMore?: () => void;
384
421
  }
385
422
 
386
423
  declare interface ThreadProps {
@@ -468,9 +505,11 @@ declare interface UseConversationsReturn {
468
505
  conversations: Conversation[];
469
506
  activeConversationId: string | null;
470
507
  loading: boolean;
508
+ hasMore: boolean;
471
509
  loadConversations: () => Promise<void>;
510
+ loadMore: () => Promise<void>;
472
511
  switchConversation: (sessionId: string) => Promise<UIMessage[]>;
473
- newConversation: () => void;
512
+ newConversation: () => Promise<void>;
474
513
  deleteConversation: (sessionId: string) => Promise<void>;
475
514
  renameConversation: (sessionId: string, title: string) => Promise<void>;
476
515
  setActiveConversationId: (id: string | null) => void;
@@ -492,6 +531,6 @@ export declare interface WidgetInstance {
492
531
 
493
532
  export declare type WidgetMode = 'floating' | 'fullpage';
494
533
 
495
- 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-border: #e5e7eb;\n --sa-surface: #f9fafb;\n\n font-family: var(--sa-font);\n color: var(--sa-text);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n }\n\n [data-super-agent-widget] *,\n [data-super-agent-widget] *::before,\n [data-super-agent-widget] *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n [data-super-agent-widget] button {\n font-family: inherit;\n }\n\n /* \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-trigger {\n position: fixed;\n bottom: 24px;\n right: 24px;\n width: 56px;\n height: 56px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n color: #ffffff;\n font-size: 24px;\n box-shadow: 0 8px 24px color-mix(in srgb, var(--sa-primary) 35%, transparent);\n z-index: var(--sa-z-index, 9999);\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n\n .sa-trigger:hover {\n transform: scale(1.08);\n box-shadow: 0 12px 32px color-mix(in srgb, var(--sa-primary) 45%, transparent);\n }\n\n .sa-trigger:active {\n transform: scale(0.94);\n }\n\n .sa-trigger-open {\n transform: rotate(90deg);\n }\n\n /* \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-panel {\n position: fixed;\n bottom: 96px;\n right: 24px;\n width: var(--sa-panel-width, 380px);\n height: var(--sa-panel-height, 520px);\n max-height: calc(100vh - 120px);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: var(--sa-bg);\n border: 1px solid var(--sa-border);\n border-radius: var(--sa-radius, 16px);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);\n z-index: var(--sa-z-index, 9999);\n animation: sa-slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n /* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-header {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 14px 16px;\n color: #ffffff;\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n flex-shrink: 0;\n }\n\n .sa-header-left {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n }\n\n .sa-header-avatar {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: rgba(255,255,255,0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 600;\n }\n\n .sa-header-info {\n display: flex;\n flex-direction: column;\n }\n\n .sa-header-status {\n font-size: 11px;\n opacity: 0.8;\n color: #a5f3a6;\n }\n\n .sa-header-actions {\n display: flex;\n gap: 4px;\n }\n\n .sa-header-title {\n flex: 1;\n font-size: 16px;\n font-weight: 600;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .sa-header-btn {\n width: 30px;\n height: 30px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: #ffffff;\n font-size: 16px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s ease;\n }\n\n .sa-header-btn:hover {\n background: rgba(255, 255, 255, 0.18);\n }\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: 14px;\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 .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 .sa-message-body {\n max-width: 78%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .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-message-assistant .sa-message-body {\n padding: 10px 14px;\n border-radius: 16px;\n border-bottom-left-radius: 4px;\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-avatar {\n width: 28px;\n height: 28px;\n flex-shrink: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #ffffff;\n font-size: 12px;\n font-weight: 600;\n overflow: hidden;\n }\n\n .sa-avatar-assistant {\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n }\n\n .sa-avatar-user {\n background: linear-gradient(135deg, #64748b, #475569);\n }\n\n /* \u2500\u2500 Text part (markdown) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-text-part {\n font-size: 14px;\n line-height: 1.6;\n word-break: break-word;\n }\n\n .sa-text-part p {\n margin: 0 0 8px;\n }\n\n .sa-text-part p:last-child {\n margin-bottom: 0;\n }\n\n .sa-text-part strong {\n font-weight: 600;\n }\n\n .sa-text-part em {\n font-style: italic;\n }\n\n .sa-text-part h1,\n .sa-text-part h2,\n .sa-text-part h3,\n .sa-text-part h4,\n .sa-text-part h5,\n .sa-text-part h6 {\n margin: 12px 0 6px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .sa-text-part h1 {\n font-size: 1.4em;\n }\n\n .sa-text-part h2 {\n font-size: 1.25em;\n }\n\n .sa-text-part h3 {\n font-size: 1.1em;\n }\n\n .sa-text-part h4,\n .sa-text-part h5,\n .sa-text-part h6 {\n font-size: 1em;\n }\n\n .sa-text-part a {\n color: var(--sa-primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n\n .sa-text-part a:hover {\n color: var(--sa-primary-dark);\n }\n\n .sa-inline-code {\n padding: 2px 5px;\n border-radius: 4px;\n background: rgba(0, 0, 0, 0.06);\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 0.9em;\n }\n\n .sa-code-block {\n margin: 8px 0;\n padding: 12px 14px;\n border-radius: 10px;\n background: #1e293b;\n color: #e2e8f0;\n overflow-x: auto;\n font-size: 13px;\n line-height: 1.55;\n }\n\n .sa-code-block code {\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n white-space: pre;\n }\n\n .sa-list {\n margin: 6px 0;\n padding-left: 22px;\n }\n\n .sa-list li {\n margin: 3px 0;\n line-height: 1.5;\n }\n\n ul.sa-list {\n list-style: disc;\n }\n\n ol.sa-list {\n list-style: decimal;\n }\n\n /* \u2500\u2500 Thinking part \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-thinking-part {\n margin: 6px 0;\n padding: 8px 12px;\n border-left: 3px solid var(--sa-primary);\n border-radius: 8px;\n background: var(--sa-primary-light);\n cursor: pointer;\n font-size: 13px;\n }\n\n .sa-thinking-header {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--sa-primary-dark);\n font-weight: 500;\n user-select: none;\n }\n\n .sa-thinking-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-thinking-label {\n flex: 1;\n }\n\n .sa-thinking-arrow {\n font-size: 12px;\n transition: transform 0.2s ease;\n }\n\n .sa-thinking-arrow.expanded {\n transform: rotate(90deg);\n }\n\n .sa-thinking-content {\n margin-top: 8px;\n color: #4b5563;\n white-space: pre-wrap;\n line-height: 1.55;\n }\n\n /* \u2500\u2500 Tool call / result \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-tool-call-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-call-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n font-size: 13px;\n user-select: none;\n }\n\n .sa-tool-call-header:hover {\n background: var(--sa-surface);\n }\n\n .sa-tool-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-tool-name {\n flex: 1;\n color: #374151;\n font-weight: 500;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-tool-args {\n margin: 0;\n padding: 10px 12px;\n border-top: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n overflow-x: auto;\n }\n\n .sa-tool-result-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-result-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-bottom: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-size: 13px;\n font-weight: 500;\n }\n\n .sa-tool-result-content {\n 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 }\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 gap: 6px;\n margin-top: 6px;\n position: relative;\n }\n\n .sa-action-btn {\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: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 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-composer {\n display: flex;\n align-items: flex-end;\n gap: 10px;\n padding: 12px 14px;\n border-top: 1px solid var(--sa-border);\n background: var(--sa-bg);\n flex-shrink: 0;\n }\n\n .sa-composer-input {\n flex: 1;\n min-height: 38px;\n max-height: 120px;\n padding: 9px 14px;\n border: 1px solid var(--sa-border);\n border-radius: 19px;\n background: var(--sa-surface);\n color: var(--sa-text);\n font-family: var(--sa-font);\n font-size: 14px;\n line-height: 1.5;\n resize: none;\n outline: none;\n transition: border-color 0.2s ease, background 0.2s ease;\n }\n\n .sa-composer-input::placeholder {\n color: #9ca3af;\n }\n\n .sa-composer-input:focus {\n border-color: var(--sa-primary);\n background: #ffffff;\n }\n\n .sa-composer-send,\n .sa-composer-stop {\n width: 38px;\n height: 38px;\n flex-shrink: 0;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #ffffff;\n font-size: 16px;\n transition: transform 0.15s ease, background 0.2s ease;\n }\n\n .sa-composer-send {\n background: var(--sa-primary);\n }\n\n .sa-composer-send:hover {\n background: var(--sa-primary-dark);\n transform: scale(1.05);\n }\n\n .sa-composer-send:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none;\n }\n\n .sa-composer-stop {\n background: #ef4444;\n }\n\n .sa-composer-stop:hover {\n background: #dc2626;\n transform: scale(1.05);\n }\n\n /* \u2500\u2500 Thread list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-list-overlay {\n position: absolute;\n inset: 0;\n background: rgba(0,0,0,0.3);\n z-index: 19;\n }\n\n .sa-thread-list {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n background: #ffffff;\n z-index: 20;\n box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);\n animation: sa-slide-in-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n .sa-thread-list-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 20px 16px;\n flex-shrink: 0;\n }\n\n .sa-thread-list-title {\n font-size: 17px;\n font-weight: 700;\n color: #18181b;\n letter-spacing: -0.2px;\n }\n\n .sa-thread-list-new {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n border: none;\n border-radius: 20px;\n background: #f4f4f5;\n color: #3f3f46;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .sa-thread-list-new:hover {\n background: #e4e4e7;\n }\n\n .sa-thread-list-items {\n flex: 1;\n overflow-y: auto;\n padding: 0 12px 12px;\n }\n\n .sa-thread-list-empty {\n padding: 48px 16px;\n text-align: center;\n color: var(--sa-text-muted);\n font-size: 14px;\n }\n\n .sa-thread-group-label {\n padding: 16px 8px 6px;\n font-size: 12px;\n font-weight: 500;\n color: #a1a1aa;\n }\n\n .sa-thread-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 10px 12px;\n margin: 2px 0;\n border-radius: 8px;\n color: #374151;\n font-size: 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .sa-thread-item:hover {\n background: #f9fafb;\n }\n\n .sa-thread-item.active {\n background: var(--sa-primary-light);\n color: var(--sa-primary-dark);\n font-weight: 500;\n }\n\n .sa-thread-item-title {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-thread-item-edit {\n width: 100%;\n padding: 4px 8px;\n border: 1px solid var(--sa-primary);\n border-radius: 6px;\n font-size: 13px;\n outline: none;\n background: var(--sa-bg);\n color: var(--sa-text);\n }\n\n .sa-thread-item-delete {\n border: none;\n background: transparent;\n color: var(--sa-text-muted);\n font-size: 14px;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.15s ease, color 0.15s ease;\n }\n\n .sa-thread-item:hover .sa-thread-item-delete {\n opacity: 1;\n }\n\n .sa-thread-item-delete:hover {\n color: #ef4444;\n }\n\n /* \u2500\u2500 Welcome \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-welcome {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 24px;\n text-align: center;\n }\n\n .sa-welcome-icon {\n font-size: 40px;\n margin-bottom: 12px;\n }\n\n .sa-welcome-message {\n margin-bottom: 20px;\n font-size: 14px;\n color: var(--sa-text-muted);\n line-height: 1.6;\n }\n\n .sa-welcome-prompts {\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 100%;\n }\n\n .sa-welcome-prompt {\n padding: 10px 16px;\n border: 1px solid var(--sa-border);\n border-radius: 999px;\n background: #ffffff;\n color: #374151;\n font-size: 13px;\n cursor: pointer;\n transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;\n }\n\n .sa-welcome-prompt:hover {\n border-color: var(--sa-primary);\n background: var(--sa-primary-light);\n color: var(--sa-primary-dark);\n }\n\n /* \u2500\u2500 Streaming cursor \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-streaming-cursor {\n display: inline-block;\n width: 2px;\n height: 1em;\n margin-left: 2px;\n background: var(--sa-primary);\n vertical-align: text-bottom;\n animation: sa-blink 1s steps(2, start) 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-resolved {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n border-radius: 8px;\n background: #ecfdf5;\n color: #065f46;\n font-size: 13px;\n margin: 6px 0;\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-slide-up {\n from {\n opacity: 0;\n transform: translateY(16px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n\n @keyframes sa-blink {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n }\n\n @keyframes sa-slide-in-left {\n from {\n opacity: 0;\n transform: translateX(-100%);\n }\n to {\n opacity: 1;\n transform: translateX(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: fixed;\n inset: 0;\n width: 100vw;\n height: 100vh;\n display: flex;\n background: #f7f7f8;\n z-index: var(--sa-z-index, 9999);\n }\n\n /* Sidebar */\n .sa-fp-sidebar {\n width: 260px;\n display: flex;\n flex-direction: column;\n background: #f2f2f3;\n flex-shrink: 0;\n transition: width 0.2s cubic-bezier(0.16,1,0.3,1);\n overflow: hidden;\n border-right: 1px solid #e8e8ea;\n }\n\n .sa-fp-sidebar-collapsed {\n width: 52px;\n align-items: center;\n padding-top: 12px;\n gap: 4px;\n border-right: 1px solid #e8e8ea;\n }\n\n .sa-fp-sidebar-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 12px 8px;\n flex-shrink: 0;\n }\n\n .sa-fp-sidebar-toggle {\n width: 32px;\n height: 32px;\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 flex-shrink: 0;\n }\n\n .sa-fp-sidebar-toggle:hover {\n background: #e4e4e7;\n color: #18181b;\n }\n\n .sa-fp-sidebar-new {\n flex: 1;\n padding: 7px 12px;\n border: 1px solid #d4d4d8;\n border-radius: 8px;\n background: #fff;\n color: #3f3f46;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: border-color 0.12s, box-shadow 0.12s;\n }\n\n .sa-fp-sidebar-new:hover {\n border-color: #a1a1aa;\n box-shadow: 0 1px 3px rgba(0,0,0,0.06);\n }\n\n .sa-fp-sidebar-new span {\n font-size: 13px;\n }\n\n .sa-fp-sidebar-list {\n flex: 1;\n overflow-y: auto;\n padding: 4px 8px 12px;\n }\n\n .sa-fp-sidebar-list::-webkit-scrollbar {\n width: 4px;\n }\n\n .sa-fp-sidebar-list::-webkit-scrollbar-thumb {\n background: rgba(0,0,0,0.08);\n border-radius: 2px;\n }\n\n .sa-fp-sidebar-list::-webkit-scrollbar-thumb:hover {\n background: rgba(0,0,0,0.15);\n }\n\n .sa-fp-sidebar-group {\n padding: 12px 8px 4px;\n font-size: 11px;\n font-weight: 500;\n color: #a1a1aa;\n letter-spacing: 0.3px;\n }\n\n .sa-fp-sidebar-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 10px;\n margin: 1px 0;\n border-radius: 8px;\n cursor: pointer;\n color: #3f3f46;\n font-size: 13px;\n line-height: 1.4;\n transition: background 0.1s;\n }\n\n .sa-fp-sidebar-item:hover {\n background: #e8e8ea;\n }\n\n .sa-fp-sidebar-item.active {\n background: #e4e4e7;\n color: #18181b;\n font-weight: 500;\n }\n\n .sa-fp-sidebar-item-title {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-fp-sidebar-item-action {\n width: 24px;\n height: 24px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: #a1a1aa;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: color 0.1s, background 0.1s;\n }\n\n .sa-fp-sidebar-item-action:hover {\n color: #71717a;\n background: rgba(0,0,0,0.05);\n }\n\n .sa-fp-sidebar-item-action.danger {\n color: #ef4444;\n }\n\n .sa-fp-sidebar-item-action.danger:hover {\n color: #dc2626;\n background: rgba(239,68,68,0.08);\n }\n\n .sa-fp-sidebar-empty {\n padding: 32px 12px;\n text-align: center;\n color: #a1a1aa;\n font-size: 13px;\n }\n\n /* Sidebar wrapper (for custom ThreadList slot) */\n .sa-fp-sidebar-wrapper {\n width: 260px;\n flex-shrink: 0;\n overflow: hidden;\n border-right: 1px solid #e8e8ea;\n background: #f2f2f3;\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 }\n\n /* Main area */\n .sa-fp-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n background: #fff;\n }\n\n .sa-fp-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n border-bottom: 1px solid #f0f0f0;\n background: #fff;\n flex-shrink: 0;\n min-height: 52px;\n }\n\n .sa-fp-header-title {\n flex: 1;\n font-size: 15px;\n font-weight: 500;\n color: #18181b;\n letter-spacing: -0.2px;\n }\n\n .sa-fp-header-actions {\n display: flex;\n gap: 4px;\n }\n\n .sa-fp-header-btn {\n min-width: 34px;\n height: 34px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: #71717a;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.12s, color 0.12s;\n }\n\n .sa-fp-header-btn:hover {\n background: #f4f4f5;\n color: #18181b;\n }\n\n /* Fullpage thread/composer override */\n .sa-fp-main .sa-thread {\n margin: 0 auto;\n width: 100%;\n padding: 24px 24px;\n }\n\n .sa-fp-main .sa-composer {\n margin: 0 auto;\n width: 100%;\n padding: 12px 24px 20px;\n border-top: none;\n background: transparent;\n }\n\n .sa-fp-main .sa-composer-input {\n background: #f7f7f8;\n border: 1px solid #e4e4e7;\n box-shadow: none;\n }\n\n .sa-fp-main .sa-composer-input:focus {\n background: #fff;\n border-color: #d4d4d8;\n box-shadow: 0 0 0 3px rgba(99,102,241,0.08);\n }\n\n /* \u2500\u2500 Artifact file cards (in ToolResultPart) \u2500\u2500 */\n .sa-artifact-file-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }\n .sa-artifact-file-card {\n display: flex; align-items: center; gap: 10px; padding: 8px 10px;\n border: 1px solid var(--sa-border); border-radius: 10px; background: var(--sa-surface);\n font-size: 13px; color: var(--sa-text);\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-artifact-file-card:hover { border-color: var(--sa-primary); background: #fff; box-shadow: 0 2px 8px rgba(99,102,241,0.1); transform: translateY(-1px); }\n .sa-artifact-file-card:active { transform: translateY(0) scale(0.99); }\n .sa-artifact-file-icon { flex-shrink: 0; }\n .sa-artifact-chip-type {\n display: inline-flex; align-items: center; justify-content: center;\n min-width: 36px; padding: 2px 6px; border-radius: 5px;\n background: var(--sa-primary); color: #fff;\n font-size: 10px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.4;\n }\n .sa-artifact-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }\n .sa-artifact-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }\n .sa-artifact-file-size { color: var(--sa-text-muted); font-size: 12px; }\n .sa-artifact-file-download {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex;\n transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;\n }\n .sa-artifact-file-download:hover { color: var(--sa-primary); background: rgba(99,102,241,0.08); }\n .sa-artifact-file-download:active { transform: scale(0.9); }\n\n /* \u2500\u2500 Inline HTML rendering (render_mode=html) \u2500\u2500 */\n .sa-tool-result-html { margin-top: 8px; border: 1px solid var(--sa-border); border-radius: 8px; overflow: hidden; }\n .sa-tool-result-html-iframe { width: 100%; min-height: 120px; max-height: 400px; border: none; background: #fff; }\n\n /* \u2500\u2500 Header artifact button \u2500\u2500 */\n .sa-header-btn-artifact {\n display: inline-flex; align-items: center; gap: 4px;\n padding: 4px 12px !important; border-radius: 8px;\n background: var(--sa-primary) !important; color: #fff !important;\n font-size: 12px; font-weight: 600;\n transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;\n box-shadow: 0 1px 4px rgba(99,102,241,0.25);\n }\n .sa-header-btn-artifact:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(99,102,241,0.3); }\n .sa-header-btn-artifact:active { transform: translateY(0) scale(0.97); }\n .sa-header-btn-artifact svg { stroke: #fff; }\n .sa-header-btn-artifact.sa-artifact-pulse { animation: sa-artifact-pulse 2s ease-in-out 3; }\n\n /* \u2500\u2500 Artifact drawer (right side panel) \u2500\u2500 */\n .sa-artifact-drawer {\n display: flex; flex-direction: column; min-width: 240px; max-width: 70%;\n border-left: 1px solid var(--sa-border); background: #fff; flex-shrink: 0; overflow: hidden;\n animation: sa-slide-in-right 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n position: relative;\n }\n .sa-artifact-drawer.sa-drawer-closing {\n animation: sa-slide-out-right 0.25s cubic-bezier(0.4, 0, 1, 1) both;\n }\n .sa-drawer-resize-handle {\n position: absolute; left: -3px; top: 0; bottom: 0; width: 6px;\n cursor: col-resize; z-index: 2;\n transition: background 0.15s ease;\n }\n .sa-drawer-resize-handle:hover, .sa-drawer-resize-handle:active {\n background: var(--sa-primary); opacity: 0.3; border-radius: 3px;\n }\n .sa-artifact-drawer-header {\n display: flex; align-items: center; gap: 8px; padding: 12px 14px;\n border-bottom: 1px solid var(--sa-border); font-weight: 600; font-size: 15px; color: var(--sa-text);\n background: var(--sa-surface);\n }\n .sa-artifact-drawer-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .sa-drawer-btn {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex; align-items: center;\n transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;\n }\n .sa-drawer-btn:hover { background: var(--sa-border); color: var(--sa-text); }\n .sa-drawer-btn:active { transform: scale(0.92); }\n .sa-drawer-btn-sm {\n border: 1px solid var(--sa-border); background: #fff; cursor: pointer; color: var(--sa-primary);\n padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;\n transition: background 0.15s ease, border-color 0.15s ease;\n }\n .sa-drawer-btn-sm:hover { background: var(--sa-surface); border-color: var(--sa-primary); }\n .sa-artifact-drawer-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }\n .sa-drawer-empty { padding: 48px 24px; text-align: center; color: var(--sa-text-muted); font-size: 14px; }\n .sa-drawer-file-list { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; }\n .sa-drawer-file-card {\n display: flex; align-items: center; gap: 10px; padding: 12px 14px;\n border: 1px solid var(--sa-border); border-radius: 10px; cursor: pointer; background: #fff;\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-drawer-file-card:nth-child(1) { animation-delay: 0s; }\n .sa-drawer-file-card:nth-child(2) { animation-delay: 0.04s; }\n .sa-drawer-file-card:nth-child(3) { animation-delay: 0.08s; }\n .sa-drawer-file-card:nth-child(4) { animation-delay: 0.12s; }\n .sa-drawer-file-card:nth-child(5) { animation-delay: 0.16s; }\n .sa-drawer-file-card:hover { border-color: var(--sa-primary); background: var(--sa-surface); box-shadow: 0 2px 8px rgba(99,102,241,0.08); transform: translateY(-1px); }\n .sa-drawer-file-card:active { transform: translateY(0) scale(0.98); }\n .sa-drawer-file-icon { flex-shrink: 0; }\n .sa-drawer-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }\n .sa-drawer-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 14px; color: var(--sa-text); }\n .sa-drawer-file-size { color: var(--sa-text-muted); font-size: 12px; }\n\n /* \u2500\u2500 Drawer preview \u2500\u2500 */\n .sa-drawer-preview-iframe { width: 100%; height: 100%; border: none; background: #fff; animation: sa-fade-in 0.3s ease both; }\n .sa-drawer-preview-loading {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n height: 100%; gap: 12px; color: var(--sa-text-muted); font-size: 14px;\n }\n .sa-drawer-preview-loading::before {\n content: ''; width: 28px; height: 28px; border-radius: 50%;\n border: 3px solid var(--sa-border); border-top-color: var(--sa-primary);\n animation: sa-spinner 0.7s linear infinite;\n }\n .sa-drawer-preview-error {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 14px; height: 100%; color: var(--sa-text-muted); font-size: 14px;\n animation: sa-fade-in 0.2s ease both;\n }\n\n /* \u2500\u2500 Drawer view transition \u2500\u2500 */\n .sa-drawer-view-enter { animation: sa-drawer-view-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }\n\n /* \u2500\u2500 Layout helpers for drawer alongside thread \u2500\u2500 */\n .sa-panel-content { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-panel-content .sa-thread { flex: 1; min-width: 120px; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n .sa-panel-content .sa-artifact-drawer { max-width: 60%; }\n .sa-fp-content-row { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-fp-content-row .sa-thread { flex: 1; min-width: 0; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n\n /* \u2500\u2500 Artifact keyframes \u2500\u2500 */\n @keyframes sa-slide-in-right {\n from { opacity: 0; transform: translateX(100%); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes sa-slide-out-right {\n from { opacity: 1; transform: translateX(0); }\n to { opacity: 0; transform: translateX(100%); }\n }\n @keyframes sa-fade-in-up {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes sa-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes sa-spinner {\n to { transform: rotate(360deg); }\n }\n @keyframes sa-artifact-pulse {\n 0%, 100% { box-shadow: 0 1px 4px rgba(99,102,241,0.25); }\n 50% { box-shadow: 0 2px 12px rgba(99,102,241,0.5); }\n }\n @keyframes sa-drawer-view-in {\n from { opacity: 0; transform: translateX(12px); }\n to { opacity: 1; transform: translateX(0); }\n }\n";
534
+ export declare const widgetStyles = "\n [data-super-agent-widget] {\n --sa-primary-dark: color-mix(in srgb, var(--sa-primary) 82%, #000);\n --sa-primary-light: color-mix(in srgb, var(--sa-primary) 10%, #fff);\n --sa-text: #1f2937;\n --sa-text-muted: #6b7280;\n --sa-text-light: #9ca3af;\n --sa-border: #e5e7eb;\n --sa-surface: #f9fafb;\n --sa-hover: #f3f4f6;\n\n font-family: var(--sa-font);\n color: var(--sa-text);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n }\n\n [data-super-agent-widget] *,\n [data-super-agent-widget] *::before,\n [data-super-agent-widget] *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n [data-super-agent-widget] button {\n font-family: inherit;\n }\n\n /* \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-trigger {\n position: fixed;\n bottom: 24px;\n right: 24px;\n width: 56px;\n height: 56px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n color: #ffffff;\n font-size: 24px;\n box-shadow: 0 8px 24px color-mix(in srgb, var(--sa-primary) 35%, transparent);\n z-index: var(--sa-z-index, 9999);\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n\n .sa-trigger:hover {\n transform: scale(1.08);\n box-shadow: 0 12px 32px color-mix(in srgb, var(--sa-primary) 45%, transparent);\n }\n\n .sa-trigger:active {\n transform: scale(0.94);\n }\n\n .sa-trigger-open {\n transform: rotate(90deg);\n }\n\n /* \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-panel {\n position: fixed;\n bottom: 96px;\n right: 24px;\n width: var(--sa-panel-width, 380px);\n height: var(--sa-panel-height, 520px);\n max-height: calc(100vh - 120px);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: var(--sa-bg);\n border: 1px solid var(--sa-border);\n border-radius: var(--sa-radius, 16px);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);\n z-index: var(--sa-z-index, 9999);\n animation: sa-slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n /* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-header {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 14px 16px;\n color: #ffffff;\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n flex-shrink: 0;\n }\n\n .sa-header-left {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n }\n\n .sa-header-avatar {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: rgba(255,255,255,0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 600;\n }\n\n .sa-header-info {\n display: flex;\n flex-direction: column;\n }\n\n .sa-header-status {\n font-size: 11px;\n opacity: 0.8;\n color: #a5f3a6;\n }\n\n .sa-header-actions {\n display: flex;\n gap: 4px;\n }\n\n .sa-header-title {\n flex: 1;\n font-size: 16px;\n font-weight: 600;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .sa-header-btn {\n width: 30px;\n height: 30px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: #ffffff;\n font-size: 16px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s ease;\n }\n\n .sa-header-btn:hover {\n background: rgba(255, 255, 255, 0.18);\n }\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: 14px;\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 .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 .sa-message-content {\n max-width: 78%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .sa-message-body {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .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-message-assistant .sa-message-body {\n padding: 10px 14px;\n border-radius: 16px;\n border-bottom-left-radius: 4px;\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-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 .sa-avatar {\n width: 28px;\n height: 28px;\n flex-shrink: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #ffffff;\n font-size: 12px;\n font-weight: 600;\n overflow: hidden;\n }\n\n .sa-avatar-assistant {\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n }\n\n .sa-avatar-user {\n background: linear-gradient(135deg, #64748b, #475569);\n }\n\n /* \u2500\u2500 Text part (markdown) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-text-part {\n font-size: 14px;\n line-height: 1.6;\n word-break: break-word;\n }\n\n .sa-text-part p {\n margin: 0 0 8px;\n }\n\n .sa-text-part p:last-child {\n margin-bottom: 0;\n }\n\n .sa-text-part strong {\n font-weight: 600;\n }\n\n .sa-text-part em {\n font-style: italic;\n }\n\n .sa-text-part h1,\n .sa-text-part h2,\n .sa-text-part h3,\n .sa-text-part h4,\n .sa-text-part h5,\n .sa-text-part h6 {\n margin: 12px 0 6px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .sa-text-part h1 {\n font-size: 1.4em;\n }\n\n .sa-text-part h2 {\n font-size: 1.25em;\n }\n\n .sa-text-part h3 {\n font-size: 1.1em;\n }\n\n .sa-text-part h4,\n .sa-text-part h5,\n .sa-text-part h6 {\n font-size: 1em;\n }\n\n .sa-text-part a {\n color: var(--sa-primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n\n .sa-text-part a:hover {\n color: var(--sa-primary-dark);\n }\n\n .sa-inline-code {\n padding: 2px 5px;\n border-radius: 4px;\n background: rgba(0, 0, 0, 0.06);\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 0.9em;\n }\n\n .sa-code-block {\n margin: 8px 0;\n padding: 12px 14px;\n border-radius: 10px;\n background: #1e293b;\n color: #e2e8f0;\n overflow-x: auto;\n font-size: 13px;\n line-height: 1.55;\n }\n\n .sa-code-block code {\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n white-space: pre;\n }\n\n .sa-list {\n margin: 6px 0;\n padding-left: 22px;\n }\n\n .sa-list li {\n margin: 3px 0;\n line-height: 1.5;\n }\n\n ul.sa-list {\n list-style: disc;\n }\n\n ol.sa-list {\n list-style: decimal;\n }\n\n /* \u2500\u2500 Thinking part \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-thinking-part {\n margin: 6px 0;\n padding: 8px 12px;\n border-left: 3px solid var(--sa-primary);\n border-radius: 8px;\n background: var(--sa-primary-light);\n cursor: pointer;\n font-size: 13px;\n }\n\n .sa-thinking-header {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--sa-primary-dark);\n font-weight: 500;\n user-select: none;\n }\n\n .sa-thinking-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-thinking-label {\n flex: 1;\n }\n\n .sa-thinking-arrow {\n font-size: 12px;\n transition: transform 0.2s ease;\n }\n\n .sa-thinking-arrow.expanded {\n transform: rotate(90deg);\n }\n\n .sa-thinking-content {\n margin-top: 8px;\n color: #4b5563;\n white-space: pre-wrap;\n line-height: 1.55;\n }\n\n /* \u2500\u2500 Tool call / result \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-tool-call-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-call-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n font-size: 13px;\n user-select: none;\n }\n\n .sa-tool-call-header:hover {\n background: var(--sa-surface);\n }\n\n .sa-tool-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-tool-name {\n flex: 1;\n color: #374151;\n font-weight: 500;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-tool-args {\n margin: 0;\n padding: 10px 12px;\n border-top: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n overflow-x: auto;\n }\n\n .sa-tool-result-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-result-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-bottom: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-size: 13px;\n font-weight: 500;\n }\n\n .sa-tool-result-content {\n max-height: 256px;\n overflow: auto;\n margin: 8px 0 0;\n padding: 10px 12px;\n color: #4b5563;\n font-size: 13px;\n line-height: 1.55;\n white-space: pre-wrap;\n word-break: break-word;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n background: #f9fafb;\n border-radius: 8px;\n }\n\n .sa-tool-result-actions {\n display: flex;\n gap: 8px;\n margin: 4px 0;\n }\n\n /* \u2500\u2500 Error part \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-error-part {\n margin: 6px 0;\n padding: 10px 12px;\n border: 1px solid #fecaca;\n border-radius: 10px;\n background: #fef2f2;\n color: #b91c1c;\n }\n\n .sa-error-content {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 13px;\n line-height: 1.5;\n }\n\n .sa-error-icon {\n font-size: 14px;\n line-height: 1.4;\n }\n\n .sa-error-retry {\n margin-top: 8px;\n padding: 6px 14px;\n border: none;\n border-radius: 8px;\n background: #ef4444;\n color: #ffffff;\n font-size: 13px;\n cursor: pointer;\n transition: background 0.2s ease;\n }\n\n .sa-error-retry:hover {\n background: #dc2626;\n }\n\n /* \u2500\u2500 Action bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-action-bar {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 6px;\n position: relative;\n }\n\n .sa-action-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n flex: none;\n white-space: nowrap;\n line-height: 1;\n padding: 4px 10px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--sa-text-muted);\n font-size: 12px;\n cursor: pointer;\n transition: color 0.15s ease, background 0.15s ease;\n }\n\n .sa-action-btn svg {\n display: block;\n flex: none;\n }\n\n .sa-action-btn:hover {\n color: var(--sa-text);\n background: rgba(0, 0, 0, 0.05);\n }\n\n .sa-action-btn-active {\n color: var(--sa-primary) !important;\n background: var(--sa-primary-light) !important;\n }\n\n .sa-action-divider {\n width: 1px;\n height: 16px;\n background: var(--sa-border);\n margin: 0 2px;\n align-self: center;\n }\n\n /* \u2500\u2500 Dislike Panel \u2500\u2500 */\n .sa-dislike-panel {\n position: absolute; top: 100%; left: 0; right: 0;\n margin-top: 6px; padding: 12px;\n background: #fff; border: 1px solid var(--sa-border); border-radius: 10px;\n box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n animation: sa-fade-in-up 0.2s cubic-bezier(0.16,1,0.3,1) both;\n z-index: 10;\n }\n .sa-dislike-panel-title { font-size: 13px; font-weight: 500; color: var(--sa-text); margin-bottom: 8px; }\n .sa-dislike-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }\n .sa-dislike-reason-btn {\n padding: 4px 10px; border: 1px solid var(--sa-border); border-radius: 6px;\n background: #fff; color: var(--sa-text); font-size: 12px; cursor: pointer;\n transition: border-color 0.15s, background 0.15s, color 0.15s;\n }\n .sa-dislike-reason-btn:hover { border-color: var(--sa-primary); color: var(--sa-primary); }\n .sa-dislike-reason-btn.active { background: var(--sa-primary); color: #fff; border-color: var(--sa-primary); }\n .sa-dislike-remark {\n width: 100%; padding: 8px 10px; border: 1px solid var(--sa-border); border-radius: 8px;\n font-size: 13px; color: var(--sa-text); resize: none; outline: none;\n transition: border-color 0.15s;\n }\n .sa-dislike-remark:focus { border-color: var(--sa-primary); }\n .sa-dislike-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }\n .sa-dislike-submit {\n padding: 5px 14px; border: none; border-radius: 6px;\n background: var(--sa-primary); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer;\n transition: opacity 0.15s;\n }\n .sa-dislike-submit:hover { opacity: 0.9; }\n .sa-dislike-cancel {\n padding: 5px 14px; border: 1px solid var(--sa-border); border-radius: 6px;\n background: #fff; color: var(--sa-text-muted); font-size: 13px; cursor: pointer;\n transition: background 0.15s;\n }\n .sa-dislike-cancel:hover { background: var(--sa-surface); }\n\n /* \u2500\u2500 Composer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-composer {\n position: relative;\n display: flex;\n align-items: flex-end;\n gap: 10px;\n padding: 12px 14px;\n border-top: 1px solid var(--sa-border);\n background: var(--sa-bg);\n flex-shrink: 0;\n }\n\n .sa-composer-input {\n flex: 1;\n min-height: 38px;\n max-height: 120px;\n padding: 9px 14px;\n border: 1px solid var(--sa-border);\n border-radius: 19px;\n background: var(--sa-surface);\n color: var(--sa-text);\n font-family: var(--sa-font);\n font-size: 14px;\n line-height: 1.5;\n resize: none;\n outline: none;\n transition: border-color 0.2s ease, background 0.2s ease;\n }\n\n .sa-composer-input::placeholder {\n color: #9ca3af;\n }\n\n .sa-composer-input:focus {\n border-color: var(--sa-primary);\n background: #ffffff;\n }\n\n .sa-composer-send,\n .sa-composer-stop {\n width: 38px;\n height: 38px;\n flex-shrink: 0;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #ffffff;\n font-size: 16px;\n transition: transform 0.15s ease, background 0.2s ease;\n }\n\n .sa-composer-send {\n background: var(--sa-primary);\n }\n\n .sa-composer-send:hover {\n background: var(--sa-primary-dark);\n transform: scale(1.05);\n }\n\n .sa-composer-send:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none;\n }\n\n .sa-composer-stop {\n background: #ef4444;\n }\n\n .sa-composer-stop:hover {\n background: #dc2626;\n transform: scale(1.05);\n }\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 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-list-overlay {\n position: absolute;\n inset: 0;\n background: rgba(0,0,0,0.3);\n z-index: 19;\n }\n\n .sa-thread-list {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n background: #ffffff;\n z-index: 20;\n box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);\n animation: sa-slide-in-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n .sa-thread-list-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 20px 16px;\n flex-shrink: 0;\n }\n\n .sa-thread-list-title {\n font-size: 17px;\n font-weight: 700;\n color: #18181b;\n letter-spacing: -0.2px;\n }\n\n .sa-thread-list-new {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n border: none;\n border-radius: 20px;\n background: #f4f4f5;\n color: #3f3f46;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .sa-thread-list-new:hover {\n background: #e4e4e7;\n }\n\n .sa-thread-list-items {\n flex: 1;\n overflow-y: auto;\n padding: 0 12px 12px;\n }\n\n .sa-thread-list-empty {\n padding: 48px 16px;\n text-align: center;\n color: var(--sa-text-muted);\n font-size: 14px;\n }\n\n .sa-thread-list-loading {\n padding: 12px 16px;\n text-align: center;\n color: #9ca3af;\n font-size: 13px;\n }\n\n .sa-thread-list-hint {\n padding: 8px 16px 12px;\n text-align: center;\n color: #d1d5db;\n font-size: 12px;\n }\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 .sa-thread-group-label {\n padding: 16px 8px 6px;\n font-size: 12px;\n font-weight: 500;\n color: #a1a1aa;\n }\n\n .sa-thread-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 10px 12px;\n margin: 2px 0;\n border-radius: 8px;\n color: #374151;\n font-size: 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .sa-thread-item:hover {\n background: #f9fafb;\n }\n\n .sa-thread-item.active {\n background: var(--sa-primary-light);\n color: var(--sa-primary-dark);\n font-weight: 500;\n }\n\n .sa-thread-item-info {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .sa-thread-item-title {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-thread-item-time {\n font-size: 11px;\n color: var(--sa-text-light);\n white-space: nowrap;\n }\n\n .sa-thread-item-edit {\n width: 100%;\n padding: 4px 8px;\n border: 1px solid var(--sa-primary);\n border-radius: 6px;\n font-size: 13px;\n outline: none;\n background: var(--sa-bg);\n color: var(--sa-text);\n }\n\n /* \u64CD\u4F5C\u6309\u94AE\u7EC4\uFF1A\u59CB\u7EC8\u5360\u4F4D\uFF08visibility \u63A7\u5236\uFF09\uFF0Chover \u65F6\u663E\u793A\uFF0C\u9AD8\u5EA6\u4E0D\u53D8 */\n .sa-thread-item-actions {\n display: flex;\n gap: 2px;\n flex-shrink: 0;\n visibility: hidden;\n }\n\n .sa-thread-item:hover .sa-thread-item-actions {\n visibility: visible;\n }\n\n .sa-thread-item-action-btn {\n border: none;\n background: transparent;\n color: var(--sa-text-muted);\n cursor: pointer;\n padding: 2px;\n border-radius: 4px;\n display: inline-flex;\n align-items: center;\n transition: color 0.15s ease, background 0.15s ease;\n }\n\n .sa-thread-item-action-btn:hover {\n color: var(--sa-primary);\n background: rgba(99,102,241,0.08);\n }\n\n /* \u2500\u2500 Welcome \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-welcome {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 24px;\n text-align: center;\n }\n\n .sa-welcome-icon {\n font-size: 40px;\n margin-bottom: 12px;\n }\n\n .sa-welcome-message {\n margin-bottom: 20px;\n font-size: 14px;\n color: var(--sa-text-muted);\n line-height: 1.6;\n }\n\n .sa-welcome-prompts {\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 100%;\n }\n\n .sa-welcome-prompt {\n padding: 10px 16px;\n border: 1px solid var(--sa-border);\n border-radius: 999px;\n background: #ffffff;\n color: #374151;\n font-size: 13px;\n cursor: pointer;\n transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;\n }\n\n .sa-welcome-prompt:hover {\n border-color: var(--sa-primary);\n background: var(--sa-primary-light);\n color: var(--sa-primary-dark);\n }\n\n /* \u2500\u2500 Streaming cursor \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-streaming-cursor {\n display: inline-block;\n width: 2px;\n height: 1em;\n margin-left: 2px;\n background: var(--sa-primary);\n vertical-align: text-bottom;\n animation: sa-blink 1s steps(2, start) 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-slide-up {\n from {\n opacity: 0;\n transform: translateY(16px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n\n @keyframes sa-blink {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n }\n\n @keyframes sa-slide-in-left {\n from {\n opacity: 0;\n transform: translateX(-100%);\n }\n to {\n opacity: 1;\n transform: translateX(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 */\n .sa-fp-sidebar {\n width: 260px;\n display: flex;\n flex-direction: column;\n background: var(--sa-surface, #ffffff);\n flex-shrink: 0;\n transition: width 0.2s cubic-bezier(0.16,1,0.3,1);\n overflow: hidden;\n border-right: 1px solid #e8e8ea;\n }\n\n .sa-fp-sidebar-collapsed {\n width: 52px;\n align-items: center;\n padding-top: 12px;\n gap: 4px;\n border-right: 1px solid #e8e8ea;\n }\n\n .sa-fp-sidebar-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 12px 8px;\n flex-shrink: 0;\n }\n\n .sa-fp-sidebar-toggle {\n width: 32px;\n height: 32px;\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 flex-shrink: 0;\n }\n\n .sa-fp-sidebar-toggle:hover {\n background: #e4e4e7;\n color: #18181b;\n }\n\n .sa-fp-sidebar-new {\n flex: 1;\n padding: 7px 12px;\n border: 1px solid #d4d4d8;\n border-radius: 8px;\n background: #fff;\n color: #3f3f46;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: border-color 0.12s, box-shadow 0.12s;\n }\n\n .sa-fp-sidebar-new:hover {\n border-color: #a1a1aa;\n box-shadow: 0 1px 3px rgba(0,0,0,0.06);\n }\n\n .sa-fp-sidebar-new span {\n font-size: 13px;\n }\n\n .sa-fp-sidebar-list {\n flex: 1;\n overflow-y: auto;\n padding: 4px 8px 12px;\n }\n\n .sa-fp-sidebar-list::-webkit-scrollbar {\n width: 4px;\n }\n\n .sa-fp-sidebar-list::-webkit-scrollbar-thumb {\n background: rgba(0,0,0,0.08);\n border-radius: 2px;\n }\n\n .sa-fp-sidebar-list::-webkit-scrollbar-thumb:hover {\n background: rgba(0,0,0,0.15);\n }\n\n .sa-fp-sidebar-group {\n padding: 12px 8px 4px;\n font-size: 11px;\n font-weight: 500;\n color: #a1a1aa;\n letter-spacing: 0.3px;\n }\n\n .sa-fp-sidebar-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 10px;\n margin: 1px 0;\n border-radius: 8px;\n cursor: pointer;\n color: #3f3f46;\n font-size: 13px;\n line-height: 1.4;\n transition: background 0.1s;\n }\n\n .sa-fp-sidebar-item:hover {\n background: #e8e8ea;\n }\n\n .sa-fp-sidebar-item.active {\n background: #e4e4e7;\n color: #18181b;\n font-weight: 500;\n }\n\n .sa-fp-sidebar-item-title {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-fp-sidebar-item-edit {\n flex: 1;\n min-width: 0;\n padding: 2px 6px;\n border: 1px solid var(--sa-primary, #6366f1);\n border-radius: 4px;\n font-size: 13px;\n color: #27272a;\n background: #fff;\n outline: none;\n }\n\n .sa-fp-sidebar-item-actions {\n display: flex;\n gap: 2px;\n flex-shrink: 0;\n visibility: hidden;\n }\n\n .sa-fp-sidebar-item-actions.visible {\n visibility: visible;\n }\n\n .sa-fp-sidebar-item-action {\n width: 24px;\n height: 24px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: #a1a1aa;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: color 0.1s, background 0.1s;\n }\n\n .sa-fp-sidebar-item-action:hover {\n color: #71717a;\n background: rgba(0,0,0,0.05);\n }\n\n .sa-fp-sidebar-item-action.danger {\n color: #ef4444;\n }\n\n .sa-fp-sidebar-item-action.danger:hover {\n color: #dc2626;\n background: rgba(239,68,68,0.08);\n }\n\n .sa-fp-sidebar-empty {\n padding: 32px 12px;\n text-align: center;\n color: #a1a1aa;\n font-size: 13px;\n }\n\n /* Sidebar wrapper (for custom ThreadList slot) */\n .sa-fp-sidebar-wrapper {\n width: 260px;\n flex-shrink: 0;\n overflow: hidden;\n border-right: 1px solid #e8e8ea;\n background: #f2f2f3;\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 }\n\n /* Main area */\n .sa-fp-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n background: #fff;\n }\n\n .sa-fp-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n border-bottom: 1px solid #f0f0f0;\n background: #fff;\n flex-shrink: 0;\n min-height: 52px;\n }\n\n .sa-fp-header-title {\n flex: 1;\n font-size: 15px;\n font-weight: 500;\n color: #18181b;\n letter-spacing: -0.2px;\n }\n\n .sa-fp-header-actions {\n display: flex;\n gap: 4px;\n }\n\n .sa-fp-header-btn {\n min-width: 34px;\n height: 34px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: #71717a;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.12s, color 0.12s;\n }\n\n .sa-fp-header-btn:hover {\n background: #f4f4f5;\n color: #18181b;\n }\n\n /* Fullpage thread/composer override */\n .sa-fp-main .sa-thread {\n margin: 0 auto;\n width: 100%;\n padding: 24px 24px;\n }\n\n .sa-fp-main .sa-composer {\n margin: 0 auto;\n width: 100%;\n padding: 12px 24px 20px;\n border-top: none;\n background: transparent;\n }\n\n .sa-fp-main .sa-composer-input {\n background: #f7f7f8;\n border: 1px solid #e4e4e7;\n box-shadow: none;\n }\n\n .sa-fp-main .sa-composer-input:focus {\n background: #fff;\n border-color: #d4d4d8;\n box-shadow: 0 0 0 3px rgba(99,102,241,0.08);\n }\n\n /* \u2500\u2500 Artifact file cards (in ToolResultPart) \u2500\u2500 */\n .sa-artifact-file-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }\n .sa-artifact-file-card {\n display: flex; align-items: center; gap: 10px; padding: 8px 10px;\n border: 1px solid var(--sa-border); border-radius: 10px; background: var(--sa-surface);\n font-size: 13px; color: var(--sa-text);\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-artifact-file-card:hover { border-color: var(--sa-primary); background: #fff; box-shadow: 0 2px 8px rgba(99,102,241,0.1); transform: translateY(-1px); }\n .sa-artifact-file-card:active { transform: translateY(0) scale(0.99); }\n .sa-artifact-file-icon { flex-shrink: 0; }\n .sa-artifact-chip-type {\n display: inline-flex; align-items: center; justify-content: center;\n min-width: 36px; padding: 2px 6px; border-radius: 5px;\n background: var(--sa-primary); color: #fff;\n font-size: 10px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.4;\n }\n .sa-artifact-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }\n .sa-artifact-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }\n .sa-artifact-file-size { color: var(--sa-text-muted); font-size: 12px; }\n .sa-artifact-file-download {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex;\n transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;\n }\n .sa-artifact-file-download:hover { color: var(--sa-primary); background: rgba(99,102,241,0.08); }\n .sa-artifact-file-download:active { transform: scale(0.9); }\n\n /* \u2500\u2500 Inline HTML rendering (render_mode=html) \u2500\u2500 */\n /* HTML \u5DE5\u5177\u7ED3\u679C\uFF1A\u5916\u5C42\u6EDA\u52A8\u5BB9\u5668 + \u5185\u5C42\u5185\u5BB9\u5C42\uFF08\u4E0E Playground \u4E00\u81F4\uFF0C\u65E0 iframe\uFF09 */\n .sa-tool-result-html-scroll { margin-top: 8px; max-height: 60vh; overflow: auto; border: 1px solid var(--sa-border); border-radius: 8px; }\n .sa-tool-result-html { padding: 12px; background: #fff; min-width: 100%; width: max-content; }\n\n /* \u2500\u2500 Header artifact button \u2500\u2500 */\n .sa-header-btn-artifact {\n display: inline-flex; align-items: center; gap: 4px;\n padding: 4px 12px !important; border-radius: 8px;\n background: var(--sa-primary) !important; color: #fff !important;\n font-size: 12px; font-weight: 600;\n transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;\n box-shadow: 0 1px 4px rgba(99,102,241,0.25);\n }\n .sa-header-btn-artifact:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(99,102,241,0.3); }\n .sa-header-btn-artifact:active { transform: translateY(0) scale(0.97); }\n .sa-header-btn-artifact svg { stroke: #fff; }\n .sa-header-btn-artifact.sa-artifact-pulse { animation: sa-artifact-pulse 2s ease-in-out 3; }\n\n /* \u2500\u2500 Artifact drawer (right side panel) \u2500\u2500 */\n .sa-artifact-drawer {\n display: flex; flex-direction: column; min-width: 240px; max-width: 70%;\n border-left: 1px solid var(--sa-border); background: #fff; flex-shrink: 0; overflow: hidden;\n animation: sa-slide-in-right 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n position: relative;\n }\n .sa-artifact-drawer.sa-drawer-closing {\n animation: sa-slide-out-right 0.25s cubic-bezier(0.4, 0, 1, 1) both;\n }\n .sa-drawer-resize-handle {\n position: absolute; left: -3px; top: 0; bottom: 0; width: 6px;\n cursor: col-resize; z-index: 2;\n transition: background 0.15s ease;\n }\n .sa-drawer-resize-handle:hover, .sa-drawer-resize-handle:active {\n background: var(--sa-primary); opacity: 0.3; border-radius: 3px;\n }\n .sa-artifact-drawer-header {\n display: flex; align-items: center; gap: 8px; padding: 12px 14px;\n border-bottom: 1px solid var(--sa-border); font-weight: 600; font-size: 15px; color: var(--sa-text);\n background: var(--sa-surface);\n }\n .sa-artifact-drawer-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .sa-drawer-btn {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex; align-items: center;\n transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;\n }\n .sa-drawer-btn:hover { background: var(--sa-border); color: var(--sa-text); }\n .sa-drawer-btn:active { transform: scale(0.92); }\n .sa-drawer-btn-sm {\n border: 1px solid var(--sa-border); background: #fff; cursor: pointer; color: var(--sa-primary);\n padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;\n transition: background 0.15s ease, border-color 0.15s ease;\n }\n .sa-drawer-btn-sm:hover { background: var(--sa-surface); border-color: var(--sa-primary); }\n .sa-artifact-drawer-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }\n .sa-drawer-empty { padding: 48px 24px; text-align: center; color: var(--sa-text-muted); font-size: 14px; }\n .sa-drawer-file-list { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; }\n .sa-drawer-file-card {\n display: flex; align-items: center; gap: 10px; padding: 12px 14px;\n border: 1px solid var(--sa-border); border-radius: 10px; cursor: pointer; background: #fff;\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-drawer-file-card:nth-child(1) { animation-delay: 0s; }\n .sa-drawer-file-card:nth-child(2) { animation-delay: 0.04s; }\n .sa-drawer-file-card:nth-child(3) { animation-delay: 0.08s; }\n .sa-drawer-file-card:nth-child(4) { animation-delay: 0.12s; }\n .sa-drawer-file-card:nth-child(5) { animation-delay: 0.16s; }\n .sa-drawer-file-card:hover { border-color: var(--sa-primary); background: var(--sa-surface); box-shadow: 0 2px 8px rgba(99,102,241,0.08); transform: translateY(-1px); }\n .sa-drawer-file-card:active { transform: translateY(0) scale(0.98); }\n .sa-drawer-file-icon { flex-shrink: 0; }\n .sa-drawer-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }\n .sa-drawer-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 14px; color: var(--sa-text); }\n .sa-drawer-file-size { color: var(--sa-text-muted); font-size: 12px; }\n\n /* \u2500\u2500 Drawer preview \u2500\u2500 */\n .sa-drawer-preview-iframe { width: 100%; height: 100%; border: none; background: #fff; animation: sa-fade-in 0.3s ease both; }\n .sa-drawer-preview-loading {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n height: 100%; gap: 12px; color: var(--sa-text-muted); font-size: 14px;\n }\n .sa-drawer-preview-loading::before {\n content: ''; width: 28px; height: 28px; border-radius: 50%;\n border: 3px solid var(--sa-border); border-top-color: var(--sa-primary);\n animation: sa-spinner 0.7s linear infinite;\n }\n .sa-drawer-preview-error {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 14px; height: 100%; color: var(--sa-text-muted); font-size: 14px;\n animation: sa-fade-in 0.2s ease both;\n }\n\n /* \u2500\u2500 Drawer view transition \u2500\u2500 */\n .sa-drawer-view-enter { animation: sa-drawer-view-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }\n\n /* \u2500\u2500 Layout helpers for drawer alongside thread \u2500\u2500 */\n .sa-panel-content { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-panel-content .sa-thread { flex: 1; min-width: 120px; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n .sa-panel-content .sa-artifact-drawer { max-width: 60%; }\n .sa-fp-content-row { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-fp-content-row .sa-thread { flex: 1; min-width: 0; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n\n /* \u2500\u2500 Artifact keyframes \u2500\u2500 */\n @keyframes sa-slide-in-right {\n from { opacity: 0; transform: translateX(100%); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes sa-slide-out-right {\n from { opacity: 1; transform: translateX(0); }\n to { opacity: 0; transform: translateX(100%); }\n }\n @keyframes sa-fade-in-up {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes sa-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes sa-spinner {\n to { transform: rotate(360deg); }\n }\n @keyframes sa-artifact-pulse {\n 0%, 100% { box-shadow: 0 1px 4px rgba(99,102,241,0.25); }\n 50% { box-shadow: 0 2px 12px rgba(99,102,241,0.5); }\n }\n @keyframes sa-drawer-view-in {\n from { opacity: 0; transform: translateX(12px); }\n to { opacity: 1; transform: translateX(0); }\n }\n";
496
535
 
497
536
  export { }