@pillar-ai/sdk 0.1.21 → 0.1.22

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\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";
+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";

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

@@ -0,0 +1,16 @@
+/**
+ * Tab Navigation Component
+ * Vertical tabs on the right edge of the panel for switching between Assistant and Support
+ */
+import { h } from 'preact';
+import type { ResolvedSupportConfig } from '../../core/config';
+interface TabNavigationProps {
+    supportConfig: ResolvedSupportConfig;
+}
+export declare function TabNavigation({ supportConfig }: TabNavigationProps): h.JSX.Element;
+/**
+ * CSS Styles for Tab Navigation
+ * Should be appended to PANEL_STYLES
+ */
+export declare const TAB_NAVIGATION_STYLES = "\n/* ============================================================================\n   Panel Wrapper (for tab layout)\n   Horizontal flex container with main content + tab nav\n   ============================================================================ */\n\n._pillar-panel-wrapper {\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  overflow: hidden;\n}\n\n._pillar-panel-wrapper > ._pillar-panel-ui {\n  flex: 1;\n  min-width: 0;\n}\n\n.pillar-panel-wrapper {}\n\n/* ============================================================================\n   Tab Navigation\n   Vertical tabs on the right edge of the panel\n   ============================================================================ */\n\n._pillar-tab-nav {\n  display: flex;\n  flex-direction: column;\n  width: 48px;\n  min-width: 48px;\n  background: var(--pillar-bg-secondary);\n  border-left: 1px solid var(--pillar-border);\n  padding: var(--pillar-spacing-sm) 0;\n  gap: var(--pillar-spacing-xs);\n}\n\n._pillar-tab {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 2px;\n  padding: var(--pillar-spacing-sm) var(--pillar-spacing-xs);\n  margin: 0 var(--pillar-spacing-xs);\n  border: none;\n  border-radius: var(--pillar-radius-md);\n  background: transparent;\n  color: var(--pillar-text-muted);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n  position: relative;\n}\n\n._pillar-tab:hover {\n  background: var(--pillar-bg-tertiary);\n  color: var(--pillar-text);\n}\n\n._pillar-tab--active {\n  background: var(--pillar-primary-light);\n  color: var(--pillar-primary);\n}\n\n._pillar-tab--active:hover {\n  background: var(--pillar-primary-light-hover);\n  color: var(--pillar-primary);\n}\n\n._pillar-tab-icon {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n._pillar-tab-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n._pillar-tab-label {\n  font-size: 9px;\n  font-weight: 500;\n  text-align: center;\n  line-height: 1.2;\n  max-width: 40px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Public override classes */\n.pillar-tab-nav {}\n.pillar-tab {}\n.pillar-tab-icon {}\n.pillar-tab-label {}\n";
+export {};

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._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";
+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";

package/dist/components/Progress/AGUIProgress.d.ts

@@ -0,0 +1,15 @@
+/**
+ * AG-UI Progress Component
+ *
+ * Displays real-time progress based on AG-UI state signals.
+ * Renders step indicators, thinking content, and tool call status.
+ *
+ * This component replaces the old markdown-based ProgressRow for live
+ * streaming. ProgressRow is still used for rendering stored history.
+ */
+import { VNode } from 'preact';
+/**
+ * Render AG-UI progress state.
+ * Shows current step, streaming thinking messages, and active tool calls.
+ */
+export declare function AGUIProgress(): VNode | null;

package/dist/components/Tooltips/Tooltip.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Tooltip Component
+ * Individual tooltip rendered to document body
+ */
+import type { TooltipData } from '../../api/client';
+import type { TooltipTrigger, TooltipPosition } from '../../core/config';
+export interface TooltipOptions {
+    trigger: TooltipTrigger;
+    position: TooltipPosition;
+    onLearnMore?: (articleSlug: string) => void;
+    onShow?: () => void;
+    onHide?: () => void;
+}
+/**
+ * Tooltip class that manages a single tooltip instance
+ * Uses Preact for rendering but maintains imperative control
+ */
+export declare class Tooltip {
+    private id;
+    private data;
+    private anchor;
+    private options;
+    private container;
+    private iconElement;
+    private isVisible;
+    private hideTimeout;
+    constructor(data: TooltipData, anchor: HTMLElement, options: TooltipOptions);
+    init(): void;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    destroy(): void;
+    private renderTooltip;
+    private createIcon;
+    private bindEvents;
+    private unbindEvents;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleTooltipMouseEnter;
+    private handleTooltipMouseLeave;
+    private handleClick;
+    private handleDocumentClick;
+    private handleFocus;
+    private handleBlur;
+    private handleKeyDown;
+}

