ttp-agent-sdk 2.34.0 → 2.34.4

package/examples/widget-customization.html

@@ -325,8 +325,7 @@
 
     .mock-widget {
       position: absolute;
-      bottom: 60px;
-      right: 60px;
+      /* Position is set dynamically via updateMockWidgetPosition() */
       z-index: 1000;
       /* Ensure widget doesn't get clipped */
       min-width: 360px;
@@ -402,10 +401,7 @@
         min-width: 450px;
       }
       
-      .mock-widget {
-        bottom: 20px;
-        right: 20px;
-      }
+      /* Position is set dynamically via updateMockWidgetPosition() */
     }
 
     @media (max-width: 1200px) {
@@ -423,7 +419,15 @@
     }
 
     /* Mock widget styles - will be dynamically generated */
+    .mock-button-container {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
     .mock-widget-button {
+      position: relative;
       width: 60px;
       height: 60px;
       border-radius: 50%;
@@ -436,17 +440,150 @@
       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);
     }
+    
+    /* Prompt bubble styles */
+    .mock-prompt-bubble {
+      position: absolute;
+      z-index: 10002;
+      pointer-events: none;
+      white-space: nowrap;
+    }
+    
+    .mock-prompt-bubble.top {
+      bottom: calc(100% + 18px);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    
+    .mock-prompt-bubble.left {
+      right: calc(100% + 12px);
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    
+    .mock-prompt-bubble.right {
+      left: calc(100% + 12px);
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    
+    .mock-prompt-bubble-content {
+      position: relative;
+      padding: 8px 16px;
+      border-radius: 20px;
+      font-weight: 500;
+      font-size: 14px;
+      box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
+      overflow: hidden;
+    }
+    
+    .mock-prompt-bubble-shimmer {
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
+      animation: mock-shimmer 2s infinite;
+    }
+    
+    @keyframes mock-shimmer {
+      0% { transform: translateX(-100%); }
+      100% { transform: translateX(200%); }
+    }
+    
+    @keyframes mock-bounce {
+      0%, 100% { transform: translateX(-50%) translateY(0); }
+      50% { transform: translateX(-50%) translateY(-10px); }
+    }
+    
+    @keyframes mock-float {
+      0%, 100% { transform: translateX(-50%) translateY(0); }
+      50% { transform: translateX(-50%) translateY(-8px); }
+    }
+    
+    @keyframes mock-pulse-ring {
+      0% { transform: scale(1); opacity: 0.4; }
+      100% { transform: scale(1.8); opacity: 0; }
+    }
+    
+    .mock-prompt-bubble.animation-bounce {
+      animation: mock-bounce 1s ease-in-out infinite;
+    }
+    
+    .mock-prompt-bubble.animation-pulse {
+      animation: pulse 2s ease-in-out infinite;
+    }
+    
+    .mock-prompt-bubble.animation-float {
+      animation: mock-float 2s ease-in-out infinite;
+    }
+    
+    /* Ensure top-positioned bubbles maintain horizontal centering during animations */
+    .mock-prompt-bubble.top.animation-bounce,
+    .mock-prompt-bubble.top.animation-float,
+    .mock-prompt-bubble.top.animation-pulse {
+      /* Animation keyframes already include translateX(-50%) for centering */
+    }
+    
+    .mock-prompt-bubble-arrow {
+      position: absolute;
+      width: 0;
+      height: 0;
+      border: 8px solid transparent;
+    }
+    
+    .mock-prompt-bubble.top .mock-prompt-bubble-arrow {
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border-top-color: var(--mock-prompt-bg-color, #7c3aed);
+      border-bottom: none;
+      margin-left: 0;
+    }
+    
+    .mock-prompt-bubble.left .mock-prompt-bubble-arrow {
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      border-left-color: var(--mock-prompt-bg-color, #7c3aed);
+      border-right: none;
+    }
+    
+    .mock-prompt-bubble.right .mock-prompt-bubble-arrow {
+      right: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      border-right-color: var(--mock-prompt-bg-color, #7c3aed);
+      border-left: none;
+    }
+    
+    .mock-pulse-rings {
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      pointer-events: none;
+    }
+    
+    .mock-pulse-ring {
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      animation: mock-pulse-ring 2s ease-out infinite;
+    }
+    
+    .mock-pulse-ring:nth-child(2) {
+      animation-delay: 0.5s;
+    }
 
     .mock-widget-panel {
-      position: absolute;
-      bottom: 20px;
-      right: 0;
+      position: relative;
+      /* Position is controlled by parent .mock-widget */
       width: 360px;
       height: 550px;
       background: white;
@@ -494,80 +631,116 @@
     .mock-panel-content {
       flex: 1;
       overflow-y: auto;
-      padding: 20px;
+      padding: 0; /* Remove padding so landing screen fills entire area */
     }
 
     .mock-landing-screen {
       display: flex;
       flex-direction: column;
       align-items: center;
-      justify-content: center;
-      height: 100%;
-      padding: 40px 20px;
+      justify-content: flex-start;
+      flex: 1;
+      padding: 32px 24px;
       text-align: center;
+      overflow-y: auto;
+      min-height: 0;
+      width: 100%;
+      /* Background will be set inline via style attribute to match widget config */
     }
 
     .mock-landing-logo {
-      font-size: 64px;
-      margin-bottom: 16px;
+      width: 88px;
+      height: 88px;
+      border-radius: 22px;
+      margin-bottom: 20px;
       display: flex;
       align-items: center;
       justify-content: center;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      box-shadow: 0 8px 28px rgba(102, 126, 234, 0.35);
+      border: none; /* No border by default - will be overridden by inline styles */
     }
 
     .mock-landing-logo img {
       display: block;
+      border: none !important;
+      outline: none !important;
     }
 
     .mock-landing-title {
-      font-size: 24px;
-      font-weight: 700;
-      color: #1e293b;
-      margin-bottom: 8px;
+      font-size: 20px;
+      font-weight: 600;
+      color: #1e1b4b;
+      margin-bottom: 6px;
+      line-height: 1.3;
     }
 
     .mock-landing-subtitle {
       font-size: 14px;
       color: #64748b;
-      margin-bottom: 32px;
+      margin-bottom: 28px;
     }
 
     .mock-mode-cards {
       display: flex;
-      gap: 16px;
+      gap: 12px;
       width: 100%;
+      justify-content: center;
     }
 
     .mock-mode-card {
       flex: 1;
+      max-width: 160px;
       background: white;
-      border: 2px solid #e5e7eb;
-      border-radius: 12px;
-      padding: 24px;
+      border: 1px solid rgba(0, 0, 0, 0.06);
+      border-radius: 18px;
+      padding: 20px 16px;
       cursor: pointer;
-      transition: all 0.2s;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
     }
 
     .mock-mode-card:hover {
-      border-color: #667eea;
-      transform: translateY(-2px);
+      transform: translateY(-4px);
+      box-shadow: 0 8px 24px rgba(124, 58, 237, 0.2);
+      border-color: rgba(124, 58, 237, 0.3);
     }
 
     .mock-mode-icon {
-      font-size: 32px;
-      margin-bottom: 12px;
+      width: 56px;
+      height: 56px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 16px;
+      background: #7C3AED;
+      color: #fff;
+      box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
+    }
+
+    .mock-mode-icon svg {
+      stroke: white;
+      fill: none;
     }
 
     .mock-mode-title {
-      font-size: 16px;
+      font-size: 14px;
       font-weight: 600;
-      color: #1e293b;
-      margin-bottom: 4px;
+      color: #1e1b4b;
+      text-align: center;
     }
 
     .mock-mode-desc {
-      font-size: 12px;
-      color: #64748b;
+      display: none; /* Hide description to match real widget */
+    }
+    
+    @keyframes pulse {
+      0%, 100% { transform: scale(1); opacity: 1; }
+      50% { transform: scale(1.15); opacity: 0.8; }
     }
 
     .mock-text-interface {
@@ -586,21 +759,57 @@
     }
 
     .mock-message {
+      display: flex;
+      gap: 8px;
+      align-items: center;
       max-width: 75%;
+      padding: 4px 0;
+    }
+
+    .mock-message.user {
+      align-self: flex-end;
+      flex-direction: row-reverse; /* Avatar on right for LTR */
+    }
+
+    .mock-message.agent {
+      align-self: flex-start;
+      flex-direction: row; /* Avatar on left for LTR */
+    }
+
+    /* RTL support - reverse flex direction */
+    .mock-text-interface[style*="direction: rtl"] .mock-message.user {
+      flex-direction: row; /* Avatar on left for RTL */
+    }
+
+    .mock-text-interface[style*="direction: rtl"] .mock-message.agent {
+      flex-direction: row-reverse; /* Avatar on right for RTL */
+    }
+
+    .mock-message-avatar {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      font-size: 18px;
+      line-height: 1;
+      background: transparent;
+    }
+
+    .mock-message-bubble {
       padding: 12px 16px;
       border-radius: 16px;
       font-size: 14px;
       line-height: 1.5;
     }
 
-    .mock-message.user {
-      align-self: flex-end;
+    .mock-message.user .mock-message-bubble {
       background: #E5E7EB;
       color: #1F2937;
     }
 
-    .mock-message.agent {
-      align-self: flex-start;
+    .mock-message.agent .mock-message-bubble {
       background: #F3F4F6;
       color: #1F2937;
     }
@@ -1074,11 +1283,15 @@
       <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" style="position: absolute; bottom: 60px; right: 60px;">
+          <div class="mock-widget" id="mockWidget" data-element-type="position">
             <div class="mock-widget-panel" id="mockPanel">
               <!-- Panel content will be dynamically generated -->
             </div>
-            <button class="mock-widget-button" id="mockButton">🎤</button>
+            <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>
           </div>
         </div>
       </div>
@@ -1156,14 +1369,21 @@
       },
       header: {
         title: 'Chat Assistant',
-        backgroundColor: '#7C3AED',
+        backgroundColor: '#7C3AED', // Default purple
         textColor: '#FFFFFF',
-        showCloseButton: true
+        showCloseButton: true,
+        onlineIndicatorText: 'Online',
+        onlineIndicatorColor: '#FFFFFF',
+        onlineIndicatorDotColor: '#10b981'
       },
       messages: {
         userBackgroundColor: '#E5E7EB',
         agentBackgroundColor: '#F3F4F6',
-        textColor: '#1F2937',
+        textColor: '#1F2937', // Fallback for backward compatibility
+        userTextColor: '#1F2937',
+        agentTextColor: '#1F2937',
+        userAvatarIcon: '👤',
+        agentAvatarIcon: '🤖',
         fontSize: '14px',
         borderRadius: 16
       },
@@ -1177,6 +1397,8 @@
       voice: {
         micButtonColor: '#7C3AED',
         micButtonActiveColor: '#EF4444',
+        speakerButtonColor: '#FFFFFF',
+        endCallButtonColor: '#ef4444',
         avatarBackgroundColor: '#667eea',
         avatarType: 'icon', // 'icon' or 'image'
         avatarIcon: '🤖',
@@ -1186,29 +1408,48 @@
         startCallButtonTextColor: '#FFFFFF',
         statusTitleColor: '#1e293b',
         statusSubtitleColor: '#64748b',
+        statusDotColor: '#10b981',
+        statusText: 'Listening...',
+        liveTranscriptTextColor: '#64748b',
+        liveTranscriptFontSize: '14px',
+        liveIndicatorDotColor: '#10b981',
+        liveIndicatorTextColor: '#10b981',
         waveformType: 'waveform', // 'waveform', 'icon', or 'image'
         waveformIcon: '🎤',
         waveformImageUrl: ''
       },
       landing: {
+        backgroundColor: 'linear-gradient(180deg, #ffffff 0%, rgba(168, 85, 247, 0.03) 100%)', // Default gradient matching real widget
         logo: '🤖',
         logoType: 'icon', // 'icon' or 'image'
         logoIcon: '🤖',
         logoImageUrl: '',
+        logoBackgroundColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        logoBackgroundEnabled: true,
         title: 'Welcome to AI Assistant',
         subtitle: 'Choose how you\'d like to interact',
         voiceCardTitle: 'Voice Call',
-        voiceCardDesc: 'Start a voice conversation',
         textCardTitle: 'Text Chat',
-        textCardDesc: 'Chat via text messages',
         titleColor: '#1e293b',
         subtitleColor: '#64748b',
         modeCardBackgroundColor: '#FFFFFF'
       },
       position: {
         vertical: 'bottom',
-        horizontal: 'right',
+        horizontal: 'left',
         offset: { x: 20, y: 20 }
+      },
+      promptAnimation: {
+        enabled: false,
+        text: 'Try me!',
+        backgroundColor: 'linear-gradient(135deg, #7c3aed, #4f46e5)',
+        textColor: '#ffffff',
+        animationType: 'bounce',
+        showShimmer: true,
+        showPulseRings: true,
+        hideAfterClick: true,
+        hideAfterSeconds: null,
+        position: 'top'
       }
     };
 
@@ -1217,13 +1458,17 @@
     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
+    let isInitializing = true; // Track if we're in the initial load phase
+    let lastClickTime = 0; // Track clicks for double-click detection
+    let lastClickElement = null;
+    let lastClickType = null;
 
     // Initialize mock widget
     function initMockWidget() {
       const mockButton = document.getElementById('mockButton');
       const mockPanel = document.getElementById('mockPanel');
       
-      // Apply button styles
+      // Apply button styles (this will also update prompt bubble)
       applyButtonStyles(mockButton);
       
       // Open panel by default to show defaults
@@ -1236,13 +1481,28 @@
         if (panelOpen) {
           renderPanelContent();
         }
+        // Update prompt bubble visibility based on panel state
+        updatePromptBubble(mockButton);
+        // Sync actual widget state with mock panel
+        syncWidgetWithMockPanel();
       });
 
       // Render initial panel content with defaults
       renderPanelContent();
       
+      // Update prompt bubble visibility (should be hidden since panel starts open)
+      updatePromptBubble(mockButton);
+      
       // Show default customization controls
       showCustomizationControls('default');
+      
+      // Initialize config code to show only appId and agentId
+      updateConfigCode();
+      
+      // Apply initial position after a brief delay to ensure DOM is ready
+      setTimeout(() => {
+        updateMockWidgetPosition();
+      }, 0);
     }
 
     function applyButtonStyles(button) {
@@ -1297,6 +1557,9 @@
       // Make button highlightable
       button.dataset.elementType = 'button';
       
+      // Update prompt bubble if enabled
+      updatePromptBubble(button);
+      
       // Remove old event listeners by replacing the button
       const oldButton = button;
       const newButton = oldButton.cloneNode(true);
@@ -1306,15 +1569,147 @@
       newButton.addEventListener('click', (e) => {
         e.preventDefault();
         e.stopPropagation();
-        handleElementClick('button', newButton, e);
+        
+        // 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');
+          if (panelOpen) {
+            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);
+        }
       });
     }
 
+    function updatePromptBubble(button) {
+      const promptConfig = widgetConfig.promptAnimation || {};
+      const promptBubble = document.getElementById('mockPromptBubble');
+      const pulseRings = document.getElementById('mockPulseRings');
+      
+      if (!promptBubble || !pulseRings) return;
+      
+      // Show/hide prompt bubble - hide when mock panel is open, show when closed
+      if (promptConfig.enabled === true && !panelOpen) {
+        promptBubble.style.display = 'block';
+        
+        // Extract solid color from gradient for arrow
+        let arrowColor = '#7c3aed';
+        if (promptConfig.backgroundColor && promptConfig.backgroundColor.includes('gradient')) {
+          const match = promptConfig.backgroundColor.match(/#[0-9a-fA-F]{6}/);
+          if (match) arrowColor = match[0];
+        } else if (promptConfig.backgroundColor) {
+          arrowColor = promptConfig.backgroundColor;
+        }
+        
+        // Set CSS variable for arrow color
+        promptBubble.style.setProperty('--mock-prompt-bg-color', arrowColor);
+        
+        // Build prompt bubble HTML
+        // Convert 'pulse' to 'bounce' if pulse is selected (pulse option removed)
+        const animationType = promptConfig.animationType === 'pulse' ? 'bounce' : promptConfig.animationType;
+        const animationClass = animationType === 'none' ? '' : `animation-${animationType}`;
+        const shimmerHTML = promptConfig.showShimmer !== false ? '<div class="mock-prompt-bubble-shimmer"></div>' : '';
+        const position = promptConfig.position || 'top';
+        
+        promptBubble.className = `mock-prompt-bubble ${position} ${animationClass}`;
+        promptBubble.innerHTML = `
+          <div class="mock-prompt-bubble-content" style="background: ${promptConfig.backgroundColor || 'linear-gradient(135deg, #7c3aed, #4f46e5)'}; color: ${promptConfig.textColor || '#ffffff'};">
+            ${shimmerHTML}
+            <span style="position: relative; z-index: 1;">${promptConfig.text || 'Try me!'}</span>
+          </div>
+          <div class="mock-prompt-bubble-arrow"></div>
+        `;
+      } else {
+        promptBubble.style.display = 'none';
+      }
+      
+      // Show/hide pulse rings - hide when mock panel is open, show when closed
+      if (promptConfig.enabled === true && promptConfig.showPulseRings !== false && !panelOpen) {
+        pulseRings.style.display = 'block';
+        
+        // Extract solid color from gradient for rings
+        let ringColor = '#7c3aed';
+        if (promptConfig.backgroundColor && promptConfig.backgroundColor.includes('gradient')) {
+          const match = promptConfig.backgroundColor.match(/#[0-9a-fA-F]{6}/);
+          if (match) ringColor = match[0];
+        } else if (promptConfig.backgroundColor) {
+          ringColor = promptConfig.backgroundColor;
+        }
+        
+        pulseRings.innerHTML = `
+          <div class="mock-pulse-ring" style="background-color: ${ringColor}33;"></div>
+          <div class="mock-pulse-ring" style="background-color: ${ringColor}1a;"></div>
+        `;
+      } else {
+        pulseRings.style.display = 'none';
+      }
+    }
+
     function getSizeValue(size) {
       const sizes = { small: 48, medium: 60, large: 72, xl: 84 };
       return sizes[size] || 60;
     }
 
+    function updateMockWidgetPosition() {
+      const mockWidget = document.getElementById('mockWidget');
+      if (!mockWidget) {
+        console.warn('Mock widget not found, retrying...');
+        setTimeout(updateMockWidgetPosition, 100);
+        return;
+      }
+
+      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');
+      }
+      
+      // 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');
       
@@ -1322,8 +1717,12 @@
       mockPanel.style.width = widgetConfig.panel.width + 'px';
       mockPanel.style.height = widgetConfig.panel.height + 'px';
       mockPanel.style.borderRadius = widgetConfig.panel.borderRadius + 'px';
-      mockPanel.style.backgroundColor = widgetConfig.panel.backgroundColor;
+      // 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.direction = widgetConfig.direction || 'ltr';
 
       // Render based on current view
       if (currentView === 'landing') {
@@ -1340,36 +1739,67 @@
 
     function renderLandingScreen(panel) {
       const config = widgetConfig.landing;
+      const iconBgColor = config.modeCardIconBackgroundColor || '#7C3AED';
+      // Determine logo background - use logoBackgroundColor if enabled, otherwise transparent
+      let logoBg = 'transparent';
+      if (config.logoType === 'image' && config.logoBackgroundEnabled !== false) {
+        logoBg = config.logoBackgroundColor || 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
+      } else if (config.logoType === 'icon') {
+        // For icon type, use the default avatar background
+        logoBg = config.avatarBackground || 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
+      }
+      
       panel.innerHTML = `
-        <div class="mock-panel-header" style="background: ${widgetConfig.header.backgroundColor}; color: ${widgetConfig.header.textColor};" data-element-type="header">
-          <span>${widgetConfig.header.title}</span>
+        <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">
-          <div class="mock-landing-screen">
-            <div class="mock-landing-logo" data-element-type="landingLogo">
+        <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-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: 64px; max-height: 64px; object-fit: contain;">
+                <img src="${config.logoImageUrl}" alt="Logo" style="max-width: 44px; max-height: 44px; object-fit: contain;">
               ` : `
-                <span>${config.logoIcon || config.logo || '🤖'}</span>
+                <span style="font-size: 44px; line-height: 1;">${config.logoIcon || config.logo || '🤖'}</span>
               `}
             </div>
-            <div class="mock-landing-title" style="color: ${config.titleColor};" data-element-type="landingTitle">${config.title || 'Welcome to AI Assistant'}</div>
-            <div class="mock-landing-subtitle" style="color: ${config.subtitleColor};" data-element-type="landingSubtitle">${config.subtitle || 'Choose how you\'d like to interact'}</div>
+            <div class="mock-landing-title" style="color: ${config.titleColor || '#1e1b4b'};" data-element-type="landingTitle">${config.title || 'Welcome to AI Assistant'}</div>
+            <div class="mock-landing-subtitle" style="color: ${config.subtitleColor || '#64748b'};" data-element-type="landingSubtitle">${config.subtitle || 'Choose how you\'d like to interact'}</div>
             <div class="mock-mode-cards">
-              <div class="mock-mode-card" style="background: ${config.modeCardBackgroundColor};" data-element-type="modeCard" data-mode="voice">
-                <div class="mock-mode-icon">🎤</div>
-                <div class="mock-mode-title">${config.voiceCardTitle || 'Voice Call'}</div>
-                <div class="mock-mode-desc">${config.voiceCardDesc || 'Start a voice conversation'}</div>
+              <div class="mock-mode-card" style="background: ${config.modeCardBackgroundColor || '#ffffff'}; border: 1px solid ${config.modeCardBorderColor || 'rgba(0, 0, 0, 0.06)'};" data-element-type="modeCard" data-mode="voice">
+                <div class="mock-mode-icon" style="background: ${iconBgColor}; color: #fff; box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 26px; height: 26px;">
+                    <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+                    <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+                    <line x1="12" y1="19" x2="12" y2="23"/>
+                    <line x1="8" y1="23" x2="16" y2="23"/>
+                  </svg>
+                </div>
+                <div class="mock-mode-title" style="color: ${config.modeCardTitleColor || '#1e1b4b'};">${config.voiceCardTitle || 'Voice Call'}</div>
               </div>
-              <div class="mock-mode-card" style="background: ${config.modeCardBackgroundColor};" data-element-type="modeCard" data-mode="text">
-                <div class="mock-mode-icon">💬</div>
-                <div class="mock-mode-title">${config.textCardTitle || 'Text Chat'}</div>
-                <div class="mock-mode-desc">${config.textCardDesc || 'Chat via text messages'}</div>
+              <div class="mock-mode-card" style="background: ${config.modeCardBackgroundColor || '#ffffff'}; border: 1px solid ${config.modeCardBorderColor || 'rgba(0, 0, 0, 0.06)'};" data-element-type="modeCard" data-mode="text">
+                <div class="mock-mode-icon" style="background: ${iconBgColor}; color: #fff; box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 26px; height: 26px;">
+                    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
+                  </svg>
+                </div>
+                <div class="mock-mode-title" style="color: ${config.modeCardTitleColor || '#1e1b4b'};">${config.textCardTitle || 'Text Chat'}</div>
               </div>
             </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>
       `;
       
       // Make elements selectable
@@ -1379,20 +1809,29 @@
     function renderTextInterface(panel) {
       const config = widgetConfig.text;
       panel.innerHTML = `
-        <div class="mock-panel-header" style="background: ${widgetConfig.header.backgroundColor}; color: ${widgetConfig.header.textColor};" data-element-type="header">
+        <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">
+        <div class="mock-text-interface" style="direction: ${widgetConfig.direction || 'ltr'};">
           <div class="mock-messages">
-            <div class="mock-message user" style="background: ${widgetConfig.messages.userBackgroundColor}; color: ${widgetConfig.messages.textColor}; border-radius: ${widgetConfig.messages.borderRadius}px; font-size: ${widgetConfig.messages.fontSize};" data-element-type="userMessage">
-              Hello! How can I help you?
+            <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};">
+                Hello! How can I help you?
+              </div>
             </div>
-            <div class="mock-message agent" style="background: ${widgetConfig.messages.agentBackgroundColor}; color: ${widgetConfig.messages.textColor}; border-radius: ${widgetConfig.messages.borderRadius}px; font-size: ${widgetConfig.messages.fontSize};" data-element-type="agentMessage">
-              Hi! I'm here to assist you. What would you like to know?
+            <div class="mock-message agent" data-element-type="agentMessage">
+              <div class="mock-message-avatar">${widgetConfig.messages.agentAvatarIcon || '🤖'}</div>
+              <div class="mock-message-bubble" style="background: ${widgetConfig.messages.agentBackgroundColor}; color: ${widgetConfig.messages.agentTextColor || widgetConfig.messages.textColor || '#1F2937'}; border-radius: ${widgetConfig.messages.borderRadius}px; font-size: ${widgetConfig.messages.fontSize};">
+                Hi! I'm here to assist you. What would you like to know?
+              </div>
             </div>
-            <div class="mock-message user" style="background: ${widgetConfig.messages.userBackgroundColor}; color: ${widgetConfig.messages.textColor}; border-radius: ${widgetConfig.messages.borderRadius}px; font-size: ${widgetConfig.messages.fontSize};" data-element-type="userMessage">
-              Can you tell me about your features?
+            <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};">
+                Can you tell me about your features?
+              </div>
             </div>
           </div>
           <div class="mock-input-area">
@@ -1410,12 +1849,12 @@
       const config = widgetConfig.voice;
       // Show active call state matching real widget structure
       panel.innerHTML = `
-        <div class="mock-panel-header" style="background: ${widgetConfig.header.backgroundColor}; color: ${widgetConfig.header.textColor};" data-element-type="header">
+        <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;">
-              <div style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></div>
-              <span style="font-size: 12px; opacity: 0.9;">Online</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;">
@@ -1423,7 +1862,7 @@
             ${widgetConfig.header.showCloseButton ? '<button class="mock-panel-close" data-element-type="closeButton">×</button>' : ''}
           </div>
         </div>
-        <div class="mock-voice-interface">
+        <div class="mock-voice-interface" style="direction: ${widgetConfig.direction || 'ltr'};">
           <!-- Voice Section -->
           <!-- Multi-row layout when history is collapsed -->
           <div class="mock-voice-section" id="mockVoiceSectionExpanded">
@@ -1475,19 +1914,19 @@
               <span>Listening...</span>
             </div>
             <div class="mock-voice-controls">
-              <button class="mock-control-btn secondary" data-element-type="micButton" title="Mute">
+              <button class="mock-control-btn secondary" data-element-type="micButton" title="Mute" style="background: ${config.micButtonColor || '#FFFFFF'};">
                 <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                   <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
                   <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
                   <line x1="12" y1="19" x2="12" y2="23"/>
                 </svg>
               </button>
-              <button class="mock-control-btn danger" data-element-type="endCallButton" title="End Call">
+              <button class="mock-control-btn danger" data-element-type="endCallButton" title="End Call" style="background: ${config.endCallButtonColor || '#ef4444'};">
                 <svg fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                   <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z" transform="rotate(135 12 12)"/>
                 </svg>
               </button>
-              <button class="mock-control-btn secondary" data-element-type="speakerButton" title="Speaker">
+              <button class="mock-control-btn secondary" data-element-type="speakerButton" title="Speaker" style="background: ${config.speakerButtonColor || '#FFFFFF'};">
                 <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                   <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
                   <path d="M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07"/>
@@ -1547,7 +1986,7 @@
                 <span>Listening...</span>
               </div>
               <div class="mock-compact-controls">
-                <button class="mock-control-btn secondary" data-element-type="micButton" title="Mute">
+                <button class="mock-control-btn secondary" data-element-type="micButton" title="Mute" style="background: ${config.micButtonColor || '#FFFFFF'};">
                   <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                     <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
                     <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
@@ -1583,11 +2022,11 @@
             
             <!-- Collapsed: Live transcript only (no bubbles) -->
             <div class="mock-live-transcript-collapsed" id="collapsedTranscript" data-element-type="liveTranscript">
-              <div class="mock-live-indicator" data-element-type="liveIndicator">
-                <div class="mock-live-dot"></div>
+              <div class="mock-live-indicator" data-element-type="liveIndicator" style="color: ${config.liveIndicatorTextColor || '#10b981'};">
+                <div class="mock-live-dot" style="background: ${config.liveIndicatorDotColor || '#10b981'};"></div>
                 <span>LIVE</span>
               </div>
-              <div class="mock-live-text-collapsed" data-element-type="liveTranscriptText" style="color: #64748b; font-size: 14px; line-height: 1.6; margin-top: 8px;">
+              <div class="mock-live-text-collapsed" data-element-type="liveTranscriptText" style="color: ${config.liveTranscriptTextColor || '#64748b'}; font-size: ${config.liveTranscriptFontSize || '14px'}; line-height: 1.6; margin-top: 8px;">
                 Hello, I'm Sasha from Bridgewise, How can I help you today?
               </div>
             </div>
@@ -1671,36 +2110,73 @@
       });
       
       elements.forEach(el => {
-        // Skip if this element is inside another element with data-element-type (child elements)
+        // Check if this element is inside another element with data-element-type (child elements)
         const parentWithType = el.parentElement.closest('[data-element-type]');
-        if (parentWithType && parentWithType !== panel) {
-          // This is a child element, make sure it stops propagation
-          const newEl = el.cloneNode(true);
-          if (el.id) newEl.id = el.id;
-          el.parentNode.replaceChild(newEl, el);
-          
-          newEl.addEventListener('click', (e) => {
+        const isChild = parentWithType && parentWithType !== panel;
+        
+        if (isChild) {
+          // This is a child element (e.g., modeCard inside landingBackground)
+          // Attach listener directly to the element
+          el.addEventListener('click', (e) => {
+            // Find the actual element with data-element-type (in case click is on child like icon/title)
+            let targetElement = e.target;
+            let foundElement = null;
+            
+            // Walk up the DOM tree to find the element with data-element-type
+            while (targetElement && targetElement !== panel && targetElement !== document.body) {
+              if (targetElement.hasAttribute && targetElement.hasAttribute('data-element-type')) {
+                foundElement = targetElement;
+                break;
+              }
+              targetElement = targetElement.parentElement;
+            }
+            
+            // Use found element or fallback to the element we're attaching to
+            const elementToUse = foundElement || el;
+            const elementType = elementToUse.getAttribute('data-element-type');
+            
+            console.log('✅ Child element clicked:', elementType, elementToUse.getAttribute('data-mode'), 'clicked on:', e.target.tagName, e.target.className);
+            
+            // Don't stop propagation immediately - let handleElementClick process it
+            handleElementClick(elementType, elementToUse, e);
+            
+            // Only prevent default and stop propagation after handling
             e.preventDefault();
             e.stopPropagation();
-            handleElementClick(newEl.dataset.elementType, newEl, e);
-          });
+          }, true); // Use capture phase - runs before bubbling phase, so it runs BEFORE parent handlers
         } else {
-          // This is a top-level element
-          const newEl = el.cloneNode(true);
-          if (el.id) newEl.id = el.id;
-          el.parentNode.replaceChild(newEl, el);
-          
-          newEl.addEventListener('click', (e) => {
-            // Check if click was on a child element with data-element-type
-            const clickedElement = e.target.closest('[data-element-type]');
-            if (clickedElement && clickedElement !== newEl) {
-              // Click was on a child element, don't handle it here
+          // This is a top-level element (e.g., landingBackground)
+          el.addEventListener('click', (e) => {
+            // IMPORTANT: Check if click is inside ANY child element with data-element-type
+            // Walk up from the target to see if we hit a child element with data-element-type
+            let current = e.target;
+            while (current && current !== el && current !== panel && current !== document.body) {
+              // Check if this element has data-element-type and is a child of el
+              if (current.hasAttribute && current.hasAttribute('data-element-type')) {
+                if (current !== el && el.contains(current)) {
+                  // Found a child element with data-element-type - let it handle the click
+                  console.log('⏭️ Parent ignoring click - child element found:', current.dataset.elementType);
+                  return; // Don't handle - let the child handle it
+                }
+              }
+              current = current.parentElement;
+            }
+            
+            // Also check: if the target itself is inside a child element with data-element-type
+            const closestChild = Array.from(el.querySelectorAll('[data-element-type]')).find(child => {
+              return child !== el && child.contains(e.target);
+            });
+            if (closestChild) {
+              console.log('⏭️ Parent ignoring click - target is inside child:', closestChild.dataset.elementType);
               return;
             }
+            
+            // Only handle clicks directly on this element (not on any child elements)
+            console.log('✅ Parent element clicked directly:', el.dataset.elementType, 'target:', e.target);
             e.preventDefault();
             e.stopPropagation();
-            handleElementClick(newEl.dataset.elementType, newEl, e);
-          });
+            handleElementClick(el.dataset.elementType, el, e);
+          }, false); // Use bubbling phase so child handlers (capture phase) run first
         }
       });
     }
@@ -1734,18 +2210,21 @@
       showCustomizationControls(elementType);
     }
     
-    let lastClickTime = 0;
-    let lastClickElement = null;
-    let lastClickType = null;
-    
     function handleElementClick(elementType, element, event) {
+      // If event was prevented/stopped, don't process
+      if (event && event.defaultPrevented) {
+        return;
+      }
+      
       const currentTime = Date.now();
       const timeSinceLastClick = currentTime - lastClickTime;
       
       // Check if this is a double click (within 400ms and same element type)
+      // Compare by element reference, not just type, to ensure it's the same element
       if (timeSinceLastClick < 400 && lastClickElement && elementType === lastClickType && 
-          lastClickElement.dataset.elementType === element.dataset.elementType) {
+          lastClickElement === element) {
         // Double click detected - perform normal interaction
+        console.log('🖱️ Double click detected on:', elementType);
         lastClickTime = 0;
         lastClickElement = null;
         lastClickType = null;
@@ -1754,6 +2233,7 @@
       }
       
       // Single click - wait to see if there's a second click
+      console.log('🖱️ Single click detected on:', elementType, 'waiting for potential double click...');
       lastClickTime = currentTime;
       lastClickElement = element;
       lastClickType = elementType;
@@ -1761,6 +2241,7 @@
       setTimeout(() => {
         // If no second click happened, treat as single click
         if (lastClickTime === currentTime && lastClickElement === element) {
+          console.log('🖱️ Single click confirmed on:', elementType);
           lastClickTime = 0;
           lastClickElement = null;
           lastClickType = null;
@@ -1788,6 +2269,13 @@
         if (panelOpen) {
           renderPanelContent();
         }
+        // Update prompt bubble visibility based on panel state
+        const mockButton = document.getElementById('mockButton');
+        if (mockButton) {
+          updatePromptBubble(mockButton);
+        }
+        // Sync actual widget state with mock panel
+        syncWidgetWithMockPanel();
       } else if (elementType === 'conversationToggle') {
         // Toggle conversation history
         toggleConversationHistory();
@@ -1893,6 +2381,49 @@
                 <input type="color" id="btnHoverColor" value="${widgetConfig.button.hoverColor}">
               </div>
             </div>
+            <div class="customization-group">
+              <h3>"Try Me" Prompt Animation</h3>
+              <div class="control-item">
+                <label>
+                  <input type="checkbox" id="promptEnabled" ${widgetConfig.promptAnimation?.enabled === true ? 'checked' : ''}>
+                  Enable Prompt Animation
+                </label>
+              </div>
+              <div class="control-item" id="promptControls" style="display: ${widgetConfig.promptAnimation?.enabled === true ? 'block' : 'none'};">
+                <label>Prompt Text</label>
+                <input type="text" id="promptText" value="${widgetConfig.promptAnimation?.text || 'Try me!'}" placeholder="Try me!">
+              </div>
+              <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>
+              </div>
+              <div class="control-item" id="promptTextColorControl" style="display: ${widgetConfig.promptAnimation?.enabled === true ? 'block' : 'none'};">
+                <label>Text Color</label>
+                <input type="color" id="promptTextColor" value="${widgetConfig.promptAnimation?.textColor || '#ffffff'}">
+              </div>
+              <div class="control-item" id="promptAnimationTypeControl" style="display: ${widgetConfig.promptAnimation?.enabled === true ? 'block' : 'none'};">
+                <label>Animation Type</label>
+                <select id="promptAnimationType">
+                  <option value="bounce" ${widgetConfig.promptAnimation?.animationType === 'bounce' ? 'selected' : ''}>Bounce</option>
+                  <option value="float" ${widgetConfig.promptAnimation?.animationType === 'float' ? 'selected' : ''}>Float</option>
+                  <option value="none" ${widgetConfig.promptAnimation?.animationType === 'none' ? 'selected' : ''}>None</option>
+                </select>
+              </div>
+              <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>
+              </div>
+              <div class="control-item" id="promptPositionControl" style="display: ${widgetConfig.promptAnimation?.enabled === true ? 'block' : 'none'};">
+                <label>Position</label>
+                <select id="promptPosition">
+                  <option value="top" ${widgetConfig.promptAnimation?.position === 'top' ? 'selected' : ''}>Top</option>
+                  <option value="left" ${widgetConfig.promptAnimation?.position === 'left' ? 'selected' : ''}>Left</option>
+                  <option value="right" ${widgetConfig.promptAnimation?.position === 'right' ? 'selected' : ''}>Right</option>
+                </select>
+              </div>
+            </div>
             <div class="customization-group">
               <h3>Icon</h3>
               <div class="control-item">
@@ -1919,6 +2450,7 @@
             </div>
           `;
           break;
+        case 'onlineIndicator':
         case 'header':
           controlsHTML = `
             <div class="customization-group">
@@ -1941,6 +2473,21 @@
                   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>
+              </div>
             </div>
           `;
           break;
@@ -1960,10 +2507,6 @@
                 <label>Border Radius (px)</label>
                 <input type="number" id="panelRadius" value="${widgetConfig.panel.borderRadius}">
               </div>
-              <div class="control-item">
-                <label>Background Color</label>
-                <input type="color" id="panelBgColor" value="${widgetConfig.panel.backgroundColor}">
-              </div>
             </div>
             <div class="customization-group">
               <h3>Widget Position</h3>
@@ -2071,8 +2614,25 @@
                 <input type="color" id="msgAgentBg" value="${widgetConfig.messages.agentBackgroundColor}">
               </div>
               <div class="control-item">
-                <label>Text Color</label>
-                <input type="color" id="msgTextColor" value="${widgetConfig.messages.textColor}">
+                <label>User Message Text Color</label>
+                <input type="color" id="msgUserTextColor" value="${widgetConfig.messages.userTextColor || widgetConfig.messages.textColor || '#1F2937'}">
+              </div>
+              <div class="control-item">
+                <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">
+                  <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>
+                </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>
+                </div>
               </div>
               <div class="control-item">
                 <label>Font Size</label>
@@ -2145,10 +2705,6 @@
                 <label>Background Color</label>
                 <input type="color" id="micBtnColor" value="${widgetConfig.voice.micButtonColor}">
               </div>
-              <div class="control-item">
-                <label>Active/Muted Color</label>
-                <input type="color" id="micBtnActive" value="${widgetConfig.voice.micButtonActiveColor}">
-              </div>
             </div>
           `;
           break;
@@ -2158,7 +2714,7 @@
               <h3>End Call Button</h3>
               <div class="control-item">
                 <label>Background Color</label>
-                <input type="color" id="endCallBtnColor" value="#ef4444">
+                <input type="color" id="endCallBtnColor" value="${widgetConfig.voice.endCallButtonColor || '#ef4444'}">
               </div>
             </div>
           `;
@@ -2169,7 +2725,7 @@
               <h3>Speaker Button</h3>
               <div class="control-item">
                 <label>Background Color</label>
-                <input type="color" id="speakerBtnColor" value="#FFFFFF">
+                <input type="color" id="speakerBtnColor" value="${widgetConfig.voice.speakerButtonColor || '#FFFFFF'}">
               </div>
             </div>
           `;
@@ -2222,15 +2778,15 @@
               <h3>Status Text</h3>
               <div class="control-item">
                 <label>Status Text</label>
-                <input type="text" id="statusText" value="Listening..." placeholder="Listening...">
+                <input type="text" id="statusText" value="${widgetConfig.voice.statusText || 'Listening...'}" placeholder="Listening...">
               </div>
               <div class="control-item">
                 <label>Text Color</label>
-                <input type="color" id="statusTitleColor" value="${widgetConfig.voice.statusTitleColor}">
+                <input type="color" id="statusTitleColor" value="${widgetConfig.voice.statusTitleColor || '#1e293b'}">
               </div>
               <div class="control-item">
                 <label>Status Dot Color</label>
-                <input type="color" id="statusDotColor" value="#10b981">
+                <input type="color" id="statusDotColor" value="${widgetConfig.voice.statusDotColor || '#10b981'}">
               </div>
             </div>
           `;
@@ -2242,11 +2798,11 @@
               <h3>Live Transcript (Collapsed View)</h3>
               <div class="control-item">
                 <label>Transcript Text Color</label>
-                <input type="color" id="liveTranscriptColor" value="#64748b">
+                <input type="color" id="liveTranscriptColor" value="${widgetConfig.voice.liveTranscriptTextColor || '#64748b'}">
               </div>
               <div class="control-item">
                 <label>Font Size</label>
-                <input type="text" id="liveTranscriptFontSize" value="14px" placeholder="14px">
+                <input type="text" id="liveTranscriptFontSize" value="${widgetConfig.voice.liveTranscriptFontSize || '14px'}" placeholder="14px">
               </div>
               <p style="color: #6b7280; 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).
@@ -2326,11 +2882,11 @@
               <h3>Live Indicator</h3>
               <div class="control-item">
                 <label>Live Dot Color</label>
-                <input type="color" id="liveDotColor" value="#10b981">
+                <input type="color" id="liveDotColor" value="${widgetConfig.voice.liveIndicatorDotColor || '#10b981'}">
               </div>
               <div class="control-item">
                 <label>Live Text Color</label>
-                <input type="color" id="liveTextColor" value="#10b981">
+                <input type="color" id="liveTextColor" value="${widgetConfig.voice.liveIndicatorTextColor || '#10b981'}">
               </div>
             </div>
           `;
@@ -2354,7 +2910,23 @@
                 <label>Image URL</label>
                 <input type="text" id="landingLogoImageUrl" value="${widgetConfig.landing.logoImageUrl || ''}" placeholder="https://example.com/logo.png">
               </div>
-            </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>
+            </div>
           `;
           break;
         case 'landingTitle':
@@ -2387,6 +2959,30 @@
             </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];
+          }
+          controlsHTML = `
+            <div class="customization-group">
+              <h3>Landing Screen - Background</h3>
+              <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>
+              </div>
+            </div>
+          `;
+          break;
         case 'modeCard':
           controlsHTML = `
             <div class="customization-group">
@@ -2395,18 +2991,10 @@
                 <label>Voice Card Title</label>
                 <input type="text" id="voiceCardTitle" value="Voice Call" placeholder="Voice Call">
               </div>
-              <div class="control-item">
-                <label>Voice Card Description</label>
-                <input type="text" id="voiceCardDesc" value="Start a voice conversation" placeholder="Start a voice conversation">
-              </div>
               <div class="control-item">
                 <label>Text Card Title</label>
                 <input type="text" id="textCardTitle" value="Text Chat" placeholder="Text Chat">
               </div>
-              <div class="control-item">
-                <label>Text Card Description</label>
-                <input type="text" id="textCardDesc" value="Chat via text messages" placeholder="Chat via text messages">
-              </div>
               <div class="control-item">
                 <label>Background Color</label>
                 <input type="color" id="modeCardBg" value="${widgetConfig.landing.modeCardBackgroundColor}">
@@ -2485,6 +3073,65 @@
           applyButtonStyles(document.getElementById('mockButton'));
           updateConfigCode();
         });
+        
+        // Prompt Animation controls
+        document.getElementById('promptEnabled')?.addEventListener('change', (e) => {
+          if (!widgetConfig.promptAnimation) widgetConfig.promptAnimation = {};
+          widgetConfig.promptAnimation.enabled = e.target.checked;
+          const promptControls = document.getElementById('promptControls');
+          const allControls = ['promptControls', 'promptBgColorControl', 'promptTextColorControl', 'promptAnimationTypeControl', 'promptHideAfterSecondsControl', 'promptPositionControl'];
+          allControls.forEach(id => {
+            const el = document.getElementById(id);
+            if (el) el.style.display = e.target.checked ? 'block' : 'none';
+          });
+          applyButtonStyles(document.getElementById('mockButton'));
+          updateConfigCode();
+        });
+        
+        document.getElementById('promptText')?.addEventListener('input', (e) => {
+          if (!widgetConfig.promptAnimation) widgetConfig.promptAnimation = {};
+          widgetConfig.promptAnimation.text = e.target.value;
+          applyButtonStyles(document.getElementById('mockButton'));
+          updateConfigCode();
+        });
+        
+        document.getElementById('promptBgColor')?.addEventListener('input', (e) => {
+          if (!widgetConfig.promptAnimation) widgetConfig.promptAnimation = {};
+          widgetConfig.promptAnimation.backgroundColor = e.target.value;
+          applyButtonStyles(document.getElementById('mockButton'));
+          updateConfigCode();
+        });
+        
+        document.getElementById('promptTextColor')?.addEventListener('input', (e) => {
+          if (!widgetConfig.promptAnimation) widgetConfig.promptAnimation = {};
+          widgetConfig.promptAnimation.textColor = e.target.value;
+          applyButtonStyles(document.getElementById('mockButton'));
+          updateConfigCode();
+        });
+        
+        document.getElementById('promptAnimationType')?.addEventListener('change', (e) => {
+          if (!widgetConfig.promptAnimation) widgetConfig.promptAnimation = {};
+          // If pulse was previously selected, default to bounce
+          const value = e.target.value === 'pulse' ? 'bounce' : e.target.value;
+          widgetConfig.promptAnimation.animationType = value;
+          applyButtonStyles(document.getElementById('mockButton'));
+          updateConfigCode();
+        });
+        
+        
+        document.getElementById('promptHideAfterSeconds')?.addEventListener('input', (e) => {
+          if (!widgetConfig.promptAnimation) widgetConfig.promptAnimation = {};
+          const value = e.target.value.trim();
+          widgetConfig.promptAnimation.hideAfterSeconds = value === '' ? null : parseInt(value) || null;
+          updateConfigCode();
+        });
+        
+        document.getElementById('promptPosition')?.addEventListener('change', (e) => {
+          if (!widgetConfig.promptAnimation) widgetConfig.promptAnimation = {};
+          widgetConfig.promptAnimation.position = e.target.value;
+          applyButtonStyles(document.getElementById('mockButton'));
+          updateConfigCode();
+        });
         document.getElementById('iconCustomImage')?.addEventListener('input', (e) => {
           widgetConfig.icon.customImage = e.target.value;
           applyButtonStyles(document.getElementById('mockButton'));
@@ -2502,15 +3149,17 @@
         });
       }
 
-      // Header controls
-      if (elementType === 'header') {
+      // Header controls (also applies to onlineIndicator)
+      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) => {
-          widgetConfig.header.backgroundColor = e.target.value;
+          const newColor = e.target.value;
+          console.log('🎨 Header color changed to:', newColor);
+          widgetConfig.header.backgroundColor = newColor;
           renderPanelContent();
           updateConfigCode();
         });
@@ -2524,6 +3173,21 @@
           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;
+          renderPanelContent();
+          updateConfigCode();
+        });
+        document.getElementById('onlineIndicatorDotColor')?.addEventListener('input', (e) => {
+          widgetConfig.header.onlineIndicatorDotColor = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
       }
 
       // Panel controls
@@ -2537,31 +3201,31 @@
             updateConfigCode();
           });
         });
-        document.getElementById('panelBgColor')?.addEventListener('input', (e) => {
-          widgetConfig.panel.backgroundColor = e.target.value;
-          renderPanelContent();
-          updateConfigCode();
-        });
         // Position controls (included in panel settings)
         document.getElementById('positionVertical')?.addEventListener('change', (e) => {
           widgetConfig.position.vertical = e.target.value;
+          updateMockWidgetPosition();
           updateConfigCode();
         });
         document.getElementById('positionHorizontal')?.addEventListener('change', (e) => {
           widgetConfig.position.horizontal = e.target.value;
+          // Don't update mock widget position - it always stays on the right
           updateConfigCode();
         });
         document.getElementById('positionOffsetX')?.addEventListener('input', (e) => {
           widgetConfig.position.offset.x = parseInt(e.target.value) || 0;
+          updateMockWidgetPosition();
           updateConfigCode();
         });
         document.getElementById('positionOffsetY')?.addEventListener('input', (e) => {
           widgetConfig.position.offset.y = parseInt(e.target.value) || 0;
+          updateMockWidgetPosition();
           updateConfigCode();
         });
         // Direction controls (included in panel settings)
         document.getElementById('direction')?.addEventListener('change', (e) => {
           widgetConfig.direction = e.target.value;
+          renderPanelContent(); // Re-render mock panel with new direction
           updateConfigCode();
         });
       }
@@ -2570,18 +3234,22 @@
       if (elementType === 'position') {
         document.getElementById('positionVertical')?.addEventListener('change', (e) => {
           widgetConfig.position.vertical = e.target.value;
+          updateMockWidgetPosition();
           updateConfigCode();
         });
         document.getElementById('positionHorizontal')?.addEventListener('change', (e) => {
           widgetConfig.position.horizontal = e.target.value;
+          // Don't update mock widget position - it always stays on the right
           updateConfigCode();
         });
         document.getElementById('positionOffsetX')?.addEventListener('input', (e) => {
           widgetConfig.position.offset.x = parseInt(e.target.value) || 0;
+          updateMockWidgetPosition();
           updateConfigCode();
         });
         document.getElementById('positionOffsetY')?.addEventListener('input', (e) => {
           widgetConfig.position.offset.y = parseInt(e.target.value) || 0;
+          updateMockWidgetPosition();
           updateConfigCode();
         });
       }
@@ -2590,6 +3258,7 @@
       if (elementType === 'direction') {
         document.getElementById('direction')?.addEventListener('change', (e) => {
           widgetConfig.direction = e.target.value;
+          renderPanelContent(); // Re-render mock panel with new direction
           updateConfigCode();
         });
       }
@@ -2606,8 +3275,23 @@
           renderPanelContent();
           updateConfigCode();
         });
-        document.getElementById('msgTextColor')?.addEventListener('input', (e) => {
-          widgetConfig.messages.textColor = e.target.value;
+        document.getElementById('msgUserTextColor')?.addEventListener('input', (e) => {
+          widgetConfig.messages.userTextColor = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+        document.getElementById('msgAgentTextColor')?.addEventListener('input', (e) => {
+          widgetConfig.messages.agentTextColor = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+        document.getElementById('msgUserAvatarIcon')?.addEventListener('input', (e) => {
+          widgetConfig.messages.userAvatarIcon = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
+        document.getElementById('msgAgentAvatarIcon')?.addEventListener('input', (e) => {
+          widgetConfig.messages.agentAvatarIcon = e.target.value;
           renderPanelContent();
           updateConfigCode();
         });
@@ -2677,10 +3361,6 @@
           renderPanelContent();
           updateConfigCode();
         });
-        document.getElementById('micBtnActive')?.addEventListener('input', (e) => {
-          widgetConfig.voice.micButtonActiveColor = e.target.value;
-          updateConfigCode();
-        });
       }
 
       // Voice avatar controls (for voice interface)
@@ -2727,6 +3407,7 @@
       // Status text controls
       if (elementType === 'statusTitle' || elementType === 'statusSubtitle') {
         document.getElementById('statusText')?.addEventListener('input', (e) => {
+          widgetConfig.voice.statusText = e.target.value;
           // Update status text in both regular and compact views
           const statusEls = document.querySelectorAll('.mock-voice-status span, .mock-compact-status span');
           statusEls.forEach(el => el.textContent = e.target.value);
@@ -2739,6 +3420,7 @@
           updateConfigCode();
         });
         document.getElementById('statusDotColor')?.addEventListener('input', (e) => {
+          widgetConfig.voice.statusDotColor = e.target.value;
           const dots = document.querySelectorAll('.mock-status-dot');
           dots.forEach(dot => dot.style.background = e.target.value);
           updateConfigCode();
@@ -2753,14 +3435,18 @@
       // Live indicator controls
       if (elementType === 'liveIndicator') {
         document.getElementById('liveDotColor')?.addEventListener('input', (e) => {
+          widgetConfig.voice.liveIndicatorDotColor = e.target.value;
           const dots = document.querySelectorAll('.mock-live-dot');
           dots.forEach(dot => dot.style.background = e.target.value);
-          updateConfigCode();
+          renderPanelContent();
+          updateConfigCode(); // This will call updateActualWidget() with debounce
         });
         document.getElementById('liveTextColor')?.addEventListener('input', (e) => {
+          widgetConfig.voice.liveIndicatorTextColor = e.target.value;
           const indicators = document.querySelectorAll('.mock-live-indicator');
           indicators.forEach(ind => ind.style.color = e.target.value);
-          updateConfigCode();
+          renderPanelContent();
+          updateConfigCode(); // This will call updateActualWidget() with debounce
         });
       }
 
@@ -2781,8 +3467,10 @@
       // End call button controls
       if (elementType === 'endCallButton') {
         document.getElementById('endCallBtnColor')?.addEventListener('input', (e) => {
+          widgetConfig.voice.endCallButtonColor = e.target.value;
           const buttons = document.querySelectorAll('[data-element-type="endCallButton"]');
           buttons.forEach(btn => btn.style.background = e.target.value);
+          renderPanelContent();
           updateConfigCode();
         });
       }
@@ -2790,8 +3478,10 @@
       // Speaker button controls
       if (elementType === 'speakerButton') {
         document.getElementById('speakerBtnColor')?.addEventListener('input', (e) => {
+          widgetConfig.voice.speakerButtonColor = e.target.value;
           const buttons = document.querySelectorAll('[data-element-type="speakerButton"]');
           buttons.forEach(btn => btn.style.background = e.target.value);
+          renderPanelContent();
           updateConfigCode();
         });
       }
@@ -2831,14 +3521,18 @@
       // Live transcript controls
       if (elementType === 'liveTranscript' || elementType === 'liveTranscriptText') {
         document.getElementById('liveTranscriptColor')?.addEventListener('input', (e) => {
+          widgetConfig.voice.liveTranscriptTextColor = e.target.value;
           const text = document.querySelector('.mock-live-text-collapsed');
           if (text) text.style.color = e.target.value;
-          updateConfigCode();
+          renderPanelContent();
+          updateConfigCode(); // This will call updateActualWidget() with debounce
         });
         document.getElementById('liveTranscriptFontSize')?.addEventListener('input', (e) => {
+          widgetConfig.voice.liveTranscriptFontSize = e.target.value;
           const text = document.querySelector('.mock-live-text-collapsed');
           if (text) text.style.fontSize = e.target.value;
-          updateConfigCode();
+          renderPanelContent();
+          updateConfigCode(); // This will call updateActualWidget() with debounce
         });
       }
 
@@ -2863,8 +3557,10 @@
           // Show/hide relevant controls
           const iconControl = document.getElementById('logoIconControl');
           const imageControl = document.getElementById('logoImageControl');
+          const backgroundControl = document.getElementById('logoBackgroundControl');
           if (iconControl) iconControl.style.display = e.target.value === 'icon' ? 'block' : 'none';
           if (imageControl) imageControl.style.display = e.target.value === 'image' ? 'block' : 'none';
+          if (backgroundControl) backgroundControl.style.display = e.target.value === 'image' ? 'block' : 'none';
           renderPanelContent();
           updateConfigCode();
         });
@@ -2879,6 +3575,18 @@
           renderPanelContent();
           updateConfigCode();
         });
+        document.getElementById('logoBackgroundEnabled')?.addEventListener('change', (e) => {
+          widgetConfig.landing.logoBackgroundEnabled = e.target.checked;
+          const colorControl = document.getElementById('logoBackgroundColorControl');
+          if (colorControl) colorControl.style.display = e.target.checked ? 'block' : 'none';
+          renderPanelContent();
+          updateConfigCode();
+        });
+        document.getElementById('logoBackgroundColor')?.addEventListener('input', (e) => {
+          widgetConfig.landing.logoBackgroundColor = e.target.value;
+          renderPanelContent();
+          updateConfigCode();
+        });
       }
 
       if (elementType === 'landingTitle') {
@@ -2907,14 +3615,17 @@
         });
       }
 
-      if (elementType === 'modeCard') {
-        document.getElementById('voiceCardTitle')?.addEventListener('input', (e) => {
-          widgetConfig.landing.voiceCardTitle = e.target.value;
+      if (elementType === 'landingBackground') {
+        document.getElementById('landingBgColor')?.addEventListener('input', (e) => {
+          widgetConfig.landing.backgroundColor = e.target.value;
           renderPanelContent();
           updateConfigCode();
         });
-        document.getElementById('voiceCardDesc')?.addEventListener('input', (e) => {
-          widgetConfig.landing.voiceCardDesc = e.target.value;
+      }
+
+      if (elementType === 'modeCard') {
+        document.getElementById('voiceCardTitle')?.addEventListener('input', (e) => {
+          widgetConfig.landing.voiceCardTitle = e.target.value;
           renderPanelContent();
           updateConfigCode();
         });
@@ -2923,11 +3634,6 @@
           renderPanelContent();
           updateConfigCode();
         });
-        document.getElementById('textCardDesc')?.addEventListener('input', (e) => {
-          widgetConfig.landing.textCardDesc = e.target.value;
-          renderPanelContent();
-          updateConfigCode();
-        });
         document.getElementById('modeCardBg')?.addEventListener('input', (e) => {
           widgetConfig.landing.modeCardBackgroundColor = e.target.value;
           renderPanelContent();
@@ -2936,34 +3642,526 @@
       }
     }
 
+    // Actual widget instance
+    let actualWidgetInstance = null;
+    let updateWidgetTimeout = null;
+    let widgetManuallyClosed = false; // Track if widget was manually closed by user
+    const AGENT_ID = 'agent_20e0b3047';
+    const APP_ID = 'app_8LGyEp2cS6vn4GLad8WLNRlyrOq0MrvDRPXk';
+
+    function getTTPChatWidget() {
+      // SDK exposes TTPChatWidget as window.TTPAgentSDK.TTPChatWidget
+      if (window.TTPAgentSDK && window.TTPAgentSDK.TTPChatWidget) {
+        return window.TTPAgentSDK.TTPChatWidget;
+      }
+      // Fallback for direct access (if SDK exposes it directly)
+      if (window.TTPChatWidget) {
+        return window.TTPChatWidget;
+      }
+      return null;
+    }
+
+    // Default configuration values (used to compare and only show changed values)
+    const defaultConfig = {
+      direction: 'ltr',
+      button: {
+        size: 'medium',
+        shape: 'circle',
+        backgroundColor: '#FFFFFF',
+        hoverColor: '#D3D3D3',
+        shadow: true,
+        shadowColor: 'rgba(0,0,0,0.15)'
+      },
+      icon: {
+        type: 'custom',
+        customImage: 'https://talktopc.com/logo192.png',
+        size: 'medium',
+        backgroundColor: '#FFFFFF'
+      },
+      panel: {
+        width: 360,
+        height: 550,
+        borderRadius: 24,
+        backgroundColor: '#FFFFFF',
+        border: '1px solid #E5E7EB'
+      },
+      position: {
+        vertical: 'bottom',
+        horizontal: 'left',
+        offset: { x: 20, y: 20 }
+      },
+      header: {
+        title: 'Chat Assistant',
+        backgroundColor: '#7C3AED',
+        textColor: '#FFFFFF',
+        showCloseButton: true,
+        onlineIndicatorText: 'Online',
+        onlineIndicatorColor: '#FFFFFF',
+        onlineIndicatorDotColor: '#10b981'
+      },
+      messages: {
+        userBackgroundColor: '#E5E7EB',
+        agentBackgroundColor: '#F3F4F6',
+        textColor: '#1F2937',
+        userTextColor: '#1F2937',
+        agentTextColor: '#1F2937',
+        userAvatarIcon: '👤',
+        agentAvatarIcon: '🤖',
+        fontSize: '14px',
+        borderRadius: 16
+      },
+      text: {
+        sendButtonText: '→',
+        sendButtonColor: '#7C3AED',
+        sendButtonHoverColor: '#6D28D9',
+        inputPlaceholder: 'Type your message...',
+        inputFocusColor: '#7C3AED'
+      },
+      voice: {
+        micButtonColor: '#7C3AED',
+        micButtonActiveColor: '#EF4444',
+        speakerButtonColor: '#FFFFFF',
+        endCallButtonColor: '#ef4444',
+        avatarBackgroundColor: '#667eea',
+        avatarType: 'icon',
+        avatarIcon: '🤖',
+        avatarImageUrl: '',
+        startCallButtonText: 'Start Call',
+        startCallButtonColor: '#667eea',
+        startCallButtonTextColor: '#FFFFFF',
+        statusTitleColor: '#1e293b',
+        statusSubtitleColor: '#64748b',
+        statusDotColor: '#10b981',
+        statusText: 'Listening...',
+        liveTranscriptTextColor: '#64748b',
+        liveTranscriptFontSize: '14px',
+        liveIndicatorDotColor: '#10b981',
+        liveIndicatorTextColor: '#10b981',
+        waveformType: 'waveform',
+        waveformIcon: '🎤',
+        waveformImageUrl: ''
+      },
+      landing: {
+        backgroundColor: 'linear-gradient(180deg, #ffffff 0%, rgba(168, 85, 247, 0.03) 100%)',
+        logo: '🤖',
+        logoType: 'icon',
+        logoIcon: '🤖',
+        logoImageUrl: '',
+        logoBackgroundColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        logoBackgroundEnabled: true,
+        title: 'Welcome to AI Assistant',
+        subtitle: 'Choose how you\'d like to interact',
+        voiceCardTitle: 'Voice Call',
+        textCardTitle: 'Text Chat',
+        titleColor: '#1e293b',
+        subtitleColor: '#64748b',
+        modeCardBackgroundColor: '#FFFFFF'
+      },
+      promptAnimation: {
+        enabled: false,
+        text: 'Try me!',
+        backgroundColor: 'linear-gradient(135deg, #7c3aed, #4f46e5)',
+        textColor: '#ffffff',
+        animationType: 'bounce',
+        showShimmer: true,
+        showPulseRings: true,
+        hideAfterClick: true,
+        hideAfterSeconds: null,
+        position: 'top'
+      }
+    };
+
+    // Helper function to deep compare objects and return only changed properties
+    function getChangedProperties(current, defaults) {
+      if (current === null || current === undefined) {
+        return undefined;
+      }
+      
+      if (typeof current !== 'object' || Array.isArray(current)) {
+        // Primitive values or arrays - compare directly
+        return JSON.stringify(current) === JSON.stringify(defaults) ? undefined : current;
+      }
+      
+      // Object comparison
+      const result = {};
+      let hasChanges = false;
+      
+      // Check all keys in current object
+      for (const key in current) {
+        if (current.hasOwnProperty(key)) {
+          const currentValue = current[key];
+          const defaultValue = defaults[key];
+          
+          if (defaultValue === undefined) {
+            // Property doesn't exist in defaults - include it
+            result[key] = currentValue;
+            hasChanges = true;
+          } else if (typeof currentValue === 'object' && currentValue !== null && !Array.isArray(currentValue) &&
+                     typeof defaultValue === 'object' && defaultValue !== null && !Array.isArray(defaultValue)) {
+            // Nested object - recurse
+            const nestedChanges = getChangedProperties(currentValue, defaultValue);
+            if (nestedChanges !== undefined) {
+              result[key] = nestedChanges;
+              hasChanges = true;
+            }
+          } else {
+            // Primitive or array comparison
+            if (JSON.stringify(currentValue) !== JSON.stringify(defaultValue)) {
+              result[key] = currentValue;
+              hasChanges = true;
+            }
+          }
+        }
+      }
+      
+      return hasChanges ? result : undefined;
+    }
+
     function updateConfigCode() {
       const codeOutput = document.getElementById('configCode');
       
-      // Create a clean config object with required fields
+      // Start with required fields
       const displayConfig = {
-        agentId: 'your_agent_id',  // Required - replace with your agent ID
-        appId: 'your_app_id',      // Required - replace with your app ID
-        direction: widgetConfig.direction,
-        button: widgetConfig.button,
-        icon: widgetConfig.icon,
-        panel: widgetConfig.panel,
-        header: widgetConfig.header,
-        messages: widgetConfig.messages,
-        text: widgetConfig.text,
-        voice: widgetConfig.voice,
-        landing: widgetConfig.landing,
-        position: widgetConfig.position
+        agentId: AGENT_ID,
+        appId: APP_ID
       };
       
-      // Format as proper JavaScript object with comments
+      // Only add properties that differ from defaults
+      const changedDirection = widgetConfig.direction !== defaultConfig.direction ? widgetConfig.direction : undefined;
+      if (changedDirection !== undefined) {
+        displayConfig.direction = changedDirection;
+      }
+      
+      const changedButton = getChangedProperties(widgetConfig.button, defaultConfig.button);
+      if (changedButton !== undefined) {
+        displayConfig.button = changedButton;
+      }
+      
+      const changedIcon = getChangedProperties(widgetConfig.icon, defaultConfig.icon);
+      if (changedIcon !== undefined) {
+        displayConfig.icon = changedIcon;
+      }
+      
+      const changedPanel = getChangedProperties(widgetConfig.panel, defaultConfig.panel);
+      if (changedPanel !== undefined) {
+        displayConfig.panel = changedPanel;
+      }
+      
+      const changedPosition = getChangedProperties(widgetConfig.position, defaultConfig.position);
+      if (changedPosition !== undefined) {
+        displayConfig.position = changedPosition;
+      }
+      
+      const changedHeader = getChangedProperties(widgetConfig.header, defaultConfig.header);
+      if (changedHeader !== undefined) {
+        displayConfig.header = changedHeader;
+      }
+      
+      const changedMessages = getChangedProperties(widgetConfig.messages, defaultConfig.messages);
+      if (changedMessages !== undefined) {
+        displayConfig.messages = changedMessages;
+      }
+      
+      const changedText = getChangedProperties(widgetConfig.text, defaultConfig.text);
+      if (changedText !== undefined) {
+        displayConfig.text = changedText;
+      }
+      
+      const changedVoice = getChangedProperties(widgetConfig.voice, defaultConfig.voice);
+      if (changedVoice !== undefined) {
+        displayConfig.voice = changedVoice;
+      }
+      
+      const changedLanding = getChangedProperties(widgetConfig.landing, defaultConfig.landing);
+      if (changedLanding !== undefined) {
+        displayConfig.landing = changedLanding;
+      }
+      
+      const changedPromptAnimation = getChangedProperties(widgetConfig.promptAnimation, defaultConfig.promptAnimation);
+      if (changedPromptAnimation !== undefined) {
+        displayConfig.promptAnimation = changedPromptAnimation;
+      }
+      
+      // Format as proper JavaScript object
       let configStr = JSON.stringify(displayConfig, null, 2);
       
-      // Add helpful comments
-      configStr = configStr
-        .replace(/"agentId": "your_agent_id"/g, '"agentId": "your_agent_id"  // Required: Your agent ID')
-        .replace(/"appId": "your_app_id"/g, '"appId": "your_app_id"  // Required: Your app ID');
+      codeOutput.textContent = `const widget = new TTPAgentSDK.TTPChatWidget(${configStr});`;
       
-      codeOutput.textContent = `const widget = new TTPChatWidget(${configStr});`;
+      // Always update actual widget when config changes (with debounce)
+      if (getTTPChatWidget()) {
+        // Debounce widget updates to avoid rapid recreations
+        if (updateWidgetTimeout) {
+          clearTimeout(updateWidgetTimeout);
+        }
+        updateWidgetTimeout = setTimeout(() => {
+          updateActualWidget();
+        }, 300); // Wait 300ms after last change
+      } else {
+        // Only warn if not during initial load (when SDK might not be loaded yet)
+        if (!isInitializing) {
+          console.warn('TTPChatWidget not available, cannot update actual widget');
+        }
+      }
+    }
+
+    // Function to sync actual widget state with mock panel state
+    // Only called when mock panel state changes, not on customization changes
+    function syncWidgetWithMockPanel() {
+      if (!actualWidgetInstance) return;
+      
+      setTimeout(() => {
+        // Check if widget uses Shadow DOM (default behavior)
+        const shadowHost = document.getElementById('ttp-widget-shadow-host');
+        let widgetPanel;
+        
+        if (shadowHost && shadowHost.shadowRoot) {
+          // Widget uses Shadow DOM - access elements through shadow root
+          widgetPanel = shadowHost.shadowRoot.querySelector('[id^="ttp-chat-widget-panel"], #text-chat-panel');
+        } else {
+          // Widget uses regular DOM - access elements directly
+          widgetPanel = document.querySelector('[id^="ttp-chat-widget-panel"], #text-chat-panel');
+        }
+        
+        if (widgetPanel && actualWidgetInstance) {
+          const isCurrentlyOpen = widgetPanel.classList.contains('open');
+          
+          if (panelOpen) {
+            // Mock panel is open - ensure widget is open (unless user manually closed it)
+            if (!isCurrentlyOpen && !widgetManuallyClosed) {
+              if (typeof actualWidgetInstance.open === 'function') {
+                try {
+                  actualWidgetInstance.open();
+                  widgetManuallyClosed = false; // Reset since we're opening it
+                } catch (e) {
+                  console.warn('⚠️ Error opening widget:', e);
+                }
+              } else if (typeof actualWidgetInstance.togglePanel === 'function') {
+                try {
+                  actualWidgetInstance.togglePanel();
+                  widgetManuallyClosed = false; // Reset since we're opening it
+                } catch (e) {
+                  console.warn('⚠️ Error opening widget:', e);
+                }
+              }
+            }
+          } else {
+            // Mock panel is closed - ensure widget is closed
+            if (isCurrentlyOpen) {
+              // Widget is open, so close it
+              widgetManuallyClosed = false; // Reset since we're closing via mock panel
+              if (typeof actualWidgetInstance.togglePanel === 'function') {
+                try {
+                  // togglePanel will close it if it's open
+                  actualWidgetInstance.togglePanel();
+                } catch (e) {
+                  console.warn('⚠️ Error closing widget:', e);
+                  // Fallback: directly manipulate the DOM
+                  widgetPanel.classList.remove('open');
+                  if (actualWidgetInstance) {
+                    actualWidgetInstance.isOpen = false;
+                  }
+                }
+              } else if (typeof actualWidgetInstance.close === 'function') {
+                try {
+                  actualWidgetInstance.close();
+                } catch (e) {
+                  console.warn('⚠️ Error closing widget:', e);
+                  // Fallback: directly manipulate the DOM
+                  widgetPanel.classList.remove('open');
+                  if (actualWidgetInstance) {
+                    actualWidgetInstance.isOpen = false;
+                  }
+                }
+              } else {
+                // Fallback: directly manipulate the DOM
+                widgetPanel.classList.remove('open');
+                if (actualWidgetInstance) {
+                  actualWidgetInstance.isOpen = false;
+                }
+              }
+            }
+          }
+        }
+      }, 100); // Small delay to ensure widget is ready
+    }
+    
+    // Listen for widget close events to track manual closes
+    function setupWidgetCloseTracking() {
+      if (!actualWidgetInstance) return;
+      
+      setTimeout(() => {
+        const shadowHost = document.getElementById('ttp-widget-shadow-host');
+        let closeBtn;
+        
+        if (shadowHost && shadowHost.shadowRoot) {
+          closeBtn = shadowHost.shadowRoot.querySelector('[id*="close"], .close-btn, [class*="close"]');
+        } else {
+          closeBtn = document.querySelector('[id*="close"], .close-btn, [class*="close"]');
+        }
+        
+        if (closeBtn) {
+          // Remove any existing listeners by cloning
+          const newCloseBtn = closeBtn.cloneNode(true);
+          closeBtn.parentNode.replaceChild(newCloseBtn, closeBtn);
+          
+          newCloseBtn.addEventListener('click', () => {
+            widgetManuallyClosed = true;
+            // Don't sync immediately - let the widget close naturally
+            setTimeout(() => {
+              // Only sync if mock panel is closed (user wants it closed)
+              if (!panelOpen) {
+                syncWidgetWithMockPanel();
+              }
+            }, 100);
+          });
+        }
+      }, 300);
+    }
+
+    function updateActualWidget() {
+      const TTPChatWidget = getTTPChatWidget();
+      if (!TTPChatWidget) {
+        console.warn('TTPChatWidget not available yet');
+        return;
+      }
+
+      // Destroy existing widget if it exists
+      if (actualWidgetInstance) {
+        try {
+          // Try to call destroy method if it exists
+          if (typeof actualWidgetInstance.destroy === 'function') {
+            actualWidgetInstance.destroy();
+          }
+          
+          // Remove widget elements from DOM (multiple possible selectors)
+          const selectors = [
+            '[id^="ttp-chat-widget-button"]',
+            '[id^="ttp-chat-widget-panel"]',
+            '[id*="ttp-chat"]',
+            '.ttp-chat-widget-button',
+            '.ttp-chat-widget-panel',
+            '[class*="ttp-chat"]'
+          ];
+          
+          let removedCount = 0;
+          selectors.forEach(selector => {
+            const elements = document.querySelectorAll(selector);
+            elements.forEach(el => {
+              if (el && el.parentNode) {
+                el.parentNode.removeChild(el);
+                removedCount++;
+              }
+            });
+          });
+          
+          actualWidgetInstance = null;
+          
+          // Wait a bit to ensure DOM is cleaned up before creating new widget
+          setTimeout(() => {
+            createNewWidget(TTPChatWidget);
+          }, 150);
+        } catch (e) {
+          console.warn('Error removing old widget:', e);
+          actualWidgetInstance = null;
+          setTimeout(() => {
+            createNewWidget(TTPChatWidget);
+          }, 150);
+        }
+      } else {
+        createNewWidget(TTPChatWidget);
+      }
+    }
+
+    function createNewWidget(TTPChatWidget) {
+
+      // Create config for actual widget - use the same config as mock but positioned differently
+      // Deep copy to avoid mutations and ensure fresh config
+      const actualConfig = {
+        agentId: AGENT_ID,
+        appId: APP_ID,
+        direction: widgetConfig.direction,
+        button: JSON.parse(JSON.stringify(widgetConfig.button)),
+        icon: JSON.parse(JSON.stringify(widgetConfig.icon)),
+        panel: JSON.parse(JSON.stringify(widgetConfig.panel)),
+        header: JSON.parse(JSON.stringify(widgetConfig.header)), // Deep copy header to ensure color is included
+        messages: JSON.parse(JSON.stringify(widgetConfig.messages)),
+        text: JSON.parse(JSON.stringify(widgetConfig.text)),
+        voice: JSON.parse(JSON.stringify(widgetConfig.voice)),
+        landing: JSON.parse(JSON.stringify(widgetConfig.landing)),
+        promptAnimation: JSON.parse(JSON.stringify(widgetConfig.promptAnimation || {
+          enabled: false,
+          text: 'Try me!',
+          backgroundColor: 'linear-gradient(135deg, #7c3aed, #4f46e5)',
+          textColor: '#ffffff',
+          animationType: 'bounce',
+          showShimmer: true,
+          showPulseRings: true,
+          hideAfterClick: true,
+          hideAfterSeconds: null,
+          position: 'top'
+        })), // Include promptAnimation config
+        behavior: {
+          startOpen: panelOpen, // Sync with mock panel state
+          autoOpen: panelOpen,   // Sync with mock panel state
+          mode: 'unified'
+        },
+        position: {
+          ...widgetConfig.position,
+          // Use the same position as configured (no inversion)
+          offset: {
+            x: widgetConfig.position.offset.x,
+            y: widgetConfig.position.offset.y
+          }
+        }
+      };
+
+      try {
+        // Reset manual close tracking when widget is recreated (unless user manually closed it)
+        // Don't reset if widget was manually closed and mock panel is also closed
+        if (panelOpen) {
+          widgetManuallyClosed = false;
+        }
+        
+        // Debug: Log the config being passed to widget
+        console.log('🔧 Creating widget with config:', {
+          ...actualConfig,
+          promptAnimation: actualConfig.promptAnimation
+        });
+        
+        actualWidgetInstance = new TTPChatWidget(actualConfig);
+        
+        // Debug: Verify promptAnimation was received
+        if (actualWidgetInstance && actualWidgetInstance.config) {
+          console.log('✅ Widget created. promptAnimation config:', actualWidgetInstance.config.promptAnimation);
+        }
+        
+        // Setup tracking for manual closes
+        setupWidgetCloseTracking();
+        
+        // Only sync if mock panel is open (don't force open if user closed it)
+        if (panelOpen && !widgetManuallyClosed) {
+          setTimeout(() => {
+            syncWidgetWithMockPanel();
+          }, 200);
+        }
+      } catch (error) {
+        console.error('❌ Error creating actual widget:', error);
+        console.error('Error details:', error.stack);
+        console.error('Config used:', actualConfig);
+        alert('Failed to create widget. Check console for details. Error: ' + error.message);
+      }
+    }
+
+    function initActualWidget() {
+      const TTPChatWidget = getTTPChatWidget();
+      if (!TTPChatWidget) {
+        setTimeout(initActualWidget, 100);
+        return;
+      }
+
+      updateActualWidget();
+      // Mark initialization as complete
+      isInitializing = false;
     }
 
     function resetToDefaults() {
@@ -2992,19 +4190,26 @@
         direction: 'ltr',
         position: {
           vertical: 'bottom',
-          horizontal: 'right',
+          horizontal: 'left',
           offset: { x: 20, y: 20 }
         },
         header: {
           title: 'Chat Assistant',
           backgroundColor: '#7C3AED',
           textColor: '#FFFFFF',
-          showCloseButton: true
+          showCloseButton: true,
+          onlineIndicatorText: 'Online',
+          onlineIndicatorColor: '#FFFFFF',
+          onlineIndicatorDotColor: '#10b981'
         },
         messages: {
           userBackgroundColor: '#E5E7EB',
           agentBackgroundColor: '#F3F4F6',
-          textColor: '#1F2937',
+          textColor: '#1F2937', // Fallback for backward compatibility
+          userTextColor: '#1F2937',
+          agentTextColor: '#1F2937',
+          userAvatarIcon: '👤',
+          agentAvatarIcon: '🤖',
           fontSize: '14px',
           borderRadius: 16
         },
@@ -3018,6 +4223,8 @@
         voice: {
           micButtonColor: '#7C3AED',
           micButtonActiveColor: '#EF4444',
+          speakerButtonColor: '#FFFFFF',
+          endCallButtonColor: '#ef4444',
           avatarBackgroundColor: '#667eea',
           avatarType: 'icon',
           avatarIcon: '🤖',
@@ -3027,6 +4234,12 @@
           startCallButtonTextColor: '#FFFFFF',
           statusTitleColor: '#1e293b',
           statusSubtitleColor: '#64748b',
+          statusDotColor: '#10b981',
+          statusText: 'Listening...',
+          liveTranscriptTextColor: '#64748b',
+          liveTranscriptFontSize: '14px',
+          liveIndicatorDotColor: '#10b981',
+          liveIndicatorTextColor: '#10b981',
           waveformType: 'waveform',
           waveformIcon: '🎤',
           waveformImageUrl: ''
@@ -3036,24 +4249,21 @@
           logoType: 'icon',
           logoIcon: '🤖',
           logoImageUrl: '',
+          logoBackgroundColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          logoBackgroundEnabled: true,
+          backgroundColor: 'linear-gradient(180deg, #ffffff 0%, rgba(168, 85, 247, 0.03) 100%)',
           title: 'Welcome to AI Assistant',
           subtitle: 'Choose how you\'d like to interact',
           voiceCardTitle: 'Voice Call',
-          voiceCardDesc: 'Start a voice conversation',
           textCardTitle: 'Text Chat',
-          textCardDesc: 'Chat via text messages',
           titleColor: '#1e293b',
           subtitleColor: '#64748b',
           modeCardBackgroundColor: '#FFFFFF'
-        },
-        position: {
-          vertical: 'bottom',
-          horizontal: 'right',
-          offset: { x: 20, y: 20 }
         }
       };
       
       initMockWidget();
+      updateMockWidgetPosition();
       updateConfigCode();
       selectedElement = null;
       document.querySelectorAll('.element-highlight').forEach(el => {
@@ -3072,6 +4282,13 @@
       if (panelOpen) {
         renderPanelContent();
       }
+      // Update prompt bubble visibility based on panel state
+      const mockButton = document.getElementById('mockButton');
+      if (mockButton) {
+        updatePromptBubble(mockButton);
+      }
+      // Sync actual widget state with mock panel
+      syncWidgetWithMockPanel();
     });
 
     // Make panel selectable (click on panel border/background)
@@ -3100,8 +4317,57 @@
       }
     }
 
+    // Initialize mock widget and position
     initMockWidget();
+    // Ensure position is set after initialization
+    setTimeout(() => {
+      updateMockWidgetPosition();
+    }, 50);
     updateConfigCode();
+
+    // Initialize actual widget when SDK loads
+    window.checkAndInitWidget = function() {
+      const TTPChatWidget = getTTPChatWidget();
+      if (TTPChatWidget) {
+        initActualWidget();
+        // Mark initialization as complete once SDK is ready
+        isInitializing = false;
+      } else {
+        setTimeout(window.checkAndInitWidget, 100);
+      }
+    };
+
+    // Start checking for SDK (will also be called when script loads)
+    window.checkAndInitWidget();
+    
+    // Debug helper - expose widget instance globally for inspection
+    window.debugWidget = function() {
+      console.log('=== Widget Debug Info ===');
+      console.log('actualWidgetInstance:', actualWidgetInstance);
+      console.log('window.TTPAgentSDK:', window.TTPAgentSDK);
+      console.log('TTPChatWidget available:', !!getTTPChatWidget());
+      const widgetElements = document.querySelectorAll('[id*="ttp"], [class*="ttp"]');
+      console.log('Widget elements in DOM:', widgetElements.length);
+      widgetElements.forEach((el, idx) => {
+        const style = window.getComputedStyle(el);
+        console.log(`Element ${idx + 1}:`, {
+          id: el.id,
+          className: el.className,
+          display: style.display,
+          visibility: style.visibility,
+          opacity: style.opacity,
+          zIndex: style.zIndex
+        });
+      });
+      return {
+        instance: actualWidgetInstance,
+        elements: Array.from(widgetElements),
+        sdk: window.TTPAgentSDK
+      };
+    };
   </script>
+  
+  <!-- Load the widget SDK -->
+  <script src="/dist/agent-widget.js?v=2.34.2" onload="if (typeof window.checkAndInitWidget === 'function') setTimeout(window.checkAndInitWidget, 100);" onerror="console.error('❌ Failed to load SDK script from /dist/agent-widget.js'); alert('Failed to load SDK. Check console for details.');"></script>
 </body>
 </html>