@pillar-ai/sdk 0.1.23 → 0.1.24

package/README.md

@@ -116,7 +116,7 @@ pillar.onTask("update_preferences", (data) => {
 
 ### Code-First Action Definitions
 
-For production, define actions in code and sync them via the `pillar-sync` CLI during CI/CD. See [Setting Up Actions](https://trypillar.com/docs/guides/actions) for details.
+For production, define tools in code and sync them via the `pillar-sync` CLI during CI/CD. See [Setting Up Tools](https://trypillar.com/docs/guides/tools) for details.
 
 ## Configuration
 

package/dist/actions/index.d.ts

@@ -29,5 +29,5 @@
  *
  * @module actions
  */
-export type { ActionType, ActionDataSchema, ActionDefinition, ActionDefinitions, ActionManifest, ActionManifestEntry, ClientInfo, Platform, SyncActionDefinition, SyncActionDefinitions, ActionTypeDataMap, NavigateActionData, TriggerActionData, InlineUIData, ExternalLinkData, CopyTextData, ActionDataType, ActionNames, TypedTaskHandler, TypedOnTask, TypedPillarMethods, } from './types';
+export type { ActionType, ActionDataSchema, ActionDefinition, ActionDefinitions, ActionManifest, ActionManifestEntry, ClientInfo, Platform, SyncActionDefinition, SyncActionDefinitions, ActionTypeDataMap, NavigateActionData, TriggerActionData, InlineUIData, ExternalLinkData, CopyTextData, ActionDataType, ActionNames, TypedTaskHandler, TypedOnTask, TypedPillarMethods, ActionResult, ActionSchema, } from './types';
 export { setClientInfo, getClientInfo, getHandler, getActionDefinition, hasAction, getActionNames, getManifest, clearRegistry, getActionCount, } from './registry';

package/dist/actions/types.d.ts

@@ -439,3 +439,92 @@ export interface TypedOnTask<TActions extends SyncActionDefinitions | ActionDefi
 export interface TypedPillarMethods<TActions extends SyncActionDefinitions | ActionDefinitions> {
     onTask: TypedOnTask<TActions>;
 }
+/**
+ * Result returned from an action's execute function.
+ *
+ * Follows the MCP tool result format. Plain objects are also accepted
+ * by the SDK and normalized to this shape automatically.
+ */
+export interface ActionResult {
+    content: Array<{
+        type: 'text';
+        text: string;
+    } | {
+        type: 'image';
+        data: string;
+        mimeType: string;
+    }>;
+    isError?: boolean;
+}
+/**
+ * Unified action definition that co-locates metadata and handler.
+ *
+ * Use with `pillar.defineAction()` or the `usePillarAction()` React hook.
+ * The CLI scanner (`npx pillar-sync --scan ./src`) discovers these
+ * definitions automatically — no barrel file needed.
+ *
+ * @template TInput - Type of the input object passed to `execute`
+ *
+ * @example
+ * ```ts
+ * pillar.defineAction({
+ *   name: 'add_to_cart',
+ *   description: 'Add a product to the shopping cart',
+ *   inputSchema: {
+ *     type: 'object',
+ *     properties: {
+ *       productId: { type: 'string', description: 'Product ID' },
+ *       quantity: { type: 'number', description: 'Quantity to add' },
+ *     },
+ *     required: ['productId', 'quantity'],
+ *   },
+ *   execute: async ({ productId, quantity }) => {
+ *     await cartApi.add(productId, quantity);
+ *     return { content: [{ type: 'text', text: 'Added to cart' }] };
+ *   },
+ * });
+ * ```
+ */
+export interface ActionSchema<TInput = Record<string, unknown>> {
+    /** Unique action name (e.g., 'add_to_cart') */
+    name: string;
+    /** Human-readable description for AI matching */
+    description: string;
+    /**
+     * Type of action - determines how the SDK handles it and organizes it in the UI.
+     */
+    type?: ActionType;
+    /**
+     * JSON Schema describing the input parameters.
+     * The AI extracts structured data from the conversation to populate these.
+     */
+    inputSchema?: {
+        type: 'object';
+        properties: Record<string, unknown>;
+        required?: string[];
+    };
+    /**
+     * Example user queries that should trigger this action.
+     * Used for semantic matching alongside the description.
+     */
+    examples?: string[];
+    /**
+     * Whether to auto-execute without user confirmation.
+     * @default false
+     */
+    autoRun?: boolean;
+    /**
+     * Whether the action completes immediately after execution.
+     * @default true
+     */
+    autoComplete?: boolean;
+    /**
+     * Handler function executed when the AI invokes this action.
+     *
+     * Can return:
+     * - An `ActionResult` with MCP-style content blocks
+     * - A plain object (SDK normalizes it for the agent)
+     * - `void` if the action has no return value
+     */
+    execute: (input: TInput) => Promise<ActionResult | unknown | void> | ActionResult | unknown | void;
+}

package/dist/api/client.d.ts

@@ -80,6 +80,10 @@ export interface ServerEmbedConfig {
             primary?: string;
         };
     };
+    security?: {
+        /** False when the requesting origin is not in the product's allowed domains list. */
+        originAllowed?: boolean;
+    };
 }
 /**
  * Conversation summary in history list.

package/dist/cli/sync.js

@@ -36,6 +36,7 @@ Usage:
 Arguments:
   --scan <dir>       Directory to scan for usePillarTool/defineTool calls
   --local            Use localhost:8003 as the API URL (for local development)
+  --force            Force sync even if manifest hash matches an existing deployment
   --help             Show this help message
 
 Environment Variables:
@@ -436,8 +437,12 @@ async function main() {
   if (manifest.agentGuidance) {
     requestBody.agent_guidance = manifest.agentGuidance;
   }
-  const syncUrl = `${apiUrl}/api/admin/configs/${slug}/actions/sync/?async=true`;
+  const forceSync = args.force === true;
+  const syncUrl = `${apiUrl}/api/admin/configs/${slug}/actions/sync/?async=true${forceSync ? "&force=true" : ""}`;
   console.log(`[pillar-sync] POST ${syncUrl}`);
+  if (forceSync) {
+    console.log(`[pillar-sync] Force sync enabled \u2014 bypassing unchanged check`);
+  }
   try {
     const response = await fetch(syncUrl, {
       method: "POST",

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

@@ -3,4 +3,4 @@
  * 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";
+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

@@ -17,4 +17,4 @@ export declare function generateThemeVariables(colors: ThemeColors, prefix?: str
  * 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/* ============================================================================\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/* 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.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-content-wrapper {}\n.pillar-progress-content-container {}\n.pillar-progress-content-gradient {}\n.pillar-progress-text {}\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";
+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/core/Pillar.d.ts

@@ -102,12 +102,12 @@ export declare class Pillar {
      * Get debug log entries (for debug panel).
      * Returns empty array if debug mode is not enabled.
      */
-    getDebugLog(): import('../utils/debug').DebugEntry[];
+    getDebugLog(): import("../utils/debug").DebugEntry[];
     /**
      * Subscribe to debug log updates (for debug panel).
      * Returns unsubscribe function.
      */
-    onDebugLog(callback: (entries: import('../utils/debug').DebugEntry[]) => void): () => void;
+    onDebugLog(callback: (entries: import("../utils/debug").DebugEntry[]) => void): () => void;
     /**
      * Clear debug log entries.
      */
@@ -298,7 +298,7 @@ export declare class Pillar {
      * await pillar.handlePageInteraction({ operation: 'type', ref: 'pr-b1', value: 'hello' });
      */
     handlePageInteraction(params: {
-        operation: 'click' | 'type' | 'select' | 'focus' | 'toggle';
+        operation: "click" | "type" | "select" | "focus" | "toggle";
         ref: string;
         value?: string;
     }): Promise<{

package/dist/core/config.d.ts

@@ -351,6 +351,13 @@ export interface PillarConfig {
     sidebarTabs?: SidebarTabConfig[];
     /** API base URL. Defaults to Pillar's production API. */
     apiBaseUrl?: string;
+    /**
+     * Enable OpenTelemetry tracing. Browser spans are exported to the server's
+     * Cloud Trace project via the OTLP proxy endpoint. Also enabled when debug
+     * is true.
+     * @default false
+     */
+    tracing?: boolean;
     /** Theme customization. */
     theme?: ThemeConfig;
     /**
@@ -438,6 +445,8 @@ export interface ResolvedConfig {
     version?: string;
     /** Debug mode enabled */
     debug: boolean;
+    /** OpenTelemetry tracing enabled */
+    tracing: boolean;
     panel: ResolvedPanelConfig;
     edgeTrigger: Required<EdgeTriggerConfig>;
     mobileTrigger: ResolvedMobileTriggerConfig;
@@ -472,6 +481,10 @@ export interface ServerEmbedConfig {
             primary?: string;
         };
     };
+    security?: {
+        /** False when the requesting origin is not in the product's allowed domains list. */
+        originAllowed?: boolean;
+    };
 }
 /**
  * Merge server config with local config.