fix: replace pending-dots with CSS spinner on model-icon

- Loading state now shows a spinning circle on the AI icon instead of
  a separate blinking '…' span, so there is only one message bubble
  (no duplicate avatar icon)
- Spinner uses @Keyframes ai-spin (CSS-driven), unaffected by Android
  animator duration scale (Window.ANIMATOR_DURATION_SCALE)
- On message arrival the spinner icon is swapped in-place to the real
  avatar (👤), so the bubble updates rather than a second one appearing

Author: claude

index.html

@@ -218,8 +218,11 @@
 .model-text{flex:1;white-space:pre-wrap}
 .bubble.error{background:var(--bg-error-container);color:var(--text-on-error-container);width:100%;max-width:100%}
 .bubble-wrap.error-wrap{display:block}
-.pending-dots{display:inline-block;margin-left:6px;font-size:16px;line-height:1;animation:blink 1.2s infinite}
-@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}
+/* pending-dots removed – replaced by spinner on model-icon */
+.model-icon.loading{background:transparent;font-size:0}
+.model-icon.loading::after{content:'';display:block;width:18px;height:18px;border:2.5px solid var(--outline);border-top-color:var(--primary);border-radius:50%;animation:ai-spin 1.4s linear infinite}
+/* Use CSS-driven keyframe – unaffected by Android animator duration scale */
+@keyframes ai-spin{to{transform:rotate(360deg)}}
 
 /* ── Command status card ─────────────────────────────────── */
 .cmd-status-card{background:var(--bg-secondary-container);border-radius:12px;padding:12px 14px;margin:6px 0;font-size:13px;color:var(--text-on-secondary-container)}
@@ -1038,16 +1041,13 @@
   const allModelBubbles = [...msgs.querySelectorAll('.bubble.model')];
   const last = allModelBubbles.length ? allModelBubbles[allModelBubbles.length - 1] : null;
   const parentWrap = last && last.closest('.bubble-wrap');
-  if (parentWrap && parentWrap.querySelector('.pending-dots')) {
+  if (parentWrap && last.querySelector('.model-icon.loading')) {
     const textSpan = last.querySelector('.model-text') || last;
-    // Preserve the icon span if present
-    const icon = last.querySelector('.model-icon');
-    if (icon) {
-      textSpan.textContent = text;
-      if (!isPending) parentWrap.querySelector('.pending-dots')?.remove();
-    } else {
-      last.textContent = text;
-      if (!isPending) parentWrap.querySelector('.pending-dots')?.remove();
+    textSpan.textContent = text;
+    if (!isPending) {
+      // Swap spinner icon → real avatar icon
+      const icon = last.querySelector('.model-icon');
+      if (icon) { icon.classList.remove('loading'); icon.innerHTML = '👤'; }
     }
   } else {
     addModelBubble(text, isPending);
@@ -3442,7 +3442,7 @@
 function addModelBubble(text, isPending) {
   const wrap = document.createElement('div');
   wrap.className = 'bubble-wrap';
-  wrap.innerHTML = `<div class="bubble model"><span class="model-icon">&#128100;</span><span class="model-text">${escHtml(text)}${isPending?'<span class="pending-dots">…</span>':''}</span></div>`;
+  wrap.innerHTML = `<div class="bubble model"><span class="model-icon${isPending?' loading':''}">&#${isPending?'0':128100};</span><span class="model-text">${escHtml(text)}</span></div>`;
   document.getElementById('chat-messages').appendChild(wrap);
   scrollToBottom();
 }