@astermind/chatbot-template 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 AsterMind Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,603 @@
+# @astermind/chatbot-template
+
+Embeddable AI chatbot widget for [AsterMind](https://astermind.ai) RAG - a drop-in chat UI that connects to your AsterMind backend with full agentic capabilities.
+
+[![npm version](https://img.shields.io/npm/v/@astermind/chatbot-template.svg)](https://www.npmjs.com/package/@astermind/chatbot-template)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+## Table of Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Configuration Reference](#configuration-reference)
+- [Cybernetic Chatbot Integration](#cybernetic-chatbot-integration)
+- [Theming](#theming)
+- [React Hooks API](#react-hooks-api)
+- [Components API](#components-api)
+- [TypeScript Support](#typescript-support)
+- [Troubleshooting](#troubleshooting)
+- [Browser Support](#browser-support)
+- [License](#license)
+
+---
+
+## Features
+
+### Core Widget Features
+
+- **Embeddable Floating Chat Bubble** - Position anywhere on the page (4 corners)
+- **React Components Library** - 11 fully customizable components
+- **Vanilla JS Standalone Bundle** - IIFE format with React bundled for non-React sites
+- **Full TypeScript Support** - Complete type definitions exported
+
+### RAG Integration
+
+- **AsterMind Backend Integration** - Connects to `/api/external/chat` endpoints
+- **Streaming Responses** - SSE-based token-by-token message display
+- **Source Citations** - Collapsible source references with confidence levels
+- **Session Management** - Automatic sessionId handling across conversations
+- **Confidence Indicators** - Visual display of high/medium/low/none confidence
+
+### Agentic Capabilities
+
+- **Navigation Actions** - Navigate users to specific pages
+- **Form Filling** - Auto-fill form fields with suggested values
+- **Element Clicking** - Programmatically click buttons and links
+- **Modal Triggering** - Open dialogs and modals
+- **Scrolling** - Scroll to specific elements
+- **Element Highlighting** - Draw attention to page elements
+- **Custom Action Handlers** - Define your own action types
+- **Action Cards UI** - Confirm/cancel interface for proposed actions
+- **Confidence Thresholds** - Auto-execute high-confidence actions
+- **Site Map Configuration** - Define navigable pages for the agent
+
+### Offline & Fallback
+
+- **Graceful Degradation** - Works when connection is lost
+- **Custom Offline Message** - Configure what users see offline
+- **Connection Status Indicator** - Shows online/offline/connecting/error states
+- **Optional Local RAG Fallback** - Use Cybernetic RAG locally when offline
+
+### Theming & Customization
+
+- **20+ CSS Custom Properties** - Full visual customization via CSS variables
+- **JavaScript Theme Object** - Configure themes programmatically
+- **4 Position Options** - bottom-right, bottom-left, top-right, top-left
+- **Configurable Dimensions** - Width, height, bubble size
+- **Full Color Customization** - Every color is customizable
+- **Typography Settings** - Font family and size
+- **Border Radius & Shadows** - Visual effects customization
+
+---
+
+## Installation
+
+### NPM (React Projects)
+
+```bash
+npm install @astermind/chatbot-template
+```
+
+### CDN (Vanilla JS)
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@astermind/chatbot-template/dist/astermind-chatbot.css">
+<script src="https://cdn.jsdelivr.net/npm/@astermind/chatbot-template/dist/astermind-chatbot.min.js"></script>
+```
+
+---
+
+## Quick Start
+
+### React Usage
+
+```tsx
+import { ChatbotWidget } from '@astermind/chatbot-template';
+import '@astermind/chatbot-template/styles';
+
+function App() {
+  return (
+    <ChatbotWidget
+      apiUrl="https://your-api-url.com"
+      apiKey="am_your-api-key"
+      position="bottom-right"
+      greeting="Hi! How can I help you today?"
+    />
+  );
+}
+```
+
+### Vanilla JS Usage
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@astermind/chatbot-template/dist/astermind-chatbot.css">
+</head>
+<body>
+  <script src="https://cdn.jsdelivr.net/npm/@astermind/chatbot-template/dist/astermind-chatbot.min.js"></script>
+  <script>
+    AsterMindChatbot.init({
+      apiUrl: 'https://your-api-url.com',
+      apiKey: 'am_your-api-key',
+      position: 'bottom-right',
+      greeting: 'Hi! How can I help you today?'
+    });
+  </script>
+</body>
+</html>
+```
+
+---
+
+## Configuration Reference
+
+### Required Options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `apiKey` | `string` | Your AsterMind API key (starts with `am_`) |
+| `apiUrl` | `string` | Backend API URL (e.g., `https://api.example.com`) |
+
+### Widget Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Widget position on screen |
+| `greeting` | `string` | `'Hi! How can I help you today?'` | Initial greeting message |
+| `placeholder` | `string` | `'Type your message...'` | Input placeholder text |
+| `headerTitle` | `string` | `'AsterMind'` | Chat window header title |
+| `headerSubtitle` | `string` | `'AI Assistant'` | Chat window header subtitle |
+| `defaultOpen` | `boolean` | `false` | Start with chat window open |
+| `showPoweredBy` | `boolean` | `true` | Show "Powered by AsterMind" badge |
+| `zIndex` | `number` | `9999` | Z-index for the widget |
+
+### Theme Options
+
+Customize appearance via the `theme` object:
+
+```javascript
+{
+  theme: {
+    primaryColor: '#4F46E5',        // Primary brand color
+    primaryHover: '#4338CA',        // Primary color on hover
+    backgroundColor: '#ffffff',     // Background color
+    surfaceColor: '#f3f4f6',        // Surface/card background
+    textColor: '#1f2937',           // Primary text color
+    textMuted: '#6b7280',           // Muted/secondary text
+    borderColor: '#e5e7eb',         // Border color
+    userBubbleBackground: '#4F46E5', // User message background
+    userBubbleText: '#ffffff',      // User message text
+    botBubbleBackground: '#f3f4f6', // Bot message background
+    botBubbleText: '#1f2937',       // Bot message text
+    widgetWidth: '380px',           // Widget width
+    widgetHeight: '520px',          // Widget height
+    bubbleSize: '60px',             // Trigger bubble size
+    borderRadius: '12px',           // Border radius
+    fontFamily: "'Inter', system-ui, sans-serif",
+    fontSize: '14px',
+    shadow: '0 4px 20px rgba(0, 0, 0, 0.15)'
+  }
+}
+```
+
+### Agent Configuration
+
+Enable agentic capabilities:
+
+```javascript
+{
+  agent: {
+    enabled: true,
+    confidenceThreshold: 0.8,     // Minimum confidence for auto-execution
+    siteMap: [
+      { path: '/products', name: 'Products', description: 'View products' },
+      { path: '/contact', name: 'Contact', description: 'Contact us' },
+      { path: '/pricing', name: 'Pricing', description: 'View pricing plans' }
+    ],
+    customActions: {
+      openModal: async (params) => {
+        // Custom action handler - open a modal
+        document.getElementById(params.modalId).showModal();
+      },
+      trackEvent: async (params) => {
+        // Custom analytics tracking
+        analytics.track(params.eventName, params.data);
+      }
+    }
+  }
+}
+```
+
+### Fallback Configuration
+
+Configure offline behavior:
+
+```javascript
+{
+  fallback: {
+    enabled: true,
+    message: 'Working in offline mode. Some features may be limited.'
+  }
+}
+```
+
+### Event Callbacks
+
+| Callback | Parameters | Description |
+|----------|------------|-------------|
+| `onReady` | `()` | Called when widget is ready |
+| `onMessage` | `(message: ChatMessage)` | Called on each message sent/received |
+| `onAction` | `(action: AgentAction)` | Called when an agentic action occurs |
+| `onError` | `(error: Error)` | Called when an error occurs |
+| `onToggle` | `(isOpen: boolean)` | Called when widget opens/closes |
+
+---
+
+## Cybernetic Chatbot Integration
+
+This widget is designed to work seamlessly with the `@astermind/cybernetic-chatbot-client` for advanced RAG capabilities.
+
+### How It Works
+
+1. **Widget sends messages** to your AsterMind backend via the configured `apiUrl`
+2. **Backend processes queries** using your RAG pipeline and returns responses
+3. **Streaming responses** arrive via Server-Sent Events (SSE) for real-time display
+4. **Agentic actions** are proposed by the AI and confirmed via Action Cards
+
+### API Endpoints
+
+The widget connects to these backend endpoints:
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/api/external/health` | GET | Health check, verifies connection |
+| `/api/external/chat` | POST | Non-streaming chat endpoint |
+| `/api/external/chat/stream` | POST | Streaming chat endpoint (SSE) |
+
+### SSE Event Format
+
+```
+data: {"type": "chunk", "content": "Hello"}
+data: {"type": "chunk", "content": " there!"}
+data: {"type": "sources", "sources": [{"title": "Doc", "url": "..."}]}
+data: {"type": "action", "action": {"type": "navigate", "path": "/products"}}
+data: {"type": "done", "sessionId": "sess_xxx"}
+data: {"type": "error", "error": "Error message"}
+```
+
+### Offline Fallback
+
+When offline or disconnected:
+
+1. Widget shows connection status indicator
+2. Custom offline message is displayed
+3. If `@astermind/cybernetic-chatbot-client` is installed with local RAG enabled, queries can still be processed locally
+
+---
+
+## Theming
+
+### CSS Variables
+
+Override CSS variables in your stylesheet for quick customization:
+
+```css
+:root {
+  /* Colors */
+  --astermind-primary: #10B981;
+  --astermind-primary-hover: #059669;
+  --astermind-background: #ffffff;
+  --astermind-surface: #f3f4f6;
+  --astermind-text: #1f2937;
+  --astermind-text-muted: #6b7280;
+  --astermind-border: #e5e7eb;
+
+  /* User messages */
+  --astermind-user-bubble-bg: #10B981;
+  --astermind-user-bubble-text: #ffffff;
+
+  /* Bot messages */
+  --astermind-bot-bubble-bg: #f3f4f6;
+  --astermind-bot-bubble-text: #1f2937;
+
+  /* Dimensions */
+  --astermind-widget-width: 400px;
+  --astermind-widget-height: 600px;
+  --astermind-bubble-size: 64px;
+
+  /* Effects */
+  --astermind-border-radius: 16px;
+  --astermind-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+
+  /* Typography */
+  --astermind-font-family: 'Inter', system-ui, sans-serif;
+  --astermind-font-size: 14px;
+}
+```
+
+### CSS Classes
+
+All elements use the `astermind-` prefix for easy targeting:
+
+| Class | Element |
+|-------|---------|
+| `.astermind-chatbot` | Main container |
+| `.astermind-bubble` | Floating trigger button |
+| `.astermind-window` | Chat window |
+| `.astermind-header` | Window header |
+| `.astermind-messages` | Message list container |
+| `.astermind-message` | Individual message |
+| `.astermind-message--user` | User message modifier |
+| `.astermind-message--bot` | Bot message modifier |
+| `.astermind-input` | Input area |
+| `.astermind-status` | Status indicator |
+| `.astermind-action-card` | Action confirmation card |
+| `.astermind-sources` | Source citations container |
+
+---
+
+## React Hooks API
+
+### useOmega
+
+Direct API client access for custom implementations:
+
+```tsx
+import { useOmega } from '@astermind/chatbot-template';
+
+function MyComponent() {
+  const {
+    sendMessage,        // Send a message (non-streaming)
+    sendMessageStream,  // Send a message (streaming)
+    connectionStatus,   // 'online' | 'offline' | 'connecting' | 'error'
+    isProcessing,       // Whether a request is in progress
+    lastError,          // Last error that occurred
+    sessionId,          // Current session ID
+    clearSession        // Clear the current session
+  } = useOmega({
+    apiUrl: 'https://api.example.com',
+    apiKey: 'am_your-api-key'
+  });
+
+  const handleSend = async () => {
+    const response = await sendMessage('Hello!');
+    console.log(response.reply, response.sources);
+  };
+
+  const handleStreamingSend = () => {
+    sendMessageStream('Tell me about...', {
+      onChunk: (chunk) => console.log('Chunk:', chunk),
+      onSources: (sources) => console.log('Sources:', sources),
+      onDone: (sessionId) => console.log('Done:', sessionId),
+      onError: (error) => console.error('Error:', error)
+    });
+  };
+}
+```
+
+### useChat
+
+Chat state management:
+
+```tsx
+import { useChat } from '@astermind/chatbot-template';
+
+function MyComponent() {
+  const {
+    messages,          // Array of chat messages
+    addMessage,        // Add a new message
+    updateMessage,     // Update an existing message
+    clearMessages,     // Clear all messages
+    pendingAction,     // Currently pending agent action
+    setPendingAction   // Set pending action
+  } = useChat();
+}
+```
+
+### useTheme
+
+Theme customization hook:
+
+```tsx
+import { useTheme } from '@astermind/chatbot-template';
+
+function MyComponent() {
+  const { theme, cssVariables } = useTheme({
+    primaryColor: '#10B981',
+    borderRadius: '16px'
+  });
+
+  // cssVariables contains the CSS custom property declarations
+  return <div style={cssVariables}>...</div>;
+}
+```
+
+### useScrollToBottom
+
+Auto-scroll behavior for message lists:
+
+```tsx
+import { useScrollToBottom } from '@astermind/chatbot-template';
+
+function MessageList({ messages }) {
+  const { containerRef, scrollToBottom } = useScrollToBottom();
+
+  return (
+    <div ref={containerRef}>
+      {messages.map(msg => <Message key={msg.id} {...msg} />)}
+    </div>
+  );
+}
+```
+
+---
+
+## Components API
+
+All components are exported for custom compositions:
+
+```tsx
+import {
+  ChatbotWidget,    // Main widget (includes bubble + window)
+  ChatBubble,       // Floating trigger button
+  ChatWindow,       // Chat window container
+  ChatHeader,       // Window header with title/subtitle
+  ChatInput,        // Message input with send button
+  MessageList,      // Scrollable message container
+  MessageBubble,    // Individual message bubble
+  ActionCard,       // Agentic action confirmation card
+  SourceCitation,   // Source reference component
+  StatusIndicator,  // Connection status display
+  TypingIndicator   // Typing/loading animation
+} from '@astermind/chatbot-template';
+```
+
+### Component Example
+
+Build a custom chat interface:
+
+```tsx
+import {
+  ChatWindow,
+  ChatHeader,
+  MessageList,
+  MessageBubble,
+  ChatInput,
+  StatusIndicator
+} from '@astermind/chatbot-template';
+import '@astermind/chatbot-template/styles';
+
+function CustomChat({ messages, onSend, status }) {
+  return (
+    <ChatWindow>
+      <ChatHeader
+        title="Support Bot"
+        subtitle="Always here to help"
+      />
+      <StatusIndicator status={status} />
+      <MessageList>
+        {messages.map(msg => (
+          <MessageBubble
+            key={msg.id}
+            content={msg.content}
+            role={msg.role}
+            timestamp={msg.timestamp}
+          />
+        ))}
+      </MessageList>
+      <ChatInput
+        onSend={onSend}
+        placeholder="Ask a question..."
+      />
+    </ChatWindow>
+  );
+}
+```
+
+---
+
+## TypeScript Support
+
+Full TypeScript support with exported types:
+
+```typescript
+import type {
+  // Configuration
+  ChatbotConfig,
+  ThemeConfig,
+  AgentConfig,
+  FallbackConfig,
+
+  // Messages
+  ChatMessage,
+  MessageRole,
+
+  // Actions
+  AgentAction,
+  ActionType,
+  NavigateAction,
+  FormFillAction,
+  ClickAction,
+
+  // Sources
+  Source,
+  SourceCitation,
+
+  // Status
+  ConnectionStatus,
+
+  // Events
+  ChatbotCallbacks
+} from '@astermind/chatbot-template';
+```
+
+---
+
+## Troubleshooting
+
+### Widget not appearing
+
+1. Ensure styles are imported: `import '@astermind/chatbot-template/styles'`
+2. Check that `apiUrl` and `apiKey` are provided
+3. Verify the widget container has `position: relative` or is in the document flow
+
+### Connection errors
+
+1. Check that your `apiUrl` is correct and accessible
+2. Verify your API key is valid and has the correct permissions
+3. Check browser console for CORS errors - ensure your backend allows the origin
+
+### Streaming not working
+
+1. Verify your backend supports the `/api/external/chat/stream` endpoint
+2. Check that SSE is not being blocked by proxies or firewalls
+3. Ensure `Content-Type: text/event-stream` header is set on responses
+
+### Actions not executing
+
+1. Confirm `agent.enabled` is set to `true`
+2. Check that actions meet the `confidenceThreshold`
+3. Verify custom action handlers are properly defined
+
+### Styles not applying
+
+1. Ensure the CSS file is loaded before the JS
+2. Check for CSS specificity conflicts with your existing styles
+3. Use `!important` or increase specificity if needed
+
+---
+
+## Browser Support
+
+| Browser | Version |
+|---------|---------|
+| Chrome | 80+ |
+| Firefox | 75+ |
+| Safari | 13+ |
+| Edge | 80+ |
+
+The standalone bundle includes necessary polyfills for broader compatibility.
+
+---
+
+## Build Outputs
+
+| File | Format | Description |
+|------|--------|-------------|
+| `astermind-chatbot.esm.js` | ESM | ES Module for bundlers (tree-shakeable) |
+| `astermind-chatbot.umd.js` | UMD | Universal Module Definition |
+| `astermind-chatbot.min.js` | IIFE | Standalone bundle with React included |
+| `astermind-chatbot.css` | CSS | Compiled and minified styles |
+
+---
+
+## License
+
+MIT License - see [LICENSE](LICENSE) for details.
+
+Built with care by the [AsterMind](https://astermind.ai) team.

package/dist/astermind-chatbot.css

@@ -0,0 +1 @@
+:root{--astermind-primary:#4f46e5;--astermind-primary-hover:#4338ca;--astermind-background:#fff;--astermind-surface:#f3f4f6;--astermind-text:#1f2937;--astermind-text-muted:#6b7280;--astermind-border:#e5e7eb;--astermind-user-bg:#4f46e5;--astermind-user-text:#fff;--astermind-bot-bg:#f3f4f6;--astermind-bot-text:#1f2937;--astermind-widget-width:380px;--astermind-widget-height:520px;--astermind-bubble-size:60px;--astermind-border-radius:12px;--astermind-font-family:"Inter",system-ui,-apple-system,sans-serif;--astermind-font-size:14px;--astermind-shadow:0 4px 20px rgba(0,0,0,.15)}.astermind-chatbot,.astermind-chatbot *{box-sizing:border-box;margin:0;padding:0}.astermind-chatbot{font-family:var(--astermind-font-family);font-size:var(--astermind-font-size);position:fixed;z-index:9999}.astermind-chatbot--bottom-right{bottom:20px;right:20px}.astermind-chatbot--bottom-left{bottom:20px;left:20px}.astermind-chatbot--top-right{right:20px;top:20px}.astermind-chatbot--top-left{left:20px;top:20px}.astermind-bubble{align-items:center;background:var(--astermind-primary);border:none;border-radius:50%;box-shadow:var(--astermind-shadow);color:#fff;cursor:pointer;display:flex;height:var(--astermind-bubble-size);justify-content:center;transition:transform .2s,background-color .2s;width:var(--astermind-bubble-size)}.astermind-bubble:hover{background:var(--astermind-primary-hover);transform:scale(1.05)}.astermind-bubble__icon{height:28px;width:28px}.astermind-bubble__badge{align-items:center;background:#ef4444;border-radius:10px;color:#fff;display:flex;font-size:12px;font-weight:600;height:20px;justify-content:center;min-width:20px;padding:0 6px;position:absolute;right:-4px;top:-4px}.astermind-window{animation:astermind-slide-up .3s ease-out;background:var(--astermind-background);border-radius:var(--astermind-border-radius);box-shadow:var(--astermind-shadow);display:flex;flex-direction:column;height:var(--astermind-widget-height);overflow:hidden;width:var(--astermind-widget-width)}@keyframes astermind-slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.astermind-header{align-items:center;background:var(--astermind-primary);color:#fff;display:flex;justify-content:space-between;padding:16px}.astermind-header__info{flex:1}.astermind-header__title{font-size:16px;font-weight:600;margin:0}.astermind-header__subtitle{font-size:12px;margin:2px 0 0;opacity:.9}.astermind-header__actions{align-items:center;display:flex;gap:8px}.astermind-header__close{align-items:center;background:hsla(0,0%,100%,.2);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:32px;justify-content:center;transition:background-color .2s;width:32px}.astermind-header__close:hover{background:hsla(0,0%,100%,.3)}.astermind-header__close svg{height:18px;width:18px}.astermind-window__body{display:flex;flex:1;flex-direction:column;overflow:hidden}.astermind-messages{display:flex;flex:1;flex-direction:column;gap:12px;overflow-y:auto;padding:16px}.astermind-message{display:flex;flex-direction:column;max-width:85%}.astermind-message--user{align-items:flex-end;align-self:flex-end}.astermind-message--assistant{align-items:flex-start;align-self:flex-start}.astermind-message__bubble{border-radius:16px;padding:10px 14px;word-wrap:break-word}.astermind-message--user .astermind-message__bubble{background:var(--astermind-user-bg);border-bottom-right-radius:4px;color:var(--astermind-user-text)}.astermind-message--assistant .astermind-message__bubble{background:var(--astermind-bot-bg);border-bottom-left-radius:4px;color:var(--astermind-bot-text)}.astermind-message__content{line-height:1.5}.astermind-message__content a{color:inherit;text-decoration:underline}.astermind-message__content code{background:rgba(0,0,0,.1);border-radius:4px;font-family:monospace;font-size:.9em;padding:2px 6px}.astermind-message__meta{color:var(--astermind-text-muted);display:flex;font-size:11px;gap:8px;margin-top:4px}.astermind-message__confidence,.astermind-message__offline{border-radius:4px;font-size:10px;font-weight:500;padding:2px 6px;text-transform:uppercase}.astermind-message__confidence--medium,.astermind-message__offline{background:#fef3c7;color:#92400e}.astermind-message__confidence--low{background:#fee2e2;color:#991b1b}.astermind-message__sources-toggle{background:none;border:none;color:var(--astermind-primary);cursor:pointer;font-size:12px;padding:4px 0}.astermind-message__sources-toggle:hover{text-decoration:underline}.astermind-message__typing,.astermind-typing{display:flex;gap:4px;padding:8px 0}.astermind-message__typing span,.astermind-typing span{animation:astermind-typing 1.4s ease-in-out infinite;background:var(--astermind-text-muted);border-radius:50%;height:8px;width:8px}.astermind-message__typing span:nth-child(2),.astermind-typing span:nth-child(2){animation-delay:.2s}.astermind-message__typing span:nth-child(3),.astermind-typing span:nth-child(3){animation-delay:.4s}@keyframes astermind-typing{0%,80%,to{opacity:.6;transform:scale(.6)}40%{opacity:1;transform:scale(1)}}.astermind-sources{display:flex;flex-direction:column;gap:8px;margin-top:8px}.astermind-source{background:var(--astermind-surface);border-radius:8px;font-size:12px;padding:10px}.astermind-source__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:4px}.astermind-source__title{color:var(--astermind-text);font-weight:600}.astermind-source__relevance{color:var(--astermind-primary);font-weight:500}.astermind-source__snippet{color:var(--astermind-text-muted);line-height:1.4}.astermind-status{align-items:center;background:hsla(0,0%,100%,.2);border-radius:12px;display:flex;font-size:12px;gap:6px;padding:4px 10px}.astermind-status__dot{border-radius:50%;height:8px;width:8px}.astermind-status--online .astermind-status__dot{background:#10b981}.astermind-status--offline .astermind-status__dot{background:#f59e0b}.astermind-status--connecting .astermind-status__dot{animation:astermind-pulse 1.5s infinite;background:#3b82f6}.astermind-status--error .astermind-status__dot{background:#ef4444}@keyframes astermind-pulse{0%,to{opacity:1}50%{opacity:.4}}.astermind-window__footer{border-top:1px solid var(--astermind-border);padding:12px 16px}.astermind-input{align-items:flex-end;display:flex;gap:8px}.astermind-input__textarea{border:1px solid var(--astermind-border);border-radius:20px;flex:1;font-family:inherit;font-size:inherit;line-height:1.4;max-height:120px;min-height:40px;outline:none;padding:10px 16px;resize:none;transition:border-color .2s}.astermind-input__textarea:focus{border-color:var(--astermind-primary)}.astermind-input__textarea::-moz-placeholder{color:var(--astermind-text-muted)}.astermind-input__textarea::placeholder{color:var(--astermind-text-muted)}.astermind-input__send{align-items:center;background:var(--astermind-primary);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;flex-shrink:0;height:40px;justify-content:center;transition:background-color .2s,opacity .2s;width:40px}.astermind-input__send:hover:not(:disabled){background:var(--astermind-primary-hover)}.astermind-input__send:disabled{cursor:not-allowed;opacity:.5}.astermind-input__send svg{height:18px;width:18px}.astermind-powered-by{color:var(--astermind-text-muted);font-size:11px;margin-top:8px;text-align:center}.astermind-powered-by a{color:var(--astermind-primary);text-decoration:none}.astermind-powered-by a:hover{text-decoration:underline}.astermind-action-card{background:var(--astermind-surface);border:1px solid var(--astermind-border);border-radius:12px;margin:8px 16px;padding:16px}.astermind-action-card__header{align-items:center;display:flex;gap:12px;margin-bottom:12px}.astermind-action-card__icon{align-items:center;background:var(--astermind-primary);border-radius:10px;color:#fff;display:flex;height:40px;justify-content:center;width:40px}.astermind-action-card__icon svg{height:20px;width:20px}.astermind-action-card__title{flex:1}.astermind-action-card__label{color:var(--astermind-text-muted);display:block;font-size:12px}.astermind-action-card__target{color:var(--astermind-text);display:block;font-weight:600}.astermind-action-card__explanation{color:var(--astermind-text-muted);font-size:13px;line-height:1.4;margin-bottom:12px}.astermind-action-card__confidence{background:var(--astermind-background);border-radius:8px;color:var(--astermind-text-muted);font-size:12px;margin-bottom:12px;overflow:hidden;padding:8px;position:relative}.astermind-action-card__confidence-bar{background:rgba(79,70,229,.2);height:100%;left:0;position:absolute;top:0;z-index:0}.astermind-action-card__confidence span{position:relative;z-index:1}.astermind-action-card__actions{display:flex;gap:8px}.astermind-action-card__cancel,.astermind-action-card__confirm{border-radius:8px;cursor:pointer;flex:1;font-weight:500;padding:10px;transition:background-color .2s}.astermind-action-card__cancel{background:var(--astermind-background);border:1px solid var(--astermind-border);color:var(--astermind-text)}.astermind-action-card__cancel:hover{background:var(--astermind-surface)}.astermind-action-card__confirm{background:var(--astermind-primary);border:none;color:#fff}.astermind-action-card__confirm:hover{background:var(--astermind-primary-hover)}@keyframes astermind-highlight-pulse{0%,to{box-shadow:0 0 0 0 rgba(79,70,229,.4)}50%{box-shadow:0 0 0 10px rgba(79,70,229,0)}}.astermind-highlight-overlay{animation:astermind-highlight-pulse 1s ease-in-out 3}@media (max-width:480px){.astermind-window{border-radius:0;height:100vh;left:0;position:fixed;top:0;width:100vw}.astermind-chatbot--bottom-left,.astermind-chatbot--bottom-right,.astermind-chatbot--top-left,.astermind-chatbot--top-right{bottom:20px;left:auto;right:20px;top:auto}}