super-agent-sdk 1.0.2 → 1.0.4

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 +160 -54
  2. package/dist/index.cjs +4 -4
  3. package/dist/index.d.ts +53 -10
  4. package/dist/index.mjs +202 -172
  5. package/dist/widget.cjs +228 -29
  6. package/dist/widget.d.ts +65 -10
  7. package/dist/widget.mjs +1132 -667
  8. package/package.json +1 -1
package/dist/widget.d.ts CHANGED
@@ -20,12 +20,13 @@ export declare interface AvatarConfig {
20
20
  }
21
21
 
22
22
  declare interface ChatEvent {
23
- type: "user" | "thinking" | "ai" | "tool_call" | "tool_result" | "done" | "error";
23
+ type: "user" | "thinking" | "ai" | "tool_call" | "tool_result" | "done" | "error" | "interrupt";
24
24
  content: string;
25
25
  toolName?: string;
26
26
  toolCallId?: string;
27
27
  args?: string;
28
28
  sessionId?: string;
29
+ interrupt?: InterruptEvent;
29
30
  }
30
31
 
31
32
  declare interface ChatOptions {
@@ -65,6 +66,7 @@ export declare interface ChatState {
65
66
  renameConversation: (sessionId: string, title: string) => void;
66
67
  toggleThreadList: () => void;
67
68
  feedback: (messageId: string, feedback: 'like' | 'dislike') => void;
69
+ respondToInterrupt: (interruptId: string, response: InterruptResponse) => void;
68
70
  }
69
71
 
70
72
  export declare type ChatStatus = 'ready' | 'submitted' | 'streaming' | 'error';
@@ -111,6 +113,16 @@ export declare interface EventHooks {
111
113
  onConversationChange?: (sessionId: string) => void;
112
114
  }
113
115
 
116
+ declare interface FormField {
117
+ name: string;
118
+ label: string;
119
+ type: 'text' | 'number' | 'password' | 'textarea' | 'select' | 'date';
120
+ required?: boolean;
121
+ placeholder?: string;
122
+ defaultValue?: any;
123
+ options?: string[];
124
+ }
125
+
114
126
  export declare function FullpageLayout({ title, slots, welcomeMessage, suggestedPrompts, sidebarDefaultOpen, onClose, avatar }: FullpageLayoutProps): default_2.JSX.Element;
115
127
 
116
128
  declare interface FullpageLayoutProps {
@@ -156,6 +168,43 @@ declare interface InternalMessageProps {
156
168
  avatar?: AvatarConfig;
157
169
  }
158
170
 
171
+ export declare function InterruptCard({ interrupt, resolved, response, onRespond }: InterruptCardProps): JSX_2.Element;
172
+
173
+ export declare interface InterruptCardProps {
174
+ interrupt: InterruptEvent;
175
+ resolved: boolean;
176
+ response?: InterruptResponse;
177
+ onRespond: (response: InterruptResponse) => void;
178
+ }
179
+
180
+ declare interface InterruptEvent {
181
+ interruptId: string;
182
+ interruptType: InterruptType;
183
+ content: string;
184
+ options?: (string | InterruptOption)[];
185
+ placeholder?: string;
186
+ inputType?: 'text' | 'number' | 'password' | 'textarea';
187
+ maxLength?: number;
188
+ required?: boolean;
189
+ fields?: FormField[];
190
+ metadata?: Record<string, any>;
191
+ }
192
+
193
+ declare interface InterruptOption {
194
+ value: string;
195
+ label: string;
196
+ description?: string;
197
+ icon?: string;
198
+ danger?: boolean;
199
+ }
200
+
201
+ declare interface InterruptResponse {
202
+ action: string;
203
+ value?: any;
204
+ }
205
+
206
+ declare type InterruptType = 'confirm' | 'select' | 'multiSelect' | 'input' | 'form';
207
+
159
208
  declare interface ListConversationsParams {
160
209
  page?: number;
161
210
  size?: number;
@@ -187,6 +236,11 @@ declare type MessagePart = {
187
236
  } | {
188
237
  type: "error";
189
238
  content: string;
239
+ } | {
240
+ type: "interrupt";
241
+ interrupt: InterruptEvent;
242
+ resolved?: boolean;
243
+ response?: InterruptResponse;
190
244
  };
191
245
 
192
246
  export declare interface MessageProps {
@@ -227,15 +281,13 @@ export declare interface Slots {
227
281
  ToolCallPart?: ComponentType<ToolCallPartProps>;
228
282
  ToolResultPart?: ComponentType<ToolResultPartProps>;
229
283
  ErrorPart?: ComponentType<ErrorPartProps>;
284
+ InterruptCard?: ComponentType<InterruptCardProps>;
230
285
  WelcomeScreen?: ComponentType<WelcomeScreenProps>;
231
286
  }
232
287
 
233
288
  declare interface SuperAgentSDK {
234
- /** 获取 token（调用 POST /token），自动设置内部凭证 */
235
- getToken(): Promise<{
236
- appId: string;
237
- token: string;
238
- }>;
289
+ /** 获取 token（调用 POST /api/token），自动设置内部凭证 */
290
+ getToken(): Promise<string>;
239
291
  /** 创建新会话，返回 sessionId */
240
292
  createSession(): Promise<string>;
241
293
  chat(options: ChatOptions): AbortController;
@@ -243,9 +295,11 @@ declare interface SuperAgentSDK {
243
295
  renameConversation(sessionId: string, title: string): Promise<void>;
244
296
  deleteConversation(sessionId: string): Promise<void>;
245
297
  getMessages(sessionId: string): Promise<UIMessage[]>;
246
- setToken(appId: string, token: string): void;
247
- feedback(sessionId: string, type: "like" | "dislike"): void;
248
- onFeedback?: (sessionId: string, type: "like" | "dislike") => void;
298
+ /** 响应中断事件 */
299
+ respondInterrupt(interruptId: string, sessionId: string, response: InterruptResponse): Promise<void>;
300
+ setToken(token: string): void;
301
+ feedback(messageId: string, type: "like" | "dislike"): void;
302
+ onFeedback?: (messageId: string, type: "like" | "dislike") => void;
249
303
  }
250
304
 
251
305
  export declare function TextPart({ content }: TextPartProps): default_2.JSX.Element;
@@ -351,6 +405,7 @@ declare interface UseChatReturn {
351
405
  stop: () => void;
352
406
  regenerate: () => void;
353
407
  setMessages: (messages: UIMessage[]) => void;
408
+ respondToInterrupt: (interruptId: string, response: InterruptResponse) => void;
354
409
  }
355
410
 
356
411
  export declare function useConversations(options: UseConversationsOptions): UseConversationsReturn;
@@ -389,6 +444,6 @@ export declare interface WidgetInstance {
389
444
 
390
445
  export declare type WidgetMode = 'floating' | 'fullpage';
391
446
 
392
- 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 }\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 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 gap: 10px;\n padding: 14px 16px;\n border-bottom: 1px solid var(--sa-border);\n flex-shrink: 0;\n }\n\n .sa-thread-list-items {\n flex: 1;\n overflow-y: auto;\n }\n\n .sa-thread-list-empty {\n padding: 24px 16px;\n text-align: center;\n color: var(--sa-text-muted);\n font-size: 13px;\n }\n\n .sa-thread-list-new {\n display: block;\n width: calc(100% - 24px);\n margin: 12px;\n padding: 10px;\n border: 1px dashed var(--sa-border);\n border-radius: 10px;\n background: transparent;\n color: var(--sa-primary);\n font-size: 14px;\n cursor: pointer;\n text-align: center;\n transition: background 0.15s, border-color 0.15s;\n }\n\n .sa-thread-list-new:hover {\n background: var(--sa-primary-light);\n border-color: var(--sa-primary);\n }\n\n .sa-thread-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 12px 16px;\n border-bottom: 1px solid #f3f4f6;\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: var(--sa-surface);\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 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 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";
447
+ 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 }\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 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-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 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";
393
448
 
394
449
  export { }