package/dist/components/Tooltips/TooltipManager.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Tooltip Manager
+ * Scans DOM for tooltip elements and manages their lifecycle
+ */
+import type { EventEmitter } from '../../core/events';
+import type { ResolvedConfig } from '../../core/config';
+import type { APIClient } from '../../api/client';
+export declare class TooltipManager {
+    private config;
+    private api;
+    private events;
+    private tooltips;
+    private tooltipData;
+    private observer;
+    private stylesInjected;
+    constructor(config: ResolvedConfig, api: APIClient, events: EventEmitter);
+    /**
+     * Initialize the tooltip manager
+     */
+    init(): Promise<void>;
+    /**
+     * Scan DOM for tooltip elements and initialize them
+     */
+    scan(): Promise<void>;
+    /**
+     * Show a specific tooltip
+     */
+    show(tooltipId: string): void;
+    /**
+     * Hide a specific tooltip
+     */
+    hide(tooltipId: string): void;
+    /**
+     * Destroy the tooltip manager
+     */
+    destroy(): void;
+    private createTooltip;
+    private setupObserver;
+    private handleRemovedElement;
+    private getElementKey;
+}

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

@@ -0,0 +1,6 @@
+/**
+ * Tooltips Index
+ */
+export { Tooltip } from './Tooltip';
+export { TooltipManager } from './TooltipManager';
+export { TOOLTIP_STYLES } from './styles';

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

@@ -0,0 +1,5 @@
+/**
+ * Tooltip CSS Styles
+ * Injected into the document head
+ */
+export declare const TOOLTIP_STYLES = "\n/* Pillar Tooltip Styles */\n.pillar-tooltip {\n  position: absolute;\n  z-index: 99999;\n  max-width: 320px;\n  padding: 12px 16px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #1a1a1a;\n  background: #ffffff;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);\n  pointer-events: auto;\n  opacity: 0;\n  transform: scale(0.95);\n  transition: opacity 0.15s ease, transform 0.15s ease;\n}\n\n.pillar-tooltip.pillar-tooltip--visible {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.pillar-tooltip__content {\n  margin: 0;\n}\n\n.pillar-tooltip__content p {\n  margin: 0 0 8px;\n}\n\n.pillar-tooltip__content p:last-child {\n  margin-bottom: 0;\n}\n\n.pillar-tooltip__content a {\n  color: #2563eb;\n  text-decoration: none;\n}\n\n.pillar-tooltip__content a:hover {\n  text-decoration: underline;\n}\n\n.pillar-tooltip__learn-more {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-top: 12px;\n  padding: 6px 12px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #2563eb;\n  background: #eff6ff;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.pillar-tooltip__learn-more:hover {\n  background: #dbeafe;\n}\n\n.pillar-tooltip__learn-more svg {\n  width: 14px;\n  height: 14px;\n}\n\n/* Arrow */\n.pillar-tooltip__arrow {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  background: #ffffff;\n  transform: rotate(45deg);\n  box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.05);\n}\n\n.pillar-tooltip--top .pillar-tooltip__arrow {\n  bottom: -6px;\n  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.05);\n}\n\n.pillar-tooltip--bottom .pillar-tooltip__arrow {\n  top: -6px;\n}\n\n.pillar-tooltip--left .pillar-tooltip__arrow {\n  right: -6px;\n  box-shadow: 1px -1px 0 0 rgba(0, 0, 0, 0.05);\n}\n\n.pillar-tooltip--right .pillar-tooltip__arrow {\n  left: -6px;\n  box-shadow: -1px 1px 0 0 rgba(0, 0, 0, 0.05);\n}\n\n/* Tooltip Icon (for icon trigger) */\n.pillar-tooltip-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  margin-left: 4px;\n  vertical-align: middle;\n  color: #6b7280;\n  cursor: help;\n  transition: color 0.15s ease;\n}\n\n.pillar-tooltip-icon:hover {\n  color: #2563eb;\n}\n\n.pillar-tooltip-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Close button */\n.pillar-tooltip__close {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  color: #9ca3af;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: color 0.15s ease, background 0.15s ease;\n}\n\n.pillar-tooltip__close:hover {\n  color: #1a1a1a;\n  background: #f3f4f6;\n}\n\n.pillar-tooltip__close svg {\n  width: 12px;\n  height: 12px;\n}\n";

