Add animated talking face: blinks idly, looks around while thinking, mouth moves while speaking

index.html

@@ -21,6 +21,19 @@
            border-bottom:1px solid var(--border); }
   header .logo { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
                  font-size:20px; background:linear-gradient(135deg,var(--accent),var(--accent2)); }
+  /* Talking face: blinks idly, looks around while thinking, mouth moves while speaking. Pure CSS/SVG. */
+  #face svg { width:100%; height:100%; display:block; }
+  #face .eye { fill:#fff; }
+  #face .pupil { fill:#1e1b4b; }
+  #face .mouth { fill:#fff; transform-box:fill-box; transform-origin:center; }
+  #face .eyes-blink { transform-box:fill-box; transform-origin:center; animation:faceBlink 4.6s infinite; }
+  @keyframes faceBlink { 0%,92%,100% { transform:scaleY(1); } 95.5% { transform:scaleY(.08); } }
+  #face.thinking .eyes-look { animation:faceLook 1.2s ease-in-out infinite; }
+  @keyframes faceLook { 0%,100% { transform:translateX(0); } 30% { transform:translateX(-1.8px); } 70% { transform:translateX(1.8px); } }
+  #face.thinking svg { animation:faceTilt 1.2s ease-in-out infinite; }
+  @keyframes faceTilt { 0%,100% { transform:rotate(-5deg); } 50% { transform:rotate(5deg); } }
+  #face.talking .mouth { animation:faceTalk .34s ease-in-out infinite; }
+  @keyframes faceTalk { 0%,100% { transform:scaleY(.3); } 50% { transform:scaleY(1.5); } }
   header h1 { font-size:18px; margin:0; }
   header .tag { font-size:11px; color:var(--muted); border:1px solid var(--border); border-radius:20px; padding:3px 10px; }
   header .spacer { flex:1; }
@@ -99,7 +112,17 @@
 </head>
 <body>
 <header>
-  <div class="logo">😊</div>
+  <div class="logo" id="face" title="Artie">
+    <svg viewBox="0 0 40 40" aria-hidden="true">
+      <g class="eyes-blink"><g class="eyes-look">
+        <ellipse class="eye" cx="13.5" cy="15" rx="3.4" ry="4.2"/>
+        <ellipse class="eye" cx="26.5" cy="15" rx="3.4" ry="4.2"/>
+        <circle class="pupil" cx="13.5" cy="16" r="1.5"/>
+        <circle class="pupil" cx="26.5" cy="16" r="1.5"/>
+      </g></g>
+      <rect class="mouth" x="13" y="24.5" width="14" height="3.4" rx="1.7"/>
+    </svg>
+  </div>
   <h1>ArtieAI</h1>
   <span class="tag">free · no sign-up</span>
   <span class="tag" id="usageTag">…</span>
@@ -291,7 +314,7 @@ async function runTurn(userText, opts){
   const via = opts.via || ask;
   const doneRe = opts.doneMarker ? new RegExp(opts.doneMarker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")) : null;
   addMsg("user", md(userText));
-  sendBtn.disabled = true; typing.style.display = "block";
+  sendBtn.disabled = true; typing.style.display = "block"; faceThinking(true);
   try{
     let contextMsg = userText;
     if(FACTUAL.test(userText)){
@@ -353,7 +376,7 @@ async function runTurn(userText, opts){
     else if(m.includes("upstream")) addMsg("system", "⏳ The free AI lane is busy right now — try again in a bit. (This didn't use any of today's chats.)");
     else addMsg("system", "⚠️ The free AI services are both having trouble right now. Try again in a bit — it's not your connection. (" + esc(m.slice(0,160)) + ")");
   }
-  typing.style.display = "none"; sendBtn.disabled = false;
+  typing.style.display = "none"; sendBtn.disabled = false; faceThinking(false);
   updateUsage();
   chat.scrollTop = chat.scrollHeight;
 }
@@ -453,14 +476,16 @@ function speak(text){
     if(!clean.trim()) return;
     const u = new SpeechSynthesisUtterance(clean);
     u.rate = 1; u.pitch = 1;
+    u.onend = u.onerror = () => faceTalking(false);
     synth.speak(u);
+    faceTalking(true);
   }catch(e){}
 }
 voiceBtn.onclick = () => {
   if(!synth) return;
   voiceOut = !voiceOut;
   save("agentx_voice_out", voiceOut);
-  if(!voiceOut) synth.cancel();
+  if(!voiceOut){ synth.cancel(); faceTalking(false); }
   paintVoiceBtn();
   addMsg("system", voiceOut ? "<b>Voice ON</b> — I'll read replies aloud." : "<b>Voice OFF</b>.");
 };
@@ -488,6 +513,18 @@ if(!SR){
   };
 }
 
+/* ---------- Talking face state ---------- */
+const face = $("face");
+let talkWatch = null;
+function faceThinking(on){ face.classList.toggle("thinking", !!on); }
+function faceTalking(on){
+  face.classList.toggle("talking", !!on);
+  if(talkWatch){ clearInterval(talkWatch); talkWatch = null; }
+  if(on && synth){
+    talkWatch = setInterval(() => { if(!synth.speaking) faceTalking(false); }, 400);
+  }
+}
+
 /* ---------- modal helpers ---------- */
 const back = $("modalBack"), modal = $("modal");
 function openModal(html){ modal.innerHTML = '<span class="close-x" id="mx">×</span>' + html; back.classList.add("open");