@pillar-ai/sdk 0.1.14 → 0.1.15

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

@@ -8,7 +8,7 @@
  *
  * Each element renders both classes, e.g.: class="_pillar-header pillar-header"
  */
-import type { ResolvedThemeConfig, ThemeColors } from '../../core/config';
+import type { ResolvedThemeConfig, ThemeColors } from "../../core/config";
 /**
  * Generate CSS variable overrides from theme colors
  */
@@ -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  padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\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  background: var(--pillar-bg-tertiary);\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: center;\n  padding: 40px var(--pillar-spacing-xl);\n  text-align: center;\n  flex: 1;\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._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  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: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n  border-top: 1px solid var(--pillar-border);\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/* ============================================================================\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  flex: 1;\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  padding-left: 16px;\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: 100px;\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._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;\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  padding-left: 20px;\n}\n\n._pillar-progress-text-preview {\n  max-height: 80px;\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/* Top gradient - fades out older text at the top */\n._pillar-progress-text-gradient {\n  position: absolute;\n  top: 0;\n  left: 20px;\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   Reasoning Disclosure (collapsible thinking steps)\n   Internal: _pillar-reasoning-disclosure | Public: pillar-reasoning-disclosure\n   Compact single-line design that expands to show steps\n   ============================================================================ */\n\n._pillar-reasoning-disclosure {\n  /* No box styling - just a simple inline element */\n}\n\n._pillar-reasoning-header {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 0;\n  font-size: var(--pillar-font-size-sm);\n  font-family: var(--pillar-font-family);\n  color: var(--pillar-text-muted);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  transition: color var(--pillar-transition-fast);\n}\n\n._pillar-reasoning-header:hover {\n  color: var(--pillar-text);\n}\n\n._pillar-reasoning-icon {\n  font-size: 8px;\n  transition: transform 0.2s ease;\n  flex-shrink: 0;\n  opacity: 0.7;\n}\n\n._pillar-reasoning-label {\n  /* Inherits from header */\n}\n\n/* Animated content wrapper using CSS Grid for smooth height transition */\n._pillar-reasoning-content-wrapper {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 0.25s ease-out;\n}\n\n._pillar-reasoning-content-wrapper--expanded {\n  grid-template-rows: 1fr;\n}\n\n._pillar-reasoning-content-wrapper > ._pillar-reasoning-content {\n  overflow: hidden;\n  min-height: 0;\n}\n\n._pillar-reasoning-content {\n  padding-top: 8px;\n  padding-left: 12px;\n  border-left: 2px solid var(--pillar-border-light);\n  margin-left: 3px;\n}\n\n._pillar-reasoning-content ._pillar-progress-row {\n  margin-top: 4px;\n}\n\n._pillar-reasoning-content ._pillar-progress-row:first-child {\n  margin-top: 0;\n}\n\n/* Chevron rotation when expanded */\n._pillar-reasoning-header[data-expanded=\"true\"] ._pillar-reasoning-icon {\n  transform: rotate(90deg);\n}\n\n.pillar-reasoning-disclosure {}\n.pillar-reasoning-content-wrapper {}\n.pillar-reasoning-header {}\n.pillar-reasoning-icon {}\n.pillar-reasoning-label {}\n.pillar-reasoning-content {}\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/* ============================================================================\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-content-wrapper {}\n.pillar-progress-content-container {}\n.pillar-progress-content-gradient {}\n.pillar-progress-text {}\n.pillar-progress-group {}\n.pillar-progress-group-header {}\n.pillar-progress-group-chevron {}\n.pillar-progress-group-summary {}\n.pillar-progress-group-active-dot {}\n.pillar-progress-group-children {}\n\n/* ============================================================================\n   Resume Prompt (Session Resumption)\n   Internal: _pillar-resume-prompt | Public: pillar-resume-prompt\n   Shows when user reconnects and has an interrupted session to resume\n   ============================================================================ */\n\n._pillar-resume-prompt {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pillar-spacing-md);\n  padding: var(--pillar-spacing-lg);\n  margin: var(--pillar-spacing-md) 0;\n  background: var(--pillar-bg-secondary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-lg);\n}\n\n._pillar-resume-prompt--seamless {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--pillar-spacing-sm);\n  padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n  background: transparent;\n  border: none;\n  justify-content: center;\n}\n\n._pillar-resume-prompt-spinner {\n  width: 16px;\n  height: 16px;\n  border: 2px solid var(--pillar-border);\n  border-top-color: var(--pillar-primary);\n  border-radius: 50%;\n  animation: pillar-spin 0.8s linear infinite;\n  flex-shrink: 0;\n}\n\n._pillar-resume-prompt-text {\n  font-size: var(--pillar-font-size-sm);\n  color: var(--pillar-text-muted);\n  font-style: italic;\n}\n\n._pillar-resume-prompt-content {\n  display: flex;\n  gap: var(--pillar-spacing-md);\n  align-items: flex-start;\n}\n\n._pillar-resume-prompt-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n  color: var(--pillar-primary);\n  background: var(--pillar-primary-light);\n  border-radius: var(--pillar-radius-md);\n}\n\n._pillar-resume-prompt-body {\n  flex: 1;\n  min-width: 0;\n}\n\n._pillar-resume-prompt-title {\n  font-size: var(--pillar-font-size-base);\n  font-weight: 600;\n  color: var(--pillar-text);\n  margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-resume-prompt-message {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  font-size: var(--pillar-font-size-sm);\n  color: var(--pillar-text-muted);\n}\n\n._pillar-resume-prompt-user-msg {\n  font-style: italic;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._pillar-resume-prompt-summary {\n  font-size: var(--pillar-font-size-xs);\n  color: var(--pillar-text-placeholder);\n}\n\n._pillar-resume-prompt-actions {\n  display: flex;\n  gap: var(--pillar-spacing-sm);\n  justify-content: flex-end;\n}\n\n._pillar-resume-prompt-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  font-size: var(--pillar-font-size-sm);\n  font-weight: 500;\n  font-family: var(--pillar-font-family);\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n  border: 1px solid transparent;\n}\n\n._pillar-resume-prompt-btn--primary {\n  background: var(--pillar-primary);\n  color: #ffffff;\n  border-color: var(--pillar-primary);\n}\n\n._pillar-resume-prompt-btn--primary:hover {\n  background: var(--pillar-primary-hover);\n  border-color: var(--pillar-primary-hover);\n}\n\n._pillar-resume-prompt-btn--ghost {\n  background: transparent;\n  color: var(--pillar-text-muted);\n  border-color: transparent;\n}\n\n._pillar-resume-prompt-btn--ghost:hover {\n  background: var(--pillar-bg-tertiary);\n  color: var(--pillar-text);\n}\n\n._pillar-resume-prompt-btn svg {\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n}\n\n.pillar-resume-prompt {}\n.pillar-resume-prompt-spinner {}\n.pillar-resume-prompt-text {}\n.pillar-resume-prompt-content {}\n.pillar-resume-prompt-icon {}\n.pillar-resume-prompt-body {}\n.pillar-resume-prompt-title {}\n.pillar-resume-prompt-message {}\n.pillar-resume-prompt-user-msg {}\n.pillar-resume-prompt-summary {}\n.pillar-resume-prompt-actions {}\n.pillar-resume-prompt-btn {}\n";

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

@@ -0,0 +1,20 @@
+/**
+ * ProgressGroup Component
+ *
+ * Collapsible group of tool-related progress events.
+ * Level 2 in the 3-level hierarchy:
+ *   1. Thinking rows (standalone, rendered by ProgressStack)
+ *   2. ProgressGroup — summary header with chevron, expands to show children
+ *   3. ProgressRow — individual tool items inside the group
+ *
+ * Auto-expands when any child is active; collapses when all are done.
+ * User can manually toggle.
+ */
+import type { ProgressEvent } from '../../store/chat';
+export interface ProgressGroupProps {
+    events: ProgressEvent[];
+    summary: string;
+    isLast?: boolean;
+    responseStarted?: boolean;
+}
+export declare function ProgressGroup({ events, summary, isLast, responseStarted, }: ProgressGroupProps): import("preact").JSX.Element;

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

@@ -2,15 +2,18 @@
  * ProgressRow Component
  *
  * Displays progress events during AI response generation.
- * Uses a chevron-based UI (like Cursor):
- * - Chevron points down when expanded (active state)
- * - Chevron points right when collapsed (done state)
- * - All rows with text content are expandable/collapsible
+ * Cursor-inspired design:
+ * - Thinking rows show "Thought for Xs" with live elapsed timer
+ * - Chevron on right side, visible only on hover
+ * - Content expands inline (no indentation)
+ * - All rows are flush-left aligned
  */
 import type { ProgressEvent } from '../../store/chat';
 export interface ProgressRowProps {
     progress: ProgressEvent;
     isActive?: boolean;
     isLast?: boolean;
+    responseStarted?: boolean;
+    nested?: boolean;
 }
-export declare function ProgressRow({ progress, isActive, isLast, }: ProgressRowProps): import("preact").JSX.Element | null;
+export declare function ProgressRow({ progress, isActive, isLast, responseStarted, nested, }: ProgressRowProps): import("preact").JSX.Element | null;

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

@@ -1,15 +1,24 @@
 /**
  * ProgressStack Component
  *
- * Renders a stack of progress events during AI response generation.
- * Each event is displayed as a row with status icon, label, and optional streaming text.
+ * Renders a stack of progress events with 3-level visual hierarchy:
+ * 1. Thinking rows — "Thought for Xs" (top level, standalone)
+ * 2. Tool groups — collapsible summary like "Searched 2 sources, ran 1 tool"
+ * 3. Individual tool rows — nested inside groups (visible when expanded)
+ *
+ * Content tokens from the model flow through onToken and render as inline
+ * message text in the ChatView — they don't appear as progress events.
+ * Segmentation only handles thinking and tool events.
  */
 import type { ProgressEvent } from '../../store/chat';
 export interface ProgressStackProps {
     events: ProgressEvent[];
+    /** When true, the response has started streaming - collapse non-manually-opened rows */
+    responseStarted?: boolean;
 }
 /**
- * Renders an array of progress events as stacked rows.
- * Used during active streaming to show the AI's progress.
+ * Renders an array of progress events as a segmented stack.
+ * Events are permanent — once yielded by the server, they remain in the
+ * thread until a new conversation is started.
  */
-export declare function ProgressStack({ events }: ProgressStackProps): import("preact").JSX.Element | null;
+export declare function ProgressStack({ events, responseStarted }: ProgressStackProps): import("preact").JSX.Element | null;

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

@@ -1,20 +1,16 @@
 /**
  * ReasoningDisclosure Component
  *
- * Displays the AI's reasoning/thinking steps in a collapsible section.
- * Used to show progress events after a message is complete.
- *
- * Features:
- * - Animated expand/collapse using CSS Grid
- * - Accessible with ARIA attributes
- * - Keyboard navigation support
+ * Renders completed progress events inline after a message.
+ * Each progress row handles its own expand/collapse (Cursor-style).
+ * No outer collapsible wrapper — events are displayed directly.
  */
-import { h } from 'preact';
 import type { ProgressEvent } from '../../store/chat';
 export interface ReasoningDisclosureProps {
     events: ProgressEvent[];
+    /** @deprecated No longer used — kept for API compatibility */
     defaultExpanded?: boolean;
-    /** Unique ID for accessibility - defaults to 'reasoning' */
+    /** @deprecated No longer used — kept for API compatibility */
     id?: string;
 }
-export declare function ReasoningDisclosure({ events, defaultExpanded, id, }: ReasoningDisclosureProps): h.JSX.Element | null;
+export declare function ReasoningDisclosure({ events, }: ReasoningDisclosureProps): import("preact").JSX.Element | null;

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

@@ -1,3 +1,3 @@
 export { ProgressRow, type ProgressRowProps } from './ProgressRow';
+export { ProgressGroup, type ProgressGroupProps } from './ProgressGroup';
 export { ProgressStack, type ProgressStackProps } from './ProgressStack';
-export { ReasoningDisclosure, type ReasoningDisclosureProps } from './ReasoningDisclosure';

package/dist/components/index.d.ts

@@ -6,3 +6,4 @@ export { PillarProvider, usePillar, useAPI, useEvents } from './context';
 export * from './shared';
 export * from './Views';
 export * from './Progress';
+export * from './PagePilot';

package/dist/core/Pillar.d.ts

@@ -12,7 +12,7 @@ export type PillarState = "uninitialized" | "initializing" | "ready" | "error";
  * Chat context for escalation to human support.
  */
 export interface ChatContext {
-    /** Server-assigned conversation ID, or null if not yet assigned */
+    /** Client-generated conversation ID, or null if not yet started */
     conversationId: string | null;
     /** Messages in the conversation */
     messages: Array<{
@@ -27,6 +27,7 @@ export declare class Pillar {
     private _events;
     private _api;
     private _textSelectionManager;
+    private _pagePilotManager;
     private _panel;
     private _edgeTrigger;
     private _mobileTrigger;
@@ -36,6 +37,9 @@ export declare class Pillar {
     private _context;
     private _userProfile;
     private _externalUserId;
+    private static EXTERNAL_USER_ID_STORAGE_KEY;
+    private _persistExternalUserId;
+    private _getStoredExternalUserId;
     private _taskHandlers;
     private _anyTaskHandler;
     _registeredActions: Map<string, Record<string, unknown>>;
@@ -47,11 +51,16 @@ export declare class Pillar {
     /**
      * Create or get the shared root container for all Pillar UI elements.
      * Uses isolation: isolate to create a new stacking context.
-     * Z-index changes based on hover mode (999 in hover mode, -1 in push mode).
+     * Z-index varies by panel mode:
+     *   - Push mode: 1000 (above typical navbars but not extreme)
+     *   - Hover/overlay mode: 9999 (floats above host app content)
      */
     private _createRootContainer;
     /**
      * Subscribe to hover mode changes and update root container z-index.
+     * Push mode uses a moderate z-index (1000) so the panel sits alongside content
+     * without dominating the stacking order. Hover/overlay mode uses a high z-index
+     * (9999) so the panel floats above the host app.
      */
     private _subscribeToHoverModeForRoot;
     /**
@@ -278,25 +287,27 @@ export declare class Pillar {
     /**
      * Handle the interact_with_page action from the LLM.
      * Routes to appropriate DOM interaction method based on operation.
+     * Validates the ref format, verifies the element attribute, and
+     * prompts user confirmation for destructive actions.
      *
      * @param params - Interaction parameters from LLM
      * @returns Result object with success status and optional error
      *
      * @example
      * // Click a button
-     * pillar.handlePageInteraction({ operation: 'click', ref: 'pr-a1' });
+     * await pillar.handlePageInteraction({ operation: 'click', ref: 'pr-a1' });
      *
      * // Type in an input
-     * pillar.handlePageInteraction({ operation: 'type', ref: 'pr-b1', value: 'hello' });
+     * await pillar.handlePageInteraction({ operation: 'type', ref: 'pr-b1', value: 'hello' });
      */
     handlePageInteraction(params: {
         operation: 'click' | 'type' | 'select' | 'focus' | 'toggle';
         ref: string;
         value?: string;
-    }): {
+    }): Promise<{
         success: boolean;
         error?: string;
-    };
+    }>;
     /**
      * Mount the panel to a specific container element.
      * Used for manual mounting mode (e.g., from React component).
@@ -686,6 +697,16 @@ export declare class Pillar {
      * Checks if there's a saved session hint and validates with the server.
      */
     private _recoverSession;
+    /**
+     * Restore the last conversation from localStorage on page refresh.
+     * Runs at the very end of init so it is not clobbered by ready handlers,
+     * host-app identify() calls, or other init steps.
+     *
+     * If the restored conversation has a trailing empty assistant message
+     * (indicating the response was interrupted mid-stream), this method will
+     * strip it and attempt to set up the resume flow so the user can reconnect.
+     */
+    private _restoreConversation;
     /**
      * Handle URL parameters for auto-opening the panel
      */

package/dist/core/config.d.ts

@@ -201,8 +201,7 @@ export interface SuggestionsConfig {
     debounceMs?: number;
     /**
      * Maximum number of suggestions to display.
-     * The backend returns a larger pool which is sorted and trimmed to this limit.
-     * @default 6
+     * @default 3
      */
     displayLimit?: number;
 }

package/dist/index.d.ts

@@ -24,9 +24,9 @@ export { DEFAULT_SIDEBAR_TABS, type DOMScanningConfig, type EdgeTriggerConfig, t
 export { type AssistantContext, type Context, type Suggestion, type UserProfile, } from "./core/context";
 export { clearRegistry, getActionCount, getActionDefinition, getActionNames, getClientInfo, getHandler, getManifest, hasAction, setClientInfo, type ActionDataSchema, type ActionDataType, type ActionDefinition, type ActionDefinitions, type ActionManifest, type ActionManifestEntry, type ActionNames, type ActionType, type ActionTypeDataMap, type ClientInfo, type CopyTextData, type ExternalLinkData, type InlineUIData, type NavigateActionData, type Platform, type SyncActionDefinition, type SyncActionDefinitions, type TriggerActionData, type TypedOnTask, type TypedPillarMethods, type TypedTaskHandler, } from "./actions";
 export { APIClient, type ArticleSummary, type ChatMessage, type ChatResponse, type ProgressEvent, } from "./api/client";
-export { type ActionRequest, type ChatImage, type ImageUploadResponse, } from "./api/mcp-client";
+export { type ActionRequest, type ChatImage, type ImageUploadResponse, type TokenUsage, } from "./api/mcp-client";
 export { DEFAULT_SCAN_OPTIONS, INTERACTABLE_ROLES, INTERACTABLE_TAGS, SKIP_TAGS, type CompactScanResult, type InteractionType, type ScanOptions, } from "./types/dom-scanner";
-export { buildSelectorFromRef, clearPillarRefs, isInteractable, scanPageDirect, } from "./utils/dom-scanner";
+export { buildSelectorFromRef, clearPillarRefs, isDestructiveElement, isInteractable, isRedacted, isValidPillarRef, scanPageDirect, } from "./utils/dom-scanner";
 export { generateContextId, getContextDisplayLabel, isDOMSnapshotContext, isHighlightedTextContext, type DOMSnapshotContext, type GenericContext, type HighlightedTextContext, type ProductContext, type UserContextItem, type UserProfileContext, } from "./types/user-context";
 import { Pillar } from "./core/Pillar";
 export default Pillar;