@pillar-ai/sdk 0.1.7 → 0.1.8

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 (25) hide show
  1. package/README.md +13 -19
  2. package/dist/actions/types.d.ts +17 -6
  3. package/dist/api/client.d.ts +3 -3
  4. package/dist/cli/sync.d.ts +1 -1
  5. package/dist/cli/sync.js +286 -0
  6. package/dist/components/Button/EdgeTrigger.d.ts +1 -0
  7. package/dist/components/Button/MobileTrigger.d.ts +56 -0
  8. package/dist/components/Button/index.d.ts +1 -0
  9. package/dist/components/Panel/styles.d.ts +1 -1
  10. package/dist/components/Plan/InlinePlanView.d.ts +1 -1
  11. package/dist/components/Plan/PlanStepItem.d.ts +7 -2
  12. package/dist/core/Pillar.d.ts +60 -18
  13. package/dist/core/config.d.ts +78 -14
  14. package/dist/core/context.d.ts +22 -7
  15. package/dist/core/events.d.ts +2 -2
  16. package/dist/core/plan-executor.d.ts +18 -0
  17. package/dist/core/plan.d.ts +33 -2
  18. package/dist/index.d.ts +3 -5
  19. package/dist/pillar.esm.js +1 -1
  20. package/dist/store/chat.d.ts +1 -1
  21. package/dist/store/context.d.ts +7 -13
  22. package/dist/store/panel.d.ts +14 -0
  23. package/package.json +6 -4
  24. package/src/actions/types.ts +18 -9
  25. package/src/cli/sync.ts +0 -477
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-root {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n._pillar-panel-ui {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n/* Public override classes - empty by default */\n.pillar-panel {}\n.pillar-panel-root {}\n.pillar-panel-ui {}\n\n/* ============================================================================\n Backdrop\n ============================================================================ */\n\n._pillar-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.3);\n opacity: 0;\n visibility: hidden;\n transition: opacity var(--pillar-transition-normal), visibility var(--pillar-transition-normal);\n z-index: 99998;\n}\n\n._pillar-backdrop--visible {\n opacity: 1;\n visibility: visible;\n}\n\n.pillar-backdrop {}\n\n/* ============================================================================\n Header\n Internal: _pillar-header | Public: pillar-header\n ============================================================================ */\n\n._pillar-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n border-bottom: 1px solid var(--pillar-border);\n flex-shrink: 0;\n background: var(--pillar-bg);\n}\n\n._pillar-header-left {\n display: flex;\n align-items: center;\n gap: var(--pillar-spacing-sm);\n}\n\n._pillar-header-title {\n font-size: var(--pillar-font-size-lg);\n font-weight: 600;\n color: var(--pillar-text);\n}\n\n/* Public override classes */\n.pillar-header {}\n.pillar-header-left {}\n.pillar-header-title {}\n\n/* ============================================================================\n Icon Buttons (back, home, close)\n Internal: _pillar-icon-btn | Public: pillar-icon-btn\n ============================================================================ */\n\n._pillar-icon-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: none;\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n transition: color var(--pillar-transition-fast), background var(--pillar-transition-fast);\n}\n\n._pillar-icon-btn:hover {\n color: var(--pillar-text);\n background: var(--pillar-bg-tertiary);\n}\n\n._pillar-icon-btn svg {\n width: 20px;\n height: 20px;\n}\n\n.pillar-icon-btn {}\n.pillar-back-btn {}\n.pillar-home-btn {}\n.pillar-close-btn {}\n\n/* ============================================================================\n Content Area\n Internal: _pillar-content | Public: pillar-content\n ============================================================================ */\n\n._pillar-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n min-height: 0;\n}\n\n.pillar-content {}\n\n/* ============================================================================\n Search Input\n Internal: _pillar-search | Public: pillar-search\n ============================================================================ */\n\n._pillar-search {\n position: relative;\n padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n}\n\n._pillar-search-input {\n width: 100%;\n padding: 10px 12px 10px 40px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n color: var(--pillar-text);\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n outline: none;\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-search-input:focus {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-search-input::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-search-icon {\n position: absolute;\n left: 32px;\n top: 50%;\n transform: translateY(-50%);\n width: 18px;\n height: 18px;\n color: var(--pillar-text-placeholder);\n pointer-events: none;\n}\n\n._pillar-search-icon svg {\n width: 18px;\n height: 18px;\n}\n\n.pillar-search {}\n.pillar-search-input {}\n.pillar-search-icon {}\n\n/* ============================================================================\n Chat Input (Persistent Bottom)\n Internal: _pillar-chat-input | Public: pillar-chat-input\n ============================================================================ */\n\n._pillar-chat-input-container {\n flex-shrink: 0;\n border-top: 1px solid var(--pillar-border);\n background: var(--pillar-bg);\n display: flex;\n flex-direction: column;\n max-height: 50%;\n transition: max-height var(--pillar-transition-normal);\n}\n\n._pillar-chat-input-container--expanded {\n max-height: 60%;\n}\n\n._pillar-chat-input-messages {\n flex: 1;\n overflow-y: auto;\n padding: 0;\n max-height: 0;\n transition: max-height var(--pillar-transition-normal), padding var(--pillar-transition-normal);\n}\n\n._pillar-chat-input-container--expanded ._pillar-chat-input-messages {\n max-height: 300px;\n padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n}\n\n._pillar-chat-input-message {\n margin-bottom: var(--pillar-spacing-md);\n}\n\n._pillar-chat-input-message--user {\n text-align: right;\n}\n\n._pillar-chat-input-message-content {\n display: inline-block;\n max-width: 85%;\n padding: 10px 14px;\n border-radius: var(--pillar-spacing-lg);\n font-size: var(--pillar-font-size-base);\n line-height: 1.5;\n}\n\n._pillar-chat-input-message--user ._pillar-chat-input-message-content {\n background: var(--pillar-primary);\n color: #ffffff;\n border-bottom-right-radius: var(--pillar-radius-sm);\n}\n\n._pillar-chat-input-message--assistant ._pillar-chat-input-message-content {\n background: var(--pillar-bg-tertiary);\n color: var(--pillar-text);\n border-bottom-left-radius: var(--pillar-radius-sm);\n}\n\n._pillar-chat-input-sources {\n margin-top: var(--pillar-spacing-sm);\n padding-top: var(--pillar-spacing-sm);\n border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-input-sources-title {\n font-size: var(--pillar-font-size-xs);\n font-weight: 500;\n color: var(--pillar-text-muted);\n margin-bottom: 6px;\n}\n\n._pillar-chat-input-source {\n display: block;\n padding: 6px 10px;\n margin-bottom: var(--pillar-spacing-xs);\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-primary);\n background: var(--pillar-primary-light);\n border-radius: var(--pillar-radius-md);\n text-decoration: none;\n cursor: pointer;\n}\n\n._pillar-chat-input-source:hover {\n background: var(--pillar-primary-light-hover);\n}\n\n._pillar-chat-input-area {\n padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n}\n\n._pillar-chat-input-wrapper {\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-chat-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-chat-input-textarea {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-chat-input-textarea::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n.pillar-chat-input-container {}\n.pillar-chat-input-messages {}\n.pillar-chat-input-message {}\n.pillar-chat-input-message-content {}\n.pillar-chat-input-sources {}\n.pillar-chat-input-area {}\n.pillar-chat-input-wrapper {}\n.pillar-chat-input-textarea {}\n\n/* ============================================================================\n Chat Input Footer (contains send button)\n ============================================================================ */\n\n._pillar-chat-input-footer {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n/* ============================================================================\n Send Button - In footer row, right aligned\n Internal: _pillar-send-btn | Public: pillar-send-btn\n ============================================================================ */\n\n._pillar-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-tertiary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-send-btn:hover:not(:disabled) {\n color: #ffffff;\n background: var(--pillar-primary);\n}\n\n._pillar-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-send-btn {}\n.pillar-chat-input-footer {}\n\n/* ============================================================================\n Loading States\n Internal: _pillar-loading | Public: pillar-loading\n ============================================================================ */\n\n._pillar-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px var(--pillar-spacing-xl);\n color: var(--pillar-text-muted);\n}\n\n._pillar-loading-spinner {\n width: 24px;\n height: 24px;\n border: 2px solid var(--pillar-border);\n border-top-color: var(--pillar-primary);\n border-radius: 50%;\n animation: pillar-spin 0.8s linear infinite;\n}\n\n@keyframes pillar-spin {\n to { transform: rotate(360deg); }\n}\n\n.pillar-loading {}\n.pillar-loading-spinner {}\n\n/* ============================================================================\n Progress Indicator (AI activity status)\n Internal: _pillar-progress | Public: pillar-progress\n ============================================================================ */\n\n._pillar-progress-indicator {\n display: flex;\n align-items: center;\n gap: var(--pillar-spacing-sm);\n padding: var(--pillar-spacing-sm) 0;\n}\n\n._pillar-progress-indicator ._pillar-loading-spinner {\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n}\n\n._pillar-progress-message {\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-text-muted);\n font-style: italic;\n}\n\n.pillar-progress-indicator {}\n.pillar-progress-message {}\n\n/* ============================================================================\n Empty States\n Internal: _pillar-empty | Public: pillar-empty\n ============================================================================ */\n\n._pillar-empty {\n padding: 40px var(--pillar-spacing-xl);\n text-align: center;\n color: var(--pillar-text-muted);\n}\n\n._pillar-empty-icon {\n width: 48px;\n height: 48px;\n margin: 0 auto var(--pillar-spacing-lg);\n color: var(--pillar-border);\n}\n\n._pillar-empty-title {\n font-size: var(--pillar-font-size-lg);\n font-weight: 500;\n color: var(--pillar-text);\n margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-empty-description {\n font-size: var(--pillar-font-size-base);\n}\n\n.pillar-empty {}\n.pillar-empty-icon {}\n.pillar-empty-title {}\n.pillar-empty-description {}\n\n/* ============================================================================\n Section Titles\n Internal: _pillar-section-title | Public: pillar-section-title\n ============================================================================ */\n\n._pillar-section-title {\n padding: var(--pillar-spacing-md) var(--pillar-spacing-xl) var(--pillar-spacing-sm);\n font-size: var(--pillar-font-size-xs);\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--pillar-text-muted);\n}\n\n.pillar-section-title {}\n\n/* ============================================================================\n Related Articles\n ============================================================================ */\n\n._pillar-related-articles {\n border-top: 1px solid var(--pillar-border);\n margin-top: var(--pillar-spacing-2xl);\n padding-top: var(--pillar-spacing-sm);\n}\n\n.pillar-related-articles {}\n\n/* ============================================================================\n Scrollbar Styling\n ============================================================================ */\n\n._pillar-content::-webkit-scrollbar,\n._pillar-chat-input-messages::-webkit-scrollbar {\n width: 6px;\n}\n\n._pillar-content::-webkit-scrollbar-track,\n._pillar-chat-input-messages::-webkit-scrollbar-track {\n background: var(--pillar-scrollbar-track);\n}\n\n._pillar-content::-webkit-scrollbar-thumb,\n._pillar-chat-input-messages::-webkit-scrollbar-thumb {\n background: var(--pillar-scrollbar-thumb);\n border-radius: 3px;\n}\n\n._pillar-content::-webkit-scrollbar-thumb:hover,\n._pillar-chat-input-messages::-webkit-scrollbar-thumb:hover {\n background: var(--pillar-scrollbar-thumb-hover);\n}\n\n/* ============================================================================\n Home View\n ============================================================================ */\n\n._pillar-home-view {\n display: flex;\n flex-direction: column;\n height: 100%;\n padding: var(--pillar-spacing-xl);\n}\n\n._pillar-home-view-header {\n text-align: center;\n padding: var(--pillar-spacing-2xl) 0;\n}\n\n._pillar-home-view-icon {\n font-size: 40px;\n margin-bottom: var(--pillar-spacing-md);\n}\n\n._pillar-home-view-title {\n font-size: var(--pillar-font-size-xl);\n font-weight: 600;\n color: var(--pillar-text);\n margin: 0;\n}\n\n._pillar-home-view-questions {\n display: flex;\n flex-direction: column;\n gap: var(--pillar-spacing-sm);\n margin-bottom: var(--pillar-spacing-xl);\n}\n\n._pillar-home-view-input-wrapper {\n margin-top: auto;\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-home-view-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-home-view-input {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-home-view-input::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-home-view-input-row {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n._pillar-home-view-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-tertiary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-home-view-send-btn:hover:not(:disabled) {\n color: #ffffff;\n background: var(--pillar-primary);\n}\n\n._pillar-home-view-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-home-view-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-home-view {}\n.pillar-home-view-header {}\n.pillar-home-view-title {}\n.pillar-home-view-questions {}\n.pillar-home-view-input-wrapper {}\n.pillar-home-view-input {}\n.pillar-home-view-send-btn {}\n\n/* ============================================================================\n Question Chip\n ============================================================================ */\n\n._pillar-question-chip {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n text-align: left;\n color: var(--pillar-text);\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n cursor: pointer;\n transition: background var(--pillar-transition-fast), border-color var(--pillar-transition-fast);\n}\n\n._pillar-question-chip:hover {\n border-color: var(--pillar-primary);\n}\n\n._pillar-question-chip-text {\n flex: 1;\n}\n\n._pillar-question-chip-arrow {\n color: var(--pillar-text-muted);\n margin-left: var(--pillar-spacing-sm);\n transition: color var(--pillar-transition-fast), transform var(--pillar-transition-fast);\n}\n\n._pillar-question-chip:hover ._pillar-question-chip-arrow {\n color: var(--pillar-primary);\n transform: translateX(2px);\n}\n\n._pillar-question-chip-skeleton {\n height: 44px;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n overflow: hidden;\n}\n\n._pillar-question-chip-skeleton-bar {\n width: 60%;\n height: 14px;\n margin: 15px var(--pillar-spacing-lg);\n background: linear-gradient(90deg, var(--pillar-border) 25%, var(--pillar-bg-tertiary) 50%, var(--pillar-border) 75%);\n background-size: 200% 100%;\n animation: pillar-shimmer 1.5s infinite;\n border-radius: var(--pillar-radius-sm);\n}\n\n@keyframes pillar-shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n.pillar-question-chip {}\n.pillar-question-chip-text {}\n.pillar-question-chip-arrow {}\n.pillar-question-chip-skeleton {}\n.pillar-question-chip-skeleton-bar {}\n\n/* ============================================================================\n Standalone Chat View\n Internal: _pillar-chat-view | Public: pillar-chat-view\n ============================================================================ */\n\n._pillar-chat-view {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n._pillar-chat-view-messages {\n flex: 1;\n overflow-y: auto;\n padding: var(--pillar-spacing-xl);\n display: flex;\n flex-direction: column;\n}\n\n._pillar-chat-view-welcome {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px var(--pillar-spacing-xl);\n text-align: center;\n flex: 1;\n}\n\n._pillar-chat-view-welcome-icon {\n font-size: 48px;\n margin-bottom: var(--pillar-spacing-lg);\n}\n\n._pillar-chat-view-welcome-title {\n font-size: var(--pillar-font-size-xl);\n font-weight: 600;\n color: var(--pillar-text);\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-view-welcome-text {\n font-size: var(--pillar-font-size-base);\n color: var(--pillar-text-muted);\n max-width: 280px;\n}\n\n._pillar-chat-view-message {\n margin-bottom: var(--pillar-spacing-lg);\n}\n\n._pillar-chat-view-message--user {\n text-align: right;\n}\n\n._pillar-chat-view-message--assistant {\n text-align: left;\n}\n\n.pillar-chat-view {}\n.pillar-chat-view-messages {}\n.pillar-chat-view-welcome {}\n.pillar-chat-view-message {}\n\n/* ============================================================================\n User Message Bubble\n Internal: _pillar-message-user | Public: pillar-message-user\n ============================================================================ */\n\n._pillar-message-user {\n display: inline-block;\n max-width: 85%;\n padding: 10px 14px;\n border-radius: var(--pillar-spacing-lg);\n border-bottom-right-radius: var(--pillar-radius-sm);\n font-size: var(--pillar-font-size-base);\n line-height: 1.5;\n background: var(--pillar-primary);\n color: #ffffff;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n._pillar-message-user-images {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-message-user-image {\n max-width: 120px;\n max-height: 120px;\n border-radius: var(--pillar-radius-md);\n object-fit: cover;\n}\n\n.pillar-message-user {}\n.pillar-message-user-images {}\n.pillar-message-user-image {}\n\n/* ============================================================================\n AI Response\n Internal: _pillar-message-assistant | Public: pillar-message-assistant\n ============================================================================ */\n\n._pillar-message-assistant {\n font-size: var(--pillar-font-size-base);\n line-height: 1.6;\n color: var(--pillar-text-secondary);\n}\n\n._pillar-message-assistant p {\n margin: 0 0 var(--pillar-spacing-md);\n}\n\n._pillar-message-assistant p:last-child {\n margin-bottom: 0;\n}\n\n._pillar-message-assistant h2 {\n font-size: var(--pillar-font-size-lg);\n font-weight: 600;\n color: var(--pillar-text);\n margin: var(--pillar-spacing-lg) 0 var(--pillar-spacing-sm);\n}\n\n._pillar-message-assistant h3 {\n font-size: var(--pillar-font-size-md);\n font-weight: 600;\n color: var(--pillar-text);\n margin: 14px 0 6px;\n}\n\n._pillar-message-assistant h4 {\n font-size: var(--pillar-font-size-base);\n font-weight: 600;\n color: var(--pillar-text);\n margin: var(--pillar-spacing-md) 0 6px;\n}\n\n._pillar-message-assistant ul,\n._pillar-message-assistant ol {\n margin: 0 0 var(--pillar-spacing-md);\n padding-left: var(--pillar-spacing-2xl);\n list-style-position: outside;\n}\n\n._pillar-message-assistant ul {\n list-style-type: disc;\n}\n\n._pillar-message-assistant ol {\n list-style-type: decimal;\n}\n\n._pillar-message-assistant li {\n margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-message-assistant code {\n padding: 2px 6px;\n font-size: var(--pillar-font-size-sm);\n background: var(--pillar-bg-tertiary);\n border-radius: var(--pillar-radius-sm);\n font-family: var(--pillar-font-mono);\n color: var(--pillar-text);\n}\n\n._pillar-message-assistant pre {\n margin: var(--pillar-spacing-md) 0;\n padding: var(--pillar-spacing-md) 14px;\n background: var(--pillar-code-bg);\n border-radius: var(--pillar-radius-lg);\n overflow-x: auto;\n}\n\n._pillar-message-assistant pre code {\n padding: 0;\n background: none;\n color: var(--pillar-code-text);\n font-size: var(--pillar-font-size-sm);\n line-height: 1.5;\n}\n\n._pillar-message-assistant a {\n color: var(--pillar-primary);\n text-decoration: none;\n}\n\n._pillar-message-assistant a:hover {\n text-decoration: underline;\n}\n\n._pillar-message-assistant strong {\n font-weight: 600;\n color: var(--pillar-text);\n}\n\n._pillar-message-assistant em {\n font-style: italic;\n}\n\n.pillar-message-assistant {}\n\n/* ============================================================================\n Chat Sources\n Internal: _pillar-chat-sources | Public: pillar-chat-sources\n ============================================================================ */\n\n._pillar-chat-sources {\n margin-top: var(--pillar-spacing-md);\n padding-top: var(--pillar-spacing-md);\n border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-sources-title {\n font-size: var(--pillar-font-size-xs);\n font-weight: 500;\n color: var(--pillar-text-muted);\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-source {\n display: block;\n padding: var(--pillar-spacing-sm) var(--pillar-spacing-md);\n margin-bottom: 6px;\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-primary);\n background: var(--pillar-primary-light);\n border-radius: var(--pillar-radius-lg);\n text-decoration: none;\n cursor: pointer;\n transition: background var(--pillar-transition-fast);\n}\n\n._pillar-chat-source:hover {\n background: var(--pillar-primary-light-hover);\n}\n\n.pillar-chat-sources {}\n.pillar-chat-sources-title {}\n.pillar-chat-source {}\n\n/* ============================================================================\n Chat Actions (Suggested action buttons)\n Internal: _pillar-chat-actions | Public: pillar-chat-actions\n ============================================================================ */\n\n._pillar-chat-actions {\n margin-top: var(--pillar-spacing-md);\n padding-top: var(--pillar-spacing-md);\n border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-actions-title {\n font-size: var(--pillar-font-size-xs);\n font-weight: 500;\n color: var(--pillar-text-muted);\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-actions-buttons {\n display: flex;\n flex-direction: column;\n gap: var(--pillar-spacing-sm);\n}\n\n/* Task buttons should wrap horizontally */\n._pillar-chat-actions-buttons > ._pillar-task-button-group {\n display: flex;\n flex-wrap: wrap;\n gap: var(--pillar-spacing-sm);\n}\n\n/* Confirm cards take full width */\n._pillar-chat-actions-buttons > .pillar-confirm-card-wrapper {\n width: 100%;\n}\n\n.pillar-chat-actions {}\n.pillar-chat-actions-title {}\n.pillar-chat-actions-buttons {}\n\n/* ============================================================================\n Chat View Input Area - Cursor-style design\n ============================================================================ */\n\n._pillar-chat-view-input-area {\n flex-shrink: 0;\n padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n border-top: 1px solid var(--pillar-border);\n background: var(--pillar-bg);\n}\n\n._pillar-chat-view-input-wrapper {\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-chat-view-input {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-chat-view-input::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-chat-view-input-row {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n._pillar-chat-view-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-tertiary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-send-btn:hover:not(:disabled) {\n color: #ffffff;\n background: var(--pillar-primary);\n}\n\n._pillar-chat-view-send-btn:active:not(:disabled) {\n transform: scale(0.95);\n}\n\n._pillar-chat-view-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-chat-view-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-chat-view-input-area {}\n.pillar-chat-view-input-wrapper {}\n.pillar-chat-view-input {}\n.pillar-chat-view-send-btn {}\n.pillar-chat-view-input-footer {}\n.pillar-chat-view-new-chat-btn {}\n\n/* New chat button styling */\n._pillar-chat-view-input-footer {\n display: flex;\n justify-content: center;\n margin-top: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-view-new-chat-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font-size: var(--pillar-font-size-sm);\n font-weight: 500;\n font-family: var(--pillar-font-family);\n color: var(--pillar-text-muted);\n background: transparent;\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n cursor: pointer;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-new-chat-btn:hover {\n color: var(--pillar-text);\n background: var(--pillar-bg-secondary);\n border-color: var(--pillar-text-muted);\n}\n\n._pillar-chat-view-new-chat-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n._pillar-chat-view-new-chat-icon svg {\n width: 14px;\n height: 14px;\n}\n\n/* Scrollbar for chat view */\n._pillar-chat-view-messages::-webkit-scrollbar {\n width: 6px;\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-track {\n background: var(--pillar-scrollbar-track);\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-thumb {\n background: var(--pillar-scrollbar-thumb);\n border-radius: 3px;\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-thumb:hover {\n background: var(--pillar-scrollbar-thumb-hover);\n}\n\n/* ============================================================================\n Chat Image Upload\n ============================================================================ */\n\n._pillar-chat-view-input-area--dragging {\n position: relative;\n background: rgba(37, 99, 235, 0.05);\n}\n\n._pillar-chat-drop-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n background: rgba(37, 99, 235, 0.1);\n border: 2px dashed var(--pillar-primary);\n border-radius: var(--pillar-radius-lg);\n color: var(--pillar-primary);\n font-size: var(--pillar-font-size-sm);\n font-weight: 500;\n z-index: 10;\n pointer-events: none;\n}\n\n._pillar-chat-drop-overlay svg {\n width: 24px;\n height: 24px;\n}\n\n._pillar-chat-images-preview {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 12px 12px 4px 12px;\n}\n\n._pillar-chat-image-thumb {\n position: relative;\n width: 56px;\n height: 56px;\n border-radius: var(--pillar-radius-md);\n overflow: hidden;\n border: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-image-thumb img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n._pillar-chat-image-loading {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n._pillar-chat-image-error {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(239, 68, 68, 0.3);\n color: #dc2626;\n font-weight: bold;\n font-size: 14px;\n}\n\n._pillar-chat-image-remove {\n position: absolute;\n top: 2px;\n right: 2px;\n width: 18px;\n height: 18px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.6);\n border: none;\n border-radius: 50%;\n color: white;\n cursor: pointer;\n opacity: 0;\n transition: opacity var(--pillar-transition-fast);\n}\n\n._pillar-chat-image-thumb:hover ._pillar-chat-image-remove {\n opacity: 1;\n}\n\n._pillar-chat-image-remove svg {\n width: 10px;\n height: 10px;\n}\n\n._pillar-chat-image-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: transparent;\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n transition: color var(--pillar-transition-fast);\n}\n\n._pillar-chat-image-btn:hover:not(:disabled) {\n color: var(--pillar-text);\n}\n\n._pillar-chat-image-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n._pillar-chat-image-btn svg {\n width: 18px;\n height: 18px;\n}\n\n.pillar-chat-images-preview {}\n.pillar-chat-image-thumb {}\n.pillar-chat-image-remove {}\n.pillar-chat-image-btn {}\n.pillar-chat-drop-overlay {}\n\n/* ============================================================================\n Legacy Class Mappings (for backward compatibility)\n Maps old BEM-style class names to new internal classes\n ============================================================================ */\n\n.pillar-panel { }\n.pillar-panel--right { }\n.pillar-panel--left { }\n.pillar-panel--open { }\n.pillar-panel--manual { }\n.pillar-panel-root { }\n.pillar-panel-ui { }\n.pillar-panel__header { }\n.pillar-panel__header-left { }\n.pillar-panel__back-btn { }\n.pillar-panel__home-btn { }\n.pillar-panel__title { }\n.pillar-panel__close-btn { }\n.pillar-panel__content { }\n.pillar-search { }\n.pillar-search__input { }\n.pillar-search__icon { }\n.pillar-category-card { }\n.pillar-category-card__icon { }\n.pillar-category-card__content { }\n.pillar-category-card__title { }\n.pillar-category-card__description { }\n.pillar-category-card__count { }\n.pillar-article-card { }\n.pillar-article-card__title { }\n.pillar-article-card__excerpt { }\n.pillar-article-card__meta { }\n.pillar-article { }\n.pillar-article__title { }\n.pillar-article__content { }\n.pillar-category-header { }\n.pillar-category-header__title { }\n.pillar-category-header__description { }\n.pillar-chat-input-container { }\n.pillar-chat-input-container--expanded { }\n.pillar-chat-input__messages { }\n.pillar-chat-input__message { }\n.pillar-chat-input__message--user { }\n.pillar-chat-input__message--assistant { }\n.pillar-chat-input__message-content { }\n.pillar-chat-input__sources { }\n.pillar-chat-input__sources-title { }\n.pillar-chat-input__source { }\n.pillar-chat-input__area { }\n.pillar-chat-input__wrapper { }\n.pillar-chat-input__input { }\n.pillar-chat-input__send-btn { }\n.pillar-loading { }\n.pillar-loading__spinner { }\n.pillar-empty { }\n.pillar-empty__icon { }\n.pillar-empty__title { }\n.pillar-empty__description { }\n.pillar-section-title { }\n.pillar-related-articles { }\n.pillar-home-view { }\n.pillar-chat-view { }\n.pillar-chat-view__messages { }\n.pillar-chat-view__welcome { }\n.pillar-chat-view__welcome-icon { }\n.pillar-chat-view__welcome-title { }\n.pillar-chat-view__welcome-text { }\n.pillar-chat-view__message { }\n.pillar-chat-view__message--user { }\n.pillar-chat-view__message--assistant { }\n.pillar-chat-view__user-bubble { }\n.pillar-chat-view__ai-response { }\n.pillar-chat-view__sources { }\n.pillar-chat-view__sources-title { }\n.pillar-chat-view__source { }\n.pillar-chat-view__input-area { }\n.pillar-chat-view__input-wrapper { }\n.pillar-chat-view__input { }\n.pillar-chat-view__send-btn { }\n.pillar-backdrop { }\n.pillar-backdrop--visible { }\n\n/* ============================================================================\n Task Button Component\n ============================================================================ */\n\n.pillar-task-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.15s ease;\n border: 1px solid transparent;\n text-decoration: none;\n}\n\n.pillar-task-btn__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.pillar-task-btn__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-task-btn__label {\n white-space: nowrap;\n}\n\n/* Primary variant (default) */\n.pillar-task-btn--primary {\n background: #2563eb;\n color: #ffffff;\n border-color: #2563eb;\n}\n\n.pillar-task-btn--primary:hover {\n background: #1d4ed8;\n border-color: #1d4ed8;\n}\n\n/* Default variant */\n.pillar-task-btn--default {\n background: #f3f4f6;\n color: #1a1a1a;\n border-color: #e5e7eb;\n}\n\n.pillar-task-btn--default:hover {\n background: #e5e7eb;\n}\n\n/* Secondary variant */\n.pillar-task-btn--secondary {\n background: #eff6ff;\n color: #2563eb;\n border-color: #dbeafe;\n}\n\n.pillar-task-btn--secondary:hover {\n background: #dbeafe;\n}\n\n/* Outline variant */\n.pillar-task-btn--outline {\n background: transparent;\n color: #2563eb;\n border-color: #2563eb;\n}\n\n.pillar-task-btn--outline:hover {\n background: #eff6ff;\n}\n\n/* Ghost variant */\n.pillar-task-btn--ghost {\n background: transparent;\n color: #6b7280;\n border-color: transparent;\n}\n\n.pillar-task-btn--ghost:hover {\n background: #f3f4f6;\n color: #1a1a1a;\n}\n\n/* Task button group */\n.pillar-task-btn-group {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 12px;\n}\n\n/* Task suggestion card in chat */\n.pillar-task-suggestion {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 12px;\n background: #f9fafb;\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n margin-top: 12px;\n}\n\n.pillar-task-suggestion__header {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: #6b7280;\n}\n\n.pillar-task-suggestion__header svg {\n width: 14px;\n height: 14px;\n}\n\n.pillar-task-suggestion__description {\n font-size: 13px;\n color: #374151;\n}\n\n/* ============================================================================\n Feedback Icons\n Internal: _pillar-feedback | Public: pillar-feedback\n ============================================================================ */\n\n._pillar-message-assistant-wrapper {\n position: relative;\n}\n\n._pillar-feedback-icons {\n display: flex;\n gap: 4px;\n margin-top: var(--pillar-spacing-sm);\n justify-content: flex-end;\n}\n\n._pillar-feedback-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n color: var(--pillar-text-placeholder);\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-feedback-btn:hover {\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-secondary);\n border-color: var(--pillar-border);\n}\n\n._pillar-feedback-btn--active {\n color: var(--pillar-primary);\n background: var(--pillar-primary-light);\n border-color: var(--pillar-primary);\n}\n\n._pillar-feedback-btn--active:hover {\n color: var(--pillar-primary);\n background: var(--pillar-primary-light-hover);\n}\n\n._pillar-feedback-btn svg {\n width: 14px;\n height: 14px;\n}\n\n.pillar-feedback-icons {}\n.pillar-feedback-btn {}\n.pillar-message-assistant-wrapper {}\n\n/* ============================================================================\n Action Status Indicators\n Internal: _pillar-action-status | Public: pillar-action-status\n Shows completion status for auto-run actions (checkmark, X, or spinner)\n ============================================================================ */\n\n._pillar-message-assistant-content {\n display: flex;\n 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";
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 padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n border-bottom: 1px solid var(--pillar-border);\n flex-shrink: 0;\n background: var(--pillar-bg);\n}\n\n._pillar-header-left {\n display: flex;\n align-items: center;\n gap: var(--pillar-spacing-sm);\n}\n\n._pillar-header-title {\n font-size: var(--pillar-font-size-lg);\n font-weight: 600;\n color: var(--pillar-text);\n}\n\n/* Public override classes */\n.pillar-header {}\n.pillar-header-left {}\n.pillar-header-title {}\n\n/* ============================================================================\n Icon Buttons (back, home, close)\n Internal: _pillar-icon-btn | Public: pillar-icon-btn\n ============================================================================ */\n\n._pillar-icon-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: none;\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n transition: color var(--pillar-transition-fast), background var(--pillar-transition-fast);\n}\n\n._pillar-icon-btn:hover {\n color: var(--pillar-text);\n background: var(--pillar-bg-tertiary);\n}\n\n._pillar-icon-btn svg {\n width: 20px;\n height: 20px;\n}\n\n.pillar-icon-btn {}\n.pillar-back-btn {}\n.pillar-home-btn {}\n.pillar-close-btn {}\n\n/* ============================================================================\n Content Area\n Internal: _pillar-content | Public: pillar-content\n ============================================================================ */\n\n._pillar-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n min-height: 0;\n}\n\n.pillar-content {}\n\n/* ============================================================================\n Search Input\n Internal: _pillar-search | Public: pillar-search\n ============================================================================ */\n\n._pillar-search {\n position: relative;\n padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n}\n\n._pillar-search-input {\n width: 100%;\n padding: 10px 12px 10px 40px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n color: var(--pillar-text);\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n outline: none;\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-search-input:focus {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-search-input::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-search-icon {\n position: absolute;\n left: 32px;\n top: 50%;\n transform: translateY(-50%);\n width: 18px;\n height: 18px;\n color: var(--pillar-text-placeholder);\n pointer-events: none;\n}\n\n._pillar-search-icon svg {\n width: 18px;\n height: 18px;\n}\n\n.pillar-search {}\n.pillar-search-input {}\n.pillar-search-icon {}\n\n/* ============================================================================\n Chat Input (Persistent Bottom)\n Internal: _pillar-chat-input | Public: pillar-chat-input\n ============================================================================ */\n\n._pillar-chat-input-container {\n flex-shrink: 0;\n border-top: 1px solid var(--pillar-border);\n background: var(--pillar-bg);\n display: flex;\n flex-direction: column;\n max-height: 50%;\n transition: max-height var(--pillar-transition-normal);\n}\n\n._pillar-chat-input-container--expanded {\n max-height: 60%;\n}\n\n._pillar-chat-input-messages {\n flex: 1;\n overflow-y: auto;\n padding: 0;\n max-height: 0;\n transition: max-height var(--pillar-transition-normal), padding var(--pillar-transition-normal);\n}\n\n._pillar-chat-input-container--expanded ._pillar-chat-input-messages {\n max-height: 300px;\n padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n}\n\n._pillar-chat-input-message {\n margin-bottom: var(--pillar-spacing-md);\n}\n\n._pillar-chat-input-message--user {\n text-align: right;\n}\n\n._pillar-chat-input-message-content {\n display: inline-block;\n max-width: 85%;\n padding: 10px 14px;\n border-radius: var(--pillar-spacing-lg);\n font-size: var(--pillar-font-size-base);\n line-height: 1.5;\n}\n\n._pillar-chat-input-message--user ._pillar-chat-input-message-content {\n background: var(--pillar-primary);\n color: #ffffff;\n border-bottom-right-radius: var(--pillar-radius-sm);\n}\n\n._pillar-chat-input-message--assistant ._pillar-chat-input-message-content {\n background: var(--pillar-bg-tertiary);\n color: var(--pillar-text);\n border-bottom-left-radius: var(--pillar-radius-sm);\n}\n\n._pillar-chat-input-sources {\n margin-top: var(--pillar-spacing-sm);\n padding-top: var(--pillar-spacing-sm);\n border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-input-sources-title {\n font-size: var(--pillar-font-size-xs);\n font-weight: 500;\n color: var(--pillar-text-muted);\n margin-bottom: 6px;\n}\n\n._pillar-chat-input-source {\n display: block;\n padding: 6px 10px;\n margin-bottom: var(--pillar-spacing-xs);\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-primary);\n background: var(--pillar-primary-light);\n border-radius: var(--pillar-radius-md);\n text-decoration: none;\n cursor: pointer;\n}\n\n._pillar-chat-input-source:hover {\n background: var(--pillar-primary-light-hover);\n}\n\n._pillar-chat-input-area {\n padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n}\n\n._pillar-chat-input-wrapper {\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-chat-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-chat-input-textarea {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-chat-input-textarea::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n.pillar-chat-input-container {}\n.pillar-chat-input-messages {}\n.pillar-chat-input-message {}\n.pillar-chat-input-message-content {}\n.pillar-chat-input-sources {}\n.pillar-chat-input-area {}\n.pillar-chat-input-wrapper {}\n.pillar-chat-input-textarea {}\n\n/* ============================================================================\n Chat Input Footer (contains send button)\n ============================================================================ */\n\n._pillar-chat-input-footer {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n/* ============================================================================\n Send Button - In footer row, right aligned\n Internal: _pillar-send-btn | Public: pillar-send-btn\n ============================================================================ */\n\n._pillar-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-tertiary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-send-btn:hover:not(:disabled) {\n color: #ffffff;\n background: var(--pillar-primary);\n}\n\n._pillar-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-send-btn {}\n.pillar-chat-input-footer {}\n\n/* ============================================================================\n Loading States\n Internal: _pillar-loading | Public: pillar-loading\n ============================================================================ */\n\n._pillar-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px var(--pillar-spacing-xl);\n color: var(--pillar-text-muted);\n}\n\n._pillar-loading-spinner {\n width: 24px;\n height: 24px;\n border: 2px solid var(--pillar-border);\n border-top-color: var(--pillar-primary);\n border-radius: 50%;\n animation: pillar-spin 0.8s linear infinite;\n}\n\n@keyframes pillar-spin {\n to { transform: rotate(360deg); }\n}\n\n.pillar-loading {}\n.pillar-loading-spinner {}\n\n/* ============================================================================\n Progress Indicator (AI activity status)\n Internal: _pillar-progress | Public: pillar-progress\n ============================================================================ */\n\n._pillar-progress-indicator {\n display: flex;\n align-items: center;\n gap: var(--pillar-spacing-sm);\n padding: var(--pillar-spacing-sm) 0;\n}\n\n._pillar-progress-indicator ._pillar-loading-spinner {\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n}\n\n._pillar-progress-message {\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-text-muted);\n font-style: italic;\n}\n\n.pillar-progress-indicator {}\n.pillar-progress-message {}\n\n/* ============================================================================\n Empty States\n Internal: _pillar-empty | Public: pillar-empty\n ============================================================================ */\n\n._pillar-empty {\n padding: 40px var(--pillar-spacing-xl);\n text-align: center;\n color: var(--pillar-text-muted);\n}\n\n._pillar-empty-icon {\n width: 48px;\n height: 48px;\n margin: 0 auto var(--pillar-spacing-lg);\n color: var(--pillar-border);\n}\n\n._pillar-empty-title {\n font-size: var(--pillar-font-size-lg);\n font-weight: 500;\n color: var(--pillar-text);\n margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-empty-description {\n font-size: var(--pillar-font-size-base);\n}\n\n.pillar-empty {}\n.pillar-empty-icon {}\n.pillar-empty-title {}\n.pillar-empty-description {}\n\n/* ============================================================================\n Section Titles\n Internal: _pillar-section-title | Public: pillar-section-title\n ============================================================================ */\n\n._pillar-section-title {\n padding: var(--pillar-spacing-md) var(--pillar-spacing-xl) var(--pillar-spacing-sm);\n font-size: var(--pillar-font-size-xs);\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--pillar-text-muted);\n}\n\n.pillar-section-title {}\n\n/* ============================================================================\n Related Articles\n ============================================================================ */\n\n._pillar-related-articles {\n border-top: 1px solid var(--pillar-border);\n margin-top: var(--pillar-spacing-2xl);\n padding-top: var(--pillar-spacing-sm);\n}\n\n.pillar-related-articles {}\n\n/* ============================================================================\n Scrollbar Styling\n ============================================================================ */\n\n._pillar-content::-webkit-scrollbar,\n._pillar-chat-input-messages::-webkit-scrollbar {\n width: 6px;\n}\n\n._pillar-content::-webkit-scrollbar-track,\n._pillar-chat-input-messages::-webkit-scrollbar-track {\n background: var(--pillar-scrollbar-track);\n}\n\n._pillar-content::-webkit-scrollbar-thumb,\n._pillar-chat-input-messages::-webkit-scrollbar-thumb {\n background: var(--pillar-scrollbar-thumb);\n border-radius: 3px;\n}\n\n._pillar-content::-webkit-scrollbar-thumb:hover,\n._pillar-chat-input-messages::-webkit-scrollbar-thumb:hover {\n background: var(--pillar-scrollbar-thumb-hover);\n}\n\n/* ============================================================================\n Home View\n ============================================================================ */\n\n._pillar-home-view {\n display: flex;\n flex-direction: column;\n height: 100%;\n padding: var(--pillar-spacing-xl);\n}\n\n._pillar-home-view-header {\n text-align: center;\n padding: var(--pillar-spacing-2xl) 0;\n}\n\n._pillar-home-view-icon {\n font-size: 40px;\n margin-bottom: var(--pillar-spacing-md);\n}\n\n._pillar-home-view-title {\n font-size: var(--pillar-font-size-xl);\n font-weight: 600;\n color: var(--pillar-text);\n margin: 0;\n}\n\n._pillar-home-view-questions {\n display: flex;\n flex-direction: column;\n gap: var(--pillar-spacing-sm);\n margin-bottom: var(--pillar-spacing-xl);\n}\n\n._pillar-home-view-input-wrapper {\n margin-top: auto;\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-home-view-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-home-view-input {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-home-view-input::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-home-view-input-row {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n._pillar-home-view-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-tertiary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-home-view-send-btn:hover:not(:disabled) {\n color: #ffffff;\n background: var(--pillar-primary);\n}\n\n._pillar-home-view-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-home-view-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-home-view {}\n.pillar-home-view-header {}\n.pillar-home-view-title {}\n.pillar-home-view-questions {}\n.pillar-home-view-input-wrapper {}\n.pillar-home-view-input {}\n.pillar-home-view-send-btn {}\n\n/* ============================================================================\n Question Chip\n ============================================================================ */\n\n._pillar-question-chip {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n text-align: left;\n color: var(--pillar-text);\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n cursor: pointer;\n transition: background var(--pillar-transition-fast), border-color var(--pillar-transition-fast);\n}\n\n._pillar-question-chip:hover {\n border-color: var(--pillar-primary);\n}\n\n._pillar-question-chip-text {\n flex: 1;\n}\n\n._pillar-question-chip-arrow {\n color: var(--pillar-text-muted);\n margin-left: var(--pillar-spacing-sm);\n transition: color var(--pillar-transition-fast), transform var(--pillar-transition-fast);\n}\n\n._pillar-question-chip:hover ._pillar-question-chip-arrow {\n color: var(--pillar-primary);\n transform: translateX(2px);\n}\n\n._pillar-question-chip-skeleton {\n height: 44px;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n overflow: hidden;\n}\n\n._pillar-question-chip-skeleton-bar {\n width: 60%;\n height: 14px;\n margin: 15px var(--pillar-spacing-lg);\n background: linear-gradient(90deg, var(--pillar-border) 25%, var(--pillar-bg-tertiary) 50%, var(--pillar-border) 75%);\n background-size: 200% 100%;\n animation: pillar-shimmer 1.5s infinite;\n border-radius: var(--pillar-radius-sm);\n}\n\n@keyframes pillar-shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n.pillar-question-chip {}\n.pillar-question-chip-text {}\n.pillar-question-chip-arrow {}\n.pillar-question-chip-skeleton {}\n.pillar-question-chip-skeleton-bar {}\n\n/* ============================================================================\n Standalone Chat View\n Internal: _pillar-chat-view | Public: pillar-chat-view\n ============================================================================ */\n\n._pillar-chat-view {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n._pillar-chat-view-messages {\n flex: 1;\n overflow-y: auto;\n padding: var(--pillar-spacing-xl);\n display: flex;\n flex-direction: column;\n}\n\n._pillar-chat-view-welcome {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px var(--pillar-spacing-xl);\n text-align: center;\n flex: 1;\n}\n\n._pillar-chat-view-welcome-icon {\n font-size: 48px;\n margin-bottom: var(--pillar-spacing-lg);\n}\n\n._pillar-chat-view-welcome-title {\n font-size: var(--pillar-font-size-xl);\n font-weight: 600;\n color: var(--pillar-text);\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-view-welcome-text {\n font-size: var(--pillar-font-size-base);\n color: var(--pillar-text-muted);\n max-width: 280px;\n}\n\n._pillar-chat-view-message {\n margin-bottom: var(--pillar-spacing-lg);\n}\n\n._pillar-chat-view-message--user {\n text-align: right;\n}\n\n._pillar-chat-view-message--assistant {\n text-align: left;\n}\n\n.pillar-chat-view {}\n.pillar-chat-view-messages {}\n.pillar-chat-view-welcome {}\n.pillar-chat-view-message {}\n\n/* ============================================================================\n User Message Bubble\n Internal: _pillar-message-user | Public: pillar-message-user\n ============================================================================ */\n\n._pillar-message-user {\n display: inline-block;\n max-width: 85%;\n padding: 10px 14px;\n border-radius: var(--pillar-spacing-lg);\n border-bottom-right-radius: var(--pillar-radius-sm);\n font-size: var(--pillar-font-size-base);\n line-height: 1.5;\n background: var(--pillar-primary);\n color: #ffffff;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n._pillar-message-user-images {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-message-user-image {\n max-width: 120px;\n max-height: 120px;\n border-radius: var(--pillar-radius-md);\n object-fit: cover;\n}\n\n.pillar-message-user {}\n.pillar-message-user-images {}\n.pillar-message-user-image {}\n\n/* ============================================================================\n AI Response\n Internal: _pillar-message-assistant | Public: pillar-message-assistant\n ============================================================================ */\n\n._pillar-message-assistant {\n font-size: var(--pillar-font-size-base);\n line-height: 1.6;\n color: var(--pillar-text-secondary);\n}\n\n._pillar-message-assistant p {\n margin: 0 0 var(--pillar-spacing-md);\n}\n\n._pillar-message-assistant p:last-child {\n margin-bottom: 0;\n}\n\n._pillar-message-assistant h2 {\n font-size: var(--pillar-font-size-lg);\n font-weight: 600;\n color: var(--pillar-text);\n margin: var(--pillar-spacing-lg) 0 var(--pillar-spacing-sm);\n}\n\n._pillar-message-assistant h3 {\n font-size: var(--pillar-font-size-md);\n font-weight: 600;\n color: var(--pillar-text);\n margin: 14px 0 6px;\n}\n\n._pillar-message-assistant h4 {\n font-size: var(--pillar-font-size-base);\n font-weight: 600;\n color: var(--pillar-text);\n margin: var(--pillar-spacing-md) 0 6px;\n}\n\n._pillar-message-assistant ul,\n._pillar-message-assistant ol {\n margin: 0 0 var(--pillar-spacing-md);\n padding-left: var(--pillar-spacing-2xl);\n list-style-position: outside;\n}\n\n._pillar-message-assistant ul {\n list-style-type: disc;\n}\n\n._pillar-message-assistant ol {\n list-style-type: decimal;\n}\n\n._pillar-message-assistant li {\n margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-message-assistant code {\n padding: 2px 6px;\n font-size: var(--pillar-font-size-sm);\n background: var(--pillar-bg-tertiary);\n border-radius: var(--pillar-radius-sm);\n font-family: var(--pillar-font-mono);\n color: var(--pillar-text);\n}\n\n._pillar-message-assistant pre {\n margin: var(--pillar-spacing-md) 0;\n padding: var(--pillar-spacing-md) 14px;\n background: var(--pillar-code-bg);\n border-radius: var(--pillar-radius-lg);\n overflow-x: auto;\n}\n\n._pillar-message-assistant pre code {\n padding: 0;\n background: none;\n color: var(--pillar-code-text);\n font-size: var(--pillar-font-size-sm);\n line-height: 1.5;\n}\n\n._pillar-message-assistant a {\n color: var(--pillar-primary);\n text-decoration: none;\n}\n\n._pillar-message-assistant a:hover {\n text-decoration: underline;\n}\n\n._pillar-message-assistant strong {\n font-weight: 600;\n color: var(--pillar-text);\n}\n\n._pillar-message-assistant em {\n font-style: italic;\n}\n\n.pillar-message-assistant {}\n\n/* ============================================================================\n Chat Sources\n Internal: _pillar-chat-sources | Public: pillar-chat-sources\n ============================================================================ */\n\n._pillar-chat-sources {\n margin-top: var(--pillar-spacing-md);\n padding-top: var(--pillar-spacing-md);\n border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-sources-title {\n font-size: var(--pillar-font-size-xs);\n font-weight: 500;\n color: var(--pillar-text-muted);\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-source {\n display: block;\n padding: var(--pillar-spacing-sm) var(--pillar-spacing-md);\n margin-bottom: 6px;\n font-size: var(--pillar-font-size-sm);\n color: var(--pillar-primary);\n background: var(--pillar-primary-light);\n border-radius: var(--pillar-radius-lg);\n text-decoration: none;\n cursor: pointer;\n transition: background var(--pillar-transition-fast);\n}\n\n._pillar-chat-source:hover {\n background: var(--pillar-primary-light-hover);\n}\n\n.pillar-chat-sources {}\n.pillar-chat-sources-title {}\n.pillar-chat-source {}\n\n/* ============================================================================\n Chat Actions (Suggested action buttons)\n Internal: _pillar-chat-actions | Public: pillar-chat-actions\n ============================================================================ */\n\n._pillar-chat-actions {\n margin-top: var(--pillar-spacing-md);\n padding-top: var(--pillar-spacing-md);\n border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-actions-title {\n font-size: var(--pillar-font-size-xs);\n font-weight: 500;\n color: var(--pillar-text-muted);\n margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-actions-buttons {\n display: flex;\n flex-direction: column;\n gap: var(--pillar-spacing-sm);\n}\n\n/* Task buttons should wrap horizontally */\n._pillar-chat-actions-buttons > ._pillar-task-button-group {\n display: flex;\n flex-wrap: wrap;\n gap: var(--pillar-spacing-sm);\n}\n\n/* Confirm cards take full width */\n._pillar-chat-actions-buttons > .pillar-confirm-card-wrapper {\n width: 100%;\n}\n\n.pillar-chat-actions {}\n.pillar-chat-actions-title {}\n.pillar-chat-actions-buttons {}\n\n/* ============================================================================\n Chat View Input Area - Cursor-style design\n ============================================================================ */\n\n._pillar-chat-view-input-area {\n flex-shrink: 0;\n padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n border-top: 1px solid var(--pillar-border);\n background: var(--pillar-bg);\n}\n\n._pillar-chat-view-input-wrapper {\n display: flex;\n flex-direction: column;\n background: var(--pillar-bg-secondary);\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-xl);\n transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-input-wrapper:focus-within {\n border-color: var(--pillar-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-chat-view-input {\n display: block;\n width: 100%;\n padding: 12px 14px 8px;\n font-size: var(--pillar-font-size-base);\n font-family: var(--pillar-font-family);\n line-height: 1.5;\n color: var(--pillar-text);\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n overflow-y: hidden;\n box-sizing: border-box;\n}\n\n._pillar-chat-view-input::placeholder {\n color: var(--pillar-text-placeholder);\n}\n\n._pillar-chat-view-input-row {\n display: flex;\n justify-content: flex-end;\n padding: 8px 10px;\n}\n\n._pillar-chat-view-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-tertiary);\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n flex-shrink: 0;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-send-btn:hover:not(:disabled) {\n color: #ffffff;\n background: var(--pillar-primary);\n}\n\n._pillar-chat-view-send-btn:active:not(:disabled) {\n transform: scale(0.95);\n}\n\n._pillar-chat-view-send-btn:disabled {\n color: var(--pillar-text-placeholder);\n background: var(--pillar-bg-tertiary);\n cursor: not-allowed;\n}\n\n._pillar-chat-view-send-btn svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-chat-view-input-area {}\n.pillar-chat-view-input-wrapper {}\n.pillar-chat-view-input {}\n.pillar-chat-view-send-btn {}\n.pillar-chat-view-input-footer {}\n.pillar-chat-view-new-chat-btn {}\n\n/* New chat button styling */\n._pillar-chat-view-input-footer {\n display: flex;\n justify-content: center;\n margin-top: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-view-new-chat-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font-size: var(--pillar-font-size-sm);\n font-weight: 500;\n font-family: var(--pillar-font-family);\n color: var(--pillar-text-muted);\n background: transparent;\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-lg);\n cursor: pointer;\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-new-chat-btn:hover {\n color: var(--pillar-text);\n background: var(--pillar-bg-secondary);\n border-color: var(--pillar-text-muted);\n}\n\n._pillar-chat-view-new-chat-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n._pillar-chat-view-new-chat-icon svg {\n width: 14px;\n height: 14px;\n}\n\n/* Scrollbar for chat view */\n._pillar-chat-view-messages::-webkit-scrollbar {\n width: 6px;\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-track {\n background: var(--pillar-scrollbar-track);\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-thumb {\n background: var(--pillar-scrollbar-thumb);\n border-radius: 3px;\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-thumb:hover {\n background: var(--pillar-scrollbar-thumb-hover);\n}\n\n/* ============================================================================\n Chat Image Upload\n ============================================================================ */\n\n._pillar-chat-view-input-area--dragging {\n position: relative;\n background: rgba(37, 99, 235, 0.05);\n}\n\n._pillar-chat-drop-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n background: rgba(37, 99, 235, 0.1);\n border: 2px dashed var(--pillar-primary);\n border-radius: var(--pillar-radius-lg);\n color: var(--pillar-primary);\n font-size: var(--pillar-font-size-sm);\n font-weight: 500;\n z-index: 10;\n pointer-events: none;\n}\n\n._pillar-chat-drop-overlay svg {\n width: 24px;\n height: 24px;\n}\n\n._pillar-chat-images-preview {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 12px 12px 4px 12px;\n}\n\n._pillar-chat-image-thumb {\n position: relative;\n width: 56px;\n height: 56px;\n border-radius: var(--pillar-radius-md);\n overflow: hidden;\n border: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-image-thumb img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n._pillar-chat-image-loading {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n._pillar-chat-image-error {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(239, 68, 68, 0.3);\n color: #dc2626;\n font-weight: bold;\n font-size: 14px;\n}\n\n._pillar-chat-image-remove {\n position: absolute;\n top: 2px;\n right: 2px;\n width: 18px;\n height: 18px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.6);\n border: none;\n border-radius: 50%;\n color: white;\n cursor: pointer;\n opacity: 0;\n transition: opacity var(--pillar-transition-fast);\n}\n\n._pillar-chat-image-thumb:hover ._pillar-chat-image-remove {\n opacity: 1;\n}\n\n._pillar-chat-image-remove svg {\n width: 10px;\n height: 10px;\n}\n\n._pillar-chat-image-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n color: var(--pillar-text-muted);\n background: transparent;\n border: none;\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n transition: color var(--pillar-transition-fast);\n}\n\n._pillar-chat-image-btn:hover:not(:disabled) {\n color: var(--pillar-text);\n}\n\n._pillar-chat-image-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n._pillar-chat-image-btn svg {\n width: 18px;\n height: 18px;\n}\n\n.pillar-chat-images-preview {}\n.pillar-chat-image-thumb {}\n.pillar-chat-image-remove {}\n.pillar-chat-image-btn {}\n.pillar-chat-drop-overlay {}\n\n/* ============================================================================\n Legacy Class Mappings (for backward compatibility)\n Maps old BEM-style class names to new internal classes\n ============================================================================ */\n\n.pillar-panel { }\n.pillar-panel--right { }\n.pillar-panel--left { }\n.pillar-panel--open { }\n.pillar-panel--manual { }\n.pillar-panel-root { }\n.pillar-panel-ui { }\n.pillar-panel__header { }\n.pillar-panel__header-left { }\n.pillar-panel__back-btn { }\n.pillar-panel__home-btn { }\n.pillar-panel__title { }\n.pillar-panel__close-btn { }\n.pillar-panel__content { }\n.pillar-search { }\n.pillar-search__input { }\n.pillar-search__icon { }\n.pillar-category-card { }\n.pillar-category-card__icon { }\n.pillar-category-card__content { }\n.pillar-category-card__title { }\n.pillar-category-card__description { }\n.pillar-category-card__count { }\n.pillar-article-card { }\n.pillar-article-card__title { }\n.pillar-article-card__excerpt { }\n.pillar-article-card__meta { }\n.pillar-article { }\n.pillar-article__title { }\n.pillar-article__content { }\n.pillar-category-header { }\n.pillar-category-header__title { }\n.pillar-category-header__description { }\n.pillar-chat-input-container { }\n.pillar-chat-input-container--expanded { }\n.pillar-chat-input__messages { }\n.pillar-chat-input__message { }\n.pillar-chat-input__message--user { }\n.pillar-chat-input__message--assistant { }\n.pillar-chat-input__message-content { }\n.pillar-chat-input__sources { }\n.pillar-chat-input__sources-title { }\n.pillar-chat-input__source { }\n.pillar-chat-input__area { }\n.pillar-chat-input__wrapper { }\n.pillar-chat-input__input { }\n.pillar-chat-input__send-btn { }\n.pillar-loading { }\n.pillar-loading__spinner { }\n.pillar-empty { }\n.pillar-empty__icon { }\n.pillar-empty__title { }\n.pillar-empty__description { }\n.pillar-section-title { }\n.pillar-related-articles { }\n.pillar-home-view { }\n.pillar-chat-view { }\n.pillar-chat-view__messages { }\n.pillar-chat-view__welcome { }\n.pillar-chat-view__welcome-icon { }\n.pillar-chat-view__welcome-title { }\n.pillar-chat-view__welcome-text { }\n.pillar-chat-view__message { }\n.pillar-chat-view__message--user { }\n.pillar-chat-view__message--assistant { }\n.pillar-chat-view__user-bubble { }\n.pillar-chat-view__ai-response { }\n.pillar-chat-view__sources { }\n.pillar-chat-view__sources-title { }\n.pillar-chat-view__source { }\n.pillar-chat-view__input-area { }\n.pillar-chat-view__input-wrapper { }\n.pillar-chat-view__input { }\n.pillar-chat-view__send-btn { }\n.pillar-backdrop { }\n.pillar-backdrop--visible { }\n\n/* ============================================================================\n Task Button Component\n ============================================================================ */\n\n.pillar-task-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.15s ease;\n border: 1px solid transparent;\n text-decoration: none;\n}\n\n.pillar-task-btn__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.pillar-task-btn__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.pillar-task-btn__label {\n white-space: nowrap;\n}\n\n/* Primary variant (default) */\n.pillar-task-btn--primary {\n background: #2563eb;\n color: #ffffff;\n border-color: #2563eb;\n}\n\n.pillar-task-btn--primary:hover {\n background: #1d4ed8;\n border-color: #1d4ed8;\n}\n\n/* Default variant */\n.pillar-task-btn--default {\n background: #f3f4f6;\n color: #1a1a1a;\n border-color: #e5e7eb;\n}\n\n.pillar-task-btn--default:hover {\n background: #e5e7eb;\n}\n\n/* Secondary variant */\n.pillar-task-btn--secondary {\n background: #eff6ff;\n color: #2563eb;\n border-color: #dbeafe;\n}\n\n.pillar-task-btn--secondary:hover {\n background: #dbeafe;\n}\n\n/* Outline variant */\n.pillar-task-btn--outline {\n background: transparent;\n color: #2563eb;\n border-color: #2563eb;\n}\n\n.pillar-task-btn--outline:hover {\n background: #eff6ff;\n}\n\n/* Ghost variant */\n.pillar-task-btn--ghost {\n background: transparent;\n color: #6b7280;\n border-color: transparent;\n}\n\n.pillar-task-btn--ghost:hover {\n background: #f3f4f6;\n color: #1a1a1a;\n}\n\n/* Task button group */\n.pillar-task-btn-group {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 12px;\n}\n\n/* Task suggestion card in chat */\n.pillar-task-suggestion {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 12px;\n background: #f9fafb;\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n margin-top: 12px;\n}\n\n.pillar-task-suggestion__header {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: #6b7280;\n}\n\n.pillar-task-suggestion__header svg {\n width: 14px;\n height: 14px;\n}\n\n.pillar-task-suggestion__description {\n font-size: 13px;\n color: #374151;\n}\n\n/* ============================================================================\n Feedback Icons\n Internal: _pillar-feedback | Public: pillar-feedback\n ============================================================================ */\n\n._pillar-message-assistant-wrapper {\n position: relative;\n}\n\n._pillar-feedback-icons {\n display: flex;\n gap: 4px;\n margin-top: var(--pillar-spacing-sm);\n justify-content: flex-end;\n}\n\n._pillar-feedback-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: 1px solid var(--pillar-border);\n border-radius: var(--pillar-radius-md);\n cursor: pointer;\n color: var(--pillar-text-placeholder);\n transition: all var(--pillar-transition-fast);\n}\n\n._pillar-feedback-btn:hover {\n color: var(--pillar-text-muted);\n background: var(--pillar-bg-secondary);\n border-color: var(--pillar-border);\n}\n\n._pillar-feedback-btn--active {\n color: var(--pillar-primary);\n background: var(--pillar-primary-light);\n border-color: var(--pillar-primary);\n}\n\n._pillar-feedback-btn--active:hover {\n color: var(--pillar-primary);\n background: var(--pillar-primary-light-hover);\n}\n\n._pillar-feedback-btn svg {\n width: 14px;\n height: 14px;\n}\n\n.pillar-feedback-icons {}\n.pillar-feedback-btn {}\n.pillar-message-assistant-wrapper {}\n\n/* ============================================================================\n Action Status Indicators\n Internal: _pillar-action-status | Public: pillar-action-status\n Shows completion status for auto-run actions (checkmark, X, or spinner)\n ============================================================================ */\n\n._pillar-message-assistant-content {\n display: flex;\n 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";
package/dist/components/Plan/InlinePlanView.d.ts CHANGED
@@ -20,5 +20,5 @@ export declare function InlinePlanView({ plan }: InlinePlanViewProps): h.JSX.Ele
20
20
  * Check if a plan should be displayed inline.
21
21
  */
22
22
  export declare function shouldDisplayInline(plan: ExecutionPlan): boolean;
23
- export declare const INLINE_PLAN_STYLES = "\n/* Inline Plan Container */\n.pillar-inline-plan {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 8px 0;\n}\n\n/* Steps list */\n.pillar-inline-plan__steps {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n/* Individual step */\n.pillar-inline-plan__step {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 8px;\n border-radius: 6px;\n font-size: 13px;\n background: transparent;\n transition: all 0.15s ease;\n}\n\n.pillar-inline-plan__step-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-inline-plan__step-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 0;\n}\n\n.pillar-inline-plan__step-text {\n color: var(--pillar-text-primary, #374151);\n line-height: 1.4;\n}\n\n.pillar-inline-plan__step-instruction {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: wrap;\n}\n\n.pillar-inline-plan__action-badge {\n display: inline-block;\n padding: 1px 5px;\n font-size: 9px;\n font-weight: 600;\n text-transform: uppercase;\n background: var(--pillar-warning, #f59e0b);\n color: white;\n border-radius: 3px;\n flex-shrink: 0;\n}\n\n.pillar-inline-plan__instruction-text {\n font-size: 11px;\n color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-inline-plan__step-actions {\n display: flex;\n gap: 4px;\n}\n\n/* Step states */\n.pillar-inline-plan__step--pending {\n opacity: 0.6;\n}\n\n.pillar-inline-plan__step--ready .pillar-inline-plan__step-icon {\n color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-inline-plan__step--awaiting_confirmation {\n background: var(--pillar-bg-warning-subtle, rgba(251, 191, 36, 0.1));\n}\n\n.pillar-inline-plan__step--awaiting_confirmation .pillar-inline-plan__step-icon {\n color: var(--pillar-warning-dark, #d97706);\n}\n\n.pillar-inline-plan__step--executing .pillar-inline-plan__step-icon,\n.pillar-inline-plan__step--awaiting_result .pillar-inline-plan__step-icon {\n color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-inline-plan__step--completed .pillar-inline-plan__step-icon {\n color: var(--pillar-success, #059669);\n}\n\n.pillar-inline-plan__step--completed .pillar-inline-plan__step-text {\n text-decoration: line-through;\n color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-inline-plan__step--skipped {\n opacity: 0.5;\n}\n\n.pillar-inline-plan__step--skipped .pillar-inline-plan__step-text {\n text-decoration: line-through;\n}\n\n.pillar-inline-plan__step--failed {\n background: var(--pillar-bg-danger-subtle, rgba(220, 38, 38, 0.1));\n}\n\n.pillar-inline-plan__step--failed .pillar-inline-plan__step-icon {\n color: var(--pillar-danger, #dc2626);\n}\n\n/* Buttons */\n.pillar-inline-plan__btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 3px 8px;\n font-size: 11px;\n font-weight: 500;\n font-family: inherit;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s ease;\n border: none;\n}\n\n.pillar-inline-plan__btn--confirm {\n background: var(--pillar-success, #059669);\n color: #ffffff;\n min-width: 24px;\n}\n\n.pillar-inline-plan__btn--confirm:hover {\n background: var(--pillar-success-hover, #047857);\n}\n\n.pillar-inline-plan__btn--skip {\n background: transparent;\n color: var(--pillar-text-secondary, #6b7280);\n border: 1px solid var(--pillar-border, #d1d5db);\n}\n\n.pillar-inline-plan__btn--skip:hover {\n background: var(--pillar-bg-tertiary, #f3f4f6);\n}\n\n.pillar-inline-plan__btn--retry {\n background: var(--pillar-danger, #dc2626);\n color: #ffffff;\n}\n\n.pillar-inline-plan__btn--retry:hover {\n background: var(--pillar-danger-hover, #b91c1c);\n}\n\n.pillar-inline-plan__btn--done {\n background: var(--pillar-primary, #2563eb);\n color: #ffffff;\n}\n\n.pillar-inline-plan__btn--done:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n.pillar-inline-plan__btn--start {\n background: var(--pillar-primary, #2563eb);\n color: #ffffff;\n}\n\n.pillar-inline-plan__btn--start:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n.pillar-inline-plan__btn--cancel {\n background: transparent;\n color: var(--pillar-text-secondary, #6b7280);\n border: 1px solid var(--pillar-border, #d1d5db);\n}\n\n.pillar-inline-plan__btn--cancel:hover {\n background: var(--pillar-bg-tertiary, #f3f4f6);\n color: var(--pillar-danger, #dc2626);\n border-color: var(--pillar-danger, #dc2626);\n}\n\n/* Footer */\n.pillar-inline-plan__footer {\n display: flex;\n gap: 8px;\n padding-top: 6px;\n}\n\n/* Status messages */\n.pillar-inline-plan__status {\n font-size: 12px;\n font-weight: 500;\n padding: 4px 8px;\n border-radius: 4px;\n}\n\n.pillar-inline-plan__status--success {\n color: var(--pillar-success, #059669);\n background: var(--pillar-bg-success-subtle, rgba(5, 150, 105, 0.1));\n}\n\n.pillar-inline-plan__status--error {\n color: var(--pillar-danger, #dc2626);\n background: var(--pillar-bg-danger-subtle, rgba(220, 38, 38, 0.1));\n}\n\n.pillar-inline-plan__status--cancelled {\n color: var(--pillar-text-tertiary, #9ca3af);\n background: var(--pillar-bg-tertiary, #f3f4f6);\n}\n\n/* Spinner animation */\n@keyframes pillar-inline-plan-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.pillar-inline-plan__spinner {\n animation: pillar-inline-plan-spin 1s linear infinite;\n}\n";
23
+ export declare const INLINE_PLAN_STYLES = "\n/* Inline Plan Container */\n.pillar-inline-plan {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 8px 0;\n}\n\n/* Steps list */\n.pillar-inline-plan__steps {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n/* Individual step */\n.pillar-inline-plan__step {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 8px;\n border-radius: 6px;\n font-size: 13px;\n background: transparent;\n transition: all 0.15s ease;\n}\n\n.pillar-inline-plan__step-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-inline-plan__step-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 0;\n}\n\n.pillar-inline-plan__step-text {\n color: var(--pillar-text-primary, #374151);\n line-height: 1.4;\n}\n\n.pillar-inline-plan__step-instruction {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: wrap;\n}\n\n.pillar-inline-plan__action-badge {\n display: inline-block;\n padding: 1px 5px;\n font-size: 9px;\n font-weight: 600;\n text-transform: uppercase;\n background: var(--pillar-warning, #f59e0b);\n color: white;\n border-radius: 3px;\n flex-shrink: 0;\n}\n\n.pillar-inline-plan__instruction-text {\n font-size: 11px;\n color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-inline-plan__step-actions {\n display: flex;\n gap: 4px;\n}\n\n/* Step states */\n.pillar-inline-plan__step--pending {\n opacity: 0.6;\n}\n\n.pillar-inline-plan__step--ready .pillar-inline-plan__step-icon {\n color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-inline-plan__step--awaiting_confirmation {\n background: var(--pillar-bg-warning-subtle, rgba(251, 191, 36, 0.1));\n}\n\n.pillar-inline-plan__step--awaiting_confirmation .pillar-inline-plan__step-icon {\n color: var(--pillar-warning-dark, #d97706);\n}\n\n.pillar-inline-plan__step--executing .pillar-inline-plan__step-icon,\n.pillar-inline-plan__step--awaiting_result .pillar-inline-plan__step-icon {\n color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-inline-plan__step--completed .pillar-inline-plan__step-icon {\n color: var(--pillar-success, #059669);\n}\n\n.pillar-inline-plan__step--completed .pillar-inline-plan__step-text {\n text-decoration: line-through;\n color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-inline-plan__step--skipped {\n opacity: 0.5;\n}\n\n.pillar-inline-plan__step--skipped .pillar-inline-plan__step-text {\n text-decoration: line-through;\n}\n\n.pillar-inline-plan__step--failed {\n background: var(--pillar-bg-danger-subtle, rgba(220, 38, 38, 0.1));\n}\n\n.pillar-inline-plan__step--failed .pillar-inline-plan__step-icon {\n color: var(--pillar-danger, #dc2626);\n}\n\n/* Guidance step styles */\n.pillar-inline-plan__step--guidance {\n background: var(--pillar-bg-info-subtle, rgba(59, 130, 246, 0.08));\n border-left: 2px solid var(--pillar-info, #3b82f6);\n padding-left: 10px;\n}\n\n.pillar-inline-plan__step--guidance .pillar-inline-plan__step-icon {\n color: var(--pillar-info, #3b82f6);\n}\n\n.pillar-inline-plan__step--guidance.pillar-inline-plan__step--completed {\n background: transparent;\n border-left-color: var(--pillar-success, #059669);\n}\n\n.pillar-inline-plan__guidance-text {\n font-size: 11px;\n color: var(--pillar-text-secondary, #6b7280);\n line-height: 1.4;\n margin-top: 2px;\n}\n\n.pillar-inline-plan__guidance-sources {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 4px;\n}\n\n/* Inline UI Card Container */\n.pillar-inline-plan__inline-card {\n margin-top: 6px;\n}\n\n.pillar-inline-plan__inline-card .pillar-confirm-card {\n margin: 0;\n}\n\n.pillar-inline-plan__source-link {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 500;\n color: var(--pillar-primary, #2563eb);\n background: var(--pillar-bg-primary-subtle, rgba(37, 99, 235, 0.1));\n border-radius: 3px;\n text-decoration: none;\n transition: all 0.15s ease;\n}\n\n.pillar-inline-plan__source-link:hover {\n background: var(--pillar-bg-primary-subtle-hover, rgba(37, 99, 235, 0.15));\n text-decoration: underline;\n}\n\n/* Buttons */\n.pillar-inline-plan__btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 3px 8px;\n font-size: 11px;\n font-weight: 500;\n font-family: inherit;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s ease;\n border: none;\n}\n\n.pillar-inline-plan__btn--confirm {\n background: var(--pillar-success, #059669);\n color: #ffffff;\n min-width: 24px;\n}\n\n.pillar-inline-plan__btn--confirm:hover {\n background: var(--pillar-success-hover, #047857);\n}\n\n.pillar-inline-plan__btn--skip {\n background: transparent;\n color: var(--pillar-text-secondary, #6b7280);\n border: 1px solid var(--pillar-border, #d1d5db);\n}\n\n.pillar-inline-plan__btn--skip:hover {\n background: var(--pillar-bg-tertiary, #f3f4f6);\n}\n\n.pillar-inline-plan__btn--retry {\n background: var(--pillar-danger, #dc2626);\n color: #ffffff;\n}\n\n.pillar-inline-plan__btn--retry:hover {\n background: var(--pillar-danger-hover, #b91c1c);\n}\n\n.pillar-inline-plan__btn--done {\n background: var(--pillar-primary, #2563eb);\n color: #ffffff;\n}\n\n.pillar-inline-plan__btn--done:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n.pillar-inline-plan__btn--start {\n background: var(--pillar-primary, #2563eb);\n color: #ffffff;\n}\n\n.pillar-inline-plan__btn--start:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n.pillar-inline-plan__btn--cancel {\n background: transparent;\n color: var(--pillar-text-secondary, #6b7280);\n border: 1px solid var(--pillar-border, #d1d5db);\n}\n\n.pillar-inline-plan__btn--cancel:hover {\n background: var(--pillar-bg-tertiary, #f3f4f6);\n color: var(--pillar-danger, #dc2626);\n border-color: var(--pillar-danger, #dc2626);\n}\n\n/* Footer */\n.pillar-inline-plan__footer {\n display: flex;\n gap: 8px;\n padding-top: 6px;\n}\n\n/* Status messages */\n.pillar-inline-plan__status {\n font-size: 12px;\n font-weight: 500;\n padding: 4px 8px;\n border-radius: 4px;\n}\n\n.pillar-inline-plan__status--success {\n color: var(--pillar-success, #059669);\n background: var(--pillar-bg-success-subtle, rgba(5, 150, 105, 0.1));\n}\n\n.pillar-inline-plan__status--error {\n color: var(--pillar-danger, #dc2626);\n background: var(--pillar-bg-danger-subtle, rgba(220, 38, 38, 0.1));\n}\n\n.pillar-inline-plan__status--cancelled {\n color: var(--pillar-text-tertiary, #9ca3af);\n background: var(--pillar-bg-tertiary, #f3f4f6);\n}\n\n/* Spinner animation */\n@keyframes pillar-inline-plan-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.pillar-inline-plan__spinner {\n animation: pillar-inline-plan-spin 1s linear infinite;\n}\n";
24
24
  export {};
package/dist/components/Plan/PlanStepItem.d.ts CHANGED
@@ -3,6 +3,9 @@
3
3
  *
4
4
  * Renders a single step in an execution plan.
5
5
  * Shows status icon, description, and action buttons for confirmation/skip.
6
+ *
7
+ * For inline_ui action types, renders an inline card for user interaction
8
+ * (e.g., invite form, confirmation dialog).
6
9
  */
7
10
  import { h } from 'preact';
8
11
  import type { ExecutionStep } from '../../core/plan';
@@ -12,7 +15,9 @@ interface PlanStepItemProps {
12
15
  onSkip: (stepId: string) => void;
13
16
  onRetry?: (stepId: string) => void;
14
17
  onDone?: (stepId: string) => void;
18
+ /** Called when an inline_ui action is confirmed with data */
19
+ onInlineConfirm?: (stepId: string, data?: Record<string, unknown>) => void;
15
20
  }
16
- export declare function PlanStepItem({ step, onConfirm, onSkip, onRetry, onDone }: PlanStepItemProps): h.JSX.Element;
17
- export declare const PLAN_STEP_STYLES = "\n/* Individual Step */\n.pillar-plan-step {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 10px 12px;\n background: var(--pillar-bg-primary, #ffffff);\n border: 1px solid var(--pillar-border, #e5e7eb);\n border-radius: 8px;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step__icon svg {\n width: 18px;\n height: 18px;\n}\n\n.pillar-plan-step__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.pillar-plan-step__description {\n font-size: 13px;\n font-weight: 500;\n color: var(--pillar-text-primary, #374151);\n line-height: 1.4;\n}\n\n.pillar-plan-step__status-text {\n font-size: 12px;\n color: var(--pillar-primary, #2563eb);\n font-style: italic;\n}\n\n.pillar-plan-step__error {\n font-size: 12px;\n color: var(--pillar-danger, #dc2626);\n}\n\n.pillar-plan-step__actions {\n display: flex;\n gap: 8px;\n margin-top: 4px;\n}\n\n/* Step States */\n.pillar-plan-step--pending {\n opacity: 0.6;\n}\n\n.pillar-plan-step--ready {\n background: var(--pillar-bg-info-subtle, #eff6ff);\n border-color: var(--pillar-info, #93c5fd);\n}\n\n.pillar-plan-step--ready .pillar-plan-step__icon {\n color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-plan-step--awaiting_confirmation {\n background: var(--pillar-bg-warning-subtle, #fef3c7);\n border-color: var(--pillar-warning, #fcd34d);\n}\n\n.pillar-plan-step--awaiting_confirmation .pillar-plan-step__icon {\n color: var(--pillar-warning-dark, #d97706);\n}\n\n.pillar-plan-step--executing,\n.pillar-plan-step--awaiting_result {\n background: var(--pillar-bg-info-subtle, #eff6ff);\n border-color: var(--pillar-info, #93c5fd);\n}\n\n.pillar-plan-step--executing .pillar-plan-step__icon,\n.pillar-plan-step--awaiting_result .pillar-plan-step__icon {\n color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-plan-step--completed .pillar-plan-step__icon {\n color: var(--pillar-success, #059669);\n}\n\n.pillar-plan-step--completed .pillar-plan-step__description {\n text-decoration: line-through;\n color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-plan-step--skipped {\n opacity: 0.5;\n}\n\n.pillar-plan-step--skipped .pillar-plan-step__icon {\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step--skipped .pillar-plan-step__description {\n text-decoration: line-through;\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step--failed {\n background: var(--pillar-bg-danger-subtle, #fef2f2);\n border-color: var(--pillar-danger-light, #fca5a5);\n}\n\n.pillar-plan-step--failed .pillar-plan-step__icon {\n color: var(--pillar-danger, #dc2626);\n}\n\n/* Error Container */\n.pillar-plan-step__error-container {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.pillar-plan-step__retry-info {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-top: 2px;\n}\n\n.pillar-plan-step__retry-count {\n font-size: 11px;\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step__retry-exhausted {\n font-size: 11px;\n color: var(--pillar-text-tertiary, #9ca3af);\n font-style: italic;\n margin-top: 2px;\n}\n\n/* Retry Button */\n.pillar-plan-step__retry-btn {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font-size: 11px;\n font-weight: 600;\n font-family: inherit;\n background: var(--pillar-danger, #dc2626);\n color: #ffffff;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__retry-btn:hover {\n background: var(--pillar-danger-hover, #b91c1c);\n}\n\n/* Confirm Button */\n.pillar-plan-step__confirm-btn {\n display: inline-flex;\n align-items: center;\n padding: 6px 12px;\n font-size: 12px;\n font-weight: 600;\n font-family: inherit;\n background: var(--pillar-primary, #2563eb);\n color: #ffffff;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__confirm-btn:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n/* Skip Button */\n.pillar-plan-step__skip-btn {\n display: inline-flex;\n align-items: center;\n padding: 6px 12px;\n font-size: 12px;\n font-weight: 500;\n font-family: inherit;\n background: transparent;\n color: var(--pillar-text-secondary, #6b7280);\n border: 1px solid var(--pillar-border, #d1d5db);\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__skip-btn:hover {\n background: var(--pillar-bg-tertiary, #f3f4f6);\n color: var(--pillar-text-primary, #374151);\n}\n\n/* Awaiting Result Container */\n.pillar-plan-step__awaiting-container {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.pillar-plan-step__instruction-row {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.pillar-plan-step__action-badge {\n display: inline-block;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n background: var(--pillar-warning, #f59e0b);\n color: white;\n border-radius: 3px;\n flex-shrink: 0;\n}\n\n.pillar-plan-step__instruction {\n font-size: 12px;\n color: var(--pillar-text-secondary, #6b7280);\n}\n\n/* Done Button */\n.pillar-plan-step__done-btn {\n display: inline-flex;\n align-items: center;\n align-self: flex-start;\n padding: 6px 14px;\n font-size: 12px;\n font-weight: 600;\n font-family: inherit;\n background: var(--pillar-primary, #2563eb);\n color: #ffffff;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__done-btn:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n/* Spinner Animation for Executing Step */\n@keyframes pillar-plan-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.pillar-plan-step__spinner {\n animation: pillar-plan-spin 1s linear infinite;\n}\n";
21
+ export declare function PlanStepItem({ step, onConfirm, onSkip, onRetry, onDone, onInlineConfirm }: PlanStepItemProps): h.JSX.Element;
22
+ export declare const PLAN_STEP_STYLES = "\n/* Individual Step */\n.pillar-plan-step {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 10px 12px;\n background: var(--pillar-bg-primary, #ffffff);\n border: 1px solid var(--pillar-border, #e5e7eb);\n border-radius: 8px;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step__icon svg {\n width: 18px;\n height: 18px;\n}\n\n.pillar-plan-step__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.pillar-plan-step__description {\n font-size: 13px;\n font-weight: 500;\n color: var(--pillar-text-primary, #374151);\n line-height: 1.4;\n}\n\n.pillar-plan-step__status-text {\n font-size: 12px;\n color: var(--pillar-primary, #2563eb);\n font-style: italic;\n}\n\n.pillar-plan-step__error {\n font-size: 12px;\n color: var(--pillar-danger, #dc2626);\n}\n\n.pillar-plan-step__actions {\n display: flex;\n gap: 8px;\n margin-top: 4px;\n}\n\n/* Step States */\n.pillar-plan-step--pending {\n opacity: 0.6;\n}\n\n.pillar-plan-step--ready {\n background: var(--pillar-bg-info-subtle, #eff6ff);\n border-color: var(--pillar-info, #93c5fd);\n}\n\n.pillar-plan-step--ready .pillar-plan-step__icon {\n color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-plan-step--awaiting_confirmation {\n background: var(--pillar-bg-warning-subtle, #fef3c7);\n border-color: var(--pillar-warning, #fcd34d);\n}\n\n.pillar-plan-step--awaiting_confirmation .pillar-plan-step__icon {\n color: var(--pillar-warning-dark, #d97706);\n}\n\n.pillar-plan-step--executing,\n.pillar-plan-step--awaiting_result {\n background: var(--pillar-bg-info-subtle, #eff6ff);\n border-color: var(--pillar-info, #93c5fd);\n}\n\n.pillar-plan-step--executing .pillar-plan-step__icon,\n.pillar-plan-step--awaiting_result .pillar-plan-step__icon {\n color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-plan-step--completed .pillar-plan-step__icon {\n color: var(--pillar-success, #059669);\n}\n\n.pillar-plan-step--completed .pillar-plan-step__description {\n text-decoration: line-through;\n color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-plan-step--skipped {\n opacity: 0.5;\n}\n\n.pillar-plan-step--skipped .pillar-plan-step__icon {\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step--skipped .pillar-plan-step__description {\n text-decoration: line-through;\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step--failed {\n background: var(--pillar-bg-danger-subtle, #fef2f2);\n border-color: var(--pillar-danger-light, #fca5a5);\n}\n\n.pillar-plan-step--failed .pillar-plan-step__icon {\n color: var(--pillar-danger, #dc2626);\n}\n\n/* Error Container */\n.pillar-plan-step__error-container {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.pillar-plan-step__retry-info {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-top: 2px;\n}\n\n.pillar-plan-step__retry-count {\n font-size: 11px;\n color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step__retry-exhausted {\n font-size: 11px;\n color: var(--pillar-text-tertiary, #9ca3af);\n font-style: italic;\n margin-top: 2px;\n}\n\n/* Retry Button */\n.pillar-plan-step__retry-btn {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font-size: 11px;\n font-weight: 600;\n font-family: inherit;\n background: var(--pillar-danger, #dc2626);\n color: #ffffff;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__retry-btn:hover {\n background: var(--pillar-danger-hover, #b91c1c);\n}\n\n/* Confirm Button */\n.pillar-plan-step__confirm-btn {\n display: inline-flex;\n align-items: center;\n padding: 6px 12px;\n font-size: 12px;\n font-weight: 600;\n font-family: inherit;\n background: var(--pillar-primary, #2563eb);\n color: #ffffff;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__confirm-btn:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n/* Skip Button */\n.pillar-plan-step__skip-btn {\n display: inline-flex;\n align-items: center;\n padding: 6px 12px;\n font-size: 12px;\n font-weight: 500;\n font-family: inherit;\n background: transparent;\n color: var(--pillar-text-secondary, #6b7280);\n border: 1px solid var(--pillar-border, #d1d5db);\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__skip-btn:hover {\n background: var(--pillar-bg-tertiary, #f3f4f6);\n color: var(--pillar-text-primary, #374151);\n}\n\n/* Awaiting Result Container */\n.pillar-plan-step__awaiting-container {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.pillar-plan-step__instruction-row {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.pillar-plan-step__action-badge {\n display: inline-block;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n background: var(--pillar-warning, #f59e0b);\n color: white;\n border-radius: 3px;\n flex-shrink: 0;\n}\n\n.pillar-plan-step__instruction {\n font-size: 12px;\n color: var(--pillar-text-secondary, #6b7280);\n}\n\n/* Done Button */\n.pillar-plan-step__done-btn {\n display: inline-flex;\n align-items: center;\n align-self: flex-start;\n padding: 6px 14px;\n font-size: 12px;\n font-weight: 600;\n font-family: inherit;\n background: var(--pillar-primary, #2563eb);\n color: #ffffff;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.pillar-plan-step__done-btn:hover {\n background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n/* Inline Card Container */\n.pillar-plan-step__inline-card {\n margin-top: 8px;\n}\n\n.pillar-plan-step__inline-card .pillar-confirm-card {\n margin: 0;\n}\n\n/* Spinner Animation for Executing Step */\n@keyframes pillar-plan-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.pillar-plan-step__spinner {\n animation: pillar-plan-spin 1s linear infinite;\n}\n";
18
23
  export {};
package/dist/core/Pillar.d.ts CHANGED
@@ -3,11 +3,23 @@
3
3
  * Entry point for all SDK functionality
4
4
  */
5
5
  import { type PillarConfig, type ResolvedConfig, type ThemeConfig } from './config';
6
- import { type ProductContext, type Suggestion, type UserProfile } from './context';
6
+ import { type Context, type Suggestion, type UserProfile } from './context';
7
7
  import { type CardRenderer, type PillarEvents, type TaskExecutePayload } from './events';
8
8
  import type { ExecutionPlan } from './plan';
9
9
  import type { Workflow } from './workflow';
10
10
  export type PillarState = 'uninitialized' | 'initializing' | 'ready' | 'error';
11
+ /**
12
+ * Chat context for escalation to human support.
13
+ */
14
+ export interface ChatContext {
15
+ /** Server-assigned conversation ID, or null if not yet assigned */
16
+ conversationId: string | null;
17
+ /** Messages in the conversation */
18
+ messages: Array<{
19
+ role: 'user' | 'assistant';
20
+ content: string;
21
+ }>;
22
+ }
11
23
  export declare class Pillar {
12
24
  private static instance;
13
25
  private _state;
@@ -19,10 +31,11 @@ export declare class Pillar {
19
31
  private _textSelectionManager;
20
32
  private _panel;
21
33
  private _edgeTrigger;
34
+ private _mobileTrigger;
22
35
  private _initPromise;
23
36
  private _rootContainer;
24
37
  private _unsubscribeHoverMode;
25
- private _productContext;
38
+ private _context;
26
39
  private _userProfile;
27
40
  private _taskHandlers;
28
41
  private _anyTaskHandler;
@@ -92,9 +105,38 @@ export declare class Pillar {
92
105
  */
93
106
  navigate(view: string, params?: Record<string, string>): void;
94
107
  /**
95
- * Update the user context
108
+ * Set context for the assistant.
109
+ * Use this to tell Pillar what the user is doing for smarter, more relevant assistance.
110
+ *
111
+ * @param ctx - Context fields to set (merges with existing context)
112
+ *
113
+ * @example
114
+ * ```typescript
115
+ * pillar.setContext({
116
+ * currentPage: '/settings/billing',
117
+ * currentFeature: 'Billing Settings',
118
+ * userRole: 'admin',
119
+ * });
120
+ * ```
96
121
  */
97
- setContext(context: ResolvedConfig['context']): void;
122
+ setContext(ctx: Partial<Context>): void;
123
+ /**
124
+ * Get the current chat context (conversation ID and messages).
125
+ * Useful for escalation to human support with conversation history.
126
+ *
127
+ * @returns Chat context with conversation ID and messages, or null if no conversation
128
+ *
129
+ * @example
130
+ * // Get chat context for escalation
131
+ * const context = pillar.getChatContext();
132
+ * if (context) {
133
+ * const summary = context.messages
134
+ * .map(m => `${m.role}: ${m.content.slice(0, 100)}`)
135
+ * .join('\n');
136
+ * showIntercom(`Escalating from AI assistant:\n${summary}`);
137
+ * }
138
+ */
139
+ getChatContext(): ChatContext | null;
98
140
  /**
99
141
  * Update the theme at runtime.
100
142
  * Use this to sync with your app's theme (e.g., dark mode toggle).
@@ -135,23 +177,13 @@ export declare class Pillar {
135
177
  */
136
178
  getPanelHostElement(): HTMLElement | null;
137
179
  /**
138
- * Get the current product context
180
+ * Get the current context
139
181
  */
140
- get productContext(): ProductContext;
182
+ get context(): Context;
141
183
  /**
142
184
  * Get the current user profile
143
185
  */
144
186
  get userProfile(): UserProfile;
145
- /**
146
- * Set the complete product context.
147
- * Use this when navigating to a new page or starting a new session.
148
- */
149
- setProductContext(context: ProductContext): void;
150
- /**
151
- * Update specific product context fields without replacing the entire context.
152
- * Use this for incremental updates like tracking actions.
153
- */
154
- updateContext(updates: Partial<ProductContext>): void;
155
187
  /**
156
188
  * Set the user profile for personalization.
157
189
  */
@@ -174,7 +206,7 @@ export declare class Pillar {
174
206
  */
175
207
  setErrorState(code: string, message: string): void;
176
208
  /**
177
- * Get contextual help suggestions based on current product context.
209
+ * Get contextual help suggestions based on current context.
178
210
  * Returns relevant articles, videos, and actions.
179
211
  */
180
212
  getSuggestions(): Promise<Suggestion[]>;
@@ -183,7 +215,7 @@ export declare class Pillar {
183
215
  * Used internally by the API client.
184
216
  */
185
217
  getAssistantContext(): {
186
- product: ProductContext;
218
+ product: Context;
187
219
  user: UserProfile;
188
220
  };
189
221
  /**
@@ -370,6 +402,16 @@ export declare class Pillar {
370
402
  * @param data - Optional modified data from user input
371
403
  */
372
404
  confirmPlanStep(stepId: string, data?: Record<string, unknown>): Promise<void>;
405
+ /**
406
+ * Confirm an inline_ui step with data from the inline card.
407
+ *
408
+ * This is called when the user interacts with an inline card (e.g., invite form)
409
+ * within a plan step and clicks confirm.
410
+ *
411
+ * @param stepId - UUID of the step to confirm
412
+ * @param data - Data from the inline card (e.g., email, form fields)
413
+ */
414
+ confirmInlinePlanStep(stepId: string, data?: Record<string, unknown>): Promise<void>;
373
415
  /**
374
416
  * Skip a plan step.
375
417
  *
package/dist/core/config.d.ts CHANGED
@@ -90,6 +90,11 @@ export interface PanelConfig {
90
90
  * @default true
91
91
  */
92
92
  hoverBackdrop?: boolean;
93
+ /**
94
+ * Viewport width below which the panel takes full screen width.
95
+ * @default 500
96
+ */
97
+ fullWidthBreakpoint?: number;
93
98
  }
94
99
  export interface UrlParamsConfig {
95
100
  /** Whether to check URL params for auto-opening the panel (default: true) */
@@ -113,14 +118,66 @@ export interface EdgeTriggerConfig {
113
118
  */
114
119
  enabled?: boolean;
115
120
  }
116
- export interface UserContext {
117
- id?: string;
118
- persona?: string;
119
- [key: string]: unknown;
121
+ export type MobileTriggerPosition = 'bottom-right' | 'bottom-left';
122
+ export type MobileTriggerIcon = 'sparkle' | 'question' | 'help' | 'chat' | 'support';
123
+ export type MobileTriggerSize = 'small' | 'medium' | 'large';
124
+ export interface MobileTriggerConfig {
125
+ /**
126
+ * Whether to show the mobile floating button on small screens.
127
+ * When enabled, a floating action button appears when viewport is below mobileBreakpoint.
128
+ * @default true
129
+ */
130
+ enabled?: boolean;
131
+ /**
132
+ * Viewport width below which the edge trigger hides and mobile trigger shows.
133
+ * @default 700
134
+ */
135
+ breakpoint?: number;
136
+ /**
137
+ * Position of the floating button.
138
+ * @default 'bottom-right'
139
+ */
140
+ position?: MobileTriggerPosition;
141
+ /**
142
+ * Preset icon to display in the button.
143
+ * @default 'sparkle'
144
+ */
145
+ icon?: MobileTriggerIcon;
146
+ /**
147
+ * Custom SVG icon string. Overrides the icon preset if provided.
148
+ */
149
+ customIcon?: string;
150
+ /**
151
+ * Background color of the button (CSS value).
152
+ * Defaults to the theme's primary color.
153
+ */
154
+ backgroundColor?: string;
155
+ /**
156
+ * Icon color (CSS value).
157
+ * @default 'white'
158
+ */
159
+ iconColor?: string;
160
+ /**
161
+ * Button size - preset name or pixel value.
162
+ * - 'small': 44px
163
+ * - 'medium': 56px (default)
164
+ * - 'large': 68px
165
+ * @default 'medium'
166
+ */
167
+ size?: MobileTriggerSize | number;
168
+ /**
169
+ * Tooltip text and aria-label for accessibility.
170
+ * @default 'Get help'
171
+ */
172
+ label?: string;
173
+ /**
174
+ * Offset from screen edges in pixels.
175
+ * @default 24
176
+ */
177
+ offset?: number;
120
178
  }
121
179
  export interface PillarConfig {
122
180
  helpCenter: string;
123
- publicKey: string;
124
181
  /**
125
182
  * Platform identifier for code-first actions.
126
183
  * Used to filter actions by deployment platform.
@@ -135,13 +192,10 @@ export interface PillarConfig {
135
192
  version?: string;
136
193
  panel?: PanelConfig;
137
194
  edgeTrigger?: EdgeTriggerConfig;
195
+ mobileTrigger?: MobileTriggerConfig;
138
196
  urlParams?: UrlParamsConfig;
139
197
  textSelection?: TextSelectionConfig;
140
198
  sidebarTabs?: SidebarTabConfig[];
141
- context?: {
142
- page?: string;
143
- user?: UserContext;
144
- };
145
199
  apiBaseUrl?: string;
146
200
  theme?: ThemeConfig;
147
201
  /**
@@ -170,6 +224,20 @@ export interface ResolvedPanelConfig {
170
224
  hoverBreakpoint: number | false;
171
225
  /** Whether to show backdrop when in hover mode */
172
226
  hoverBackdrop: boolean;
227
+ /** Viewport width below which panel takes full screen width */
228
+ fullWidthBreakpoint: number;
229
+ }
230
+ export interface ResolvedMobileTriggerConfig {
231
+ enabled: boolean;
232
+ breakpoint: number;
233
+ position: MobileTriggerPosition;
234
+ icon: MobileTriggerIcon;
235
+ customIcon?: string;
236
+ backgroundColor?: string;
237
+ iconColor: string;
238
+ size: MobileTriggerSize | number;
239
+ label: string;
240
+ offset: number;
173
241
  }
174
242
  export interface ResolvedThemeConfig {
175
243
  mode: ThemeMode;
@@ -178,7 +246,6 @@ export interface ResolvedThemeConfig {
178
246
  }
179
247
  export interface ResolvedConfig {
180
248
  helpCenter: string;
181
- publicKey: string;
182
249
  apiBaseUrl: string;
183
250
  /** Platform for code-first actions (default: 'web') */
184
251
  platform: Platform;
@@ -186,15 +253,12 @@ export interface ResolvedConfig {
186
253
  version?: string;
187
254
  panel: ResolvedPanelConfig;
188
255
  edgeTrigger: Required<EdgeTriggerConfig>;
256
+ mobileTrigger: ResolvedMobileTriggerConfig;
189
257
  urlParams: Required<UrlParamsConfig>;
190
258
  textSelection: Required<TextSelectionConfig>;
191
259
  sidebarTabs: SidebarTabConfig[];
192
260
  theme: ResolvedThemeConfig;
193
261
  customCSS?: string;
194
- context: {
195
- page?: string;
196
- user?: UserContext;
197
- };
198
262
  onReady?: () => void;
199
263
  onError?: (error: Error) => void;
200
264
  }