@pillar-ai/sdk 0.1.15 → 0.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/README.md +18 -12
  2. package/dist/api/client.d.ts +31 -28
  3. package/dist/api/mcp-client.d.ts +8 -21
  4. package/dist/components/Button/EdgeTrigger.d.ts +18 -0
  5. package/dist/components/Cards/ConfirmActionCard.d.ts +0 -4
  6. package/dist/components/Cards/index.d.ts +1 -1
  7. package/dist/components/DevTools/index.d.ts +1 -1
  8. package/dist/components/PagePilot/index.d.ts +0 -1
  9. package/dist/components/Panel/Header.d.ts +2 -1
  10. package/dist/components/Panel/Panel.d.ts +10 -4
  11. package/dist/components/Panel/TaskButton.d.ts +0 -4
  12. package/dist/components/Panel/UnifiedChatInput.d.ts +2 -2
  13. package/dist/components/Panel/WorkflowChecklist.d.ts +0 -1
  14. package/dist/components/Panel/index.d.ts +2 -3
  15. package/dist/components/Panel/styles.d.ts +1 -1
  16. package/dist/components/Progress/ProgressRow.d.ts +2 -1
  17. package/dist/components/TextSelection/index.d.ts +0 -1
  18. package/dist/components/index.d.ts +1 -1
  19. package/dist/core/config.d.ts +14 -1
  20. package/dist/pillar.esm.js +1 -1
  21. package/dist/store/chat.d.ts +7 -3
  22. package/dist/store/panel.d.ts +9 -0
  23. package/dist/styles/panel-styles.d.ts +6 -0
  24. package/dist/styles/theme.d.ts +13 -0
  25. package/dist/types/dom-scanner.d.ts +19 -0
  26. package/dist/utils/dom-scanner.d.ts +15 -2
  27. package/dist/utils/markdown-components.d.ts +0 -1
  28. package/dist/utils/preact-markdown.d.ts +0 -1
  29. package/package.json +10 -7
