@speechos/client 0.2.9 → 0.2.11

package/dist/index.js

@@ -1,4 +1,4 @@
-import { state, events, getConfig, getFetchHandler, getSettingsToken, clearSettingsToken, getBackend, setConfig, updateUserId } from '@speechos/core';
+import { state, events, getConfig, getSettingsToken, clearSettingsToken, getBackend, setConfig, updateUserId } from '@speechos/core';
 export { DEFAULT_HOST, events, getConfig, livekit, resetConfig, setConfig, state } from '@speechos/core';
 
 /**
@@ -12,6 +12,7 @@ const defaultClientConfig = {
     commands: [],
     zIndex: 999999,
     alwaysVisible: false,
+    useExternalSettings: false,
 };
 /**
  * Current client configuration singleton
@@ -27,6 +28,7 @@ function validateClientConfig(config) {
         commands: config.commands ?? defaultClientConfig.commands,
         zIndex: config.zIndex ?? defaultClientConfig.zIndex,
         alwaysVisible: config.alwaysVisible ?? defaultClientConfig.alwaysVisible,
+        useExternalSettings: config.useExternalSettings ?? defaultClientConfig.useExternalSettings,
     };
     // Validate zIndex
     if (typeof resolved.zIndex !== "number" || resolved.zIndex < 0) {
@@ -78,6 +80,12 @@ function getZIndex() {
 function isAlwaysVisible() {
     return currentClientConfig.alwaysVisible;
 }
+/**
+ * Check if external settings page should be used
+ */
+function useExternalSettings() {
+    return currentClientConfig.useExternalSettings;
+}
 
 /**
  * Form field focus detection for SpeechOS Client SDK
@@ -248,6 +256,17 @@ class FormDetector {
         document.addEventListener("touchstart", this.touchHandler, true);
         document.addEventListener("mousedown", this.mouseDownHandler, true);
         this.isActive = true;
+        // Check for already-focused form field (e.g., page loaded with autofocus)
+        const activeElement = document.activeElement;
+        if (isFormField(activeElement)) {
+            console.log("[SpeechOS] FormDetector: found initially focused form field", {
+                element: activeElement,
+                tagName: activeElement?.tagName,
+            });
+            state.setFocusedElement(activeElement);
+            state.show();
+            events.emit("form:focus", { element: activeElement });
+        }
     }
     /**
      * Stop detecting form field focus events
@@ -492,9 +511,12 @@ let memoryCache$3 = null;
  * Sorted alphabetically by name for dropdown display
  */
 const SUPPORTED_LANGUAGES = [
+    { name: "Belarusian", code: "be", variants: ["be"] },
+    { name: "Bengali", code: "bn", variants: ["bn"] },
+    { name: "Bosnian", code: "bs", variants: ["bs"] },
     { name: "Bulgarian", code: "bg", variants: ["bg"] },
     { name: "Catalan", code: "ca", variants: ["ca"] },
-    { name: "Chinese", code: "zh", variants: ["zh"] },
+    { name: "Croatian", code: "hr", variants: ["hr"] },
     { name: "Czech", code: "cs", variants: ["cs"] },
     { name: "Danish", code: "da", variants: ["da", "da-DK"] },
     { name: "Dutch", code: "nl", variants: ["nl"] },
@@ -515,18 +537,26 @@ const SUPPORTED_LANGUAGES = [
     { name: "Indonesian", code: "id", variants: ["id"] },
     { name: "Italian", code: "it", variants: ["it"] },
     { name: "Japanese", code: "ja", variants: ["ja"] },
+    { name: "Kannada", code: "kn", variants: ["kn"] },
     { name: "Korean", code: "ko", variants: ["ko", "ko-KR"] },
     { name: "Latvian", code: "lv", variants: ["lv"] },
     { name: "Lithuanian", code: "lt", variants: ["lt"] },
+    { name: "Macedonian", code: "mk", variants: ["mk"] },
     { name: "Malay", code: "ms", variants: ["ms"] },
+    { name: "Marathi", code: "mr", variants: ["mr"] },
     { name: "Norwegian", code: "no", variants: ["no"] },
     { name: "Polish", code: "pl", variants: ["pl"] },
     { name: "Portuguese", code: "pt", variants: ["pt", "pt-BR", "pt-PT"] },
     { name: "Romanian", code: "ro", variants: ["ro"] },
     { name: "Russian", code: "ru", variants: ["ru"] },
+    { name: "Serbian", code: "sr", variants: ["sr"] },
     { name: "Slovak", code: "sk", variants: ["sk"] },
+    { name: "Slovenian", code: "sl", variants: ["sl"] },
     { name: "Spanish", code: "es", variants: ["es", "es-419"] },
     { name: "Swedish", code: "sv", variants: ["sv", "sv-SE"] },
+    { name: "Tagalog", code: "tl", variants: ["tl"] },
+    { name: "Tamil", code: "ta", variants: ["ta"] },
+    { name: "Telugu", code: "te", variants: ["te"] },
     { name: "Turkish", code: "tr", variants: ["tr"] },
     { name: "Ukrainian", code: "uk", variants: ["uk"] },
     { name: "Vietnamese", code: "vi", variants: ["vi"] },
@@ -1319,25 +1349,14 @@ class SettingsSync {
         this.syncDisabled = false;
     }
     /**
-     * Make a fetch request using custom fetchHandler if configured, otherwise native fetch.
-     * This allows the Chrome extension to route fetch traffic through the service worker
-     * to bypass page CSP restrictions.
+     * Make a fetch request using native fetch.
      */
     async doFetch(url, options) {
         const config = getConfig();
-        const customHandler = getFetchHandler();
-        if (customHandler) {
-            if (config.debug) {
-                console.log("[SpeechOS] Using custom fetch handler (extension proxy)", options.method, url);
-            }
-            return customHandler(url, options);
-        }
         if (config.debug) {
             console.log("[SpeechOS] Using native fetch", options.method, url);
         }
-        // Use native fetch and wrap response to match FetchResponse interface
-        const response = await fetch(url, options);
-        return response;
+        return fetch(url, options);
     }
     /**
      * Initialize the settings sync manager
@@ -1717,9 +1736,9 @@ const themeStyles = i$4 `
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 
     /* Color tokens */
-    --speechos-primary: #10B981;
-    --speechos-primary-hover: #059669;
-    --speechos-primary-active: #047857;
+    --speechos-primary: #0d9488;
+    --speechos-primary-hover: #0f766e;
+    --speechos-primary-active: #115e59;
 
     --speechos-bg: #ffffff;
     --speechos-bg-hover: #f9fafb;
@@ -2284,45 +2303,51 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         width: 56px;
         height: 56px;
         border-radius: var(--speechos-radius-full);
-        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+        background: #10b981;
         border: none;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
-        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
         overflow: hidden;
       }
 
       .mic-button:hover {
+        background: #059669;
         transform: scale(1.05);
-        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
+        box-shadow: 0 6px 24px rgba(16, 185, 129, 0.45);
       }
 
       .mic-button:active {
         transform: scale(0.98);
       }
 
+      .mic-button:focus {
+        outline: none;
+        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4), 0 4px 16px rgba(16, 185, 129, 0.35);
+      }
+
       /* Expanded state - bubbles visible */
       .mic-button.expanded {
-        background: linear-gradient(135deg, #059669 0%, #047857 100%);
+        background: #059669;
       }
 
       /* Connecting state - Siri-style metallic spinner */
       .mic-button.connecting {
         background: radial-gradient(
           circle at 30% 30%,
-          #34d399 0%,
-          #10b981 40%,
-          #059669 70%,
-          #047857 100%
+          #2dd4bf 0%,
+          #14b8a6 40%,
+          #0d9488 70%,
+          #0f766e 100%
         );
         cursor: wait;
-        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4),
-          0 0 40px rgba(16, 185, 129, 0.2),
+        box-shadow: 0 0 20px rgba(13, 148, 136, 0.4),
+          0 0 40px rgba(13, 148, 136, 0.2),
           inset 0 0 20px rgba(255, 255, 255, 0.1);
       }
 
