@pillar-ai/sdk 0.1.33 → 0.2.0

package/dist/api/ag-ui-client.d.ts

@@ -1,102 +0,0 @@
-/**
- * AG-UI Protocol Client for Pillar SDK
- *
- * Implements the AG-UI specification for streaming agent interactions.
- * Uses the @ag-ui/client HttpAgent for transport.
- *
- * Copyright (C) 2025 Pillar Team
- */
-import type { ResolvedConfig } from '../core/config';
-export interface AGUIStreamCallbacks {
-    /** Called when run starts */
-    onRunStarted?: (runId: string) => void;
-    /** Called when run completes successfully */
-    onRunFinished?: () => void;
-    /** Called on error */
-    onError?: (error: Error) => void;
-    /** Called when a step starts */
-    onStepStarted?: (stepName: string) => void;
-    /** Called when a step finishes */
-    onStepFinished?: (stepName: string) => void;
-    /** Called for text message streaming */
-    onTextContent?: (messageId: string, delta: string) => void;
-    /** Called when text message completes */
-    onTextComplete?: (messageId: string, fullContent: string) => void;
-    /** Called when tool call starts (for UI display) */
-    onToolCallStart?: (toolCallId: string, toolName: string) => void;
-    /** Called with tool call arguments */
-    onToolCallArgs?: (toolCallId: string, argsJson: string) => void;
-    /** Called when tool call completes */
-    onToolCallEnd?: (toolCallId: string) => void;
-    /** Called when tool result is available */
-    onToolCallResult?: (toolCallId: string, result: string) => void;
-    /** Called for state delta events (sources, actions, plan) */
-    onStateDelta?: (delta: unknown[]) => void;
-    /** Called for state snapshots */
-    onStateSnapshot?: (state: unknown) => void;
-}
-export interface ClientTool {
-    name: string;
-    description: string;
-    parameters: Record<string, unknown>;
-    /** Handler function - called when agent requests this tool */
-    handler?: (args: Record<string, unknown>) => Promise<unknown>;
-}
-export declare class AGUIClient {
-    private config;
-    private agent;
-    private currentRunId;
-    private currentThreadId;
-    private messageAccumulators;
-    private toolArgAccumulators;
-    private toolCallNames;
-    private registeredTools;
-    constructor(config: ResolvedConfig);
-    /**
-     * Get or create a persistent thread ID for this session.
-     */
-    private getOrCreateThreadId;
-    private getBrowserLanguage;
-    /**
-     * Register a client-side tool that can be called by the agent.
-     */
-    registerTool(tool: ClientTool): void;
-    /**
-     * Unregister a client-side tool.
-     */
-    unregisterTool(toolName: string): void;
-    /**
-     * Send a message and stream the agent's response.
-     */
-    chat(message: string, callbacks: AGUIStreamCallbacks, options?: {
-        history?: Array<{
-            role: 'user' | 'assistant';
-            content: string;
-        }>;
-        userContext?: Array<{
-            type: string;
-            [key: string]: unknown;
-        }>;
-        signal?: AbortSignal;
-    }): Promise<void>;
-    /**
-     * Execute a client-side tool if registered.
-     */
-    private maybeExecuteClientTool;
-    /**
-     * Send tool execution result back to the server.
-     */
-    sendToolResult(toolCallId: string, result: unknown, error?: string): Promise<void>;
-    /**
-     * Start a new conversation thread.
-     */
-    newThread(): string;
-    /**
-     * Get current thread ID.
-     */
-    get threadId(): string;
-    /**
-     * Get current run ID.
-     */
-    get runId(): string | null;
-}

package/dist/api/ag-ui-handler.d.ts

@@ -1,89 +0,0 @@
-/**
- * AG-UI Event Handler
- *
- * Processes AG-UI protocol events and maintains UI state.
- * Replaces the complex JSON-RPC parsing in mcp-client.ts.
- */
-import type { AGUIEvent } from '@ag-ui/core';
-/** A streaming text message being accumulated */
-export interface StreamingMessage {
-    id: string;
-    role: 'user' | 'assistant';
-    content: string;
-    complete: boolean;
-    /** Which step this message belongs to (for thinking vs response) */
-    stepName?: string;
-}
-/** A tool call being tracked */
-export interface ToolCallState {
-    id: string;
-    name: string;
-    args: string;
-    result?: unknown;
-    complete: boolean;
-    /** True if this tool executes on the client (query action) */
-    isClientSide?: boolean;
-}
-/** State delta data (sources, actions, plan, etc.) */
-export interface StateDeltaData {
-    type: string;
-    data: unknown;
-    timestamp: number;
-}
-/** Complete AG-UI state */
-export interface AGUIState {
-    /** Current run ID */
-    runId: string | null;
-    /** Thread ID (replaces conversation_id) */
-    threadId: string | null;
-    /** Current step name (e.g., "reasoning", "tool_execution") */
-    currentStep: string | null;
-    /** Streaming messages keyed by message ID */
-    messages: Map<string, StreamingMessage>;
-    /** Tool calls keyed by tool call ID */
-    toolCalls: Map<string, ToolCallState>;
-    /** State deltas received (sources, actions, plans) */
-    stateDeltas: StateDeltaData[];
-    /** Whether the run is complete */
-    isComplete: boolean;
-    /** Error if run failed */
-    error: Error | null;
-}
-export interface AGUIHandlerCallbacks {
-    /** Called whenever state changes */
-    onStateChange: (state: AGUIState) => void;
-    /** Called when an error occurs */
-    onError: (error: Error) => void;
-    /** Called when run completes successfully */
-    onComplete: () => void;
-    /** Called when a client-side tool needs execution */
-    onClientToolCall?: (toolCall: ToolCallState) => Promise<unknown>;
-}
-/**
- * Create an AG-UI event handler.
- *
- * Returns an object with a handleEvent method that processes
- * AG-UI events and updates internal state.
- */
-export declare function createAGUIHandler(callbacks: AGUIHandlerCallbacks): {
-    handleEvent: (event: AGUIEvent) => Promise<void>;
-    reset: () => void;
-    getState: () => AGUIState;
-};
-/**
- * Register a tool as client-side.
- * Called when the SDK registers an action with returns: true.
- */
-export declare function registerClientSideTool(toolName: string): void;
-/**
- * Unregister a client-side tool.
- */
-export declare function unregisterClientSideTool(toolName: string): void;
-/**
- * Check if a tool executes on the client side.
- */
-export declare function isClientSideTool(toolName: string): boolean;
-/**
- * Get all registered client-side tools.
- */
-export declare function getClientSideTools(): string[];

package/dist/button/FloatingButton.d.ts

@@ -1,44 +0,0 @@
-/**
- * Floating Help Button
- * A floating action button that opens the help panel
- */
-import type { ResolvedConfig, FloatingButtonPosition } from '../core/config';
-export declare class FloatingButton {
-    private config;
-    private onClick;
-    private element;
-    private stylesInjected;
-    private _isOpen;
-    constructor(config: ResolvedConfig, onClick: () => void);
-    /**
-     * Initialize the floating button
-     */
-    init(): void;
-    /**
-     * Set the open state (to show/hide when panel opens)
-     */
-    setOpen(isOpen: boolean): void;
-    /**
-     * Show the button
-     */
-    show(): void;
-    /**
-     * Hide the button
-     */
-    hide(): void;
-    /**
-     * Update button position
-     */
-    setPosition(position: FloatingButtonPosition): void;
-    /**
-     * Update button label
-     */
-    setLabel(label: string): void;
-    /**
-     * Destroy the button
-     */
-    destroy(): void;
-    private createElement;
-    private updateIcon;
-    private handleClick;
-}

package/dist/components/Button/FloatingButton.d.ts

@@ -1,46 +0,0 @@
-/**
- * Floating Help Button Component
- * A floating action button that opens the help panel
- */
-import type { ResolvedConfig, FloatingButtonPosition } from '../../core/config';
-/**
- * FloatingButton class that manages the button lifecycle
- * Uses Preact for rendering but maintains imperative control
- */
-export declare class FloatingButton {
-    private config;
-    private onClick;
-    private container;
-    private stylesInjected;
-    private _isHidden;
-    constructor(config: ResolvedConfig, onClick: () => void);
-    /**
-     * Initialize the floating button
-     */
-    init(): void;
-    /**
-     * Set the open state (to update icon when panel opens)
-     */
-    setOpen(_isOpen: boolean): void;
-    /**
-     * Show the button
-     */
-    show(): void;
-    /**
-     * Hide the button
-     */
-    hide(): void;
-    /**
-     * Update button position
-     */
-    setPosition(position: FloatingButtonPosition): void;
-    /**
-     * Update button label
-     */
-    setLabel(label: string): void;
-    /**
-     * Destroy the button
-     */
-    destroy(): void;
-    private render;
-}

package/dist/components/DevTools/DOMScannerPreview.d.ts

@@ -1,21 +0,0 @@
-/**
- * DOM Scanner Preview Component
- * Displays a tree visualization of the scanned DOM AST
- * Used in dev mode to preview what will be sent to the LLM
- */
-import { h } from 'preact';
-import type { ScanResult } from '../../types/dom-scanner';
-interface DOMScannerPreviewProps {
-    /** The scan result to display */
-    result: ScanResult;
-    /** Called when user confirms and wants to send the message */
-    onConfirm: () => void;
-    /** Called when user cancels */
-    onCancel: () => void;
-}
-/**
- * DOM Scanner Preview Panel
- * Shows a modal with the scanned DOM tree and statistics
- */
-export declare function DOMScannerPreview({ result, onConfirm, onCancel }: DOMScannerPreviewProps): h.JSX.Element;
-export default DOMScannerPreview;

package/dist/components/DevTools/styles.d.ts

@@ -1,5 +0,0 @@
-/**
- * DevTools CSS Styles
- * Styles for the DOM Scanner preview panel
- */
-export declare const DEVTOOLS_STYLES = "\n/* Pillar DevTools Styles */\n.pillar-devtools-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 99998;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px;\n  box-sizing: border-box;\n}\n\n.pillar-devtools-panel {\n  background: #1e1e2e;\n  border-radius: 12px;\n  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);\n  max-width: 800px;\n  width: 100%;\n  max-height: 80vh;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  color: #e0e0e0;\n}\n\n.pillar-devtools-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid #2d2d3d;\n  background: #252535;\n}\n\n.pillar-devtools-title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: #ffffff;\n}\n\n.pillar-devtools-badge {\n  padding: 3px 8px;\n  background: #6366f1;\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.pillar-devtools-close {\n  padding: 6px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  color: #9090a0;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.pillar-devtools-close:hover {\n  background: #3d3d4d;\n  color: #ffffff;\n}\n\n.pillar-devtools-stats {\n  display: flex;\n  gap: 16px;\n  padding: 12px 20px;\n  border-bottom: 1px solid #2d2d3d;\n  background: #1a1a2a;\n  flex-wrap: wrap;\n}\n\n.pillar-devtools-stat {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n}\n\n.pillar-devtools-stat-value {\n  font-weight: 600;\n  color: #8b5cf6;\n}\n\n.pillar-devtools-stat-label {\n  color: #9090a0;\n}\n\n.pillar-devtools-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 20px;\n}\n\n.pillar-devtools-tree {\n  font-family: 'SF Mono', Monaco, 'Inconsolata', 'Fira Code', monospace;\n  font-size: 12px;\n  line-height: 1.6;\n}\n\n.pillar-devtools-node {\n  margin-left: 16px;\n  position: relative;\n}\n\n.pillar-devtools-node::before {\n  content: '';\n  position: absolute;\n  left: -12px;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  background: #3d3d4d;\n}\n\n.pillar-devtools-node-root {\n  margin-left: 0;\n}\n\n.pillar-devtools-node-root::before {\n  display: none;\n}\n\n.pillar-devtools-node-header {\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n  padding: 3px 0;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: background 0.1s;\n}\n\n.pillar-devtools-node-header:hover {\n  background: rgba(139, 92, 246, 0.1);\n}\n\n.pillar-devtools-toggle {\n  width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #6d6d7d;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.pillar-devtools-toggle svg {\n  transition: transform 0.15s;\n}\n\n.pillar-devtools-toggle--expanded svg {\n  transform: rotate(90deg);\n}\n\n.pillar-devtools-tag {\n  color: #f472b6;\n}\n\n.pillar-devtools-attr-name {\n  color: #a78bfa;\n}\n\n.pillar-devtools-attr-value {\n  color: #34d399;\n}\n\n.pillar-devtools-interactable {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 6px;\n  background: #6366f1;\n  border-radius: 3px;\n  font-size: 10px;\n  font-weight: 500;\n  color: #ffffff;\n  margin-left: 6px;\n}\n\n.pillar-devtools-text {\n  color: #94a3b8;\n  font-style: italic;\n  max-width: 400px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pillar-devtools-children {\n  display: none;\n}\n\n.pillar-devtools-children--expanded {\n  display: block;\n}\n\n.pillar-devtools-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid #2d2d3d;\n  background: #252535;\n}\n\n.pillar-devtools-footer-info {\n  font-size: 12px;\n  color: #9090a0;\n}\n\n.pillar-devtools-actions {\n  display: flex;\n  gap: 10px;\n}\n\n.pillar-devtools-btn {\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s, transform 0.1s;\n  border: none;\n}\n\n.pillar-devtools-btn:active {\n  transform: scale(0.98);\n}\n\n.pillar-devtools-btn--secondary {\n  background: #3d3d4d;\n  color: #e0e0e0;\n}\n\n.pillar-devtools-btn--secondary:hover {\n  background: #4d4d5d;\n}\n\n.pillar-devtools-btn--primary {\n  background: #6366f1;\n  color: #ffffff;\n}\n\n.pillar-devtools-btn--primary:hover {\n  background: #4f46e5;\n}\n";

