feat: polish send button — hidden until content, icon-circle, pop-in animation

- index.html: btnSend hidden by default (display:none), icon-only (upward
  arrow SVG, no text label), title attribute for accessibility

- style.css: new send-btn design — 34px circle, blue fill (#7cb9ff),
  subtle glow box-shadow, scale() hover/active for tactile feel,
  .send-btn.visible with @keyframes send-pop-in (scale+opacity spring
  using cubic-bezier(.34,1.56,.64,1) for a satisfying pop). Mobile
  override updated to preserve circle dimensions.

- ui.js: updateSendBtn() — shows button with pop-in animation when
  textarea has content OR files are attached and agent is not busy;
  hides instantly when content is cleared. Hooked into setBusy() and
  renderTray() so button state tracks all content sources correctly.

- boot.js: input event listener calls updateSendBtn() on every keystroke.

- messages.js: autoResize() calls updateSendBtn() so button disappears
  immediately after send clears the textarea.

- tests/test_sprint21.py: 33 tests covering HTML structure, CSS design
  (circle shape, colors, animations, keyframes), JS logic (updateSendBtn,
  setBusy, renderTray, autoResize integration), and regressions
  (363 total, all pass).

static/boot.js

@@ -145,6 +145,7 @@ $('modelSelect').onchange=async()=>{
 };
 $('msg').addEventListener('input',()=>{
   autoResize();
+  updateSendBtn();
   const text=$('msg').value;
   if(text.startsWith('/')&&text.indexOf('\n')===-1){
     const prefix=text.slice(1);

static/index.html

@@ -231,9 +231,8 @@
             </button>
           </div>
           <div class="composer-right">
-            <button class="send-btn" id="btnSend">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
-              Send
+            <button class="send-btn" id="btnSend" title="Send message" style="display:none">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
             </button>
           </div>
         </div>

static/messages.js

@@ -237,7 +237,7 @@ function transcript(){
   return lines.join('\n');
 }
 
-function autoResize(){const el=$('msg');el.style.height='auto';el.style.height=Math.min(el.scrollHeight,200)+'px';}
+function autoResize(){const el=$('msg');el.style.height='auto';el.style.height=Math.min(el.scrollHeight,200)+'px';updateSendBtn();}
 
 
 // ── Approval polling ──

static/style.css

@@ -193,10 +193,12 @@
   .mic-status{font-size:11px;color:#e94560;padding:4px 12px;display:flex;align-items:center;gap:6px;}
   .mic-dot{width:6px;height:6px;border-radius:50%;background:#e94560;animation:mic-pulse 1.2s ease-in-out infinite;flex-shrink:0;}
   .status-text{font-size:11px;color:var(--muted);padding-left:4px;}
-  .send-btn{padding:7px 18px;border-radius:10px;font-size:13px;font-weight:600;background:linear-gradient(135deg,#5ba8f5,#7cb9ff);border:none;color:#0a1628;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s;flex-shrink:0;letter-spacing:.01em;}
-  .send-btn:hover{background:linear-gradient(135deg,#7cb9ff,#a0d0ff);transform:translateY(-1px);}
-  .send-btn:active{transform:translateY(0);}
-  .send-btn:disabled{opacity:.4;cursor:not-allowed;}
+  .send-btn{width:34px;height:34px;border-radius:50%;background:#7cb9ff;border:none;color:#0a1628;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,transform .15s,box-shadow .15s;box-shadow:0 2px 8px rgba(124,185,255,.35);}
+  .send-btn:hover{background:#a0d0ff;transform:scale(1.08);box-shadow:0 4px 14px rgba(124,185,255,.5);}
+  .send-btn:active{transform:scale(0.95);box-shadow:0 1px 4px rgba(124,185,255,.25);}
+  .send-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;}
+  .send-btn.visible{animation:send-pop-in .18s cubic-bezier(.34,1.56,.64,1) forwards;}
+  @keyframes send-pop-in{from{opacity:0;transform:scale(.55);}to{opacity:1;transform:scale(1);}}
   .upload-bar-wrap{display:none;height:3px;background:rgba(255,255,255,.06);border-radius:0 0 16px 16px;overflow:hidden;}
   .upload-bar-wrap.active{display:block;}
   .upload-bar{height:100%;background:linear-gradient(90deg,var(--blue),#a0d0ff);width:0%;transition:width .3s ease;}
@@ -276,7 +278,7 @@
     .composer-wrap{padding:8px 10px 12px!important;}
     .composer-box{border-radius:12px;}
     .composer-box textarea{font-size:16px;min-height:40px;}
-    .send-btn{padding:6px 14px;font-size:13px;}
+    .send-btn{width:32px;height:32px;}
     /* Empty state */
     .empty-state h2{font-size:18px;}
     .empty-state p{font-size:13px;}

static/ui.js

@@ -187,9 +187,25 @@ function setStatus(t){
     if(dismiss)dismiss.style.display=(!transient && !S.busy)?'inline':'none';
   }
 }
+function updateSendBtn(){
+  const btn=$('btnSend');
+  if(!btn) return;
+  const hasContent=$('msg').value.trim().length>0||S.pendingFiles.length>0;
+  const shouldShow=hasContent&&!S.busy;
+  if(shouldShow&&btn.style.display==='none'){
+    btn.style.display='';
+    // Remove then re-add class to retrigger animation each time
+    btn.classList.remove('visible');
+    requestAnimationFrame(()=>btn.classList.add('visible'));
+  } else if(!shouldShow&&btn.style.display!=='none'){
+    btn.style.display='none';
+    btn.classList.remove('visible');
+  }
+}
 function setBusy(v){
   S.busy=v;
   $('btnSend').disabled=v;
+  updateSendBtn();
   const dots=$('activityDots');
   if(dots) dots.style.display=v?'flex':'none';
   if(!v){
@@ -920,8 +936,9 @@ async function promptNewFolder(){
 
 function renderTray(){
   const tray=$('attachTray');tray.innerHTML='';
-  if(!S.pendingFiles.length){tray.classList.remove('has-files');return;}
+  if(!S.pendingFiles.length){tray.classList.remove('has-files');updateSendBtn();return;}
   tray.classList.add('has-files');
+  updateSendBtn();
   S.pendingFiles.forEach((f,i)=>{
     const chip=document.createElement('div');chip.className='attach-chip';
     chip.innerHTML=`&#128206; ${esc(f.name)} <button title="Remove">&#10005;</button>`;