ttp-agent-sdk 2.38.4 → 2.40.0

package/dist/demos/widget-customization.html

@@ -13,143 +13,370 @@
 
     body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-      background: #f9fafb;
+      background: #0f0f1a;
       min-height: 100vh;
       overflow-x: hidden;
+      color: #e2e8f0;
     }
 
     .header {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
       color: white;
-      padding: 40px 20px;
-      text-align: center;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      padding: 20px 24px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid rgba(255,255,255,0.06);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
     }
 
     .header h1 {
-      font-size: 36px;
+      font-size: 20px;
       font-weight: 700;
-      margin-bottom: 8px;
+      letter-spacing: -0.3px;
     }
 
     .header p {
-      font-size: 18px;
-      opacity: 0.9;
+      font-size: 14px;
+      opacity: 0.6;
+      display: none;
     }
 
     .back-link {
-      position: absolute;
-      top: 20px;
-      left: 20px;
-      color: white;
+      color: rgba(255,255,255,0.7);
       text-decoration: none;
       font-weight: 500;
-      padding: 8px 16px;
-      background: rgba(255, 255, 255, 0.2);
+      font-size: 14px;
+      padding: 6px 14px;
+      background: rgba(255, 255, 255, 0.08);
       border-radius: 8px;
-      transition: background 0.2s;
+      transition: all 0.2s;
+      border: 1px solid rgba(255,255,255,0.06);
     }
 
     .back-link:hover {
-      background: rgba(255, 255, 255, 0.3);
+      background: rgba(255, 255, 255, 0.14);
+      color: white;
     }
 
     .container {
-      max-width: 1800px;
+      max-width: 1600px;
       margin: 0 auto;
-      padding: 40px 20px;
+      padding: 20px;
       display: grid;
-      grid-template-columns: minmax(600px, 1fr) 420px;
-      gap: 24px;
+      grid-template-columns: minmax(0, 1fr) 360px;
+      gap: 16px;
       align-items: start;
+      min-height: calc(100vh - 62px);
+      position: relative;
+      z-index: 20;
     }
 
     .preview-section {
-      background: white;
+      background: #1a1a2e;
       border-radius: 16px;
-      padding: 24px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      padding: 0;
+      border: 1px solid rgba(255,255,255,0.06);
       min-height: 600px;
-      height: 100%;
+      height: fit-content;
       position: relative;
       overflow: visible;
       display: flex;
       flex-direction: column;
     }
 
-    .preview-section h2 {
-      font-size: 24px;
-      font-weight: 700;
-      color: #111827;
-      margin-bottom: 20px;
+    .preview-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid rgba(255,255,255,0.06);
       flex-shrink: 0;
     }
 
