super-agent-sdk 1.0.5 → 1.0.6
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.
- package/README.md +22 -24
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +2 -1
- package/dist/widget.cjs +6 -6
- package/dist/widget.d.ts +2 -2
- package/dist/widget.mjs +499 -489
- package/package.json +4 -3
package/dist/widget.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { default as default_2 } from 'react';
|
|
|
3
3
|
import { JSX as JSX_2 } from 'react';
|
|
4
4
|
import { RefObject } from 'react';
|
|
5
5
|
|
|
6
|
-
export declare function ActionBar({ message, onCopy, onRegenerate
|
|
6
|
+
export declare function ActionBar({ message, onCopy, onRegenerate }: ActionBarProps): JSX_2.Element | null;
|
|
7
7
|
|
|
8
8
|
export declare interface ActionBarProps {
|
|
9
9
|
message: UIMessage;
|
|
@@ -492,6 +492,6 @@ export declare interface WidgetInstance {
|
|
|
492
492
|
|
|
493
493
|
export declare type WidgetMode = 'floating' | 'fullpage';
|
|
494
494
|
|
|
495
|
-
export declare const widgetStyles = "\n [data-super-agent-widget] {\n --sa-primary-dark: color-mix(in srgb, var(--sa-primary) 82%, #000);\n --sa-primary-light: color-mix(in srgb, var(--sa-primary) 10%, #fff);\n --sa-text: #1f2937;\n --sa-text-muted: #6b7280;\n --sa-border: #e5e7eb;\n --sa-surface: #f9fafb;\n\n font-family: var(--sa-font);\n color: var(--sa-text);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n }\n\n [data-super-agent-widget] *,\n [data-super-agent-widget] *::before,\n [data-super-agent-widget] *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n [data-super-agent-widget] button {\n font-family: inherit;\n }\n\n /* \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-trigger {\n position: fixed;\n bottom: 24px;\n right: 24px;\n width: 56px;\n height: 56px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n color: #ffffff;\n font-size: 24px;\n box-shadow: 0 8px 24px color-mix(in srgb, var(--sa-primary) 35%, transparent);\n z-index: var(--sa-z-index, 9999);\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n\n .sa-trigger:hover {\n transform: scale(1.08);\n box-shadow: 0 12px 32px color-mix(in srgb, var(--sa-primary) 45%, transparent);\n }\n\n .sa-trigger:active {\n transform: scale(0.94);\n }\n\n .sa-trigger-open {\n transform: rotate(90deg);\n }\n\n /* \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-panel {\n position: fixed;\n bottom: 96px;\n right: 24px;\n width: var(--sa-panel-width, 380px);\n height: var(--sa-panel-height, 520px);\n max-height: calc(100vh - 120px);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: var(--sa-bg);\n border: 1px solid var(--sa-border);\n border-radius: var(--sa-radius, 16px);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);\n z-index: var(--sa-z-index, 9999);\n animation: sa-slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n /* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-header {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 14px 16px;\n color: #ffffff;\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n flex-shrink: 0;\n }\n\n .sa-header-left {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n }\n\n .sa-header-avatar {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: rgba(255,255,255,0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 600;\n }\n\n .sa-header-info {\n display: flex;\n flex-direction: column;\n }\n\n .sa-header-status {\n font-size: 11px;\n opacity: 0.8;\n color: #a5f3a6;\n }\n\n .sa-header-actions {\n display: flex;\n gap: 4px;\n }\n\n .sa-header-title {\n flex: 1;\n font-size: 16px;\n font-weight: 600;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .sa-header-btn {\n width: 30px;\n height: 30px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: #ffffff;\n font-size: 16px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s ease;\n }\n\n .sa-header-btn:hover {\n background: rgba(255, 255, 255, 0.18);\n }\n\n /* \u2500\u2500 Thread / messages \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-thread {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 14px;\n overflow-y: auto;\n padding: 16px;\n background: var(--sa-surface);\n scroll-behavior: smooth;\n }\n\n .sa-thread::-webkit-scrollbar {\n width: 6px;\n }\n\n .sa-thread::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.14);\n border-radius: 3px;\n }\n\n .sa-thread::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.24);\n }\n\n .sa-message {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n width: 100%;\n }\n\n .sa-message-user {\n justify-content: flex-end;\n }\n\n .sa-message-body {\n max-width: 78%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .sa-message-user .sa-message-body {\n padding: 10px 14px;\n border-radius: 16px;\n border-bottom-right-radius: 4px;\n background: var(--sa-primary);\n color: #ffffff;\n font-size: 14px;\n line-height: 1.55;\n word-break: break-word;\n }\n\n .sa-message-assistant .sa-message-body {\n padding: 10px 14px;\n border-radius: 16px;\n border-bottom-left-radius: 4px;\n background: #ffffff;\n color: var(--sa-text);\n font-size: 14px;\n line-height: 1.55;\n word-break: break-word;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n }\n\n .sa-avatar {\n width: 28px;\n height: 28px;\n flex-shrink: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #ffffff;\n font-size: 12px;\n font-weight: 600;\n overflow: hidden;\n }\n\n .sa-avatar-assistant {\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n }\n\n .sa-avatar-user {\n background: linear-gradient(135deg, #64748b, #475569);\n }\n\n /* \u2500\u2500 Text part (markdown) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-text-part {\n font-size: 14px;\n line-height: 1.6;\n word-break: break-word;\n }\n\n .sa-text-part p {\n margin: 0 0 8px;\n }\n\n .sa-text-part p:last-child {\n margin-bottom: 0;\n }\n\n .sa-text-part strong {\n font-weight: 600;\n }\n\n .sa-text-part em {\n font-style: italic;\n }\n\n .sa-text-part h1,\n .sa-text-part h2,\n .sa-text-part h3,\n .sa-text-part h4,\n .sa-text-part h5,\n .sa-text-part h6 {\n margin: 12px 0 6px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .sa-text-part h1 {\n font-size: 1.4em;\n }\n\n .sa-text-part h2 {\n font-size: 1.25em;\n }\n\n .sa-text-part h3 {\n font-size: 1.1em;\n }\n\n .sa-text-part h4,\n .sa-text-part h5,\n .sa-text-part h6 {\n font-size: 1em;\n }\n\n .sa-text-part a {\n color: var(--sa-primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n\n .sa-text-part a:hover {\n color: var(--sa-primary-dark);\n }\n\n .sa-inline-code {\n padding: 2px 5px;\n border-radius: 4px;\n background: rgba(0, 0, 0, 0.06);\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 0.9em;\n }\n\n .sa-code-block {\n margin: 8px 0;\n padding: 12px 14px;\n border-radius: 10px;\n background: #1e293b;\n color: #e2e8f0;\n overflow-x: auto;\n font-size: 13px;\n line-height: 1.55;\n }\n\n .sa-code-block code {\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n white-space: pre;\n }\n\n .sa-list {\n margin: 6px 0;\n padding-left: 22px;\n }\n\n .sa-list li {\n margin: 3px 0;\n line-height: 1.5;\n }\n\n ul.sa-list {\n list-style: disc;\n }\n\n ol.sa-list {\n list-style: decimal;\n }\n\n /* \u2500\u2500 Thinking part \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-thinking-part {\n margin: 6px 0;\n padding: 8px 12px;\n border-left: 3px solid var(--sa-primary);\n border-radius: 8px;\n background: var(--sa-primary-light);\n cursor: pointer;\n font-size: 13px;\n }\n\n .sa-thinking-header {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--sa-primary-dark);\n font-weight: 500;\n user-select: none;\n }\n\n .sa-thinking-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-thinking-label {\n flex: 1;\n }\n\n .sa-thinking-arrow {\n font-size: 12px;\n transition: transform 0.2s ease;\n }\n\n .sa-thinking-arrow.expanded {\n transform: rotate(90deg);\n }\n\n .sa-thinking-content {\n margin-top: 8px;\n color: #4b5563;\n white-space: pre-wrap;\n line-height: 1.55;\n }\n\n /* \u2500\u2500 Tool call / result \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-tool-call-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-call-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n font-size: 13px;\n user-select: none;\n }\n\n .sa-tool-call-header:hover {\n background: var(--sa-surface);\n }\n\n .sa-tool-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-tool-name {\n flex: 1;\n color: #374151;\n font-weight: 500;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-tool-args {\n margin: 0;\n padding: 10px 12px;\n border-top: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n overflow-x: auto;\n }\n\n .sa-tool-result-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-result-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-bottom: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-size: 13px;\n font-weight: 500;\n }\n\n .sa-tool-result-content {\n padding: 10px 12px;\n color: #4b5563;\n font-size: 13px;\n line-height: 1.55;\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n /* \u2500\u2500 Error part \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-error-part {\n margin: 6px 0;\n padding: 10px 12px;\n border: 1px solid #fecaca;\n border-radius: 10px;\n background: #fef2f2;\n color: #b91c1c;\n }\n\n .sa-error-content {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 13px;\n line-height: 1.5;\n }\n\n .sa-error-icon {\n font-size: 14px;\n line-height: 1.4;\n }\n\n .sa-error-retry {\n margin-top: 8px;\n padding: 6px 14px;\n border: none;\n border-radius: 8px;\n background: #ef4444;\n color: #ffffff;\n font-size: 13px;\n cursor: pointer;\n transition: background 0.2s ease;\n }\n\n .sa-error-retry:hover {\n background: #dc2626;\n }\n\n /* \u2500\u2500 Action bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-action-bar {\n display: flex;\n gap: 6px;\n margin-top: 6px;\n position: relative;\n }\n\n .sa-action-btn {\n padding: 4px 10px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--sa-text-muted);\n font-size: 12px;\n cursor: pointer;\n transition: color 0.15s ease, background 0.15s ease;\n }\n\n .sa-action-btn:hover {\n color: var(--sa-text);\n background: rgba(0, 0, 0, 0.05);\n }\n\n .sa-action-btn-active {\n color: var(--sa-primary) !important;\n background: var(--sa-primary-light) !important;\n }\n\n .sa-action-divider {\n width: 1px;\n height: 16px;\n background: var(--sa-border);\n margin: 0 2px;\n align-self: center;\n }\n\n /* \u2500\u2500 Dislike Panel \u2500\u2500 */\n .sa-dislike-panel {\n position: absolute; bottom: 100%; left: 0; right: 0;\n margin-bottom: 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";
|
|
495
|
+
export declare const widgetStyles = "\n [data-super-agent-widget] {\n --sa-primary-dark: color-mix(in srgb, var(--sa-primary) 82%, #000);\n --sa-primary-light: color-mix(in srgb, var(--sa-primary) 10%, #fff);\n --sa-text: #1f2937;\n --sa-text-muted: #6b7280;\n --sa-border: #e5e7eb;\n --sa-surface: #f9fafb;\n\n font-family: var(--sa-font);\n color: var(--sa-text);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n }\n\n [data-super-agent-widget] *,\n [data-super-agent-widget] *::before,\n [data-super-agent-widget] *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n [data-super-agent-widget] button {\n font-family: inherit;\n }\n\n /* \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-trigger {\n position: fixed;\n bottom: 24px;\n right: 24px;\n width: 56px;\n height: 56px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n color: #ffffff;\n font-size: 24px;\n box-shadow: 0 8px 24px color-mix(in srgb, var(--sa-primary) 35%, transparent);\n z-index: var(--sa-z-index, 9999);\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n\n .sa-trigger:hover {\n transform: scale(1.08);\n box-shadow: 0 12px 32px color-mix(in srgb, var(--sa-primary) 45%, transparent);\n }\n\n .sa-trigger:active {\n transform: scale(0.94);\n }\n\n .sa-trigger-open {\n transform: rotate(90deg);\n }\n\n /* \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-panel {\n position: fixed;\n bottom: 96px;\n right: 24px;\n width: var(--sa-panel-width, 380px);\n height: var(--sa-panel-height, 520px);\n max-height: calc(100vh - 120px);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: var(--sa-bg);\n border: 1px solid var(--sa-border);\n border-radius: var(--sa-radius, 16px);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);\n z-index: var(--sa-z-index, 9999);\n animation: sa-slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n /* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-header {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 14px 16px;\n color: #ffffff;\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n flex-shrink: 0;\n }\n\n .sa-header-left {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n }\n\n .sa-header-avatar {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: rgba(255,255,255,0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 600;\n }\n\n .sa-header-info {\n display: flex;\n flex-direction: column;\n }\n\n .sa-header-status {\n font-size: 11px;\n opacity: 0.8;\n color: #a5f3a6;\n }\n\n .sa-header-actions {\n display: flex;\n gap: 4px;\n }\n\n .sa-header-title {\n flex: 1;\n font-size: 16px;\n font-weight: 600;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .sa-header-btn {\n width: 30px;\n height: 30px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: #ffffff;\n font-size: 16px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s ease;\n }\n\n .sa-header-btn:hover {\n background: rgba(255, 255, 255, 0.18);\n }\n\n /* \u2500\u2500 Thread / messages \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-thread {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 14px;\n overflow-y: auto;\n padding: 16px;\n background: var(--sa-surface);\n scroll-behavior: smooth;\n }\n\n .sa-thread::-webkit-scrollbar {\n width: 6px;\n }\n\n .sa-thread::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.14);\n border-radius: 3px;\n }\n\n .sa-thread::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.24);\n }\n\n .sa-message {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n width: 100%;\n }\n\n .sa-message-user {\n justify-content: flex-end;\n }\n\n .sa-message-body {\n max-width: 78%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .sa-message-user .sa-message-body {\n padding: 10px 14px;\n border-radius: 16px;\n border-bottom-right-radius: 4px;\n background: var(--sa-primary);\n color: #ffffff;\n font-size: 14px;\n line-height: 1.55;\n word-break: break-word;\n }\n\n .sa-message-assistant .sa-message-body {\n padding: 10px 14px;\n border-radius: 16px;\n border-bottom-left-radius: 4px;\n background: #ffffff;\n color: var(--sa-text);\n font-size: 14px;\n line-height: 1.55;\n word-break: break-word;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n }\n\n .sa-avatar {\n width: 28px;\n height: 28px;\n flex-shrink: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #ffffff;\n font-size: 12px;\n font-weight: 600;\n overflow: hidden;\n }\n\n .sa-avatar-assistant {\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n }\n\n .sa-avatar-user {\n background: linear-gradient(135deg, #64748b, #475569);\n }\n\n /* \u2500\u2500 Text part (markdown) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-text-part {\n font-size: 14px;\n line-height: 1.6;\n word-break: break-word;\n }\n\n .sa-text-part p {\n margin: 0 0 8px;\n }\n\n .sa-text-part p:last-child {\n margin-bottom: 0;\n }\n\n .sa-text-part strong {\n font-weight: 600;\n }\n\n .sa-text-part em {\n font-style: italic;\n }\n\n .sa-text-part h1,\n .sa-text-part h2,\n .sa-text-part h3,\n .sa-text-part h4,\n .sa-text-part h5,\n .sa-text-part h6 {\n margin: 12px 0 6px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .sa-text-part h1 {\n font-size: 1.4em;\n }\n\n .sa-text-part h2 {\n font-size: 1.25em;\n }\n\n .sa-text-part h3 {\n font-size: 1.1em;\n }\n\n .sa-text-part h4,\n .sa-text-part h5,\n .sa-text-part h6 {\n font-size: 1em;\n }\n\n .sa-text-part a {\n color: var(--sa-primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n\n .sa-text-part a:hover {\n color: var(--sa-primary-dark);\n }\n\n .sa-inline-code {\n padding: 2px 5px;\n border-radius: 4px;\n background: rgba(0, 0, 0, 0.06);\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 0.9em;\n }\n\n .sa-code-block {\n margin: 8px 0;\n padding: 12px 14px;\n border-radius: 10px;\n background: #1e293b;\n color: #e2e8f0;\n overflow-x: auto;\n font-size: 13px;\n line-height: 1.55;\n }\n\n .sa-code-block code {\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n white-space: pre;\n }\n\n .sa-list {\n margin: 6px 0;\n padding-left: 22px;\n }\n\n .sa-list li {\n margin: 3px 0;\n line-height: 1.5;\n }\n\n ul.sa-list {\n list-style: disc;\n }\n\n ol.sa-list {\n list-style: decimal;\n }\n\n /* \u2500\u2500 Thinking part \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-thinking-part {\n margin: 6px 0;\n padding: 8px 12px;\n border-left: 3px solid var(--sa-primary);\n border-radius: 8px;\n background: var(--sa-primary-light);\n cursor: pointer;\n font-size: 13px;\n }\n\n .sa-thinking-header {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--sa-primary-dark);\n font-weight: 500;\n user-select: none;\n }\n\n .sa-thinking-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-thinking-label {\n flex: 1;\n }\n\n .sa-thinking-arrow {\n font-size: 12px;\n transition: transform 0.2s ease;\n }\n\n .sa-thinking-arrow.expanded {\n transform: rotate(90deg);\n }\n\n .sa-thinking-content {\n margin-top: 8px;\n color: #4b5563;\n white-space: pre-wrap;\n line-height: 1.55;\n }\n\n /* \u2500\u2500 Tool call / result \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-tool-call-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-call-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n font-size: 13px;\n user-select: none;\n }\n\n .sa-tool-call-header:hover {\n background: var(--sa-surface);\n }\n\n .sa-tool-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-tool-name {\n flex: 1;\n color: #374151;\n font-weight: 500;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-tool-args {\n margin: 0;\n padding: 10px 12px;\n border-top: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n overflow-x: auto;\n }\n\n .sa-tool-result-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-result-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-bottom: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-size: 13px;\n font-weight: 500;\n }\n\n .sa-tool-result-content {\n padding: 10px 12px;\n color: #4b5563;\n font-size: 13px;\n line-height: 1.55;\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n /* \u2500\u2500 Error part \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-error-part {\n margin: 6px 0;\n padding: 10px 12px;\n border: 1px solid #fecaca;\n border-radius: 10px;\n background: #fef2f2;\n color: #b91c1c;\n }\n\n .sa-error-content {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 13px;\n line-height: 1.5;\n }\n\n .sa-error-icon {\n font-size: 14px;\n line-height: 1.4;\n }\n\n .sa-error-retry {\n margin-top: 8px;\n padding: 6px 14px;\n border: none;\n border-radius: 8px;\n background: #ef4444;\n color: #ffffff;\n font-size: 13px;\n cursor: pointer;\n transition: background 0.2s ease;\n }\n\n .sa-error-retry:hover {\n background: #dc2626;\n }\n\n /* \u2500\u2500 Action bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-action-bar {\n display: flex;\n gap: 6px;\n margin-top: 6px;\n position: relative;\n }\n\n .sa-action-btn {\n padding: 4px 10px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--sa-text-muted);\n font-size: 12px;\n cursor: pointer;\n transition: color 0.15s ease, background 0.15s ease;\n }\n\n .sa-action-btn:hover {\n color: var(--sa-text);\n background: rgba(0, 0, 0, 0.05);\n }\n\n .sa-action-btn-active {\n color: var(--sa-primary) !important;\n background: var(--sa-primary-light) !important;\n }\n\n .sa-action-divider {\n width: 1px;\n height: 16px;\n background: var(--sa-border);\n margin: 0 2px;\n align-self: center;\n }\n\n /* \u2500\u2500 Dislike Panel \u2500\u2500 */\n .sa-dislike-panel {\n position: absolute; top: 100%; left: 0; right: 0;\n margin-top: 6px; padding: 12px;\n background: #fff; border: 1px solid var(--sa-border); border-radius: 10px;\n box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n animation: sa-fade-in-up 0.2s cubic-bezier(0.16,1,0.3,1) both;\n z-index: 10;\n }\n .sa-dislike-panel-title { font-size: 13px; font-weight: 500; color: var(--sa-text); margin-bottom: 8px; }\n .sa-dislike-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }\n .sa-dislike-reason-btn {\n padding: 4px 10px; border: 1px solid var(--sa-border); border-radius: 6px;\n background: #fff; color: var(--sa-text); font-size: 12px; cursor: pointer;\n transition: border-color 0.15s, background 0.15s, color 0.15s;\n }\n .sa-dislike-reason-btn:hover { border-color: var(--sa-primary); color: var(--sa-primary); }\n .sa-dislike-reason-btn.active { background: var(--sa-primary); color: #fff; border-color: var(--sa-primary); }\n .sa-dislike-remark {\n width: 100%; padding: 8px 10px; border: 1px solid var(--sa-border); border-radius: 8px;\n font-size: 13px; color: var(--sa-text); resize: none; outline: none;\n transition: border-color 0.15s;\n }\n .sa-dislike-remark:focus { border-color: var(--sa-primary); }\n .sa-dislike-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }\n .sa-dislike-submit {\n padding: 5px 14px; border: none; border-radius: 6px;\n background: var(--sa-primary); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer;\n transition: opacity 0.15s;\n }\n .sa-dislike-submit:hover { opacity: 0.9; }\n .sa-dislike-cancel {\n padding: 5px 14px; border: 1px solid var(--sa-border); border-radius: 6px;\n background: #fff; color: var(--sa-text-muted); font-size: 13px; cursor: pointer;\n transition: background 0.15s;\n }\n .sa-dislike-cancel:hover { background: var(--sa-surface); }\n\n /* \u2500\u2500 Composer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-composer {\n display: flex;\n align-items: flex-end;\n gap: 10px;\n padding: 12px 14px;\n border-top: 1px solid var(--sa-border);\n background: var(--sa-bg);\n flex-shrink: 0;\n }\n\n .sa-composer-input {\n flex: 1;\n min-height: 38px;\n max-height: 120px;\n padding: 9px 14px;\n border: 1px solid var(--sa-border);\n border-radius: 19px;\n background: var(--sa-surface);\n color: var(--sa-text);\n font-family: var(--sa-font);\n font-size: 14px;\n line-height: 1.5;\n resize: none;\n outline: none;\n transition: border-color 0.2s ease, background 0.2s ease;\n }\n\n .sa-composer-input::placeholder {\n color: #9ca3af;\n }\n\n .sa-composer-input:focus {\n border-color: var(--sa-primary);\n background: #ffffff;\n }\n\n .sa-composer-send,\n .sa-composer-stop {\n width: 38px;\n height: 38px;\n flex-shrink: 0;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #ffffff;\n font-size: 16px;\n transition: transform 0.15s ease, background 0.2s ease;\n }\n\n .sa-composer-send {\n background: var(--sa-primary);\n }\n\n .sa-composer-send:hover {\n background: var(--sa-primary-dark);\n transform: scale(1.05);\n }\n\n .sa-composer-send:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none;\n }\n\n .sa-composer-stop {\n background: #ef4444;\n }\n\n .sa-composer-stop:hover {\n background: #dc2626;\n transform: scale(1.05);\n }\n\n /* \u2500\u2500 Thread list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-thread-list-overlay {\n position: absolute;\n inset: 0;\n background: rgba(0,0,0,0.3);\n z-index: 19;\n }\n\n .sa-thread-list {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n background: #ffffff;\n z-index: 20;\n box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);\n animation: sa-slide-in-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n .sa-thread-list-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 20px 16px;\n flex-shrink: 0;\n }\n\n .sa-thread-list-title {\n font-size: 17px;\n font-weight: 700;\n color: #18181b;\n letter-spacing: -0.2px;\n }\n\n .sa-thread-list-new {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n border: none;\n border-radius: 20px;\n background: #f4f4f5;\n color: #3f3f46;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .sa-thread-list-new:hover {\n background: #e4e4e7;\n }\n\n .sa-thread-list-items {\n flex: 1;\n overflow-y: auto;\n padding: 0 12px 12px;\n }\n\n .sa-thread-list-empty {\n padding: 48px 16px;\n text-align: center;\n color: var(--sa-text-muted);\n font-size: 14px;\n }\n\n .sa-thread-group-label {\n padding: 16px 8px 6px;\n font-size: 12px;\n font-weight: 500;\n color: #a1a1aa;\n }\n\n .sa-thread-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 10px 12px;\n margin: 2px 0;\n border-radius: 8px;\n color: #374151;\n font-size: 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .sa-thread-item:hover {\n background: #f9fafb;\n }\n\n .sa-thread-item.active {\n background: var(--sa-primary-light);\n color: var(--sa-primary-dark);\n font-weight: 500;\n }\n\n .sa-thread-item-title {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-thread-item-edit {\n width: 100%;\n padding: 4px 8px;\n border: 1px solid var(--sa-primary);\n border-radius: 6px;\n font-size: 13px;\n outline: none;\n background: var(--sa-bg);\n color: var(--sa-text);\n }\n\n .sa-thread-item-delete {\n border: none;\n background: transparent;\n color: var(--sa-text-muted);\n font-size: 14px;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.15s ease, color 0.15s ease;\n }\n\n .sa-thread-item:hover .sa-thread-item-delete {\n opacity: 1;\n }\n\n .sa-thread-item-delete:hover {\n color: #ef4444;\n }\n\n /* \u2500\u2500 Welcome \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-welcome {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 24px;\n text-align: center;\n }\n\n .sa-welcome-icon {\n font-size: 40px;\n margin-bottom: 12px;\n }\n\n .sa-welcome-message {\n margin-bottom: 20px;\n font-size: 14px;\n color: var(--sa-text-muted);\n line-height: 1.6;\n }\n\n .sa-welcome-prompts {\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 100%;\n }\n\n .sa-welcome-prompt {\n padding: 10px 16px;\n border: 1px solid var(--sa-border);\n border-radius: 999px;\n background: #ffffff;\n color: #374151;\n font-size: 13px;\n cursor: pointer;\n transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;\n }\n\n .sa-welcome-prompt:hover {\n border-color: var(--sa-primary);\n background: var(--sa-primary-light);\n color: var(--sa-primary-dark);\n }\n\n /* \u2500\u2500 Streaming cursor \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-streaming-cursor {\n display: inline-block;\n width: 2px;\n height: 1em;\n margin-left: 2px;\n background: var(--sa-primary);\n vertical-align: text-bottom;\n animation: sa-blink 1s steps(2, start) infinite;\n }\n\n /* \u2500\u2500 Interrupt cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-interrupt-card {\n margin: 8px 0;\n padding: 14px;\n border: 1px solid #e0e7ff;\n border-radius: 10px;\n background: #f8faff;\n }\n\n .sa-interrupt-content {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 13px;\n line-height: 1.6;\n color: var(--sa-text);\n margin-bottom: 12px;\n }\n\n .sa-interrupt-actions {\n display: flex;\n gap: 8px;\n margin-top: 10px;\n }\n\n .sa-interrupt-btn {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 14px;\n border: none;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s, opacity 0.15s;\n }\n\n .sa-interrupt-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .sa-interrupt-btn-primary {\n background: var(--sa-primary);\n color: #fff;\n }\n\n .sa-interrupt-btn-primary:hover:not(:disabled) {\n opacity: 0.9;\n }\n\n .sa-interrupt-btn-secondary {\n background: #f3f4f6;\n color: #374151;\n }\n\n .sa-interrupt-btn-secondary:hover:not(:disabled) {\n background: #e5e7eb;\n }\n\n .sa-interrupt-btn-danger {\n background: #fef2f2;\n color: #dc2626;\n }\n\n .sa-interrupt-btn-danger:hover:not(:disabled) {\n background: #fee2e2;\n }\n\n .sa-interrupt-options {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .sa-interrupt-option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n background: #fff;\n color: var(--sa-text);\n font-size: 13px;\n cursor: pointer;\n text-align: left;\n transition: border-color 0.12s, background 0.12s;\n }\n\n .sa-interrupt-option:hover {\n border-color: var(--sa-primary);\n background: #f5f3ff;\n }\n\n .sa-interrupt-option-selected {\n border-color: var(--sa-primary);\n background: #ede9fe;\n color: var(--sa-primary);\n font-weight: 500;\n }\n\n .sa-interrupt-option-danger {\n color: #ef4444;\n }\n\n .sa-interrupt-option-danger:hover {\n border-color: #ef4444;\n background: #fef2f2;\n }\n\n .sa-interrupt-option-desc {\n font-size: 11px;\n color: var(--sa-text-muted);\n margin-left: auto;\n }\n\n .sa-interrupt-input-area {\n margin-top: 4px;\n }\n\n .sa-interrupt-input,\n .sa-interrupt-textarea,\n .sa-interrupt-select {\n width: 100%;\n padding: 8px 12px;\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n background: #fff;\n color: var(--sa-text);\n font-size: 13px;\n font-family: inherit;\n outline: none;\n transition: border-color 0.15s;\n }\n\n .sa-interrupt-input:focus,\n .sa-interrupt-textarea:focus,\n .sa-interrupt-select:focus {\n border-color: var(--sa-primary);\n }\n\n .sa-interrupt-textarea {\n resize: vertical;\n min-height: 60px;\n }\n\n .sa-interrupt-form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin-top: 4px;\n }\n\n .sa-interrupt-form-field {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .sa-interrupt-form-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--sa-text);\n }\n\n .sa-interrupt-form-required {\n color: #ef4444;\n margin-left: 2px;\n }\n\n .sa-interrupt-resolved {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n border-radius: 8px;\n background: #ecfdf5;\n color: #065f46;\n font-size: 13px;\n margin: 6px 0;\n }\n\n .sa-interrupt-unknown {\n padding: 8px 12px;\n border-radius: 8px;\n background: #fef3c7;\n color: #92400e;\n font-size: 13px;\n margin: 6px 0;\n }\n\n /* \u2500\u2500 Animations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n @keyframes sa-slide-up {\n from {\n opacity: 0;\n transform: translateY(16px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n\n @keyframes sa-blink {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n }\n\n @keyframes sa-slide-in-left {\n from {\n opacity: 0;\n transform: translateX(-100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n /* \u2500\u2500 Fullpage Layout (DeepSeek-style) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-fullpage {\n position: fixed;\n inset: 0;\n width: 100vw;\n height: 100vh;\n display: flex;\n background: #f7f7f8;\n z-index: var(--sa-z-index, 9999);\n }\n\n /* Sidebar */\n .sa-fp-sidebar {\n width: 260px;\n display: flex;\n flex-direction: column;\n background: #f2f2f3;\n flex-shrink: 0;\n transition: width 0.2s cubic-bezier(0.16,1,0.3,1);\n overflow: hidden;\n border-right: 1px solid #e8e8ea;\n }\n\n .sa-fp-sidebar-collapsed {\n width: 52px;\n align-items: center;\n padding-top: 12px;\n gap: 4px;\n border-right: 1px solid #e8e8ea;\n }\n\n .sa-fp-sidebar-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 12px 8px;\n flex-shrink: 0;\n }\n\n .sa-fp-sidebar-toggle {\n width: 32px;\n height: 32px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: #71717a;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.12s, color 0.12s;\n flex-shrink: 0;\n }\n\n .sa-fp-sidebar-toggle:hover {\n background: #e4e4e7;\n color: #18181b;\n }\n\n .sa-fp-sidebar-new {\n flex: 1;\n padding: 7px 12px;\n border: 1px solid #d4d4d8;\n border-radius: 8px;\n background: #fff;\n color: #3f3f46;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: border-color 0.12s, box-shadow 0.12s;\n }\n\n .sa-fp-sidebar-new:hover {\n border-color: #a1a1aa;\n box-shadow: 0 1px 3px rgba(0,0,0,0.06);\n }\n\n .sa-fp-sidebar-new span {\n font-size: 13px;\n }\n\n .sa-fp-sidebar-list {\n flex: 1;\n overflow-y: auto;\n padding: 4px 8px 12px;\n }\n\n .sa-fp-sidebar-list::-webkit-scrollbar {\n width: 4px;\n }\n\n .sa-fp-sidebar-list::-webkit-scrollbar-thumb {\n background: rgba(0,0,0,0.08);\n border-radius: 2px;\n }\n\n .sa-fp-sidebar-list::-webkit-scrollbar-thumb:hover {\n background: rgba(0,0,0,0.15);\n }\n\n .sa-fp-sidebar-group {\n padding: 12px 8px 4px;\n font-size: 11px;\n font-weight: 500;\n color: #a1a1aa;\n letter-spacing: 0.3px;\n }\n\n .sa-fp-sidebar-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 10px;\n margin: 1px 0;\n border-radius: 8px;\n cursor: pointer;\n color: #3f3f46;\n font-size: 13px;\n line-height: 1.4;\n transition: background 0.1s;\n }\n\n .sa-fp-sidebar-item:hover {\n background: #e8e8ea;\n }\n\n .sa-fp-sidebar-item.active {\n background: #e4e4e7;\n color: #18181b;\n font-weight: 500;\n }\n\n .sa-fp-sidebar-item-title {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-fp-sidebar-item-action {\n width: 24px;\n height: 24px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: #a1a1aa;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: color 0.1s, background 0.1s;\n }\n\n .sa-fp-sidebar-item-action:hover {\n color: #71717a;\n background: rgba(0,0,0,0.05);\n }\n\n .sa-fp-sidebar-item-action.danger {\n color: #ef4444;\n }\n\n .sa-fp-sidebar-item-action.danger:hover {\n color: #dc2626;\n background: rgba(239,68,68,0.08);\n }\n\n .sa-fp-sidebar-empty {\n padding: 32px 12px;\n text-align: center;\n color: #a1a1aa;\n font-size: 13px;\n }\n\n /* Sidebar wrapper (for custom ThreadList slot) */\n .sa-fp-sidebar-wrapper {\n width: 260px;\n flex-shrink: 0;\n overflow: hidden;\n border-right: 1px solid #e8e8ea;\n background: #f2f2f3;\n transition: width 0.2s cubic-bezier(0.16,1,0.3,1);\n }\n\n .sa-fp-sidebar-wrapper-collapsed {\n width: 0;\n }\n\n /* Main area */\n .sa-fp-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n background: #fff;\n }\n\n .sa-fp-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n border-bottom: 1px solid #f0f0f0;\n background: #fff;\n flex-shrink: 0;\n min-height: 52px;\n }\n\n .sa-fp-header-title {\n flex: 1;\n font-size: 15px;\n font-weight: 500;\n color: #18181b;\n letter-spacing: -0.2px;\n }\n\n .sa-fp-header-actions {\n display: flex;\n gap: 4px;\n }\n\n .sa-fp-header-btn {\n min-width: 34px;\n height: 34px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: #71717a;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.12s, color 0.12s;\n }\n\n .sa-fp-header-btn:hover {\n background: #f4f4f5;\n color: #18181b;\n }\n\n /* Fullpage thread/composer override */\n .sa-fp-main .sa-thread {\n margin: 0 auto;\n width: 100%;\n padding: 24px 24px;\n }\n\n .sa-fp-main .sa-composer {\n margin: 0 auto;\n width: 100%;\n padding: 12px 24px 20px;\n border-top: none;\n background: transparent;\n }\n\n .sa-fp-main .sa-composer-input {\n background: #f7f7f8;\n border: 1px solid #e4e4e7;\n box-shadow: none;\n }\n\n .sa-fp-main .sa-composer-input:focus {\n background: #fff;\n border-color: #d4d4d8;\n box-shadow: 0 0 0 3px rgba(99,102,241,0.08);\n }\n\n /* \u2500\u2500 Artifact file cards (in ToolResultPart) \u2500\u2500 */\n .sa-artifact-file-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }\n .sa-artifact-file-card {\n display: flex; align-items: center; gap: 10px; padding: 8px 10px;\n border: 1px solid var(--sa-border); border-radius: 10px; background: var(--sa-surface);\n font-size: 13px; color: var(--sa-text);\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-artifact-file-card:hover { border-color: var(--sa-primary); background: #fff; box-shadow: 0 2px 8px rgba(99,102,241,0.1); transform: translateY(-1px); }\n .sa-artifact-file-card:active { transform: translateY(0) scale(0.99); }\n .sa-artifact-file-icon { flex-shrink: 0; }\n .sa-artifact-chip-type {\n display: inline-flex; align-items: center; justify-content: center;\n min-width: 36px; padding: 2px 6px; border-radius: 5px;\n background: var(--sa-primary); color: #fff;\n font-size: 10px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.4;\n }\n .sa-artifact-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }\n .sa-artifact-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }\n .sa-artifact-file-size { color: var(--sa-text-muted); font-size: 12px; }\n .sa-artifact-file-download {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex;\n transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;\n }\n .sa-artifact-file-download:hover { color: var(--sa-primary); background: rgba(99,102,241,0.08); }\n .sa-artifact-file-download:active { transform: scale(0.9); }\n\n /* \u2500\u2500 Inline HTML rendering (render_mode=html) \u2500\u2500 */\n .sa-tool-result-html { margin-top: 8px; border: 1px solid var(--sa-border); border-radius: 8px; overflow: hidden; }\n .sa-tool-result-html-iframe { width: 100%; min-height: 120px; max-height: 400px; border: none; background: #fff; }\n\n /* \u2500\u2500 Header artifact button \u2500\u2500 */\n .sa-header-btn-artifact {\n display: inline-flex; align-items: center; gap: 4px;\n padding: 4px 12px !important; border-radius: 8px;\n background: var(--sa-primary) !important; color: #fff !important;\n font-size: 12px; font-weight: 600;\n transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;\n box-shadow: 0 1px 4px rgba(99,102,241,0.25);\n }\n .sa-header-btn-artifact:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(99,102,241,0.3); }\n .sa-header-btn-artifact:active { transform: translateY(0) scale(0.97); }\n .sa-header-btn-artifact svg { stroke: #fff; }\n .sa-header-btn-artifact.sa-artifact-pulse { animation: sa-artifact-pulse 2s ease-in-out 3; }\n\n /* \u2500\u2500 Artifact drawer (right side panel) \u2500\u2500 */\n .sa-artifact-drawer {\n display: flex; flex-direction: column; min-width: 240px; max-width: 70%;\n border-left: 1px solid var(--sa-border); background: #fff; flex-shrink: 0; overflow: hidden;\n animation: sa-slide-in-right 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n position: relative;\n }\n .sa-artifact-drawer.sa-drawer-closing {\n animation: sa-slide-out-right 0.25s cubic-bezier(0.4, 0, 1, 1) both;\n }\n .sa-drawer-resize-handle {\n position: absolute; left: -3px; top: 0; bottom: 0; width: 6px;\n cursor: col-resize; z-index: 2;\n transition: background 0.15s ease;\n }\n .sa-drawer-resize-handle:hover, .sa-drawer-resize-handle:active {\n background: var(--sa-primary); opacity: 0.3; border-radius: 3px;\n }\n .sa-artifact-drawer-header {\n display: flex; align-items: center; gap: 8px; padding: 12px 14px;\n border-bottom: 1px solid var(--sa-border); font-weight: 600; font-size: 15px; color: var(--sa-text);\n background: var(--sa-surface);\n }\n .sa-artifact-drawer-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .sa-drawer-btn {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex; align-items: center;\n transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;\n }\n .sa-drawer-btn:hover { background: var(--sa-border); color: var(--sa-text); }\n .sa-drawer-btn:active { transform: scale(0.92); }\n .sa-drawer-btn-sm {\n border: 1px solid var(--sa-border); background: #fff; cursor: pointer; color: var(--sa-primary);\n padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;\n transition: background 0.15s ease, border-color 0.15s ease;\n }\n .sa-drawer-btn-sm:hover { background: var(--sa-surface); border-color: var(--sa-primary); }\n .sa-artifact-drawer-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }\n .sa-drawer-empty { padding: 48px 24px; text-align: center; color: var(--sa-text-muted); font-size: 14px; }\n .sa-drawer-file-list { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; }\n .sa-drawer-file-card {\n display: flex; align-items: center; gap: 10px; padding: 12px 14px;\n border: 1px solid var(--sa-border); border-radius: 10px; cursor: pointer; background: #fff;\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-drawer-file-card:nth-child(1) { animation-delay: 0s; }\n .sa-drawer-file-card:nth-child(2) { animation-delay: 0.04s; }\n .sa-drawer-file-card:nth-child(3) { animation-delay: 0.08s; }\n .sa-drawer-file-card:nth-child(4) { animation-delay: 0.12s; }\n .sa-drawer-file-card:nth-child(5) { animation-delay: 0.16s; }\n .sa-drawer-file-card:hover { border-color: var(--sa-primary); background: var(--sa-surface); box-shadow: 0 2px 8px rgba(99,102,241,0.08); transform: translateY(-1px); }\n .sa-drawer-file-card:active { transform: translateY(0) scale(0.98); }\n .sa-drawer-file-icon { flex-shrink: 0; }\n .sa-drawer-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }\n .sa-drawer-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 14px; color: var(--sa-text); }\n .sa-drawer-file-size { color: var(--sa-text-muted); font-size: 12px; }\n\n /* \u2500\u2500 Drawer preview \u2500\u2500 */\n .sa-drawer-preview-iframe { width: 100%; height: 100%; border: none; background: #fff; animation: sa-fade-in 0.3s ease both; }\n .sa-drawer-preview-loading {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n height: 100%; gap: 12px; color: var(--sa-text-muted); font-size: 14px;\n }\n .sa-drawer-preview-loading::before {\n content: ''; width: 28px; height: 28px; border-radius: 50%;\n border: 3px solid var(--sa-border); border-top-color: var(--sa-primary);\n animation: sa-spinner 0.7s linear infinite;\n }\n .sa-drawer-preview-error {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 14px; height: 100%; color: var(--sa-text-muted); font-size: 14px;\n animation: sa-fade-in 0.2s ease both;\n }\n\n /* \u2500\u2500 Drawer view transition \u2500\u2500 */\n .sa-drawer-view-enter { animation: sa-drawer-view-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }\n\n /* \u2500\u2500 Layout helpers for drawer alongside thread \u2500\u2500 */\n .sa-panel-content { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-panel-content .sa-thread { flex: 1; min-width: 120px; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n .sa-panel-content .sa-artifact-drawer { max-width: 60%; }\n .sa-fp-content-row { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-fp-content-row .sa-thread { flex: 1; min-width: 0; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n\n /* \u2500\u2500 Artifact keyframes \u2500\u2500 */\n @keyframes sa-slide-in-right {\n from { opacity: 0; transform: translateX(100%); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes sa-slide-out-right {\n from { opacity: 1; transform: translateX(0); }\n to { opacity: 0; transform: translateX(100%); }\n }\n @keyframes sa-fade-in-up {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes sa-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes sa-spinner {\n to { transform: rotate(360deg); }\n }\n @keyframes sa-artifact-pulse {\n 0%, 100% { box-shadow: 0 1px 4px rgba(99,102,241,0.25); }\n 50% { box-shadow: 0 2px 12px rgba(99,102,241,0.5); }\n }\n @keyframes sa-drawer-view-in {\n from { opacity: 0; transform: translateX(12px); }\n to { opacity: 1; transform: translateX(0); }\n }\n";
|
|
496
496
|
|
|
497
497
|
export { }
|