package/dist/components/PagePilot/PagePilotBanner.d.ts

@@ -1,7 +0,0 @@
-/**
- * Page Pilot Banner Component
- * Shows "Page being piloted by Agent" with stop button during interact_with_page actions.
- * When a destructive action is detected, shows a confirmation variant with Allow/Deny buttons.
- */
-import { h } from 'preact';
-export declare function PagePilotBanner(): h.JSX.Element | null;

package/dist/components/PagePilot/PagePilotManager.d.ts

@@ -1,47 +0,0 @@
-/**
- * Page Pilot Manager
- * Manages the "Page being piloted by Agent" banner, rendering it outside Shadow DOM
- * so it appears above all other content on the page.
- */
-import type { ThemeMode } from '../../core/config';
-export declare class PagePilotManager {
-    private container;
-    private stylesInjected;
-    private unsubscribe;
-    private themeObserver;
-    private primaryColor;
-    private themeMode;
-    /**
-     * Detect the current theme from the document (for auto mode)
-     * Checks for .dark class (next-themes) or data-theme attribute
-     */
-    private detectThemeFromDOM;
-    /**
-     * Apply theme mode to container element
-     * Respects explicit config, only auto-detects when mode is 'auto'
-     */
-    private applyThemeMode;
-    /**
-     * Set up observer to watch for theme changes on documentElement
-     * Only needed for auto mode
-     */
-    private setupThemeObserver;
-    /**
-     * Initialize the page pilot manager
-     * @param primaryColor - Optional primary color from theme config to override the default
-     * @param themeMode - Theme mode from config ('light', 'dark', or 'auto')
-     */
-    init(primaryColor?: string, themeMode?: ThemeMode): void;
-    /**
-     * Update the primary color used by the banner
-     */
-    setPrimaryColor(color: string): void;
-    /**
-     * Destroy the page pilot manager
-     */
-    destroy(): void;
-    /**
-     * Render the banner component
-     */
-    private render;
-}

package/dist/components/PagePilot/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * Page Pilot Components
- * Banner and manager for displaying "Page being piloted by Agent" indicator
- */
-export { PagePilotBanner } from './PagePilotBanner';
-export { PagePilotManager } from './PagePilotManager';

package/dist/components/PagePilot/styles.d.ts

@@ -1,6 +0,0 @@
-/**
- * Page Pilot Banner CSS Styles
- * Injected into the document head (outside Shadow DOM)
- * Uses the same CSS variables as the Pillar panel for consistent theming
- */
-export declare const PAGE_PILOT_STYLES = "\n/* Pillar Page Pilot Banner Styles */\n\n/* Define CSS variables at the container level (same as panel) */\n#pillar-page-pilot-container {\n  /* Core colors - Light mode (default) */\n  --pillar-primary: #2563eb;\n  --pillar-primary-hover: #1d4ed8;\n  --pillar-bg: #ffffff;\n  --pillar-bg-secondary: #f9fafb;\n  --pillar-text: #1a1a1a;\n  --pillar-text-secondary: #374151;\n  --pillar-border: #e5e7eb;\n  --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  --pillar-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --pillar-radius-lg: 8px;\n  --pillar-radius-md: 6px;\n  --pillar-transition-fast: 0.15s ease;\n}\n\n/* Dark mode - Auto-detect from system preference */\n@media (prefers-color-scheme: dark) {\n  #pillar-page-pilot-container:not([data-theme=\"light\"]) {\n    --pillar-primary: #3b82f6;\n    --pillar-primary-hover: #60a5fa;\n    --pillar-bg: #1a1a1a;\n    --pillar-bg-secondary: #262626;\n    --pillar-text: #f5f5f5;\n    --pillar-text-secondary: #e5e5e5;\n    --pillar-border: #404040;\n    --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n  }\n}\n\n/* Dark mode - Manual override via html class or data attribute */\nhtml.dark #pillar-page-pilot-container,\n[data-theme=\"dark\"] #pillar-page-pilot-container,\n#pillar-page-pilot-container[data-theme=\"dark\"] {\n  --pillar-primary: #3b82f6;\n  --pillar-primary-hover: #60a5fa;\n  --pillar-bg: #1a1a1a;\n  --pillar-bg-secondary: #262626;\n  --pillar-text: #f5f5f5;\n  --pillar-text-secondary: #e5e5e5;\n  --pillar-border: #404040;\n  --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n}\n\n@keyframes pillar-pulse {\n  0%, 100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 0.6;\n    transform: scale(1.1);\n  }\n}\n\n@keyframes pillar-banner-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n._pillar-page-pilot-banner {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 99999;\n  font-family: var(--pillar-font-family);\n  display: flex;\n  justify-content: center;\n  pointer-events: none;\n  animation: pillar-banner-fade-in 0.2s ease-out;\n}\n\n/* Viewport outline \u2014 3px border on left, right, bottom; top handled by tab shape */\n._pillar-page-pilot-banner::before {\n  content: '';\n  position: fixed;\n  inset: 0;\n  border: 3px solid var(--pillar-primary);\n  border-top: none;\n  pointer-events: none;\n  z-index: 99998;\n}\n\n/* Top border segments on either side of the tab */\n._pillar-page-pilot-banner::after {\n  content: '';\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: var(--pillar-primary);\n  pointer-events: none;\n  z-index: 99997;\n}\n\n._pillar-page-pilot-banner__content {\n  position: relative;\n  z-index: 99999;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px 20px;\n  background: var(--pillar-primary);\n  color: #ffffff;\n  border-bottom-left-radius: var(--pillar-radius-lg);\n  border-bottom-right-radius: var(--pillar-radius-lg);\n  pointer-events: auto;\n}\n\n._pillar-page-pilot-banner__indicator {\n  width: 8px;\n  height: 8px;\n  background: #ffffff;\n  border-radius: 50%;\n  animation: pillar-pulse 1.5s ease-in-out infinite;\n  flex-shrink: 0;\n}\n\n._pillar-page-pilot-banner__text {\n  font-size: 13px;\n  font-weight: 500;\n  color: #ffffff;\n  white-space: nowrap;\n}\n\n._pillar-page-pilot-banner__stop {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 5px 10px;\n  margin-left: 4px;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 500;\n  color: #ffffff;\n  background: rgba(255, 255, 255, 0.15);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-page-pilot-banner__stop:hover {\n  background: rgba(255, 255, 255, 0.25);\n  border-color: rgba(255, 255, 255, 0.5);\n}\n\n._pillar-page-pilot-banner__stop:active {\n  transform: scale(0.97);\n}\n\n._pillar-page-pilot-banner__stop-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n}\n\n._pillar-page-pilot-banner__stop-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Confirmation variant \u2014 amber/warning theme */\n._pillar-page-pilot-banner--confirm ._pillar-page-pilot-banner__content {\n  background: #d97706;\n}\n\n._pillar-page-pilot-banner--confirm::before {\n  border-color: #d97706;\n}\n\n._pillar-page-pilot-banner--confirm::after {\n  background: #d97706;\n}\n\n._pillar-page-pilot-banner__warning-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n}\n\n._pillar-page-pilot-banner__warning-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n._pillar-page-pilot-banner__deny {\n  display: flex;\n  align-items: center;\n  padding: 5px 12px;\n  margin-left: 4px;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 500;\n  color: #ffffff;\n  background: rgba(255, 255, 255, 0.15);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-page-pilot-banner__deny:hover {\n  background: rgba(255, 255, 255, 0.25);\n  border-color: rgba(255, 255, 255, 0.5);\n}\n\n._pillar-page-pilot-banner__deny:active {\n  transform: scale(0.97);\n}\n\n._pillar-page-pilot-banner__allow {\n  display: flex;\n  align-items: center;\n  padding: 5px 12px;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  color: #d97706;\n  background: #ffffff;\n  border: 1px solid rgba(255, 255, 255, 0.8);\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-page-pilot-banner__allow:hover {\n  background: #fef3c7;\n}\n\n._pillar-page-pilot-banner__allow:active {\n  transform: scale(0.97);\n}\n";

package/dist/components/Panel/styles.d.ts