+    .preview-header h2 {
+      font-size: 15px;
+      font-weight: 600;
+      color: #94a3b8;
+      text-transform: uppercase;
+      letter-spacing: 0.8px;
+    }
+
+    .device-toggle {
+      display: flex;
+      background: rgba(255,255,255,0.06);
+      border-radius: 10px;
+      padding: 3px;
+      gap: 2px;
+    }
+
+    .device-toggle-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 7px 14px;
+      border: none;
+      border-radius: 8px;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+      background: transparent;
+      color: #94a3b8;
+    }
+
+    .device-toggle-btn.active {
+      background: #7c3aed;
+      color: white;
+      box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
+    }
+
+    .device-toggle-btn:not(.active):hover {
+      background: rgba(255,255,255,0.06);
+      color: #e2e8f0;
+    }
+
+    .device-toggle-btn svg {
+      width: 16px;
+      height: 16px;
+    }
+
     .preview-area {
-      background: #f3f4f6;
-      border-radius: 12px;
-      height: 600px;
+      background: linear-gradient(180deg, #0f0f1a 0%, #141425 100%);
+      border-radius: 0 0 16px 16px;
+      min-height: 650px;
       position: relative;
-      overflow: scroll !important;
-      border: 2px dashed #d1d5db;
-      padding: 60px;
+      overflow: visible;
+      padding: 40px;
       box-sizing: border-box;
-      /* Ensure enough space for widget (360px width + margins) */
-      min-width: 500px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       flex: 1;
-      /* Force scrollbar to always be visible */
-      scrollbar-width: auto;
-      -webkit-overflow-scrolling: touch;
     }
-    
-    /* Inner container that's taller than the preview area to enable scrolling */
-    .preview-area > div {
-      min-height: 800px;
+
+    .preview-area.desktop-mode {
+      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+      padding: 30px;
+    }
+
+    .preview-area.mobile-mode {
+      background: linear-gradient(180deg, #0f0f1a 0%, #141425 100%);
+      padding: 40px 20px;
+    }
+
+    .device-frame-desktop {
+      width: 100%;
+      min-height: 560px;
       position: relative;
+      border-radius: 12px;
+      background: white;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.12);
+      overflow: hidden;
     }
 
-    .customization-panel {
+    .desktop-chrome {
+      background: #f1f3f5;
+      border-radius: 12px 12px 0 0;
+      padding: 10px 16px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      border-bottom: 1px solid #dee2e6;
+    }
+
+    .desktop-dots {
+      display: flex;
+      gap: 6px;
+    }
+
+    .desktop-dots span {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+    }
+
+    .desktop-dots span:nth-child(1) { background: #ff5f57; }
+    .desktop-dots span:nth-child(2) { background: #febc2e; }
+    .desktop-dots span:nth-child(3) { background: #28c840; }
+
+    .desktop-url-bar {
+      flex: 1;
+      background: white;
+      border-radius: 6px;
+      padding: 5px 12px;
+      font-size: 12px;
+      color: #6b7280;
+      border: 1px solid #dee2e6;
+    }
+
+    .desktop-content {
+      height: 700px;
+      position: relative;
+      background: white;
+      border-radius: 0 0 12px 12px;
+      overflow: hidden;
+    }
+
+    .desktop-placeholder {
+      padding: 40px;
+      color: #9ca3af;
+    }
+
+    .desktop-placeholder h3 {
+      font-size: 18px;
+      color: #d1d5db;
+      margin-bottom: 12px;
+    }
+
+    .desktop-placeholder p {
+      font-size: 14px;
+      line-height: 1.6;
+      color: #d1d5db;
+    }
+
+    .desktop-placeholder .placeholder-line {
+      height: 10px;
+      background: #f3f4f6;
+      border-radius: 4px;
+      margin-bottom: 10px;
+    }
+
+    .desktop-placeholder .placeholder-line:nth-child(1) { width: 70%; }
+    .desktop-placeholder .placeholder-line:nth-child(2) { width: 100%; }
+    .desktop-placeholder .placeholder-line:nth-child(3) { width: 85%; }
+    .desktop-placeholder .placeholder-line:nth-child(4) { width: 60%; }
+    .desktop-placeholder .placeholder-line:nth-child(5) { width: 90%; }
+
+    .device-frame-mobile {
+      width: 375px;
+      height: 750px;
+      background: #1c1c1e;
+      border-radius: 44px;
+      padding: 12px;
+      box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.1);
+      position: relative;
+    }
+
+    .phone-notch {
+      position: absolute;
+      top: 12px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 120px;
+      height: 28px;
+      background: #1c1c1e;
+      border-radius: 0 0 16px 16px;
+      z-index: 10;
+    }
+
+    .phone-screen {
+      width: 100%;
+      height: 100%;
+      border-radius: 34px;
       background: white;
+      overflow: visible;
+      position: relative;
+    }
+
+    .phone-status-bar {
+      height: 44px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 24px;
+      font-size: 13px;
+      font-weight: 600;
+      color: #1c1c1e;
+    }
+
+    .phone-content {
+      height: calc(100% - 44px);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .phone-placeholder {
+      padding: 20px;
+      color: #9ca3af;
+    }
+
+    .phone-placeholder .placeholder-line {
+      height: 8px;
+      background: #f3f4f6;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+
+    .phone-placeholder .placeholder-line:nth-child(1) { width: 60%; }
+    .phone-placeholder .placeholder-line:nth-child(2) { width: 100%; }
+    .phone-placeholder .placeholder-line:nth-child(3) { width: 75%; }
+    .phone-placeholder .placeholder-line:nth-child(4) { width: 50%; }
+
+    .device-frame-mobile .mock-widget {
+      transform: scale(0.95);
+      transform-origin: bottom right;
+    }
+
+    .customization-panel {
+      background: #1a1a2e;
       border-radius: 16px;
-      padding: 24px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      overflow-y: visible;
+      border: 1px solid rgba(255,255,255,0.06);
+      overflow-y: auto;
       overflow-x: hidden;
       display: flex;
       flex-direction: column;
       position: relative;
-      min-height: fit-content;
+      max-height: calc(100vh - 102px);
+      position: sticky;
+      top: 82px;
     }
-    
-    /* Ensure code output is always visible at bottom */
-    .customization-panel > div:last-child {
-      margin-top: auto;
-      padding-top: 16px;
-      border-top: 1px solid #e5e7eb;
+
+    .customization-panel-header {
+      padding: 16px 20px;
+      border-bottom: 1px solid rgba(255,255,255,0.06);
       flex-shrink: 0;
     }
-    
-    /* Removed custom scrollbars - using main window scroll only */
 
-    .customization-panel h2 {
-      font-size: 20px;
-      font-weight: 700;
-      color: #111827;
-      margin-bottom: 20px;
-      padding-bottom: 12px;
-      border-bottom: 2px solid #e5e7eb;
-      flex-shrink: 0;
+    .customization-panel-header h2 {
+      font-size: 15px;
+      font-weight: 600;
+      color: #94a3b8;
+      text-transform: uppercase;
+      letter-spacing: 0.8px;
+    }
+
+    .customization-panel-body {
+      padding: 16px 20px;
+      flex: 1;
+      overflow-y: auto;
     }
 
     .customization-group {
-      margin-bottom: 24px;
+      margin-bottom: 20px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid rgba(255,255,255,0.04);
+    }
+
+    .customization-group:last-child {
+      border-bottom: none;
     }
 
     .customization-group h3 {
-      font-size: 16px;
+      font-size: 13px;
       font-weight: 600;
-      color: #374151;
+      color: #94a3b8;
       margin-bottom: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.6px;
       display: flex;
       align-items: center;
       gap: 8px;
@@ -157,22 +384,22 @@
 
     .customization-group h3::before {
       content: '';
-      width: 4px;
-      height: 16px;
-      background: #667eea;
+      width: 3px;
+      height: 14px;
+      background: #7c3aed;
       border-radius: 2px;
     }
 
     .control-item {
-      margin-bottom: 16px;
+      margin-bottom: 12px;
     }
 
     .control-item label {
       display: block;
-      font-size: 14px;
+      font-size: 13px;
       font-weight: 500;
-      color: #6b7280;
-      margin-bottom: 6px;
+      color: #94a3b8;
+      margin-bottom: 5px;
     }
 
     .control-item input[type="text"],
@@ -180,156 +407,163 @@
     .control-item select {
       width: 100%;
       padding: 8px 12px;
-      border: 1px solid #d1d5db;
+      border: 1px solid rgba(255,255,255,0.1);
       border-radius: 8px;
-      font-size: 14px;
+      font-size: 13px;
       transition: border-color 0.2s;
+      background: rgba(255,255,255,0.04);
+      color: #e2e8f0;
     }
 
     .control-item input[type="text"]:focus,
     .control-item input[type="number"]:focus,
     .control-item select:focus {
       outline: none;
-      border-color: #667eea;
+      border-color: #7c3aed;
+      background: rgba(124, 58, 237, 0.06);
+    }
+
+    .control-item select option {
+      background: #1a1a2e;
+      color: #e2e8f0;
     }
 
     .control-item input[type="color"] {
       width: 100%;
-      height: 40px;
-      border: 1px solid #d1d5db;
+      height: 36px;
+      border: 1px solid rgba(255,255,255,0.1);
       border-radius: 8px;
       cursor: pointer;
+      background: rgba(255,255,255,0.04);
     }
 
     .control-item input[type="checkbox"] {
       margin-right: 8px;
+      accent-color: #7c3aed;
     }
 
     .button-group {
       display: flex;
-      gap: 12px;
-      margin-top: 24px;
+      gap: 8px;
       flex-shrink: 0;
     }
 
     .btn {
       flex: 1;
-      padding: 12px 24px;
+      padding: 10px 16px;
       border: none;
       border-radius: 8px;
-      font-size: 14px;
+      font-size: 13px;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.2s;
     }
 
     .btn-primary {
-      background: #667eea;
+      background: #7c3aed;
       color: white;
     }
 
     .btn-primary:hover {
-      background: #5568d3;
+      background: #6d28d9;
     }
 
     .btn-secondary {
-      background: #e5e7eb;
-      color: #374151;
+      background: rgba(255,255,255,0.06);
+      color: #94a3b8;
+      border: 1px solid rgba(255,255,255,0.08);
     }
 
     .btn-secondary:hover {
-      background: #d1d5db;
+      background: rgba(255,255,255,0.1);
+      color: #e2e8f0;
     }
 
     .info-box {
-      background: #eff6ff;
-      border-left: 4px solid #3b82f6;
-      padding: 16px;
+      background: rgba(124, 58, 237, 0.06);
+      border-left: 3px solid #7c3aed;
+      padding: 12px 14px;
       border-radius: 8px;
-      margin-bottom: 24px;
+      margin-bottom: 16px;
     }
 
     .info-box p {
-      font-size: 14px;
-      color: #1e40af;
-      line-height: 1.6;
+      font-size: 12px;
+      color: #a78bfa;
+      line-height: 1.5;
     }
 
     .code-output {
-      background: #1f2937;
-      color: #f9fafb;
-      padding: 20px;
-      border-radius: 8px;
-      font-family: 'Monaco', 'Courier New', monospace;
-      font-size: 13px;
+      background: #0f0f1a;
+      color: #e2e8f0;
+      padding: 16px;
+      border-radius: 10px;
+      font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
+      font-size: 12px;
       overflow-x: auto;
-      overflow-y: visible;
+      overflow-y: auto;
       flex-shrink: 0;
       position: relative;
-      border: 2px solid #374151;
-      min-height: 400px;
-      height: auto;
-      max-height: none;
+      border: 1px solid rgba(255,255,255,0.06);
+      max-height: 300px;
     }
-    
+
     .code-output pre {
       white-space: pre-wrap;
       word-wrap: break-word;
       margin: 0;
       padding: 0;
-      line-height: 1.6;
-      font-size: 13px;
+      line-height: 1.5;
+      font-size: 12px;
     }
-    
+
     .code-output h3 {
-      margin-bottom: 16px;
-      font-size: 16px;
-      font-weight: 700;
+      margin-bottom: 10px;
+      font-size: 12px;
+      font-weight: 600;
+      color: #94a3b8;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
     }
-    
+
     .code-output::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
+      width: 6px;
+      height: 6px;
     }
-    
+
     .code-output::-webkit-scrollbar-track {
-      background: #374151;
-      border-radius: 4px;
+      background: transparent;
     }
-    
+
     .code-output::-webkit-scrollbar-thumb {
-      background: #6b7280;
-      border-radius: 4px;
-    }
-    
-    .code-output::-webkit-scrollbar-thumb:hover {
-      background: #9ca3af;
+      background: rgba(255,255,255,0.1);
+      border-radius: 3px;
     }
 
-    .code-output pre {
-      margin: 0;
-      white-space: pre-wrap;
-      word-wrap: break-word;
+    .code-output::-webkit-scrollbar-thumb:hover {
+      background: rgba(255,255,255,0.2);
     }
 
     .element-highlight {
-      outline: 2px solid #667eea;
+      outline: 2px solid #7c3aed;
       outline-offset: 2px;
       cursor: pointer;
       transition: outline-color 0.2s;
     }
 
     .element-highlight:hover {
-      outline-color: #ef4444;
+      outline-color: #a78bfa;
+    }
+
+    /* Real SDK widget - visible above page content */
+    #ttp-widget-shadow-host {
+      z-index: 9999 !important;
     }
 
     .mock-widget {
       position: absolute;
-      /* Position is set dynamically via updateMockWidgetPosition() */
       z-index: 1000;
-      /* Ensure widget doesn't get clipped */
-      min-width: 360px;
-      /* Ensure widget is fully visible - adjust position if needed */
+      min-width: 200px;
       transform: translateZ(0);
       cursor: pointer;
       padding: 4px;
@@ -338,115 +572,289 @@
     }
 
     .mock-widget:hover {
-      background: rgba(102, 126, 234, 0.05);
+      background: rgba(124, 58, 237, 0.05);
     }
 
     .mock-widget.element-highlight {
-      background: rgba(102, 126, 234, 0.1);
-      outline: 2px solid #667eea;
+      background: rgba(124, 58, 237, 0.08);
+      outline: 2px solid #7c3aed;
       outline-offset: 4px;
     }
-    
-    /* Ensure panel has enough space and is fully visible */
+
     .mock-widget-panel {
       position: relative;
-      margin-bottom: 100px; /* Extra space for button below */
+      margin-bottom: 12px;
     }
-    
-    /* Ensure preview section doesn't clip content */
+
     .preview-section {
       overflow-x: visible;
       overflow-y: visible;
     }
-    
-    /* Custom scrollbar styling for preview area */
-    .preview-area::-webkit-scrollbar {
-      width: 14px;
-      height: 14px;
-    }
-    
-    .preview-area::-webkit-scrollbar-track {
-      background: #e5e7eb;
-      border-radius: 7px;
-      margin: 4px;
-    }
-    
-    .preview-area::-webkit-scrollbar-thumb {
-      background: #6b7280;
-      border-radius: 7px;
-      border: 2px solid #e5e7eb;
-    }
-    
-    .preview-area::-webkit-scrollbar-thumb:hover {
-      background: #4b5563;
-    }
-    
-    .preview-area::-webkit-scrollbar-corner {
-      background: #e5e7eb;
-    }
-    
-    /* Firefox scrollbar */
-    .preview-area {
-      scrollbar-width: auto;
-      scrollbar-color: #6b7280 #e5e7eb;
-    }
 
-    @media (max-width: 1400px) {
+    @media (max-width: 860px) {
       .container {
-        grid-template-columns: 1fr 380px;
+        grid-template-columns: 1fr;
+        gap: 16px;
       }
-      
+
+      .customization-panel {
+        max-height: none;
+        position: static;
+      }
+
       .preview-area {
-        padding: 20px;
-        min-width: 450px;
+        min-height: 500px;
       }
-      
-      /* Position is set dynamically via updateMockWidgetPosition() */
     }
 
-    @media (max-width: 1200px) {
+    @media (max-width: 768px) {
+      .header {
+        padding: 12px 16px;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .header-left {
+        flex-direction: column;
+        gap: 8px;
+      }
+
       .container {
-        grid-template-columns: 1fr;
+        padding: 12px;
       }
 
-      .customization-panel {
-        max-height: none;
+      .device-frame-mobile {
+        width: 320px;
+        height: 640px;
+        border-radius: 36px;
+        padding: 10px;
       }
-      
+
+      .phone-screen {
+        border-radius: 28px;
+      }
+
       .preview-area {
-        min-height: 500px;
+        padding: 20px 10px;
+        min-height: 400px;
       }
+
+      .device-toggle-btn {
+        padding: 6px 10px;
+        font-size: 12px;
+      }
+
+      .device-toggle-btn span.device-label {
+        display: none;
+      }
+
+      .customization-panel-body {
+        padding: 12px 16px;
+      }
+
+      .code-output {
+        max-height: 200px;
+      }
+    }
+
+    /* Scrollbar for customization panel */
+    /* Quick Themes */
+    .quick-themes {
+      margin-bottom: 16px;
+    }
+    .quick-themes h3 {
+      font-size: 11px;
+      font-weight: 600;
+      color: #94a3b8;
+      text-transform: uppercase;
+      letter-spacing: 0.8px;
+      margin-bottom: 10px;
+    }
+    .theme-cards {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 8px;
+    }
+    .theme-card {
+      cursor: pointer;
+      border-radius: 10px;
+      border: 2px solid rgba(255,255,255,0.06);
+      overflow: hidden;
+      transition: border-color 0.2s, transform 0.15s;
+      background: #0f0f1a;
+      padding: 0;
+      font-family: inherit;
+      text-align: left;
+      color: inherit;
+    }
+    .theme-card:hover {
+      border-color: rgba(139,92,246,0.4);
+      transform: translateY(-1px);
+    }
+    .theme-card.active {
+      border-color: #8b5cf6;
+    }
+    .theme-card-preview {
+      height: 64px;
+      padding: 8px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      position: relative;
+      overflow: hidden;
+    }
+    .theme-card-preview::after {
+      content: '';
+      position: absolute;
+      top: -15px; right: -15px;
+      width: 50px; height: 50px;
+      border-radius: 50%;
+      pointer-events: none;
+    }
+    .theme-card-top {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .theme-card-avatar {
+      width: 14px; height: 14px;
+      border-radius: 50%;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 6px; font-weight: 700; color: #fff;
+    }
+    .theme-card-lines {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .theme-card-line {
+      height: 2px;
+      border-radius: 1px;
+    }
+    .theme-card-btn {
+      height: 8px;
+      border-radius: 4px;
+      width: 70%;
+    }
+    .theme-card-label {
+      text-align: center;
+      padding: 5px 4px;
+      font-size: 10px;
+      font-weight: 600;
+      color: #94a3b8;
+      letter-spacing: 0.3px;
+    }
+
+    .customization-panel::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    .customization-panel::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .customization-panel::-webkit-scrollbar-thumb {
+      background: rgba(255,255,255,0.08);
+      border-radius: 3px;
+    }
+
+    .customization-panel::-webkit-scrollbar-thumb:hover {
+      background: rgba(255,255,255,0.15);
     }
 
-    /* Mock widget styles - will be dynamically generated */
+    /* Mock widget styles - Pill Launcher (new design) */
     .mock-button-container {
       position: relative;
       display: inline-flex;
       align-items: center;
       justify-content: center;
     }
-    
-    .mock-widget-button {
+
+    .mock-pill-launcher {
       position: relative;
-      width: 60px;
-      height: 60px;
-      border-radius: 50%;
-      background: #FFFFFF;
-      border: none;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 7px 16px 7px 7px;
+      background: linear-gradient(135deg, #581c87, #312e81, #1e1b4b);
+      border: 1px solid rgba(139,92,246,0.15);
+      border-radius: 999px;
+      box-shadow: 0 8px 32px rgba(88,28,135,0.35), 0 2px 8px rgba(0,0,0,0.2);
       cursor: pointer;
+      transition: box-shadow 0.25s, transform 0.2s;
+      font-family: inherit;
+      color: #fff;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .mock-pill-launcher:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 10px 40px rgba(88,28,135,0.45), 0 4px 12px rgba(0,0,0,0.25);
+    }
+
+    .mock-pill-icon {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background: #ffffff;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 24px;
-      transition: all 0.3s;
-      margin: 0;
       flex-shrink: 0;
     }
 
-    .mock-widget-button:hover {
-      transform: scale(1.1);
-      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+    .mock-pill-icon img {
+      width: 22px;
+      height: 22px;
+      border-radius: 50%;
+      object-fit: cover;
+    }
+
+    .mock-pill-icon .pill-emoji {
+      font-size: 18px;
+      line-height: 1;
+    }
+
+    .mock-pill-text {
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+    }
+
+    .mock-pill-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: #fff;
+      line-height: 1.2;
+    }
+
+    .mock-pill-status {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 11px;
+      color: rgba(255,255,255,0.55);
+      line-height: 1.2;
+    }
+
+    .mock-pill-dot {
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background: #4ade80;
+      flex-shrink: 0;
+      animation: mock-dot-pulse 2s ease-in-out infinite;
+    }
+
+    @keyframes mock-dot-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.4; }
+    }
+
+    /* Legacy circle button (hidden by default, used for backward compat) */
+    .mock-widget-button {
+      display: none;
     }
     
     /* Prompt bubble styles */
@@ -583,12 +991,12 @@
 
     .mock-widget-panel {
       position: relative;
-      /* Position is controlled by parent .mock-widget */
-      width: 360px;
-      height: 550px;
-      background: white;
-      border-radius: 24px;
-      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      width: 340px;
+      max-width: calc(100vw - 40px);
+      background: #16161e;
+      border-radius: 20px;
+      box-shadow: 0 24px 60px rgba(0,0,0,0.6);
+      border: 1px solid rgba(255,255,255,0.08);
       display: none;
       overflow: hidden;
       flex-direction: column;
@@ -599,20 +1007,14 @@
     }
 
     .mock-panel-header {
-      background: #7C3AED;
-      color: white;
-      padding: 16px 20px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-weight: 600;
+      display: none;
     }
 
     .mock-panel-close {
       background: none;
       border: none;
-      color: white;
-      font-size: 24px;
+      color: rgba(255,255,255,0.6);
+      font-size: 20px;
       cursor: pointer;
       padding: 0;
       width: 32px;
@@ -620,18 +1022,117 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 4px;
-      transition: background 0.2s;
+      border-radius: 50%;
+      transition: all 0.2s;
     }
 
     .mock-panel-close:hover {
-      background: rgba(255, 255, 255, 0.2);
+      background: rgba(255,255,255,0.1);
+      color: #fff;
     }
 
     .mock-panel-content {
       flex: 1;
       overflow-y: auto;
-      padding: 0; /* Remove padding so landing screen fills entire area */
+      padding: 0;
+    }
+
+    /* Voice Idle Hero - matches real widget */
+    .mock-hero {
+      position: relative;
+      padding: 24px 22px 22px;
+      background: linear-gradient(160deg, #2a2550 0%, #1a1a2e 100%);
+      border-bottom: 1px solid rgba(255,255,255,0.06);
+      overflow: hidden;
+      border-radius: 18px 18px 0 0;
+    }
+    .mock-hero::after {
+      content: '';
+      position: absolute;
+      top: -40px; right: -40px;
+      width: 140px; height: 140px;
+      border-radius: 50%;
+      background: radial-gradient(circle, rgba(109,86,245,0.18) 0%, transparent 70%);
+      pointer-events: none;
+    }
+    .mock-hero-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      position: relative;
+      z-index: 1;
+    }
+    .mock-hero-agent {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .mock-hero-avatar-wrap {
+      position: relative;
+    }
+    .mock-hero-avatar {
+      width: 36px; height: 36px; border-radius: 50%;
+      background: linear-gradient(135deg, #6d56f5, #a78bfa);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 14px; font-weight: 500; color: #fff;
+    }
+    .mock-hero-online-dot {
+      position: absolute; bottom: 0; right: 0;
+      width: 10px; height: 10px; border-radius: 50%;
+      background: #22c55e; border: 2px solid #1e1b38;
+    }
+    .mock-hero-agent-name {
+      font-size: 14px; font-weight: 500; color: #f0eff8;
+    }
+    .mock-hero-agent-role {
+      font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 1px;
+    }
+    .mock-hero-close {
+      width: 26px; height: 26px; border-radius: 50%;
+      background: rgba(255,255,255,0.07); border: none; cursor: pointer;
+      color: rgba(255,255,255,0.4);
+      display: flex; align-items: center; justify-content: center;
+      transition: background 0.2s;
+    }
+    .mock-hero-close:hover {
+      background: rgba(255,255,255,0.14);
+    }
+    .mock-hero-headline {
+      font-size: 22px; font-weight: 500; color: #fff;
+      line-height: 1.2; margin-bottom: 6px; position: relative; z-index: 1;
+    }
+    .mock-hero-subline {
+      font-size: 13px; color: rgba(255,255,255,0.45);
+      line-height: 1.5; position: relative; z-index: 1;
+    }
+    .mock-hero-body {
+      padding: 10px 18px 14px;
+      display: flex; flex-direction: column; gap: 6px;
+    }
+    .mock-hero-btn-primary {
+      width: 100%; padding: 11px; border-radius: 12px;
+      background: linear-gradient(135deg, #6d56f5, #9d8df8);
+      border: none; cursor: pointer;
+      font-size: 13px; font-weight: 500; color: #fff;
+      display: flex; align-items: center; justify-content: center; gap: 8px;
+      box-shadow: 0 4px 18px rgba(109,86,245,0.35);
+      transition: opacity 0.2s, transform 0.15s;
+      font-family: inherit;
+    }
+    .mock-hero-btn-primary:hover {
+      opacity: 0.9; transform: translateY(-1px);
+    }
+    .mock-hero-btn-secondary {
+      width: 100%; padding: 10px; border-radius: 12px;
+      background: rgba(255,255,255,0.05);
+      border: 1px solid rgba(255,255,255,0.09);
+      cursor: pointer; font-size: 13px; color: rgba(255,255,255,0.6);
+      display: flex; align-items: center; justify-content: center; gap: 8px;
+      transition: background 0.2s; font-family: inherit;
+    }
+    .mock-hero-btn-secondary:hover {
+      background: rgba(255,255,255,0.09);
     }
 
     .mock-landing-screen {
@@ -1268,29 +1769,85 @@
 </head>
 <body>
   <div class="header">
-    <a href="test-index.html" class="back-link">← Back to Demos</a>
-    <h1>🎨 Widget Live Customization</h1>
-    <div style="margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap;">
-      <div id="modeInstructions" style="background: rgba(255,255,255,0.2); padding: 12px 20px; border-radius: 12px; font-size: 15px; font-weight: 500;">
-        <span id="instructionText">✏️ <strong>Single click</strong> to customize • <strong>Double click</strong> to interact</span>
-      </div>
+    <div class="header-left">
+      <a href="test-index.html" class="back-link">← Back</a>
+      <h1>Widget Customizer</h1>
+    </div>
+    <div id="modeInstructions" style="background: rgba(255,255,255,0.08); padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 500; color: #94a3b8; border: 1px solid rgba(255,255,255,0.06);">
+      <span id="instructionText"><strong>Click</strong> to customize · <strong>Double-click</strong> to interact</span>
     </div>
   </div>
 
   <div class="container">
     <div class="preview-section">
-      <h2>Preview</h2>
-      <div class="preview-area" id="previewArea">
-        <!-- Container to ensure proper scrolling - must be taller than preview area -->
-        <div style="position: relative; min-height: 800px; width: 100%; padding-bottom: 200px;">
-          <div class="mock-widget" id="mockWidget" data-element-type="position">
-            <div class="mock-widget-panel" id="mockPanel">
-              <!-- Panel content will be dynamically generated -->
+      <div class="preview-header">
+        <h2>Preview</h2>
+        <div class="device-toggle">
+          <button class="device-toggle-btn active" id="desktopToggle" onclick="switchDevice('desktop')">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+            <span class="device-label">Desktop</span>
+          </button>
+          <button class="device-toggle-btn" id="mobileToggle" onclick="switchDevice('mobile')">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
+            <span class="device-label">Mobile</span>
+          </button>
+        </div>
+      </div>
+      <div class="preview-area desktop-mode" id="previewArea">
+        <!-- Desktop device frame -->
+        <div class="device-frame-desktop" id="deviceFrameDesktop">
+          <div class="desktop-chrome">
+            <div class="desktop-dots"><span></span><span></span><span></span></div>
+            <div class="desktop-url-bar">yourwebsite.com</div>
+          </div>
+          <div class="desktop-content" id="desktopContent">
+            <div class="desktop-placeholder">
+              <div class="placeholder-line"></div>
+              <div class="placeholder-line"></div>
+              <div class="placeholder-line"></div>
+              <div class="placeholder-line"></div>
+              <div class="placeholder-line"></div>
+            </div>
+            <div class="mock-widget" id="mockWidget" data-element-type="position">
+              <div class="mock-widget-panel" id="mockPanel">
+              </div>
+              <div class="mock-button-container" id="mockButtonContainer">
+                <div class="mock-prompt-bubble" id="mockPromptBubble" style="display: none;"></div>
+                <div class="mock-pulse-rings" id="mockPulseRings" style="display: none;"></div>
+                <button class="mock-pill-launcher" id="mockButton" data-element-type="button">
+                  <div class="mock-pill-icon" id="mockPillIcon">
+                    <img src="https://talktopc.com/logo192.png" alt="" style="width:22px;height:22px;border-radius:50%;object-fit:cover;">
+                  </div>
+                  <div class="mock-pill-text" id="mockPillText">
+                    <span class="mock-pill-title" id="mockPillTitle">Chat Assistant</span>
+                    <span class="mock-pill-status">
+                      <span class="mock-pill-dot"></span>
+                      <span id="mockPillStatusText">Online</span>
+                    </span>
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Mobile device frame (hidden by default) -->
+        <div class="device-frame-mobile" id="deviceFrameMobile" style="display: none;">
+          <div class="phone-notch"></div>
+          <div class="phone-screen">
+            <div class="phone-status-bar">
+              <span>9:41</span>
+              <span style="display: flex; gap: 4px; font-size: 11px;">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"/></svg>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="20" y="10" width="2" height="4" rx="1"/><rect x="4" y="8" width="10" height="8" rx="1"/></svg>
+              </span>
             </div>
-            <div class="mock-button-container" id="mockButtonContainer">
-              <div class="mock-prompt-bubble" id="mockPromptBubble" style="display: none;"></div>
-              <div class="mock-pulse-rings" id="mockPulseRings" style="display: none;"></div>
-              <button class="mock-widget-button" id="mockButton">🎤</button>
+            <div class="phone-content" id="phoneContent">
+              <div class="phone-placeholder">
+                <div class="placeholder-line"></div>
+                <div class="placeholder-line"></div>
+                <div class="placeholder-line"></div>
+                <div class="placeholder-line"></div>
+              </div>
             </div>
           </div>
         </div>
@@ -1298,40 +1855,109 @@
     </div>
 
     <div class="customization-panel">
-      <h2>Customization</h2>
-      
-      <div class="info-box" id="instructionsBox">
-        <p id="instructionsText">
-          <strong>How to use:</strong><br>
-          <span style="display: block; margin-top: 8px;">
-            <strong>Single Click:</strong> Select any widget element to customize its appearance. Changes apply instantly.<br>
-            <strong>Double Click:</strong> Interact with elements normally (open widget, switch views, etc.)
-          </span>
-          <span style="display: block; margin-top: 12px; font-size: 13px; color: #1e40af;">
-            💡 <strong>Tip:</strong> Single click any element to see customization options. Double click to use it normally.
-          </span>
-        </p>
+      <div class="customization-panel-header">
+        <h2>Customize</h2>
       </div>
-
-      <div id="customizationControls" style="flex: 0 0 auto; overflow: visible; margin-bottom: 16px;">
-        <!-- Controls will be dynamically generated based on selected element -->
-        <div class="customization-group">
-          <h3>Select an Element</h3>
-          <p style="color: #6b7280; font-size: 14px; margin-top: 8px;">
-            Click on any widget element in the preview to start customizing.
+      <div class="customization-panel-body">
+        <div class="info-box" id="instructionsBox">
+          <p id="instructionsText">
+            <strong>Click</strong> any widget element to customize it. <strong>Double-click</strong> to interact normally.
           </p>
         </div>
-      </div>
 
-      <div style="flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; margin-top: auto;">
-        <div class="button-group" style="flex-shrink: 0;">
-          <button class="btn btn-primary" id="resetBtn">Reset to Defaults</button>
+        <div class="quick-themes">
+          <h3>Quick Themes</h3>
+          <div class="theme-cards" id="themeCards">
+            <!-- Default Dark -->
+            <button class="theme-card active" data-theme="default" id="themeDefault">
+              <div class="theme-card-preview" style="background: linear-gradient(160deg, #2a1f4e 0%, #0d0d1a 100%);">
+                <div class="theme-card-top">
+                  <div class="theme-card-avatar" style="background: linear-gradient(135deg, #a78bfa, #7c3aed);">S</div>
+                  <div class="theme-card-lines">
+                    <div class="theme-card-line" style="width: 24px; background: rgba(255,255,255,0.7);"></div>
+                    <div class="theme-card-line" style="width: 16px; background: rgba(255,255,255,0.3);"></div>
+                  </div>
+                </div>
+                <div class="theme-card-btn" style="background: linear-gradient(135deg, #8b5cf6, #6d28d9);"></div>
+              </div>
+              <div class="theme-card-label">Default</div>
+            </button>
+            <!-- Light -->
+            <button class="theme-card" data-theme="light" id="themeLight">
+              <div class="theme-card-preview" style="background: linear-gradient(160deg, #ede9fe 0%, #f5f3ff 100%);">
+                <div class="theme-card-top">
+                  <div class="theme-card-avatar" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);">S</div>
+                  <div class="theme-card-lines">
+                    <div class="theme-card-line" style="width: 24px; background: #1e1b4b;"></div>
+                    <div class="theme-card-line" style="width: 16px; background: rgba(30,27,75,0.35);"></div>
+                  </div>
+                </div>
+                <div class="theme-card-btn" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);"></div>
+              </div>
+              <div class="theme-card-label">Light</div>
+            </button>
+            <!-- Sunset -->
+            <button class="theme-card" data-theme="sunset" id="themeSunset">
+              <div class="theme-card-preview" style="background: linear-gradient(160deg, #4a1942 0%, #1a0a2e 100%);">
+                <div class="theme-card-top">
+                  <div class="theme-card-avatar" style="background: linear-gradient(135deg, #f97316, #ec4899);">S</div>
+                  <div class="theme-card-lines">
+                    <div class="theme-card-line" style="width: 24px; background: rgba(255,255,255,0.7);"></div>
+                    <div class="theme-card-line" style="width: 16px; background: rgba(255,255,255,0.3);"></div>
+                  </div>
+                </div>
+                <div class="theme-card-btn" style="background: linear-gradient(135deg, #f97316, #ec4899);"></div>
+              </div>
+              <div class="theme-card-label">Sunset</div>
+            </button>
+            <!-- Hebrew RTL -->
+            <button class="theme-card" data-theme="hebrew" id="themeHebrew">
+              <div class="theme-card-preview" style="background: linear-gradient(160deg, #1a2744 0%, #0f172a 100%); direction: rtl;">
+                <div class="theme-card-top" style="flex-direction: row-reverse;">
+                  <div class="theme-card-avatar" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);">ש</div>
+                  <div class="theme-card-lines" style="align-items: flex-end;">
+                    <div class="theme-card-line" style="width: 24px; background: rgba(255,255,255,0.7);"></div>
+                    <div class="theme-card-line" style="width: 16px; background: rgba(255,255,255,0.3);"></div>
+                  </div>
+                </div>
+                <div class="theme-card-btn" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);"></div>
+              </div>
+              <div class="theme-card-label">עברית</div>
+            </button>
+            <!-- Sasha / S-Law -->
+            <button class="theme-card" data-theme="sasha" id="themeSasha">
+              <div class="theme-card-preview" style="background: linear-gradient(160deg, #f8f5ef 0%, #ebe6de 100%); direction: rtl;">
+                <div class="theme-card-top" style="flex-direction: row-reverse;">
+                  <div class="theme-card-avatar" style="background: linear-gradient(135deg, #c4a265, #9e7e4f);">S</div>
+                  <div class="theme-card-lines" style="align-items: flex-end;">
+                    <div class="theme-card-line" style="width: 24px; background: #2d3748;"></div>
+                    <div class="theme-card-line" style="width: 16px; background: rgba(45,55,72,0.35);"></div>
+                  </div>
+                </div>
+                <div class="theme-card-btn" style="background: linear-gradient(135deg, #c4a265, #9e7e4f);"></div>
+              </div>
+              <div class="theme-card-label">S-Law</div>
+            </button>
+          </div>
+        </div>
+
+        <div id="customizationControls" style="margin-bottom: 12px;">
+          <div class="customization-group">
+            <h3>Select an Element</h3>
+            <p style="color: #64748b; font-size: 13px; margin-top: 8px;">
+              Click on any widget element in the preview to start customizing.
+            </p>
+          </div>
+        </div>
+
+        <div class="button-group" style="margin-bottom: 12px;">
+          <button class="btn btn-primary" id="resetBtn">Reset</button>
           <button class="btn btn-secondary" id="togglePanelBtn">Toggle Panel</button>
         </div>
 
-        <div class="code-output" style="flex-shrink: 0; height: auto; min-height: 400px; max-height: none; overflow-y: visible; overflow-x: auto; margin-bottom: 0;">
-          <h3 style="color: #f9fafb; margin-bottom: 12px; font-size: 16px; font-weight: 700;">Configuration Code:</h3>
-          <pre id="configCode" style="margin: 0; white-space: pre-wrap; word-wrap: break-word; font-size: 13px; line-height: 1.6;">// Select an element to see its configuration</pre>
+        <div class="code-output">
+          <h3>Configuration Code</h3>
+          <pre id="configCode">// Select an element to see its configuration</pre>
         </div>
       </div>
     </div>
@@ -1340,6 +1966,7 @@
   <script>
     // Mock widget configuration
     let widgetConfig = {
+      agentName: 'Sasha',
       button: {
         size: 'medium',
         shape: 'circle',
@@ -1355,11 +1982,11 @@
         backgroundColor: '#FFFFFF'
       },
       panel: {
-        width: 360,
-        height: 550, // Updated from SDK default 500
-        borderRadius: 24,
-        backgroundColor: '#FFFFFF',
-        border: '1px solid #E5E7EB'
+        width: 340,
+        height: 550,
+        borderRadius: 20,
+        backgroundColor: '#16161e',
+        border: '1px solid rgba(255,255,255,0.08)'
       },
       direction: 'ltr', // 'ltr' or 'rtl'
       position: {
@@ -1395,6 +2022,9 @@
         inputFocusColor: '#7C3AED'
       },
       voice: {
+        agentRole: 'AI Voice Assistant',
+        headline: 'Hi there 👋',
+        subline: 'Ask me anything — I respond instantly<br>in voice or text.',
         micButtonColor: '#7C3AED',
         micButtonActiveColor: '#EF4444',
         speakerButtonColor: '#FFFFFF',
@@ -1403,7 +2033,7 @@
         avatarType: 'icon', // 'icon' or 'image'
         avatarIcon: '🤖',
         avatarImageUrl: '',
-        startCallButtonText: 'Start Call',
+        startCallButtonText: 'Start Voice Call',
         startCallButtonColor: '#667eea',
         startCallButtonTextColor: '#FFFFFF',
         statusTitleColor: '#1e293b',
@@ -1416,7 +2046,11 @@
         liveIndicatorTextColor: '#10b981',
         waveformType: 'waveform', // 'waveform', 'icon', or 'image'
         waveformIcon: '🎤',
-        waveformImageUrl: ''
+        waveformImageUrl: '',
+        waveformBarColor: '#7C3AED',
+        pillGradient: '',
+        pillTextColor: '#ffffff',
+        pillDotColor: '#4ade80'
       },
       landing: {
         backgroundColor: 'linear-gradient(180deg, #ffffff 0%, rgba(168, 85, 247, 0.03) 100%)', // Default gradient matching real widget
@@ -1454,7 +2088,8 @@
     };
 
     let selectedElement = null;
-    let currentView = 'landing'; // 'landing', 'text', 'voice'
+    let currentView = 'voiceIdle'; // 'voiceIdle', 'landing', 'text', 'voice'
+    let currentDevice = 'desktop'; // 'desktop', 'mobile'
     let panelOpen = true; // Start with panel open to show defaults
     let clickTimeout = null; // Track single vs double click
     let historyExpanded = false; // Track conversation history state
@@ -1463,6 +2098,37 @@
     let lastClickElement = null;
     let lastClickType = null;
 
+    function switchDevice(device) {
+      currentDevice = device;
+      const desktopBtn = document.getElementById('desktopToggle');
+      const mobileBtn = document.getElementById('mobileToggle');
+      const previewArea = document.getElementById('previewArea');
+      const desktopFrame = document.getElementById('deviceFrameDesktop');
+      const mobileFrame = document.getElementById('deviceFrameMobile');
+      const mockWidget = document.getElementById('mockWidget');
+
+      desktopBtn.classList.toggle('active', device === 'desktop');
+      mobileBtn.classList.toggle('active', device === 'mobile');
+      previewArea.classList.toggle('desktop-mode', device === 'desktop');
+      previewArea.classList.toggle('mobile-mode', device === 'mobile');
+
+      if (device === 'desktop') {
+        desktopFrame.style.display = '';
+        mobileFrame.style.display = 'none';
+        if (mockWidget.parentElement !== document.getElementById('desktopContent')) {
+          document.getElementById('desktopContent').appendChild(mockWidget);
+        }
+      } else {
+        desktopFrame.style.display = 'none';
+        mobileFrame.style.display = '';
+        if (mockWidget.parentElement !== document.getElementById('phoneContent')) {
+          document.getElementById('phoneContent').appendChild(mockWidget);
+        }
+      }
+      updateMockWidgetPosition();
+    }
+    window.switchDevice = switchDevice;
+
     // Initialize mock widget
     function initMockWidget() {
       const mockButton = document.getElementById('mockButton');
@@ -1506,58 +2172,58 @@
     }
 
     function applyButtonStyles(button) {
-      const config = widgetConfig.button;
-      button.style.width = getSizeValue(config.size) + 'px';
-      button.style.height = getSizeValue(config.size) + 'px';
-      button.style.backgroundColor = config.backgroundColor;
-      button.style.borderRadius = config.shape === 'circle' ? '50%' : config.shape === 'rounded' ? '12px' : '0';
-      
-      if (config.shadow) {
-        button.style.boxShadow = `0 4px 12px ${config.shadowColor}`;
-      } else {
-        button.style.boxShadow = 'none';
+      const iconConfig = widgetConfig.icon;
+      const headerConfig = widgetConfig.header;
+
+      // Update pill icon
+      const pillIcon = document.getElementById('mockPillIcon');
+      if (pillIcon) {
+        if (iconConfig.type === 'custom' && iconConfig.customImage) {
+          pillIcon.innerHTML = `<img src="${iconConfig.customImage}" alt="" style="width:22px;height:22px;border-radius:50%;object-fit:cover;">`;
+        } else if (iconConfig.type === 'emoji') {
+          pillIcon.innerHTML = `<span class="pill-emoji">${iconConfig.emoji || '🤖'}</span>`;
+        } else {
+          pillIcon.innerHTML = `<img src="${iconConfig.customImage || 'https://talktopc.com/logo192.png'}" alt="" style="width:22px;height:22px;border-radius:50%;object-fit:cover;">`;
+        }
+        pillIcon.style.backgroundColor = iconConfig.backgroundColor || '#ffffff';
       }
 
-      // Apply icon
-      const iconConfig = widgetConfig.icon;
-      button.innerHTML = ''; // Clear previous content
-      
-      if (iconConfig.type === 'custom' && iconConfig.customImage) {
-        const img = document.createElement('img');
-        img.src = iconConfig.customImage;
-        img.alt = 'Chat Assistant';
-        const iconSize = Math.floor(getSizeValue(config.size) * 0.6);
-        img.style.width = iconSize + 'px';
-        img.style.height = iconSize + 'px';
-        img.style.objectFit = 'contain';
-        button.appendChild(img);
-      } else if (iconConfig.type === 'emoji') {
-        button.textContent = iconConfig.emoji;
-      } else if (iconConfig.type === 'text') {
-        button.textContent = iconConfig.text;
-      } else if (iconConfig.type === 'microphone') {
-        // Default microphone SVG
-        const iconSize = Math.floor(getSizeValue(config.size) * 0.5);
-        button.innerHTML = `<svg viewBox="0 0 24 24" style="width: ${iconSize}px; height: ${iconSize}px; fill: #7C3AED;">
-          <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
-          <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
-        </svg>`;
+      // Update pill title and status
+      const pillTitle = document.getElementById('mockPillTitle');
+      if (pillTitle) pillTitle.textContent = headerConfig.title || 'Chat Assistant';
+
+      const pillStatusText = document.getElementById('mockPillStatusText');
+      if (pillStatusText) pillStatusText.textContent = headerConfig.onlineIndicatorText || 'Online';
+
+      // Update pill launcher background
+      const pillGrad = widgetConfig.voice?.pillGradient;
+      if (pillGrad) {
+        button.style.background = pillGrad;
       } else {
-        // Fallback to custom image if type is custom but no image specified
-        const img = document.createElement('img');
-        img.src = 'https://talktopc.com/logo192.png';
-        img.alt = 'Chat Assistant';
-        const iconSize = Math.floor(getSizeValue(config.size) * 0.6);
-        img.style.width = iconSize + 'px';
-        img.style.height = iconSize + 'px';
-        img.style.objectFit = 'contain';
-        button.appendChild(img);
+        const bgColor = widgetConfig.button.backgroundColor;
+        if (bgColor && bgColor !== '#FFFFFF' && bgColor !== '#ffffff') {
+          button.style.background = bgColor;
+        }
+      }
+
+      // Update pill direction
+      button.style.direction = widgetConfig.direction || 'ltr';
+
+      // Update pill text colors
+      const pillTextColor = widgetConfig.voice?.pillTextColor;
+      if (pillTextColor) {
+        if (pillTitle) pillTitle.style.color = pillTextColor;
+        const pillStatus = button.querySelector('.mock-pill-status');
+        if (pillStatus) pillStatus.style.color = pillTextColor.replace('1)', '0.55)').replace('#fff', 'rgba(255,255,255,0.55)');
+      }
+      const pillDotColor = widgetConfig.voice?.pillDotColor;
+      const pillDot = button.querySelector('.mock-pill-dot');
+      if (pillDotColor && pillDot) {
+        pillDot.style.background = pillDotColor;
       }
 
-      // Make button highlightable
       button.dataset.elementType = 'button';
       
-      // Update prompt bubble if enabled
       updatePromptBubble(button);
       
       // Remove old event listeners by replacing the button
@@ -1570,25 +2236,19 @@
         e.preventDefault();
         e.stopPropagation();
         
-        // For button, single click should toggle panel immediately
-        // Double click will still select for editing (without double-toggling)
         const currentTime = Date.now();
         const timeSinceLastClick = currentTime - lastClickTime;
         
-        // Check if this is a double click (within 400ms and same element)
         if (timeSinceLastClick < 400 && lastClickElement === newButton && lastClickType === 'button') {
-          // Double click - just select for editing (don't toggle panel again)
           lastClickTime = 0;
           lastClickElement = null;
           lastClickType = null;
           selectElement('button', newButton, e);
         } else {
-          // Single click - toggle panel immediately and select button
           lastClickTime = currentTime;
           lastClickElement = newButton;
           lastClickType = 'button';
           
-          // Toggle panel
           panelOpen = !panelOpen;
           const panel = document.getElementById('mockPanel');
           panel.classList.toggle('open');
@@ -1596,12 +2256,8 @@
             renderPanelContent();
           }
           
-          // Update prompt bubble visibility based on panel state
           updatePromptBubble(newButton);
-          // Sync actual widget state with mock panel
           syncWidgetWithMockPanel();
-          
-          // Select the button for editing (so user can customize it)
           selectElement('button', newButton, e);
         }
       });
@@ -1686,46 +2342,52 @@
 
       const pos = widgetConfig.position;
       const offset = pos.offset || { x: 20, y: 20 };
-      
-      // Clear any existing positioning
+
       mockWidget.style.top = '';
       mockWidget.style.bottom = '';
       mockWidget.style.left = '';
       mockWidget.style.right = '';
-      
-      // Set position
       mockWidget.style.position = 'absolute';
-      
-      // Vertical positioning - use config value
-      if (pos.vertical === 'top') {
-        mockWidget.style.setProperty('top', `${offset.y}px`, 'important');
-        mockWidget.style.setProperty('bottom', 'auto', 'important');
-      } else if (pos.vertical === 'bottom') {
-        mockWidget.style.setProperty('bottom', `${offset.y}px`, 'important');
-        mockWidget.style.setProperty('top', 'auto', 'important');
+
+      if (currentDevice === 'mobile') {
+        const mobileOffset = { x: Math.min(offset.x, 12), y: Math.min(offset.y, 12) };
+        if (pos.vertical === 'top') {
+          mockWidget.style.setProperty('top', `${mobileOffset.y}px`, 'important');
+          mockWidget.style.setProperty('bottom', 'auto', 'important');
+        } else {
+          mockWidget.style.setProperty('bottom', `${mobileOffset.y}px`, 'important');
+          mockWidget.style.setProperty('top', 'auto', 'important');
+        }
+        mockWidget.style.setProperty('right', `${mobileOffset.x}px`, 'important');
+        mockWidget.style.setProperty('left', 'auto', 'important');
+      } else {
+        if (pos.vertical === 'top') {
+          mockWidget.style.setProperty('top', `${offset.y}px`, 'important');
+          mockWidget.style.setProperty('bottom', 'auto', 'important');
+        } else {
+          mockWidget.style.setProperty('bottom', `${offset.y}px`, 'important');
+          mockWidget.style.setProperty('top', 'auto', 'important');
+        }
+        mockWidget.style.setProperty('right', `${offset.x}px`, 'important');
+        mockWidget.style.setProperty('left', 'auto', 'important');
       }
-      
-      // Horizontal positioning - ALWAYS keep mock widget on the right side
-      mockWidget.style.setProperty('right', `${offset.x}px`, 'important');
-      mockWidget.style.setProperty('left', 'auto', 'important');
     }
 
     function renderPanelContent() {
       const mockPanel = document.getElementById('mockPanel');
       
-      // Apply panel styles
+      // Apply panel styles - dark shell (matches real widget: width 340px, auto height)
       mockPanel.style.width = widgetConfig.panel.width + 'px';
-      mockPanel.style.height = widgetConfig.panel.height + 'px';
-      mockPanel.style.borderRadius = widgetConfig.panel.borderRadius + 'px';
-      // Panel background should match landing background to avoid double-frame effect
-      const landingBg = widgetConfig.landing.backgroundColor || 'linear-gradient(180deg, #ffffff 0%, rgba(168, 85, 247, 0.03) 100%)';
-      mockPanel.style.backgroundColor = landingBg;
-      mockPanel.style.border = widgetConfig.panel.border;
-      // Apply direction (LTR/RTL)
+      mockPanel.style.height = 'auto';
+      mockPanel.style.borderRadius = (widgetConfig.panel.borderRadius || 20) + 'px';
+      mockPanel.style.background = widgetConfig.panel.backgroundColor || '#16161e';
+      mockPanel.style.border = widgetConfig.panel.border || '1px solid rgba(255,255,255,0.08)';
       mockPanel.style.direction = widgetConfig.direction || 'ltr';
 
       // Render based on current view
-      if (currentView === 'landing') {
+      if (currentView === 'voiceIdle') {
+        renderVoiceIdleScreen(mockPanel);
+      } else if (currentView === 'landing') {
         renderLandingScreen(mockPanel);
       } else if (currentView === 'text') {
         renderTextInterface(mockPanel);
@@ -1737,9 +2399,97 @@
       addPanelSelector();
     }
 
+    function isLightBackground(hex) {
+      if (!hex || hex.charAt(0) !== '#') return false;
+      const r = parseInt(hex.substr(1,2), 16);
+      const g = parseInt(hex.substr(3,2), 16);
+      const b = parseInt(hex.substr(5,2), 16);
+      return (r * 299 + g * 587 + b * 114) / 1000 > 160;
+    }
+
+    function renderVoiceIdleScreen(panel) {
+      const v = widgetConfig.voice || {};
+      const agentName = widgetConfig.agentName || 'Sasha';
+      const agentRole = v.agentRole || 'AI Voice Assistant';
+      const headline = v.headline || 'Hi there 👋';
+      const subline = v.subline || 'Ask me anything — I respond instantly<br>in voice or text.';
+      const avatarInitial = agentName.charAt(0).toUpperCase();
+      const avatarGrad1 = v.avatarGradient1 || '#6d56f5';
+      const avatarGrad2 = v.avatarGradient2 || '#a78bfa';
+      const onlineDotColor = v.onlineDotColor || '#22c55e';
+      const heroGrad1 = v.heroGradient1 || '#2a2550';
+      const heroGrad2 = v.heroGradient2 || '#1a1a2e';
+      const nameColor = v.agentNameColor || '#f0eff8';
+      const roleColor = v.agentRoleColor || 'rgba(255,255,255,0.35)';
+      const headlineColor = v.headlineColor || '#ffffff';
+      const sublineColor = v.sublineColor || 'rgba(255,255,255,0.45)';
+      const primaryBtnGrad1 = v.primaryBtnGradient1 || '#6d56f5';
+      const primaryBtnGrad2 = v.primaryBtnGradient2 || '#9d8df8';
+      const primaryBtnTextColor = v.startCallButtonTextColor || '#ffffff';
+      const secondaryBtnBg = v.secondaryBtnBg || 'rgba(255,255,255,0.05)';
+      const secondaryBtnBorder = v.secondaryBtnBorder || 'rgba(255,255,255,0.09)';
+      const secondaryBtnTextColor = v.secondaryBtnTextColor || 'rgba(255,255,255,0.6)';
+      const sendMessageText = v.sendMessageText || 'Send a Message';
+
+      const panelBg = widgetConfig.panel?.backgroundColor || '#16161e';
+      const light = isLightBackground(panelBg);
+      const closeColor = light ? '#6b7280' : 'currentColor';
+      const footerBorderColor = light ? 'rgba(0,0,0,0.08)' : 'rgba(255,255,255,0.06)';
+      const footerTextColor = light ? 'rgba(0,0,0,0.4)' : 'rgba(255,255,255,0.35)';
+      const footerLinkColor = light ? (widgetConfig.voice.primaryBtnGradient1 || '#7C3AED') : '#a78bfa';
+
+      panel.innerHTML = `
+        <div class="mock-hero" data-element-type="heroBackground" style="background: linear-gradient(160deg, ${heroGrad1} 0%, ${heroGrad2} 100%);">
+          <div class="mock-hero-header">
+            <div class="mock-hero-agent">
+              <div class="mock-hero-avatar-wrap">
+                <div class="mock-hero-avatar" data-element-type="heroAvatar" style="background: linear-gradient(135deg, ${avatarGrad1}, ${avatarGrad2});">${avatarInitial}</div>
+                <div class="mock-hero-online-dot" style="background: ${onlineDotColor};"></div>
+              </div>
+              <div>
+                <div class="mock-hero-agent-name" data-element-type="heroAgentName" style="color: ${nameColor};">${agentName}</div>
+                <div class="mock-hero-agent-role" data-element-type="heroAgentRole" style="color: ${roleColor};">${agentRole}</div>
+              </div>
+            </div>
+            <button class="mock-hero-close" data-element-type="closeButton" style="color: ${closeColor};">
+              <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M10 2L2 10M2 2l8 8"/>
+              </svg>
+            </button>
+          </div>
+          <div class="mock-hero-headline" data-element-type="heroHeadline" style="color: ${headlineColor};">${headline}</div>
+          <div class="mock-hero-subline" data-element-type="heroSubline" style="color: ${sublineColor};">${subline}</div>
+        </div>
+        <div class="mock-hero-body" style="background: ${panelBg};">
+          <button class="mock-hero-btn-primary" data-element-type="heroPrimaryBtn" style="background: linear-gradient(135deg, ${primaryBtnGrad1}, ${primaryBtnGrad2}); color: ${primaryBtnTextColor};">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="${primaryBtnTextColor}" stroke-width="2">
+              <path d="M12 2a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3z"/>
+              <path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v3M8 22h8"/>
+            </svg>
+            ${v.startCallButtonText || 'Start Voice Call'}
+          </button>
+          <button class="mock-hero-btn-secondary" data-element-type="heroSecondaryBtn" style="background: ${secondaryBtnBg}; border: 1px solid ${secondaryBtnBorder}; color: ${secondaryBtnTextColor};">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="${secondaryBtnTextColor}" stroke-width="2">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+            </svg>
+            ${sendMessageText}
+          </button>
+        </div>
+        <div class="mock-footer" style="padding: 6px 18px 10px; display: flex; justify-content: center; border-top: 1px solid ${footerBorderColor}; background: transparent; flex-shrink: 0;">
+          <span style="font-size: 10px; color: ${footerTextColor};">Powered by <a href="#" style="color: ${footerLinkColor}; text-decoration: none; font-weight: 700;">TalkToPC</a></span>
+        </div>
+      `;
+
+      setupElementListeners(panel);
+    }
+
     function renderLandingScreen(panel) {
       const config = widgetConfig.landing;
       const iconBgColor = config.modeCardIconBackgroundColor || '#7C3AED';
+      const landingLight = true; // landing screen always has a light background
+      const landFooterBorder = 'rgba(0,0,0,0.08)';
+      const landFooterText = 'rgba(0,0,0,0.4)';
+      const landFooterLink = iconBgColor;
       // Determine logo background - use logoBackgroundColor if enabled, otherwise transparent
       let logoBg = 'transparent';
       if (config.logoType === 'image' && config.logoBackgroundEnabled !== false) {
@@ -1750,18 +2500,8 @@
       }
       
       panel.innerHTML = `
-        <div class="mock-panel-header" style="background: ${widgetConfig.header.backgroundColor}; color: ${widgetConfig.header.textColor}; direction: ${widgetConfig.direction || 'ltr'};" data-element-type="header">
-          <div style="display: flex; align-items: center; gap: 8px;">
-            <span>${widgetConfig.header.title}</span>
-            <div style="display: flex; align-items: center; gap: 6px; margin-left: 8px;" data-element-type="onlineIndicator">
-              <div style="width: 6px; height: 6px; background: ${widgetConfig.header.onlineIndicatorDotColor || '#10b981'}; border-radius: 50%; animation: pulse 2s ease-in-out infinite;"></div>
-              <span style="font-size: 12px; opacity: 0.9; color: ${widgetConfig.header.onlineIndicatorColor || widgetConfig.header.textColor};">${widgetConfig.header.onlineIndicatorText || 'Online'}</span>
-            </div>
-          </div>
-          ${widgetConfig.header.showCloseButton ? '<button class="mock-panel-close" data-element-type="closeButton">×</button>' : ''}
-        </div>
         <div class="mock-panel-content" style="direction: ${widgetConfig.direction || 'ltr'};">
-          <div class="mock-landing-screen" style="background: ${config.backgroundColor || 'linear-gradient(180deg, #ffffff 0%, rgba(168, 85, 247, 0.03) 100%)'}; height: 100%;" data-element-type="landingBackground">
+          <div class="mock-landing-screen" style="background: ${config.backgroundColor || 'linear-gradient(180deg, #ffffff 0%, rgba(168, 85, 247, 0.03) 100%)'}; height: 100%; border-radius: 18px 18px 0 0;" data-element-type="landingBackground">
             <div class="mock-landing-logo" style="background: ${logoBg}; ${logoBg !== 'transparent' ? 'box-shadow: 0 8px 28px rgba(102, 126, 234, 0.35); border: none !important;' : 'box-shadow: none !important; border: none !important; outline: none !important;'}" data-element-type="landingLogo">
               ${config.logoType === 'image' && config.logoImageUrl ? `
                 <img src="${config.logoImageUrl}" alt="Logo" style="max-width: 44px; max-height: 44px; object-fit: contain;">
@@ -1794,11 +2534,8 @@
             </div>
           </div>
         </div>
-        <div class="mock-footer" style="padding: 10px 16px; text-align: center; border-top: 1px solid rgba(0,0,0,0.06); font-size: 11px; color: #64748b; background: #fff; flex-shrink: 0;">
-          <span style="display: inline-flex; align-items: center; gap: 4px;">
-            <span>⚡</span>
-            <span>Powered by TalkToPC</span>
-          </span>
+        <div class="mock-footer" style="padding: 6px 18px 10px; display: flex; justify-content: center; border-top: 1px solid ${landFooterBorder}; background: transparent; flex-shrink: 0;">
+          <span style="font-size: 10px; color: ${landFooterText};">Powered by <a href="#" style="color: ${landFooterLink}; text-decoration: none; font-weight: 700;">TalkToPC</a></span>
         </div>
       `;
       
@@ -1808,13 +2545,14 @@
 
     function renderTextInterface(panel) {
       const config = widgetConfig.text;
+      const panelBgText = widgetConfig.panel.backgroundColor || '#16161e';
+      const lightText = isLightBackground(panelBgText);
+      const textFooterBorder = lightText ? 'rgba(0,0,0,0.08)' : 'rgba(255,255,255,0.06)';
+      const textFooterColor = lightText ? 'rgba(0,0,0,0.4)' : 'rgba(255,255,255,0.35)';
+      const textFooterLink = lightText ? (widgetConfig.voice.primaryBtnGradient1 || '#7C3AED') : '#a78bfa';
       panel.innerHTML = `
-        <div class="mock-panel-header" style="background: ${widgetConfig.header.backgroundColor}; color: ${widgetConfig.header.textColor}; direction: ${widgetConfig.direction || 'ltr'};" data-element-type="header">
-          <span>${widgetConfig.header.title}</span>
-          ${widgetConfig.header.showCloseButton ? '<button class="mock-panel-close" data-element-type="closeButton" onclick="switchView(\'landing\')">×</button>' : ''}
-        </div>
         <div class="mock-text-interface" style="direction: ${widgetConfig.direction || 'ltr'};">
-          <div class="mock-messages">
+          <div class="mock-messages" style="background: #f8fafc;">
             <div class="mock-message user" data-element-type="userMessage">
               <div class="mock-message-avatar">${widgetConfig.messages.userAvatarIcon || '👤'}</div>
               <div class="mock-message-bubble" style="background: ${widgetConfig.messages.userBackgroundColor}; color: ${widgetConfig.messages.userTextColor || widgetConfig.messages.textColor || '#1F2937'}; border-radius: ${widgetConfig.messages.borderRadius}px; font-size: ${widgetConfig.messages.fontSize};">
@@ -1839,6 +2577,9 @@
             <button class="mock-send-button" style="background: ${config.sendButtonColor};" data-element-type="sendButton">${config.sendButtonText || '→'}</button>
           </div>
         </div>
+        <div class="mock-footer" style="padding: 6px 18px 10px; display: flex; justify-content: center; border-top: 1px solid ${textFooterBorder}; background: transparent; flex-shrink: 0;">
+          <span style="font-size: 10px; color: ${textFooterColor};">Powered by <a href="#" style="color: ${textFooterLink}; text-decoration: none; font-weight: 700;">TalkToPC</a></span>
+        </div>
       `;
       
       // Make elements selectable
@@ -1847,22 +2588,38 @@
 
     function renderVoiceInterface(panel) {
       const config = widgetConfig.voice;
-      // Show active call state matching real widget structure
+      const callBg1 = config.heroGradient1 || '#2a2550';
+      const callBg2 = config.heroGradient2 || '#1a1a2e';
+      const waveColor = config.waveformBarColor || config.primaryBtnGradient1 || '#7C3AED';
+      const timerTextColor = config.headlineColor || '#fff';
+      const statusTextColor = config.sublineColor || 'rgba(255,255,255,0.7)';
+      const panelBg = widgetConfig.panel?.backgroundColor || '#16161e';
+      const light = isLightBackground(panelBg);
+      const sectionBorder = light ? 'rgba(0,0,0,0.08)' : 'rgba(255,255,255,0.08)';
+      const convHeaderColor = light ? 'rgba(0,0,0,0.4)' : 'rgba(255,255,255,0.4)';
+      const bubbleBg = light ? '#f3f4f6' : 'rgba(255,255,255,0.08)';
+      const bubbleColor = light ? '#1f2937' : 'rgba(255,255,255,0.85)';
+      const inputBg = light ? '#f3f4f6' : 'rgba(255,255,255,0.06)';
+      const inputBorder = light ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)';
+      const inputColor = light ? '#111827' : '#fff';
+      const footerBorder = light ? 'rgba(0,0,0,0.08)' : 'rgba(255,255,255,0.06)';
+      const footerTextColor = light ? 'rgba(0,0,0,0.4)' : 'rgba(255,255,255,0.35)';
+      const footerAccent = light ? (widgetConfig.voice.primaryBtnGradient1 || '#7C3AED') : '#a78bfa';
       panel.innerHTML = `
-        <div class="mock-panel-header" style="background: ${widgetConfig.header.backgroundColor}; color: ${widgetConfig.header.textColor}; direction: ${widgetConfig.direction || 'ltr'};" data-element-type="header">
-          <div style="display: flex; align-items: center; gap: 8px;">
-            <span>${widgetConfig.header.title}</span>
-            <div style="display: flex; align-items: center; gap: 6px; margin-left: 8px;" data-element-type="onlineIndicator">
-              <div style="width: 6px; height: 6px; background: ${widgetConfig.header.onlineIndicatorDotColor || '#10b981'}; border-radius: 50%;"></div>
-              <span style="font-size: 12px; opacity: 0.9; color: ${widgetConfig.header.onlineIndicatorColor || widgetConfig.header.textColor};">${widgetConfig.header.onlineIndicatorText || 'Online'}</span>
-            </div>
-          </div>
-          <div style="display: flex; align-items: center; gap: 8px;">
-            <button style="background: none; border: none; color: ${widgetConfig.header.textColor}; cursor: pointer; padding: 4px; display: flex; align-items: center;" data-element-type="backButton">←</button>
-            ${widgetConfig.header.showCloseButton ? '<button class="mock-panel-close" data-element-type="closeButton">×</button>' : ''}
-          </div>
-        </div>
-        <div class="mock-voice-interface" style="direction: ${widgetConfig.direction || 'ltr'};">
+        <style>
+          .mock-voice-interface .mock-waveform-bar,
+          .mock-compact-waveform .mock-waveform-bar { background: ${waveColor} !important; }
+          .mock-voice-interface .mock-voice-section { border-bottom-color: ${sectionBorder}; }
+          .mock-voice-interface .mock-voice-section-compact { border-bottom-color: ${sectionBorder}; }
+          .mock-voice-interface .mock-conversation-section { background: ${panelBg}; }
+          .mock-voice-interface .mock-conversation-header { color: ${convHeaderColor}; }
+          .mock-voice-interface .mock-conversation-toggle { color: ${convHeaderColor}; }
+          .mock-voice-interface .mock-history-bubble { background: ${bubbleBg}; color: ${bubbleColor}; }
+          .mock-voice-interface .mock-voice-text-input { background: ${inputBg} !important; border-color: ${inputBorder} !important; color: ${inputColor} !important; }
+          .mock-voice-interface .mock-voice-input-area { border-top-color: ${sectionBorder}; background: ${panelBg}; }
+          .mock-voice-interface .mock-voice-send-btn { background: ${waveColor} !important; }
+        </style>
+        <div class="mock-voice-interface" style="direction: ${widgetConfig.direction || 'ltr'}; background: linear-gradient(160deg, ${callBg1} 0%, ${callBg2} 100%); color: ${timerTextColor};">
           <!-- Voice Section -->
           <!-- Multi-row layout when history is collapsed -->
           <div class="mock-voice-section" id="mockVoiceSectionExpanded">
@@ -2083,9 +2840,8 @@
           </div>
           
           <!-- Powered By -->
-          <div class="mock-powered-by">
-            <span>⚡</span>
-            <span>Powered by <strong>TalkToPC</strong></span>
+          <div class="mock-powered-by" style="color: ${footerTextColor}; border-top: 1px solid ${footerBorder};">
+            <span>Powered by <a href="#" style="color: ${footerAccent}; text-decoration: none; font-weight: 700;">TalkToPC</a></span>
           </div>
         </div>
       `;
@@ -2252,8 +3008,11 @@
     
     function performNormalInteraction(elementType, element, event) {
       if (elementType === 'closeButton' || elementType === 'endCallButton' || elementType === 'backButton') {
-        // End call or close should go back to landing screen
-        switchView('landing');
+        switchView('voiceIdle');
+      } else if (elementType === 'startCallButton' || elementType === 'heroPrimaryBtn') {
+        switchView('voice');
+      } else if (elementType === 'sendMessageButton' || elementType === 'heroSecondaryBtn') {
+        switchView('text');
       } else if (elementType === 'modeCard') {
         const mode = element.getAttribute('data-mode');
         if (mode === 'voice') {
@@ -2354,31 +3113,14 @@
         case 'button':
           controlsHTML = `
             <div class="customization-group">
-              <h3>Floating Button</h3>
-              <div class="control-item">
-                <label>Size</label>
-                <select id="btnSize">
-                  <option value="small">Small</option>
-                  <option value="medium" selected>Medium</option>
-                  <option value="large">Large</option>
-                  <option value="xl">Extra Large</option>
-                </select>
-              </div>
-              <div class="control-item">
-                <label>Shape</label>
-                <select id="btnShape">
-                  <option value="circle" selected>Circle</option>
-                  <option value="rounded">Rounded</option>
-                  <option value="square">Square</option>
-                </select>
-              </div>
+              <h3>Pill Launcher</h3>
               <div class="control-item">
-                <label>Background Color</label>
-                <input type="color" id="btnBgColor" value="${widgetConfig.button.backgroundColor}">
+                <label>Title</label>
+                <input type="text" id="pillTitle" value="${widgetConfig.header.title || 'Chat Assistant'}" placeholder="Chat Assistant">
               </div>
               <div class="control-item">
-                <label>Hover Color</label>
-                <input type="color" id="btnHoverColor" value="${widgetConfig.button.hoverColor}">
+                <label>Online Status Text</label>
+                <input type="text" id="pillStatusText" value="${widgetConfig.header.onlineIndicatorText || 'Online'}" placeholder="Online">
               </div>
             </div>
             <div class="customization-group">
@@ -2396,7 +3138,7 @@
               <div class="control-item" id="promptBgColorControl" style="display: ${widgetConfig.promptAnimation?.enabled === true ? 'block' : 'none'};">
                 <label>Background Color/Gradient</label>
                 <input type="text" id="promptBgColor" value="${widgetConfig.promptAnimation?.backgroundColor || 'linear-gradient(135deg, #7c3aed, #4f46e5)'}" placeholder="linear-gradient(135deg, #7c3aed, #4f46e5)">
-                <p style="color: #6b7280; font-size: 11px; margin-top: 4px;">Supports solid colors (e.g., #7c3aed) or gradients</p>
+                <p style="color: #64748b; font-size: 11px; margin-top: 4px;">Supports solid colors (e.g., #7c3aed) or gradients</p>
               </div>
               <div class="control-item" id="promptTextColorControl" style="display: ${widgetConfig.promptAnimation?.enabled === true ? 'block' : 'none'};">
                 <label>Text Color</label>
@@ -2413,7 +3155,7 @@
               <div class="control-item" id="promptHideAfterSecondsControl" style="display: ${widgetConfig.promptAnimation?.enabled === true ? 'block' : 'none'};">
                 <label>Auto-Hide After (seconds)</label>
                 <input type="number" id="promptHideAfterSeconds" value="${widgetConfig.promptAnimation?.hideAfterSeconds || ''}" placeholder="Leave empty for never" min="0" step="1">
-                <p style="color: #6b7280; font-size: 11px; margin-top: 4px;">Leave empty to never auto-hide</p>
+                <p style="color: #64748b; font-size: 11px; margin-top: 4px;">Leave empty to never auto-hide</p>
               </div>
               <div class="control-item" id="promptPositionControl" style="display: ${widgetConfig.promptAnimation?.enabled === true ? 'block' : 'none'};">
                 <label>Position</label>
@@ -2454,39 +3196,19 @@
         case 'header':
           controlsHTML = `
             <div class="customization-group">
-              <h3>Header</h3>
+              <h3>Widget Identity</h3>
+              <p style="color: #64748b; font-size: 12px; margin-bottom: 12px;">Controls the title and status shown in the pill launcher.</p>
               <div class="control-item">
                 <label>Title Text</label>
                 <input type="text" id="headerTitle" value="${widgetConfig.header.title}" placeholder="Chat Assistant">
               </div>
               <div class="control-item">
-                <label>Background Color</label>
-                <input type="color" id="headerBgColor" value="${widgetConfig.header.backgroundColor}">
-              </div>
-              <div class="control-item">
-                <label>Text Color</label>
-                <input type="color" id="headerTextColor" value="${widgetConfig.header.textColor}">
+                <label>Online Status Text</label>
+                <input type="text" id="onlineIndicatorText" value="${widgetConfig.header.onlineIndicatorText || 'Online'}" placeholder="Online">
               </div>
               <div class="control-item">
-                <label>
-                  <input type="checkbox" id="headerShowClose" ${widgetConfig.header.showCloseButton ? 'checked' : ''}>
-                  Show Close Button
-                </label>
-              </div>
-              <div class="control-item" style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #374151;">
-                <label style="font-weight: 600; color: #f9fafb; margin-bottom: 8px; display: block;">Online Indicator</label>
-                <div class="control-item">
-                  <label>Indicator Text</label>
-                  <input type="text" id="onlineIndicatorText" value="${widgetConfig.header.onlineIndicatorText || 'Online'}" placeholder="Online">
-                </div>
-                <div class="control-item">
-                  <label>Indicator Text Color</label>
-                  <input type="color" id="onlineIndicatorColor" value="${widgetConfig.header.onlineIndicatorColor || widgetConfig.header.textColor}">
-                </div>
-                <div class="control-item">
-                  <label>Indicator Dot Color</label>
-                  <input type="color" id="onlineIndicatorDotColor" value="${widgetConfig.header.onlineIndicatorDotColor || '#10b981'}">
-                </div>
+                <label>Online Dot Color</label>
+                <input type="color" id="onlineIndicatorDotColor" value="${widgetConfig.header.onlineIndicatorDotColor || '#10b981'}">
               </div>
             </div>
           `;
@@ -2532,7 +3254,7 @@
                 <label>Offset Y (px)</label>
                 <input type="number" id="positionOffsetY" value="${widgetConfig.position.offset.y}">
               </div>
-              <p style="color: #6b7280; font-size: 12px; margin-top: 8px;">
+              <p style="color: #64748b; font-size: 12px; margin-top: 8px;">
                 Position of the floating button and widget on the page.
               </p>
             </div>
@@ -2545,7 +3267,7 @@
                   <option value="rtl" ${widgetConfig.direction === 'rtl' ? 'selected' : ''}>Right to Left (RTL)</option>
                 </select>
               </div>
-              <p style="color: #6b7280; font-size: 12px; margin-top: 8px;">
+              <p style="color: #64748b; font-size: 12px; margin-top: 8px;">
                 Text direction for the widget. Use RTL for languages like Arabic or Hebrew.
               </p>
             </div>
@@ -2577,7 +3299,7 @@
                 <label>Offset Y (px)</label>
                 <input type="number" id="positionOffsetY" value="${widgetConfig.position.offset.y}">
               </div>
-              <p style="color: #6b7280; font-size: 12px; margin-top: 8px;">
+              <p style="color: #64748b; font-size: 12px; margin-top: 8px;">
                 Position of the floating button and widget on the page.
               </p>
             </div>
@@ -2594,7 +3316,7 @@
                   <option value="rtl" ${widgetConfig.direction === 'rtl' ? 'selected' : ''}>Right to Left (RTL)</option>
                 </select>
               </div>
-              <p style="color: #6b7280; font-size: 12px; margin-top: 8px;">
+              <p style="color: #64748b; font-size: 12px; margin-top: 8px;">
                 Text direction for the widget. Use RTL for languages like Arabic or Hebrew.
               </p>
             </div>
@@ -2621,17 +3343,17 @@
                 <label>Agent Message Text Color</label>
                 <input type="color" id="msgAgentTextColor" value="${widgetConfig.messages.agentTextColor || widgetConfig.messages.textColor || '#1F2937'}">
               </div>
-              <div class="control-item" style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #374151;">
-                <label style="font-weight: 600; color: #f9fafb; margin-bottom: 8px; display: block;">Message Avatars</label>
+              <div class="control-item" style="margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08);">
+                <label style="font-weight: 600; color: #e2e8f0; margin-bottom: 8px; display: block;">Message Avatars</label>
                 <div class="control-item">
                   <label>User Avatar Icon</label>
                   <input type="text" id="msgUserAvatarIcon" value="${widgetConfig.messages.userAvatarIcon || '👤'}" placeholder="👤">
-                  <p style="color: #6b7280; font-size: 11px; margin-top: 4px;">Emoji or text to display next to user messages</p>
+                  <p style="color: #64748b; font-size: 11px; margin-top: 4px;">Emoji or text to display next to user messages</p>
                 </div>
                 <div class="control-item">
                   <label>Agent Avatar Icon</label>
                   <input type="text" id="msgAgentAvatarIcon" value="${widgetConfig.messages.agentAvatarIcon || '🤖'}" placeholder="🤖">
-                  <p style="color: #6b7280; font-size: 11px; margin-top: 4px;">Emoji or text to display next to agent messages</p>
+                  <p style="color: #64748b; font-size: 11px; margin-top: 4px;">Emoji or text to display next to agent messages</p>
                 </div>
               </div>
               <div class="control-item">
@@ -2642,7 +3364,7 @@
                 <label>Border Radius (px)</label>
                 <input type="number" id="msgRadius" value="${widgetConfig.messages.borderRadius}">
               </div>
-              <p style="color: #6b7280; font-size: 12px; margin-top: 8px;">
+              <p style="color: #64748b; font-size: 12px; margin-top: 8px;">
                 Note: Message text content is controlled by your agent, not the widget configuration.
               </p>
             </div>
@@ -2804,7 +3526,7 @@
                 <label>Font Size</label>
                 <input type="text" id="liveTranscriptFontSize" value="${widgetConfig.voice.liveTranscriptFontSize || '14px'}" placeholder="14px">
               </div>
-              <p style="color: #6b7280; font-size: 12px; margin-top: 8px;">
+              <p style="color: #64748b; font-size: 12px; margin-top: 8px;">
                 This is the live transcript shown when history is collapsed. It displays only the current spoken text (max 2 lines).
               </p>
             </div>
@@ -2841,167 +3563,165 @@
           controlsHTML = `
             <div class="customization-group">
               <h3>Conversation History</h3>
-              <p style="color: #6b7280; font-size: 14px; margin-top: 8px;">
+              <p style="color: #64748b; font-size: 14px; margin-top: 8px;">
                 This is the expanded conversation history view showing all messages.
               </p>
             </div>
           `;
           break;
-        case 'agentAvatar':
+        case 'heroAvatar':
           controlsHTML = `
             <div class="customization-group">
-              <h3>Agent Avatar (Next to Messages)</h3>
+              <h3>Hero Avatar</h3>
+              <p style="color: #64748b; font-size: 12px; margin-bottom: 12px;">The avatar circle in the hero header. Shows the first letter of the agent name.</p>
               <div class="control-item">
-                <label>Display Type</label>
-                <select id="agentAvatarType">
-                  <option value="icon" ${widgetConfig.voice.avatarType === 'icon' || !widgetConfig.voice.avatarType ? 'selected' : ''}>Icon</option>
-                  <option value="image" ${widgetConfig.voice.avatarType === 'image' ? 'selected' : ''}>Image URL</option>
-                </select>
-              </div>
-              <div class="control-item" id="agentAvatarIconControl" style="display: ${widgetConfig.voice.avatarType === 'image' ? 'none' : 'block'};">
-                <label>Icon (Emoji or Text)</label>
-                <input type="text" id="agentAvatarIcon" value="${widgetConfig.voice.avatarIcon || '🤖'}" placeholder="🤖">
+                <label>Gradient Start Color</label>
+                <input type="color" id="heroAvatarGrad1" value="${widgetConfig.voice?.avatarGradient1 || '#6d56f5'}">
               </div>
-              <div class="control-item" id="agentAvatarImageControl" style="display: ${widgetConfig.voice.avatarType === 'image' ? 'block' : 'none'};">
-                <label>Image URL</label>
-                <input type="text" id="agentAvatarImageUrl" value="${widgetConfig.voice.avatarImageUrl || ''}" placeholder="https://example.com/avatar.png">
+              <div class="control-item">
+                <label>Gradient End Color</label>
+                <input type="color" id="heroAvatarGrad2" value="${widgetConfig.voice?.avatarGradient2 || '#a78bfa'}">
               </div>
               <div class="control-item">
-                <label>Background Color</label>
-                <input type="color" id="agentAvatarBg" value="${widgetConfig.voice.avatarBackgroundColor}">
+                <label>Online Dot Color</label>
+                <input type="color" id="heroOnlineDotColor" value="${widgetConfig.voice?.onlineDotColor || '#22c55e'}">
               </div>
-              <p style="color: #6b7280; font-size: 12px; margin-top: 8px;">
-                This icon appears next to agent messages in the conversation history.
-              </p>
             </div>
           `;
           break;
-        case 'liveIndicator':
+        case 'heroAgentName':
           controlsHTML = `
             <div class="customization-group">
-              <h3>Live Indicator</h3>
+              <h3>Agent Name</h3>
+              <p style="color: #64748b; font-size: 12px; margin-bottom: 12px;">The agent name shown in the hero header.</p>
               <div class="control-item">
-                <label>Live Dot Color</label>
-                <input type="color" id="liveDotColor" value="${widgetConfig.voice.liveIndicatorDotColor || '#10b981'}">
+                <label>Name Text</label>
+                <input type="text" id="heroAgentNameText" value="${widgetConfig.agentName || 'Sasha'}" placeholder="Sasha">
               </div>
               <div class="control-item">
-                <label>Live Text Color</label>
-                <input type="color" id="liveTextColor" value="${widgetConfig.voice.liveIndicatorTextColor || '#10b981'}">
+                <label>Text Color</label>
+                <input type="color" id="heroAgentNameColor" value="${widgetConfig.voice?.agentNameColor || '#f0eff8'}">
               </div>
             </div>
           `;
           break;
-        case 'landingLogo':
+        case 'heroAgentRole':
           controlsHTML = `
             <div class="customization-group">
-              <h3>Landing Screen - Logo</h3>
+              <h3>Agent Role</h3>
+              <p style="color: #64748b; font-size: 12px; margin-bottom: 12px;">The subtitle under the agent name.</p>
               <div class="control-item">
-                <label>Display Type</label>
-                <select id="logoType">
-                  <option value="icon" ${widgetConfig.landing.logoType === 'icon' || !widgetConfig.landing.logoType ? 'selected' : ''}>Icon</option>
-                  <option value="image" ${widgetConfig.landing.logoType === 'image' ? 'selected' : ''}>Image URL</option>
-                </select>
+                <label>Role Text</label>
+                <input type="text" id="heroAgentRoleText" value="${widgetConfig.voice?.agentRole || 'AI Voice Assistant'}" placeholder="AI Voice Assistant">
               </div>
-              <div class="control-item" id="logoIconControl" style="display: ${widgetConfig.landing.logoType === 'image' ? 'none' : 'block'};">
-                <label>Icon (Emoji or Text)</label>
-                <input type="text" id="landingLogoIcon" value="${widgetConfig.landing.logoIcon || widgetConfig.landing.logo || '🤖'}" placeholder="🤖">
+              <div class="control-item">
+                <label>Text Color</label>
+                <input type="color" id="heroAgentRoleColor" value="${widgetConfig.voice?.agentRoleColor || '#594d80'}">
+                <p style="color: #64748b; font-size: 11px; margin-top: 4px;">Default is semi-transparent white.</p>
               </div>
-              <div class="control-item" id="logoImageControl" style="display: ${widgetConfig.landing.logoType === 'image' ? 'block' : 'none'};">
-                <label>Image URL</label>
-                <input type="text" id="landingLogoImageUrl" value="${widgetConfig.landing.logoImageUrl || ''}" placeholder="https://example.com/logo.png">
+            </div>
+          `;
+          break;
+        case 'heroHeadline':
+          controlsHTML = `
+            <div class="customization-group">
+              <h3>Hero Headline</h3>
+              <p style="color: #64748b; font-size: 12px; margin-bottom: 12px;">The main greeting text in the hero.</p>
+              <div class="control-item">
+                <label>Headline Text</label>
+                <input type="text" id="heroHeadlineText" value="${widgetConfig.voice?.headline || 'Hi there 👋'}" placeholder="Hi there 👋">
               </div>
-              <div class="control-item" id="logoBackgroundControl" style="display: ${widgetConfig.landing.logoType === 'image' ? 'block' : 'none'}; margin-top: 16px; padding-top: 16px; border-top: 1px solid #374151;">
-                <label style="font-weight: 600; color: #f9fafb; margin-bottom: 8px; display: block;">Background</label>
-                <div class="control-item">
-                  <label>
-                    <input type="checkbox" id="logoBackgroundEnabled" ${widgetConfig.landing.logoBackgroundEnabled !== false ? 'checked' : ''}>
-                    Enable Background
-                  </label>
-                </div>
-                <div class="control-item" id="logoBackgroundColorControl" style="display: ${widgetConfig.landing.logoBackgroundEnabled !== false ? 'block' : 'none'};">
-                  <label>Background Color</label>
-                  <input type="color" id="logoBackgroundColor" value="${widgetConfig.landing.logoBackgroundColor && widgetConfig.landing.logoBackgroundColor.startsWith('#') ? widgetConfig.landing.logoBackgroundColor : '#667eea'}">
-                  <p style="color: #6b7280; font-size: 11px; margin-top: 4px;">
-                    Background color for the logo container. Uncheck "Enable Background" to make it transparent.
-                  </p>
-                </div>
+              <div class="control-item">
+                <label>Text Color</label>
+                <input type="color" id="heroHeadlineColor" value="${widgetConfig.voice?.headlineColor || '#ffffff'}">
               </div>
             </div>
           `;
           break;
-        case 'landingTitle':
+        case 'heroSubline':
           controlsHTML = `
             <div class="customization-group">
-              <h3>Landing Screen - Title</h3>
+              <h3>Hero Subline</h3>
+              <p style="color: #64748b; font-size: 12px; margin-bottom: 12px;">The description text below the headline.</p>
               <div class="control-item">
-                <label>Title Text</label>
-                <input type="text" id="landingTitleText" value="${widgetConfig.landing.title || 'Welcome to AI Assistant'}" placeholder="Welcome to AI Assistant">
+                <label>Subline Text</label>
+                <input type="text" id="heroSublineText" value="${(widgetConfig.voice?.subline || 'Ask me anything — I respond instantly in voice or text.').replace(/<br>/g, ' ')}" placeholder="Ask me anything...">
               </div>
               <div class="control-item">
-                <label>Title Color</label>
-                <input type="color" id="landingTitleColor" value="${widgetConfig.landing.titleColor}">
+                <label>Text Color</label>
+                <input type="color" id="heroSublineColor" value="${widgetConfig.voice?.sublineColor || '#736b8a'}">
+                <p style="color: #64748b; font-size: 11px; margin-top: 4px;">Default is semi-transparent white.</p>
               </div>
             </div>
           `;
           break;
-        case 'landingSubtitle':
+        case 'heroBackground':
           controlsHTML = `
             <div class="customization-group">
-              <h3>Landing Screen - Subtitle</h3>
+              <h3>Hero Background</h3>
+              <p style="color: #64748b; font-size: 12px; margin-bottom: 12px;">The gradient background of the hero section.</p>
               <div class="control-item">
-                <label>Subtitle Text</label>
-                <input type="text" id="landingSubtitleText" value="${widgetConfig.landing.subtitle || 'Choose how you\'d like to interact'}" placeholder="Choose how you'd like to interact">
+                <label>Gradient Start Color</label>
+                <input type="color" id="heroBgGrad1" value="${widgetConfig.voice?.heroGradient1 || '#2a2550'}">
               </div>
               <div class="control-item">
-                <label>Subtitle Color</label>
-                <input type="color" id="landingSubtitleColor" value="${widgetConfig.landing.subtitleColor}">
+                <label>Gradient End Color</label>
+                <input type="color" id="heroBgGrad2" value="${widgetConfig.voice?.heroGradient2 || '#1a1a2e'}">
               </div>
             </div>
           `;
           break;
-        case 'landingBackground':
-          // Extract color from gradient or use default
-          const currentBg = widgetConfig.landing.backgroundColor || 'linear-gradient(180deg, #ffffff 0%, rgba(168, 85, 247, 0.03) 100%)';
-          let defaultColor = '#ffffff';
-          if (currentBg.startsWith('#')) {
-            defaultColor = currentBg;
-          } else if (currentBg.includes('#')) {
-            // Extract the first hex color from gradient (usually the main color)
-            const hexMatch = currentBg.match(/#[0-9a-fA-F]{6}/);
-            if (hexMatch) defaultColor = hexMatch[0];
-          }
+        case 'heroPrimaryBtn':
           controlsHTML = `
             <div class="customization-group">
-              <h3>Landing Screen - Background</h3>
+              <h3>Start Voice Call Button</h3>
+              <p style="color: #64748b; font-size: 12px; margin-bottom: 12px;">Primary action button in the hero.</p>
               <div class="control-item">
-                <label>Background Color</label>
-                <input type="color" id="landingBgColor" value="${defaultColor}">
-                <p style="color: #6b7280; font-size: 11px; margin-top: 4px;">
-                  Pick a solid color for the background. Default uses a subtle gradient.
-                </p>
+                <label>Button Text</label>
+                <input type="text" id="heroPrimaryBtnText" value="${widgetConfig.voice?.startCallButtonText || 'Start Voice Call'}" placeholder="Start Voice Call">
+              </div>
+              <div class="control-item">
+                <label>Gradient Start Color</label>
+                <input type="color" id="heroPrimaryBtnGrad1" value="${widgetConfig.voice?.primaryBtnGradient1 || '#6d56f5'}">
+              </div>
+              <div class="control-item">
+                <label>Gradient End Color</label>
+                <input type="color" id="heroPrimaryBtnGrad2" value="${widgetConfig.voice?.primaryBtnGradient2 || '#9d8df8'}">
+              </div>
+              <div class="control-item">
+                <label>Text Color</label>
+                <input type="color" id="heroPrimaryBtnTextColor" value="${widgetConfig.voice?.startCallButtonTextColor || '#ffffff'}">
               </div>
             </div>
           `;
           break;
-        case 'modeCard':
+        case 'heroSecondaryBtn':
           controlsHTML = `
             <div class="customization-group">
-              <h3>Mode Cards (Voice/Text Buttons)</h3>
+              <h3>Send a Message Button</h3>
+              <p style="color: #64748b; font-size: 12px; margin-bottom: 12px;">Secondary action button in the hero.</p>
               <div class="control-item">
-                <label>Voice Card Title</label>
-                <input type="text" id="voiceCardTitle" value="Voice Call" placeholder="Voice Call">
+                <label>Button Text</label>
+                <input type="text" id="heroSecondaryBtnText" value="${widgetConfig.voice?.sendMessageText || 'Send a Message'}" placeholder="Send a Message">
               </div>
               <div class="control-item">
-                <label>Text Card Title</label>
-                <input type="text" id="textCardTitle" value="Text Chat" placeholder="Text Chat">
+                <label>Background Color</label>
+                <input type="color" id="heroSecondaryBtnBg" value="${widgetConfig.voice?.secondaryBtnBg || '#1a1a2e'}">
+                <p style="color: #64748b; font-size: 11px; margin-top: 4px;">Default is semi-transparent white overlay.</p>
               </div>
               <div class="control-item">
-                <label>Background Color</label>
-                <input type="color" id="modeCardBg" value="${widgetConfig.landing.modeCardBackgroundColor}">
+                <label>Text Color</label>
+                <input type="color" id="heroSecondaryBtnTextColor" value="${widgetConfig.voice?.secondaryBtnTextColor || '#9994ad'}">
+                <p style="color: #64748b; font-size: 11px; margin-top: 4px;">Default is muted white.</p>
               </div>
-              <p style="color: #6b7280; font-size: 12px; margin-top: 8px;">
-                These are the buttons on the landing screen that let users choose between voice and text chat.
-              </p>
+            </div>
+          `;
+          break;
+        case 'closeButton':
+          controlsHTML = `
+            <div class="customization-group">
+              <h3>Close Button</h3>
+              <p style="color: #64748b; font-size: 12px; margin-bottom: 12px;">Closes the widget panel. Double-click to test the interaction.</p>
             </div>
           `;
           break;
@@ -3009,12 +3729,9 @@
           controlsHTML = `
             <div class="customization-group">
               <h3>Select an Element</h3>
-              <p style="color: #6b7280; font-size: 14px; margin-top: 8px;">
+              <p style="color: #64748b; font-size: 13px; margin-top: 8px;">
                 Click on any widget element in the preview to start customizing.
               </p>
-              <p style="color: #6b7280; font-size: 13px; margin-top: 12px;">
-                💡 <strong>Tip:</strong> Click the ⚙️ settings icon on the widget panel to configure panel size, position, and text direction.
-              </p>
             </div>
           `;
       }
@@ -3044,20 +3761,15 @@
       const controlsDiv = document.getElementById('customizationControls');
       if (!controlsDiv) return;
       
-      // Button controls
+      // Button controls (Pill Launcher)
       if (elementType === 'button') {
-        document.getElementById('btnSize')?.addEventListener('change', (e) => {
-          widgetConfig.button.size = e.target.value;
-          applyButtonStyles(document.getElementById('mockButton'));
-          updateConfigCode();
-        });
-        document.getElementById('btnShape')?.addEventListener('change', (e) => {
-          widgetConfig.button.shape = e.target.value;
+        document.getElementById('pillTitle')?.addEventListener('input', (e) => {
+          widgetConfig.header.title = e.target.value;
           applyButtonStyles(document.getElementById('mockButton'));
           updateConfigCode();
         });
-        document.getElementById('btnBgColor')?.addEventListener('input', (e) => {
-          widgetConfig.button.backgroundColor = e.target.value;
+        document.getElementById('pillStatusText')?.addEventListener('input', (e) => {
+          widgetConfig.header.onlineIndicatorText = e.target.value;
           applyButtonStyles(document.getElementById('mockButton'));
           updateConfigCode();
         });
@@ -3149,37 +3861,17 @@
         });
       }
 
-      // Header controls (also applies to onlineIndicator)
+      // Header / Widget Identity controls
       if (elementType === 'header' || elementType === 'onlineIndicator') {
         document.getElementById('headerTitle')?.addEventListener('input', (e) => {
           widgetConfig.header.title = e.target.value;
-          renderPanelContent();
-          updateConfigCode();
-        });
-        document.getElementById('headerBgColor')?.addEventListener('input', (e) => {
-          const newColor = e.target.value;
-          console.log('🎨 Header color changed to:', newColor);
-          widgetConfig.header.backgroundColor = newColor;
-          renderPanelContent();
-          updateConfigCode();
-        });
-        document.getElementById('headerTextColor')?.addEventListener('input', (e) => {
-          widgetConfig.header.textColor = e.target.value;
-          renderPanelContent();
-          updateConfigCode();
-        });
-        document.getElementById('headerShowClose')?.addEventListener('change', (e) => {
-          widgetConfig.header.showCloseButton = e.target.checked;
+          applyButtonStyles(document.getElementById('mockButton'));
           renderPanelContent();
           updateConfigCode();
         });
         document.getElementById('onlineIndicatorText')?.addEventListener('input', (e) => {
           widgetConfig.header.onlineIndicatorText = e.target.value;
-          renderPanelContent();
-          updateConfigCode();
-        });
-        document.getElementById('onlineIndicatorColor')?.addEventListener('input', (e) => {
-          widgetConfig.header.onlineIndicatorColor = e.target.value;
+          applyButtonStyles(document.getElementById('mockButton'));
           renderPanelContent();
           updateConfigCode();
         });
@@ -3354,6 +4046,157 @@
         });
       }
 
+      // Hero Avatar controls
+      if (elementType === 'heroAvatar') {
+        document.getElementById('heroAvatarGrad1')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.avatarGradient1 = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+        document.getElementById('heroAvatarGrad2')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.avatarGradient2 = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+        document.getElementById('heroOnlineDotColor')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.onlineDotColor = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+      }
+
+      // Hero Agent Name controls
+      if (elementType === 'heroAgentName') {
+        document.getElementById('heroAgentNameText')?.addEventListener('input', (e) => {
+          widgetConfig.agentName = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+        document.getElementById('heroAgentNameColor')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.agentNameColor = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+      }
+
+      // Hero Agent Role controls
+      if (elementType === 'heroAgentRole') {
+        document.getElementById('heroAgentRoleText')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.agentRole = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+        document.getElementById('heroAgentRoleColor')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.agentRoleColor = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+      }
+
+      // Hero Headline controls
+      if (elementType === 'heroHeadline') {
+        document.getElementById('heroHeadlineText')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.headline = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+        document.getElementById('heroHeadlineColor')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.headlineColor = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+      }
+
+      // Hero Subline controls
+      if (elementType === 'heroSubline') {
+        document.getElementById('heroSublineText')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.subline = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+        document.getElementById('heroSublineColor')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.sublineColor = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+      }
+
+      // Hero Background controls
+      if (elementType === 'heroBackground') {
+        document.getElementById('heroBgGrad1')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.heroGradient1 = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+        document.getElementById('heroBgGrad2')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.heroGradient2 = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+      }
+
+      // Hero Primary Button (Start Voice Call) controls
+      if (elementType === 'heroPrimaryBtn') {
+        document.getElementById('heroPrimaryBtnText')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.startCallButtonText = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+        document.getElementById('heroPrimaryBtnGrad1')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.primaryBtnGradient1 = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+        document.getElementById('heroPrimaryBtnGrad2')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.primaryBtnGradient2 = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+        document.getElementById('heroPrimaryBtnTextColor')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.startCallButtonTextColor = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+      }
+
+      // Hero Secondary Button (Send a Message) controls
+      if (elementType === 'heroSecondaryBtn') {
+        document.getElementById('heroSecondaryBtnText')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.sendMessageText = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+        document.getElementById('heroSecondaryBtnBg')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.secondaryBtnBg = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+        document.getElementById('heroSecondaryBtnTextColor')?.addEventListener('input', (e) => {
+          if (!widgetConfig.voice) widgetConfig.voice = {};
+          widgetConfig.voice.secondaryBtnTextColor = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+      }
+
       // Mic button controls
       if (elementType === 'micButton') {
         document.getElementById('micBtnColor')?.addEventListener('input', (e) => {
@@ -3663,6 +4506,7 @@
 
     // Default configuration values (used to compare and only show changed values)
     const defaultConfig = {
+      agentName: 'Sasha',
       direction: 'ltr',
       button: {
         size: 'medium',
@@ -3679,11 +4523,11 @@
         backgroundColor: '#FFFFFF'
       },
       panel: {
-        width: 360,
+        width: 340,
         height: 550,
-        borderRadius: 24,
-        backgroundColor: '#FFFFFF',
-        border: '1px solid #E5E7EB'
+        borderRadius: 20,
+        backgroundColor: '#16161e',
+        border: '1px solid rgba(255,255,255,0.08)'
       },
       position: {
         vertical: 'bottom',
@@ -3718,6 +4562,9 @@
         inputFocusColor: '#7C3AED'
       },
       voice: {
+        agentRole: 'AI Voice Assistant',
+        headline: 'Hi there 👋',
+        subline: 'Ask me anything — I respond instantly<br>in voice or text.',
         micButtonColor: '#7C3AED',
         micButtonActiveColor: '#EF4444',
         speakerButtonColor: '#FFFFFF',
@@ -3726,7 +4573,7 @@
         avatarType: 'icon',
         avatarIcon: '🤖',
         avatarImageUrl: '',
-        startCallButtonText: 'Start Call',
+        startCallButtonText: 'Start Voice Call',
         startCallButtonColor: '#667eea',
         startCallButtonTextColor: '#FFFFFF',
         statusTitleColor: '#1e293b',
@@ -3739,7 +4586,26 @@
         liveIndicatorTextColor: '#10b981',
         waveformType: 'waveform',
         waveformIcon: '🎤',
-        waveformImageUrl: ''
+        waveformImageUrl: '',
+        waveformBarColor: '#7C3AED',
+        pillGradient: '',
+        pillTextColor: '#ffffff',
+        pillDotColor: '#4ade80',
+        avatarGradient1: '#6d56f5',
+        avatarGradient2: '#a78bfa',
+        onlineDotColor: '#22c55e',
+        heroGradient1: '#2a2550',
+        heroGradient2: '#1a1a2e',
+        agentNameColor: '#f0eff8',
+        agentRoleColor: 'rgba(255,255,255,0.35)',
+        headlineColor: '#ffffff',
+        sublineColor: 'rgba(255,255,255,0.45)',
+        primaryBtnGradient1: '#6d56f5',
+        primaryBtnGradient2: '#9d8df8',
+        secondaryBtnBg: 'rgba(255,255,255,0.05)',
+        secondaryBtnBorder: 'rgba(255,255,255,0.09)',
+        secondaryBtnTextColor: 'rgba(255,255,255,0.6)',
+        sendMessageText: 'Send a Message'
       },
       landing: {
         backgroundColor: 'linear-gradient(180deg, #ffffff 0%, rgba(168, 85, 247, 0.03) 100%)',
@@ -4035,6 +4901,9 @@
           
           // Remove widget elements from DOM (multiple possible selectors)
           const selectors = [
+            '#ttp-widget-shadow-host',
+            '#ttp-widget-container',
+            '#ttp-widget-styles',
             '[id^="ttp-chat-widget-button"]',
             '[id^="ttp-chat-widget-panel"]',
             '[id*="ttp-chat"]',
@@ -4164,13 +5033,208 @@
       isInitializing = false;
     }
 
+    const themePresets = {
+      default: {
+        direction: 'ltr',
+        agentName: 'Sasha',
+        header: { title: 'Chat Assistant', onlineIndicatorText: 'Online' },
+        panel: { backgroundColor: '#16161e', border: '1px solid rgba(255,255,255,0.08)' },
+        voice: {
+          pillGradient: '',
+          pillTextColor: '#ffffff',
+          pillDotColor: '#4ade80',
+          avatarGradient1: '#6d56f5', avatarGradient2: '#a78bfa',
+          onlineDotColor: '#22c55e',
+          heroGradient1: '#2a2550', heroGradient2: '#1a1a2e',
+          agentNameColor: '#f0eff8',
+          agentRoleColor: 'rgba(255,255,255,0.35)',
+          headlineColor: '#ffffff',
+          sublineColor: 'rgba(255,255,255,0.45)',
+          primaryBtnGradient1: '#6d56f5', primaryBtnGradient2: '#9d8df8',
+          startCallButtonTextColor: '#FFFFFF',
+          startCallButtonText: 'Start Voice Call',
+          sendMessageText: 'Send a Message',
+          secondaryBtnBg: 'rgba(255,255,255,0.05)',
+          secondaryBtnBorder: 'rgba(255,255,255,0.09)',
+          secondaryBtnTextColor: 'rgba(255,255,255,0.6)',
+          agentRole: 'AI Voice Assistant',
+          headline: 'Hi there 👋',
+          subline: 'Ask me anything — I respond instantly<br>in voice or text.',
+          waveformBarColor: '#7C3AED',
+          micButtonColor: '#7C3AED',
+          speakerButtonColor: '#FFFFFF',
+          endCallButtonColor: '#ef4444'
+        }
+      },
+      light: {
+        direction: 'ltr',
+        agentName: 'Sasha',
+        header: { title: 'Chat Assistant', onlineIndicatorText: 'Online' },
+        panel: { backgroundColor: '#ffffff', border: '1px solid rgba(0,0,0,0.06)' },
+        voice: {
+          // Pill launcher
+          pillGradient: 'linear-gradient(135deg, #7c3aed, #6d28d9)',
+          pillTextColor: '#ffffff',
+          pillDotColor: '#4ade80',
+          // Hero idle screen
+          avatarGradient1: '#7c3aed', avatarGradient2: '#a78bfa',
+          onlineDotColor: '#22c55e',
+          heroGradient1: '#ede9fe', heroGradient2: '#f5f3ff',
+          agentNameColor: '#1e1b4b',
+          agentRoleColor: '#7c7c8a',
+          headlineColor: '#1e1b4b',
+          sublineColor: '#6b7280',
+          primaryBtnGradient1: '#7c3aed', primaryBtnGradient2: '#a78bfa',
+          startCallButtonTextColor: '#ffffff',
+          startCallButtonText: 'Start Voice Call',
+          sendMessageText: 'Send a Message',
+          secondaryBtnBg: '#f5f3ff',
+          secondaryBtnBorder: 'rgba(124,58,237,0.15)',
+          secondaryBtnTextColor: '#6d28d9',
+          agentRole: 'AI Voice Assistant',
+          headline: 'Hi there 👋',
+          subline: 'Ask me anything — I respond instantly<br>in voice or text.',
+          // Voice call view
+          waveformBarColor: '#8b5cf6',
+          micButtonColor: '#f5f3ff',
+          speakerButtonColor: '#f5f3ff',
+          endCallButtonColor: '#ef4444'
+        }
+      },
+      hebrew: {
+        direction: 'rtl',
+        agentName: 'שרה',
+        header: { title: 'עוזרת חכמה', onlineIndicatorText: 'מחוברת' },
+        panel: { backgroundColor: '#0f172a', border: '1px solid rgba(59,130,246,0.12)' },
+        voice: {
+          pillGradient: 'linear-gradient(135deg, #1e3a5f, #1e40af, #0f172a)',
+          pillTextColor: '#ffffff',
+          pillDotColor: '#34d399',
+          avatarGradient1: '#3b82f6', avatarGradient2: '#1d4ed8',
+          onlineDotColor: '#34d399',
+          heroGradient1: '#1a2744', heroGradient2: '#0f172a',
+          agentNameColor: '#e0e7ff',
+          agentRoleColor: 'rgba(191,219,254,0.4)',
+          headlineColor: '#f0f4ff',
+          sublineColor: 'rgba(191,219,254,0.5)',
+          primaryBtnGradient1: '#3b82f6', primaryBtnGradient2: '#1d4ed8',
+          startCallButtonTextColor: '#ffffff',
+          startCallButtonText: 'התחל שיחה קולית',
+          sendMessageText: 'שלח הודעה',
+          secondaryBtnBg: 'rgba(59,130,246,0.08)',
+          secondaryBtnBorder: 'rgba(59,130,246,0.18)',
+          secondaryBtnTextColor: 'rgba(147,197,253,0.7)',
+          agentRole: 'עוזרת קולית חכמה',
+          headline: 'היי, מה שלומך? 👋',
+          subline: 'שאל/י אותי הכל — אני עונה<br>מיידית בקול או בטקסט.',
+          waveformBarColor: '#3b82f6',
+          micButtonColor: 'rgba(255,255,255,0.9)',
+          speakerButtonColor: 'rgba(255,255,255,0.9)',
+          endCallButtonColor: '#ef4444'
+        }
+      },
+      sunset: {
+        direction: 'ltr',
+        agentName: 'Sasha',
+        header: { title: 'Chat Assistant', onlineIndicatorText: 'Online' },
+        panel: { backgroundColor: '#140a1e', border: '1px solid rgba(249,115,22,0.12)' },
+        voice: {
+          // Pill launcher
+          pillGradient: 'linear-gradient(135deg, #9f1239, #7c2d12, #581c87)',
+          pillTextColor: '#ffffff',
+          pillDotColor: '#fb923c',
+          // Hero idle screen
+          avatarGradient1: '#f97316', avatarGradient2: '#ec4899',
+          onlineDotColor: '#f59e0b',
+          heroGradient1: '#4a1942', heroGradient2: '#1a0a2e',
+          agentNameColor: '#fde8d0',
+          agentRoleColor: 'rgba(255,200,160,0.45)',
+          headlineColor: '#fff1e6',
+          sublineColor: 'rgba(255,200,160,0.55)',
+          primaryBtnGradient1: '#f97316', primaryBtnGradient2: '#ec4899',
+          startCallButtonTextColor: '#ffffff',
+          startCallButtonText: 'Start Voice Call',
+          sendMessageText: 'Send a Message',
+          secondaryBtnBg: 'rgba(249,115,22,0.08)',
+          secondaryBtnBorder: 'rgba(249,115,22,0.18)',
+          secondaryBtnTextColor: 'rgba(255,180,130,0.7)',
+          agentRole: 'AI Voice Assistant',
+          headline: 'Hi there 👋',
+          subline: 'Ask me anything — I respond instantly<br>in voice or text.',
+          // Voice call view
+          waveformBarColor: '#f97316',
+          micButtonColor: 'rgba(255,255,255,0.9)',
+          speakerButtonColor: 'rgba(255,255,255,0.9)',
+          endCallButtonColor: '#e11d48'
+        }
+      },
+      sasha: {
+        direction: 'rtl',
+        agentName: 'סשה',
+        header: { title: 'S-Law | ייעוץ משפטי', onlineIndicatorText: 'מקוונת' },
+        panel: { backgroundColor: '#f8f5ef', border: '1px solid rgba(196,162,101,0.18)' },
+        voice: {
+          pillGradient: 'linear-gradient(135deg, #c4a265, #9e7e4f)',
+          pillTextColor: '#ffffff',
+          pillDotColor: '#22c55e',
+          avatarGradient1: '#c4a265', avatarGradient2: '#9e7e4f',
+          onlineDotColor: '#22c55e',
+          heroGradient1: '#f8f5ef', heroGradient2: '#ebe6de',
+          agentNameColor: '#1e293b',
+          agentRoleColor: '#78716c',
+          headlineColor: '#1e293b',
+          sublineColor: '#6b7280',
+          primaryBtnGradient1: '#c4a265', primaryBtnGradient2: '#9e7e4f',
+          startCallButtonTextColor: '#ffffff',
+          startCallButtonText: 'התחל שיחה קולית',
+          sendMessageText: 'שלח הודעה',
+          secondaryBtnBg: 'rgba(196,162,101,0.08)',
+          secondaryBtnBorder: 'rgba(196,162,101,0.2)',
+          secondaryBtnTextColor: '#9e7e4f',
+          agentRole: 'עורכת דין | S-Law',
+          headline: 'שלום, אני סשה 👋',
+          subline: 'אני כאן לעזור בכל שאלה משפטית —<br>דיני עבודה ומשפט מסחרי.',
+          waveformBarColor: '#c4a265',
+          micButtonColor: '#1e293b',
+          speakerButtonColor: '#1e293b',
+          endCallButtonColor: '#ef4444'
+        }
+      }
+    };
+
+    let activeTheme = 'default';
+
+    function applyTheme(themeName) {
+      const theme = themePresets[themeName];
+      if (!theme) return;
+      activeTheme = themeName;
+
+      Object.assign(widgetConfig.panel, theme.panel);
+      Object.assign(widgetConfig.voice, theme.voice);
+      if (theme.direction !== undefined) widgetConfig.direction = theme.direction;
+      if (theme.agentName !== undefined) widgetConfig.agentName = theme.agentName;
+      if (theme.header) Object.assign(widgetConfig.header, theme.header);
+
+      document.querySelectorAll('.theme-card').forEach(c => c.classList.remove('active'));
+      const card = document.querySelector(`.theme-card[data-theme="${themeName}"]`);
+      if (card) card.classList.add('active');
+
+      applyButtonStyles(document.getElementById('mockButton'));
+      renderPanelContent();
+      updateConfigCode();
+
+      const sel = selectedElement;
+      if (sel) showCustomizationControls(sel);
+    }
+
     function resetToDefaults() {
       widgetConfig = {
+        agentName: 'Sasha',
         button: {
           size: 'medium',
           shape: 'circle',
           backgroundColor: '#FFFFFF',
-          hoverColor: '#D3D3D3', // SDK default: light gray
+          hoverColor: '#D3D3D3',
           shadow: true,
           shadowColor: 'rgba(0,0,0,0.15)'
         },
@@ -4181,11 +5245,11 @@
           backgroundColor: '#FFFFFF'
         },
         panel: {
-          width: 360,
-          height: 550, // Updated from SDK default 500
-          borderRadius: 24,
-          backgroundColor: '#FFFFFF',
-          border: '1px solid #E5E7EB'
+          width: 340,
+          height: 550,
+          borderRadius: 20,
+          backgroundColor: '#16161e',
+          border: '1px solid rgba(255,255,255,0.08)'
         },
         direction: 'ltr',
         position: {
@@ -4205,7 +5269,7 @@
         messages: {
           userBackgroundColor: '#E5E7EB',
           agentBackgroundColor: '#F3F4F6',
-          textColor: '#1F2937', // Fallback for backward compatibility
+          textColor: '#1F2937',
           userTextColor: '#1F2937',
           agentTextColor: '#1F2937',
           userAvatarIcon: '👤',
@@ -4221,6 +5285,9 @@
           inputFocusColor: '#7C3AED'
         },
         voice: {
+          agentRole: 'AI Voice Assistant',
+          headline: 'Hi there 👋',
+          subline: 'Ask me anything — I respond instantly<br>in voice or text.',
           micButtonColor: '#7C3AED',
           micButtonActiveColor: '#EF4444',
           speakerButtonColor: '#FFFFFF',
@@ -4229,7 +5296,7 @@
           avatarType: 'icon',
           avatarIcon: '🤖',
           avatarImageUrl: '',
-          startCallButtonText: 'Start Call',
+          startCallButtonText: 'Start Voice Call',
           startCallButtonColor: '#667eea',
           startCallButtonTextColor: '#FFFFFF',
           statusTitleColor: '#1e293b',
@@ -4242,7 +5309,11 @@
           liveIndicatorTextColor: '#10b981',
           waveformType: 'waveform',
           waveformIcon: '🎤',
-          waveformImageUrl: ''
+          waveformImageUrl: '',
+          waveformBarColor: '#7C3AED',
+          pillGradient: '',
+          pillTextColor: '#ffffff',
+          pillDotColor: '#4ade80'
         },
         landing: {
           logo: '🤖',
@@ -4262,6 +5333,11 @@
         }
       };
       
+      activeTheme = 'default';
+      document.querySelectorAll('.theme-card').forEach(c => c.classList.remove('active'));
+      const defCard = document.querySelector('.theme-card[data-theme="default"]');
+      if (defCard) defCard.classList.add('active');
+
       initMockWidget();
       updateMockWidgetPosition();
       updateConfigCode();
@@ -4275,6 +5351,11 @@
     // No edit mode toggle needed - single click = edit, double click = interact
 
     // Initialize
+    document.getElementById('themeDefault').addEventListener('click', () => applyTheme('default'));
+    document.getElementById('themeLight').addEventListener('click', () => applyTheme('light'));
+    document.getElementById('themeSunset').addEventListener('click', () => applyTheme('sunset'));
+    document.getElementById('themeHebrew').addEventListener('click', () => applyTheme('hebrew'));
+    document.getElementById('themeSasha').addEventListener('click', () => applyTheme('sasha'));
     document.getElementById('resetBtn').addEventListener('click', resetToDefaults);
     document.getElementById('togglePanelBtn').addEventListener('click', () => {
       panelOpen = !panelOpen;