npm - @developpement/tp-chatbot-widget - Versions diffs - 0.0.11 → 0.0.12 - Mend

@developpement/tp-chatbot-widget 0.0.11 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/src/chatbot.js CHANGED Viewed

@@ -1,9 +1,6 @@
 (function () {
   'use strict';
-  // ─── SVG Icons ──────────────────────────────────────────────────────────────
-  // viewBox 0 0 20 20 | stroke-width 1.6 | round caps & joins | fill none | stroke currentColor
   const ICONS = {
     bell: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2a6 6 0 0 0-6 6c0 3.5-1.5 5-1.5 5h15s-1.5-1.5-1.5-5a6 6 0 0 0-6-6Z"/><path d="M11.73 17a2 2 0 0 1-3.46 0"/></svg>`,
     bell_off: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4 16 16M8.27 3.05A6 6 0 0 1 16 8c0 2.2.5 3.7 1 4.7M6.15 6.17A5.97 5.97 0 0 0 4 8c0 3.5-1.5 5-1.5 5H14M11.73 17a2 2 0 0 1-3.46 0"/></svg>`,
@@ -15,12 +12,13 @@
     agent: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10a7 7 0 1 1 14 0"/><path d="M2 10h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z"/><path d="M16 10h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z"/><path d="M16 13v1a3 3 0 0 1-3 3h-2"/></svg>`,
     bot: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="14" height="10" rx="2"/><path d="M7 11h.01M13 11h.01M7 14.5h6"/><circle cx="10" cy="4" r="1.5"/><line x1="10" y1="5.5" x2="10" y2="7"/></svg>`,
     send: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3 3 9l5 2 2 5 7-13Z"/><path d="m8 11 4-4"/></svg>`,
-    attach: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10.5 9 18a5 5 0 0 1-7-7l8.5-8.5a3 3 0 0 1 4.24 4.24L6 15.5a1 1 0 0 1-1.42-1.42L12 7"/></svg>`,
     helpful: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10V17M7 10l3-7a3 3 0 0 1 3 3v2h3.5a1 1 0 0 1 1 1.15l-.9 5A1 1 0 0 1 15.6 17H7"/><rect x="3" y="10" width="4" height="7" rx="1"/></svg>`,
     not_helpful: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M13 10V3M13 10l-3 7a3 3 0 0 1-3-3v-2H3.5a1 1 0 0 1-1-1.15l.9-5A1 1 0 0 1 4.4 3H13"/><rect x="13" y="3" width="4" height="7" rx="1"/></svg>`,
     check: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10l5 5 7-8"/></svg>`,
     msg_plus: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2l2 3 2-3h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z"/><path d="M10 7v5M7.5 9.5h5"/></svg>`,
     msg: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2l2 3 2-3h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z"/></svg>`,
+    history: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10a7 7 0 1 0 7-7 7 7 0 0 0-5 2.1L3 7"/><path d="M3 3v4h4"/><path d="M10 7v4l2.5 2.5"/></svg>`,
+    lock: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="9" width="12" height="9" rx="2"/><path d="M7 9V6a3 3 0 0 1 6 0v3"/></svg>`,
   };
   function icon(name, size = 18, extra_style = '') {
@@ -32,7 +30,114 @@
     );
   }
-  // ─── Clients ─────────────────────────────────────────────────────────────────
+  function injectCSS() {
+    if (document.getElementById('tp-chatbot-base-css')) return;
+    const style = document.createElement('style');
+    style.id = 'tp-chatbot-base-css';
+    style.textContent = `
+      tp-chatbot * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+      .tp-chatbot-host { position: fixed; bottom: 24px; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; width: 380px; }
+      .tp-chatbot-window { position: absolute; bottom: 72px; left: 0; right: auto; width: 380px; height: 580px; background: #fff; border-radius: 20px; box-shadow: 0 8px 40px rgba(0,0,0,0.14); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: scale(0.92) translateY(12px); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; }
+      .tp-chatbot-window.open { opacity: 1; transform: scale(1) translateY(0); pointer-events: all; }
+      .tp-chatbot-bubble { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s; margin-left: auto; flex-shrink: 0; }
+      .tp-chatbot-bubble:hover { transform: scale(1.07); }
+      .tp-header { padding: 14px 16px 0; color: white; }
+      .tp-header-top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; }
+      .tp-header-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: white; position: relative; flex-shrink: 0; }
+      .tp-header-dot { position: absolute; bottom: 1px; right: 1px; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; border: 2px solid white; }
+      .tp-header-info { flex: 1; min-width: 0; }
+      .tp-header-title { font-size: 14px; font-weight: 700; color: white; line-height: 1.2; }
+      .tp-header-subtitle { font-size: 11px; color: rgba(255,255,255,0.8); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
+      .tp-header-btn { background: rgba(255,255,255,0.18); border: none; border-radius: 8px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; transition: background 0.15s; flex-shrink: 0; }
+      .tp-header-btn:hover { background: rgba(255,255,255,0.32); }
+      .tp-header-controls { display: flex; align-items: center; gap: 6px; }
+      .tp-tabs { display: flex; gap: 0; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,0.2); margin-top: 2px; justify-content: center; }
+      .tp-tab { padding: 8px 14px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.65); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; display: flex; align-items: center; gap: 5px; margin-bottom: -1px; }
+      .tp-tab.active { color: white; border-bottom-color: white; }
+      .tp-body { flex: 1; overflow-y: auto; background: #f7f7f8; display: flex; flex-direction: column; }
+      .tp-body::-webkit-scrollbar { width: 4px; }
+      .tp-body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
+      .tp-messages-wrap { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; background: #f7f7f8; }
+      .tp-messages-wrap::-webkit-scrollbar { width: 4px; }
+      .tp-messages-wrap::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
+      .tp-msg { display: flex; flex-direction: column; max-width: 82%; }
+      .tp-msg.user { align-self: flex-end; align-items: flex-end; }
+      .tp-msg.assistant, .tp-msg.agent, .tp-msg.system { align-self: flex-start; align-items: flex-start; }
+      .tp-msg-role { font-size: 10px; color: #aaa; margin-bottom: 3px; display: flex; align-items: center; gap: 3px; }
+      .tp-msg.user .tp-msg-role { color: #aaa; }
+      .tp-bubble-msg { padding: 10px 13px; border-radius: 16px; font-size: 13px; line-height: 1.55; word-break: break-word; }
+      .tp-msg.user .tp-bubble-msg { color: white; border-bottom-right-radius: 4px; }
+      .tp-msg.assistant .tp-bubble-msg, .tp-msg.agent .tp-bubble-msg { background: white; color: #1a1a2e; border-bottom-left-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.07); }
+      .tp-msg.system .tp-bubble-msg { background: #e8f5e9; color: #2e7d32; font-size: 12px; border-radius: 10px; padding: 8px 12px; }
+      .tp-msg-time { font-size: 10px; color: #bbb; margin-top: 3px; }
+      .tp-md p { margin-bottom: 6px; }
+      .tp-md p:last-child { margin-bottom: 0; }
+      .tp-md ul, .tp-md ol { padding-left: 18px; margin-bottom: 6px; }
+      .tp-md li { margin-bottom: 2px; }
+      .tp-md strong { font-weight: 600; }
+      .tp-md code { background: #f0f0f0; border-radius: 4px; padding: 1px 5px; font-size: 12px; }
+      .tp-md pre { background: #f0f0f0; border-radius: 8px; padding: 10px; overflow-x: auto; margin-bottom: 6px; }
+      .tp-feedback-bar { display: flex; gap: 6px; margin-top: 7px; }
+      .tp-feedback-btn { background: none; border: 1px solid #e5e5e5; border-radius: 8px; padding: 4px 8px; cursor: pointer; color: #aaa; display: flex; align-items: center; transition: all 0.15s; font-size: 11px; }
+      .tp-feedback-btn:hover { border-color: #bbb; color: #666; }
+      .tp-feedback-btn.voted-positive { border-color: #22c55e; color: #22c55e; background: #f0fdf4; }
+      .tp-feedback-btn.voted-negative { border-color: #ef4444; color: #ef4444; background: #fef2f2; }
+      .tp-typing { display: flex; align-items: center; gap: 4px; padding: 4px 2px; }
+      .tp-typing span { width: 7px; height: 7px; border-radius: 50%; background: #ccc; animation: tp-bounce 1.2s infinite ease-in-out; }
+      .tp-typing span:nth-child(2) { animation-delay: 0.18s; }
+      .tp-typing span:nth-child(3) { animation-delay: 0.36s; }
+      @keyframes tp-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }
+      .tp-agent-bar { padding: 8px 14px; border-top: 1px solid #f0f0f0; background: white; }
+      .tp-agent-btn { width: 100%; padding: 9px 14px; border-radius: 10px; border: 1.5px solid; background: white; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: all 0.15s; font-family: inherit; }
+      .tp-agent-btn:hover { color: white !important; }
+      .tp-close-bar { padding: 8px 14px; border-top: 1px solid #f0f0f0; background: white; text-align: center; }
+      .tp-close-btn { background: none; border: none; font-size: 12px; color: #aaa; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: inherit; padding: 4px 8px; border-radius: 8px; transition: background 0.15s; }
+      .tp-close-btn:hover { background: #f5f5f5; color: #888; }
+      .tp-input-bar { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid #f0f0f0; background: white; }
+      .tp-input { flex: 1; padding: 9px 12px; border: 1.5px solid #e5e5e5; border-radius: 12px; font-size: 13px; font-family: inherit; resize: none; outline: none; max-height: 100px; line-height: 1.4; transition: border-color 0.15s; background: #fafafa; }
+      .tp-input:focus { border-color: inherit; background: white; }
+      .tp-send { width: 36px; height: 36px; border-radius: 10px; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: transform 0.15s; }
+      .tp-send:hover { transform: scale(1.06); }
+      .tp-conv-list { display: flex; flex-direction: column; flex: 1; }
+      .tp-conv-item { padding: 13px 16px; border-bottom: 1px solid #f2f2f2; cursor: pointer; transition: background 0.13s; display: flex; justify-content: space-between; align-items: center; background: white; }
+      .tp-conv-item:hover { background: #fafafa; }
+      .tp-conv-item-left { display: flex; flex-direction: column; gap: 3px; }
+      .tp-conv-item-date { font-size: 12px; font-weight: 600; color: #1a1a2e; }
+      .tp-conv-item-count { font-size: 11px; color: #bbb; }
+      .tp-badge { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; display: inline-flex; align-items: center; gap: 3px; }
+      .tp-new-conv-btn { width: 100%; padding: 11px; color: white; border: none; border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; transition: opacity 0.15s; }
+      .tp-new-conv-btn:hover { opacity: 0.9; }
+      .tp-guest-wrap { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
+      .tp-guest-intro { background: white; border-radius: 14px; padding: 14px; box-shadow: 0 1px 6px rgba(0,0,0,0.07); }
+      .tp-guest-intro-name { font-size: 13px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
+      .tp-guest-intro-sub { font-size: 12px; color: #888; line-height: 1.5; }
+      .tp-guest-field-label { font-size: 11px; font-weight: 600; color: #666; margin-bottom: 4px; display: block; }
+      .tp-guest-input { width: 100%; padding: 10px 13px; border: 1.5px solid #e8e8e8; border-radius: 10px; font-size: 13px; font-family: inherit; outline: none; background: white; transition: border-color 0.15s; }
+      .tp-guest-input:focus { border-color: inherit; }
+      .tp-guest-submit { width: 100%; padding: 11px; color: white; border: none; border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; margin-top: 2px; transition: opacity 0.15s; }
+      .tp-guest-submit:hover { opacity: 0.9; }
+      .tp-guest-footer { text-align: center; font-size: 10px; color: #ccc; display: flex; align-items: center; justify-content: center; gap: 4px; }
+      .tp-guest-error { font-size: 12px; color: #ef4444; display: none; text-align: center; }
+      .tp-closed-banner { margin: 12px; padding: 16px; background: white; border: 1px solid #f0f0f0; border-radius: 16px; text-align: center; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
+      .tp-closed-title { font-size: 13px; font-weight: 700; color: #1a1a2e; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; }
+      .tp-closed-date { font-size: 11px; color: #aaa; margin-top: -8px; margin-bottom: 12px; }
+      .tp-csat-q { font-size: 12px; color: #888; margin-bottom: 10px; }
+      .tp-csat-btns { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }
+      .tp-csat-btn { flex: 1; padding: 10px; border-radius: 10px; border: 1.5px solid; background: white; cursor: pointer; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; font-family: inherit; }
+      .tp-csat-btn.positive { border-color: #22c55e; color: #22c55e; }
+      .tp-csat-btn.positive:hover { background: #22c55e; color: white; }
+      .tp-csat-btn.negative { border-color: #ef4444; color: #ef4444; }
+      .tp-csat-btn.negative:hover { background: #ef4444; color: white; }
+      .tp-csat-thanks { font-size: 13px; color: #888; margin-bottom: 14px; }
+      .tp-closed-new-btn { width: 100%; padding: 11px; color: white; border: none; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; margin-bottom: 8px; transition: opacity 0.15s; }
+      .tp-closed-new-btn:hover { opacity: 0.9; }
+      .tp-closed-hist-btn { width: 100%; padding: 9px; background: none; border: 1px solid #e8e8e8; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; color: #888; transition: background 0.15s; }
+      .tp-closed-hist-btn:hover { background: #f5f5f5; }
+      .tp-suggestions { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 6px; }
+      .tp-suggestion-btn { padding: 8px 14px; border-radius: 20px; border: 1.5px solid; background: white; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; font-family: inherit; transition: all 0.12s; }
+    `;
+    document.head.appendChild(style);
+  }
   const CLIENT_THEMES = {
     flix: {
@@ -116,8 +221,8 @@
   };
   const DEFAULT_THEME = { primary: '#7b1fa2', name: 'Support', position: 'right', suggestions: [] };
-  const WINDOW_WIDTH = '380px';
-  const WINDOW_HEIGHT = '580px';
+  const WINDOW_WIDTH = '340px';
+  const WINDOW_HEIGHT = '480px';
   function getClientTheme(client_id) {
     return CLIENT_THEMES[client_id] || DEFAULT_THEME;
@@ -143,8 +248,8 @@
   function playSound() {
     try {
       const ctx = new (window.AudioContext || window.webkitAudioContext)();
-      const osc = ctx.createOscillator();
-      const gain = ctx.createGain();
+      const osc = ctx.createOscillator(),
+        gain = ctx.createGain();
       osc.connect(gain);
       gain.connect(ctx.destination);
       osc.frequency.value = 880;
@@ -156,7 +261,9 @@
     } catch {}
   }
-  // ─── Component ───────────────────────────────────────────────────────────────
+  function formatTime(iso) {
+    return new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  }
   class TpChatbot extends HTMLElement {
     constructor() {
@@ -179,6 +286,7 @@
       this.access_token = '';
       this.is_fullscreen = false;
       this.is_minimized = false;
+      this.active_tab = 'new';
     }
     static get observedAttributes() {
@@ -195,9 +303,9 @@
         this.user_info = extractUserInfo(new_val);
         this.user_id = this.user_info?.user_id;
         this.applyTheme();
-        const guest_form = this.querySelector('#tp-guest-form');
-        if (guest_form) {
-          guest_form.remove();
+        const guest_wrap = this.querySelector('#tp-guest-wrap');
+        if (guest_wrap) {
+          guest_wrap.remove();
           this.showConversationList();
         }
       }
@@ -209,7 +317,6 @@
         if (!response.ok) return;
         const data = await response.json();
         const t = data.result?.result;
-        console.log('[fetchTheme] open_by_default:', t.open_by_default, typeof t.open_by_default);
         if (!t) return;
         if (CLIENT_THEMES[this.client_id]) {
           if (t.primary) CLIENT_THEMES[this.client_id].primary = t.primary;
@@ -225,7 +332,7 @@
           };
         }
       } catch (e) {
-        console.warn('[tp-chatbot] fetchTheme failed, using defaults:', e.message);
+        console.warn('[tp-chatbot] fetchTheme failed:', e.message);
       }
     }
@@ -242,6 +349,9 @@
       this.view = 'list';
       this.is_fullscreen = false;
       this.is_minimized = false;
+      this.active_tab = 'new';
+      injectCSS();
       this.fetchTheme().then(() => {
         this.render();
@@ -250,11 +360,7 @@
         this._initialized = true;
         const theme = getClientTheme(this.client_id);
-        console.log('[widget] theme after fetch:', theme);
-        if (theme.open_by_default) {
-          setTimeout(() => this.toggleChat(), 300);
-        }
+        if (theme.open_by_default) setTimeout(() => this.toggleChat(), 300);
         if (this.access_token) {
           this.user_info = extractUserInfo(this.access_token);
@@ -280,8 +386,6 @@
       if (this.polling_interval) clearInterval(this.polling_interval);
     }
-    // ─── i18n ──────────────────────────────────────────────────────────────────
     getMessages() {
       const lang = (this.user_info?.language || 'EN').toUpperCase();
       const msgs = {
@@ -307,6 +411,8 @@
           close_btn: 'Terminer la conversation',
           speak_agent: 'Parler à un agent',
           write_msg: 'Écrivez votre message...',
+          tab_new: 'Nouveau',
+          tab_history: 'Historique',
           limit_reached: 'Vous avez atteint la limite de 30 messages. Veuillez contacter un agent ou écrire à support@travelplanet.com.',
           too_many: 'Trop de messages. Veuillez patienter avant de réessayer.',
           error_occurred: 'Une erreur est survenue. Veuillez réessayer.',
@@ -321,6 +427,17 @@
           status_waiting: 'En attente',
           status_bot: 'Bot',
           messages: 'message',
+          guest_title: 'Bonjour ! Je suis Maria 👋',
+          guest_sub: "Identifiez-vous pour démarrer. Réponse en moins d'une minute.",
+          guest_firstname: 'Prénom *',
+          guest_company: 'Entreprise *',
+          guest_email: 'Email *',
+          guest_submit: 'Démarrer la conversation',
+          guest_secured: 'Données sécurisées · Propulsé par Makitizy',
+          guest_fill: 'Veuillez remplir tous les champs.',
+          guest_email_invalid: 'Veuillez entrer un email valide.',
+          helpful: 'Utile',
+          not_helpful: 'Pas utile',
         },
         EN: {
           closed: 'Conversation closed',
@@ -344,6 +461,8 @@
           close_btn: 'End conversation',
           speak_agent: 'Talk to an agent',
           write_msg: 'Write your message...',
+          tab_new: 'New',
+          tab_history: 'History',
           limit_reached: 'You have reached the 30 message limit. Please contact an agent or write to support@travelplanet.com.',
           too_many: 'Too many messages. Please wait before retrying.',
           error_occurred: 'An error occurred. Please try again.',
@@ -358,6 +477,17 @@
           status_waiting: 'Waiting',
           status_bot: 'Bot',
           messages: 'message',
+          guest_title: "Hello! I'm Maria 👋",
+          guest_sub: 'Identify yourself to start. Answer in less than a minute.',
+          guest_firstname: 'First name *',
+          guest_company: 'Company *',
+          guest_email: 'Email *',
+          guest_submit: 'Start conversation',
+          guest_secured: 'Secured data · Powered by Makitizy',
+          guest_fill: 'Please fill in all fields.',
+          guest_email_invalid: 'Please enter a valid email.',
+          helpful: 'Helpful',
+          not_helpful: 'Not helpful',
         },
         DE: {
           closed: 'Gespräch beendet',
@@ -366,8 +496,8 @@
           csat_negative: 'Danke, wir werden uns verbessern.',
           new_conv: 'Neues Gespräch',
           back_to_list: 'Zurück zur Liste',
-          agent_taken: 'Ein Agent hat Ihr Gespräch übernommen. Sie können ihm jetzt direkt schreiben.',
-          agent_released: 'Unser virtueller Assistent ist zurück. Wie kann ich Ihnen helfen?',
+          agent_taken: 'Ein Agent hat Ihr Gespräch übernommen.',
+          agent_released: 'Unser virtueller Assistent ist zurück.',
           close_confirm: 'Möchten Sie das Gespräch beenden?',
           terminated: 'Gespräch beendet',
           virtual: 'Virtueller Assistent',
@@ -381,13 +511,15 @@
           close_btn: 'Gespräch beenden',
           speak_agent: 'Mit einem Agenten sprechen',
           write_msg: 'Schreiben Sie Ihre Nachricht...',
+          tab_new: 'Neu',
+          tab_history: 'Verlauf',
           limit_reached: 'Sie haben das Limit von 30 Nachrichten erreicht.',
           too_many: 'Zu viele Nachrichten. Bitte warten Sie.',
-          error_occurred: 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.',
+          error_occurred: 'Ein Fehler ist aufgetreten.',
           outside_hours: next => `Unser Support ist derzeit geschlossen. Nächster Termin: ${next}.`,
-          no_agents: 'Derzeit kein Agent verfügbar. Bitte versuchen Sie es später.',
-          waiting_agent: 'Ihre Anfrage wurde übermittelt. Ein Agent übernimmt gleich.',
-          waiting_agent_already: 'Sie sind bereits in der Warteschlange. Bitte warten.',
+          no_agents: 'Derzeit kein Agent verfügbar.',
+          waiting_agent: 'Ihre Anfrage wurde übermittelt.',
+          waiting_agent_already: 'Sie sind bereits in der Warteschlange.',
           agent_already: 'Ein Agent betreut bereits Ihr Gespräch.',
           suggest_agent_escalation: 'Ich kann keine passende Antwort finden. Möchten Sie mit einem Agenten sprechen?',
           status_closed: 'Geschlossen',
@@ -395,6 +527,17 @@
           status_waiting: 'Wartend',
           status_bot: 'Bot',
           messages: 'Nachricht',
+          guest_title: 'Hallo! Ich bin Maria 👋',
+          guest_sub: 'Identifizieren Sie sich, um zu starten.',
+          guest_firstname: 'Vorname *',
+          guest_company: 'Unternehmen *',
+          guest_email: 'E-Mail *',
+          guest_submit: 'Gespräch starten',
+          guest_secured: 'Gesicherte Daten · Powered by Makitizy',
+          guest_fill: 'Bitte füllen Sie alle Felder aus.',
+          guest_email_invalid: 'Bitte geben Sie eine gültige E-Mail ein.',
+          helpful: 'Hilfreich',
+          not_helpful: 'Nicht hilfreich',
         },
         ES: {
           closed: 'Conversación cerrada',
@@ -403,14 +546,14 @@
           csat_negative: 'Gracias, mejoraremos.',
           new_conv: 'Nueva conversación',
           back_to_list: 'Volver a las conversaciones',
-          agent_taken: 'Un agente ha tomado su conversación. Ahora puede escribirle directamente.',
-          agent_released: 'Nuestro asistente virtual ha vuelto. ¿En qué puedo ayudarle?',
+          agent_taken: 'Un agente ha tomado su conversación.',
+          agent_released: 'Nuestro asistente virtual ha vuelto.',
           close_confirm: '¿Desea finalizar esta conversación?',
           terminated: 'Conversación terminada',
           virtual: 'Asistente virtual',
           human_agent: 'Agente humano',
           loading: 'Cargando...',
-          no_conv: 'No hay conversaciones por el momento.',
+          no_conv: 'No hay conversaciones.',
           new_conv_btn: 'Nueva conversación',
           error_load: 'Error de carga.',
           recent_conv: 'Sus conversaciones recientes',
@@ -418,20 +561,33 @@
           close_btn: 'Finalizar conversación',
           speak_agent: 'Hablar con un agente',
           write_msg: 'Escriba su mensaje...',
+          tab_new: 'Nuevo',
+          tab_history: 'Historial',
           limit_reached: 'Ha alcanzado el límite de 30 mensajes.',
-          too_many: 'Demasiados mensajes. Por favor espere.',
-          error_occurred: 'Se produjo un error. Por favor, inténtelo de nuevo.',
+          too_many: 'Demasiados mensajes.',
+          error_occurred: 'Se produjo un error.',
           outside_hours: next => `Nuestro soporte está cerrado. Próximo horario: ${next}.`,
-          no_agents: 'No hay agentes disponibles. Inténtelo más tarde.',
-          waiting_agent: 'Su solicitud ha sido enviada. Un agente le atenderá pronto.',
-          waiting_agent_already: 'Ya está en la cola de espera. Por favor, espere.',
+          no_agents: 'No hay agentes disponibles.',
+          waiting_agent: 'Su solicitud ha sido enviada.',
+          waiting_agent_already: 'Ya está en la cola.',
           agent_already: 'Un agente ya está gestionando su conversación.',
-          suggest_agent_escalation: 'No encuentro una respuesta adecuada. ¿Desea hablar con un agente?',
+          suggest_agent_escalation: '¿Desea hablar con un agente?',
           status_closed: 'Cerrado',
           status_agent: 'Agente',
           status_waiting: 'Esperando',
           status_bot: 'Bot',
           messages: 'mensaje',
+          guest_title: '¡Hola! Soy Maria 👋',
+          guest_sub: 'Identifíquese para comenzar.',
+          guest_firstname: 'Nombre *',
+          guest_company: 'Empresa *',
+          guest_email: 'Email *',
+          guest_submit: 'Iniciar conversación',
+          guest_secured: 'Datos seguros · Powered by Makitizy',
+          guest_fill: 'Complete todos los campos.',
+          guest_email_invalid: 'Email inválido.',
+          helpful: 'Útil',
+          not_helpful: 'No útil',
         },
         IT: {
           closed: 'Conversazione chiusa',
@@ -441,13 +597,13 @@
           new_conv: 'Nuova conversazione',
           back_to_list: 'Torna alle conversazioni',
           agent_taken: 'Un agente ha preso in carico la sua conversazione.',
-          agent_released: 'Il nostro assistente virtuale è tornato. Come posso aiutarla?',
+          agent_released: 'Il nostro assistente virtuale è tornato.',
           close_confirm: 'Vuole terminare questa conversazione?',
           terminated: 'Conversazione terminata',
           virtual: 'Assistente virtuale',
           human_agent: 'Agente umano',
           loading: 'Caricamento...',
-          no_conv: 'Nessuna conversazione per il momento.',
+          no_conv: 'Nessuna conversazione.',
           new_conv_btn: 'Nuova conversazione',
           error_load: 'Errore di caricamento.',
           recent_conv: 'Le sue conversazioni recenti',
@@ -455,20 +611,33 @@
           close_btn: 'Termina conversazione',
           speak_agent: 'Parla con un agente',
           write_msg: 'Scrivi il tuo messaggio...',
+          tab_new: 'Nuovo',
+          tab_history: 'Cronologia',
           limit_reached: 'Hai raggiunto il limite di 30 messaggi.',
-          too_many: 'Troppi messaggi. Attendere prego.',
-          error_occurred: 'Si è verificato un errore. Riprova.',
+          too_many: 'Troppi messaggi.',
+          error_occurred: 'Si è verificato un errore.',
           outside_hours: next => `Il supporto è chiuso. Prossima disponibilità: ${next}.`,
-          no_agents: 'Nessun agente disponibile. Riprova più tardi.',
-          waiting_agent: 'Richiesta inviata. Un agente prenderà in carico la conversazione.',
-          waiting_agent_already: 'È già in coda. Attenda.',
+          no_agents: 'Nessun agente disponibile.',
+          waiting_agent: 'Richiesta inviata.',
+          waiting_agent_already: 'È già in coda.',
           agent_already: 'Un agente sta già gestendo la conversazione.',
-          suggest_agent_escalation: 'Non riesco a trovare una risposta adeguata. Desidera parlare con un agente?',
+          suggest_agent_escalation: 'Desidera parlare con un agente?',
           status_closed: 'Chiuso',
           status_agent: 'Agente',
           status_waiting: 'Attesa',
           status_bot: 'Bot',
           messages: 'messaggio',
+          guest_title: 'Ciao! Sono Maria 👋',
+          guest_sub: 'Si identifichi per iniziare.',
+          guest_firstname: 'Nome *',
+          guest_company: 'Azienda *',
+          guest_email: 'Email *',
+          guest_submit: 'Inizia conversazione',
+          guest_secured: 'Dati sicuri · Powered by Makitizy',
+          guest_fill: 'Compila tutti i campi.',
+          guest_email_invalid: 'Email non valida.',
+          helpful: 'Utile',
+          not_helpful: 'Non utile',
         },
         NL: {
           closed: 'Gesprek gesloten',
@@ -478,13 +647,13 @@
           new_conv: 'Nieuw gesprek',
           back_to_list: 'Terug naar gesprekken',
           agent_taken: 'Een agent heeft uw gesprek overgenomen.',
-          agent_released: 'Onze virtuele assistent is terug. Hoe kan ik u helpen?',
+          agent_released: 'Onze virtuele assistent is terug.',
           close_confirm: 'Wilt u dit gesprek beëindigen?',
           terminated: 'Gesprek beëindigd',
           virtual: 'Virtuele assistent',
           human_agent: 'Menselijke agent',
           loading: 'Laden...',
-          no_conv: 'Geen gesprekken op dit moment.',
+          no_conv: 'Geen gesprekken.',
           new_conv_btn: 'Nieuw gesprek',
           error_load: 'Laadout.',
           recent_conv: 'Uw recente gesprekken',
@@ -492,20 +661,33 @@
           close_btn: 'Gesprek beëindigen',
           speak_agent: 'Praat met een agent',
           write_msg: 'Schrijf uw bericht...',
+          tab_new: 'Nieuw',
+          tab_history: 'Geschiedenis',
           limit_reached: 'U heeft de limiet van 30 berichten bereikt.',
-          too_many: 'Te veel berichten. Wacht even.',
-          error_occurred: 'Er is een fout opgetreden. Probeer het opnieuw.',
-          outside_hours: next => `Onze support is gesloten. Volgende beschikbare tijd: ${next}.`,
-          no_agents: 'Geen agent beschikbaar. Probeer het later opnieuw.',
-          waiting_agent: 'Uw verzoek is verzonden. Een agent neemt het gesprek over.',
-          waiting_agent_already: 'U staat al in de wachtrij. Even geduld.',
+          too_many: 'Te veel berichten.',
+          error_occurred: 'Er is een fout opgetreden.',
+          outside_hours: next => `Support is gesloten. Volgende tijd: ${next}.`,
+          no_agents: 'Geen agent beschikbaar.',
+          waiting_agent: 'Uw verzoek is verzonden.',
+          waiting_agent_already: 'U staat al in de wachtrij.',
           agent_already: 'Een agent beheert uw gesprek al.',
-          suggest_agent_escalation: 'Ik kan geen passend antwoord vinden. Wilt u met een agent spreken?',
+          suggest_agent_escalation: 'Wilt u met een agent spreken?',
           status_closed: 'Gesloten',
           status_agent: 'Agent',
           status_waiting: 'Wachten',
           status_bot: 'Bot',
           messages: 'bericht',
+          guest_title: 'Hallo! Ik ben Maria 👋',
+          guest_sub: 'Identificeer uzelf om te starten.',
+          guest_firstname: 'Voornaam *',
+          guest_company: 'Bedrijf *',
+          guest_email: 'E-mail *',
+          guest_submit: 'Gesprek starten',
+          guest_secured: 'Beveiligde gegevens · Powered by Makitizy',
+          guest_fill: 'Vul alle velden in.',
+          guest_email_invalid: 'Ongeldig e-mailadres.',
+          helpful: 'Nuttig',
+          not_helpful: 'Niet nuttig',
         },
       };
       return msgs[lang] || msgs['EN'];
@@ -525,8 +707,6 @@
       return msgs[lang] || msgs['EN'];
     }
-    // ─── Theme ─────────────────────────────────────────────────────────────────
     getThemeColor() {
       return getClientTheme(this.client_id).primary;
     }
@@ -547,30 +727,28 @@
       const style = document.createElement('style');
       style.id = 'tp-chatbot-theme';
       style.textContent = `
-        .tp-chatbot-bubble { background: linear-gradient(135deg, ${color}, ${dark}) !important; box-shadow: 0 4px 16px ${color}66 !important; }
-        .tp-chatbot-header { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
-        .tp-chatbot-message.user .tp-chatbot-bubble-msg { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
-        .tp-chatbot-avatar { color: ${color} !important; }
-        .tp-chatbot-role { color: ${color} !important; }
-        .tp-chatbot-message.user .tp-chatbot-role { color: rgba(255,255,255,0.8) !important; }
-        .tp-chatbot-input:focus { border-color: ${color} !important; }
-        .tp-chatbot-send { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
-        .tp-chatbot-agent-btn { border-color: ${color} !important; color: ${color} !important; }
-        .tp-chatbot-agent-btn:hover { background: ${color} !important; color: white !important; }
-        .tp-chatbot-typing span { background: ${color} !important; }
-        #tp-new-conversation { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
-        .tp-conv-item:hover { background: ${color}11 !important; }
+        .tp-chatbot-bubble { background: linear-gradient(135deg, ${color}, ${dark}) !important; box-shadow: 0 4px 20px ${color}55 !important; }
+        .tp-header { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
+        .tp-msg.user .tp-bubble-msg { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
+        .tp-input:focus { border-color: ${color} !important; }
+        .tp-send { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
+        .tp-agent-btn { border-color: ${color} !important; color: ${color} !important; }
+        .tp-agent-btn:hover { background: ${color} !important; color: white !important; }
+        .tp-typing span { background: ${color} !important; }
+        .tp-new-conv-btn { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
         .tp-conv-new-btn { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
-        .tp-badge-closed { background: ${color}22 !important; color: ${dark} !important; }
-        .tp-attach-btn { color: ${color} !important; }
-        .tp-attach-btn:hover { background: ${color}18 !important; }
+        .tp-conv-item:hover { background: ${color}0d !important; }
+        .tp-guest-input:focus { border-color: ${color} !important; }
+        .tp-guest-submit { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
+        .tp-tab.active { border-bottom-color: white !important; color: white !important; }
+        .tp-closed-new-btn { background: linear-gradient(135deg, ${color}, ${dark}) !important; }
+        .tp-suggestion-btn { border-color: ${color} !important; color: ${color} !important; }
+        .tp-suggestion-btn:hover { background: ${color} !important; color: white !important; }
       `;
       document.head.appendChild(style);
       const position = getClientTheme(this.client_id).position || 'right';
       const host = this.querySelector('.tp-chatbot-host');
       if (host) {
-        host.style.width = WINDOW_WIDTH;
         host.style.left = position === 'left' ? '24px' : 'auto';
         host.style.right = position === 'left' ? 'auto' : '24px';
       }
@@ -579,7 +757,7 @@
         bubble.style.marginLeft = position === 'left' ? '0' : 'auto';
         bubble.style.marginRight = position === 'left' ? 'auto' : '0';
       }
-      const win = this.querySelector('.tp-chatbot-window');
+      const win = this.querySelector('#tp-window');
       if (win) {
         win.style.left = '0';
         win.style.right = 'auto';
@@ -587,47 +765,55 @@
       }
     }
-    // ─── Render ────────────────────────────────────────────────────────────────
     render() {
       const theme = getClientTheme(this.client_id);
+      const m = this.getMessages();
       this.innerHTML = `
         <div class="tp-chatbot-host">
           <div class="tp-chatbot-window" id="tp-window">
-            <div class="tp-chatbot-header" id="tp-header">
-              <div class="tp-chatbot-avatar">M</div>
-              <div style="flex:1;min-width:0;">
-                <div class="tp-chatbot-title">${theme.name} Support</div>
-                <div class="tp-chatbot-subtitle" id="tp-subtitle">${icon('bot', 12, 'margin-right:4px')} Assistant</div>
+            <div class="tp-header" id="tp-header">
+              <div class="tp-header-top">
+                <div class="tp-header-avatar">M<div class="tp-header-dot"></div></div>
+                <div class="tp-header-info">
+                  <div class="tp-header-title">${theme.name} Support</div>
+                  <div class="tp-header-subtitle" id="tp-subtitle">${icon('bot', 11)} ${m.virtual}</div>
+                </div>
+                <div class="tp-header-controls">
+                  <button id="tp-sound-btn" class="tp-header-btn" title="Sound">${icon('bell', 14)}</button>
+                  <button id="tp-minimize-btn" class="tp-header-btn" title="Minimize">${icon('minimize', 14)}</button>
+                  <button id="tp-maximize-btn" class="tp-header-btn" title="Fullscreen">${icon('restore', 14)}</button>
+                  <button id="tp-back-btn" class="tp-header-btn" style="display:none;" title="Back">${icon('back', 14)}</button>
+                  <button id="tp-close-win-btn" class="tp-header-btn" title="Close">${icon('close', 14)}</button>
+                </div>
+              </div>
+              <div class="tp-tabs" id="tp-tabs">
+                <button class="tp-tab active" data-tab="new" id="tp-tab-new">${icon('msg_plus', 12)} ${m.tab_new}</button>
+                <button class="tp-tab" data-tab="history" id="tp-tab-history">${icon('history', 12)} ${m.tab_history}</button>
               </div>
-              <button id="tp-sound-btn" class="tp-header-btn" title="Sound">${icon('bell', 16)}</button>
-              <button id="tp-minimize-btn" class="tp-header-btn" title="Minimize">${icon('minimize', 16)}</button>
-              <button id="tp-maximize-btn" class="tp-header-btn" title="Fullscreen">${icon('restore', 16)}</button>
-              <button id="tp-back-btn" class="tp-header-btn" style="display:none;" title="Back">${icon('back', 16)}</button>
             </div>
-            <div class="tp-chatbot-messages" id="tp-messages"></div>
-            <div class="tp-chatbot-agent-bar" id="tp-agent-bar" style="display:none;">
-              <button class="tp-chatbot-agent-btn" id="tp-agent-btn">
-                <span style="display:inline-flex;align-items:center;gap:6px;">${icon('agent', 16)} Talk to an agent</span>
+            <div class="tp-body" id="tp-body">
+              <div class="tp-messages-wrap" id="tp-messages"></div>
+            </div>
+            <div class="tp-agent-bar" id="tp-agent-bar" style="display:none;">
+              <button class="tp-agent-btn" id="tp-agent-btn">
+                <span style="display:inline-flex;align-items:center;gap:6px;">${icon('agent', 15)} ${m.speak_agent}</span>
               </button>
             </div>
-            <div class="tp-chatbot-input-bar" id="tp-chatbot-input-bar" style="display:none;">
-              <textarea class="tp-chatbot-input" id="tp-input" placeholder="Write your message..." rows="1"></textarea>
-              <button class="tp-chatbot-send" id="tp-send">${icon('send', 16, 'color:white')}</button>
+            <div class="tp-input-bar" id="tp-input-bar" style="display:none;">
+              <textarea class="tp-input" id="tp-input" placeholder="${m.write_msg}" rows="1"></textarea>
+              <button class="tp-send" id="tp-send">${icon('send', 15, 'color:white')}</button>
             </div>
-            <div id="tp-close-bar" style="padding:8px 12px;border-top:1px solid #ede8f5;text-align:center;display:none;">
-              <button id="tp-close-btn" class="tp-close-btn">
-                <span style="display:inline-flex;align-items:center;gap:6px;">${icon('check', 14)} End conversation</span>
+            <div class="tp-close-bar" id="tp-close-bar" style="display:none;">
+              <button class="tp-close-btn" id="tp-close-btn">
+                <span style="display:inline-flex;align-items:center;gap:5px;">${icon('check', 12)} ${m.close_btn}</span>
               </button>
             </div>
           </div>
-          <div class="tp-chatbot-bubble" id="tp-bubble">${icon('msg', 24, 'color:white')}</div>
+          <div class="tp-chatbot-bubble" id="tp-bubble">${icon('msg', 26, 'color:white')}</div>
         </div>
       `;
     }
-    // ─── Window controls ───────────────────────────────────────────────────────
     minimize() {
       const win = this.querySelector('#tp-window');
       if (this.is_fullscreen) this.exitFullscreen(false);
@@ -637,8 +823,8 @@
     }
     enterFullscreen() {
-      const win = this.querySelector('#tp-window');
-      const host = this.querySelector('.tp-chatbot-host');
+      const win = this.querySelector('#tp-window'),
+        host = this.querySelector('.tp-chatbot-host');
       this.is_fullscreen = true;
       this.is_minimized = false;
       win.style.position = 'fixed';
@@ -650,19 +836,19 @@
       win.style.zIndex = '99999';
       host.style.width = '100vw';
       const btn = this.querySelector('#tp-maximize-btn');
-      if (btn) btn.innerHTML = icon('restore', 16);
+      if (btn) btn.innerHTML = icon('restore', 14);
     }
     exitFullscreen(restore_height = true) {
-      const win = this.querySelector('#tp-window');
-      const position = getClientTheme(this.client_id).position || 'right';
-      const host = this.querySelector('.tp-chatbot-host');
+      const win = this.querySelector('#tp-window'),
+        position = getClientTheme(this.client_id).position || 'right',
+        host = this.querySelector('.tp-chatbot-host');
       this.is_fullscreen = false;
       win.style.position = 'absolute';
       win.style.top = '';
       win.style.left = '0';
       win.style.width = WINDOW_WIDTH;
-      win.style.borderRadius = '16px';
+      win.style.borderRadius = '20px';
       win.style.zIndex = '';
       host.style.width = WINDOW_WIDTH;
       host.style.left = position === 'left' ? '24px' : 'auto';
@@ -670,33 +856,33 @@
       if (restore_height) win.style.height = WINDOW_HEIGHT;
       win.style.overflow = 'hidden';
       const btn = this.querySelector('#tp-maximize-btn');
-      if (btn) btn.innerHTML = icon('restore', 16);
+      if (btn) btn.innerHTML = icon('restore', 14);
     }
-    // ─── Events ────────────────────────────────────────────────────────────────
     attachEvents() {
       this.querySelector('#tp-bubble').addEventListener('click', () => this.toggleChat());
+      this.querySelector('#tp-close-win-btn').addEventListener('click', () => {
+        if (this.is_open) this.toggleChat();
+      });
       this.querySelector('#tp-send').addEventListener('click', () => this.sendMessage());
       this.querySelector('#tp-agent-btn').addEventListener('click', () => this.requestAgent());
-      this.querySelector('#tp-back-btn').addEventListener('click', () => this.showConversationList());
+      this.querySelector('#tp-back-btn').addEventListener('click', () => {
+        this.setTab('new');
+        this.showConversationList();
+      });
       this.querySelector('#tp-input').addEventListener('keydown', e => {
         if (e.key === 'Enter' && !e.shiftKey) {
           e.preventDefault();
           this.sendMessage();
         }
       });
       this.querySelector('#tp-sound-btn').addEventListener('click', () => {
         this.sound_enabled = !this.sound_enabled;
-        this.querySelector('#tp-sound-btn').innerHTML = icon(this.sound_enabled ? 'bell' : 'bell_off', 16);
+        this.querySelector('#tp-sound-btn').innerHTML = icon(this.sound_enabled ? 'bell' : 'bell_off', 14);
       });
       this.querySelector('#tp-close-btn').addEventListener('click', () => {
         if (window.confirm(this.getMessages().close_confirm)) this.closeByUser();
       });
       this.querySelector('#tp-minimize-btn').addEventListener('click', () => {
         if (this.is_minimized) {
           this.is_minimized = false;
@@ -707,7 +893,6 @@
           this.minimize();
         }
       });
       this.querySelector('#tp-maximize-btn').addEventListener('click', () => {
         if (this.is_fullscreen) {
           this.exitFullscreen(true);
@@ -721,29 +906,45 @@
           this.enterFullscreen();
         }
       });
+      this.querySelector('#tp-tab-new').addEventListener('click', () => {
+        this.setTab('new');
+        this.showConversationList();
+      });
+      this.querySelector('#tp-tab-history').addEventListener('click', () => {
+        this.setTab('history');
+        this.showConversationList();
+      });
+    }
+    setTab(tab) {
+      this.active_tab = tab;
+      this.querySelectorAll('.tp-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tab));
+    }
+    showTabs(visible) {
+      const tabs = this.querySelector('#tp-tabs');
+      if (tabs) tabs.style.display = visible ? 'flex' : 'none';
     }
     updateUILanguage() {
       const m = this.getMessages();
       const agent_btn = this.querySelector('#tp-agent-btn');
       if (agent_btn)
-        agent_btn.innerHTML = `<span style="display:inline-flex;align-items:center;gap:6px;">${icon('agent', 16)} ${m.speak_agent}</span>`;
+        agent_btn.innerHTML = `<span style="display:inline-flex;align-items:center;gap:6px;">${icon('agent', 15)} ${m.speak_agent}</span>`;
       const close_btn = this.querySelector('#tp-close-btn');
       if (close_btn)
-        close_btn.innerHTML = `<span style="display:inline-flex;align-items:center;gap:6px;">${icon('check', 14)} ${m.close_btn}</span>`;
+        close_btn.innerHTML = `<span style="display:inline-flex;align-items:center;gap:5px;">${icon('check', 12)} ${m.close_btn}</span>`;
       const input = this.querySelector('#tp-input');
       if (input) input.placeholder = m.write_msg;
-      const subtitle = this.querySelector('#tp-subtitle');
-      if (subtitle) subtitle.innerHTML = `${icon('bot', 12, 'margin-right:4px')} ${m.virtual}`;
     }
     toggleChat() {
       this.is_open = !this.is_open;
-      const window_el = this.querySelector('#tp-window');
-      const bubble = this.querySelector('#tp-bubble');
+      const window_el = this.querySelector('#tp-window'),
+        bubble = this.querySelector('#tp-bubble');
       if (this.is_open) {
         window_el.classList.add('open');
-        bubble.innerHTML = icon('close', 20, 'color:white');
+        bubble.innerHTML = icon('close', 22, 'color:white');
         if (this.is_minimized) {
           this.is_minimized = false;
           window_el.style.height = WINDOW_HEIGHT;
@@ -751,7 +952,7 @@
         }
       } else {
         window_el.classList.remove('open');
-        bubble.innerHTML = icon('msg', 24, 'color:white');
+        bubble.innerHTML = icon('msg', 22, 'color:white');
         if (this.is_fullscreen) this.exitFullscreen(true);
       }
     }
@@ -773,31 +974,20 @@
       return data.result?.conversation_id;
     }
-    // ─── Suggestions ──────────────────────────────────────────────────────────
     showSuggestions(suggestions) {
       const existing = this.querySelector('#tp-suggestions');
       if (existing) existing.remove();
       if (!suggestions || suggestions.length === 0) return;
       const lang = (this.user_info?.language || 'EN').toUpperCase();
-      const color = this.getThemeColor();
       const container = this.querySelector('#tp-messages');
       const wrap = document.createElement('div');
       wrap.id = 'tp-suggestions';
-      wrap.style.cssText = 'padding:8px 12px 12px;display:flex;flex-direction:column;gap:6px;';
+      wrap.className = 'tp-suggestions';
       suggestions.forEach(s => {
         const label = s[lang] || s['EN'];
         const btn = document.createElement('button');
-        btn.style.cssText = `padding:8px 14px;border-radius:20px;border:1.5px solid ${color};background:white;color:${color};font-size:12px;font-weight:600;cursor:pointer;text-align:left;font-family:inherit;transition:all 0.12s;`;
+        btn.className = 'tp-suggestion-btn';
         btn.textContent = `→ ${label}`;
-        btn.addEventListener('mouseenter', () => {
-          btn.style.background = color;
-          btn.style.color = 'white';
-        });
-        btn.addEventListener('mouseleave', () => {
-          btn.style.background = 'white';
-          btn.style.color = color;
-        });
         btn.addEventListener('click', () => {
           const sugg_el = this.querySelector('#tp-suggestions');
           if (sugg_el) sugg_el.remove();
@@ -813,8 +1003,6 @@
       container.scrollTop = container.scrollHeight;
     }
-    // ─── Conversation List ─────────────────────────────────────────────────────
     async showConversationList() {
       this.view = 'list';
       const m = this.getMessages();
@@ -822,94 +1010,107 @@
         clearInterval(this.polling_interval);
         this.polling_interval = null;
       }
       const subtitle = this.querySelector('#tp-subtitle');
-      if (subtitle) subtitle.innerHTML = `${icon('bot', 12, 'margin-right:4px')} ${m.virtual}`;
+      if (subtitle) subtitle.innerHTML = `${icon('bot', 11)} ${m.virtual}`;
       this.querySelector('#tp-back-btn').style.display = 'none';
-      this.querySelector('#tp-chatbot-input-bar').style.display = 'none';
+      this.querySelector('#tp-input-bar').style.display = 'none';
       this.querySelector('#tp-agent-bar').style.display = 'none';
       this.querySelector('#tp-close-bar').style.display = 'none';
+      this.showTabs(true);
       const container = this.querySelector('#tp-messages');
-      container.style.background = '#f5f5f7';
-      container.innerHTML = `<div style="padding:16px;text-align:center;color:#aaa;font-size:12px;">${m.loading}</div>`;
+      container.innerHTML = `<div style="padding:24px 16px;text-align:center;color:#ccc;font-size:12px;">${m.loading}</div>`;
       try {
         const url = `${this.api_url}/chat/conversations?user_id=${encodeURIComponent(this.user_id)}&limit=5`;
         const response = await fetch(url, { headers: this.getHeaders() });
         const data = await response.json();
         const conversations = data.result?.conversations || [];
         const color = this.getThemeColor();
         container.innerHTML = '';
-        container.style.background = 'white';
-        container.style.padding = '0';
-        // Header greeting
-        const header_el = document.createElement('div');
-        header_el.style.cssText = 'padding:16px;border-bottom:1px solid #f0f0f0;';
-        header_el.innerHTML = `
-          <div style="font-size:14px;font-weight:700;color:#1a1a2e;margin-bottom:2px;">${m.hello} ${this.user_info?.first_name || ''} 👋</div>
-          <div style="font-size:12px;color:#aaa;">${m.recent_conv}</div>
-        `;
-        container.appendChild(header_el);
-        if (conversations.length === 0) {
-          const empty = document.createElement('div');
-          empty.style.cssText = 'padding:32px 16px;text-align:center;color:#bbb;font-size:13px;';
-          empty.innerHTML = `<div style="margin-bottom:8px;opacity:0.4;">${icon('msg', 32)}</div>${m.no_conv}`;
-          container.appendChild(empty);
-        } else {
-          conversations.forEach(conv => {
-            const item = document.createElement('div');
-            item.className = 'tp-conv-item';
-            item.style.cssText =
-              'padding:14px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background 0.15s;display:flex;justify-content:space-between;align-items:center;';
-            const is_closed = conv.status === 'closed';
+        if (this.active_tab === 'new') {
+          const greeting = document.createElement('div');
+          greeting.style.cssText = 'padding:20px 16px 8px;';
+          greeting.innerHTML = `<div style="background:white;border-radius:16px;padding:16px;box-shadow:0 1px 8px rgba(0,0,0,0.07);margin-bottom:14px;"><div style="font-size:14px;font-weight:700;color:#1a1a2e;margin-bottom:4px;">${m.hello} ${this.user_info?.first_name || ''} 👋</div><div style="font-size:12px;color:#aaa;line-height:1.5;">${m.recent_conv}</div></div>`;
+          container.appendChild(greeting);
+          if (conversations.length === 0) {
+            const empty = document.createElement('div');
+            empty.style.cssText =
+              'padding:20px 16px;text-align:center;color:#ccc;font-size:13px;display:flex;flex-direction:column;align-items:center;gap:10px;';
+            empty.innerHTML = `<div style="opacity:0.35;">${icon('msg', 36)}</div>${m.no_conv}`;
+            container.appendChild(empty);
+          } else {
+            const last_conv = conversations[0];
+            const is_closed = last_conv.status === 'closed';
+            const badge_color = last_conv.status === 'waiting_agent' ? '#f59e0b' : color;
             const status_label = is_closed
               ? m.status_closed
-              : conv.status === 'agent'
+              : last_conv.status === 'agent'
                 ? m.status_agent
-                : conv.status === 'waiting_agent'
+                : last_conv.status === 'waiting_agent'
                   ? m.status_waiting
                   : m.status_bot;
-            const badge_color = is_closed ? color : conv.status === 'waiting_agent' ? '#f59e0b' : color;
-            const date = new Date(conv.updated_at).toLocaleDateString('fr-FR', {
+            const date = new Date(last_conv.updated_at).toLocaleDateString('fr-FR', {
               day: '2-digit',
               month: '2-digit',
               hour: '2-digit',
               minute: '2-digit',
             });
-            item.innerHTML = `
-              <div>
-                <div style="font-size:13px;font-weight:600;color:${is_closed ? '#888' : '#1a1a2e'};margin-bottom:3px;">${date}</div>
-                <div style="font-size:11px;color:#bbb;">${conv.message_count} ${m.messages}${conv.message_count > 1 ? 's' : ''}</div>
-              </div>
-              <span class="tp-badge-closed" style="display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;background:${badge_color}18;color:${badge_color};">
-                ${is_closed ? icon('check', 11) : ''} ${status_label}
-              </span>
-            `;
-            item.addEventListener('click', () => this.openConversation(conv.conversation_id, is_closed));
+            const item = document.createElement('div');
+            item.style.cssText =
+              'margin:0 16px 14px;background:white;border-radius:14px;padding:14px 16px;box-shadow:0 1px 6px rgba(0,0,0,0.07);cursor:pointer;transition:box-shadow 0.15s;display:flex;justify-content:space-between;align-items:center;';
+            item.innerHTML = `<div><div style="font-size:12px;font-weight:600;color:${is_closed ? '#aaa' : '#1a1a2e'};margin-bottom:3px;">${date}</div><div style="font-size:11px;color:#ccc;">${last_conv.message_count} ${m.messages}${last_conv.message_count > 1 ? 's' : ''}</div></div><span style="font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;background:${badge_color}18;color:${badge_color};">${status_label}</span>`;
+            item.addEventListener('mouseenter', () => {
+              item.style.boxShadow = '0 3px 12px rgba(0,0,0,0.12)';
+            });
+            item.addEventListener('mouseleave', () => {
+              item.style.boxShadow = '0 1px 6px rgba(0,0,0,0.07)';
+            });
+            item.addEventListener('click', () => this.openConversation(last_conv.conversation_id, is_closed));
             container.appendChild(item);
-          });
+          }
+          const btn_wrap = document.createElement('div');
+          btn_wrap.style.cssText = 'padding:4px 16px 16px;';
+          btn_wrap.innerHTML = `<button class="tp-new-conv-btn">${icon('msg_plus', 15, 'color:white')} ${m.new_conv_btn}</button>`;
+          btn_wrap.querySelector('button').addEventListener('click', () => this.startNewConversation());
+          container.appendChild(btn_wrap);
+        } else {
+          const greeting = document.createElement('div');
+          greeting.style.cssText = 'padding:16px 16px 8px;';
+          greeting.innerHTML = `<div style="font-size:12px;font-weight:600;color:#aaa;text-transform:uppercase;letter-spacing:0.5px;">${m.recent_conv}</div>`;
+          container.appendChild(greeting);
+          if (conversations.length === 0) {
+            const empty = document.createElement('div');
+            empty.style.cssText =
+              'padding:32px 16px;text-align:center;color:#ccc;font-size:13px;display:flex;flex-direction:column;align-items:center;gap:10px;';
+            empty.innerHTML = `<div style="opacity:0.35;">${icon('history', 36)}</div>${m.no_conv}`;
+            container.appendChild(empty);
+          } else {
+            conversations.forEach(conv => {
+              const is_closed = conv.status === 'closed';
+              const badge_color = conv.status === 'waiting_agent' ? '#f59e0b' : color;
+              const status_label = is_closed
+                ? m.status_closed
+                : conv.status === 'agent'
+                  ? m.status_agent
+                  : conv.status === 'waiting_agent'
+                    ? m.status_waiting
+                    : m.status_bot;
+              const date = new Date(conv.updated_at).toLocaleDateString('fr-FR', {
+                day: '2-digit',
+                month: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+              });
+              const item = document.createElement('div');
+              item.className = 'tp-conv-item';
+              item.innerHTML = `<div class="tp-conv-item-left"><div class="tp-conv-item-date" style="color:${is_closed ? '#aaa' : '#1a1a2e'}">${date}</div><div class="tp-conv-item-count">${conv.message_count} ${m.messages}${conv.message_count > 1 ? 's' : ''}</div></div><span class="tp-badge" style="background:${badge_color}18;color:${badge_color};">${is_closed ? icon('check', 10) : ''} ${status_label}</span>`;
+              item.addEventListener('click', () => this.openConversation(conv.conversation_id, is_closed));
+              container.appendChild(item);
+            });
+          }
         }
-        // New conversation button
-        const new_btn_wrap = document.createElement('div');
-        new_btn_wrap.style.cssText = 'padding:16px;';
-        new_btn_wrap.innerHTML = `
-          <button class="tp-conv-new-btn" style="width:100%;padding:12px;color:white;border:none;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;">
-            ${icon('msg_plus', 16, 'color:white')} ${m.new_conv_btn}
-          </button>
-        `;
-        new_btn_wrap.querySelector('button').addEventListener('click', () => this.startNewConversation());
-        container.appendChild(new_btn_wrap);
       } catch (e) {
         console.error('showConversationList error:', e);
-        container.innerHTML = `<div style="padding:16px;text-align:center;color:#ef4444;font-size:13px;">${m.error_load}</div>`;
+        container.innerHTML = `<div style="padding:24px 16px;text-align:center;color:#ef4444;font-size:13px;">${this.getMessages().error_load}</div>`;
       }
     }
@@ -921,56 +1122,42 @@
       this.is_closed = is_closed;
       this.agent_mode = false;
       this.agent_requested = false;
-      const m = this.getMessages();
-      this.querySelector('#tp-back-btn').style.display = 'block';
+      this.querySelector('#tp-back-btn').style.display = 'flex';
+      this.showTabs(false);
       const container = this.querySelector('#tp-messages');
-      container.style.background = '#f5f5f7';
-      container.style.padding = '16px';
       container.innerHTML = '';
-      const input_bar = this.querySelector('#tp-chatbot-input-bar');
-      const agent_bar = this.querySelector('#tp-agent-bar');
-      const close_bar = this.querySelector('#tp-close-bar');
       try {
         const url = `${this.api_url}/chat/conversations/${conversation_id}?user_id=${encodeURIComponent(this.user_id)}`;
         const response = await fetch(url, { headers: this.getHeaders() });
         const data = await response.json();
         const conv = data.result?.conversation;
         if (!conv) return;
         conv.messages.forEach(msg => {
-          if (['user', 'assistant', 'agent', 'system'].includes(msg.role)) {
-            this.addMessage(msg.role, msg.content, msg.message_id || null);
-          }
+          if (['user', 'assistant', 'agent', 'system'].includes(msg.role)) this.addMessage(msg.role, msg.content, msg.message_id || null);
         });
         this.last_message_count = conv.messages.length;
         if (conv.status === 'closed') {
           this.showClosed(conv.csat || null);
           return;
         }
+        const input_bar = this.querySelector('#tp-input-bar'),
+          agent_bar = this.querySelector('#tp-agent-bar'),
+          close_bar = this.querySelector('#tp-close-bar');
         if (conv.status === 'bot' || conv.status === 'waiting_agent') {
           if (close_bar) close_bar.style.display = 'block';
         } else {
           if (close_bar) close_bar.style.display = 'none';
         }
         if (conv.status === 'agent') {
           this.agent_mode = true;
-          const subtitle = this.querySelector('#tp-subtitle');
-          if (subtitle) subtitle.innerHTML = `${icon('user', 12, 'margin-right:4px')} ${m.human_agent}`;
+          this._updateSubtitle('agent');
           if (agent_bar) agent_bar.style.display = 'none';
           if (input_bar) input_bar.style.display = 'flex';
         } else {
           if (input_bar) input_bar.style.display = 'flex';
           if (agent_bar) agent_bar.style.display = 'none';
-          const subtitle = this.querySelector('#tp-subtitle');
-          if (subtitle) subtitle.innerHTML = `${icon('bot', 12, 'margin-right:4px')} ${m.virtual}`;
+          this._updateSubtitle('bot');
         }
         this.updateUILanguage();
         this.polling_interval = setInterval(() => this.pollMessages(), 3000);
       } catch (e) {
@@ -978,6 +1165,7 @@
       }
     }
+    // ─── FIXED: conv créée au premier sendMessage, pas à l'ouverture ──────────
     async startNewConversation() {
       this.view = 'chat';
       this.is_closed = false;
@@ -985,71 +1173,78 @@
       this.agent_requested = false;
       this.messages = [];
       this.last_message_count = 0;
-      this.conversation_id = null;
-      const m = this.getMessages();
-      this.querySelector('#tp-back-btn').style.display = 'block';
-      this.querySelector('#tp-close-bar').style.display = 'block';
+      this.conversation_id = null; // pas encore créée
+      this.querySelector('#tp-back-btn').style.display = 'flex';
+      this.querySelector('#tp-close-bar').style.display = 'none'; // cachée tant que pas de conv
+      this.showTabs(false);
       const container = this.querySelector('#tp-messages');
-      container.style.background = '#f5f5f7';
-      container.style.padding = '16px';
       container.innerHTML = '';
-      const subtitle = this.querySelector('#tp-subtitle');
-      if (subtitle) subtitle.innerHTML = `${icon('bot', 12, 'margin-right:4px')} ${m.virtual}`;
-      this.querySelector('#tp-chatbot-input-bar').style.display = 'flex';
+      this._updateSubtitle('bot');
+      this.querySelector('#tp-input-bar').style.display = 'flex';
       this.querySelector('#tp-agent-bar').style.display = 'none';
       this.updateUILanguage();
-      this.conversation_id = await this.createConversation();
       this.addMessage('assistant', this.getWelcomeMessage(this.user_info?.first_name || ''));
-      this.last_message_count = 1;
       const theme = getClientTheme(this.client_id);
       if (theme.suggestions && theme.suggestions.length > 0) this.showSuggestions(theme.suggestions);
-      this.polling_interval = setInterval(() => this.pollMessages(), 3000);
+      // pas de polling — rien à poller tant que la conv n'est pas créée
     }
-    // ─── Guest form ────────────────────────────────────────────────────────────
+    _updateSubtitle(mode) {
+      const m = this.getMessages(),
+        subtitle = this.querySelector('#tp-subtitle');
+      if (!subtitle) return;
+      if (mode === 'agent') subtitle.innerHTML = `${icon('user', 11)} ${m.human_agent}`;
+      else if (mode === 'closed') subtitle.innerHTML = `${icon('check', 11)} ${m.terminated}`;
+      else subtitle.innerHTML = `${icon('bot', 11)} ${m.virtual}`;
+    }
     showGuestForm() {
       const container = this.querySelector('#tp-messages');
       if (!container) return;
-      this.querySelector('#tp-chatbot-input-bar').style.display = 'none';
+      this.querySelector('#tp-input-bar').style.display = 'none';
       this.querySelector('#tp-agent-bar').style.display = 'none';
-      const color = this.getThemeColor();
-      const dark = this.shadeColor(color, -20);
-      const form_el = document.createElement('div');
-      form_el.id = 'tp-guest-form';
-      form_el.innerHTML = `
-        <div style="padding:16px;display:flex;flex-direction:column;gap:12px;">
-          <p style="margin:0;font-size:13px;color:#1a1a2e;font-weight:600;">Before we start, please identify yourself:</p>
-          <input id="tp-guest-firstname" type="text" placeholder="First name *" style="padding:10px 14px;border-radius:8px;border:1.5px solid #ede8f5;font-size:13px;font-family:inherit;outline:none;" />
-          <input id="tp-guest-company" type="text" placeholder="Company name *" style="padding:10px 14px;border-radius:8px;border:1.5px solid #ede8f5;font-size:13px;font-family:inherit;outline:none;" />
-          <input id="tp-guest-email" type="email" placeholder="Email *" style="padding:10px 14px;border-radius:8px;border:1.5px solid #ede8f5;font-size:13px;font-family:inherit;outline:none;" />
-          <button id="tp-guest-submit" style="padding:10px;background:linear-gradient(135deg,${color},${dark});color:white;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;">Start conversation →</button>
-          <p id="tp-guest-error" style="margin:0;font-size:12px;color:#c0392b;display:none;"></p>
+      this.showTabs(false);
+      const m = this.getMessages();
+      container.innerHTML = '';
+      const wrap = document.createElement('div');
+      wrap.id = 'tp-guest-wrap';
+      wrap.className = 'tp-guest-wrap';
+      wrap.innerHTML = `
+        <div class="tp-guest-intro">
+          <div class="tp-guest-intro-name">${m.guest_title}</div>
+          <div class="tp-guest-intro-sub">${m.guest_sub}</div>
         </div>
+        <div><label class="tp-guest-field-label">${m.guest_firstname}</label><input id="tp-guest-firstname" type="text" class="tp-guest-input" placeholder="Jean" /></div>
+        <div><label class="tp-guest-field-label">${m.guest_company}</label><input id="tp-guest-company" type="text" class="tp-guest-input" placeholder="Acme Corp" /></div>
+        <div><label class="tp-guest-field-label">${m.guest_email}</label><input id="tp-guest-email" type="email" class="tp-guest-input" placeholder="jean@acme.com" /></div>
+        <p id="tp-guest-error" class="tp-guest-error"></p>
+        <button id="tp-guest-submit" class="tp-guest-submit">${icon('msg_plus', 15, 'color:white')} ${m.guest_submit}</button>
+        <div class="tp-guest-footer">${icon('lock', 11)} ${m.guest_secured}</div>
       `;
-      container.appendChild(form_el);
+      container.appendChild(wrap);
       this.querySelector('#tp-guest-submit').addEventListener('click', () => this.submitGuestForm());
+      ['#tp-guest-firstname', '#tp-guest-company', '#tp-guest-email'].forEach(sel => {
+        this.querySelector(sel)?.addEventListener('keydown', e => {
+          if (e.key === 'Enter') this.submitGuestForm();
+        });
+      });
     }
+    // ─── FIXED: conv créée au premier sendMessage, pas après le formulaire ────
     async submitGuestForm() {
       const first_name = this.querySelector('#tp-guest-firstname')?.value.trim();
       const company_name = this.querySelector('#tp-guest-company')?.value.trim();
       const email = this.querySelector('#tp-guest-email')?.value.trim();
       const error_el = this.querySelector('#tp-guest-error');
+      const m = this.getMessages();
       if (!first_name || !company_name || !email) {
-        error_el.textContent = 'Please fill in all fields.';
+        error_el.textContent = m.guest_fill;
         error_el.style.display = 'block';
         return;
       }
       if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-        error_el.textContent = 'Please enter a valid email.';
+        error_el.textContent = m.guest_email_invalid;
         error_el.style.display = 'block';
         return;
       }
@@ -1057,66 +1252,49 @@
       this.user_info = { user_id: `guest-${email}`, first_name, last_name: '', company_name, email, language: 'EN', site_id: '' };
       this.user_id = this.user_info.user_id;
-      const form_el = this.querySelector('#tp-guest-form');
-      if (form_el) form_el.remove();
+      const wrap = this.querySelector('#tp-guest-wrap');
+      if (wrap) wrap.remove();
       this.view = 'chat';
-      this.conversation_id = await this.createConversation();
-      this.querySelector('#tp-chatbot-input-bar').style.display = 'flex';
+      this.conversation_id = null; // pas encore créée — sera créée au premier sendMessage
+      this.querySelector('#tp-input-bar').style.display = 'flex';
       this.querySelector('#tp-agent-bar').style.display = 'none';
-      this.querySelector('#tp-close-bar').style.display = 'block';
-      const container = this.querySelector('#tp-messages');
-      container.style.background = '#f5f5f7';
-      container.style.padding = '16px';
+      this.querySelector('#tp-close-bar').style.display = 'none'; // cachée tant que pas de conv
+      this.querySelector('#tp-back-btn').style.display = 'flex';
+      this.showTabs(false);
       this.updateUILanguage();
       this.addMessage('assistant', this.getWelcomeMessage(first_name));
-      this.last_message_count = 1;
       const theme = getClientTheme(this.client_id);
       if (theme.suggestions && theme.suggestions.length > 0) this.showSuggestions(theme.suggestions);
-      this.polling_interval = setInterval(() => this.pollMessages(), 3000);
+      // pas de polling — rien à poller tant que la conv n'est pas créée
     }
-    // ─── Messages ──────────────────────────────────────────────────────────────
-    addMessage(role, content, message_id = null) {
-      this.messages.push({ role, content, message_id, created_at: new Date().toISOString() });
+    addMessage(role, content, message_id = null, source = null) {
+      this.messages.push({ role, content, message_id, source, created_at: new Date().toISOString() });
       const container = this.querySelector('#tp-messages');
+      const m = this.getMessages();
       const role_label =
         role === 'user'
-          ? `${icon('user', 11, 'margin-right:3px')} ${this.user_info?.first_name || 'You'}`
+          ? `${icon('user', 11)} ${this.user_info?.first_name || 'You'}`
           : role === 'agent'
-            ? `${icon('agent', 11, 'margin-right:3px')} Agent`
+            ? `${icon('agent', 11)} Agent`
             : role === 'system'
               ? 'Info'
-              : `${icon('bot', 11, 'margin-right:3px')} Maria`;
+              : `${icon('bot', 11)} Maria`;
       const msg_el = document.createElement('div');
-      msg_el.className = `tp-chatbot-message ${role}`;
+      msg_el.className = `tp-msg ${role}`;
       const rendered_content =
         role === 'assistant' || role === 'agent' ? (typeof marked !== 'undefined' ? marked.parse(content) : content) : content;
+      const now = formatTime(new Date().toISOString());
       const feedback_html =
         role === 'assistant' && message_id
-          ? `<div class="tp-feedback-bar" data-message-id="${message_id}">
-            <button class="tp-feedback-btn" data-rating="positive" title="Helpful">${icon('helpful', 14)}</button>
-            <button class="tp-feedback-btn" data-rating="negative" title="Not helpful">${icon('not_helpful', 14)}</button>
-           </div>`
+          ? `<div class="tp-feedback-bar" data-message-id="${message_id}"><button class="tp-feedback-btn" data-rating="positive" title="${m.helpful}">${icon('helpful', 13)} <span style="font-size:11px;">${m.helpful}</span></button><button class="tp-feedback-btn" data-rating="negative" title="${m.not_helpful}">${icon('not_helpful', 13)} <span style="font-size:11px;">${m.not_helpful}</span></button></div>`
           : '';
-      msg_el.innerHTML = `
-        <div class="tp-chatbot-bubble-msg">
-          <div class="tp-chatbot-role">${role_label}</div>
-          <div class="tp-chatbot-content tp-chatbot-markdown">${rendered_content}</div>
-          ${feedback_html}
-        </div>
-      `;
+      if (role === 'system') {
+        msg_el.innerHTML = `<div class="tp-bubble-msg">${rendered_content}</div>`;
+      } else {
+        msg_el.innerHTML = `<div class="tp-msg-role">${role_label}</div><div class="tp-bubble-msg${role === 'assistant' || role === 'agent' ? ' tp-md' : ''}">${rendered_content}${feedback_html}</div><div class="tp-msg-time">${role === 'user' ? `${this.user_info?.first_name || 'You'} · ${now}` : `Maria · ${now}`}</div>`;
+      }
       if (role === 'assistant' && message_id) {
         const bar = msg_el.querySelector('.tp-feedback-bar');
         bar.querySelectorAll('.tp-feedback-btn').forEach(btn => {
@@ -1125,9 +1303,11 @@
             bar.dataset.voted = '1';
             const rating = btn.dataset.rating;
             bar.querySelectorAll('.tp-feedback-btn').forEach(b => {
-              b.style.opacity = b === btn ? '1' : '0.3';
+              b.classList.remove('voted-positive', 'voted-negative');
+              b.style.opacity = b === btn ? '1' : '0.35';
               b.style.cursor = 'default';
             });
+            btn.classList.add(rating === 'positive' ? 'voted-positive' : 'voted-negative');
             try {
               await fetch(`${this.api_url}/chat/conversations/${this.conversation_id}/feedback`, {
                 method: 'POST',
@@ -1138,19 +1318,17 @@
           });
         });
       }
       container.appendChild(msg_el);
       container.scrollTop = container.scrollHeight;
       if ((role === 'assistant' || role === 'agent') && this.sound_enabled) playSound();
     }
     showTyping() {
       const container = this.querySelector('#tp-messages');
       const typing = document.createElement('div');
-      typing.className = 'tp-chatbot-message assistant';
+      typing.className = 'tp-msg assistant';
       typing.id = 'tp-typing';
-      typing.innerHTML = `<div class="tp-chatbot-bubble-msg"><div class="tp-chatbot-typing"><span></span><span></span><span></span></div></div>`;
+      typing.innerHTML = `<div class="tp-msg-role">${icon('bot', 11)} Maria</div><div class="tp-bubble-msg"><div class="tp-typing"><span></span><span></span><span></span></div></div>`;
       container.appendChild(typing);
       container.scrollTop = container.scrollHeight;
     }
@@ -1166,56 +1344,33 @@
         clearInterval(this.polling_interval);
         this.polling_interval = null;
       }
       const m = this.getMessages();
-      const subtitle = this.querySelector('#tp-subtitle');
-      if (subtitle) subtitle.innerHTML = `${icon('check', 12, 'margin-right:4px')} ${m.terminated}`;
-      this.querySelector('#tp-chatbot-input-bar').style.display = 'none';
+      this._updateSubtitle('closed');
+      this.querySelector('#tp-input-bar').style.display = 'none';
       this.querySelector('#tp-agent-bar').style.display = 'none';
       this.querySelector('#tp-close-bar').style.display = 'none';
       const sugg_el = this.querySelector('#tp-suggestions');
       if (sugg_el) sugg_el.remove();
       const container = this.querySelector('#tp-messages');
-      const existing_banner = this.querySelector('#tp-closed-banner');
+      const existing_banner = container.querySelector('#tp-closed-banner');
       if (existing_banner) {
         if (existing_banner.querySelector('#tp-csat-block')) return;
         existing_banner.remove();
       }
-      const color = this.getThemeColor();
-      const dark = this.shadeColor(color, -20);
+      const now = new Date().toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' });
       const csat_html = existing_csat
-        ? `<div style="font-size:13px;color:#888;margin-bottom:14px;">${existing_csat === 'positive' ? m.csat_positive : m.csat_negative}</div>`
-        : `<div style="font-size:12px;color:#888;margin-bottom:10px;">${m.csat_question}</div>
-           <div style="display:flex;gap:10px;justify-content:center;margin-bottom:14px;">
-             <button id="tp-csat-positive" class="tp-csat-btn" style="border-color:#22c55e;color:#22c55e;">${icon('helpful', 20)}</button>
-             <button id="tp-csat-negative" class="tp-csat-btn" style="border-color:#ef4444;color:#ef4444;">${icon('not_helpful', 20)}</button>
-           </div>`;
+        ? `<div class="tp-csat-thanks">${existing_csat === 'positive' ? m.csat_positive : m.csat_negative}</div>`
+        : `<div class="tp-csat-q">${m.csat_question}</div><div class="tp-csat-btns"><button id="tp-csat-positive" class="tp-csat-btn positive">${icon('helpful', 16)} ${m.helpful}</button><button id="tp-csat-negative" class="tp-csat-btn negative">${icon('not_helpful', 16)} ${m.not_helpful}</button></div>`;
       const banner = document.createElement('div');
       banner.id = 'tp-closed-banner';
-      banner.innerHTML = `
-        <div style="margin:16px;padding:16px;background:#f9f9f9;border:1px solid #ede8f5;border-radius:12px;text-align:center;">
-          <div style="display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#1a1a2e;font-weight:600;margin-bottom:10px;">
-            ${icon('check', 14)} ${m.closed}
-          </div>
-          <div id="tp-csat-block">${csat_html}</div>
-          <button id="tp-new-conversation" style="padding:10px 20px;background:linear-gradient(135deg,${color},${dark});color:white;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;margin-bottom:8px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;">
-            ${icon('msg_plus', 15, 'color:white')} ${m.new_conv}
-          </button>
-          <button id="tp-back-to-list" style="padding:8px 20px;background:none;color:${color};border:1px solid #ede8f5;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;width:100%;">${m.back_to_list}</button>
-        </div>
-      `;
+      banner.className = 'tp-closed-banner';
+      banner.innerHTML = `<div class="tp-closed-title">${icon('check', 14)} ${m.closed}</div><div class="tp-closed-date">${now}</div><div id="tp-csat-block">${csat_html}</div><button class="tp-closed-new-btn" id="tp-closed-new-btn">${icon('msg_plus', 14, 'color:white')} ${m.new_conv}</button><button class="tp-closed-hist-btn" id="tp-closed-hist-btn">${m.back_to_list}</button>`;
       container.appendChild(banner);
       container.scrollTop = container.scrollHeight;
       if (!existing_csat) {
         const submit_csat = async rating => {
-          const csat_block = this.querySelector('#tp-csat-block');
-          if (!csat_block) return;
+          const block = this.querySelector('#tp-csat-block');
+          if (!block) return;
           try {
             await fetch(`${this.api_url}/chat/conversations/${this.conversation_id}/csat`, {
               method: 'POST',
@@ -1225,20 +1380,21 @@
           } catch (e) {
             console.error('CSAT error:', e);
           }
-          csat_block.innerHTML = `<div style="font-size:13px;color:#888;margin-bottom:14px;">${rating === 'positive' ? m.csat_positive : m.csat_negative}</div>`;
+          block.innerHTML = `<div class="tp-csat-thanks">${rating === 'positive' ? m.csat_positive : m.csat_negative}</div>`;
         };
-        this.querySelector('#tp-csat-positive').addEventListener('click', () => submit_csat('positive'));
-        this.querySelector('#tp-csat-negative').addEventListener('click', () => submit_csat('negative'));
+        this.querySelector('#tp-csat-positive')?.addEventListener('click', () => submit_csat('positive'));
+        this.querySelector('#tp-csat-negative')?.addEventListener('click', () => submit_csat('negative'));
       }
-      this.querySelector('#tp-new-conversation').addEventListener('click', () => this.startNewConversation());
-      this.querySelector('#tp-back-to-list').addEventListener('click', () => this.showConversationList());
+      this.querySelector('#tp-closed-new-btn').addEventListener('click', () => this.startNewConversation());
+      this.querySelector('#tp-closed-hist-btn').addEventListener('click', () => {
+        this.setTab('history');
+        this.showConversationList();
+      });
     }
-    // ─── Send / Poll ───────────────────────────────────────────────────────────
+    // ─── FIXED: createConversation lazy au premier sendMessage ────────────────
     async sendMessage() {
-      if (this.is_closed || !this.conversation_id) return;
+      if (this.is_closed) return;
       const m = this.getMessages();
       const input = this.querySelector('#tp-input');
       const query = input.value.trim();
@@ -1250,10 +1406,22 @@
       const user_messages = this.messages.filter(msg => msg.role === 'user').length;
       if (user_messages >= 30) {
         this.addMessage('system', m.limit_reached);
-        this.querySelector('#tp-chatbot-input-bar').style.display = 'none';
+        this.querySelector('#tp-input-bar').style.display = 'none';
         return;
       }
+      // Créer la conv au premier message si pas encore créée
+      if (!this.conversation_id) {
+        try {
+          this.conversation_id = await this.createConversation();
+          this.querySelector('#tp-close-bar').style.display = 'block';
+          this.polling_interval = setInterval(() => this.pollMessages(), 3000);
+        } catch (e) {
+          this.addMessage('system', m.error_occurred);
+          return;
+        }
+      }
       input.value = '';
       this.is_loading = true;
       this.addMessage('user', query);
@@ -1276,14 +1444,10 @@
         this.agent_mode = data.result.agent_mode;
         const source = data.result.source || null;
-        const subtitle = this.querySelector('#tp-subtitle');
-        if (subtitle)
-          subtitle.innerHTML = this.agent_mode
-            ? `${icon('user', 12, 'margin-right:4px')} ${m.human_agent}`
-            : `${icon('bot', 12, 'margin-right:4px')} ${m.virtual}`;
+        this._updateSubtitle(this.agent_mode ? 'agent' : 'bot');
         if (data.result.reply) {
-          this.addMessage(this.agent_mode ? 'agent' : 'assistant', data.result.reply, data.result.message_id || null);
+          this.addMessage(this.agent_mode ? 'agent' : 'assistant', data.result.reply, data.result.message_id || null, source);
           this.last_message_count += 2;
         }
@@ -1292,18 +1456,11 @@
         const suggest_agent = data.result.suggest_agent || false;
         if (agent_bar && !this.agent_requested && !this.agent_mode) {
-          if (
-            suggest_agent ||
-            source === 'fallback' ||
-            source === 'clarification' ||
-            source === 'no_match' ||
-            source === 'out_of_scope' ||
-            user_msg_count >= 5
-          ) {
-            agent_bar.style.display = 'block';
-          }
+          const semantic_trigger = source === 'no_match' || source === 'out_of_scope';
+          const clarif_count = this.messages.filter(msg => msg.role === 'assistant' && msg.source === 'clarification').length;
+          const repeated_clarif = source === 'clarification' && clarif_count >= 3;
+          if (semantic_trigger || repeated_clarif || (suggest_agent && user_msg_count >= 5)) agent_bar.style.display = 'block';
         }
         if (suggest_agent && !this.agent_requested) {
           this.addMessage('system', m.suggest_agent_escalation);
           this.last_message_count += 1;
@@ -1312,7 +1469,6 @@
         this.hideTyping();
         this.addMessage('assistant', this.getMessages().error_occurred);
       }
       this.is_loading = false;
     }
@@ -1321,7 +1477,6 @@
       this.agent_requested = true;
       const agent_bar = this.querySelector('#tp-agent-bar');
       if (agent_bar) agent_bar.style.display = 'none';
       try {
         const response = await fetch(`${this.api_url}/chat/conversations/${this.conversation_id}/request-agent`, {
           method: 'POST',
@@ -1329,21 +1484,18 @@
           body: JSON.stringify({ user_id: this.user_id }),
         });
         const data = await response.json();
-        const m = this.getMessages();
-        const status = data.result?.status;
+        const m = this.getMessages(),
+          status = data.result?.status;
         let msg = '';
         if (status === 'outside_hours') msg = m.outside_hours(data.result.next_opening);
         else if (status === 'no_agents') msg = m.no_agents;
         else if (status === 'waiting_agent') msg = m.waiting_agent;
         else if (status === 'waiting_agent_already') msg = m.waiting_agent_already;
         else if (status === 'agent') msg = m.agent_already;
         if (msg) {
           this.addMessage('system', msg);
           this.last_message_count += 1;
         }
         if (status === 'no_agents' || status === 'outside_hours' || status === 'waiting_agent_already') {
           this.agent_requested = false;
           if (agent_bar) agent_bar.style.display = 'block';
@@ -1378,24 +1530,21 @@
         const data = await response.json();
         const conv = data.result?.conversation;
         if (!conv) return;
-        const server_messages = conv.messages || [];
-        const server_status = conv.status;
-        const is_typing = conv.is_typing || false;
+        const server_messages = conv.messages || [],
+          server_status = conv.status,
+          is_typing = conv.is_typing || false;
         const m = this.getMessages();
         if (server_status === 'closed' && !this.is_closed) {
           this.showClosed();
           return;
         }
         if (is_typing && server_status === 'agent') {
           if (!this.querySelector('#tp-agent-typing')) {
             const container = this.querySelector('#tp-messages');
             const typing = document.createElement('div');
-            typing.className = 'tp-chatbot-message agent';
+            typing.className = 'tp-msg agent';
             typing.id = 'tp-agent-typing';
-            typing.innerHTML = `<div class="tp-chatbot-bubble-msg"><div class="tp-chatbot-role">${icon('agent', 11, 'margin-right:3px')} Agent</div><div class="tp-chatbot-typing"><span></span><span></span><span></span></div></div>`;
+            typing.innerHTML = `<div class="tp-msg-role">${icon('agent', 11)} Agent</div><div class="tp-bubble-msg"><div class="tp-typing"><span></span><span></span><span></span></div></div>`;
             container.appendChild(typing);
             container.scrollTop = container.scrollHeight;
           }
@@ -1403,13 +1552,12 @@
           const typing_el = this.querySelector('#tp-agent-typing');
           if (typing_el) typing_el.remove();
         }
         if (server_messages.length > this.last_message_count) {
           const new_messages = server_messages.slice(this.last_message_count);
           new_messages.forEach(msg => {
             if (msg.role === 'agent') {
-              const typing_el = this.querySelector('#tp-agent-typing');
-              if (typing_el) typing_el.remove();
+              const t = this.querySelector('#tp-agent-typing');
+              if (t) t.remove();
               this.addMessage('agent', msg.content, msg.message_id || null);
             } else if (msg.role === 'assistant') {
               this.addMessage('assistant', msg.content, msg.message_id || null);
@@ -1419,22 +1567,23 @@
           });
           this.last_message_count = server_messages.length;
         }
         if (server_status === 'agent' && !this.agent_mode) {
           this.agent_mode = true;
-          const subtitle = this.querySelector('#tp-subtitle');
-          if (subtitle) subtitle.innerHTML = `${icon('user', 12, 'margin-right:4px')} ${m.human_agent}`;
+          this._updateSubtitle('agent');
           const agent_bar = this.querySelector('#tp-agent-bar');
           if (agent_bar) agent_bar.style.display = 'none';
+          const close_bar = this.querySelector('#tp-close-bar');
+          if (close_bar) close_bar.style.display = 'none';
           this.addMessage('system', m.agent_taken);
           this.last_message_count = server_messages.length;
         } else if (server_status === 'bot' && this.agent_mode) {
           this.agent_mode = false;
           this.agent_requested = false;
-          const subtitle = this.querySelector('#tp-subtitle');
-          if (subtitle) subtitle.innerHTML = `${icon('bot', 12, 'margin-right:4px')} ${m.virtual}`;
+          this._updateSubtitle('bot');
           const agent_bar = this.querySelector('#tp-agent-bar');
           if (agent_bar) agent_bar.style.display = 'block';
+          const close_bar = this.querySelector('#tp-close-bar');
+          if (close_bar) close_bar.style.display = 'block';
           this.addMessage('system', m.agent_released);
           this.last_message_count = server_messages.length;
         }