@lokutor/sdk 1.1.37 → 1.1.40

package/dist/index.d.mts

@@ -20,8 +20,35 @@ declare enum Language {
     ENGLISH = "en",
     SPANISH = "es",
     FRENCH = "fr",
+    GERMAN = "de",
+    ITALIAN = "it",
     PORTUGUESE = "pt",
-    KOREAN = "ko"
+    JAPANESE = "ja",
+    KOREAN = "ko",
+    CHINESE = "zh",
+    ARABIC = "ar",
+    BULGARIAN = "bg",
+    CROATIAN = "hr",
+    CZECH = "cs",
+    DANISH = "da",
+    DUTCH = "nl",
+    ESTONIAN = "et",
+    FINNISH = "fi",
+    GREEK = "el",
+    HINDI = "hi",
+    HUNGARIAN = "hu",
+    INDONESIAN = "id",
+    LATVIAN = "lv",
+    LITHUANIAN = "lt",
+    POLISH = "pl",
+    ROMANIAN = "ro",
+    RUSSIAN = "ru",
+    SLOVAK = "sk",
+    SLOVENIAN = "sl",
+    SWEDISH = "sv",
+    TURKISH = "tr",
+    UKRAINIAN = "uk",
+    VIETNAMESE = "vi"
 }
 /**
  * Audio configuration constants
@@ -687,6 +714,7 @@ declare class ConversationalPanel {
     showError(text: string): void;
     /** Destroy the component, removing all DOM and stopping any active session */
     destroy(): void;
+    private fmt;
     private startTimer;
     private toggleMute;
     private playConnectingSound;

package/dist/index.d.ts

@@ -20,8 +20,35 @@ declare enum Language {
     ENGLISH = "en",
     SPANISH = "es",
     FRENCH = "fr",
+    GERMAN = "de",
+    ITALIAN = "it",
     PORTUGUESE = "pt",
-    KOREAN = "ko"
+    JAPANESE = "ja",
+    KOREAN = "ko",
+    CHINESE = "zh",
+    ARABIC = "ar",
+    BULGARIAN = "bg",
+    CROATIAN = "hr",
+    CZECH = "cs",
+    DANISH = "da",
+    DUTCH = "nl",
+    ESTONIAN = "et",
+    FINNISH = "fi",
+    GREEK = "el",
+    HINDI = "hi",
+    HUNGARIAN = "hu",
+    INDONESIAN = "id",
+    LATVIAN = "lv",
+    LITHUANIAN = "lt",
+    POLISH = "pl",
+    ROMANIAN = "ro",
+    RUSSIAN = "ru",
+    SLOVAK = "sk",
+    SLOVENIAN = "sl",
+    SWEDISH = "sv",
+    TURKISH = "tr",
+    UKRAINIAN = "uk",
+    VIETNAMESE = "vi"
 }
 /**
  * Audio configuration constants
@@ -687,6 +714,7 @@ declare class ConversationalPanel {
     showError(text: string): void;
     /** Destroy the component, removing all DOM and stopping any active session */
     destroy(): void;
+    private fmt;
     private startTimer;
     private toggleMute;
     private playConnectingSound;

package/dist/index.js