@@ -1,20 +0,0 @@
-/**
- * Panel CSS Styles
- * Complete styling for the help panel (injected into Shadow DOM)
- *
- * Class naming convention:
- * - Internal classes (_pillar-*): Apply all default styles
- * - Public classes (pillar-*): Empty by default, for user overrides
- *
- * Each element renders both classes, e.g.: class="_pillar-header pillar-header"
- */
-import type { ResolvedThemeConfig, ThemeColors } from "../../core/config";
-/**
- * Generate CSS variable overrides from theme colors
- */
-export declare function generateThemeVariables(colors: ThemeColors, prefix?: string): string;
-/**
- * Generate custom theme CSS from config
- */
-export declare function generateThemeCSS(theme: ResolvedThemeConfig): string;
-export declare const PANEL_STYLES = "\n/* ============================================================================\n   CSS Custom Properties (Variables)\n   Users can override these to customize colors\n   ============================================================================ */\n\n:host {\n  /* Core colors - Light mode (default) */\n  --pillar-primary: #2563eb;\n  --pillar-primary-hover: #1d4ed8;\n  --pillar-primary-light: #eff6ff;\n  --pillar-primary-light-hover: #dbeafe;\n  \n  --pillar-bg: #ffffff;\n  --pillar-bg-secondary: #f9fafb;\n  --pillar-bg-tertiary: #f3f4f6;\n  \n  --pillar-text: #1a1a1a;\n  --pillar-text-secondary: #374151;\n  --pillar-text-muted: #6b7280;\n  --pillar-text-placeholder: #9ca3af;\n  \n  --pillar-border: #e5e7eb;\n  --pillar-border-light: #f3f4f6;\n  \n  /* Shadows */\n  --pillar-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n  --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  \n  /* Code blocks */\n  --pillar-code-bg: #1f2937;\n  --pillar-code-text: #e5e7eb;\n  \n  /* Scrollbar */\n  --pillar-scrollbar-track: transparent;\n  --pillar-scrollbar-thumb: #d1d5db;\n  --pillar-scrollbar-thumb-hover: #9ca3af;\n  \n  /* Spacing (can be customized) */\n  --pillar-panel-width: 380px;\n  --pillar-spacing-xs: 4px;\n  --pillar-spacing-sm: 8px;\n  --pillar-spacing-md: 12px;\n  --pillar-spacing-lg: 16px;\n  --pillar-spacing-xl: 20px;\n  --pillar-spacing-2xl: 24px;\n  \n  /* Border radius */\n  --pillar-radius-sm: 4px;\n  --pillar-radius-md: 6px;\n  --pillar-radius-lg: 8px;\n  --pillar-radius-xl: 10px;\n  --pillar-radius-full: 9999px;\n  \n  /* Typography */\n  --pillar-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --pillar-font-mono: 'SF Mono', Consolas, monospace;\n  --pillar-font-size-xs: 11px;\n  --pillar-font-size-sm: 12px;\n  --pillar-font-size-base: 14px;\n  --pillar-font-size-md: 15px;\n  --pillar-font-size-lg: 16px;\n  --pillar-font-size-xl: 18px;\n  --pillar-font-size-2xl: 20px;\n  \n  /* Animation */\n  --pillar-transition-fast: 0.15s ease;\n  --pillar-transition-normal: 0.3s ease;\n}\n\n/* Dark mode - Auto-detect from system preference */\n@media (prefers-color-scheme: dark) {\n  :host:not([data-theme=\"light\"]) {\n    --pillar-primary: #3b82f6;\n    --pillar-primary-hover: #60a5fa;\n    --pillar-primary-light: #1e3a5f;\n    --pillar-primary-light-hover: #1e4976;\n    \n    --pillar-bg: #1a1a1a;\n    --pillar-bg-secondary: #262626;\n    --pillar-bg-tertiary: #333333;\n    \n    --pillar-text: #f5f5f5;\n    --pillar-text-secondary: #e5e5e5;\n    --pillar-text-muted: #a3a3a3;\n    --pillar-text-placeholder: #737373;\n    \n    --pillar-border: #404040;\n    --pillar-border-light: #333333;\n    \n    --pillar-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n    --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n    \n    --pillar-code-bg: #0d0d0d;\n    --pillar-code-text: #e5e7eb;\n    \n    --pillar-scrollbar-thumb: #525252;\n    --pillar-scrollbar-thumb-hover: #737373;\n  }\n}\n\n/* Dark mode - Manual override */\n:host([data-theme=\"dark\"]) {\n  --pillar-primary: #3b82f6;\n  --pillar-primary-hover: #60a5fa;\n  --pillar-primary-light: #1e3a5f;\n  --pillar-primary-light-hover: #1e4976;\n  \n  --pillar-bg: #1a1a1a;\n  --pillar-bg-secondary: #262626;\n  --pillar-bg-tertiary: #333333;\n  \n  --pillar-text: #f5f5f5;\n  --pillar-text-secondary: #e5e5e5;\n  --pillar-text-muted: #a3a3a3;\n  --pillar-text-placeholder: #737373;\n  \n  --pillar-border: #404040;\n  --pillar-border-light: #333333;\n  \n  --pillar-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n  --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n  \n  --pillar-code-bg: #0d0d0d;\n  --pillar-code-text: #e5e7eb;\n  \n  --pillar-scrollbar-thumb: #525252;\n  --pillar-scrollbar-thumb-hover: #737373;\n}\n\n/* ============================================================================\n   Base Styles\n   Note: No CSS reset - we rely on explicit styles for SDK components\n   and allow custom cards to inherit host app styling (Tailwind, etc.)\n   ============================================================================ */\n\n:host {\n  font-family: var(--pillar-font-family);\n  font-size: var(--pillar-font-size-base);\n  line-height: 1.5;\n  color: var(--pillar-text);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* ============================================================================\n   Panel Container\n   Internal: _pillar-panel | Public: pillar-panel\n   ============================================================================ */\n\n._pillar-panel {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  width: var(--pillar-panel-width);\n  max-width: 100vw;\n  background: var(--pillar-bg);\n  border-left: 1px solid var(--pillar-border);\n  display: flex;\n  flex-direction: column;\n  z-index: 99999;\n  transform: translateX(100%);\n  transition: transform var(--pillar-transition-normal);\n}\n\n._pillar-panel--right {\n  right: 0;\n}\n\n._pillar-panel--left {\n  left: 0;\n  border-left: none;\n  border-right: 1px solid var(--pillar-border);\n  transform: translateX(-100%);\n}\n\n._pillar-panel--open {\n  transform: translateX(0);\n}\n\n._pillar-panel--manual {\n  position: static;\n  transform: none;\n  height: 100%;\n}\n\n._pillar-panel--full-width {\n  width: 100vw;\n  max-width: 100vw;\n}\n\n._pillar-panel-root {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n._pillar-panel-ui {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n\n/* Public override classes - empty by default */\n.pillar-panel {}\n.pillar-panel-root {}\n.pillar-panel-ui {}\n\n/* ============================================================================\n   Backdrop\n   ============================================================================ */\n\n._pillar-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.3);\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity var(--pillar-transition-normal), visibility var(--pillar-transition-normal);\n  z-index: 99998;\n}\n\n._pillar-backdrop--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n.pillar-backdrop {}\n\n/* ============================================================================\n   Header\n   Internal: _pillar-header | Public: pillar-header\n   ============================================================================ */\n\n._pillar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 32px;\n  padding: 0 var(--pillar-spacing-md);\n  border-bottom: 1px solid var(--pillar-border);\n  flex-shrink: 0;\n  background: var(--pillar-bg);\n}\n\n._pillar-header-left {\n  display: flex;\n  align-items: center;\n  gap: var(--pillar-spacing-sm);\n}\n\n._pillar-header-title {\n  font-size: var(--pillar-font-size-lg);\n  font-weight: 600;\n  color: var(--pillar-text);\n}\n\n._pillar-header-right {\n  display: flex;\n  align-items: center;\n  gap: var(--pillar-spacing-xs);\n}\n\n/* Public override classes */\n.pillar-header {}\n.pillar-header-left {}\n.pillar-header-right {}\n.pillar-header-title {}\n.pillar-new-chat-btn {}\n\n/* ============================================================================\n   Icon Buttons (back, home, close)\n   Internal: _pillar-icon-btn | Public: pillar-icon-btn\n   ============================================================================ */\n\n._pillar-icon-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  color: var(--pillar-text-muted);\n  background: none;\n  border: none;\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  transition: color var(--pillar-transition-fast), background var(--pillar-transition-fast);\n}\n\n._pillar-icon-btn:hover {\n  color: var(--pillar-text);\n}\n\n._pillar-icon-btn svg {\n  width: 20px;\n  height: 20px;\n}\n\n.pillar-icon-btn {}\n.pillar-back-btn {}\n.pillar-home-btn {}\n.pillar-history-btn {}\n\n/* ============================================================================\n   History Dropdown\n   Internal: _pillar-history-* | Public: pillar-history-*\n   ============================================================================ */\n\n._pillar-history-dropdown {\n  position: relative;\n}\n\n._pillar-history-menu {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: var(--pillar-spacing-xs);\n  width: 280px;\n  max-height: 400px;\n  background: var(--pillar-bg);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-lg);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  overflow: hidden;\n  z-index: 100;\n}\n\n._pillar-history-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--pillar-spacing-sm);\n  padding: var(--pillar-spacing-xl);\n  color: var(--pillar-text-muted);\n  font-size: 13px;\n}\n\n._pillar-history-spinner {\n  width: 24px;\n  height: 24px;\n  border: 2px solid var(--pillar-border);\n  border-top-color: var(--pillar-primary);\n  border-radius: 50%;\n  animation: pillar-spin 0.8s linear infinite;\n}\n\n@keyframes pillar-spin {\n  to { transform: rotate(360deg); }\n}\n\n._pillar-history-empty {\n  padding: var(--pillar-spacing-xl);\n  text-align: center;\n  color: var(--pillar-text-muted);\n  font-size: 13px;\n}\n\n._pillar-history-list {\n  max-height: 360px;\n  overflow-y: auto;\n  padding: var(--pillar-spacing-xs) 0;\n}\n\n._pillar-history-group-header {\n  padding: var(--pillar-spacing-xs) var(--pillar-spacing-md);\n  padding-top: var(--pillar-spacing-sm);\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--pillar-text-muted);\n  letter-spacing: 0.02em;\n}\n\n._pillar-history-group-header:first-child {\n  padding-top: var(--pillar-spacing-xs);\n}\n\n._pillar-history-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: var(--pillar-spacing-xs) var(--pillar-spacing-md);\n  background: none;\n  border: none;\n  text-align: left;\n  cursor: pointer;\n  transition: background var(--pillar-transition-fast);\n  border-radius: var(--pillar-radius-sm);\n  margin: 0 var(--pillar-spacing-xs);\n  width: calc(100% - var(--pillar-spacing-sm));\n}\n\n._pillar-history-item:hover {\n  background: var(--pillar-bg-secondary);\n}\n\n._pillar-history-item-title {\n  font-size: 13px;\n  color: var(--pillar-text);\n  line-height: 1.4;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 100%;\n}\n\n/* Public override classes */\n.pillar-history-dropdown {}\n.pillar-history-menu {}\n.pillar-history-group-header {}\n.pillar-history-list {}\n.pillar-history-item {}\n.pillar-history-item-title {}\n.pillar-close-btn {}\n\n/* ============================================================================\n   Content Area\n   Internal: _pillar-content | Public: pillar-content\n   ============================================================================ */\n\n._pillar-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-height: 0;\n}\n\n.pillar-content {}\n\n/* ============================================================================\n   Search Input\n   Internal: _pillar-search | Public: pillar-search\n   ============================================================================ */\n\n._pillar-search {\n  position: relative;\n  padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n}\n\n._pillar-search-input {\n  width: 100%;\n  padding: 10px 12px 10px 40px;\n  font-size: var(--pillar-font-size-base);\n  font-family: var(--pillar-font-family);\n  color: var(--pillar-text);\n  background: var(--pillar-bg-secondary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-lg);\n  outline: none;\n  transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-search-input:focus {\n  border-color: var(--pillar-primary);\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-search-input::placeholder {\n  color: var(--pillar-text-placeholder);\n}\n\n._pillar-search-icon {\n  position: absolute;\n  left: 32px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 18px;\n  height: 18px;\n  color: var(--pillar-text-placeholder);\n  pointer-events: none;\n}\n\n._pillar-search-icon svg {\n  width: 18px;\n  height: 18px;\n}\n\n.pillar-search {}\n.pillar-search-input {}\n.pillar-search-icon {}\n\n/* ============================================================================\n   Chat Input (Persistent Bottom)\n   Internal: _pillar-chat-input | Public: pillar-chat-input\n   ============================================================================ */\n\n._pillar-chat-input-container {\n  flex-shrink: 0;\n  border-top: 1px solid var(--pillar-border);\n  background: var(--pillar-bg);\n  display: flex;\n  flex-direction: column;\n  max-height: 50%;\n  transition: max-height var(--pillar-transition-normal);\n}\n\n._pillar-chat-input-container--expanded {\n  max-height: 60%;\n}\n\n._pillar-chat-input-messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0;\n  max-height: 0;\n  transition: max-height var(--pillar-transition-normal), padding var(--pillar-transition-normal);\n}\n\n._pillar-chat-input-container--expanded ._pillar-chat-input-messages {\n  max-height: 300px;\n  padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n}\n\n._pillar-chat-input-message {\n  margin-bottom: var(--pillar-spacing-md);\n}\n\n._pillar-chat-input-message--user {\n  text-align: right;\n}\n\n._pillar-chat-input-message-content {\n  display: inline-block;\n  max-width: 85%;\n  padding: 10px 14px;\n  border-radius: var(--pillar-spacing-lg);\n  font-size: var(--pillar-font-size-base);\n  line-height: 1.5;\n}\n\n._pillar-chat-input-message--user ._pillar-chat-input-message-content {\n  background: var(--pillar-primary);\n  color: #ffffff;\n  border-bottom-right-radius: var(--pillar-radius-sm);\n}\n\n._pillar-chat-input-message--assistant ._pillar-chat-input-message-content {\n  background: var(--pillar-bg-tertiary);\n  color: var(--pillar-text);\n  border-bottom-left-radius: var(--pillar-radius-sm);\n}\n\n._pillar-chat-input-sources {\n  margin-top: var(--pillar-spacing-sm);\n  padding-top: var(--pillar-spacing-sm);\n  border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-input-sources-title {\n  font-size: var(--pillar-font-size-xs);\n  font-weight: 500;\n  color: var(--pillar-text-muted);\n  margin-bottom: 6px;\n}\n\n._pillar-chat-input-source {\n  display: block;\n  padding: 6px 10px;\n  margin-bottom: var(--pillar-spacing-xs);\n  font-size: var(--pillar-font-size-sm);\n  color: var(--pillar-primary);\n  background: var(--pillar-primary-light);\n  border-radius: var(--pillar-radius-md);\n  text-decoration: none;\n  cursor: pointer;\n}\n\n._pillar-chat-input-source:hover {\n  background: var(--pillar-primary-light-hover);\n}\n\n._pillar-chat-input-area {\n  padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n}\n\n._pillar-chat-input-wrapper {\n  display: flex;\n  flex-direction: column;\n  background: var(--pillar-bg-secondary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-xl);\n  transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-chat-input-wrapper:focus-within {\n  border-color: var(--pillar-primary);\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-chat-input-textarea {\n  display: block;\n  width: 100%;\n  padding: 12px 14px 8px;\n  font-size: var(--pillar-font-size-base);\n  font-family: var(--pillar-font-family);\n  line-height: 1.5;\n  color: var(--pillar-text);\n  background: transparent;\n  border: none;\n  outline: none;\n  resize: none;\n  overflow-y: hidden;\n  box-sizing: border-box;\n}\n\n._pillar-chat-input-textarea::placeholder {\n  color: var(--pillar-text-placeholder);\n}\n\n.pillar-chat-input-container {}\n.pillar-chat-input-messages {}\n.pillar-chat-input-message {}\n.pillar-chat-input-message-content {}\n.pillar-chat-input-sources {}\n.pillar-chat-input-area {}\n.pillar-chat-input-wrapper {}\n.pillar-chat-input-textarea {}\n\n/* ============================================================================\n   Chat Input Footer (contains send button)\n   ============================================================================ */\n\n._pillar-chat-input-footer {\n  display: flex;\n  justify-content: flex-end;\n  padding: 8px 10px;\n}\n\n/* ============================================================================\n   Send Button - In footer row, right aligned\n   Internal: _pillar-send-btn | Public: pillar-send-btn\n   ============================================================================ */\n\n._pillar-send-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  color: var(--pillar-text-muted);\n  background: var(--pillar-bg-tertiary);\n  border: none;\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-send-btn:hover:not(:disabled) {\n  color: #ffffff;\n  background: var(--pillar-primary);\n}\n\n._pillar-send-btn:disabled {\n  color: var(--pillar-text-placeholder);\n  background: var(--pillar-bg-tertiary);\n  cursor: not-allowed;\n}\n\n._pillar-send-btn svg {\n  width: 16px;\n  height: 16px;\n}\n\n.pillar-send-btn {}\n.pillar-chat-input-footer {}\n\n/* ============================================================================\n   Loading States\n   Internal: _pillar-loading | Public: pillar-loading\n   ============================================================================ */\n\n._pillar-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px var(--pillar-spacing-xl);\n  color: var(--pillar-text-muted);\n}\n\n._pillar-loading-spinner {\n  width: 24px;\n  height: 24px;\n  border: 2px solid var(--pillar-border);\n  border-top-color: var(--pillar-primary);\n  border-radius: 50%;\n  animation: pillar-spin 0.8s linear infinite;\n}\n\n@keyframes pillar-spin {\n  to { transform: rotate(360deg); }\n}\n\n.pillar-loading {}\n.pillar-loading-spinner {}\n\n/* ============================================================================\n   Progress Indicator (AI activity status)\n   Internal: _pillar-progress | Public: pillar-progress\n   ============================================================================ */\n\n._pillar-progress-indicator {\n  display: flex;\n  align-items: center;\n  gap: var(--pillar-spacing-sm);\n  padding: var(--pillar-spacing-sm) 0;\n}\n\n._pillar-progress-indicator ._pillar-loading-spinner {\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n\n._pillar-progress-message {\n  font-size: var(--pillar-font-size-sm);\n  color: var(--pillar-text-muted);\n  font-style: italic;\n}\n\n.pillar-progress-indicator {}\n.pillar-progress-message {}\n\n._pillar-thinking-shimmer {\n  display: inline-block;\n  font-size: var(--pillar-font-size-sm);\n  color: var(--pillar-text-muted);\n  background: linear-gradient(\n    90deg,\n    var(--pillar-text-muted) 0%,\n    var(--pillar-text-primary, #e5e5e5) 40%,\n    var(--pillar-text-muted) 60%\n  );\n  background-size: 200% 100%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: pillar-shimmer 2s ease-in-out infinite;\n}\n\n.pillar-thinking-shimmer {}\n\n/* ============================================================================\n   Empty States\n   Internal: _pillar-empty | Public: pillar-empty\n   ============================================================================ */\n\n._pillar-empty {\n  padding: 40px var(--pillar-spacing-xl);\n  text-align: center;\n  color: var(--pillar-text-muted);\n}\n\n._pillar-empty-icon {\n  width: 48px;\n  height: 48px;\n  margin: 0 auto var(--pillar-spacing-lg);\n  color: var(--pillar-border);\n}\n\n._pillar-empty-title {\n  font-size: var(--pillar-font-size-lg);\n  font-weight: 500;\n  color: var(--pillar-text);\n  margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-empty-description {\n  font-size: var(--pillar-font-size-base);\n}\n\n.pillar-empty {}\n.pillar-empty-icon {}\n.pillar-empty-title {}\n.pillar-empty-description {}\n\n/* ============================================================================\n   Section Titles\n   Internal: _pillar-section-title | Public: pillar-section-title\n   ============================================================================ */\n\n._pillar-section-title {\n  padding: var(--pillar-spacing-md) var(--pillar-spacing-xl) var(--pillar-spacing-sm);\n  font-size: var(--pillar-font-size-xs);\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--pillar-text-muted);\n}\n\n.pillar-section-title {}\n\n/* ============================================================================\n   Related Articles\n   ============================================================================ */\n\n._pillar-related-articles {\n  border-top: 1px solid var(--pillar-border);\n  margin-top: var(--pillar-spacing-2xl);\n  padding-top: var(--pillar-spacing-sm);\n}\n\n.pillar-related-articles {}\n\n/* ============================================================================\n   Scrollbar Styling\n   ============================================================================ */\n\n._pillar-content::-webkit-scrollbar,\n._pillar-chat-input-messages::-webkit-scrollbar {\n  width: 6px;\n}\n\n._pillar-content::-webkit-scrollbar-track,\n._pillar-chat-input-messages::-webkit-scrollbar-track {\n  background: var(--pillar-scrollbar-track);\n}\n\n._pillar-content::-webkit-scrollbar-thumb,\n._pillar-chat-input-messages::-webkit-scrollbar-thumb {\n  background: var(--pillar-scrollbar-thumb);\n  border-radius: 3px;\n}\n\n._pillar-content::-webkit-scrollbar-thumb:hover,\n._pillar-chat-input-messages::-webkit-scrollbar-thumb:hover {\n  background: var(--pillar-scrollbar-thumb-hover);\n}\n\n/* ============================================================================\n   Home View\n   ============================================================================ */\n\n._pillar-home-view {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: var(--pillar-spacing-xl);\n}\n\n._pillar-home-view-header {\n  text-align: center;\n  padding: var(--pillar-spacing-2xl) 0;\n}\n\n._pillar-home-view-icon {\n  font-size: 40px;\n  margin-bottom: var(--pillar-spacing-md);\n}\n\n._pillar-home-view-title {\n  font-size: var(--pillar-font-size-xl);\n  font-weight: 600;\n  color: var(--pillar-text);\n  margin: 0;\n}\n\n._pillar-home-view-questions {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pillar-spacing-sm);\n  margin-bottom: var(--pillar-spacing-xl);\n}\n\n._pillar-home-view-input-wrapper {\n  margin-top: auto;\n  display: flex;\n  flex-direction: column;\n  background: var(--pillar-bg-secondary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-xl);\n  transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-home-view-input-wrapper:focus-within {\n  border-color: var(--pillar-primary);\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-home-view-input {\n  display: block;\n  width: 100%;\n  padding: 12px 14px 8px;\n  font-size: var(--pillar-font-size-base);\n  font-family: var(--pillar-font-family);\n  line-height: 1.5;\n  color: var(--pillar-text);\n  background: transparent;\n  border: none;\n  outline: none;\n  resize: none;\n  overflow-y: hidden;\n  box-sizing: border-box;\n}\n\n._pillar-home-view-input::placeholder {\n  color: var(--pillar-text-placeholder);\n}\n\n._pillar-home-view-input-row {\n  display: flex;\n  justify-content: flex-end;\n  padding: 8px 10px;\n}\n\n._pillar-home-view-send-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  color: var(--pillar-text-muted);\n  background: var(--pillar-bg-tertiary);\n  border: none;\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-home-view-send-btn:hover:not(:disabled) {\n  color: #ffffff;\n  background: var(--pillar-primary);\n}\n\n._pillar-home-view-send-btn:disabled {\n  color: var(--pillar-text-placeholder);\n  background: var(--pillar-bg-tertiary);\n  cursor: not-allowed;\n}\n\n._pillar-home-view-send-btn svg {\n  width: 16px;\n  height: 16px;\n}\n\n.pillar-home-view {}\n.pillar-home-view-header {}\n.pillar-home-view-title {}\n.pillar-home-view-questions {}\n.pillar-home-view-input-wrapper {}\n.pillar-home-view-input {}\n.pillar-home-view-send-btn {}\n\n/* ============================================================================\n   Question Chip\n   ============================================================================ */\n\n._pillar-question-chip {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n  font-size: var(--pillar-font-size-base);\n  font-family: var(--pillar-font-family);\n  text-align: left;\n  color: var(--pillar-text);\n  background: var(--pillar-bg-secondary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-lg);\n  cursor: pointer;\n  transition: background var(--pillar-transition-fast), border-color var(--pillar-transition-fast);\n}\n\n._pillar-question-chip:hover {\n  border-color: var(--pillar-primary);\n}\n\n._pillar-question-chip-text {\n  flex: 1;\n}\n\n._pillar-question-chip-arrow {\n  color: var(--pillar-text-muted);\n  margin-left: var(--pillar-spacing-sm);\n  transition: color var(--pillar-transition-fast), transform var(--pillar-transition-fast);\n}\n\n._pillar-question-chip:hover ._pillar-question-chip-arrow {\n  color: var(--pillar-primary);\n  transform: translateX(2px);\n}\n\n._pillar-question-chip-skeleton {\n  height: 44px;\n  background: var(--pillar-bg-secondary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-lg);\n  overflow: hidden;\n}\n\n._pillar-question-chip-skeleton-bar {\n  width: 60%;\n  height: 14px;\n  margin: 15px var(--pillar-spacing-lg);\n  background: linear-gradient(90deg, var(--pillar-border) 25%, var(--pillar-bg-tertiary) 50%, var(--pillar-border) 75%);\n  background-size: 200% 100%;\n  animation: pillar-shimmer 1.5s infinite;\n  border-radius: var(--pillar-radius-sm);\n}\n\n@keyframes pillar-shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n.pillar-question-chip {}\n.pillar-question-chip-text {}\n.pillar-question-chip-arrow {}\n.pillar-question-chip-skeleton {}\n.pillar-question-chip-skeleton-bar {}\n\n/* ============================================================================\n   Standalone Chat View\n   Internal: _pillar-chat-view | Public: pillar-chat-view\n   ============================================================================ */\n\n._pillar-chat-view {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n\n._pillar-chat-view-messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: var(--pillar-spacing-xl);\n  display: flex;\n  flex-direction: column;\n}\n\n._pillar-chat-view-welcome {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  padding: var(--pillar-spacing-xl);\n  text-align: center;\n}\n\n._pillar-chat-view-welcome-icon {\n  font-size: 48px;\n  margin-bottom: var(--pillar-spacing-lg);\n}\n\n._pillar-chat-view-welcome-title {\n  font-size: var(--pillar-font-size-xl);\n  font-weight: 600;\n  color: var(--pillar-text);\n  margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-view-welcome-text {\n  font-size: var(--pillar-font-size-base);\n  color: var(--pillar-text-muted);\n  max-width: 280px;\n}\n\n/* History Loading Skeleton */\n._pillar-chat-history-loading {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pillar-spacing-lg);\n  padding: var(--pillar-spacing-md) 0;\n}\n\n._pillar-chat-history-loading-message {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pillar-spacing-xs);\n}\n\n._pillar-chat-history-loading-message--user {\n  align-items: flex-end;\n}\n\n._pillar-chat-history-loading-message--assistant {\n  align-items: flex-start;\n}\n\n._pillar-chat-history-loading-bar {\n  height: 16px;\n  border-radius: var(--pillar-radius-md);\n  background: linear-gradient(90deg, var(--pillar-bg-secondary) 25%, var(--pillar-border) 50%, var(--pillar-bg-secondary) 75%);\n  background-size: 200% 100%;\n  animation: pillar-shimmer 1.5s infinite;\n}\n\n._pillar-chat-history-loading-message--user ._pillar-chat-history-loading-bar {\n  background: linear-gradient(90deg, var(--pillar-bg-secondary) 25%, var(--pillar-border) 50%, var(--pillar-bg-secondary) 75%);\n  background-size: 200% 100%;\n  animation: pillar-shimmer 1.5s infinite;\n}\n\n.pillar-chat-history-loading {}\n.pillar-chat-history-loading-message--user {}\n.pillar-chat-history-loading-message--assistant {}\n.pillar-chat-history-loading-bar {}\n\n._pillar-chat-view-message {\n  margin-bottom: var(--pillar-spacing-lg);\n}\n\n._pillar-chat-view-message--user {\n  text-align: right;\n}\n\n._pillar-chat-view-message--assistant {\n  text-align: left;\n}\n\n.pillar-chat-view {}\n.pillar-chat-view-messages {}\n.pillar-chat-view-welcome {}\n.pillar-chat-view-message {}\n\n/* ============================================================================\n   User Message Bubble\n   Internal: _pillar-message-user | Public: pillar-message-user\n   ============================================================================ */\n\n._pillar-message-user {\n  display: inline-block;\n  max-width: 85%;\n  padding: 10px 14px;\n  border-radius: var(--pillar-spacing-lg);\n  border-bottom-right-radius: var(--pillar-radius-sm);\n  font-size: var(--pillar-font-size-base);\n  line-height: 1.5;\n  background: var(--pillar-primary);\n  color: #ffffff;\n  white-space: pre-wrap;\n  text-align: left;\n  word-wrap: break-word;\n}\n\n._pillar-message-user-images {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-message-user-image {\n  max-width: 120px;\n  max-height: 120px;\n  border-radius: var(--pillar-radius-md);\n  object-fit: cover;\n}\n\n.pillar-message-user {}\n.pillar-message-user-images {}\n.pillar-message-user-image {}\n\n/* ============================================================================\n   AI Response\n   Internal: _pillar-message-assistant | Public: pillar-message-assistant\n   ============================================================================ */\n\n._pillar-message-assistant {\n  font-size: var(--pillar-font-size-base);\n  line-height: 1.6;\n  color: var(--pillar-text-secondary);\n}\n\n._pillar-message-assistant p {\n  margin: 0 0 var(--pillar-spacing-md);\n}\n\n._pillar-message-assistant p:last-child {\n  margin-bottom: 0;\n}\n\n._pillar-message-assistant h2 {\n  font-size: var(--pillar-font-size-lg);\n  font-weight: 600;\n  color: var(--pillar-text);\n  margin: var(--pillar-spacing-lg) 0 var(--pillar-spacing-sm);\n}\n\n._pillar-message-assistant h3 {\n  font-size: var(--pillar-font-size-md);\n  font-weight: 600;\n  color: var(--pillar-text);\n  margin: 14px 0 6px;\n}\n\n._pillar-message-assistant h4 {\n  font-size: var(--pillar-font-size-base);\n  font-weight: 600;\n  color: var(--pillar-text);\n  margin: var(--pillar-spacing-md) 0 6px;\n}\n\n._pillar-message-assistant ul,\n._pillar-message-assistant ol {\n  margin: 0 0 var(--pillar-spacing-md);\n  padding-left: var(--pillar-spacing-2xl);\n  list-style-position: outside;\n}\n\n._pillar-message-assistant ul {\n  list-style-type: disc;\n}\n\n._pillar-message-assistant ol {\n  list-style-type: decimal;\n}\n\n._pillar-message-assistant li {\n  margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-message-assistant code {\n  padding: 2px 6px;\n  font-size: var(--pillar-font-size-sm);\n  background: var(--pillar-bg-tertiary);\n  border-radius: var(--pillar-radius-sm);\n  font-family: var(--pillar-font-mono);\n  color: var(--pillar-text);\n}\n\n._pillar-message-assistant pre {\n  margin: var(--pillar-spacing-md) 0;\n  padding: var(--pillar-spacing-md) 14px;\n  background: var(--pillar-code-bg);\n  border-radius: var(--pillar-radius-lg);\n  overflow-x: auto;\n}\n\n._pillar-message-assistant pre code {\n  padding: 0;\n  background: none;\n  color: var(--pillar-code-text);\n  font-size: var(--pillar-font-size-sm);\n  line-height: 1.5;\n}\n\n._pillar-message-assistant a {\n  color: var(--pillar-primary);\n  text-decoration: none;\n}\n\n._pillar-message-assistant a:hover {\n  text-decoration: underline;\n}\n\n._pillar-message-assistant strong {\n  font-weight: 600;\n  color: var(--pillar-text);\n}\n\n._pillar-message-assistant em {\n  font-style: italic;\n}\n\n.pillar-message-assistant {}\n\n/* ============================================================================\n   Chat Sources\n   Internal: _pillar-chat-sources | Public: pillar-chat-sources\n   ============================================================================ */\n\n._pillar-chat-sources {\n  margin-top: var(--pillar-spacing-md);\n  padding-top: var(--pillar-spacing-md);\n  border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-sources-title {\n  font-size: var(--pillar-font-size-xs);\n  font-weight: 500;\n  color: var(--pillar-text-muted);\n  margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-source {\n  display: block;\n  padding: var(--pillar-spacing-sm) var(--pillar-spacing-md);\n  margin-bottom: 6px;\n  font-size: var(--pillar-font-size-sm);\n  color: var(--pillar-primary);\n  background: var(--pillar-primary-light);\n  border-radius: var(--pillar-radius-lg);\n  text-decoration: none;\n  cursor: pointer;\n  transition: background var(--pillar-transition-fast);\n}\n\n._pillar-chat-source:hover {\n  background: var(--pillar-primary-light-hover);\n}\n\n.pillar-chat-sources {}\n.pillar-chat-sources-title {}\n.pillar-chat-source {}\n\n/* ============================================================================\n   Chat Actions (Suggested action buttons)\n   Internal: _pillar-chat-actions | Public: pillar-chat-actions\n   ============================================================================ */\n\n._pillar-chat-actions {\n  margin-top: var(--pillar-spacing-md);\n  padding-top: var(--pillar-spacing-md);\n  border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-actions-title {\n  font-size: var(--pillar-font-size-xs);\n  font-weight: 500;\n  color: var(--pillar-text-muted);\n  margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-actions-buttons {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pillar-spacing-sm);\n}\n\n/* Task buttons should wrap horizontally */\n._pillar-chat-actions-buttons > ._pillar-task-button-group {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--pillar-spacing-sm);\n}\n\n/* Confirm cards take full width */\n._pillar-chat-actions-buttons > .pillar-confirm-card-wrapper {\n  width: 100%;\n}\n\n.pillar-chat-actions {}\n.pillar-chat-actions-title {}\n.pillar-chat-actions-buttons {}\n\n/* ============================================================================\n   Chat View Input Area - Cursor-style design\n   ============================================================================ */\n\n._pillar-chat-view-input-area {\n  flex-shrink: 0;\n  padding: 0 var(--pillar-spacing-xl) var(--pillar-spacing-xl);\n  background: var(--pillar-bg);\n}\n\n._pillar-chat-view-input-wrapper {\n  display: flex;\n  flex-direction: column;\n  background: var(--pillar-bg-secondary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-xl);\n  transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-input-wrapper:focus-within {\n  border-color: var(--pillar-primary);\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-chat-view-input {\n  display: block;\n  width: 100%;\n  padding: 12px 14px 8px;\n  font-size: var(--pillar-font-size-base);\n  font-family: var(--pillar-font-family);\n  line-height: 1.5;\n  color: var(--pillar-text);\n  background: transparent;\n  border: none;\n  outline: none;\n  resize: none;\n  overflow-y: hidden;\n  box-sizing: border-box;\n}\n\n._pillar-chat-view-input::placeholder {\n  color: var(--pillar-text-placeholder);\n}\n\n._pillar-chat-view-input-row {\n  display: flex;\n  justify-content: flex-end;\n  padding: 8px 10px;\n}\n\n._pillar-chat-view-send-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  color: var(--pillar-text-muted);\n  background: var(--pillar-bg-tertiary);\n  border: none;\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-send-btn:hover:not(:disabled) {\n  color: #ffffff;\n  background: var(--pillar-primary);\n}\n\n._pillar-chat-view-send-btn:active:not(:disabled) {\n  transform: scale(0.95);\n}\n\n._pillar-chat-view-send-btn:disabled {\n  color: var(--pillar-text-placeholder);\n  background: var(--pillar-bg-tertiary);\n  cursor: not-allowed;\n}\n\n._pillar-chat-view-send-btn svg {\n  width: 16px;\n  height: 16px;\n}\n\n.pillar-chat-view-input-area {}\n.pillar-chat-view-input-wrapper {}\n.pillar-chat-view-input {}\n.pillar-chat-view-send-btn {}\n.pillar-chat-view-input-footer {}\n.pillar-chat-view-new-chat-btn {}\n\n/* New chat button styling */\n._pillar-chat-view-input-footer {\n  display: flex;\n  justify-content: center;\n  margin-top: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-view-new-chat-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  font-size: var(--pillar-font-size-sm);\n  font-weight: 500;\n  font-family: var(--pillar-font-family);\n  color: var(--pillar-text-muted);\n  background: transparent;\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-lg);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-new-chat-btn:hover {\n  color: var(--pillar-text);\n  background: var(--pillar-bg-secondary);\n  border-color: var(--pillar-text-muted);\n}\n\n._pillar-chat-view-new-chat-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n._pillar-chat-view-new-chat-icon svg {\n  width: 14px;\n  height: 14px;\n}\n\n/* Scrollbar for chat view */\n._pillar-chat-view-messages::-webkit-scrollbar {\n  width: 6px;\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-track {\n  background: var(--pillar-scrollbar-track);\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-thumb {\n  background: var(--pillar-scrollbar-thumb);\n  border-radius: 3px;\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-thumb:hover {\n  background: var(--pillar-scrollbar-thumb-hover);\n}\n\n/* ============================================================================\n   Chat Image Upload\n   ============================================================================ */\n\n._pillar-chat-view-input-area--dragging {\n  position: relative;\n  background: rgba(37, 99, 235, 0.05);\n}\n\n._pillar-chat-drop-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background: rgba(37, 99, 235, 0.1);\n  border: 2px dashed var(--pillar-primary);\n  border-radius: var(--pillar-radius-lg);\n  color: var(--pillar-primary);\n  font-size: var(--pillar-font-size-sm);\n  font-weight: 500;\n  z-index: 10;\n  pointer-events: none;\n}\n\n._pillar-chat-drop-overlay svg {\n  width: 24px;\n  height: 24px;\n}\n\n._pillar-chat-images-preview {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 12px 12px 4px 12px;\n}\n\n._pillar-chat-image-thumb {\n  position: relative;\n  width: 56px;\n  height: 56px;\n  border-radius: var(--pillar-radius-md);\n  overflow: hidden;\n  border: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-image-thumb img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n._pillar-chat-image-loading {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n._pillar-chat-image-error {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(239, 68, 68, 0.3);\n  color: #dc2626;\n  font-weight: bold;\n  font-size: 14px;\n}\n\n._pillar-chat-image-remove {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  width: 18px;\n  height: 18px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.6);\n  border: none;\n  border-radius: 50%;\n  color: white;\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--pillar-transition-fast);\n}\n\n._pillar-chat-image-thumb:hover ._pillar-chat-image-remove {\n  opacity: 1;\n}\n\n._pillar-chat-image-remove svg {\n  width: 10px;\n  height: 10px;\n}\n\n._pillar-chat-image-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  padding: 0;\n  color: var(--pillar-text-muted);\n  background: transparent;\n  border: none;\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  transition: color var(--pillar-transition-fast);\n}\n\n._pillar-chat-image-btn:hover:not(:disabled) {\n  color: var(--pillar-text);\n}\n\n._pillar-chat-image-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n._pillar-chat-image-btn svg {\n  width: 18px;\n  height: 18px;\n}\n\n.pillar-chat-images-preview {}\n.pillar-chat-image-thumb {}\n.pillar-chat-image-remove {}\n.pillar-chat-image-btn {}\n.pillar-chat-drop-overlay {}\n\n/* ============================================================================\n   Legacy Class Mappings (for backward compatibility)\n   Maps old BEM-style class names to new internal classes\n   ============================================================================ */\n\n.pillar-panel { }\n.pillar-panel--right { }\n.pillar-panel--left { }\n.pillar-panel--open { }\n.pillar-panel--manual { }\n.pillar-panel-root { }\n.pillar-panel-ui { }\n.pillar-panel__header { }\n.pillar-panel__header-left { }\n.pillar-panel__back-btn { }\n.pillar-panel__home-btn { }\n.pillar-panel__title { }\n.pillar-panel__close-btn { }\n.pillar-panel__content { }\n.pillar-search { }\n.pillar-search__input { }\n.pillar-search__icon { }\n.pillar-category-card { }\n.pillar-category-card__icon { }\n.pillar-category-card__content { }\n.pillar-category-card__title { }\n.pillar-category-card__description { }\n.pillar-category-card__count { }\n.pillar-article-card { }\n.pillar-article-card__title { }\n.pillar-article-card__excerpt { }\n.pillar-article-card__meta { }\n.pillar-article { }\n.pillar-article__title { }\n.pillar-article__content { }\n.pillar-category-header { }\n.pillar-category-header__title { }\n.pillar-category-header__description { }\n.pillar-chat-input-container { }\n.pillar-chat-input-container--expanded { }\n.pillar-chat-input__messages { }\n.pillar-chat-input__message { }\n.pillar-chat-input__message--user { }\n.pillar-chat-input__message--assistant { }\n.pillar-chat-input__message-content { }\n.pillar-chat-input__sources { }\n.pillar-chat-input__sources-title { }\n.pillar-chat-input__source { }\n.pillar-chat-input__area { }\n.pillar-chat-input__wrapper { }\n.pillar-chat-input__input { }\n.pillar-chat-input__send-btn { }\n.pillar-loading { }\n.pillar-loading__spinner { }\n.pillar-empty { }\n.pillar-empty__icon { }\n.pillar-empty__title { }\n.pillar-empty__description { }\n.pillar-section-title { }\n.pillar-related-articles { }\n.pillar-home-view { }\n.pillar-chat-view { }\n.pillar-chat-view__messages { }\n.pillar-chat-view__welcome { }\n.pillar-chat-view__welcome-icon { }\n.pillar-chat-view__welcome-title { }\n.pillar-chat-view__welcome-text { }\n.pillar-chat-view__message { }\n.pillar-chat-view__message--user { }\n.pillar-chat-view__message--assistant { }\n.pillar-chat-view__user-bubble { }\n.pillar-chat-view__ai-response { }\n.pillar-chat-view__sources { }\n.pillar-chat-view__sources-title { }\n.pillar-chat-view__source { }\n.pillar-chat-view__input-area { }\n.pillar-chat-view__input-wrapper { }\n.pillar-chat-view__input { }\n.pillar-chat-view__send-btn { }\n.pillar-backdrop { }\n.pillar-backdrop--visible { }\n\n/* ============================================================================\n   Task Button Component\n   ============================================================================ */\n\n.pillar-task-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: inherit;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  text-decoration: none;\n}\n\n.pillar-task-btn__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.pillar-task-btn__icon svg {\n  width: 16px;\n  height: 16px;\n}\n\n.pillar-task-btn__label {\n  white-space: nowrap;\n}\n\n/* Primary variant (default) */\n.pillar-task-btn--primary {\n  background: #2563eb;\n  color: #ffffff;\n  border-color: #2563eb;\n}\n\n.pillar-task-btn--primary:hover {\n  background: #1d4ed8;\n  border-color: #1d4ed8;\n}\n\n/* Default variant */\n.pillar-task-btn--default {\n  background: #f3f4f6;\n  color: #1a1a1a;\n  border-color: #e5e7eb;\n}\n\n.pillar-task-btn--default:hover {\n  background: #e5e7eb;\n}\n\n/* Secondary variant */\n.pillar-task-btn--secondary {\n  background: #eff6ff;\n  color: #2563eb;\n  border-color: #dbeafe;\n}\n\n.pillar-task-btn--secondary:hover {\n  background: #dbeafe;\n}\n\n/* Outline variant */\n.pillar-task-btn--outline {\n  background: transparent;\n  color: #2563eb;\n  border-color: #2563eb;\n}\n\n.pillar-task-btn--outline:hover {\n  background: #eff6ff;\n}\n\n/* Ghost variant */\n.pillar-task-btn--ghost {\n  background: transparent;\n  color: #6b7280;\n  border-color: transparent;\n}\n\n.pillar-task-btn--ghost:hover {\n  background: #f3f4f6;\n  color: #1a1a1a;\n}\n\n/* Task button group */\n.pillar-task-btn-group {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 12px;\n}\n\n/* Task suggestion card in chat */\n.pillar-task-suggestion {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: #f9fafb;\n  border: 1px solid #e5e7eb;\n  border-radius: 12px;\n  margin-top: 12px;\n}\n\n.pillar-task-suggestion__header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #6b7280;\n}\n\n.pillar-task-suggestion__header svg {\n  width: 14px;\n  height: 14px;\n}\n\n.pillar-task-suggestion__description {\n  font-size: 13px;\n  color: #374151;\n}\n\n/* ============================================================================\n   Feedback Icons\n   Internal: _pillar-feedback | Public: pillar-feedback\n   ============================================================================ */\n\n._pillar-message-assistant-wrapper {\n  position: relative;\n}\n\n._pillar-feedback-icons {\n  display: flex;\n  gap: 4px;\n  margin-top: var(--pillar-spacing-sm);\n  justify-content: flex-end;\n}\n\n._pillar-feedback-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  background: transparent;\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  color: var(--pillar-text-placeholder);\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-feedback-btn:hover {\n  color: var(--pillar-text-muted);\n  background: var(--pillar-bg-secondary);\n  border-color: var(--pillar-border);\n}\n\n._pillar-feedback-btn--active {\n  color: var(--pillar-primary);\n  background: var(--pillar-primary-light);\n  border-color: var(--pillar-primary);\n}\n\n._pillar-feedback-btn--active:hover {\n  color: var(--pillar-primary);\n  background: var(--pillar-primary-light-hover);\n}\n\n._pillar-feedback-btn svg {\n  width: 14px;\n  height: 14px;\n}\n\n.pillar-feedback-icons {}\n.pillar-feedback-btn {}\n.pillar-message-assistant-wrapper {}\n\n/* ============================================================================\n   Action Status Indicators\n   Internal: _pillar-action-status | Public: pillar-action-status\n   Shows completion status for auto-run actions (checkmark, X, or spinner)\n   ============================================================================ */\n\n._pillar-message-assistant-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n}\n\n._pillar-action-status {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n._pillar-action-status-indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n}\n\n._pillar-action-status-indicator svg {\n  width: 16px;\n  height: 16px;\n}\n\n._pillar-action-status-indicator--success {\n  color: #22c55e;\n}\n\n._pillar-action-status-indicator--failed {\n  color: #ef4444;\n}\n\n._pillar-action-status-indicator--pending {\n  color: var(--pillar-text-muted);\n  animation: pillar-spin 1s linear infinite;\n}\n\n@keyframes pillar-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n.pillar-action-status {}\n.pillar-action-status-indicator {}\n.pillar-message-assistant-content {}\n\n/* ============================================================================\n   Context Tags\n   Internal: _pillar-context-tag | Public: pillar-context-tag\n   Removable chips for user context items (highlighted text, etc.)\n   ============================================================================ */\n\n._pillar-context-tag-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 8px 14px 0;\n}\n\n._pillar-context-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  max-width: 200px;\n  padding: 4px 6px 4px 8px;\n  font-size: var(--pillar-font-size-sm);\n  color: var(--pillar-text-secondary);\n  background: var(--pillar-bg-tertiary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-md);\n  cursor: default;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-context-tag:hover {\n  background: var(--pillar-bg-secondary);\n  border-color: var(--pillar-text-muted);\n}\n\n._pillar-context-tag-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n  color: var(--pillar-primary);\n}\n\n._pillar-context-tag-icon svg {\n  width: 12px;\n  height: 12px;\n}\n\n._pillar-context-tag-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 1.3;\n}\n\n._pillar-context-tag-remove {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  margin-left: 2px;\n  color: var(--pillar-text-placeholder);\n  background: transparent;\n  border: none;\n  border-radius: var(--pillar-radius-sm);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-context-tag-remove:hover {\n  color: var(--pillar-text);\n  background: var(--pillar-border);\n}\n\n._pillar-context-tag-remove svg {\n  width: 12px;\n  height: 12px;\n}\n\n.pillar-context-tag-list {}\n.pillar-context-tag {}\n.pillar-context-tag-icon {}\n.pillar-context-tag-label {}\n.pillar-context-tag-remove {}\n\n/* Context tags inside user message bubbles need inverted colors */\n._pillar-message-user ._pillar-context-tag-list {\n  padding: 0 0 8px 0;\n}\n\n._pillar-message-user ._pillar-context-tag {\n  background: rgba(255, 255, 255, 0.2);\n  border-color: rgba(255, 255, 255, 0.3);\n  color: #ffffff;\n}\n\n._pillar-message-user ._pillar-context-tag:hover {\n  background: rgba(255, 255, 255, 0.3);\n  border-color: rgba(255, 255, 255, 0.4);\n}\n\n._pillar-message-user ._pillar-context-tag-icon {\n  color: #ffffff;\n}\n\n._pillar-message-user ._pillar-context-tag-label {\n  color: #ffffff;\n}\n\n/* ============================================================================\n   Unified Chat Input\n   Internal: _pillar-unified-input | Public: pillar-unified-input\n   Reusable input component with context tag support\n   ============================================================================ */\n\n._pillar-unified-input-wrapper {\n  display: flex;\n  flex-direction: column;\n  background: var(--pillar-bg-secondary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-xl);\n  transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-unified-input-wrapper:focus-within {\n  border-color: var(--pillar-primary);\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-unified-input {\n  display: block;\n  width: 100%;\n  padding: 12px 14px 8px;\n  font-size: var(--pillar-font-size-base);\n  font-family: var(--pillar-font-family);\n  line-height: 1.5;\n  color: var(--pillar-text);\n  background: transparent;\n  border: none;\n  outline: none;\n  resize: none;\n  overflow-y: hidden;\n  box-sizing: border-box;\n}\n\n._pillar-unified-input::placeholder {\n  color: var(--pillar-text-placeholder);\n}\n\n._pillar-unified-input:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n._pillar-unified-input-row {\n  display: flex;\n  justify-content: flex-end;\n  padding: 8px 10px;\n}\n\n._pillar-unified-send-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  color: #ffffff;\n  background: var(--pillar-primary);\n  border: none;\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-unified-send-btn:hover:not(:disabled) {\n  background: var(--pillar-primary-hover);\n}\n\n._pillar-unified-send-btn:disabled {\n  color: var(--pillar-text-placeholder);\n  background: var(--pillar-bg-tertiary);\n  cursor: not-allowed;\n}\n\n._pillar-unified-send-btn svg {\n  width: 16px;\n  height: 16px;\n}\n\n.pillar-unified-input-wrapper {}\n.pillar-unified-input {}\n.pillar-unified-input-row {}\n.pillar-unified-send-btn {}\n\n._pillar-unified-stop-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  color: #ffffff;\n  background: var(--pillar-text-secondary);\n  border: none;\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-unified-stop-btn:hover {\n  background: var(--pillar-text);\n}\n\n._pillar-unified-stop-btn svg {\n  width: 14px;\n  height: 14px;\n}\n\n.pillar-unified-stop-btn {}\n\n/* ============================================================================\n   Progress Row (for search, query, generating events)\n   Internal: _pillar-progress-row | Public: pillar-progress-row\n   ============================================================================ */\n\n._pillar-progress-events {\n  margin: 4px 0;\n}\n\n._pillar-progress-row {\n  margin: 1px 0;\n  padding: 1px 0;\n  font-size: 12px;\n  animation: pillar-progress-row-fade-in 0.3s ease-in-out;\n}\n\n._pillar-progress-row--error {\n  color: #dc2626;\n}\n\n@keyframes pillar-progress-row-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n._pillar-progress-row-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 0;\n}\n\n._pillar-progress-expand-icon {\n  font-size: 10px;\n  color: var(--pillar-text-muted);\n  transition: transform 0.2s ease;\n  flex-shrink: 0;\n}\n\n._pillar-progress-row-header[style*=\"cursor: pointer\"]:hover ._pillar-progress-expand-icon {\n  color: var(--pillar-text-secondary);\n}\n\n._pillar-progress-row-header[data-expanded=\"true\"] ._pillar-progress-expand-icon {\n  transform: rotate(90deg);\n}\n\n._pillar-progress-message {\n  color: var(--pillar-text-muted);\n  font-size: 12px;\n  font-style: italic;\n}\n\n._pillar-progress-no-results {\n  color: var(--pillar-text-muted);\n  font-size: 11px;\n  font-style: italic;\n  margin-left: 4px;\n}\n\n._pillar-progress-sources {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n._pillar-progress-source-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 0;\n  font-size: 11px;\n}\n\n._pillar-progress-source-link {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  text-decoration: none;\n  overflow: hidden;\n  color: inherit;\n}\n\n._pillar-progress-source-link:hover ._pillar-progress-source-title {\n  text-decoration: underline;\n}\n\n._pillar-progress-source-title {\n  font-weight: 400;\n  color: var(--pillar-text-muted);\n  font-size: 11px;\n}\n\n._pillar-progress-details {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n._pillar-progress-detail-item {\n  font-size: 11px;\n  color: var(--pillar-text-muted);\n  padding: 1px 0;\n}\n\n._pillar-progress-detail-action {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n}\n\n._pillar-progress-detail-name {\n  font-weight: 500;\n}\n\n._pillar-progress-detail-desc {\n  color: var(--pillar-text-muted);\n  opacity: 0.8;\n}\n\n._pillar-progress-content-wrapper {\n  position: relative;\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 0.2s ease-out;\n}\n\n._pillar-progress-content-wrapper--expanded {\n  grid-template-rows: 1fr;\n  margin-top: 6px;\n}\n\n._pillar-progress-content-container {\n  overflow: hidden;\n  min-height: 0;\n  scrollbar-width: thin;\n  scrollbar-color: var(--pillar-scrollbar-thumb) transparent;\n}\n\n._pillar-progress-content-wrapper--expanded ._pillar-progress-content-container {\n  max-height: 180px;\n  overflow-y: auto;\n}\n\n._pillar-progress-content-container::-webkit-scrollbar {\n  width: 4px;\n}\n\n._pillar-progress-content-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n._pillar-progress-content-container::-webkit-scrollbar-thumb {\n  background-color: var(--pillar-scrollbar-thumb);\n  border-radius: 2px;\n}\n\n._pillar-progress-content-gradient {\n  position: absolute;\n  bottom: 0;\n  left: 16px;\n  right: 0;\n  height: 20px;\n  background: linear-gradient(transparent, var(--pillar-bg));\n  pointer-events: none;\n}\n\n._pillar-progress-text {\n  font-size: 11px;\n  color: var(--pillar-text-muted);\n  line-height: 1.4;\n  word-break: break-word;\n}\n\n._pillar-progress-text p {\n  margin: 0 0 4px 0;\n}\n\n._pillar-progress-text p:last-child {\n  margin-bottom: 0;\n}\n\n._pillar-progress-text ol,\n._pillar-progress-text ul {\n  margin: 2px 0;\n  padding-left: 16px;\n}\n\n._pillar-progress-text li {\n  margin-bottom: 1px;\n}\n\n._pillar-progress-text br {\n  display: block;\n  content: \"\";\n  margin-top: 2px;\n}\n\n/* Chevron indicator for progress rows - rotates based on expanded state */\n/* Positioned inline next to label, hidden by default, shown on hover */\n._pillar-progress-chevron {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n  font-size: 10px;\n  color: var(--pillar-text-muted);\n  transition: transform 0.2s ease, opacity 0.15s ease;\n  opacity: 0;\n}\n\n._pillar-progress-row:hover ._pillar-progress-chevron {\n  opacity: 1;\n}\n\n._pillar-progress-error-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n  font-size: 10px;\n  color: var(--pillar-error, #dc2626);\n}\n\n/* Tool call arguments (inputs) */\n._pillar-progress-arguments {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px 10px;\n  margin-bottom: 6px;\n  font-size: 11px;\n  line-height: 1.4;\n}\n\n._pillar-progress-argument-key {\n  color: var(--pillar-text-muted);\n}\n\n._pillar-progress-argument-value {\n  color: var(--pillar-text-secondary);\n}\n\n/* Text preview for streaming content */\n._pillar-progress-text-preview-wrapper {\n  position: relative;\n  margin-top: 4px;\n}\n\n._pillar-progress-text-preview {\n  max-height: 180px;\n  overflow-y: auto;\n  font-size: 11px;\n  color: var(--pillar-text-muted);\n  line-height: 1.4;\n  scroll-behavior: smooth;\n  white-space: pre-wrap;\n  word-break: break-word;\n  scrollbar-width: thin;\n  scrollbar-color: var(--pillar-scrollbar-thumb) transparent;\n}\n\n/* All content inside progress text preview should stay muted and small.\n   Markdown headers, paragraphs, etc. must not look like answer text. */\n._pillar-progress-text-preview * {\n  color: inherit !important;\n  font-size: inherit !important;\n  font-weight: normal !important;\n  line-height: inherit !important;\n  margin: 0 !important;\n}\n\n/* Top gradient - fades out older text at the top */\n._pillar-progress-text-gradient {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 20px;\n  background: linear-gradient(to bottom, var(--pillar-bg), transparent);\n  pointer-events: none;\n  z-index: 1;\n}\n\n._pillar-progress-text-preview::-webkit-scrollbar {\n  width: 4px;\n}\n\n._pillar-progress-text-preview::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n._pillar-progress-text-preview::-webkit-scrollbar-thumb {\n  background-color: var(--pillar-scrollbar-thumb);\n  border-radius: 2px;\n}\n\n/* Active state indicator */\n._pillar-progress-row--active ._pillar-progress-message {\n  font-weight: 500;\n}\n\n/* Long text truncation for labels */\n._pillar-progress-message {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 300px;\n}\n\n/* Children/sub-items styling */\n._pillar-progress-children {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n._pillar-progress-child-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 0;\n  font-size: 11px;\n}\n\n._pillar-progress-child-link {\n  color: var(--pillar-text-muted);\n  text-decoration: none;\n  transition: color 0.15s ease;\n}\n\n._pillar-progress-child-link:hover {\n  color: var(--pillar-text-secondary);\n  text-decoration: underline;\n}\n\n._pillar-progress-child-label {\n  color: var(--pillar-text-muted);\n  font-size: 11px;\n}\n\n/* ============================================================================\n   Progress Group (collapsible tool event groups)\n   Internal: _pillar-progress-group | Public: pillar-progress-group\n   ============================================================================ */\n\n._pillar-progress-group {\n  margin: 1px 0;\n  animation: pillar-progress-row-fade-in 0.3s ease-in-out;\n}\n\n._pillar-progress-group-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 0;\n  cursor: pointer;\n  font-size: 12px;\n  color: var(--pillar-text-secondary, #6b7280);\n  user-select: none;\n  border-radius: 4px;\n  transition: color 0.15s ease;\n}\n\n._pillar-progress-group-header:hover {\n  color: var(--pillar-text-primary, #374151);\n}\n\n._pillar-progress-group-chevron {\n  flex-shrink: 0;\n  font-size: 8px;\n  line-height: 1;\n  color: inherit;\n}\n\n._pillar-progress-group-summary {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._pillar-progress-group-active-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--pillar-brand, #3b82f6);\n  flex-shrink: 0;\n  animation: pillar-progress-group-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes pillar-progress-group-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.4; }\n}\n\n._pillar-progress-group-children {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 0.2s ease;\n  overflow: hidden;\n}\n\n._pillar-progress-group-children--expanded {\n  grid-template-rows: 1fr;\n}\n\n._pillar-progress-group-children-inner {\n  min-height: 0;\n  padding-left: 14px;\n}\n\n/* Nested rows inside groups have reduced spacing */\n._pillar-progress-row--nested {\n  margin: 0;\n  padding: 0;\n}\n\n._pillar-progress-row--nested ._pillar-progress-row-header {\n  padding: 2px 0;\n}\n\n._pillar-progress-row--nested ._pillar-progress-message {\n  font-size: 11px;\n}\n\n.pillar-progress-events {}\n.pillar-progress-chevron {}\n.pillar-progress-error-icon {}\n.pillar-progress-text-preview-wrapper {}\n.pillar-progress-text-preview {}\n.pillar-progress-text-gradient {}\n.pillar-progress-children {}\n.pillar-progress-child-item {}\n.pillar-progress-child-link {}\n.pillar-progress-child-label {}\n.pillar-progress-row {}\n.pillar-progress-row-header {}\n.pillar-progress-expand-icon {}\n.pillar-progress-message {}\n.pillar-progress-no-results {}\n.pillar-progress-sources {}\n.pillar-progress-source-item {}\n.pillar-progress-source-link {}\n.pillar-progress-source-title {}\n.pillar-progress-arguments {}\n.pillar-progress-argument {}\n.pillar-progress-argument-key {}\n.pillar-progress-argument-value {}\n.pillar-progress-content-wrapper {}\n.pillar-progress-content-container {}\n.pillar-progress-content-gradient {}\n.pillar-progress-text {}\n.pillar-progress-group {}\n.pillar-progress-group-header {}\n.pillar-progress-group-chevron {}\n.pillar-progress-group-summary {}\n.pillar-progress-group-active-dot {}\n.pillar-progress-group-children {}\n\n/* ============================================================================\n   Resume Prompt (Session Resumption)\n   Internal: _pillar-resume-prompt | Public: pillar-resume-prompt\n   Shows when user reconnects and has an interrupted session to resume\n   ============================================================================ */\n\n._pillar-resume-prompt {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pillar-spacing-md);\n  padding: var(--pillar-spacing-lg);\n  margin: var(--pillar-spacing-md) 0;\n  background: var(--pillar-bg-secondary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-lg);\n}\n\n._pillar-resume-prompt--seamless {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--pillar-spacing-sm);\n  padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n  background: transparent;\n  border: none;\n  justify-content: center;\n}\n\n._pillar-resume-prompt-spinner {\n  width: 16px;\n  height: 16px;\n  border: 2px solid var(--pillar-border);\n  border-top-color: var(--pillar-primary);\n  border-radius: 50%;\n  animation: pillar-spin 0.8s linear infinite;\n  flex-shrink: 0;\n}\n\n._pillar-resume-prompt-text {\n  font-size: var(--pillar-font-size-sm);\n  color: var(--pillar-text-muted);\n  font-style: italic;\n}\n\n._pillar-resume-prompt-content {\n  display: flex;\n  gap: var(--pillar-spacing-md);\n  align-items: flex-start;\n}\n\n._pillar-resume-prompt-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n  color: var(--pillar-primary);\n  background: var(--pillar-primary-light);\n  border-radius: var(--pillar-radius-md);\n}\n\n._pillar-resume-prompt-body {\n  flex: 1;\n  min-width: 0;\n}\n\n._pillar-resume-prompt-title {\n  font-size: var(--pillar-font-size-base);\n  font-weight: 600;\n  color: var(--pillar-text);\n  margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-resume-prompt-message {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  font-size: var(--pillar-font-size-sm);\n  color: var(--pillar-text-muted);\n}\n\n._pillar-resume-prompt-user-msg {\n  font-style: italic;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._pillar-resume-prompt-summary {\n  font-size: var(--pillar-font-size-xs);\n  color: var(--pillar-text-placeholder);\n}\n\n._pillar-resume-prompt-actions {\n  display: flex;\n  gap: var(--pillar-spacing-sm);\n  justify-content: flex-end;\n}\n\n._pillar-resume-prompt-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  font-size: var(--pillar-font-size-sm);\n  font-weight: 500;\n  font-family: var(--pillar-font-family);\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n  border: 1px solid transparent;\n}\n\n._pillar-resume-prompt-btn--primary {\n  background: var(--pillar-primary);\n  color: #ffffff;\n  border-color: var(--pillar-primary);\n}\n\n._pillar-resume-prompt-btn--primary:hover {\n  background: var(--pillar-primary-hover);\n  border-color: var(--pillar-primary-hover);\n}\n\n._pillar-resume-prompt-btn--ghost {\n  background: transparent;\n  color: var(--pillar-text-muted);\n  border-color: transparent;\n}\n\n._pillar-resume-prompt-btn--ghost:hover {\n  background: var(--pillar-bg-tertiary);\n  color: var(--pillar-text);\n}\n\n._pillar-resume-prompt-btn svg {\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n}\n\n.pillar-resume-prompt {}\n.pillar-resume-prompt-spinner {}\n.pillar-resume-prompt-text {}\n.pillar-resume-prompt-content {}\n.pillar-resume-prompt-icon {}\n.pillar-resume-prompt-body {}\n.pillar-resume-prompt-title {}\n.pillar-resume-prompt-message {}\n.pillar-resume-prompt-user-msg {}\n.pillar-resume-prompt-summary {}\n.pillar-resume-prompt-actions {}\n.pillar-resume-prompt-btn {}\n";

