quand je dis bonjour il se mets sur la troisieme colonne normalement le chat ia reste sur la deuxieme colonne s'il te plait peut tu rectifier sa et je voudrais aussi que le micro fonctionne s'il te plait que tout soit fonctionnel merci

rosalinda.html

@@ -55,11 +55,11 @@
         let lastAIText = "";
 
         function addMsg(text, who){
-            const div = document.createElement("div");
-            div.className = `msg max-w-[85%] p-3 rounded-xl border ${who === "me" ? 
+        const div = document.createElement("div");
+            div.className = `msg ${who === "me" ? 
                 "ml-auto bg-blue-900/10 border-blue-800/50" : 
-                "bg-gray-700/50 border-gray-700"}`;
-            div.textContent = text;
+                "bg-gray-700/50 border-gray-700"} max-w-[80%] p-3 rounded-xl border`;
+div.textContent = text;
             msgs.appendChild(div);
             msgs.scrollTop = msgs.scrollHeight;
         }
@@ -115,7 +115,6 @@
             r.continuous = false;
             return r;
         }
-
         rec = setupSTT();
 
         micBtn.onclick = async () => {
@@ -123,37 +122,64 @@
                 alert("Reconnaissance vocale non disponible ici. Essaie Chrome/Edge.");
                 return;
             }
-            if (listening) return;
+            if (listening) {
+                rec.stop();
+                listening = false;
+                statusEl.textContent = "Micro: prêt";
+                micBtn.classList.remove("listening");
+                return;
+            }
 
             listening = true;
             statusEl.textContent = "Micro: écoute…";
+            micBtn.classList.add("listening");
             let finalText = "";
+            let timeoutId;
 
             rec.onresult = (e) => {
+                clearTimeout(timeoutId);
                 let transcript = "";
                 for (let i = e.resultIndex; i < e.results.length; i++){
                     transcript += e.results[i][0].transcript;
                     if (e.results[i].isFinal) finalText += e.results[i][0].transcript + " ";
                 }
                 inp.value = (finalText || transcript).trim();
+                
+                // Reset timeout on new results
+                timeoutId = setTimeout(() => {
+                    if (listening) {
+                        rec.stop();
+                    }
+                }, 2000);
             };
 
-            rec.onerror = () => {
+            rec.onerror = (e) => {
+                console.error("Speech recognition error", e);
                 listening = false;
                 statusEl.textContent = "Micro: erreur";
+                micBtn.classList.remove("listening");
             };
 
             rec.onend = () => {
                 listening = false;
                 statusEl.textContent = "Micro: prêt";
+                micBtn.classList.remove("listening");
                 if (inp.value.trim()) handleSend(inp.value);
             };
 
-            try { rec.start(); } catch (e) {
+            try { 
+                rec.start(); 
+                // Auto-stop after 8 seconds if no speech detected
+                setTimeout(() => {
+                    if (listening) rec.stop();
+                }, 8000);
+            } catch (e) {
+                console.error("Speech recognition start error", e);
                 listening = false;
                 statusEl.textContent = "Micro: prêt";
+                micBtn.classList.remove("listening");
             }
-        };
+};
 
         addMsg("Bonjour 👋 Je suis Rosalinda. Clique 🎤 pour parler ou écris-moi.", "ai");
     </script>

style.css

@@ -107,8 +107,13 @@ input:focus, button:focus {
         opacity: 0.8;
     }
 }
-
 .listening {
     animation: pulse 1.5s infinite;
     background-color: rgba(239, 68, 68, 0.2) !important;
+    border-color: rgba(239, 68, 68, 0.5) !important;
+}
+
+.msg {
+    word-break: break-word;
+    white-space: pre-wrap;
 }