@headwai/chat-bubble 8.1.0 → 8.3.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file.
 
+## [8.3.0] - 2026-01-22
+
+### Added
+
+- Speech Bubble Hint. A subtle way to catch the user's attention.
+
+## [8.2.0] - 2026-01-21
+
+### Added
+
+- Capability to render html in disclaimer message and info message.
+
 ## [8.0.2] - 2026-01-05
 
 ### Changed
@@ -10,7 +22,7 @@ All notable changes to this project will be documented in this file.
 
 ## [8.0.1] - 2026-01-05
 
-## Added
+### Added
 
 - Compatability with Open WebUI
 - Open source relevant files

package/README.md

@@ -378,42 +378,58 @@ fontSize: '14px';
 
 #### `disclaimerTitle`
 
-**Type:** `string` | **Default:** Translation-based (`'Terms of Use'` in English, `'Nutzungsbedingungen'` in German)  
+**Type:** `string` | **Default:** Translation-based (`'Terms of <strong>Service</strong>'` in English, `'Nutzungs<strong>bedingungen</strong>'` in German)  
 Title displayed in the initial disclaimer dialog that users must accept before using the chat. This appears when the chat is first opened and the user hasn't previously accepted the terms.
 
+**HTML Support:** ✅ This field supports HTML formatting for rich text display. Content is automatically sanitized for security - see [HTML Content Sanitization](#html-content-sanitization) for details.
+
 ```javascript
-disclaimerTitle: 'Privacy Notice';
-disclaimerTitle: 'Terms of Service';
+disclaimerTitle: 'Privacy <strong>Notice</strong>';
+disclaimerTitle: 'Terms of <em>Service</em>';
 ```
 
 #### `disclaimerMessage`
 
-**Type:** `string` | **Default:** Translation-based disclaimer message  
+**Type:** `string` | **Default:** Translation-based disclaimer message with HTML formatting  
 Main message text displayed in the initial disclaimer dialog. This is the content users must read and accept before they can start chatting.
 
+**HTML Support:** ✅ This field supports HTML formatting including headings, lists, links, and text formatting. Content is automatically sanitized for security - see [HTML Content Sanitization](#html-content-sanitization) for details.
+
 ```javascript
-disclaimerMessage: 'By using this service, you agree to our terms and privacy policy.';
-disclaimerMessage: 'Please review our terms before continuing.';
+disclaimerMessage: `<p>By using this service, you agree to:</p>
+<ul>
+  <li><strong>Privacy:</strong> Your data is protected</li>
+  <li>See <a href="/terms">full terms</a></li>
+</ul>`;
 ```
 
 #### `infoTitle`
 
-**Type:** `string` | **Default:** Translation-based (`'About this AI Assistant'` in English, `'Über diesen KI-Assistenten'` in German)  
+**Type:** `string` | **Default:** Translation-based (`'Information'` in English, `'Informationen'` in German)  
 Title displayed in the info overlay that can be accessed via the info button (ⓘ) in the chat header. This provides users with additional information about the service after they've started chatting.
 
+**HTML Support:** ✅ This field supports HTML formatting for rich text display. Content is automatically sanitized for security - see [HTML Content Sanitization](#html-content-sanitization) for details.
+
 ```javascript
-infoTitle: 'How This Works';
-infoTitle: 'Support Information';
+infoTitle: 'How This <em>Works</em>';
+infoTitle: 'Support <strong>Information</strong>';
 ```
 
 #### `infoMessage`
 
-**Type:** `string` | **Default:** Translation-based info message  
+**Type:** `string` | **Default:** Translation-based info message with HTML formatting  
 Content displayed in the info overlay accessible via the info button. Use this to provide help information, contact details, or explain how the AI assistant works.
 
+**HTML Support:** ✅ This field supports HTML formatting including headings, lists, links, code blocks, and blockquotes. Content is automatically sanitized for security - see [HTML Content Sanitization](#html-content-sanitization) for details.
+
 ```javascript
-infoMessage: 'Our AI assistant uses advanced technology to help answer your questions. For additional support, contact us at support@company.com';
-infoMessage: 'This chat service is powered by artificial intelligence and may occasionally provide inaccurate information.';
+infoMessage: `<h4>How We Help</h4>
+<p>Our AI assistant uses advanced technology. Features:</p>
+<ul>
+  <li>Real-time responses</li>
+  <li>Secure <code>encryption</code></li>
+</ul>
+<blockquote>Contact support@company.com for help</blockquote>`;
 ```
 
 **Note:** The disclaimer and info content serve different purposes:
@@ -421,6 +437,259 @@ infoMessage: 'This chat service is powered by artificial intelligence and may oc
 - **Disclaimer**: Legal/privacy notice shown once before first use (requires acceptance)
 - **Info**: Helpful information accessible anytime via the info button in the chat header
 
+### Speech Bubble Hint Configuration
+
+The speech bubble hint is a helpful tooltip that appears next to the chat icon to encourage user interaction. It uses **session-based display logic** to provide an optimal user experience.
+
+**Display Behavior:**
+
+- ✅ **Appears**: On first page load in a new browser session, after browser restart, or when opening a new tab after closing all previous ones
+- ❌ **Doesn't appear**: On page refresh, when chat is closed/reopened, or when navigating within the same session
+
+This ensures the hint is helpful for new visitors without becoming repetitive for active users.
+
+#### `speechBubbleHintMessage`
+
+**Type:** `string` | **Default:** `'Click here if you need <strong>help</strong>!'`  
+The message displayed in the speech bubble hint that appears next to the chat icon. This hint automatically shows for a few seconds to encourage users to interact with the chat.
+
+**HTML Support:** ✅ This field supports HTML formatting for rich text display.
+
+```javascript
+speechBubbleHintMessage: 'Need <strong>assistance</strong>? Click here!';
+speechBubbleHintMessage: "Questions? <em>We're here to help!</em>";
+```
+
+#### `speechBubbleHintDuration`
+
+**Type:** `number` | **Default:** `4000` (4 seconds)  
+Duration in milliseconds for how long the speech bubble hint is displayed before it automatically disappears.
+
+```javascript
+speechBubbleHintDuration: 5000; // Show for 5 seconds
+speechBubbleHintDuration: 3000; // Show for 3 seconds
+```
+
+#### `enableSpeechBubbleHint`
+
+**Type:** `boolean` | **Default:** `true`  
+Controls whether the speech bubble hint is displayed at all. Set to `false` to completely disable the hint feature.
+
+```javascript
+enableSpeechBubbleHint: false; // Disable speech bubble hint
+enableSpeechBubbleHint: true; // Enable speech bubble hint (default)
+```
+
+#### `speechBubbleHintBackgroundColor`
+
+**Type:** `string` | **Default:** `'#ffffff'` (white)  
+Background color for the speech bubble hint. Accepts any valid CSS color value.
+
+```javascript
+speechBubbleHintBackgroundColor: '#007bff'; // Blue background
+speechBubbleHintBackgroundColor: '#28a745'; // Green background
+speechBubbleHintBackgroundColor: '#ffc107'; // Yellow background
+```
+
+#### `speechBubbleHintTextColor`
+
+**Type:** `string` | **Default:** `'#333333'` (dark gray)  
+Text color for the speech bubble hint content. Accepts any valid CSS color value.
+
+```javascript
+speechBubbleHintTextColor: '#ffffff'; // White text
+speechBubbleHintTextColor: '#000000'; // Black text
+speechBubbleHintTextColor: '#495057'; // Gray text
+```
+
+### Security and HTML Content
+
+#### HTML Content Sanitization
+
+All HTML content in `disclaimerTitle`, `disclaimerMessage`, `infoTitle`, and `infoMessage` is automatically sanitized using **DOMPurify**, the industry-standard HTML sanitization library, to prevent XSS (Cross-Site Scripting) attacks while preserving safe formatting.
+
+**Why DOMPurify:**
+
+- **Battle-tested**: Used by millions of websites and applications worldwide
+- **Security expertise**: Maintained by security researchers who understand XSS attack vectors
+- **Regular updates**: Continuously updated to protect against new threats
+- **Performance**: Optimized for speed and efficiency
+- **Comprehensive**: Handles edge cases and browser inconsistencies
+
+**Allowed HTML Tags:**
+
+**For Message Content** (`disclaimerMessage`, `infoMessage`):
+
+- **Text formatting**: `<strong>`, `<b>`, `<em>`, `<i>`, `<u>`, `<code>`, `<span>`
+- **Structure**: `<p>`, `<h1>` through `<h6>`, `<br>`, `<ul>`, `<ol>`, `<li>`, `<blockquote>`
+- **Links**: `<a>` (with validated `href`, `title`, `target` attributes)
+
+**For Titles** (`disclaimerTitle`, `infoTitle`):
+
+- **Basic formatting only**: `<strong>`, `<b>`, `<em>`, `<i>`, `<code>`, `<span>`
+- **No links or structural elements** for security and UI consistency
+
+**Security Features:**
+
+- **Automatic threat removal**: Dangerous tags like `<script>`, `<iframe>`, `<object>` are completely removed
+- **Attribute sanitization**: Dangerous attributes like `onclick`, `onerror`, `style` are stripped
+- **URL validation**: Links only allow `http://`, `https://`, `mailto:`, and relative URLs
+- **Protocol blocking**: JavaScript URLs (`javascript:`) and data URLs (`data:`) are blocked
+- **Link security**: External links automatically get `rel="noopener noreferrer"` for security
+
+**Examples of Safe HTML Content:**
+
+```javascript
+// ✅ Safe and allowed content
+disclaimerMessage: `<p>By using this service, you agree to:</p>
+<ul>
+  <li><strong>Privacy:</strong> Your data is <em>protected</em></li>
+  <li>Use <code>secure connections</code> only</li>
+  <li>See our <a href="/terms" target="_blank">full terms</a></li>
+</ul>
+<blockquote>Your privacy is our priority</blockquote>`;
+
+// ✅ Safe title formatting
+disclaimerTitle: 'Terms of <strong>Service</strong>';
+infoTitle: 'How This <em>Works</em>';
+```
+
+**Examples of Content That Gets Sanitized:**
+
+```javascript
+// ❌ Dangerous content (automatically removed/sanitized)
+input: '<script>alert("XSS")</script>Terms of Service';
+output: 'Terms of Service'; // Script tag completely removed
+
+input: '<img src="x" onerror="alert(1)">Safe image';
+output: '<img src="x">Safe image'; // onerror attribute stripped
+
+input: '<a href="javascript:alert(1)">Click me</a>';
+output: '<a>Click me</a>'; // Dangerous href removed
+
+input: '<p onclick="malicious()">Click me</p>';
+output: '<p>Click me</p>'; // onclick attribute stripped
+```
+
+**Testing Sanitization:**
+
+To verify that your HTML content is properly sanitized, you can test with potentially dangerous input:
+
+```javascript
+// Test configuration with malicious content
+window.HEADWAI_CHAT_BUBBLE_CONFIG = {
+  disclaimerTitle: '<script>alert("XSS")</script>Safe <strong>Title</strong>',
+  disclaimerMessage: `
+    <p>Safe content</p>
+    <img src="x" onerror="alert('XSS')">
+    <a href="javascript:void(0)">Dangerous link</a>
+    <a href="https://safe-site.com">Safe link</a>
+  `,
+};
+```
+
+If sanitization is working correctly, no JavaScript alerts will appear, and only safe HTML will be rendered.
+
+**Maintenance:**
+
+- DOMPurify is automatically updated through npm updates
+- The widget uses the latest version of DOMPurify for maximum security
+- No manual maintenance of sanitization rules is required
+
+### Security and HTML Content
+
+#### HTML Content Sanitization
+
+All HTML content in `disclaimerTitle`, `disclaimerMessage`, `infoTitle`, and `infoMessage` is automatically sanitized using **DOMPurify**, the industry-standard HTML sanitization library, to prevent XSS (Cross-Site Scripting) attacks while preserving safe formatting.
+
+**Why DOMPurify:**
+
+- **Battle-tested**: Used by millions of websites and applications worldwide
+- **Security expertise**: Maintained by security researchers who understand XSS attack vectors
+- **Regular updates**: Continuously updated to protect against new threats
+- **Performance**: Optimized for speed and efficiency
+- **Comprehensive**: Handles edge cases and browser inconsistencies
+
+**Allowed HTML Tags:**
+
+**For Message Content** (`disclaimerMessage`, `infoMessage`):
+
+- **Text formatting**: `<strong>`, `<b>`, `<em>`, `<i>`, `<u>`, `<code>`, `<span>`
+- **Structure**: `<p>`, `<h1>` through `<h6>`, `<br>`, `<ul>`, `<ol>`, `<li>`, `<blockquote>`
+- **Links**: `<a>` (with validated `href`, `title`, `target` attributes)
+
+**For Titles** (`disclaimerTitle`, `infoTitle`):
+
+- **Basic formatting only**: `<strong>`, `<b>`, `<em>`, `<i>`, `<code>`, `<span>`
+- **No links or structural elements** for security and UI consistency
+
+**Security Features:**
+
+- **Automatic threat removal**: Dangerous tags like `<script>`, `<iframe>`, `<object>` are completely removed
+- **Attribute sanitization**: Dangerous attributes like `onclick`, `onerror`, `style` are stripped
+- **URL validation**: Links only allow `http://`, `https://`, `mailto:`, and relative URLs
+- **Protocol blocking**: JavaScript URLs (`javascript:`) and data URLs (`data:`) are blocked
+- **Link security**: External links automatically get `rel="noopener noreferrer"` for security
+
+**Examples of Safe HTML Content:**
+
+```javascript
+// ✅ Safe and allowed content
+disclaimerMessage: `<p>By using this service, you agree to:</p>
+<ul>
+  <li><strong>Privacy:</strong> Your data is <em>protected</em></li>
+  <li>Use <code>secure connections</code> only</li>
+  <li>See our <a href="/terms" target="_blank">full terms</a></li>
+</ul>
+<blockquote>Your privacy is our priority</blockquote>`;
+
+// ✅ Safe title formatting
+disclaimerTitle: 'Terms of <strong>Service</strong>';
+infoTitle: 'How This <em>Works</em>';
+```
+
+**Examples of Content That Gets Sanitized:**
+
+```javascript
+// ❌ Dangerous content (automatically removed/sanitized)
+input: '<script>alert("XSS")</script>Terms of Service';
+output: 'Terms of Service'; // Script tag completely removed
+
+input: '<img src="x" onerror="alert(1)">Safe image';
+output: '<img src="x">Safe image'; // onerror attribute stripped
+
+input: '<a href="javascript:alert(1)">Click me</a>';
+output: '<a>Click me</a>'; // Dangerous href removed
+
+input: '<p onclick="malicious()">Click me</p>';
+output: '<p>Click me</p>'; // onclick attribute stripped
+```
+
+**Testing Sanitization:**
+
+To verify that your HTML content is properly sanitized, you can test with potentially dangerous input:
+
+```javascript
+// Test configuration with malicious content
+window.HEADWAI_CHAT_BUBBLE_CONFIG = {
+  disclaimerTitle: '<script>alert("XSS")</script>Safe <strong>Title</strong>',
+  disclaimerMessage: `
+    <p>Safe content</p>
+    <img src="x" onerror="alert('XSS')">
+    <a href="javascript:void(0)">Dangerous link</a>
+    <a href="https://safe-site.com">Safe link</a>
+  `,
+};
+```
+
+If sanitization is working correctly, no JavaScript alerts will appear, and only safe HTML will be rendered.
+
+**Maintenance:**
+
+- DOMPurify is automatically updated through npm updates
+- The widget uses the latest version of DOMPurify for maximum security
+- No manual maintenance of sanitization rules is required
+
 ### Data Attribute Format
 
 When using data attributes for multiple HeadwAI Chat Bubbles, convert camelCase property names to kebab-case with the `data-chat-bubble-` prefix:
@@ -434,12 +703,18 @@ When using data attributes for multiple HeadwAI Chat Bubbles, convert camelCase
 - `disclaimerMessage` → `data-chat-bubble-disclaimer-message`
 - `infoTitle` → `data-chat-bubble-info-title`
 - `infoMessage` → `data-chat-bubble-info-message`
+- `speechBubbleHintMessage` → `data-chat-bubble-speech-bubble-hint-message`
+- `speechBubbleHintDuration` → `data-chat-bubble-speech-bubble-hint-duration`
+- `enableSpeechBubbleHint` → `data-chat-bubble-enable-speech-bubble-hint`
+- `speechBubbleHintBackgroundColor` → `data-chat-bubble-speech-bubble-hint-background-color`
+- `speechBubbleHintTextColor` → `data-chat-bubble-speech-bubble-hint-text-color`
 
 ## Troubleshooting
 
 ### Common Issues
 
-**CORS Errors**: Ensure your API endpoint allows requests from your domain
+**CORS Errors**: Ensure your API endpoint allows requests from your domain  
+**HTML Content Issues**: If custom HTML in disclaimer/info fields isn't rendering as expected, check the [HTML Content Sanitization](#html-content-sanitization) section for allowed tags and attributes
 **CDN Version Delays**: Sometimes the `@latest` tag on jsDelivr CDN takes time to propagate to all edge servers and may not deliver the newest version immediately. If you need the latest features or fixes, specify the exact version number instead of using `@latest`:
 
 ```html

package/dist-widget/chat-bubble.css

@@ -1 +1 @@
-.chat-header.svelte-1nmjrnd.svelte-1nmjrnd{background:var(--chat-header-background, #667eea);color:#fff;padding:16px 20px;border-radius:12px 12px 0 0;box-shadow:0 2px 4px #0000001a;flex-shrink:0}.chat-header-content.svelte-1nmjrnd.svelte-1nmjrnd{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:2em}.chat-header-icon.svelte-1nmjrnd.svelte-1nmjrnd{height:100%;max-height:3em;width:auto;object-fit:contain;flex-shrink:0}.chat-title.svelte-1nmjrnd.svelte-1nmjrnd{margin:0;font-weight:600;text-align:center;font-family:var(--font-family, inherit);font-size:calc(var(--font-size, 1em) * 1.2);flex:1;line-height:1.2;padding:.5rem 0}.chat-header-buttons.svelte-1nmjrnd.svelte-1nmjrnd{display:flex;gap:4px;align-items:center;flex-shrink:0}.button-icon.svelte-1nmjrnd.svelte-1nmjrnd{width:1.5em;height:1.5em;fill:none}.svg-path.svelte-1nmjrnd.svelte-1nmjrnd{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd{background:none;border:none;color:#fff;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;height:100%;max-height:3.5em;width:auto;aspect-ratio:1;min-height:3em;min-width:3em}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:hover{background-color:#ffffff1a;transform:scale(1.05)}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:active{background-color:#fff3;transform:scale(.95)}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:focus,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:focus,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:focus,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:disabled{opacity:.5;cursor:not-allowed}.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:disabled:hover{background-color:transparent;transform:none}@media (max-width: 768px){.chat-header.svelte-1nmjrnd.svelte-1nmjrnd{border-radius:0;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-left:calc(20px + env(safe-area-inset-left,0px));padding-right:calc(20px + env(safe-area-inset-right,0px));position:relative;z-index:1000}.chat-header-buttons.svelte-1nmjrnd.svelte-1nmjrnd{gap:2px}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd{width:3.5em;height:3.5em;padding:2px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-width:3.75em;min-height:3.75em}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:hover{background-color:transparent;transform:none}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:active{background-color:#fff3;transform:scale(.9);transition:all .1s ease}.chat-title.svelte-1nmjrnd.svelte-1nmjrnd{font-size:1.125em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}@media screen and (max-width: 768px){.chat-header-buttons.svelte-1nmjrnd button.svelte-1nmjrnd{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}.ai-assistant-icon.svelte-cw4sfs.svelte-cw4sfs{position:fixed;bottom:20px;right:20px;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 6px #0000001a;cursor:pointer;pointer-events:auto;z-index:998;transition:transform .2s ease,box-shadow .2s ease}.ai-assistant-icon.svelte-cw4sfs.svelte-cw4sfs:hover{transform:scale(1.1);box-shadow:0 6px 8px #00000026}.ai-assistant-icon.svelte-cw4sfs.svelte-cw4sfs:active{transform:scale(.95);box-shadow:0 2px 4px #0000001a}.ai-assistant-icon.svelte-cw4sfs img.svelte-cw4sfs{width:65%;height:65%;object-fit:contain}@media (max-width: 768px){.ai-assistant-icon.svelte-cw4sfs.svelte-cw4sfs{width:56px;height:56px;bottom:calc(16px + env(safe-area-inset-bottom,0px));right:calc(16px + env(safe-area-inset-right,0px));-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;z-index:9998}.ai-assistant-icon.svelte-cw4sfs.svelte-cw4sfs:hover{transform:none}.ai-assistant-icon.svelte-cw4sfs.svelte-cw4sfs:active{transform:scale(.9);transition:transform .1s ease}}@media (max-width: 480px){.ai-assistant-icon.svelte-cw4sfs.svelte-cw4sfs{width:64px;height:64px;min-width:44px;min-height:44px}}.chat-content.svelte-nmr4np{flex:1;display:flex;flex-direction:column;overflow:hidden}.chat-content.svelte-nmr4np deep-chat{width:100%!important;height:100%!important;position:relative!important;display:block!important;top:0!important;left:0!important;box-sizing:border-box!important}.chat-content.svelte-nmr4np deep-chat>*{width:100%!important;height:100%!important;box-sizing:border-box!important}@media (max-width: 768px){.chat-content.svelte-nmr4np{position:relative;min-height:0;flex:1 1 auto}.chat-content.svelte-nmr4np deep-chat{max-height:100%!important;overflow:hidden!important}.chat-content.svelte-nmr4np deep-chat [class*=input],.chat-content.svelte-nmr4np deep-chat [class*=text-input],.chat-content.svelte-nmr4np deep-chat input,.chat-content.svelte-nmr4np deep-chat textarea{position:relative!important;z-index:1000!important;margin-bottom:env(safe-area-inset-bottom,0px)!important;font-size:16px!important;-webkit-text-size-adjust:100%!important}.chat-content.svelte-nmr4np deep-chat [class*=messages],.chat-content.svelte-nmr4np deep-chat [class*=message-container]{padding-bottom:80px!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}}@media screen and (max-width: 768px) and (max-height: 600px){.chat-content.svelte-nmr4np deep-chat{height:100%!important;max-height:none!important}}.disclaimer-container.svelte-1b78ucv.svelte-1b78ucv{position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:1000}.disclaimer-content.svelte-1b78ucv.svelte-1b78ucv{padding:24px;max-width:350px;text-align:left}.disclaimer-header.svelte-1b78ucv h3.svelte-1b78ucv{margin:0 0 16px;font-size:calc(var(--font-size, 1em) * 1.3);font-family:var(--font-family, inherit);font-weight:600;color:#333;text-align:center}.disclaimer-body.svelte-1b78ucv.svelte-1b78ucv{margin-bottom:24px}.disclaimer-body.svelte-1b78ucv p.svelte-1b78ucv{margin:0 0 12px;font-size:var(--font-size, 1em);font-family:var(--font-family, inherit);line-height:1.5;color:#555}.disclaimer-actions.svelte-1b78ucv.svelte-1b78ucv{display:flex;gap:12px;justify-content:center}.decline-button.svelte-1b78ucv.svelte-1b78ucv,.accept-button.svelte-1b78ucv.svelte-1b78ucv{padding:10px 20px;border:none;border-radius:6px;font-size:calc(var(--font-size, 1em) * 1.1);font-family:var(--font-family, inherit);font-weight:500;cursor:pointer;transition:background-color .2s ease;min-width:80px}.decline-button.svelte-1b78ucv.svelte-1b78ucv{background:#f5f5f5;color:#666}.decline-button.svelte-1b78ucv.svelte-1b78ucv:hover{background:#e8e8e8}.accept-button.svelte-1b78ucv.svelte-1b78ucv{background:var(--submit-button-color, #007bff);color:#fff}.accept-button.svelte-1b78ucv.svelte-1b78ucv:hover{opacity:.8}.accept-button.svelte-1b78ucv.svelte-1b78ucv:focus,.decline-button.svelte-1b78ucv.svelte-1b78ucv:focus{outline:2px solid var(--submit-button-color, #007bff);outline-offset:2px}.disclaimer-info-overlay.svelte-hw0hcs.svelte-hw0hcs{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:svelte-hw0hcs-fadeIn .2s ease-out}@keyframes svelte-hw0hcs-fadeIn{0%{opacity:0}to{opacity:1}}.disclaimer-info-content.svelte-hw0hcs.svelte-hw0hcs{background:#fff;border-radius:12px;padding:24px;max-width:350px;max-height:80%;overflow-y:auto;position:relative;animation:svelte-hw0hcs-slideInScale .3s ease-out;box-shadow:0 12px 40px #0003}@keyframes svelte-hw0hcs-slideInScale{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.disclaimer-info-header.svelte-hw0hcs.svelte-hw0hcs{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.disclaimer-info-header.svelte-hw0hcs h3.svelte-hw0hcs{margin:0;font-size:calc(var(--font-size, 1em) * 1.3);font-family:var(--font-family, inherit);font-weight:600;color:#333;flex:1;padding-right:12px}.close-info-button.svelte-hw0hcs.svelte-hw0hcs{background:none;border:none;color:#666;cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.close-icon.svelte-hw0hcs.svelte-hw0hcs{width:1.5em;height:1.5em;fill:none}.svg-path.svelte-hw0hcs.svelte-hw0hcs{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.close-info-button.svelte-hw0hcs.svelte-hw0hcs:hover{background-color:#f5f5f5;color:#333}.close-info-button.svelte-hw0hcs.svelte-hw0hcs:active{background-color:#e8e8e8;transform:scale(.95)}.close-info-button.svelte-hw0hcs.svelte-hw0hcs:focus{outline:2px solid var(--submit-button-color, #007bff);outline-offset:2px}.disclaimer-info-body.svelte-hw0hcs.svelte-hw0hcs{color:#555}.disclaimer-info-body.svelte-hw0hcs p.svelte-hw0hcs{margin:0 0 12px;font-size:var(--font-size, 1em);font-family:var(--font-family, inherit);line-height:1.5}@media (max-width: 768px){.disclaimer-info-content.svelte-hw0hcs.svelte-hw0hcs{max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);margin:20px}.disclaimer-info-header.svelte-hw0hcs h3.svelte-hw0hcs{font-size:calc(var(--font-size, 1em) * 1.2)}.close-info-button.svelte-hw0hcs.svelte-hw0hcs{padding:8px;min-width:44px;min-height:44px}}html,body{margin:0;padding:0;width:100%;height:100%}main.svelte-rzw9x0{font-family:sans-serif;margin:0;padding:0;pointer-events:none}.chat-container.svelte-rzw9x0{position:fixed;bottom:20px;right:20px;width:400px;height:600px;border-radius:12px;box-shadow:0 8px 32px #00000026;overflow:hidden;z-index:999;background:#fff;pointer-events:auto;animation:svelte-rzw9x0-slideIn .3s ease-out;display:flex;flex-direction:column}@keyframes svelte-rzw9x0-slideIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){.chat-container.svelte-rzw9x0{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;max-height:100dvh;height:100dvh;border-radius:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);box-sizing:border-box;-webkit-text-size-adjust:100%;z-index:9999}@media (orientation: portrait){.chat-container.svelte-rzw9x0{min-height:100dvh;max-height:100dvh}}}
+.chat-header.svelte-1nmjrnd.svelte-1nmjrnd{background:var(--chat-header-background, #667eea);color:#fff;padding:16px 20px;border-radius:12px 12px 0 0;box-shadow:0 2px 4px #0000001a;flex-shrink:0}.chat-header-content.svelte-1nmjrnd.svelte-1nmjrnd{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:2em}.chat-header-icon.svelte-1nmjrnd.svelte-1nmjrnd{height:100%;max-height:3em;width:auto;object-fit:contain;flex-shrink:0}.chat-title.svelte-1nmjrnd.svelte-1nmjrnd{margin:0;font-weight:600;text-align:center;font-family:var(--font-family, inherit);font-size:calc(var(--font-size, 1em) * 1.2);flex:1;line-height:1.2;padding:.5rem 0}.chat-header-buttons.svelte-1nmjrnd.svelte-1nmjrnd{display:flex;gap:4px;align-items:center;flex-shrink:0}.button-icon.svelte-1nmjrnd.svelte-1nmjrnd{width:1.5em;height:1.5em;fill:none}.svg-path.svelte-1nmjrnd.svelte-1nmjrnd{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd{background:none;border:none;color:#fff;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;height:100%;max-height:3.5em;width:auto;aspect-ratio:1;min-height:3em;min-width:3em}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:hover{background-color:#ffffff1a;transform:scale(1.05)}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:active{background-color:#fff3;transform:scale(.95)}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:focus,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:focus,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:focus,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:disabled{opacity:.5;cursor:not-allowed}.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:disabled:hover{background-color:transparent;transform:none}@media (max-width: 768px){.chat-header.svelte-1nmjrnd.svelte-1nmjrnd{border-radius:0;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-left:calc(20px + env(safe-area-inset-left,0px));padding-right:calc(20px + env(safe-area-inset-right,0px));position:relative;z-index:1000}.chat-header-buttons.svelte-1nmjrnd.svelte-1nmjrnd{gap:2px}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd{width:3.5em;height:3.5em;padding:2px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-width:3.75em;min-height:3.75em}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:hover,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:hover{background-color:transparent;transform:none}.chat-new-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-download-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-info-button.svelte-1nmjrnd.svelte-1nmjrnd:active,.chat-close-button.svelte-1nmjrnd.svelte-1nmjrnd:active{background-color:#fff3;transform:scale(.9);transition:all .1s ease}.chat-title.svelte-1nmjrnd.svelte-1nmjrnd{font-size:1.125em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}@media screen and (max-width: 768px){.chat-header-buttons.svelte-1nmjrnd button.svelte-1nmjrnd{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}.ai-assistant-icon.svelte-496nns.svelte-496nns{position:relative;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 6px #0000001a;cursor:pointer;pointer-events:auto;transition:transform .2s ease,box-shadow .2s ease}.ai-assistant-icon.svelte-496nns.svelte-496nns:hover{transform:scale(1.1);box-shadow:0 6px 8px #00000026}.ai-assistant-icon.svelte-496nns.svelte-496nns:active{transform:scale(.95);box-shadow:0 2px 4px #0000001a}.ai-assistant-icon.svelte-496nns img.svelte-496nns{width:65%;height:65%;object-fit:contain}@media (max-width: 768px){.ai-assistant-icon.svelte-496nns.svelte-496nns{width:56px;height:56px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.ai-assistant-icon.svelte-496nns.svelte-496nns:hover{transform:none}.ai-assistant-icon.svelte-496nns.svelte-496nns:active{transform:scale(.9);transition:transform .1s ease}}@media (max-width: 480px){.ai-assistant-icon.svelte-496nns.svelte-496nns{width:48px;height:48px;min-width:44px;min-height:44px}}.chat-content.svelte-nmr4np{flex:1;display:flex;flex-direction:column;overflow:hidden}.chat-content.svelte-nmr4np deep-chat{width:100%!important;height:100%!important;position:relative!important;display:block!important;top:0!important;left:0!important;box-sizing:border-box!important}.chat-content.svelte-nmr4np deep-chat>*{width:100%!important;height:100%!important;box-sizing:border-box!important}@media (max-width: 768px){.chat-content.svelte-nmr4np{position:relative;min-height:0;flex:1 1 auto}.chat-content.svelte-nmr4np deep-chat{max-height:100%!important;overflow:hidden!important}.chat-content.svelte-nmr4np deep-chat [class*=input],.chat-content.svelte-nmr4np deep-chat [class*=text-input],.chat-content.svelte-nmr4np deep-chat input,.chat-content.svelte-nmr4np deep-chat textarea{position:relative!important;z-index:1000!important;margin-bottom:env(safe-area-inset-bottom,0px)!important;font-size:16px!important;-webkit-text-size-adjust:100%!important}.chat-content.svelte-nmr4np deep-chat [class*=messages],.chat-content.svelte-nmr4np deep-chat [class*=message-container]{padding-bottom:80px!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}}@media screen and (max-width: 768px) and (max-height: 600px){.chat-content.svelte-nmr4np deep-chat{height:100%!important;max-height:none!important}}.message-content{font-size:var(--font-size, 1em);font-family:var(--font-family, inherit);line-height:1.5;color:#555}.message-content p{margin:0 0 .75em}.message-content p:last-child{margin-bottom:0}.message-content h1,.message-content h2,.message-content h3,.message-content h4,.message-content h5,.message-content h6{margin:1em 0 .5em;font-weight:600;font-family:var(--font-family, inherit);color:#333}.message-content h1:first-child,.message-content h2:first-child,.message-content h3:first-child,.message-content h4:first-child,.message-content h5:first-child,.message-content h6:first-child{margin-top:0}.message-content h1{font-size:1.5em}.message-content h2{font-size:1.3em}.message-content h3{font-size:1.2em}.message-content h4{font-size:1.1em}.message-content h5,.message-content h6{font-size:1em}.message-content ul,.message-content ol{margin:.5em 0;padding-left:1.25em}.message-content li{margin:.25em 0}.message-content a{color:var(--submit-button-color, #007bff);text-decoration:underline}.message-content a:hover{text-decoration:none}.message-content strong{font-weight:600}.message-content em{font-style:italic}.message-content code{background-color:#f5f5f5;padding:.125em .25em;border-radius:.25em;font-family:monospace;font-size:.9em}.message-content pre{background-color:#f5f5f5;padding:.75em;border-radius:.25em;overflow-x:auto;margin:.75em 0}.message-content pre code{background:none;padding:0}.message-content blockquote{margin:.75em 0;padding:.5em 1em;border-left:.25em solid var(--submit-button-color, #007bff);background-color:#f9f9f9;font-style:italic}.disclaimer-container.svelte-m07sue.svelte-m07sue{position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:1000}.disclaimer-content.svelte-m07sue.svelte-m07sue{padding:24px;max-width:350px;text-align:left}.disclaimer-header.svelte-m07sue h3.svelte-m07sue{margin:0 0 16px;font-size:calc(var(--font-size, 1em) * 1.3);font-family:var(--font-family, inherit);font-weight:600;color:#333;text-align:center}.disclaimer-body.svelte-m07sue.svelte-m07sue{margin-bottom:24px}.disclaimer-actions.svelte-m07sue.svelte-m07sue{display:flex;gap:12px;justify-content:center}.decline-button.svelte-m07sue.svelte-m07sue,.accept-button.svelte-m07sue.svelte-m07sue{padding:10px 20px;border:none;border-radius:6px;font-size:calc(var(--font-size, 1em) * 1.1);font-family:var(--font-family, inherit);font-weight:500;cursor:pointer;transition:background-color .2s ease;min-width:80px}.decline-button.svelte-m07sue.svelte-m07sue{background:#f5f5f5;color:#666}.decline-button.svelte-m07sue.svelte-m07sue:hover{background:#e8e8e8}.accept-button.svelte-m07sue.svelte-m07sue{background:var(--submit-button-color, #007bff);color:#fff}.accept-button.svelte-m07sue.svelte-m07sue:hover{opacity:.8}.accept-button.svelte-m07sue.svelte-m07sue:focus,.decline-button.svelte-m07sue.svelte-m07sue:focus{outline:2px solid var(--submit-button-color, #007bff);outline-offset:2px}.disclaimer-info-overlay.svelte-1xufevn.svelte-1xufevn{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:svelte-1xufevn-fadeIn .2s ease-out}@keyframes svelte-1xufevn-fadeIn{0%{opacity:0}to{opacity:1}}.disclaimer-info-content.svelte-1xufevn.svelte-1xufevn{background:#fff;border-radius:12px;padding:24px;max-width:350px;max-height:80%;overflow-y:auto;position:relative;animation:svelte-1xufevn-slideInScale .3s ease-out;box-shadow:0 12px 40px #0003}@keyframes svelte-1xufevn-slideInScale{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.disclaimer-info-header.svelte-1xufevn.svelte-1xufevn{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.disclaimer-info-header.svelte-1xufevn h3.svelte-1xufevn{margin:0;font-size:calc(var(--font-size, 1em) * 1.3);font-family:var(--font-family, inherit);font-weight:600;color:#333;flex:1;padding-right:12px}.close-info-button.svelte-1xufevn.svelte-1xufevn{background:none;border:none;color:#666;cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.close-icon.svelte-1xufevn.svelte-1xufevn{width:1.5em;height:1.5em;fill:none}.svg-path.svelte-1xufevn.svelte-1xufevn{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.close-info-button.svelte-1xufevn.svelte-1xufevn:hover{background-color:#f5f5f5;color:#333}.close-info-button.svelte-1xufevn.svelte-1xufevn:active{background-color:#e8e8e8;transform:scale(.95)}.close-info-button.svelte-1xufevn.svelte-1xufevn:focus{outline:2px solid var(--submit-button-color, #007bff);outline-offset:2px}.disclaimer-info-body.svelte-1xufevn.svelte-1xufevn{color:#555}@media (max-width: 768px){.disclaimer-info-content.svelte-1xufevn.svelte-1xufevn{max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);margin:20px}.disclaimer-info-header.svelte-1xufevn h3.svelte-1xufevn{font-size:calc(var(--font-size, 1em) * 1.2)}.close-info-button.svelte-1xufevn.svelte-1xufevn{padding:8px;min-width:44px;min-height:44px}}.speech-bubble.svelte-s8ri2n{position:absolute;top:50%;right:calc(100% + 20px);transform:translateY(-50%);background:var(--bg-color, #ffffff);border-radius:12px;padding:12px 16px;box-shadow:0 4px 16px #00000026;min-width:180px;max-width:280px;width:max-content;z-index:1000;opacity:0;transform:translateY(-50%) translate(10px);transition:all .3s ease-out;pointer-events:none}.speech-bubble.visible.svelte-s8ri2n{opacity:1;transform:translateY(-50%) translate(0)}.speech-content.svelte-s8ri2n{font-size:var(--font-size, 14px);font-family:var(--font-family, inherit);color:var(--text-color, #333);line-height:1.4;text-align:left}.speech-content.svelte-s8ri2n p{margin:0 0 .5em}.speech-content.svelte-s8ri2n p:last-child{margin-bottom:0}.speech-content.svelte-s8ri2n strong{font-weight:600}.speech-content.svelte-s8ri2n em{font-style:italic}.speech-content.svelte-s8ri2n a{color:#007bff;text-decoration:none}.speech-content.svelte-s8ri2n a:hover{text-decoration:underline}.speech-tail.svelte-s8ri2n{position:absolute;top:50%;right:-6px;transform:translateY(-50%);width:0;height:0;border-left:6px solid var(--bg-color, #ffffff);border-top:6px solid transparent;border-bottom:6px solid transparent}@media (max-width: 768px){.speech-bubble.svelte-s8ri2n{right:calc(100% + 15px);min-width:140px;max-width:220px;padding:10px 12px}.speech-content.svelte-s8ri2n{font-size:calc(var(--font-size, 13px) * .9)}}@media (max-width: 480px){.speech-bubble.svelte-s8ri2n{min-width:120px;max-width:180px}}@media (max-width: 360px){.speech-bubble.svelte-s8ri2n{display:none}}html,body{margin:0;padding:0;width:100%;height:100%}main.svelte-silgh7{font-family:sans-serif;margin:0;padding:0;pointer-events:none}.chat-icon-container.svelte-silgh7{position:fixed;bottom:20px;right:20px;width:60px;height:60px;z-index:998;pointer-events:auto}@media (max-width: 768px){.chat-icon-container.svelte-silgh7{width:56px;height:56px;bottom:calc(16px + env(safe-area-inset-bottom,0px));right:calc(16px + env(safe-area-inset-right,0px));z-index:9998}}@media (max-width: 480px){.chat-icon-container.svelte-silgh7{width:64px;height:64px}}.chat-container.svelte-silgh7{position:fixed;bottom:20px;right:20px;width:400px;height:600px;border-radius:12px;box-shadow:0 8px 32px #00000026;overflow:hidden;z-index:999;background:#fff;pointer-events:auto;animation:svelte-silgh7-slideIn .3s ease-out;display:flex;flex-direction:column}@keyframes svelte-silgh7-slideIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){.chat-container.svelte-silgh7{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;max-height:100dvh;height:100dvh;border-radius:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);box-sizing:border-box;-webkit-text-size-adjust:100%;z-index:9999}@media (orientation: portrait){.chat-container.svelte-silgh7{min-height:100dvh;max-height:100dvh}}}