package/dist/components/Plan/InlinePlanView.d.ts

@@ -1,24 +0,0 @@
-/**
- * InlinePlanView Component
- *
- * A compact inline version of the plan display for embedding
- * within chat bubbles when plans are short (≤3 steps).
- *
- * This provides a more integrated experience where the plan
- * appears as part of the conversation flow rather than a
- * separate overlay.
- */
-import { h } from 'preact';
-import type { ExecutionPlan } from '../../core/plan';
-/** Maximum steps before using full PlanView instead of inline */
-export declare const INLINE_PLAN_MAX_STEPS = 3;
-interface InlinePlanViewProps {
-    plan: ExecutionPlan;
-}
-export declare function InlinePlanView({ plan }: InlinePlanViewProps): h.JSX.Element;
-/**
- * Check if a plan should be displayed inline.
- */
-export declare function shouldDisplayInline(plan: ExecutionPlan): boolean;
-export declare const INLINE_PLAN_STYLES = "\n/* Inline Plan Container */\n.pillar-inline-plan {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 4px 0;\n}\n\n/* Approach text - simple inline text */\n.pillar-inline-plan__approach {\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--pillar-text-secondary, #6b7280);\n  margin-bottom: 2px;\n}\n\n.pillar-inline-plan__approach p {\n  margin: 0 0 4px 0;\n}\n\n.pillar-inline-plan__approach p:last-child {\n  margin-bottom: 0;\n}\n\n/* Steps list */\n.pillar-inline-plan__steps {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n/* Individual step */\n.pillar-inline-plan__step {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 8px;\n  border-radius: 6px;\n  font-size: 13px;\n  background: transparent;\n  transition: all 0.15s ease;\n}\n\n.pillar-inline-plan__step-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-inline-plan__step-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n}\n\n.pillar-inline-plan__step-text {\n  color: var(--pillar-text-primary, #374151);\n  line-height: 1.4;\n}\n\n.pillar-inline-plan__step-instruction {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.pillar-inline-plan__action-badge {\n  display: inline-block;\n  padding: 1px 5px;\n  font-size: 9px;\n  font-weight: 600;\n  text-transform: uppercase;\n  background: var(--pillar-warning, #f59e0b);\n  color: white;\n  border-radius: 3px;\n  flex-shrink: 0;\n}\n\n.pillar-inline-plan__instruction-text {\n  font-size: 11px;\n  color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-inline-plan__step-actions {\n  display: flex;\n  gap: 4px;\n}\n\n/* Step states */\n.pillar-inline-plan__step--pending {\n  opacity: 0.6;\n}\n\n.pillar-inline-plan__step--ready .pillar-inline-plan__step-icon {\n  color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-inline-plan__step--awaiting_confirmation {\n  background: var(--pillar-bg-warning-subtle, rgba(251, 191, 36, 0.1));\n}\n\n.pillar-inline-plan__step--awaiting_confirmation .pillar-inline-plan__step-icon {\n  color: var(--pillar-warning-dark, #d97706);\n}\n\n.pillar-inline-plan__step--executing .pillar-inline-plan__step-icon,\n.pillar-inline-plan__step--awaiting_result .pillar-inline-plan__step-icon {\n  color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-inline-plan__step--completed .pillar-inline-plan__step-icon {\n  color: var(--pillar-success, #059669);\n}\n\n.pillar-inline-plan__step--completed .pillar-inline-plan__step-text {\n  color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-inline-plan__step--skipped {\n  opacity: 0.5;\n}\n\n.pillar-inline-plan__step--skipped .pillar-inline-plan__step-text {\n  text-decoration: line-through;\n}\n\n.pillar-inline-plan__step--failed {\n  background: var(--pillar-bg-danger-subtle, rgba(220, 38, 38, 0.1));\n}\n\n.pillar-inline-plan__step--failed .pillar-inline-plan__step-icon {\n  color: var(--pillar-danger, #dc2626);\n}\n\n/* Guidance step styles */\n.pillar-inline-plan__step--guidance {\n  background: var(--pillar-bg-info-subtle, rgba(59, 130, 246, 0.08));\n  border-left: 2px solid var(--pillar-info, #3b82f6);\n  padding-left: 10px;\n}\n\n.pillar-inline-plan__step--guidance .pillar-inline-plan__step-icon {\n  color: var(--pillar-info, #3b82f6);\n}\n\n.pillar-inline-plan__step--guidance.pillar-inline-plan__step--completed {\n  background: transparent;\n  border-left-color: var(--pillar-success, #059669);\n}\n\n.pillar-inline-plan__guidance-text {\n  font-size: 11px;\n  color: var(--pillar-text-secondary, #6b7280);\n  line-height: 1.4;\n  margin-top: 2px;\n}\n\n.pillar-inline-plan__guidance-sources {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-top: 4px;\n}\n\n/* Inline UI Card Container */\n.pillar-inline-plan__inline-card {\n  margin-top: 6px;\n}\n\n.pillar-inline-plan__inline-card .pillar-confirm-card {\n  margin: 0;\n}\n\n.pillar-inline-plan__source-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 6px;\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--pillar-primary, #2563eb);\n  background: var(--pillar-bg-primary-subtle, rgba(37, 99, 235, 0.1));\n  border-radius: 3px;\n  text-decoration: none;\n  transition: all 0.15s ease;\n}\n\n.pillar-inline-plan__source-link:hover {\n  background: var(--pillar-bg-primary-subtle-hover, rgba(37, 99, 235, 0.15));\n  text-decoration: underline;\n}\n\n/* Buttons */\n.pillar-inline-plan__btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 3px 8px;\n  font-size: 11px;\n  font-weight: 500;\n  font-family: inherit;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: none;\n}\n\n.pillar-inline-plan__btn--confirm {\n  background: var(--pillar-success, #059669);\n  color: #ffffff;\n  min-width: 24px;\n}\n\n.pillar-inline-plan__btn--confirm:hover {\n  background: var(--pillar-success-hover, #047857);\n}\n\n.pillar-inline-plan__btn--skip {\n  background: transparent;\n  color: var(--pillar-text-secondary, #6b7280);\n  border: 1px solid var(--pillar-border, #d1d5db);\n}\n\n.pillar-inline-plan__btn--skip:hover {\n  background: var(--pillar-bg-tertiary, #f3f4f6);\n}\n\n.pillar-inline-plan__btn--retry {\n  background: var(--pillar-danger, #dc2626);\n  color: #ffffff;\n}\n\n.pillar-inline-plan__btn--retry:hover {\n  background: var(--pillar-danger-hover, #b91c1c);\n}\n\n.pillar-inline-plan__btn--done {\n  background: var(--pillar-primary, #2563eb);\n  color: #ffffff;\n}\n\n.pillar-inline-plan__btn--done:hover {\n  background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n.pillar-inline-plan__btn--start {\n  background: var(--pillar-primary, #2563eb);\n  color: #ffffff;\n}\n\n.pillar-inline-plan__btn--start:hover {\n  background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n.pillar-inline-plan__btn--cancel {\n  background: transparent;\n  color: var(--pillar-text-secondary, #6b7280);\n  border: 1px solid var(--pillar-border, #d1d5db);\n}\n\n.pillar-inline-plan__btn--cancel:hover {\n  background: var(--pillar-bg-tertiary, #f3f4f6);\n  color: var(--pillar-danger, #dc2626);\n  border-color: var(--pillar-danger, #dc2626);\n}\n\n/* Footer */\n.pillar-inline-plan__footer {\n  display: flex;\n  gap: 8px;\n  padding-top: 6px;\n}\n\n/* Status messages */\n.pillar-inline-plan__status {\n  font-size: 12px;\n  font-weight: 500;\n  padding: 4px 8px;\n  border-radius: 4px;\n}\n\n.pillar-inline-plan__status--success {\n  color: var(--pillar-success, #059669);\n  background: var(--pillar-bg-success-subtle, rgba(5, 150, 105, 0.1));\n}\n\n.pillar-inline-plan__status--error {\n  color: var(--pillar-danger, #dc2626);\n  background: var(--pillar-bg-danger-subtle, rgba(220, 38, 38, 0.1));\n}\n\n.pillar-inline-plan__status--cancelled {\n  color: var(--pillar-text-tertiary, #9ca3af);\n  background: var(--pillar-bg-tertiary, #f3f4f6);\n}\n\n/* Spinner animation */\n@keyframes pillar-inline-plan-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n.pillar-inline-plan__spinner {\n  animation: pillar-inline-plan-spin 1s linear infinite;\n}\n";
-export {};