package/dist/components/Views/ArticleChatView.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Article Chat View Component
+ * Combined view with full article content at top and chat messages below
+ */
+import { h } from 'preact';
+interface ArticleChatViewProps {
+    slug: string;
+}
+export declare function ArticleChatView({ slug }: ArticleChatViewProps): h.JSX.Element;
+export {};

package/dist/components/Views/ArticleView.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Article View Component
+ * Displays article content using TipTap for rendering
+ */
+import { h } from 'preact';
+interface ArticleViewProps {
+    slug: string;
+}
+export declare function ArticleView({ slug }: ArticleViewProps): h.JSX.Element;
+export {};

package/dist/components/Views/CategoryView.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Category View Component
+ * Displays articles within a category
+ */
+import { h } from 'preact';
+import type { CategoryData } from '../../api/client';
+interface CategoryViewProps {
+    category: CategoryData;
+}
+export declare function CategoryView({ category }: CategoryViewProps): h.JSX.Element;
+export {};

package/dist/components/Views/HelpCenterArticles.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Help Center Articles Component
+ * Shows contextual articles based on current page + browse option
+ */
+import { h } from 'preact';
+interface HelpCenterArticlesProps {
+    /** Current page path/URL for contextual search */
+    currentPage?: string;
+    /** Maximum number of articles to show */
+    maxArticles?: number;
+}
+export declare function HelpCenterArticles({ currentPage, maxArticles }: HelpCenterArticlesProps): h.JSX.Element;
+/**
+ * CSS Styles for Help Center Articles
+ */
+export declare const HELP_CENTER_ARTICLES_STYLES = "\n/* ============================================================================\n   Help Center Articles\n   ============================================================================ */\n\n._pillar-hc-articles {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pillar-spacing-md);\n}\n\n._pillar-hc-articles-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--pillar-spacing-md);\n}\n\n._pillar-hc-articles-title {\n  font-size: var(--pillar-font-size-sm);\n  font-weight: 600;\n  color: var(--pillar-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n._pillar-hc-articles-browse {\n  display: flex;\n  align-items: center;\n  gap: var(--pillar-spacing-xs);\n  padding: var(--pillar-spacing-xs) var(--pillar-spacing-sm);\n  background: transparent;\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-md);\n  font-size: var(--pillar-font-size-sm);\n  color: var(--pillar-text-muted);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-hc-articles-browse:hover {\n  background: var(--pillar-bg-secondary);\n  color: var(--pillar-text);\n  border-color: var(--pillar-primary);\n}\n\n._pillar-hc-articles-browse svg {\n  width: 14px;\n  height: 14px;\n}\n\n._pillar-hc-articles-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pillar-spacing-sm);\n}\n\n._pillar-hc-articles-empty {\n  padding: var(--pillar-spacing-lg);\n  text-align: center;\n  color: var(--pillar-text-muted);\n  font-size: var(--pillar-font-size-sm);\n}\n\n._pillar-hc-articles-browse-btn {\n  margin-top: var(--pillar-spacing-md);\n  padding: var(--pillar-spacing-sm) var(--pillar-spacing-lg);\n  background: var(--pillar-primary);\n  color: white;\n  border: none;\n  border-radius: var(--pillar-radius-md);\n  font-size: var(--pillar-font-size-sm);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-hc-articles-browse-btn:hover {\n  background: var(--pillar-primary-hover);\n}\n\n/* Public override classes */\n.pillar-hc-articles {}\n.pillar-hc-articles-header {}\n.pillar-hc-articles-title {}\n.pillar-hc-articles-browse {}\n.pillar-hc-articles-list {}\n.pillar-hc-articles-empty {}\n.pillar-hc-articles-browse-btn {}\n";
+export {};