@@ -63,8 +63,35 @@ var Language = /* @__PURE__ */ ((Language2) => {
   Language2["ENGLISH"] = "en";
   Language2["SPANISH"] = "es";
   Language2["FRENCH"] = "fr";
+  Language2["GERMAN"] = "de";
+  Language2["ITALIAN"] = "it";
   Language2["PORTUGUESE"] = "pt";
+  Language2["JAPANESE"] = "ja";
   Language2["KOREAN"] = "ko";
+  Language2["CHINESE"] = "zh";
+  Language2["ARABIC"] = "ar";
+  Language2["BULGARIAN"] = "bg";
+  Language2["CROATIAN"] = "hr";
+  Language2["CZECH"] = "cs";
+  Language2["DANISH"] = "da";
+  Language2["DUTCH"] = "nl";
+  Language2["ESTONIAN"] = "et";
+  Language2["FINNISH"] = "fi";
+  Language2["GREEK"] = "el";
+  Language2["HINDI"] = "hi";
+  Language2["HUNGARIAN"] = "hu";
+  Language2["INDONESIAN"] = "id";
+  Language2["LATVIAN"] = "lv";
+  Language2["LITHUANIAN"] = "lt";
+  Language2["POLISH"] = "pl";
+  Language2["ROMANIAN"] = "ro";
+  Language2["RUSSIAN"] = "ru";
+  Language2["SLOVAK"] = "sk";
+  Language2["SLOVENIAN"] = "sl";
+  Language2["SWEDISH"] = "sv";
+  Language2["TURKISH"] = "tr";
+  Language2["UKRAINIAN"] = "uk";
+  Language2["VIETNAMESE"] = "vi";
   return Language2;
 })(Language || {});
 var AUDIO_CONFIG = {
@@ -1335,7 +1362,7 @@ var PANEL_CSS = (
     position: relative;
     width: 100%;
     aspect-ratio: 16 / 9;
-    max-height: 800px;
+    max-height: clamp(400px, 50vh, 800px);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -1344,7 +1371,7 @@ var PANEL_CSS = (
     margin: 0;
     background: var(--cv-bg, #0a0a0a);
     box-shadow: inset 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 100px rgba(0, 0, 0, 0.05);
-    border-radius: 40px;
+    border-radius: clamp(20px, 5vw, 40px);
     overflow: hidden;
   }
   .cv-curtain {
@@ -1484,35 +1511,35 @@ var PANEL_CSS = (
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 1.5rem;
+    gap: clamp(1rem, 2vw, 1.5rem);
     margin-top: auto;
-    padding-bottom: 1.5rem;
+    padding-bottom: clamp(1rem, 2vw, 1.5rem);
     z-index: 20;
   }
   .cv-pill {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: clamp(0.5rem, 1vw, 0.75rem);
     background: var(--cv-ui-bg, rgba(255, 255, 255, 0.03));
     backdrop-filter: blur(30px);
     -webkit-backdrop-filter: blur(30px);
     border: 1px solid var(--cv-ui-border, rgba(255, 255, 255, 0.08));
-    padding: 0.3rem 0.75rem;
+    padding: clamp(0.25rem, 0.5vw, 0.3rem) clamp(0.5rem, 1vw, 0.75rem);
     border-radius: 100px;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
   }
   .cv-btn {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: clamp(0.35rem, 1vw, 0.5rem);
     background: transparent;
     border: none;
     color: var(--cv-text-dim, rgba(255,255,255,0.55));
     font-weight: 600;
-    font-size: 0.75rem;
+    font-size: clamp(0.65rem, 1.5vw, 0.75rem);
     cursor: pointer;
     transition: all 0.2s ease;
-    padding: 0.35rem 0.75rem;
+    padding: clamp(0.25rem, 0.5vw, 0.35rem) clamp(0.5rem, 1vw, 0.75rem);
     border-radius: 50px;
   }
   .cv-btn:hover { color: var(--cv-text, #fff); background: var(--cv-ui-bg, rgba(255,255,255,0.05)); }
@@ -1526,31 +1553,50 @@ var PANEL_CSS = (
   .cv-btn.is-muted { color: var(--cv-accent); }
   .cv-error {
     position: absolute;
-    bottom: 1.25rem;
+    bottom: clamp(0.75rem, 2vw, 1.25rem);
     left: 50%;
     transform: translateX(-50%);
     background: #0a0a0a;
     color: #e0e0e0;
-    padding: 0.75rem 1.5rem;
-    border-radius: 12px;
-    font-size: 0.875rem;
+    padding: clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
+    border-radius: clamp(8px, 1.5vw, 12px);
+    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
     font-weight: 500;
     display: none;
     align-items: center;
-    gap: 0.75rem;
+    gap: clamp(0.5rem, 1vw, 0.75rem);
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
     z-index: 1000;
     border: 1px solid rgba(255, 255, 255, 0.06);
     backdrop-filter: blur(20px);
+    max-width: clamp(280px, 90vw, 400px);
   }
   .cv-error.is-visible { display: flex; }
   .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
-  @media (max-width: 640px) {
-    .cv-panel { aspect-ratio: 3 / 4; max-height: 600px; border-radius: 20px; }
-    .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
-    .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.6rem); }
-    .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2vw, 0.85rem); }
-    .cv-visualizer-wrap { width: clamp(100px, 50vw, 200px); height: clamp(100px, 50vw, 200px); }
+  
+  @media (max-width: 768px) {
+    .cv-panel { max-height: 600px; border-radius: 24px; }
+    .cv-curtain-content { padding: clamp(0.75rem, 3vw, 1.5rem); gap: clamp(0.5rem, 2vw, 1rem); }
+    .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.8rem); }
+    .cv-curtain-desc { font-size: clamp(0.65rem, 2.5vw, 0.95rem); max-width: 90vw; }
+    .cv-curtain-btn { padding: clamp(0.45rem, 1.5vw, 0.75rem) clamp(1rem, 3vw, 2rem); font-size: clamp(0.65rem, 1.5vw, 0.9rem); }
+    .cv-visualizer-wrap { width: clamp(100px, 45vw, 220px); height: clamp(100px, 45vw, 220px); }
+    .cv-title { font-size: clamp(0.9rem, 2vw, 1.5rem); gap: clamp(0.5rem, 1vw, 0.75rem); }
+    .cv-controls { gap: clamp(1rem, 2vw, 1.5rem); padding-bottom: clamp(1rem, 2vw, 1.5rem); }
+    .cv-pill { padding: clamp(0.2rem, 1vw, 0.4rem) clamp(0.5rem, 1.5vw, 0.75rem); font-size: clamp(0.65rem, 1.5vw, 0.75rem); }
+    .cv-btn { padding: clamp(0.25rem, 1vw, 0.35rem) clamp(0.5rem, 1.5vw, 0.75rem); font-size: clamp(0.65rem, 1.5vw, 0.75rem); }
+    .cv-error { padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 2vw, 1.5rem); font-size: clamp(0.75rem, 1.5vw, 0.875rem); }
+  }
+  
+  @media (max-width: 480px) {
+    .cv-panel { aspect-ratio: 3 / 4; max-height: 500px; border-radius: 20px; }
+    .cv-curtain-content { padding: clamp(0.5rem, 2vw, 1rem); gap: clamp(0.4rem, 1.5vw, 0.75rem); }
+    .cv-curtain-title { font-size: clamp(0.9rem, 4.5vw, 1.4rem); }
+    .cv-curtain-desc { font-size: clamp(0.6rem, 2vw, 0.8rem); }
+    .cv-curtain-btn { padding: clamp(0.4rem, 1.2vw, 0.6rem) clamp(0.8rem, 2.5vw, 1.5rem); font-size: clamp(0.6rem, 1.2vw, 0.8rem); }
+    .cv-visualizer-wrap { width: clamp(80px, 40vw, 180px); height: clamp(80px, 40vw, 180px); }
+    .cv-header { padding-top: clamp(1rem, 2vw, 1.5rem); }
+    .cv-controls { gap: clamp(0.8rem, 1.5vw, 1.2rem); padding-bottom: clamp(0.8rem, 1.5vw, 1.2rem); }
   }
 `
 );
@@ -1869,27 +1915,31 @@ var ConversationalPanel = class {
     this.el.remove();
   }
   // ─── internal helpers ────────────────────────────────────
+  fmt(s) {
+    const m = Math.floor(s / 60).toString().padStart(2, "0");
+    const sec = (s % 60).toString().padStart(2, "0");
+    return `${m}:${sec}`;
+  }
   startTimer() {
     let elapsed = 0;
     const maxDur = this.cfg.maxDuration || 300;
     const silentMax = this.cfg.silenceTimeout || 30;
     this._lastSpeechTime = Date.now();
-    this.timerEl.textContent = "00:00";
+    this.timerEl.textContent = this.fmt(maxDur);
     this.timerTicker = window.setInterval(() => {
       elapsed++;
-      const m = Math.floor(elapsed / 60).toString().padStart(2, "0");
-      const s = (elapsed % 60).toString().padStart(2, "0");
-      this.timerEl.textContent = `${m}:${s}`;
+      const remaining = Math.max(0, maxDur - elapsed);
+      this.timerEl.textContent = this.fmt(remaining);
       if (elapsed >= maxDur) {
         this._locked = true;
         this.stop();
-        this.showError("Conversation time limit reached. Refresh to start a new one.");
+        this.showError("Tiempo l\xEDmite alcanzado.");
         return;
       }
       if (Date.now() - this._lastSpeechTime > silentMax * 1e3) {
         this._locked = true;
         this.stop();
-        this.showError("Session ended due to inactivity. Refresh to start a new one.");
+        this.showError("Sesi\xF3n finalizada por inactividad.");
       }
     }, 1e3);
   }

package/dist/index.mjs

@@ -16,8 +16,35 @@ var Language = /* @__PURE__ */ ((Language2) => {
   Language2["ENGLISH"] = "en";
   Language2["SPANISH"] = "es";
   Language2["FRENCH"] = "fr";
+  Language2["GERMAN"] = "de";
+  Language2["ITALIAN"] = "it";
   Language2["PORTUGUESE"] = "pt";
+  Language2["JAPANESE"] = "ja";
   Language2["KOREAN"] = "ko";
+  Language2["CHINESE"] = "zh";
+  Language2["ARABIC"] = "ar";
+  Language2["BULGARIAN"] = "bg";
+  Language2["CROATIAN"] = "hr";
+  Language2["CZECH"] = "cs";
+  Language2["DANISH"] = "da";
+  Language2["DUTCH"] = "nl";
+  Language2["ESTONIAN"] = "et";
+  Language2["FINNISH"] = "fi";
+  Language2["GREEK"] = "el";
+  Language2["HINDI"] = "hi";
+  Language2["HUNGARIAN"] = "hu";
+  Language2["INDONESIAN"] = "id";
+  Language2["LATVIAN"] = "lv";
+  Language2["LITHUANIAN"] = "lt";
+  Language2["POLISH"] = "pl";
+  Language2["ROMANIAN"] = "ro";
+  Language2["RUSSIAN"] = "ru";
+  Language2["SLOVAK"] = "sk";
+  Language2["SLOVENIAN"] = "sl";
+  Language2["SWEDISH"] = "sv";
+  Language2["TURKISH"] = "tr";
+  Language2["UKRAINIAN"] = "uk";
+  Language2["VIETNAMESE"] = "vi";
   return Language2;
 })(Language || {});
 var AUDIO_CONFIG = {
@@ -1288,7 +1315,7 @@ var PANEL_CSS = (
     position: relative;
     width: 100%;
     aspect-ratio: 16 / 9;
-    max-height: 800px;
+    max-height: clamp(400px, 50vh, 800px);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -1297,7 +1324,7 @@ var PANEL_CSS = (
     margin: 0;
     background: var(--cv-bg, #0a0a0a);
     box-shadow: inset 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 100px rgba(0, 0, 0, 0.05);
-    border-radius: 40px;
+    border-radius: clamp(20px, 5vw, 40px);
     overflow: hidden;
   }
   .cv-curtain {
@@ -1437,35 +1464,35 @@ var PANEL_CSS = (
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 1.5rem;
+    gap: clamp(1rem, 2vw, 1.5rem);
     margin-top: auto;
-    padding-bottom: 1.5rem;
+    padding-bottom: clamp(1rem, 2vw, 1.5rem);
     z-index: 20;
   }
   .cv-pill {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: clamp(0.5rem, 1vw, 0.75rem);
     background: var(--cv-ui-bg, rgba(255, 255, 255, 0.03));
     backdrop-filter: blur(30px);
     -webkit-backdrop-filter: blur(30px);
     border: 1px solid var(--cv-ui-border, rgba(255, 255, 255, 0.08));
-    padding: 0.3rem 0.75rem;
+    padding: clamp(0.25rem, 0.5vw, 0.3rem) clamp(0.5rem, 1vw, 0.75rem);
     border-radius: 100px;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
   }
   .cv-btn {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: clamp(0.35rem, 1vw, 0.5rem);
     background: transparent;
     border: none;
     color: var(--cv-text-dim, rgba(255,255,255,0.55));
     font-weight: 600;
-    font-size: 0.75rem;
+    font-size: clamp(0.65rem, 1.5vw, 0.75rem);
     cursor: pointer;
     transition: all 0.2s ease;
-    padding: 0.35rem 0.75rem;
+    padding: clamp(0.25rem, 0.5vw, 0.35rem) clamp(0.5rem, 1vw, 0.75rem);
     border-radius: 50px;
   }
   .cv-btn:hover { color: var(--cv-text, #fff); background: var(--cv-ui-bg, rgba(255,255,255,0.05)); }
@@ -1479,31 +1506,50 @@ var PANEL_CSS = (
   .cv-btn.is-muted { color: var(--cv-accent); }
   .cv-error {
     position: absolute;
-    bottom: 1.25rem;
+    bottom: clamp(0.75rem, 2vw, 1.25rem);
     left: 50%;
     transform: translateX(-50%);
     background: #0a0a0a;
     color: #e0e0e0;
-    padding: 0.75rem 1.5rem;
-    border-radius: 12px;
-    font-size: 0.875rem;
+    padding: clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
+    border-radius: clamp(8px, 1.5vw, 12px);
+    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
     font-weight: 500;
     display: none;
     align-items: center;
-    gap: 0.75rem;
+    gap: clamp(0.5rem, 1vw, 0.75rem);
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
     z-index: 1000;
     border: 1px solid rgba(255, 255, 255, 0.06);
     backdrop-filter: blur(20px);
+    max-width: clamp(280px, 90vw, 400px);
   }
   .cv-error.is-visible { display: flex; }
   .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
-  @media (max-width: 640px) {
-    .cv-panel { aspect-ratio: 3 / 4; max-height: 600px; border-radius: 20px; }
-    .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
-    .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.6rem); }
-    .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2vw, 0.85rem); }
-    .cv-visualizer-wrap { width: clamp(100px, 50vw, 200px); height: clamp(100px, 50vw, 200px); }
+  
+  @media (max-width: 768px) {
+    .cv-panel { max-height: 600px; border-radius: 24px; }
+    .cv-curtain-content { padding: clamp(0.75rem, 3vw, 1.5rem); gap: clamp(0.5rem, 2vw, 1rem); }
+    .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.8rem); }
+    .cv-curtain-desc { font-size: clamp(0.65rem, 2.5vw, 0.95rem); max-width: 90vw; }
+    .cv-curtain-btn { padding: clamp(0.45rem, 1.5vw, 0.75rem) clamp(1rem, 3vw, 2rem); font-size: clamp(0.65rem, 1.5vw, 0.9rem); }
+    .cv-visualizer-wrap { width: clamp(100px, 45vw, 220px); height: clamp(100px, 45vw, 220px); }
+    .cv-title { font-size: clamp(0.9rem, 2vw, 1.5rem); gap: clamp(0.5rem, 1vw, 0.75rem); }
+    .cv-controls { gap: clamp(1rem, 2vw, 1.5rem); padding-bottom: clamp(1rem, 2vw, 1.5rem); }
+    .cv-pill { padding: clamp(0.2rem, 1vw, 0.4rem) clamp(0.5rem, 1.5vw, 0.75rem); font-size: clamp(0.65rem, 1.5vw, 0.75rem); }
+    .cv-btn { padding: clamp(0.25rem, 1vw, 0.35rem) clamp(0.5rem, 1.5vw, 0.75rem); font-size: clamp(0.65rem, 1.5vw, 0.75rem); }
+    .cv-error { padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 2vw, 1.5rem); font-size: clamp(0.75rem, 1.5vw, 0.875rem); }
+  }
+  
+  @media (max-width: 480px) {
+    .cv-panel { aspect-ratio: 3 / 4; max-height: 500px; border-radius: 20px; }
+    .cv-curtain-content { padding: clamp(0.5rem, 2vw, 1rem); gap: clamp(0.4rem, 1.5vw, 0.75rem); }
+    .cv-curtain-title { font-size: clamp(0.9rem, 4.5vw, 1.4rem); }
+    .cv-curtain-desc { font-size: clamp(0.6rem, 2vw, 0.8rem); }
+    .cv-curtain-btn { padding: clamp(0.4rem, 1.2vw, 0.6rem) clamp(0.8rem, 2.5vw, 1.5rem); font-size: clamp(0.6rem, 1.2vw, 0.8rem); }
+    .cv-visualizer-wrap { width: clamp(80px, 40vw, 180px); height: clamp(80px, 40vw, 180px); }
+    .cv-header { padding-top: clamp(1rem, 2vw, 1.5rem); }
+    .cv-controls { gap: clamp(0.8rem, 1.5vw, 1.2rem); padding-bottom: clamp(0.8rem, 1.5vw, 1.2rem); }
   }
 `
 );