package/dist/components/Panel/styles.d.ts CHANGED
@@ -17,4 +17,4 @@ export declare function generateThemeVariables(colors: ThemeColors, prefix?: str
17
17
  * Generate custom theme CSS from config
18
18
  */
19
19
  export declare function generateThemeCSS(theme: ResolvedThemeConfig): string;
20
- 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";
20
+ export declare const PANEL_STYLES = "\n/* ============================================================================\n CSS Custom Properties (Variables)\n Users can override these to customize colors\n ============================================================================ */\n\n:host {\n /* Core colors - Light mode (default) */\n --pillar-primary: #2563eb;\n --pillar-primary-hover: #1d4ed8;\n --pillar-primary-light: #eff6ff;\n --pillar-primary-light-hover: #dbeafe;\n \n --pillar-bg: #ffffff;\n --pillar-bg-secondary: #f9fafb;\n --pillar-bg-tertiary: #f3f4f6;\n \n --pillar-text: #1a1a1a;\n --pillar-text-secondary: #374151;\n --pillar-text-muted: #6b7280;\n --pillar-text-placeholder: #9ca3af;\n \n --pillar-border: #e5e7eb;\n --pillar-border-light: #f3f4f6;\n \n /* Shadows */\n --pillar-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n \n /* Code blocks */\n --pillar-code-bg: #1f2937;\n --pillar-code-text: #e5e7eb;\n \n /* Scrollbar */\n --pillar-scrollbar-track: transparent;\n --pillar-scrollbar-thumb: #d1d5db;\n --pillar-scrollbar-thumb-hover: #9ca3af;\n \n /* Spacing (can be customized) */\n --pillar-panel-width: 380px;\n --pillar-spacing-xs: 4px;\n --pillar-spacing-sm: 8px;\n --pillar-spacing-md: 12px;\n --pillar-spacing-lg: 16px;\n --pillar-spacing-xl: 20px;\n --pillar-spacing-2xl: 24px;\n \n /* Border radius */\n --pillar-radius-sm: 4px;\n --pillar-radius-md: 6px;\n --pillar-radius-lg: 8px;\n --pillar-radius-xl: 10px;\n --pillar-radius-full: 9999px;\n \n /* Typography */\n --pillar-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n --pillar-font-mono: 'SF Mono', Consolas, monospace;\n --pillar-font-size-xs: 11px;\n --pillar-font-size-sm: 12px;\n --pillar-font-size-base: 14px;\n --pillar-font-size-md: 15px;\n --pillar-font-size-lg: 16px;\n --pillar-font-size-xl: 18px;\n --pillar-font-size-2xl: 20px;\n \n /* Animation */\n --pillar-transition-fast: 0.15s ease;\n --pillar-transition-normal: 0.3s ease;\n}\n\n/* Dark mode - Auto-detect from system preference */\n@media (prefers-color-scheme: dark) {\n :host:not([data-theme=\"light\"]) {\n --pillar-primary: #3b82f6;\n --pillar-primary-hover: #60a5fa;\n --pillar-primary-light: #1e3a5f;\n --pillar-primary-light-hover: #1e4976;\n \n --pillar-bg: #1a1a1a;\n --pillar-bg-secondary: #262626;\n --pillar-bg-tertiary: #333333;\n \n --pillar-text: #f5f5f5;\n --pillar-text-secondary: #e5e5e5;\n --pillar-text-muted: #a3a3a3;\n --pillar-text-placeholder: #737373;\n \n --pillar-border: #404040;\n --pillar-border-light: #333333;\n \n --pillar-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n \n --pillar-code-bg: #0d0d0d;\n --pillar-code-text: #e5e7eb;\n \n --pillar-scrollbar-thumb: #525252;\n --pillar-scrollbar-thumb-hover: #737373;\n }\n}\n\n/* Dark mode - Manual override */\n:host([data-theme=\"dark\"]) {\n --pillar-primary: #3b82f6;\n --pillar-primary-hover: #60a5fa;\n --pillar-primary-light: #1e3a5f;\n --pillar-primary-light-hover: #1e4976;\n \n --pillar-bg: #1a1a1a;\n --pillar-bg-secondary: #262626;\n --pillar-bg-tertiary: #333333;\n \n --pillar-text: #f5f5f5;\n --pillar-text-secondary: #e5e5e5;\n --pillar-text-muted: #a3a3a3;\n --pillar-text-placeholder: #737373;\n \n --pillar-border: #404040;\n --pillar-border-light: #333333;\n \n --pillar-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n \n --pillar-code-bg: #0d0d0d;\n --pillar-code-text: #e5e7eb;\n \n --pillar-scrollbar-thumb: #525252;\n --pillar-scrollbar-thumb-hover: #737373;\n}\n\n/* ============================================================================\n Base Styles\n Note: No CSS reset - we rely on explicit styles for SDK components\n and allow custom cards to inherit host app styling (Tailwind, etc.)\n ============================================================================ */\n\n:host {\n font-family: var(--pillar-font-family);\n font-size: var(--pillar-font-size-base);\n line-height: 1.5;\n color: var(--pillar-text);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* ============================================================================\n Panel Container\n Internal: _pillar-panel | Public: pillar-panel\n ============================================================================ */\n\n._pillar-panel {\n position: fixed;\n top: 0;\n bottom: 0;\n width: var(--pillar-panel-width);\n max-width: 100vw;\n background: var(--pillar-bg);\n border-left: 1px solid var(--pillar-border);\n display: flex;\n flex-direction: column;\n z-index: 99999;\n transform: translateX(100%);\n transition: transform var(--pillar-transition-normal);\n}\n\n._pillar-panel--right {\n right: 0;\n}\n\n._pillar-panel--left {\n left: 0;\n border-left: none;\n border-right: 1px solid var(--pillar-border);\n transform: translateX(-100%);\n}\n\n._pillar-panel--open {\n transform: translateX(0);\n}\n\n._pillar-panel--manual {\n position: static;\n transform: none;\n height: 100%;\n}\n\n._pillar-panel--full-width {\n width: 100vw;\n max-width: 100vw;\n}\n\n._pillar-panel-root {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n._pillar-panel-ui {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n/* Public override classes - empty by default */\n.pillar-panel {}\n.pillar-panel-root {}\n.pillar-panel-ui {}\n\n/* ============================================================================\n Backdrop\n ============================================================================ */\n\n._pillar-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.3);\n opacity: 0;\n visibility: hidden;\n transition: opacity var(--pillar-transition-normal), visibility var(--pillar-transition-normal);\n z-index: 99998;\n}\n\n._pillar-backdrop--visible {\n opacity: 1;\n visibility: visible;\n}\n\n.pillar-backdrop {}\n\n/* ============================================================================\n Header\n Internal: _pillar-header | Public: pillar-header\n ============================================================================ */\n\n._pillar-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 32px;\n padding: 0 var(--pillar-spacing-md);\n border-bottom: 1px solid var(--pillar-border);\n flex-shrink: 0;\n background: var(--pillar-bg);\n}\n\n._pillar-header-left {\n display: flex;\n align-items: center;\n gap: var(--pillar-spacing-sm);\n}\n\n._pillar-header-title {\n font-size: var(--pillar-font-size-lg);\n font-weight: 600;\n color: var(--pillar-text);\n}\n\n._pillar-header-right {\n display: flex;\n align-items: center;\n gap: var(--pillar-spacing-xs);\n}\n\n/* Public override classes */\n.pillar-header {}\n.pillar-header-left {}\n.pillar-header-right {}\n.pillar-header-title {}\n.pillar-new-chat-btn {}\n\n/* ============================================================================\n Icon Buttons (back, home, close)\n Internal: _pillar-icon-btn | Public: pillar-icon-btn\n ============================================================================ */\n\n._pillar-icon-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: none;\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n transition: color var(--pillar-transition-fast), background var(--pillar-transition-fast);\n}\n\n._pillar-icon-btn:hover {\n color: var(--pillar-text);\n}\n\n._pillar-icon-btn svg {\n width: 20px;\n height: 20px;\n}\n\n.pillar-icon-btn {}\n.pillar-back-btn {}\n.pillar-home-btn {}\n.pillar-history-btn {}\n\n/* ============================================================================\n History Dropdown\n Internal: _pillar-history-* | Public: pillar-history-*\n ============================================================================ */\n\n._pillar-history-dropdown {\n position: relative;\n}\n\n._pillar-history-menu {\n position: absolute;\n top: 100%;\n right: 0;\n margin-top: var(--pillar-spacing-xs);\n width: 280px;\n max-height: 400px;\n background: var(--pillar-bg);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n overflow: hidden;\n z-index: 100;\n}\n\n._pillar-history-loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--pillar-spacing-sm);\n padding: var(--pillar-spacing-xl);\n color: var(--pillar-text-muted);\n font-size: 13px;\n}\n\n._pillar-history-spinner {\n width: 24px;\n height: 24px;\n border: 2px solid var(--pillar-border);\n border-top-color: var(--pillar-primary);\n border-radius: 50%;\n animation: pillar-spin 0.8s linear infinite;\n}\n\n@keyframes pillar-spin {\n to { transform: rotate(360deg); }\n}\n\n._pillar-history-empty {\n padding: var(--pillar-spacing-xl);\n text-align: center;\n color: var(--pillar-text-muted);\n font-size: 13px;\n}\n\n._pillar-history-list {\n max-height: 360px;\n overflow-y: auto;\n padding: var(--pillar-spacing-xs) 0;\n}\n\n._pillar-history-group-header {\n padding: var(--pillar-spacing-xs) var(--pillar-spacing-md);\n padding-top: var(--pillar-spacing-sm);\n font-size: 10px;\n font-weight: 500;\n color: var(--pillar-text-muted);\n letter-spacing: 0.02em;\n}\n\n._pillar-history-group-header:first-child {\n padding-top: var(--pillar-spacing-xs);\n}\n\n._pillar-history-item {\n display: flex;\n align-items: center;\n width: 100%;\n padding: var(--pillar-spacing-xs) var(--pillar-spacing-md);\n background: none;\n border: none;\n text-align: left;\n cursor: pointer;\n transition: background var(--pillar-transition-fast);\n border-radius: var(--pillar-radius-sm);\n margin: 0 var(--pillar-spacing-xs);\n width: calc(100% - var(--pillar-spacing-sm));\n}\n\n._pillar-history-item:hover {\n background: var(--pillar-bg-secondary);\n}\n\n._pillar-history-item-title {\n font-size: 13px;\n color: var(--pillar-text);\n line-height: 1.4;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n}\n\n/* Public override classes */\n.pillar-history-dropdown {}\n.pillar-history-menu {}\n.pillar-history-group-header {}\n.pillar-history-list {}\n.pillar-history-item {}\n.pillar-history-item-title {}\n.pillar-close-btn {}\n\n/* ============================================================================\n Content Area\n Internal: _pillar-content | Public: pillar-content\n ============================================================================ */\n\n._pillar-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n min-height: 0;\n}\n\n.pillar-content {}\n\n/* ============================================================================\n Search Input\n Internal: _pillar-search | Public: pillar-search\n ============================================================================ */\n\n._pillar-search {\n position: relative;\n padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n}\n\n._pillar-search-input {\n width: 100%;\n padding: 10px 12px 10px 40px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n color: var(--pillar-text);\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n outline: none;\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-search-input:focus {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-search-input::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-search-icon {\n position: absolute;\n left: 32px;\n top: 50%;\n transform: translateY(-50%);\n width: 18px;\n height: 18px;\n color: var(--pillar-text-placeholder);\n pointer-events: none;\n}\n\n._pillar-search-icon svg {\n width: 18px;\n height: 18px;\n}\n\n.pillar-search {}\n.pillar-search-input {}\n.pillar-search-icon {}\n\n/* ============================================================================\n Chat Input (Persistent Bottom)\n Internal: _pillar-chat-input | Public: pillar-chat-input\n ============================================================================ */\n\n._pillar-chat-input-container {\n flex-shrink: 0;\n border-top: 1px solid var(--pillar-border);\n background: var(--pillar-bg);\n display: flex;\n flex-direction: column;\n max-height: 50%;\n transition: max-height var(--pillar-transition-normal);\n}\n\n._pillar-chat-input-container--expanded {\n max-height: 60%;\n}\n\n._pillar-chat-input-messages {\n flex: 1;\n overflow-y: auto;\n padding: 0;\n max-height: 0;\n transition: max-height var(--pillar-transition-normal), padding var(--pillar-transition-normal);\n}\n\n._pillar-chat-input-container--expanded ._pillar-chat-input-messages {\n max-height: 300px;\n padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n}\n\n._pillar-chat-input-message {\n margin-bottom: var(--pillar-spacing-md);\n}\n\n._pillar-chat-input-message--user {\n text-align: right;\n}\n\n._pillar-chat-input-message-content {\n display: inline-block;\n max-width: 85%;\n padding: 10px 14px;\n border-radius: var(--pillar-spacing-lg);\n font-size: var(--pillar-font-size-base);\n line-height: 1.5;\n}\n\n._pillar-chat-input-message--user ._pillar-chat-input-message-content {\n background: var(--pillar-primary);\n color: #ffffff;\n border-bottom-right-radius: var(--pillar-radius-sm);\n}\n\n._pillar-chat-input-message--assistant ._pillar-chat-input-message-content {\n background: var(--pillar-bg-tertiary);\n color: var(--pillar-text);\n border-bottom-left-radius: var(--pillar-radius-sm);\n}\n\n._pillar-chat-input-sources {\n margin-top: var(--pillar-spacing-sm);\n padding-top: var(--pillar-spacing-sm);\n border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-input-sources-title {\n font-size: var(--pillar-font-size-xs);\n font-weight: 500;\n color: var(--pillar-text-muted);\n margin-bottom: 6px;\n}\n\n._pillar-chat-input-source {\n display: block;\n padding: 6px 10px;\n margin-bottom: var(--pillar-spacing-xs);\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-primary);\n background: var(--pillar-primary-light);\n border-radius: var(--pillar-radius-md);\n text-decoration: none;\n cursor: pointer;\n}\n\n._pillar-chat-input-source:hover {\n background: var(--pillar-primary-light-hover);\n}\n\n._pillar-chat-input-area {\n padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n}\n\n._pillar-chat-input-wrapper {\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-chat-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-chat-input-textarea {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-chat-input-textarea::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n.pillar-chat-input-container {}\n.pillar-chat-input-messages {}\n.pillar-chat-input-message {}\n.pillar-chat-input-message-content {}\n.pillar-chat-input-sources {}\n.pillar-chat-input-area {}\n.pillar-chat-input-wrapper {}\n.pillar-chat-input-textarea {}\n\n/* ============================================================================\n Chat Input Footer (contains send button)\n ============================================================================ */\n\n._pillar-chat-input-footer {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n/* ============================================================================\n Send Button - In footer row, right aligned\n Internal: _pillar-send-btn | Public: pillar-send-btn\n ============================================================================ */\n\n._pillar-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-tertiary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-send-btn:hover:not(:disabled) {\n color: #ffffff;\n background: var(--pillar-primary);\n}\n\n._pillar-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-send-btn {}\n.pillar-chat-input-footer {}\n\n/* ============================================================================\n Loading States\n Internal: _pillar-loading | Public: pillar-loading\n ============================================================================ */\n\n._pillar-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px var(--pillar-spacing-xl);\n color: var(--pillar-text-muted);\n}\n\n._pillar-loading-spinner {\n width: 24px;\n height: 24px;\n border: 2px solid var(--pillar-border);\n border-top-color: var(--pillar-primary);\n border-radius: 50%;\n animation: pillar-spin 0.8s linear infinite;\n}\n\n@keyframes pillar-spin {\n to { transform: rotate(360deg); }\n}\n\n.pillar-loading {}\n.pillar-loading-spinner {}\n\n/* ============================================================================\n Progress Indicator (AI activity status)\n Internal: _pillar-progress | Public: pillar-progress\n ============================================================================ */\n\n._pillar-progress-indicator {\n display: flex;\n align-items: center;\n gap: var(--pillar-spacing-sm);\n padding: var(--pillar-spacing-sm) 0;\n}\n\n._pillar-progress-indicator ._pillar-loading-spinner {\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n}\n\n._pillar-progress-message {\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-text-muted);\n font-style: italic;\n}\n\n.pillar-progress-indicator {}\n.pillar-progress-message {}\n\n._pillar-thinking-shimmer {\n display: inline-block;\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-text-muted);\n background: linear-gradient(\n 90deg,\n var(--pillar-text-muted) 0%,\n var(--pillar-text-primary, #e5e5e5) 40%,\n var(--pillar-text-muted) 60%\n );\n background-size: 200% 100%;\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n animation: pillar-shimmer 2s ease-in-out infinite;\n}\n\n.pillar-thinking-shimmer {}\n\n/* ============================================================================\n Empty States\n Internal: _pillar-empty | Public: pillar-empty\n ============================================================================ */\n\n._pillar-empty {\n padding: 40px var(--pillar-spacing-xl);\n text-align: center;\n color: var(--pillar-text-muted);\n}\n\n._pillar-empty-icon {\n width: 48px;\n height: 48px;\n margin: 0 auto var(--pillar-spacing-lg);\n color: var(--pillar-border);\n}\n\n._pillar-empty-title {\n font-size: var(--pillar-font-size-lg);\n font-weight: 500;\n color: var(--pillar-text);\n margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-empty-description {\n font-size: var(--pillar-font-size-base);\n}\n\n.pillar-empty {}\n.pillar-empty-icon {}\n.pillar-empty-title {}\n.pillar-empty-description {}\n\n/* ============================================================================\n Section Titles\n Internal: _pillar-section-title | Public: pillar-section-title\n ============================================================================ */\n\n._pillar-section-title {\n padding: var(--pillar-spacing-md) var(--pillar-spacing-xl) var(--pillar-spacing-sm);\n font-size: var(--pillar-font-size-xs);\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--pillar-text-muted);\n}\n\n.pillar-section-title {}\n\n/* ============================================================================\n Related Articles\n ============================================================================ */\n\n._pillar-related-articles {\n border-top: 1px solid var(--pillar-border);\n margin-top: var(--pillar-spacing-2xl);\n padding-top: var(--pillar-spacing-sm);\n}\n\n.pillar-related-articles {}\n\n/* ============================================================================\n Scrollbar Styling\n ============================================================================ */\n\n._pillar-content::-webkit-scrollbar,\n._pillar-chat-input-messages::-webkit-scrollbar {\n width: 6px;\n}\n\n._pillar-content::-webkit-scrollbar-track,\n._pillar-chat-input-messages::-webkit-scrollbar-track {\n background: var(--pillar-scrollbar-track);\n}\n\n._pillar-content::-webkit-scrollbar-thumb,\n._pillar-chat-input-messages::-webkit-scrollbar-thumb {\n background: var(--pillar-scrollbar-thumb);\n border-radius: 3px;\n}\n\n._pillar-content::-webkit-scrollbar-thumb:hover,\n._pillar-chat-input-messages::-webkit-scrollbar-thumb:hover {\n background: var(--pillar-scrollbar-thumb-hover);\n}\n\n/* ============================================================================\n Home View\n ============================================================================ */\n\n._pillar-home-view {\n display: flex;\n flex-direction: column;\n height: 100%;\n padding: var(--pillar-spacing-xl);\n}\n\n._pillar-home-view-header {\n text-align: center;\n padding: var(--pillar-spacing-2xl) 0;\n}\n\n._pillar-home-view-icon {\n font-size: 40px;\n margin-bottom: var(--pillar-spacing-md);\n}\n\n._pillar-home-view-title {\n font-size: var(--pillar-font-size-xl);\n font-weight: 600;\n color: var(--pillar-text);\n margin: 0;\n}\n\n._pillar-home-view-questions {\n display: flex;\n flex-direction: column;\n gap: var(--pillar-spacing-sm);\n margin-bottom: var(--pillar-spacing-xl);\n}\n\n._pillar-home-view-input-wrapper {\n margin-top: auto;\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-home-view-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-home-view-input {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-home-view-input::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-home-view-input-row {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n._pillar-home-view-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-tertiary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-home-view-send-btn:hover:not(:disabled) {\n color: #ffffff;\n background: var(--pillar-primary);\n}\n\n._pillar-home-view-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-home-view-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-home-view {}\n.pillar-home-view-header {}\n.pillar-home-view-title {}\n.pillar-home-view-questions {}\n.pillar-home-view-input-wrapper {}\n.pillar-home-view-input {}\n.pillar-home-view-send-btn {}\n\n/* ============================================================================\n Question Chip\n ============================================================================ */\n\n._pillar-question-chip {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n text-align: left;\n color: var(--pillar-text);\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n cursor: pointer;\n transition: background var(--pillar-transition-fast), border-color var(--pillar-transition-fast);\n}\n\n._pillar-question-chip:hover {\n border-color: var(--pillar-primary);\n}\n\n._pillar-question-chip-text {\n flex: 1;\n}\n\n._pillar-question-chip-arrow {\n color: var(--pillar-text-muted);\n margin-left: var(--pillar-spacing-sm);\n transition: color var(--pillar-transition-fast), transform var(--pillar-transition-fast);\n}\n\n._pillar-question-chip:hover ._pillar-question-chip-arrow {\n color: var(--pillar-primary);\n transform: translateX(2px);\n}\n\n._pillar-question-chip-skeleton {\n height: 44px;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n overflow: hidden;\n}\n\n._pillar-question-chip-skeleton-bar {\n width: 60%;\n height: 14px;\n margin: 15px var(--pillar-spacing-lg);\n background: linear-gradient(90deg, var(--pillar-border) 25%, var(--pillar-bg-tertiary) 50%, var(--pillar-border) 75%);\n background-size: 200% 100%;\n animation: pillar-shimmer 1.5s infinite;\n border-radius: var(--pillar-radius-sm);\n}\n\n@keyframes pillar-shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n.pillar-question-chip {}\n.pillar-question-chip-text {}\n.pillar-question-chip-arrow {}\n.pillar-question-chip-skeleton {}\n.pillar-question-chip-skeleton-bar {}\n\n/* ============================================================================\n Standalone Chat View\n Internal: _pillar-chat-view | Public: pillar-chat-view\n ============================================================================ */\n\n._pillar-chat-view {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n._pillar-chat-view-messages {\n flex: 1;\n overflow-y: auto;\n padding: var(--pillar-spacing-xl);\n display: flex;\n flex-direction: column;\n}\n\n._pillar-chat-view-welcome {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n padding: var(--pillar-spacing-xl);\n text-align: center;\n}\n\n._pillar-chat-view-welcome-icon {\n font-size: 48px;\n margin-bottom: var(--pillar-spacing-lg);\n}\n\n._pillar-chat-view-welcome-title {\n font-size: var(--pillar-font-size-xl);\n font-weight: 600;\n color: var(--pillar-text);\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-view-welcome-text {\n font-size: var(--pillar-font-size-base);\n color: var(--pillar-text-muted);\n max-width: 280px;\n}\n\n/* History Loading Skeleton */\n._pillar-chat-history-loading {\n display: flex;\n flex-direction: column;\n gap: var(--pillar-spacing-lg);\n padding: var(--pillar-spacing-md) 0;\n}\n\n._pillar-chat-history-loading-message {\n display: flex;\n flex-direction: column;\n gap: var(--pillar-spacing-xs);\n}\n\n._pillar-chat-history-loading-message--user {\n align-items: flex-end;\n}\n\n._pillar-chat-history-loading-message--assistant {\n align-items: flex-start;\n}\n\n._pillar-chat-history-loading-bar {\n height: 16px;\n border-radius: var(--pillar-radius-md);\n background: linear-gradient(90deg, var(--pillar-bg-secondary) 25%, var(--pillar-border) 50%, var(--pillar-bg-secondary) 75%);\n background-size: 200% 100%;\n animation: pillar-shimmer 1.5s infinite;\n}\n\n._pillar-chat-history-loading-message--user ._pillar-chat-history-loading-bar {\n background: linear-gradient(90deg, var(--pillar-bg-secondary) 25%, var(--pillar-border) 50%, var(--pillar-bg-secondary) 75%);\n background-size: 200% 100%;\n animation: pillar-shimmer 1.5s infinite;\n}\n\n.pillar-chat-history-loading {}\n.pillar-chat-history-loading-message--user {}\n.pillar-chat-history-loading-message--assistant {}\n.pillar-chat-history-loading-bar {}\n\n._pillar-chat-view-message {\n margin-bottom: var(--pillar-spacing-lg);\n}\n\n._pillar-chat-view-message--user {\n text-align: right;\n}\n\n._pillar-chat-view-message--assistant {\n text-align: left;\n}\n\n.pillar-chat-view {}\n.pillar-chat-view-messages {}\n.pillar-chat-view-welcome {}\n.pillar-chat-view-message {}\n\n/* ============================================================================\n User Message Bubble\n Internal: _pillar-message-user | Public: pillar-message-user\n ============================================================================ */\n\n._pillar-message-user {\n display: inline-block;\n max-width: 85%;\n padding: 10px 14px;\n border-radius: var(--pillar-spacing-lg);\n border-bottom-right-radius: var(--pillar-radius-sm);\n font-size: var(--pillar-font-size-base);\n line-height: 1.5;\n background: var(--pillar-primary);\n color: #ffffff;\n white-space: pre-wrap;\n text-align: left;\n word-wrap: break-word;\n}\n\n._pillar-message-user-images {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-message-user-image {\n max-width: 120px;\n max-height: 120px;\n border-radius: var(--pillar-radius-md);\n object-fit: cover;\n}\n\n.pillar-message-user {}\n.pillar-message-user-images {}\n.pillar-message-user-image {}\n\n/* ============================================================================\n AI Response\n Internal: _pillar-message-assistant | Public: pillar-message-assistant\n ============================================================================ */\n\n._pillar-message-assistant {\n font-size: var(--pillar-font-size-base);\n line-height: 1.6;\n color: var(--pillar-text-secondary);\n}\n\n._pillar-message-assistant p {\n margin: 0 0 var(--pillar-spacing-md);\n}\n\n._pillar-message-assistant p:last-child {\n margin-bottom: 0;\n}\n\n._pillar-message-assistant h2 {\n font-size: var(--pillar-font-size-lg);\n font-weight: 600;\n color: var(--pillar-text);\n margin: var(--pillar-spacing-lg) 0 var(--pillar-spacing-sm);\n}\n\n._pillar-message-assistant h3 {\n font-size: var(--pillar-font-size-md);\n font-weight: 600;\n color: var(--pillar-text);\n margin: 14px 0 6px;\n}\n\n._pillar-message-assistant h4 {\n font-size: var(--pillar-font-size-base);\n font-weight: 600;\n color: var(--pillar-text);\n margin: var(--pillar-spacing-md) 0 6px;\n}\n\n._pillar-message-assistant ul,\n._pillar-message-assistant ol {\n margin: 0 0 var(--pillar-spacing-md);\n padding-left: var(--pillar-spacing-2xl);\n list-style-position: outside;\n}\n\n._pillar-message-assistant ul {\n list-style-type: disc;\n}\n\n._pillar-message-assistant ol {\n list-style-type: decimal;\n}\n\n._pillar-message-assistant li {\n margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-message-assistant code {\n padding: 2px 6px;\n font-size: var(--pillar-font-size-sm);\n background: var(--pillar-bg-tertiary);\n border-radius: var(--pillar-radius-sm);\n font-family: var(--pillar-font-mono);\n color: var(--pillar-text);\n}\n\n._pillar-message-assistant pre {\n margin: var(--pillar-spacing-md) 0;\n padding: var(--pillar-spacing-md) 14px;\n background: var(--pillar-code-bg);\n border-radius: var(--pillar-radius-lg);\n overflow-x: auto;\n}\n\n._pillar-message-assistant pre code {\n padding: 0;\n background: none;\n color: var(--pillar-code-text);\n font-size: var(--pillar-font-size-sm);\n line-height: 1.5;\n}\n\n._pillar-message-assistant a {\n color: var(--pillar-primary);\n text-decoration: none;\n}\n\n._pillar-message-assistant a:hover {\n text-decoration: underline;\n}\n\n._pillar-message-assistant strong {\n font-weight: 600;\n color: var(--pillar-text);\n}\n\n._pillar-message-assistant em {\n font-style: italic;\n}\n\n.pillar-message-assistant {}\n\n/* ============================================================================\n Chat Sources\n Internal: _pillar-chat-sources | Public: pillar-chat-sources\n ============================================================================ */\n\n._pillar-chat-sources {\n margin-top: var(--pillar-spacing-md);\n padding-top: var(--pillar-spacing-md);\n border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-sources-title {\n font-size: var(--pillar-font-size-xs);\n font-weight: 500;\n color: var(--pillar-text-muted);\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-source {\n display: block;\n padding: var(--pillar-spacing-sm) var(--pillar-spacing-md);\n margin-bottom: 6px;\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-primary);\n background: var(--pillar-primary-light);\n border-radius: var(--pillar-radius-lg);\n text-decoration: none;\n cursor: pointer;\n transition: background var(--pillar-transition-fast);\n}\n\n._pillar-chat-source:hover {\n background: var(--pillar-primary-light-hover);\n}\n\n.pillar-chat-sources {}\n.pillar-chat-sources-title {}\n.pillar-chat-source {}\n\n/* ============================================================================\n Chat Actions (Suggested action buttons)\n Internal: _pillar-chat-actions | Public: pillar-chat-actions\n ============================================================================ */\n\n._pillar-chat-actions {\n margin-top: var(--pillar-spacing-md);\n padding-top: var(--pillar-spacing-md);\n border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-actions-title {\n font-size: var(--pillar-font-size-xs);\n font-weight: 500;\n color: var(--pillar-text-muted);\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-actions-buttons {\n display: flex;\n flex-direction: column;\n gap: var(--pillar-spacing-sm);\n}\n\n/* Task buttons should wrap horizontally */\n._pillar-chat-actions-buttons > ._pillar-task-button-group {\n display: flex;\n flex-wrap: wrap;\n gap: var(--pillar-spacing-sm);\n}\n\n/* Confirm cards take full width */\n._pillar-chat-actions-buttons > .pillar-confirm-card-wrapper {\n width: 100%;\n}\n\n.pillar-chat-actions {}\n.pillar-chat-actions-title {}\n.pillar-chat-actions-buttons {}\n\n/* ============================================================================\n Chat View Input Area - Cursor-style design\n ============================================================================ */\n\n._pillar-chat-view-input-area {\n flex-shrink: 0;\n padding: 0 var(--pillar-spacing-xl) var(--pillar-spacing-xl);\n background: var(--pillar-bg);\n}\n\n._pillar-chat-view-input-wrapper {\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-chat-view-input {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-chat-view-input::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-chat-view-input-row {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n._pillar-chat-view-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-tertiary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-send-btn:hover:not(:disabled) {\n color: #ffffff;\n background: var(--pillar-primary);\n}\n\n._pillar-chat-view-send-btn:active:not(:disabled) {\n transform: scale(0.95);\n}\n\n._pillar-chat-view-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-chat-view-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-chat-view-input-area {}\n.pillar-chat-view-input-wrapper {}\n.pillar-chat-view-input {}\n.pillar-chat-view-send-btn {}\n.pillar-chat-view-input-footer {}\n.pillar-chat-view-new-chat-btn {}\n\n/* New chat button styling */\n._pillar-chat-view-input-footer {\n display: flex;\n justify-content: center;\n margin-top: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-view-new-chat-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font-size: var(--pillar-font-size-sm);\n font-weight: 500;\n font-family: var(--pillar-font-family);\n color: var(--pillar-text-muted);\n background: transparent;\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n cursor: pointer;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-new-chat-btn:hover {\n color: var(--pillar-text);\n background: var(--pillar-bg-secondary);\n border-color: var(--pillar-text-muted);\n}\n\n._pillar-chat-view-new-chat-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n._pillar-chat-view-new-chat-icon svg {\n width: 14px;\n height: 14px;\n}\n\n/* Scrollbar for chat view */\n._pillar-chat-view-messages::-webkit-scrollbar {\n width: 6px;\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-track {\n background: var(--pillar-scrollbar-track);\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-thumb {\n background: var(--pillar-scrollbar-thumb);\n border-radius: 3px;\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-thumb:hover {\n background: var(--pillar-scrollbar-thumb-hover);\n}\n\n/* ============================================================================\n Chat Image Upload\n ============================================================================ */\n\n._pillar-chat-view-input-area--dragging {\n position: relative;\n background: rgba(37, 99, 235, 0.05);\n}\n\n._pillar-chat-drop-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n background: rgba(37, 99, 235, 0.1);\n border: 2px dashed var(--pillar-primary);\n border-radius: var(--pillar-radius-lg);\n color: var(--pillar-primary);\n font-size: var(--pillar-font-size-sm);\n font-weight: 500;\n z-index: 10;\n pointer-events: none;\n}\n\n._pillar-chat-drop-overlay svg {\n width: 24px;\n height: 24px;\n}\n\n._pillar-chat-images-preview {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 12px 12px 4px 12px;\n}\n\n._pillar-chat-image-thumb {\n position: relative;\n width: 56px;\n height: 56px;\n border-radius: var(--pillar-radius-md);\n overflow: hidden;\n border: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-image-thumb img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n._pillar-chat-image-loading {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n._pillar-chat-image-error {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(239, 68, 68, 0.3);\n color: #dc2626;\n font-weight: bold;\n font-size: 14px;\n}\n\n._pillar-chat-image-remove {\n position: absolute;\n top: 2px;\n right: 2px;\n width: 18px;\n height: 18px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.6);\n border: none;\n border-radius: 50%;\n color: white;\n cursor: pointer;\n opacity: 0;\n transition: opacity var(--pillar-transition-fast);\n}\n\n._pillar-chat-image-thumb:hover ._pillar-chat-image-remove {\n opacity: 1;\n}\n\n._pillar-chat-image-remove svg {\n width: 10px;\n height: 10px;\n}\n\n._pillar-chat-image-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: transparent;\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n transition: color var(--pillar-transition-fast);\n}\n\n._pillar-chat-image-btn:hover:not(:disabled) {\n color: var(--pillar-text);\n}\n\n._pillar-chat-image-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n._pillar-chat-image-btn svg {\n width: 18px;\n height: 18px;\n}\n\n.pillar-chat-images-preview {}\n.pillar-chat-image-thumb {}\n.pillar-chat-image-remove {}\n.pillar-chat-image-btn {}\n.pillar-chat-drop-overlay {}\n\n/* ============================================================================\n Legacy Class Mappings (for backward compatibility)\n Maps old BEM-style class names to new internal classes\n ============================================================================ */\n\n.pillar-panel { }\n.pillar-panel--right { }\n.pillar-panel--left { }\n.pillar-panel--open { }\n.pillar-panel--manual { }\n.pillar-panel-root { }\n.pillar-panel-ui { }\n.pillar-panel__header { }\n.pillar-panel__header-left { }\n.pillar-panel__back-btn { }\n.pillar-panel__home-btn { }\n.pillar-panel__title { }\n.pillar-panel__close-btn { }\n.pillar-panel__content { }\n.pillar-search { }\n.pillar-search__input { }\n.pillar-search__icon { }\n.pillar-category-card { }\n.pillar-category-card__icon { }\n.pillar-category-card__content { }\n.pillar-category-card__title { }\n.pillar-category-card__description { }\n.pillar-category-card__count { }\n.pillar-article-card { }\n.pillar-article-card__title { }\n.pillar-article-card__excerpt { }\n.pillar-article-card__meta { }\n.pillar-article { }\n.pillar-article__title { }\n.pillar-article__content { }\n.pillar-category-header { }\n.pillar-category-header__title { }\n.pillar-category-header__description { }\n.pillar-chat-input-container { }\n.pillar-chat-input-container--expanded { }\n.pillar-chat-input__messages { }\n.pillar-chat-input__message { }\n.pillar-chat-input__message--user { }\n.pillar-chat-input__message--assistant { }\n.pillar-chat-input__message-content { }\n.pillar-chat-input__sources { }\n.pillar-chat-input__sources-title { }\n.pillar-chat-input__source { }\n.pillar-chat-input__area { }\n.pillar-chat-input__wrapper { }\n.pillar-chat-input__input { }\n.pillar-chat-input__send-btn { }\n.pillar-loading { }\n.pillar-loading__spinner { }\n.pillar-empty { }\n.pillar-empty__icon { }\n.pillar-empty__title { }\n.pillar-empty__description { }\n.pillar-section-title { }\n.pillar-related-articles { }\n.pillar-home-view { }\n.pillar-chat-view { }\n.pillar-chat-view__messages { }\n.pillar-chat-view__welcome { }\n.pillar-chat-view__welcome-icon { }\n.pillar-chat-view__welcome-title { }\n.pillar-chat-view__welcome-text { }\n.pillar-chat-view__message { }\n.pillar-chat-view__message--user { }\n.pillar-chat-view__message--assistant { }\n.pillar-chat-view__user-bubble { }\n.pillar-chat-view__ai-response { }\n.pillar-chat-view__sources { }\n.pillar-chat-view__sources-title { }\n.pillar-chat-view__source { }\n.pillar-chat-view__input-area { }\n.pillar-chat-view__input-wrapper { }\n.pillar-chat-view__input { }\n.pillar-chat-view__send-btn { }\n.pillar-backdrop { }\n.pillar-backdrop--visible { }\n\n/* ============================================================================\n Task Button Component\n ============================================================================ */\n\n.pillar-task-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.15s ease;\n border: 1px solid transparent;\n text-decoration: none;\n}\n\n.pillar-task-btn__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.pillar-task-btn__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-task-btn__label {\n white-space: nowrap;\n}\n\n/* Primary variant (default) */\n.pillar-task-btn--primary {\n background: #2563eb;\n color: #ffffff;\n border-color: #2563eb;\n}\n\n.pillar-task-btn--primary:hover {\n background: #1d4ed8;\n border-color: #1d4ed8;\n}\n\n/* Default variant */\n.pillar-task-btn--default {\n background: #f3f4f6;\n color: #1a1a1a;\n border-color: #e5e7eb;\n}\n\n.pillar-task-btn--default:hover {\n background: #e5e7eb;\n}\n\n/* Secondary variant */\n.pillar-task-btn--secondary {\n background: #eff6ff;\n color: #2563eb;\n border-color: #dbeafe;\n}\n\n.pillar-task-btn--secondary:hover {\n background: #dbeafe;\n}\n\n/* Outline variant */\n.pillar-task-btn--outline {\n background: transparent;\n color: #2563eb;\n border-color: #2563eb;\n}\n\n.pillar-task-btn--outline:hover {\n background: #eff6ff;\n}\n\n/* Ghost variant */\n.pillar-task-btn--ghost {\n background: transparent;\n color: #6b7280;\n border-color: transparent;\n}\n\n.pillar-task-btn--ghost:hover {\n background: #f3f4f6;\n color: #1a1a1a;\n}\n\n/* Task button group */\n.pillar-task-btn-group {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 12px;\n}\n\n/* Task suggestion card in chat */\n.pillar-task-suggestion {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 12px;\n background: #f9fafb;\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n margin-top: 12px;\n}\n\n.pillar-task-suggestion__header {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: #6b7280;\n}\n\n.pillar-task-suggestion__header svg {\n width: 14px;\n height: 14px;\n}\n\n.pillar-task-suggestion__description {\n font-size: 13px;\n color: #374151;\n}\n\n/* ============================================================================\n Feedback Icons\n Internal: _pillar-feedback | Public: pillar-feedback\n ============================================================================ */\n\n._pillar-message-assistant-wrapper {\n position: relative;\n}\n\n._pillar-feedback-icons {\n display: flex;\n gap: 4px;\n margin-top: var(--pillar-spacing-sm);\n justify-content: flex-end;\n}\n\n._pillar-feedback-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n color: var(--pillar-text-placeholder);\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-feedback-btn:hover {\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-secondary);\n border-color: var(--pillar-border);\n}\n\n._pillar-feedback-btn--active {\n color: var(--pillar-primary);\n background: var(--pillar-primary-light);\n border-color: var(--pillar-primary);\n}\n\n._pillar-feedback-btn--active:hover {\n color: var(--pillar-primary);\n background: var(--pillar-primary-light-hover);\n}\n\n._pillar-feedback-btn svg {\n width: 14px;\n height: 14px;\n}\n\n.pillar-feedback-icons {}\n.pillar-feedback-btn {}\n.pillar-message-assistant-wrapper {}\n\n/* ============================================================================\n Action Status Indicators\n Internal: _pillar-action-status | Public: pillar-action-status\n Shows completion status for auto-run actions (checkmark, X, or spinner)\n ============================================================================ */\n\n._pillar-message-assistant-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n}\n\n._pillar-action-status {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n._pillar-action-status-indicator {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n}\n\n._pillar-action-status-indicator svg {\n width: 16px;\n height: 16px;\n}\n\n._pillar-action-status-indicator--success {\n color: #22c55e;\n}\n\n._pillar-action-status-indicator--failed {\n color: #ef4444;\n}\n\n._pillar-action-status-indicator--pending {\n color: var(--pillar-text-muted);\n animation: pillar-spin 1s linear infinite;\n}\n\n@keyframes pillar-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.pillar-action-status {}\n.pillar-action-status-indicator {}\n.pillar-message-assistant-content {}\n\n/* ============================================================================\n Context Tags\n Internal: _pillar-context-tag | Public: pillar-context-tag\n Removable chips for user context items (highlighted text, etc.)\n ============================================================================ */\n\n._pillar-context-tag-list {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 8px 14px 0;\n}\n\n._pillar-context-tag {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n max-width: 200px;\n padding: 4px 6px 4px 8px;\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-text-secondary);\n background: var(--pillar-bg-tertiary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-md);\n cursor: default;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-context-tag:hover {\n background: var(--pillar-bg-secondary);\n border-color: var(--pillar-text-muted);\n}\n\n._pillar-context-tag-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n color: var(--pillar-primary);\n}\n\n._pillar-context-tag-icon svg {\n width: 12px;\n height: 12px;\n}\n\n._pillar-context-tag-label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: 1.3;\n}\n\n._pillar-context-tag-remove {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n padding: 0;\n margin-left: 2px;\n color: var(--pillar-text-placeholder);\n background: transparent;\n border: none;\n border-radius: var(--pillar-radius-sm);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-context-tag-remove:hover {\n color: var(--pillar-text);\n background: var(--pillar-border);\n}\n\n._pillar-context-tag-remove svg {\n width: 12px;\n height: 12px;\n}\n\n.pillar-context-tag-list {}\n.pillar-context-tag {}\n.pillar-context-tag-icon {}\n.pillar-context-tag-label {}\n.pillar-context-tag-remove {}\n\n/* Context tags inside user message bubbles need inverted colors */\n._pillar-message-user ._pillar-context-tag-list {\n padding: 0 0 8px 0;\n}\n\n._pillar-message-user ._pillar-context-tag {\n background: rgba(255, 255, 255, 0.2);\n border-color: rgba(255, 255, 255, 0.3);\n color: #ffffff;\n}\n\n._pillar-message-user ._pillar-context-tag:hover {\n background: rgba(255, 255, 255, 0.3);\n border-color: rgba(255, 255, 255, 0.4);\n}\n\n._pillar-message-user ._pillar-context-tag-icon {\n color: #ffffff;\n}\n\n._pillar-message-user ._pillar-context-tag-label {\n color: #ffffff;\n}\n\n/* ============================================================================\n Unified Chat Input\n Internal: _pillar-unified-input | Public: pillar-unified-input\n Reusable input component with context tag support\n ============================================================================ */\n\n._pillar-unified-input-wrapper {\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-unified-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-unified-input {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-unified-input::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-unified-input:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n._pillar-unified-input-row {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n._pillar-unified-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: #ffffff;\n background: var(--pillar-primary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-unified-send-btn:hover:not(:disabled) {\n background: var(--pillar-primary-hover);\n}\n\n._pillar-unified-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-unified-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-unified-input-wrapper {}\n.pillar-unified-input {}\n.pillar-unified-input-row {}\n.pillar-unified-send-btn {}\n\n._pillar-unified-stop-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: #ffffff;\n background: var(--pillar-text-secondary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-unified-stop-btn:hover {\n background: var(--pillar-text);\n}\n\n._pillar-unified-stop-btn svg {\n width: 14px;\n height: 14px;\n}\n\n.pillar-unified-stop-btn {}\n\n/* ============================================================================\n Progress Row (for search, query, generating events)\n Internal: _pillar-progress-row | Public: pillar-progress-row\n ============================================================================ */\n\n._pillar-progress-events {\n margin: 4px 0;\n}\n\n._pillar-progress-row {\n margin: 1px 0;\n padding: 1px 0;\n font-size: 12px;\n animation: pillar-progress-row-fade-in 0.3s ease-in-out;\n}\n\n._pillar-progress-row--error {\n color: #dc2626;\n}\n\n@keyframes pillar-progress-row-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n._pillar-progress-row-header {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 2px 0;\n}\n\n._pillar-progress-expand-icon {\n font-size: 10px;\n color: var(--pillar-text-muted);\n transition: transform 0.2s ease;\n flex-shrink: 0;\n}\n\n._pillar-progress-row-header[style*=\"cursor: pointer\"]:hover ._pillar-progress-expand-icon {\n color: var(--pillar-text-secondary);\n}\n\n._pillar-progress-row-header[data-expanded=\"true\"] ._pillar-progress-expand-icon {\n transform: rotate(90deg);\n}\n\n._pillar-progress-message {\n color: var(--pillar-text-muted);\n font-size: 12px;\n font-style: italic;\n}\n\n._pillar-progress-no-results {\n color: var(--pillar-text-muted);\n font-size: 11px;\n font-style: italic;\n margin-left: 4px;\n}\n\n._pillar-progress-sources {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n._pillar-progress-source-item {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 2px 0;\n font-size: 11px;\n}\n\n._pillar-progress-source-link {\n flex: 1;\n display: flex;\n flex-direction: column;\n text-decoration: none;\n overflow: hidden;\n color: inherit;\n}\n\n._pillar-progress-source-link:hover ._pillar-progress-source-title {\n text-decoration: underline;\n}\n\n._pillar-progress-source-title {\n font-weight: 400;\n color: var(--pillar-text-muted);\n font-size: 11px;\n}\n\n._pillar-progress-details {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n._pillar-progress-detail-item {\n font-size: 11px;\n color: var(--pillar-text-muted);\n padding: 1px 0;\n}\n\n._pillar-progress-detail-action {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n}\n\n._pillar-progress-detail-name {\n font-weight: 500;\n}\n\n._pillar-progress-detail-desc {\n color: var(--pillar-text-muted);\n opacity: 0.8;\n}\n\n._pillar-progress-content-wrapper {\n position: relative;\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.2s ease-out;\n}\n\n._pillar-progress-content-wrapper--expanded {\n grid-template-rows: 1fr;\n margin-top: 6px;\n}\n\n._pillar-progress-content-container {\n overflow: hidden;\n min-height: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--pillar-scrollbar-thumb) transparent;\n}\n\n._pillar-progress-content-wrapper--expanded ._pillar-progress-content-container {\n max-height: 180px;\n overflow-y: auto;\n}\n\n._pillar-progress-content-container::-webkit-scrollbar {\n width: 4px;\n}\n\n._pillar-progress-content-container::-webkit-scrollbar-track {\n background: transparent;\n}\n\n._pillar-progress-content-container::-webkit-scrollbar-thumb {\n background-color: var(--pillar-scrollbar-thumb);\n border-radius: 2px;\n}\n\n._pillar-progress-content-gradient {\n position: absolute;\n bottom: 0;\n left: 16px;\n right: 0;\n height: 20px;\n background: linear-gradient(transparent, var(--pillar-bg));\n pointer-events: none;\n}\n\n._pillar-progress-text {\n font-size: 11px;\n color: var(--pillar-text-muted);\n line-height: 1.4;\n word-break: break-word;\n}\n\n._pillar-progress-text p {\n margin: 0 0 4px 0;\n}\n\n._pillar-progress-text p:last-child {\n margin-bottom: 0;\n}\n\n._pillar-progress-text ol,\n._pillar-progress-text ul {\n margin: 2px 0;\n padding-left: 16px;\n}\n\n._pillar-progress-text li {\n margin-bottom: 1px;\n}\n\n._pillar-progress-text br {\n display: block;\n content: \"\";\n margin-top: 2px;\n}\n\n/* Chevron indicator for progress rows - rotates based on expanded state */\n/* Positioned inline next to label, hidden by default, shown on hover */\n._pillar-progress-chevron {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n font-size: 10px;\n color: var(--pillar-text-muted);\n transition: transform 0.2s ease, opacity 0.15s ease;\n opacity: 0;\n}\n\n._pillar-progress-row:hover ._pillar-progress-chevron {\n opacity: 1;\n}\n\n._pillar-progress-error-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n font-size: 10px;\n color: var(--pillar-error, #dc2626);\n}\n\n/* Tool call arguments (inputs) */\n._pillar-progress-arguments {\n display: flex;\n flex-wrap: wrap;\n gap: 4px 10px;\n margin-bottom: 6px;\n font-size: 11px;\n line-height: 1.4;\n}\n\n._pillar-progress-argument-key {\n color: var(--pillar-text-muted);\n}\n\n._pillar-progress-argument-value {\n color: var(--pillar-text-secondary);\n}\n\n/* Text preview for streaming content */\n._pillar-progress-text-preview-wrapper {\n position: relative;\n margin-top: 4px;\n}\n\n._pillar-progress-text-preview {\n max-height: 180px;\n overflow-y: auto;\n font-size: 11px;\n color: var(--pillar-text-muted);\n line-height: 1.4;\n scroll-behavior: smooth;\n white-space: pre-wrap;\n word-break: break-word;\n scrollbar-width: thin;\n scrollbar-color: var(--pillar-scrollbar-thumb) transparent;\n}\n\n/* All content inside progress text preview should stay muted and small.\n Markdown headers, paragraphs, etc. must not look like answer text. */\n._pillar-progress-text-preview * {\n color: inherit !important;\n font-size: inherit !important;\n font-weight: normal !important;\n line-height: inherit !important;\n margin: 0 !important;\n}\n\n/* Top gradient - fades out older text at the top */\n._pillar-progress-text-gradient {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 20px;\n background: linear-gradient(to bottom, var(--pillar-bg), transparent);\n pointer-events: none;\n z-index: 1;\n}\n\n._pillar-progress-text-preview::-webkit-scrollbar {\n width: 4px;\n}\n\n._pillar-progress-text-preview::-webkit-scrollbar-track {\n background: transparent;\n}\n\n._pillar-progress-text-preview::-webkit-scrollbar-thumb {\n background-color: var(--pillar-scrollbar-thumb);\n border-radius: 2px;\n}\n\n/* Active state indicator */\n._pillar-progress-row--active ._pillar-progress-message {\n font-weight: 500;\n}\n\n/* Long text truncation for labels */\n._pillar-progress-message {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 300px;\n}\n\n/* Children/sub-items styling */\n._pillar-progress-children {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n._pillar-progress-child-item {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 2px 0;\n font-size: 11px;\n}\n\n._pillar-progress-child-link {\n color: var(--pillar-text-muted);\n text-decoration: none;\n transition: color 0.15s ease;\n}\n\n._pillar-progress-child-link:hover {\n color: var(--pillar-text-secondary);\n text-decoration: underline;\n}\n\n._pillar-progress-child-label {\n color: var(--pillar-text-muted);\n font-size: 11px;\n}\n\n/* ============================================================================\n Progress Group (collapsible tool event groups)\n Internal: _pillar-progress-group | Public: pillar-progress-group\n ============================================================================ */\n\n._pillar-progress-group {\n margin: 1px 0;\n animation: pillar-progress-row-fade-in 0.3s ease-in-out;\n}\n\n._pillar-progress-group-header {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 3px 0;\n cursor: pointer;\n font-size: 12px;\n color: var(--pillar-text-secondary, #6b7280);\n user-select: none;\n border-radius: 4px;\n transition: color 0.15s ease;\n}\n\n._pillar-progress-group-header:hover {\n color: var(--pillar-text-primary, #374151);\n}\n\n._pillar-progress-group-chevron {\n flex-shrink: 0;\n font-size: 8px;\n line-height: 1;\n color: inherit;\n}\n\n._pillar-progress-group-summary {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n._pillar-progress-group-active-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--pillar-brand, #3b82f6);\n flex-shrink: 0;\n animation: pillar-progress-group-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes pillar-progress-group-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.4; }\n}\n\n._pillar-progress-group-children {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.2s ease;\n overflow: hidden;\n}\n\n._pillar-progress-group-children--expanded {\n grid-template-rows: 1fr;\n}\n\n._pillar-progress-group-children-inner {\n min-height: 0;\n padding-left: 14px;\n}\n\n/* Nested rows inside groups have reduced spacing */\n._pillar-progress-row--nested {\n margin: 0;\n padding: 0;\n}\n\n._pillar-progress-row--nested ._pillar-progress-row-header {\n padding: 2px 0;\n}\n\n._pillar-progress-row--nested ._pillar-progress-message {\n font-size: 11px;\n}\n\n.pillar-progress-events {}\n.pillar-progress-chevron {}\n.pillar-progress-error-icon {}\n.pillar-progress-text-preview-wrapper {}\n.pillar-progress-text-preview {}\n.pillar-progress-text-gradient {}\n.pillar-progress-children {}\n.pillar-progress-child-item {}\n.pillar-progress-child-link {}\n.pillar-progress-child-label {}\n.pillar-progress-row {}\n.pillar-progress-row-header {}\n.pillar-progress-expand-icon {}\n.pillar-progress-message {}\n.pillar-progress-no-results {}\n.pillar-progress-sources {}\n.pillar-progress-source-item {}\n.pillar-progress-source-link {}\n.pillar-progress-source-title {}\n.pillar-progress-arguments {}\n.pillar-progress-argument {}\n.pillar-progress-argument-key {}\n.pillar-progress-argument-value {}\n.pillar-progress-content-wrapper {}\n.pillar-progress-content-container {}\n.pillar-progress-content-gradient {}\n.pillar-progress-text {}\n.pillar-progress-group {}\n.pillar-progress-group-header {}\n.pillar-progress-group-chevron {}\n.pillar-progress-group-summary {}\n.pillar-progress-group-active-dot {}\n.pillar-progress-group-children {}\n\n/* ============================================================================\n Resume Prompt (Session Resumption)\n Internal: _pillar-resume-prompt | Public: pillar-resume-prompt\n Shows when user reconnects and has an interrupted session to resume\n ============================================================================ */\n\n._pillar-resume-prompt {\n display: flex;\n flex-direction: column;\n gap: var(--pillar-spacing-md);\n padding: var(--pillar-spacing-lg);\n margin: var(--pillar-spacing-md) 0;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n}\n\n._pillar-resume-prompt--seamless {\n flex-direction: row;\n align-items: center;\n gap: var(--pillar-spacing-sm);\n padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n background: transparent;\n border: none;\n justify-content: center;\n}\n\n._pillar-resume-prompt-spinner {\n width: 16px;\n height: 16px;\n border: 2px solid var(--pillar-border);\n border-top-color: var(--pillar-primary);\n border-radius: 50%;\n animation: pillar-spin 0.8s linear infinite;\n flex-shrink: 0;\n}\n\n._pillar-resume-prompt-text {\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-text-muted);\n font-style: italic;\n}\n\n._pillar-resume-prompt-content {\n display: flex;\n gap: var(--pillar-spacing-md);\n align-items: flex-start;\n}\n\n._pillar-resume-prompt-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n flex-shrink: 0;\n color: var(--pillar-primary);\n background: var(--pillar-primary-light);\n border-radius: var(--pillar-radius-md);\n}\n\n._pillar-resume-prompt-body {\n flex: 1;\n min-width: 0;\n}\n\n._pillar-resume-prompt-title {\n font-size: var(--pillar-font-size-base);\n font-weight: 600;\n color: var(--pillar-text);\n margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-resume-prompt-message {\n display: flex;\n flex-direction: column;\n gap: 2px;\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-text-muted);\n}\n\n._pillar-resume-prompt-user-msg {\n font-style: italic;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n._pillar-resume-prompt-summary {\n font-size: var(--pillar-font-size-xs);\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-resume-prompt-actions {\n display: flex;\n gap: var(--pillar-spacing-sm);\n justify-content: flex-end;\n}\n\n._pillar-resume-prompt-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n font-size: var(--pillar-font-size-sm);\n font-weight: 500;\n font-family: var(--pillar-font-family);\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n transition: all var(--pillar-transition-fast);\n border: 1px solid transparent;\n}\n\n._pillar-resume-prompt-btn--primary {\n background: var(--pillar-primary);\n color: #ffffff;\n border-color: var(--pillar-primary);\n}\n\n._pillar-resume-prompt-btn--primary:hover {\n background: var(--pillar-primary-hover);\n border-color: var(--pillar-primary-hover);\n}\n\n._pillar-resume-prompt-btn--ghost {\n background: transparent;\n color: var(--pillar-text-muted);\n border-color: transparent;\n}\n\n._pillar-resume-prompt-btn--ghost:hover {\n background: var(--pillar-bg-tertiary);\n color: var(--pillar-text);\n}\n\n._pillar-resume-prompt-btn svg {\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n}\n\n.pillar-resume-prompt {}\n.pillar-resume-prompt-spinner {}\n.pillar-resume-prompt-text {}\n.pillar-resume-prompt-content {}\n.pillar-resume-prompt-icon {}\n.pillar-resume-prompt-body {}\n.pillar-resume-prompt-title {}\n.pillar-resume-prompt-message {}\n.pillar-resume-prompt-user-msg {}\n.pillar-resume-prompt-summary {}\n.pillar-resume-prompt-actions {}\n.pillar-resume-prompt-btn {}\n";
package/dist/components/Progress/ProgressRow.d.ts CHANGED
@@ -15,5 +15,6 @@ export interface ProgressRowProps {
15
15
  isLast?: boolean;
16
16
  responseStarted?: boolean;
17
17
  nested?: boolean;
18
+ groupActive?: boolean;
18
19
  }
19
- export declare function ProgressRow({ progress, isActive, isLast, responseStarted, nested, }: ProgressRowProps): import("preact").JSX.Element | null;
20
+ export declare function ProgressRow({ progress, isActive, isLast, responseStarted, nested, groupActive, }: ProgressRowProps): import("preact").JSX.Element | null;
package/dist/components/TextSelection/index.d.ts CHANGED
@@ -3,4 +3,3 @@
3
3
  */
4
4
  export { TextSelectionManager } from './TextSelectionManager';
5
5
  export { TextSelectionPopover } from './TextSelectionPopover';
6
- export { TEXT_SELECTION_STYLES } from './styles';
package/dist/components/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Components Index
3
3
  */
4
- export { Panel, PanelContent, Header, ChatInput, PANEL_STYLES } from './Panel';
4
+ export { Panel, PanelContent, Header, ChatInput } from './Panel';
5
5
  export { PillarProvider, usePillar, useAPI, useEvents } from './context';
6
6
  export * from './shared';
7
7
  export * from './Views';
package/dist/core/config.d.ts CHANGED
@@ -52,6 +52,11 @@ export interface ThemeConfig {
52
52
  colors?: ThemeColors;
53
53
  /** Custom color overrides for dark mode (when mode is 'auto' or 'dark') */
54
54
  darkColors?: ThemeColors;
55
+ /**
56
+ * Font family for all panel text.
57
+ * @default "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
58
+ */
59
+ fontFamily?: string;
55
60
  }
56
61
  export interface PanelConfig {
57
62
  enabled?: boolean;
@@ -212,6 +217,13 @@ export interface EdgeTriggerConfig {
212
217
  * @default true
213
218
  */
214
219
  enabled?: boolean;
220
+ /**
221
+ * Whether the panel can be resized by dragging the edge of the sidebar trigger.
222
+ * When enabled, a drag handle appears on the inner edge of the sidebar when the panel is open.
223
+ * The resized width is persisted to localStorage.
224
+ * @default true
225
+ */
226
+ resizable?: boolean;
215
227
  }
216
228
  export type MobileTriggerPosition = 'bottom-right' | 'bottom-left';
217
229
  export type MobileTriggerIcon = 'sparkle' | 'question' | 'help' | 'chat' | 'support';
@@ -353,6 +365,7 @@ export interface ResolvedThemeConfig {
353
365
  mode: ThemeMode;
354
366
  colors: ThemeColors;
355
367
  darkColors: ThemeColors;
368
+ fontFamily?: string;
356
369
  }
357
370
  export interface ResolvedInteractionHighlightConfig {
358
371
  enabled: boolean;
@@ -399,7 +412,7 @@ export interface ResolvedConfig {
399
412
  onReady?: () => void;
400
413
  onError?: (error: Error) => void;
401
414
  }
402
- export declare const DEFAULT_CONFIG: Omit<ResolvedConfig, 'productKey' | 'publicKey'>;
415
+ export declare const DEFAULT_CONFIG: Omit<ResolvedConfig, 'productKey'>;
403
416
  export declare function resolveConfig(config: PillarConfig): ResolvedConfig;
404
417
  /**
405
418
  * Server embed config type (matches backend response)