package/dist/components/Views/SearchView.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Search View Component
+ * Displays search input and results
+ */
+import { h } from 'preact';
+interface SearchViewProps {
+    initialQuery?: string;
+}
+export declare function SearchView({ initialQuery }: SearchViewProps): h.JSX.Element;
+export {};

package/dist/components/Views/SupportView.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Support View Component
+ * Displays configurable support channels and help center articles
+ */
+import { h } from 'preact';
+import type { ResolvedSupportConfig } from '../../core/config';
+interface SupportViewProps {
+    supportConfig: ResolvedSupportConfig;
+}
+export declare function SupportView({ supportConfig }: SupportViewProps): h.JSX.Element;
+/**
+ * CSS Styles for Support View
+ */
+export declare const SUPPORT_VIEW_STYLES = "\n/* ============================================================================\n   Support View\n   ============================================================================ */\n\n._pillar-support-view {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pillar-spacing-md);\n  padding: var(--pillar-spacing-lg);\n  overflow-y: auto;\n}\n\n._pillar-support-card {\n  display: flex;\n  align-items: center;\n  gap: var(--pillar-spacing-md);\n  padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\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: all var(--pillar-transition-fast);\n  text-align: left;\n  width: 100%;\n}\n\n._pillar-support-card:hover {\n  background: var(--pillar-bg-tertiary);\n  border-color: var(--pillar-primary);\n}\n\n._pillar-support-card-icon {\n  width: 24px;\n  height: 24px;\n  color: var(--pillar-primary);\n  flex-shrink: 0;\n}\n\n._pillar-support-card-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n._pillar-support-card-content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n}\n\n._pillar-support-card-title {\n  font-size: var(--pillar-font-size-base);\n  font-weight: 500;\n  color: var(--pillar-text);\n}\n\n._pillar-support-card-desc {\n  font-size: var(--pillar-font-size-sm);\n  color: var(--pillar-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n._pillar-support-card-external {\n  width: 16px;\n  height: 16px;\n  color: var(--pillar-text-muted);\n  flex-shrink: 0;\n}\n\n._pillar-support-card-external svg {\n  width: 100%;\n  height: 100%;\n}\n\n._pillar-support-articles {\n  margin-top: var(--pillar-spacing-lg);\n  padding-top: var(--pillar-spacing-lg);\n  border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-support-section-title {\n  font-size: var(--pillar-font-size-sm);\n  font-weight: 600;\n  color: var(--pillar-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-bottom: var(--pillar-spacing-md);\n}\n\n/* Public override classes */\n.pillar-support-view {}\n.pillar-support-card {}\n.pillar-support-card-icon {}\n.pillar-support-card-content {}\n.pillar-support-card-title {}\n.pillar-support-card-desc {}\n.pillar-support-card-external {}\n.pillar-support-articles {}\n.pillar-support-section-title {}\n";
+export {};

package/dist/components/shared/ArticleCard.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Article Card Component
+ * Displays an article list item
+ */
+import { h } from 'preact';
+import type { ArticleSummary } from '../../api/client';
+interface ArticleCardProps {
+    article: ArticleSummary;
+    onClick: () => void;
+}
+export declare function ArticleCard({ article, onClick }: ArticleCardProps): h.JSX.Element;
+interface ArticleListProps {
+    articles: ArticleSummary[];
+    onArticleClick: (article: ArticleSummary) => void;
+}
+export declare function ArticleList({ articles, onArticleClick }: ArticleListProps): h.JSX.Element;
+export {};