@@ -2365,15 +2390,15 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         background: conic-gradient(
           from 0deg,
           transparent 0deg,
-          rgba(52, 211, 153, 0.1) 30deg,
-          rgba(16, 185, 129, 0.8) 90deg,
+          rgba(45, 212, 191, 0.1) 30deg,
+          rgba(13, 148, 136, 0.8) 90deg,
           rgba(255, 255, 255, 0.95) 120deg,
-          rgba(52, 211, 153, 0.9) 150deg,
-          rgba(16, 185, 129, 0.6) 180deg,
-          rgba(5, 150, 105, 0.3) 210deg,
+          rgba(45, 212, 191, 0.9) 150deg,
+          rgba(13, 148, 136, 0.6) 180deg,
+          rgba(15, 118, 110, 0.3) 210deg,
           transparent 270deg,
-          rgba(110, 231, 183, 0.2) 300deg,
-          rgba(16, 185, 129, 0.5) 330deg,
+          rgba(94, 234, 212, 0.2) 300deg,
+          rgba(13, 148, 136, 0.5) 330deg,
           transparent 360deg
         );
         -webkit-mask: linear-gradient(#fff 0 0) content-box,
@@ -2394,13 +2419,13 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         background: conic-gradient(
           from 180deg,
           transparent 0deg,
-          rgba(167, 243, 208, 0.3) 60deg,
+          rgba(153, 246, 228, 0.3) 60deg,
           rgba(255, 255, 255, 0.7) 90deg,
-          rgba(110, 231, 183, 0.5) 120deg,
+          rgba(94, 234, 212, 0.5) 120deg,
           transparent 180deg,
-          rgba(52, 211, 153, 0.2) 240deg,
+          rgba(45, 212, 191, 0.2) 240deg,
           rgba(255, 255, 255, 0.5) 270deg,
-          rgba(16, 185, 129, 0.4) 300deg,
+          rgba(13, 148, 136, 0.4) 300deg,
           transparent 360deg
         );
         -webkit-mask: linear-gradient(#fff 0 0) content-box,
@@ -2441,8 +2466,8 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         border-radius: 50%;
         background: radial-gradient(
           circle,
-          rgba(16, 185, 129, 0.4) 0%,
-          rgba(16, 185, 129, 0.15) 40%,
+          rgba(13, 148, 136, 0.4) 0%,
+          rgba(13, 148, 136, 0.15) 40%,
           transparent 70%
         );
         animation: siri-glow-pulse 2s ease-in-out infinite;
@@ -3862,15 +3887,15 @@ const modalLayoutStyles = i$4 `
   }
 
   .modal {
-    background: #1a1d24;
+    background: #f5f5f4;
     border-radius: 16px;
     width: 90%;
     max-width: 580px;
     height: min(560px, 85vh);
     display: flex;
     flex-direction: column;
-    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4),
-      0 0 0 1px rgba(255, 255, 255, 0.05);
+    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15),
+      0 0 0 1px rgba(0, 0, 0, 0.05);
     transform: scale(0.95) translateY(10px);
     transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
     pointer-events: auto;
@@ -3895,16 +3920,16 @@ const modalLayoutStyles = i$4 `
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-    background: rgba(0, 0, 0, 0.2);
+    border-bottom: 1px solid #e5e5e5;
+    background: #ffffff;
   }
 
   .modal-title {
     font-size: 17px;
     font-weight: 600;
-    color: white;
+    color: #171717;
     margin: 0;
-    letter-spacing: -0.01em;
+    letter-spacing: -0.02em;
   }
 
   .modal-logo {
@@ -3917,7 +3942,7 @@ const modalLayoutStyles = i$4 `
     width: 28px;
     height: 28px;
     border-radius: 8px;
-    background: linear-gradient(135deg, #10b981 0%, #8b5cf6 100%);
+    background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -3932,13 +3957,13 @@ const modalLayoutStyles = i$4 `
   .logo-text {
     font-size: 17px;
     font-weight: 500;
-    color: white;
+    color: #171717;
     letter-spacing: -0.02em;
   }
 
   .logo-os {
     font-weight: 700;
-    background: linear-gradient(135deg, #34d399 0%, #a78bfa 100%);
+    background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -3954,13 +3979,22 @@ const modalLayoutStyles = i$4 `
     display: flex;
     align-items: center;
     justify-content: center;
-    color: rgba(255, 255, 255, 0.5);
+    color: #737373;
     transition: all 0.15s ease;
   }
 
   .close-button:hover {
-    background: rgba(255, 255, 255, 0.08);
-    color: white;
+    background: #f5f5f4;
+    color: #171717;
+  }
+
+  .close-button:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #0d9488, 0 0 0 4px rgba(13, 148, 136, 0.2);
+  }
+
+  .close-button:active {
+    transform: scale(0.95);
   }
 
   .modal-body {
@@ -3972,8 +4006,8 @@ const modalLayoutStyles = i$4 `
   .sidebar {
     width: 110px;
     flex-shrink: 0;
-    background: rgba(0, 0, 0, 0.25);
-    border-right: 1px solid rgba(255, 255, 255, 0.06);
+    background: #fafaf9;
+    border-right: 1px solid #e5e5e5;
     padding: 12px 8px;
     display: flex;
     flex-direction: column;
@@ -4002,19 +4036,25 @@ const modalLayoutStyles = i$4 `
     border-radius: 10px;
     background: transparent;
     cursor: pointer;
-    color: rgba(255, 255, 255, 0.5);
+    color: #525252;
     transition: all 0.15s ease;
     position: relative;
   }
 
   .sidebar-item:hover {
-    background: rgba(255, 255, 255, 0.05);
-    color: rgba(255, 255, 255, 0.8);
+    background: #ffffff;
+    color: #171717;
+  }
+
+  .sidebar-item:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px rgba(13, 148, 136, 0.4);
   }
 
   .sidebar-item.active {
-    background: rgba(16, 185, 129, 0.12);
-    color: #34d399;
+    background: rgba(15, 118, 110, 0.12);
+    color: #0f766e;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
   }
 
   .sidebar-item.active::before {
@@ -4025,7 +4065,7 @@ const modalLayoutStyles = i$4 `
     transform: translateY(-50%);
     width: 3px;
     height: 24px;
-    background: #34d399;
+    background: #0f766e;
     border-radius: 0 3px 3px 0;
   }
 
@@ -4068,14 +4108,14 @@ const tabContentStyles = i$4 `
   .section-title {
     font-size: 15px;
     font-weight: 600;
-    color: white;
+    color: #171717;
     margin: 0 0 6px 0;
-    letter-spacing: -0.01em;
+    letter-spacing: -0.02em;
   }
 
   .section-description {
     font-size: 13px;
-    color: rgba(255, 255, 255, 0.5);
+    color: #525252;
     line-height: 1.5;
     margin: 0;
   }
@@ -4083,7 +4123,7 @@ const tabContentStyles = i$4 `
   .empty-state {
     text-align: center;
     padding: 40px 20px;
-    color: rgba(255, 255, 255, 0.5);
+    color: #737373;
   }
 
   .empty-state-icon {
@@ -4095,7 +4135,7 @@ const tabContentStyles = i$4 `
     font-size: 15px;
     font-weight: 500;
     margin-bottom: 8px;
-    color: rgba(255, 255, 255, 0.7);
+    color: #525252;
   }
 
   .empty-state-text {
@@ -4113,7 +4153,7 @@ const tabContentStyles = i$4 `
     display: flex;
     align-items: center;
     justify-content: center;
-    color: rgba(255, 255, 255, 0.35);
+    color: #737373;
     transition: all 0.15s ease;
   }
 
@@ -4151,20 +4191,30 @@ const formStyles = i$4 `
     align-items: center;
     gap: 6px;
     padding: 10px 16px;
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    background: #0d9488;
     border: none;
     border-radius: 8px;
     color: white;
     font-size: 13px;
     font-weight: 600;
+    letter-spacing: 0.01em;
     cursor: pointer;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
+    transition: all 0.15s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }
 
   .add-button:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+    background: #0f766e;
+    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
+  }
+
+  .add-button:focus:not(:disabled) {
+    outline: none;
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
+  }
+
+  .add-button:active:not(:disabled) {
+    transform: scale(0.98);
   }
 
   .add-button:disabled {
@@ -4175,7 +4225,7 @@ const formStyles = i$4 `
 
   .count-badge {
     font-size: 12px;
-    color: rgba(255, 255, 255, 0.45);
+    color: #737373;
     font-weight: 500;
   }
 
@@ -4187,11 +4237,12 @@ const formStyles = i$4 `
   }
 
   .add-form {
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: #ffffff;
+    border: 1px solid #e5e5e5;
     border-radius: 12px;
     padding: 16px;
     margin-bottom: 16px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
   }
 
   .form-group {
@@ -4206,7 +4257,7 @@ const formStyles = i$4 `
     display: block;
     font-size: 12px;
     font-weight: 600;
-    color: rgba(255, 255, 255, 0.7);
+    color: #525252;
     margin-bottom: 8px;
     text-transform: uppercase;
     letter-spacing: 0.04em;
@@ -4215,10 +4266,10 @@ const formStyles = i$4 `
   .form-input {
     width: 100%;
     padding: 12px 14px;
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: #ffffff;
+    border: 1px solid #d4d4d4;
     border-radius: 8px;
-    color: white;
+    color: #171717;
     font-size: 14px;
     font-family: inherit;
     transition: all 0.15s ease;
@@ -4227,12 +4278,12 @@ const formStyles = i$4 `
 
   .form-input:focus {
     outline: none;
-    border-color: #34d399;
-    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+    border-color: #0d9488;
+    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
   }
 
   .form-input::placeholder {
-    color: rgba(255, 255, 255, 0.3);
+    color: #a3a3a3;
   }
 
   .form-input.error {
@@ -4256,7 +4307,7 @@ const formStyles = i$4 `
 
   .char-count {
     font-size: 11px;
-    color: rgba(255, 255, 255, 0.4);
+    color: #737373;
     font-variant-numeric: tabular-nums;
   }
 
@@ -4290,26 +4341,35 @@ const formStyles = i$4 `
   }
 
   .form-btn.cancel {
-    background: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    color: rgba(255, 255, 255, 0.7);
+    background: #ffffff;
+    border: 1px solid #d4d4d4;
+    color: #525252;
   }
 
   .form-btn.cancel:hover {
-    background: rgba(255, 255, 255, 0.05);
-    border-color: rgba(255, 255, 255, 0.25);
+    background: #fafaf9;
+    border-color: #a3a3a3;
   }
 
   .form-btn.save {
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    background: #0d9488;
     border: none;
     color: white;
-    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }
 
   .form-btn.save:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+    background: #0f766e;
+    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
+  }
+
+  .form-btn.save:focus:not(:disabled) {
+    outline: none;
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
+  }
+
+  .form-btn.save:active:not(:disabled) {
+    transform: scale(0.98);
   }
 
   .form-btn.save:disabled {
@@ -4343,16 +4403,17 @@ let SpeechOSHistoryTab = class SpeechOSHistoryTab extends i$1 {
       }
 
       .transcript-item {
-        background: rgba(255, 255, 255, 0.04);
-        border: 1px solid rgba(255, 255, 255, 0.06);
+        background: #ffffff;
+        border: 1px solid #e5e5e5;
         border-radius: 10px;
         padding: 12px 14px;
         transition: all 0.15s ease;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
       }
 
       .transcript-item:hover {
-        background: rgba(255, 255, 255, 0.06);
-        border-color: rgba(255, 255, 255, 0.1);
+        border-color: #d4d4d4;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
       }
 
       .transcript-header {
@@ -4375,28 +4436,28 @@ let SpeechOSHistoryTab = class SpeechOSHistoryTab extends i$1 {
       }
 
       .transcript-badge.dictate {
-        background: rgba(16, 185, 129, 0.15);
-        color: #34d399;
+        background: rgba(13, 148, 136, 0.18);
+        color: #0f766e;
       }
 
       .transcript-badge.edit {
-        background: rgba(139, 92, 246, 0.15);
-        color: #a78bfa;
+        background: rgba(139, 92, 246, 0.18);
+        color: #7c3aed;
       }
 
       .transcript-badge.command {
-        background: rgba(245, 158, 11, 0.15);
-        color: #fbbf24;
+        background: rgba(245, 158, 11, 0.18);
+        color: #b45309;
       }
 
       .transcript-time {
         font-size: 12px;
-        color: rgba(255, 255, 255, 0.35);
+        color: #737373;
       }
 
       .transcript-text {
         font-size: 14px;
-        color: rgba(255, 255, 255, 0.85);
+        color: #171717;
         line-height: 1.5;
         word-break: break-word;
         display: -webkit-box;
@@ -4411,7 +4472,7 @@ let SpeechOSHistoryTab = class SpeechOSHistoryTab extends i$1 {
         gap: 8px;
         margin-top: 10px;
         padding-top: 10px;
-        border-top: 1px solid rgba(255, 255, 255, 0.06);
+        border-top: 1px solid #e5e5e5;
       }
 
       .transcript-action-btn {
@@ -4420,23 +4481,23 @@ let SpeechOSHistoryTab = class SpeechOSHistoryTab extends i$1 {
         gap: 6px;
         padding: 6px 10px;
         border-radius: 6px;
-        background: rgba(255, 255, 255, 0.06);
+        background: rgba(0, 0, 0, 0.08);
         border: none;
         cursor: pointer;
         font-size: 12px;
         font-weight: 500;
-        color: rgba(255, 255, 255, 0.6);
+        color: #404040;
         transition: all 0.15s ease;
       }
 
       .transcript-action-btn:hover {
-        background: rgba(255, 255, 255, 0.1);
-        color: rgba(255, 255, 255, 0.9);
+        background: rgba(0, 0, 0, 0.12);
+        color: #171717;
       }
 
       .transcript-action-btn.copied {
-        background: rgba(16, 185, 129, 0.2);
-        color: #34d399;
+        background: rgba(13, 148, 136, 0.2);
+        color: #0d9488;
       }
 
       .transcript-action-btn.delete:hover {
@@ -4450,9 +4511,9 @@ let SpeechOSHistoryTab = class SpeechOSHistoryTab extends i$1 {
         margin-top: 16px;
         padding: 10px;
         background: rgba(239, 68, 68, 0.1);
-        border: 1px solid rgba(239, 68, 68, 0.15);
+        border: 1px solid rgba(239, 68, 68, 0.2);
         border-radius: 8px;
-        color: #f87171;
+        color: #dc2626;
         font-size: 13px;
         font-weight: 500;
         cursor: pointer;
@@ -4461,18 +4522,18 @@ let SpeechOSHistoryTab = class SpeechOSHistoryTab extends i$1 {
 
       .clear-all-button:hover {
         background: rgba(239, 68, 68, 0.18);
-        border-color: rgba(239, 68, 68, 0.25);
+        border-color: rgba(239, 68, 68, 0.3);
       }
 
       .command-matched {
         font-size: 12px;
-        color: rgba(255, 255, 255, 0.5);
+        color: #525252;
         margin-top: 6px;
       }
 
       .command-matched code {
         background: rgba(245, 158, 11, 0.15);
-        color: #fbbf24;
+        color: #d97706;
         padding: 2px 6px;
         border-radius: 4px;
         font-family: monospace;
@@ -4660,21 +4721,21 @@ let SpeechOSHelpTab = class SpeechOSHelpTab extends i$1 {
         gap: 8px;
         font-size: 15px;
         font-weight: 600;
-        color: white;
+        color: #171717;
         margin-bottom: 10px;
       }
 
       .help-title.dictate {
-        color: #34d399;
+        color: #0f766e;
       }
 
       .help-title.edit {
-        color: #a78bfa;
+        color: #7c3aed;
       }
 
       .help-text {
         font-size: 13px;
-        color: rgba(255, 255, 255, 0.6);
+        color: #525252;
         line-height: 1.6;
         margin-bottom: 10px;
       }
@@ -4691,17 +4752,17 @@ let SpeechOSHelpTab = class SpeechOSHelpTab extends i$1 {
       }
 
       .help-example {
-        background: rgba(255, 255, 255, 0.04);
-        border: 1px solid rgba(255, 255, 255, 0.06);
+        background: #ffffff;
+        border: 1px solid #e5e5e5;
         border-radius: 6px;
         padding: 8px 12px;
         font-size: 12px;
-        color: rgba(255, 255, 255, 0.5);
+        color: #525252;
         font-style: italic;
       }
 
       .help-title.languages {
-        background: linear-gradient(135deg, #34d399 0%, #a78bfa 100%);
+        background: linear-gradient(135deg, #0f766e 0%, #1d4ed8 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
@@ -4779,7 +4840,7 @@ let SpeechOSAboutTab = class SpeechOSAboutTab extends i$1 {
         width: 36px;
         height: 36px;
         border-radius: 10px;
-        background: linear-gradient(135deg, #10b981 0%, #8b5cf6 100%);
+        background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -4794,13 +4855,13 @@ let SpeechOSAboutTab = class SpeechOSAboutTab extends i$1 {
       .about-logo-text {
         font-size: 22px;
         font-weight: 500;
-        color: white;
+        color: #171717;
         letter-spacing: -0.02em;
       }
 
       .logo-os {
         font-weight: 700;
-        background: linear-gradient(135deg, #34d399 0%, #a78bfa 100%);
+        background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
@@ -4808,7 +4869,7 @@ let SpeechOSAboutTab = class SpeechOSAboutTab extends i$1 {
 
       .about-description {
         font-size: 14px;
-        color: rgba(255, 255, 255, 0.65);
+        color: #525252;
         line-height: 1.7;
         margin-bottom: 24px;
       }
@@ -4826,19 +4887,29 @@ let SpeechOSAboutTab = class SpeechOSAboutTab extends i$1 {
         align-items: center;
         gap: 8px;
         padding: 12px 18px;
-        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+        background: #0d9488;
         border-radius: 10px;
         color: white;
         font-size: 14px;
         font-weight: 600;
+        letter-spacing: 0.01em;
         text-decoration: none;
-        transition: all 0.2s ease;
-        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
+        transition: all 0.15s ease;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
       }
 
       .about-link:hover {
-        transform: translateY(-1px);
-        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
+        background: #0f766e;
+        box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
+      }
+
+      .about-link:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
+      }
+
+      .about-link:active {
+        transform: scale(0.98);
       }
     `,
     ]; }
@@ -4918,20 +4989,21 @@ let SpeechOSAudioLevelMeter = class SpeechOSAudioLevelMeter extends i$1 {
         gap: 3px;
         height: 32px;
         padding: 8px 12px;
-        background: rgba(0, 0, 0, 0.2);
+        background: #ffffff;
+        border: 2px solid #e5e5e5;
         border-radius: 8px;
       }
 
       .meter-bar {
         width: 6px;
         min-height: 4px;
-        background: rgba(255, 255, 255, 0.2);
+        background: #d4d4d4;
         border-radius: 2px;
         transition: height 50ms ease-out, background 100ms ease;
       }
 
       .meter-bar.active {
-        background: var(--speechos-primary);
+        background: #10b981;
       }
 
       .meter-inactive {
@@ -4940,14 +5012,15 @@ let SpeechOSAudioLevelMeter = class SpeechOSAudioLevelMeter extends i$1 {
         justify-content: center;
         height: 32px;
         padding: 8px 12px;
-        background: rgba(0, 0, 0, 0.2);
+        background: #ffffff;
+        border: 2px solid #e5e5e5;
         border-radius: 8px;
-        color: rgba(255, 255, 255, 0.4);
+        color: #737373;
         font-size: 13px;
       }
 
       .meter-error {
-        color: #f87171;
+        color: #dc2626;
       }
     `,
     ]; }
@@ -5144,18 +5217,18 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
       }
 
       .settings-section-icon {
-        color: #34d399;
+        color: #0d9488;
       }
 
       .settings-section-title {
         font-size: 14px;
         font-weight: 600;
-        color: white;
+        color: #171717;
       }
 
       .settings-section-description {
         font-size: 13px;
-        color: rgba(255, 255, 255, 0.45);
+        color: #525252;
         line-height: 1.5;
         margin-bottom: 14px;
       }
@@ -5184,10 +5257,10 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
       .settings-select {
         width: 100%;
         padding: 12px 40px 12px 14px;
-        background: rgba(0, 0, 0, 0.3);
-        border: 1px solid rgba(255, 255, 255, 0.08);
+        background: #ffffff;
+        border: 1px solid #d4d4d4;
         border-radius: 10px;
-        color: white;
+        color: #171717;
         font-size: 14px;
         font-family: inherit;
         cursor: pointer;
@@ -5197,34 +5270,44 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
       }
 
       .settings-select:hover {
-        border-color: rgba(255, 255, 255, 0.15);
-        background: rgba(0, 0, 0, 0.4);
+        border-color: #a3a3a3;
+        background: #ffffff;
       }
 
       .settings-select:focus {
         outline: none;
-        border-color: #34d399;
-        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+        border-color: #0d9488;
+        box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
       }
 
       .settings-select option {
-        background: #1a1d24;
-        color: white;
+        background: #ffffff;
+        color: #171717;
         padding: 8px;
       }
 
+      .settings-select:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+
+      .settings-select:disabled:hover {
+        border-color: #d4d4d4;
+        background: #ffffff;
+      }
+
       .settings-select-arrow {
         position: absolute;
         right: 14px;
         top: 50%;
         transform: translateY(-50%);
         pointer-events: none;
-        color: rgba(255, 255, 255, 0.4);
+        color: #737373;
       }
 
       .settings-permission-note {
         font-size: 12px;
-        color: rgba(255, 255, 255, 0.4);
+        color: #737373;
         margin-top: 10px;
         font-style: italic;
       }
@@ -5234,7 +5317,7 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
         align-items: center;
         gap: 4px;
         font-size: 11px;
-        color: #34d399;
+        color: #059669;
         font-weight: 500;
         opacity: 0;
         transition: opacity 0.2s ease;
@@ -5250,28 +5333,34 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
         align-items: center;
         justify-content: space-between;
         padding: 12px 14px;
-        background: rgba(0, 0, 0, 0.3);
-        border: 1px solid rgba(255, 255, 255, 0.08);
+        background: #ffffff;
+        border: 1px solid #e5e5e5;
         border-radius: 10px;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
       }
 
       .settings-toggle-label {
         font-size: 14px;
-        color: white;
+        color: #171717;
       }
 
       .settings-toggle {
         position: relative;
         width: 44px;
         height: 24px;
-        background: rgba(255, 255, 255, 0.1);
+        background: #d4d4d4;
         border-radius: 12px;
         cursor: pointer;
         transition: background 0.2s ease;
       }
 
       .settings-toggle.active {
-        background: #34d399;
+        background: #0d9488;
+      }
+
+      .settings-toggle:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
       }
 
       .settings-toggle-knob {
@@ -5394,13 +5483,14 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
         setSmartFormatEnabled(this.smartFormatEnabled);
         this.showSaved();
     }
-    renderLanguageSelector(selectedCode, onChange) {
+    renderLanguageSelector(selectedCode, onChange, disabled = false) {
         return b `
       <div class="settings-select-wrapper">
         <select
           class="settings-select"
           .value="${selectedCode}"
           @change="${onChange}"
+          ?disabled="${disabled}"
         >
           ${SUPPORTED_LANGUAGES.map((lang) => b `
               <option
@@ -5518,7 +5608,7 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
         <div class="settings-section-description">
           AI automatically removes filler words, adds punctuation, and polishes
           your text. Disable for raw transcription output. Note: disabling also
-          turns off text snippets.
+          turns off text snippets and output language translation.
         </div>
         <div class="settings-toggle-row">
           <span class="settings-toggle-label">Enable AI formatting</span>
@@ -5559,9 +5649,13 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
         </div>
         <div class="settings-section-description">
           The language for your transcribed text. Usually the same as input, but
-          can differ for translation.
+          can differ for translation.${!this.smartFormatEnabled
+            ? " Requires Smart Format to be enabled."
+            : ""}
         </div>
-        ${this.renderLanguageSelector(this.selectedOutputLanguageCode, this.handleOutputLanguageChange.bind(this))}
+        ${this.renderLanguageSelector(this.smartFormatEnabled
+            ? this.selectedOutputLanguageCode
+            : this.selectedInputLanguageCode, this.handleOutputLanguageChange.bind(this), !this.smartFormatEnabled)}
       </div>
     `;
     }
@@ -5624,17 +5718,18 @@ let SpeechOSSnippetsTab = class SpeechOSSnippetsTab extends i$1 {
       }
 
       .snippet-item {
-        background: rgba(255, 255, 255, 0.04);
-        border: 1px solid rgba(255, 255, 255, 0.06);
+        background: #ffffff;
+        border: 1px solid #e5e5e5;
         border-radius: 10px;
         padding: 14px;
         transition: all 0.15s ease;
         position: relative;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
       }
 
       .snippet-item:hover {
-        background: rgba(255, 255, 255, 0.06);
-        border-color: rgba(255, 255, 255, 0.1);
+        border-color: #d4d4d4;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
       }
 
       .snippet-trigger {
@@ -5647,7 +5742,7 @@ let SpeechOSSnippetsTab = class SpeechOSSnippetsTab extends i$1 {
       .snippet-trigger-text {
         font-size: 14px;
         font-weight: 600;
-        color: #34d399;
+        color: #0d9488;
       }
 
       .snippet-trigger-text::before {
@@ -5665,12 +5760,12 @@ let SpeechOSSnippetsTab = class SpeechOSSnippetsTab extends i$1 {
         align-items: flex-start;
         gap: 8px;
         font-size: 13px;
-        color: rgba(255, 255, 255, 0.65);
+        color: #525252;
         line-height: 1.5;
       }
 
       .snippet-expansion-arrow {
-        color: rgba(255, 255, 255, 0.3);
+        color: #a3a3a3;
         flex-shrink: 0;
         margin-top: 2px;
       }
@@ -5699,13 +5794,13 @@ let SpeechOSSnippetsTab = class SpeechOSSnippetsTab extends i$1 {
         display: flex;
         align-items: center;
         justify-content: center;
-        color: rgba(255, 255, 255, 0.4);
+        color: #737373;
         transition: all 0.15s ease;
       }
 
       .edit-btn:hover {
-        background: rgba(52, 211, 153, 0.15);
-        color: #34d399;
+        background: rgba(13, 148, 136, 0.1);
+        color: #0d9488;
       }
     `,
     ]; }
@@ -5988,30 +6083,32 @@ let SpeechOSVocabularyTab = class SpeechOSVocabularyTab extends i$1 {
         gap: 8px;
         padding: 8px 12px;
         background: rgba(139, 92, 246, 0.1);
-        border: 1px solid rgba(139, 92, 246, 0.2);
+        border: 1px solid rgba(139, 92, 246, 0.25);
         border-radius: 8px;
         transition: all 0.15s ease;
       }
 
       .vocabulary-chip:hover {
         background: rgba(139, 92, 246, 0.15);
-        border-color: rgba(139, 92, 246, 0.3);
+        border-color: rgba(139, 92, 246, 0.35);
       }
 
       .vocabulary-chip-text {
         font-size: 13px;
         font-weight: 500;
-        color: #c4b5fd;
+        color: #7c3aed;
       }
 
       .vocabulary-chip .delete-btn {
         width: 20px;
         height: 20px;
         margin: -4px -4px -4px 0;
+        color: #737373;
       }
 
       .vocabulary-chip .delete-btn:hover {
         background: rgba(239, 68, 68, 0.2);
+        color: #f87171;
       }
     `,
     ]; }
@@ -6412,14 +6509,14 @@ const popupModalStyles = i$4 `
   }
 
   .modal-card {
-    background: #1a1d24;
+    background: #f5f5f4;
     border-radius: 16px;
     width: 90%;
     max-width: 400px;
     display: flex;
     flex-direction: column;
-    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4),
-      0 0 0 1px rgba(255, 255, 255, 0.05);
+    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15),
+      0 0 0 1px rgba(0, 0, 0, 0.05);
     transform: scale(0.95) translateY(10px);
     transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
     pointer-events: auto;
@@ -6435,14 +6532,14 @@ const popupModalStyles = i$4 `
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-    background: rgba(0, 0, 0, 0.2);
+    border-bottom: 1px solid #e5e5e5;
+    background: #ffffff;
   }
 
   .modal-title {
     font-size: 16px;
     font-weight: 600;
-    color: white;
+    color: #171717;
     margin: 0;
     letter-spacing: -0.01em;
   }
@@ -6457,13 +6554,22 @@ const popupModalStyles = i$4 `
     display: flex;
     align-items: center;
     justify-content: center;
-    color: rgba(255, 255, 255, 0.5);
+    color: #737373;
     transition: all 0.15s ease;
   }
 
   .close-button:hover {
-    background: rgba(255, 255, 255, 0.08);
-    color: white;
+    background: #f5f5f4;
+    color: #171717;
+  }
+
+  .close-button:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #0d9488, 0 0 0 4px rgba(13, 148, 136, 0.2);
+  }
+
+  .close-button:active {
+    transform: scale(0.95);
   }
 
   .modal-body {
@@ -6475,8 +6581,8 @@ const popupModalStyles = i$4 `
     justify-content: flex-end;
     gap: 10px;
     padding: 16px 20px;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
-    background: rgba(0, 0, 0, 0.1);
+    border-top: 1px solid #e5e5e5;
+    background: #ffffff;
   }
 
   .btn {
@@ -6493,42 +6599,47 @@ const popupModalStyles = i$4 `
   }
 
   .btn-secondary {
-    background: rgba(255, 255, 255, 0.08);
-    color: rgba(255, 255, 255, 0.8);
+    background: rgba(0, 0, 0, 0.08);
+    color: #525252;
   }
 
   .btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.12);
-    color: white;
+    background: rgba(0, 0, 0, 0.12);
+    color: #171717;
   }
 
   .btn-primary {
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    background: #0d9488;
     color: white;
-    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }
 
   .btn-primary:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+    background: #0f766e;
+    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
+  }
+
+  .btn-primary:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
   }
 
   .btn-primary:active {
-    transform: translateY(0);
+    transform: scale(0.98);
   }
 
   /* Success state for copy button */
   .btn-success {
-    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
+    background: #059669;
   }
 
   /* Text display area */
   .text-display {
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: #ffffff;
+    border: 1px solid #e5e5e5;
     border-radius: 10px;
     padding: 14px 16px;
-    color: white;
+    color: #171717;
     font-size: 14px;
     line-height: 1.5;
     max-height: 200px;
@@ -6547,12 +6658,12 @@ const popupModalStyles = i$4 `
   }
 
   .text-display::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.15);
+    background: rgba(0, 0, 0, 0.15);
     border-radius: 3px;
   }
 
   .text-display::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.25);
+    background: rgba(0, 0, 0, 0.25);
   }
 
   /* Instruction list styling */
@@ -6567,7 +6678,7 @@ const popupModalStyles = i$4 `
     align-items: flex-start;
     gap: 12px;
     padding: 12px 0;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-bottom: 1px solid #e5e5e5;
   }
 
   .instruction-item:last-child {
@@ -6578,7 +6689,7 @@ const popupModalStyles = i$4 `
     width: 24px;
     height: 24px;
     border-radius: 50%;
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    background: #0d9488;
     color: white;
     font-size: 12px;
     font-weight: 700;
@@ -6590,7 +6701,7 @@ const popupModalStyles = i$4 `
 
   .instruction-text {
     font-size: 14px;
-    color: rgba(255, 255, 255, 0.85);
+    color: #171717;
     line-height: 1.5;
     padding-top: 2px;
   }
@@ -6648,7 +6759,7 @@ let SpeechOSDictationOutputModal = class SpeechOSDictationOutputModal extends i$
         width: 32px;
         height: 32px;
         border-radius: 8px;
-        background: linear-gradient(135deg, #10b981 0%, #8b5cf6 100%);
+        background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -6662,31 +6773,35 @@ let SpeechOSDictationOutputModal = class SpeechOSDictationOutputModal extends i$
       }
 
       .modal-title {
-        background: linear-gradient(135deg, #34d399 0%, #a78bfa 100%);
+        background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
       }
 
       .btn-primary {
-        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+        background: #0d9488;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
         border-radius: 999px;
       }
 
       .btn-primary:hover {
-        background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
-        transform: translateY(-2px);
-        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
+        background: #0f766e;
+        box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
+      }
+
+      .btn-primary:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
       }
 
       .btn-primary:active {
-        transform: translateY(0);
+        transform: scale(0.98);
       }
 
       .btn-success {
-        background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
-        box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3);
+        background: #059669;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
         border-radius: 999px;
       }
 
@@ -6700,14 +6815,15 @@ let SpeechOSDictationOutputModal = class SpeechOSDictationOutputModal extends i$
         gap: 6px;
         margin-top: 12px;
         padding: 8px 12px;
-        background: rgba(16, 185, 129, 0.08);
+        background: #ffffff;
+        border: 1px solid #e5e5e5;
         border-radius: 8px;
         font-size: 12px;
-        color: rgba(255, 255, 255, 0.6);
+        color: #525252;
       }
 
       .hint-icon {
-        color: #10b981;
+        color: #0d9488;
         flex-shrink: 0;
       }
 
@@ -7553,7 +7669,14 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         state.hide();
     }
     handleSettingsClick() {
-        this.settingsOpen = true;
+        if (useExternalSettings()) {
+            const host = getConfig().host;
+            const fullUrl = `${host}/a/extension-settings`;
+            window.open(fullUrl, '_blank', 'noopener,noreferrer');
+        }
+        else {
+            this.settingsOpen = true;
+        }
     }
     handleDragStart(e) {
         if (e.button !== 0)
@@ -8094,10 +8217,17 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         this.editSelectionStart = null;
         this.editSelectionEnd = null;
         this.editSelectedText = "";
-        // Open settings modal
-        this.settingsOpen = true;
+        // Open settings - either external URL or modal
+        if (useExternalSettings()) {
+            const host = getConfig().host;
+            const fullUrl = `${host}/a/extension-settings`;
+            window.open(fullUrl, '_blank', 'noopener,noreferrer');
+        }
+        else {
+            this.settingsOpen = true;
+        }
         if (getConfig().debug) {
-            console.log("[SpeechOS] Settings modal opened from no-audio warning");
+            console.log("[SpeechOS] Settings opened from no-audio warning", { useExternalSettings: useExternalSettings() });
         }
         await disconnectPromise;
     }
@@ -8611,5 +8741,5 @@ class SpeechOS {
 // Version
 const VERSION = "0.1.0";
 
-export { DefaultTextInputHandler, FormDetector, SUPPORTED_LANGUAGES, SpeechOS, VERSION, addSnippet, addTerm, audioSettings, clearSnippets, clearTranscripts, clearVocabulary, SpeechOS as default, defaultTextInputHandler, deleteSnippet, deleteTerm, deleteTranscript, formDetector, getAudioDeviceId, getAudioInputDevices, getAudioSettings, getClientConfig, getCommands, getInputLanguageCode, getInputLanguageName, getLanguageByCode, getLanguageCode, getLanguageName, getLanguageSettings, getOutputLanguageCode, getOutputLanguageName, getSessionSettings, getSmartFormatEnabled, getSnippetCount, getSnippets, getTextInputHandler, getTranscripts, getVocabulary, getVocabularyCount, getZIndex, hasCommands, isAtSnippetLimit, isAtVocabularyLimit, isSelectedDeviceAvailable, languageSettings, resetAudioSettings, resetClientConfig, resetLanguageSettings, resetTextInputHandler, saveTranscript, setAudioDeviceId, setClientConfig, setInputLanguageCode, setLanguageCode, setOutputLanguageCode, setSmartFormatEnabled, setTextInputHandler, settingsSync, snippetsStore, transcriptStore, updateSnippet, vocabularyStore };
+export { DefaultTextInputHandler, FormDetector, SUPPORTED_LANGUAGES, SpeechOS, VERSION, addSnippet, addTerm, audioSettings, clearSnippets, clearTranscripts, clearVocabulary, SpeechOS as default, defaultTextInputHandler, deleteSnippet, deleteTerm, deleteTranscript, formDetector, getAudioDeviceId, getAudioInputDevices, getAudioSettings, getClientConfig, getCommands, getInputLanguageCode, getInputLanguageName, getLanguageByCode, getLanguageCode, getLanguageName, getLanguageSettings, getOutputLanguageCode, getOutputLanguageName, getSessionSettings, getSmartFormatEnabled, getSnippetCount, getSnippets, getTextInputHandler, getTranscripts, getVocabulary, getVocabularyCount, getZIndex, hasCommands, isAtSnippetLimit, isAtVocabularyLimit, isSelectedDeviceAvailable, languageSettings, resetAudioSettings, resetClientConfig, resetLanguageSettings, resetTextInputHandler, saveTranscript, setAudioDeviceId, setClientConfig, setInputLanguageCode, setLanguageCode, setOutputLanguageCode, setSmartFormatEnabled, setTextInputHandler, settingsSync, snippetsStore, transcriptStore, updateSnippet, useExternalSettings, vocabularyStore };
 //# sourceMappingURL=index.js.map