@@ -1822,27 +1868,31 @@ var ConversationalPanel = class {
     this.el.remove();
   }
   // ─── internal helpers ────────────────────────────────────
+  fmt(s) {
+    const m = Math.floor(s / 60).toString().padStart(2, "0");
+    const sec = (s % 60).toString().padStart(2, "0");
+    return `${m}:${sec}`;
+  }
   startTimer() {
     let elapsed = 0;
     const maxDur = this.cfg.maxDuration || 300;
     const silentMax = this.cfg.silenceTimeout || 30;
     this._lastSpeechTime = Date.now();
-    this.timerEl.textContent = "00:00";
+    this.timerEl.textContent = this.fmt(maxDur);
     this.timerTicker = window.setInterval(() => {
       elapsed++;
-      const m = Math.floor(elapsed / 60).toString().padStart(2, "0");
-      const s = (elapsed % 60).toString().padStart(2, "0");
-      this.timerEl.textContent = `${m}:${s}`;
+      const remaining = Math.max(0, maxDur - elapsed);
+      this.timerEl.textContent = this.fmt(remaining);
       if (elapsed >= maxDur) {
         this._locked = true;
         this.stop();
-        this.showError("Conversation time limit reached. Refresh to start a new one.");
+        this.showError("Tiempo l\xEDmite alcanzado.");
         return;
       }
       if (Date.now() - this._lastSpeechTime > silentMax * 1e3) {
         this._locked = true;
         this.stop();
-        this.showError("Session ended due to inactivity. Refresh to start a new one.");
+        this.showError("Sesi\xF3n finalizada por inactividad.");
       }
     }, 1e3);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lokutor/sdk",
 
-  "version": "1.1.37",
+  "version": "1.1.40",
   "description": "JavaScript/TypeScript SDK for Lokutor Real-time Voice AI",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/conversational-panel.ts

@@ -3,7 +3,7 @@ const PANEL_CSS = /*css*/ `
     position: relative;
     width: 100%;
     aspect-ratio: 16 / 9;
-    max-height: 800px;
+    max-height: clamp(400px, 50vh, 800px);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -12,7 +12,7 @@ const PANEL_CSS = /*css*/ `
     margin: 0;
     background: var(--cv-bg, #0a0a0a);
     box-shadow: inset 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 100px rgba(0, 0, 0, 0.05);
-    border-radius: 40px;
+    border-radius: clamp(20px, 5vw, 40px);
     overflow: hidden;
   }
   .cv-curtain {
@@ -152,35 +152,35 @@ const PANEL_CSS = /*css*/ `
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 1.5rem;
+    gap: clamp(1rem, 2vw, 1.5rem);
     margin-top: auto;
-    padding-bottom: 1.5rem;
+    padding-bottom: clamp(1rem, 2vw, 1.5rem);
     z-index: 20;
   }
   .cv-pill {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: clamp(0.5rem, 1vw, 0.75rem);
     background: var(--cv-ui-bg, rgba(255, 255, 255, 0.03));
     backdrop-filter: blur(30px);
     -webkit-backdrop-filter: blur(30px);
     border: 1px solid var(--cv-ui-border, rgba(255, 255, 255, 0.08));
-    padding: 0.3rem 0.75rem;
+    padding: clamp(0.25rem, 0.5vw, 0.3rem) clamp(0.5rem, 1vw, 0.75rem);
     border-radius: 100px;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
   }
   .cv-btn {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: clamp(0.35rem, 1vw, 0.5rem);
     background: transparent;
     border: none;
     color: var(--cv-text-dim, rgba(255,255,255,0.55));
     font-weight: 600;
-    font-size: 0.75rem;
+    font-size: clamp(0.65rem, 1.5vw, 0.75rem);
     cursor: pointer;
     transition: all 0.2s ease;
-    padding: 0.35rem 0.75rem;
+    padding: clamp(0.25rem, 0.5vw, 0.35rem) clamp(0.5rem, 1vw, 0.75rem);
     border-radius: 50px;
   }
   .cv-btn:hover { color: var(--cv-text, #fff); background: var(--cv-ui-bg, rgba(255,255,255,0.05)); }
@@ -194,31 +194,50 @@ const PANEL_CSS = /*css*/ `
   .cv-btn.is-muted { color: var(--cv-accent); }
   .cv-error {
     position: absolute;
-    bottom: 1.25rem;
+    bottom: clamp(0.75rem, 2vw, 1.25rem);
     left: 50%;
     transform: translateX(-50%);
     background: #0a0a0a;
     color: #e0e0e0;
-    padding: 0.75rem 1.5rem;
-    border-radius: 12px;
-    font-size: 0.875rem;
+    padding: clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
+    border-radius: clamp(8px, 1.5vw, 12px);
+    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
     font-weight: 500;
     display: none;
     align-items: center;
-    gap: 0.75rem;
+    gap: clamp(0.5rem, 1vw, 0.75rem);
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
     z-index: 1000;
     border: 1px solid rgba(255, 255, 255, 0.06);
     backdrop-filter: blur(20px);
+    max-width: clamp(280px, 90vw, 400px);
   }
   .cv-error.is-visible { display: flex; }
   .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
-  @media (max-width: 640px) {
-    .cv-panel { aspect-ratio: 3 / 4; max-height: 600px; border-radius: 20px; }
-    .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
-    .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.6rem); }
-    .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2vw, 0.85rem); }
-    .cv-visualizer-wrap { width: clamp(100px, 50vw, 200px); height: clamp(100px, 50vw, 200px); }
+  
+  @media (max-width: 768px) {
+    .cv-panel { max-height: 600px; border-radius: 24px; }
+    .cv-curtain-content { padding: clamp(0.75rem, 3vw, 1.5rem); gap: clamp(0.5rem, 2vw, 1rem); }
+    .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.8rem); }
+    .cv-curtain-desc { font-size: clamp(0.65rem, 2.5vw, 0.95rem); max-width: 90vw; }
+    .cv-curtain-btn { padding: clamp(0.45rem, 1.5vw, 0.75rem) clamp(1rem, 3vw, 2rem); font-size: clamp(0.65rem, 1.5vw, 0.9rem); }
+    .cv-visualizer-wrap { width: clamp(100px, 45vw, 220px); height: clamp(100px, 45vw, 220px); }
+    .cv-title { font-size: clamp(0.9rem, 2vw, 1.5rem); gap: clamp(0.5rem, 1vw, 0.75rem); }
+    .cv-controls { gap: clamp(1rem, 2vw, 1.5rem); padding-bottom: clamp(1rem, 2vw, 1.5rem); }
+    .cv-pill { padding: clamp(0.2rem, 1vw, 0.4rem) clamp(0.5rem, 1.5vw, 0.75rem); font-size: clamp(0.65rem, 1.5vw, 0.75rem); }
+    .cv-btn { padding: clamp(0.25rem, 1vw, 0.35rem) clamp(0.5rem, 1.5vw, 0.75rem); font-size: clamp(0.65rem, 1.5vw, 0.75rem); }
+    .cv-error { padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 2vw, 1.5rem); font-size: clamp(0.75rem, 1.5vw, 0.875rem); }
+  }
+  
+  @media (max-width: 480px) {
+    .cv-panel { aspect-ratio: 3 / 4; max-height: 500px; border-radius: 20px; }
+    .cv-curtain-content { padding: clamp(0.5rem, 2vw, 1rem); gap: clamp(0.4rem, 1.5vw, 0.75rem); }
+    .cv-curtain-title { font-size: clamp(0.9rem, 4.5vw, 1.4rem); }
+    .cv-curtain-desc { font-size: clamp(0.6rem, 2vw, 0.8rem); }
+    .cv-curtain-btn { padding: clamp(0.4rem, 1.2vw, 0.6rem) clamp(0.8rem, 2.5vw, 1.5rem); font-size: clamp(0.6rem, 1.2vw, 0.8rem); }
+    .cv-visualizer-wrap { width: clamp(80px, 40vw, 180px); height: clamp(80px, 40vw, 180px); }
+    .cv-header { padding-top: clamp(1rem, 2vw, 1.5rem); }
+    .cv-controls { gap: clamp(0.8rem, 1.5vw, 1.2rem); padding-bottom: clamp(0.8rem, 1.5vw, 1.2rem); }
   }
 `;
 
@@ -601,31 +620,34 @@ export class ConversationalPanel {
 
   // ─── internal helpers ────────────────────────────────────
 
+  private fmt(s: number): string {
+    const m = Math.floor(s / 60).toString().padStart(2, '0');
+    const sec = (s % 60).toString().padStart(2, '0');
+    return `${m}:${sec}`;
+  }
+
   private startTimer() {
     let elapsed = 0;
     const maxDur = this.cfg.maxDuration || 300;
     const silentMax = this.cfg.silenceTimeout || 30;
     this._lastSpeechTime = Date.now();
-    this.timerEl.textContent = '00:00';
+    this.timerEl.textContent = this.fmt(maxDur);
     this.timerTicker = window.setInterval(() => {
       elapsed++;
-      const m = Math.floor(elapsed / 60).toString().padStart(2, '0');
-      const s = (elapsed % 60).toString().padStart(2, '0');
-      this.timerEl.textContent = `${m}:${s}`;
+      const remaining = Math.max(0, maxDur - elapsed);
+      this.timerEl.textContent = this.fmt(remaining);
 
-      // Check max duration
       if (elapsed >= maxDur) {
         this._locked = true;
         this.stop();
-        this.showError('Conversation time limit reached. Refresh to start a new one.');
+        this.showError('Tiempo límite alcanzado.');
         return;
       }
 
-      // Check silence timeout
       if (Date.now() - this._lastSpeechTime > silentMax * 1000) {
         this._locked = true;
         this.stop();
-        this.showError('Session ended due to inactivity. Refresh to start a new one.');
+        this.showError('Sesión finalizada por inactividad.');
       }
     }, 1000);
   }

package/src/types.ts

@@ -24,8 +24,35 @@ export enum Language {
   ENGLISH = "en",
   SPANISH = "es",
   FRENCH = "fr",
+  GERMAN = "de",
+  ITALIAN = "it",
   PORTUGUESE = "pt",
+  JAPANESE = "ja",
   KOREAN = "ko",
+  CHINESE = "zh",
+  ARABIC = "ar",
+  BULGARIAN = "bg",
+  CROATIAN = "hr",
+  CZECH = "cs",
+  DANISH = "da",
+  DUTCH = "nl",
+  ESTONIAN = "et",
+  FINNISH = "fi",
+  GREEK = "el",
+  HINDI = "hi",
+  HUNGARIAN = "hu",
+  INDONESIAN = "id",
+  LATVIAN = "lv",
+  LITHUANIAN = "lt",
+  POLISH = "pl",
+  ROMANIAN = "ro",
+  RUSSIAN = "ru",
+  SLOVAK = "sk",
+  SLOVENIAN = "sl",
+  SWEDISH = "sv",
+  TURKISH = "tr",
+  UKRAINIAN = "uk",
+  VIETNAMESE = "vi",
 }
 
 /**