super-agent-sdk 1.0.4 → 1.0.6

package/dist/widget.d.ts

@@ -3,7 +3,7 @@ import { default as default_2 } from 'react';
 import { JSX as JSX_2 } from 'react';
 import { RefObject } from 'react';
 
-export declare function ActionBar({ message, onCopy, onRegenerate, onFeedback }: ActionBarProps): JSX_2.Element | null;
+export declare function ActionBar({ message, onCopy, onRegenerate }: ActionBarProps): JSX_2.Element | null;
 
 export declare interface ActionBarProps {
     message: UIMessage;
@@ -12,6 +12,22 @@ export declare interface ActionBarProps {
     onFeedback?: (messageId: string, feedback: 'like' | 'dislike') => void;
 }
 
+/** 通用产物（INTERFACE 约定：type + data，适配 table/chart/file/text/image/html/custom） */
+export declare interface Artifact {
+    type: string;
+    data: Record<string, any>;
+}
+
+export declare interface ArtifactFile {
+    id: string;
+    type: "html" | "pdf" | "docx" | string;
+    filename: string;
+    url: string;
+    mime?: string;
+    size?: number;
+    summary?: string;
+}
+
 export declare interface AvatarConfig {
     /** Assistant avatar: URL string, emoji, or React node */
     assistant?: string;
@@ -26,7 +42,11 @@ declare interface ChatEvent {
     toolCallId?: string;
     args?: string;
     sessionId?: string;
+    messageId?: string;
     interrupt?: InterruptEvent;
+    artifacts?: Artifact[];
+    renderMode?: string;
+    html?: string;
 }
 
 declare interface ChatOptions {
@@ -38,6 +58,7 @@ declare interface ChatOptions {
     onDone?: (result: {
         sessionId: string;
         content: string;
+        messageId?: string;
     }) => void;
     signal?: AbortSignal;
 }
@@ -57,6 +78,9 @@ export declare interface ChatState {
     conversations: Conversation[];
     activeConversationId: string | null;
     isThreadListOpen: boolean;
+    isArtifactDrawerOpen: boolean;
+    allArtifacts: ArtifactFile[];
+    activePreviewArtifact: ArtifactFile | null;
     sendMessage: (content: string) => void;
     stop: () => void;
     regenerate: () => void;
@@ -65,7 +89,13 @@ export declare interface ChatState {
     deleteConversation: (sessionId: string) => void;
     renameConversation: (sessionId: string, title: string) => void;
     toggleThreadList: () => void;
-    feedback: (messageId: string, feedback: 'like' | 'dislike') => void;
+    toggleArtifactDrawer: () => void;
+    openArtifactPreview: (artifact: ArtifactFile) => void;
+    feedback: (messageId: string, feedback: 'like' | 'dislike', options?: {
+        reason?: number;
+        remark?: string;
+    }) => void;
+    cancelFeedback: (messageId: string) => void;
     respondToInterrupt: (interruptId: string, response: InterruptResponse) => void;
 }
 
@@ -123,7 +153,7 @@ declare interface FormField {
     options?: string[];
 }
 
-export declare function FullpageLayout({ title, slots, welcomeMessage, suggestedPrompts, sidebarDefaultOpen, onClose, avatar }: FullpageLayoutProps): default_2.JSX.Element;
+export declare function FullpageLayout({ title, slots, welcomeMessage, suggestedPrompts, sidebarDefaultOpen, onClose, avatar, artifactPreview }: FullpageLayoutProps): default_2.JSX.Element;
 
 declare interface FullpageLayoutProps {
     title: string;
@@ -133,9 +163,10 @@ declare interface FullpageLayoutProps {
     sidebarDefaultOpen?: boolean;
     onClose?: () => void;
     avatar?: AvatarConfig;
+    artifactPreview?: boolean;
 }
 
-export declare function Header({ title, onClose, onToggleThreadList, showClose }: InternalHeaderProps): JSX_2.Element;
+export declare function Header({ title, onClose, onToggleThreadList, showClose, artifactCount, onToggleArtifactDrawer }: InternalHeaderProps): JSX_2.Element;
 
 export declare interface HeaderProps {
     title: string;
@@ -158,6 +189,8 @@ declare interface InternalHeaderProps {
     onClose: () => void;
     onToggleThreadList: () => void;
     showClose?: boolean;
+    artifactCount?: number;
+    onToggleArtifactDrawer?: () => void;
 }
 
 declare interface InternalMessageProps {
@@ -166,6 +199,7 @@ declare interface InternalMessageProps {
     isLast: boolean;
     slots: Slots;
     avatar?: AvatarConfig;
+    artifactPreview?: boolean;
 }
 
 export declare function InterruptCard({ interrupt, resolved, response, onRespond }: InterruptCardProps): JSX_2.Element;
@@ -203,7 +237,7 @@ declare interface InterruptResponse {
     value?: any;
 }
 
-declare type InterruptType = 'confirm' | 'select' | 'multiSelect' | 'input' | 'form';
+declare type InterruptType = 'confirm' | 'select' | 'multiSelect' | 'input' | 'form' | 'approve';
 
 declare interface ListConversationsParams {
     page?: number;
@@ -215,7 +249,7 @@ declare interface ListConversationsResult {
     total: number;
 }
 
-export declare function Message({ message, isStreaming, isLast, slots, avatar }: InternalMessageProps): JSX_2.Element;
+export declare function Message({ message, isStreaming, isLast, slots, avatar, artifactPreview }: InternalMessageProps): JSX_2.Element;
 
 declare type MessagePart = {
     type: "text";
@@ -233,6 +267,9 @@ declare type MessagePart = {
     toolName: string;
     toolCallId: string;
     content: string;
+    artifacts?: Artifact[];
+    renderMode?: string;
+    html?: string;
 } | {
     type: "error";
     content: string;
@@ -267,6 +304,7 @@ export declare interface MountOptions {
     title?: string;
     sidebarDefaultOpen?: boolean;
     avatar?: AvatarConfig;
+    artifactPreview?: boolean;
 }
 
 export declare interface Slots {
@@ -286,7 +324,7 @@ export declare interface Slots {
 }
 
 declare interface SuperAgentSDK {
-    /** 获取 token（调用 POST /api/token），自动设置内部凭证 */
+    /** 获取 token（调用 POST {tokenGateway}/v1/token），自动设置内部凭证 */
     getToken(): Promise<string>;
     /** 创建新会话，返回 sessionId */
     createSession(): Promise<string>;
@@ -295,11 +333,16 @@ declare interface SuperAgentSDK {
     renameConversation(sessionId: string, title: string): Promise<void>;
     deleteConversation(sessionId: string): Promise<void>;
     getMessages(sessionId: string): Promise<UIMessage[]>;
-    /** 响应中断事件 */
-    respondInterrupt(interruptId: string, sessionId: string, response: InterruptResponse): Promise<void>;
+    /** 响应中断事件（返回 SSE 流，后端继续推送后续事件） */
+    respondInterrupt(interruptId: string, sessionId: string, response: InterruptResponse, onMessage?: (event: ChatEvent) => void, onError?: (error: Error) => void): Promise<void>;
     setToken(token: string): void;
-    feedback(messageId: string, type: "like" | "dislike"): void;
-    onFeedback?: (messageId: string, type: "like" | "dislike") => void;
+    /** 消息反馈（赞/踩），POST /chat/messages/{messageId}/feedback */
+    feedback(messageId: string, type: "like" | "dislike", options?: {
+        reason?: number;
+        remark?: string;
+    }): Promise<void>;
+    /** 取消消息反馈，DELETE /chat/messages/{messageId}/feedback */
+    cancelFeedback(messageId: string): Promise<void>;
 }
 
 export declare function TextPart({ content }: TextPartProps): default_2.JSX.Element;
@@ -327,7 +370,7 @@ export declare interface ThinkingPartProps {
     content: string;
 }
 
-export declare function Thread({ slots, welcomeMessage, suggestedPrompts, avatar }: ThreadProps): JSX_2.Element;
+export declare function Thread({ slots, welcomeMessage, suggestedPrompts, avatar, artifactPreview }: ThreadProps): JSX_2.Element;
 
 export declare function ThreadList(): JSX_2.Element | null;
 
@@ -345,6 +388,7 @@ declare interface ThreadProps {
     welcomeMessage?: string;
     suggestedPrompts?: string[];
     avatar?: AvatarConfig;
+    artifactPreview?: boolean;
 }
 
 export declare function ToolCallPart({ toolName, toolCallId, args }: ToolCallPartProps): JSX_2.Element;
@@ -355,12 +399,16 @@ export declare interface ToolCallPartProps {
     args: string;
 }
 
-export declare function ToolResultPart({ toolName, toolCallId, content }: ToolResultPartProps): JSX_2.Element;
+export declare function ToolResultPart({ toolName, content, artifacts, renderMode, html, artifactPreview }: ToolResultPartProps): default_2.JSX.Element;
 
 export declare interface ToolResultPartProps {
     toolName: string;
     toolCallId: string;
     content: string;
+    artifacts?: Artifact[];
+    renderMode?: string;
+    html?: string;
+    artifactPreview?: boolean;
 }
 
 export declare function Trigger({ isOpen, onClick }: TriggerProps): JSX_2.Element;
@@ -444,6 +492,6 @@ export declare interface WidgetInstance {
 
 export declare type WidgetMode = 'floating' | 'fullpage';
 
-export declare const widgetStyles = "\n  [data-super-agent-widget] {\n    --sa-primary-dark: color-mix(in srgb, var(--sa-primary) 82%, #000);\n    --sa-primary-light: color-mix(in srgb, var(--sa-primary) 10%, #fff);\n    --sa-text: #1f2937;\n    --sa-text-muted: #6b7280;\n    --sa-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";
+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";
 
 export { }