@developpement/tp-chatbot-widget 0.0.10 → 0.0.12

package/src/chatbot.js

@@ -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();
         }
       }
@@ -214,6 +322,7 @@
           if (t.primary) CLIENT_THEMES[this.client_id].primary = t.primary;
           if (t.position) CLIENT_THEMES[this.client_id].position = t.position;
           if (t.name) CLIENT_THEMES[this.client_id].name = t.name;
+          if (t.open_by_default !== undefined) CLIENT_THEMES[this.client_id].open_by_default = t.open_by_default;
         } else {
           CLIENT_THEMES[this.client_id] = {
             primary: t.primary || DEFAULT_THEME.primary,
@@ -223,7 +332,7 @@
           };
         }
       } catch (e) {
-        console.warn('[tp-chatbot] fetchTheme failed, using defaults:', e.message);
+        console.warn('[tp-chatbot] fetchTheme failed:', e.message);
       }
     }
 
@@ -240,6 +349,9 @@
       this.view = 'list';
       this.is_fullscreen = false;
       this.is_minimized = false;
+      this.active_tab = 'new';
+
+      injectCSS();
 
       this.fetchTheme().then(() => {
         this.render();
@@ -247,9 +359,8 @@
         this.attachEvents();
         this._initialized = true;
 
-        setTimeout(() => {
-          this.toggleChat();
-        }, 300);
+        const theme = getClientTheme(this.client_id);
+        if (theme.open_by_default) setTimeout(() => this.toggleChat(), 300);
 
         if (this.access_token) {
           this.user_info = extractUserInfo(this.access_token);
@@ -275,8 +386,6 @@
       if (this.polling_interval) clearInterval(this.polling_interval);
     }
 
-    // ─── i18n ──────────────────────────────────────────────────────────────────
-
     getMessages() {
       const lang = (this.user_info?.language || 'EN').toUpperCase();
       const msgs = {
@@ -302,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.',
@@ -316,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',
@@ -339,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.',
@@ -353,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',
@@ -361,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',
@@ -376,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',
@@ -390,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',
@@ -398,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',
@@ -413,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',
@@ -436,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',
@@ -450,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',
@@ -473,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',
@@ -487,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'];
@@ -520,8 +707,6 @@
       return msgs[lang] || msgs['EN'];
     }
 
-    // ─── Theme ─────────────────────────────────────────────────────────────────
-
     getThemeColor() {
       return getClientTheme(this.client_id).primary;
     }
@@ -542,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';
       }
@@ -574,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';
@@ -582,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);
@@ -632,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';
@@ -645,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';
@@ -665,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;
@@ -702,7 +893,6 @@
           this.minimize();
         }
       });
-
       this.querySelector('#tp-maximize-btn').addEventListener('click', () => {
         if (this.is_fullscreen) {
           this.exitFullscreen(true);
@@ -716,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;
@@ -746,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);
       }
     }
@@ -768,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();
@@ -808,8 +1003,6 @@
       container.scrollTop = container.scrollHeight;
     }
 
-    // ─── Conversation List ─────────────────────────────────────────────────────
-
     async showConversationList() {
       this.view = 'list';
       const m = this.getMessages();
@@ -817,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>`;
       }
     }
 
@@ -916,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) {
@@ -973,6 +1165,7 @@
       }
     }
 
+    // ─── FIXED: conv créée au premier sendMessage, pas à l'ouverture ──────────
     async startNewConversation() {
       this.view = 'chat';
       this.is_closed = false;
@@ -980,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;
       }
@@ -1052,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 => {
@@ -1120,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',
@@ -1133,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;
     }
@@ -1161,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',
@@ -1220,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();
@@ -1245,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);
@@ -1271,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;
         }
 
@@ -1287,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;
@@ -1307,7 +1469,6 @@
         this.hideTyping();
         this.addMessage('assistant', this.getMessages().error_occurred);
       }
-
       this.is_loading = false;
     }
 
@@ -1316,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',
@@ -1324,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';
@@ -1373,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;
           }
@@ -1398,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);
@@ -1414,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;
         }