Add a clear "Stop sharing" banner while sharing your screen

The only way to stop a screen share was toggling the share button again —
buried in the ⋮ More menu on mobile. Now a floating "You're sharing your
screen · Stop" banner appears at the top whenever you're sharing (driven by
meetScreen via updateScreenBtn), with a red Stop button that calls
toggleScreen. Works on iOS/desktop/web. Web-only.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

server/public/home.html

@@ -388,6 +388,11 @@
   .meet-grid{flex:1;min-height:0;display:grid;gap:.6rem;padding:.8rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-content:center;overflow:hidden;background:#0b1220;} /* #16: center tiles + no stray scrollbar on 1:1/small calls */
   .meet-tile{position:relative;background:#0b1220;border-radius:12px;overflow:hidden;aspect-ratio:4/3;border:1px solid #1e293b;transition:box-shadow .12s,border-color .12s;}
   .meet-tile .meet-sharing-self{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:.3rem;font-size:.72rem;color:#fff;background:rgba(37,99,235,.9);padding:.25rem;}
+  /* "Stop sharing" banner shown while you're sharing your screen — floats at the top, on top of everything. */
+  .stop-share-bar{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:.6rem;max-width:calc(100% - 24px);background:rgba(17,24,39,.94);color:#fff;padding:.35rem .4rem .35rem .85rem;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.4);font-size:.85rem;white-space:nowrap;}
+  .stop-share-bar .ssb-lbl{display:inline-flex;align-items:center;gap:.35rem;overflow:hidden;text-overflow:ellipsis;}
+  .stop-share-bar .ssb-stop{flex:0 0 auto;border:none;background:#dc2626;color:#fff;border-radius:999px;padding:.4rem .8rem;font-weight:600;font-size:.8rem;display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;}
+  .stop-share-bar .ssb-stop:hover{background:#b91c1c;}
   /* #3: "Ringing…" sits in the MIDDLE of the tile over a dimmed avatar/name, so it reads as the tile's
      state instead of a caption tucked under the name. */
   .meet-tile.waiting{border-color:#334155;}
@@ -5293,7 +5298,20 @@ function stopScreen(){
   addTile('__local', meetLocalStream, (ME&&ME.name)?ME.name:'You', true); setLocalSharing(false);
   updateScreenBtn(); meetSend({ type:'meeting-screen', on:false });
 }
-function updateScreenBtn(){ const b=document.getElementById('meetScreenBtn'); if(!b) return; b.classList.toggle('on', meetScreen); b.title=meetScreen?'Stop sharing':'Share screen'; b.innerHTML=ic('monitor',20); }
+function updateScreenBtn(){ const b=document.getElementById('meetScreenBtn'); if(b){ b.classList.toggle('on', meetScreen); b.title=meetScreen?'Stop sharing':'Share screen'; b.innerHTML=ic('monitor',20); } bzShowStopShare(meetScreen); }
+// A clear, always-visible "Stop sharing" banner while YOU are sharing your screen — the share button is buried
+// in the ⋮ More menu on mobile, so toggling it off wasn't discoverable. Works on iOS/desktop/web (all route
+// through toggleScreen). Renders on top (web UI is above the native video under hole-punch).
+function bzShowStopShare(on){
+  let el=document.getElementById('stopShareBar');
+  if(on){
+    if(!el){ el=document.createElement('div'); el.id='stopShareBar'; el.className='stop-share-bar';
+      el.innerHTML='<span class="ssb-lbl">'+ic('monitor',15)+' You’re sharing your screen</span><button class="ssb-stop">'+ic('x',14)+' Stop</button>';
+      const meet=document.querySelector('.meet'); (meet||document.body).appendChild(el);
+      el.querySelector('.ssb-stop').onclick=()=>{ try{ toggleScreen(); }catch(_){} };
+    }
+  } else if(el){ el.remove(); }
+}
 function setTileScreen(id, on){ const t=document.getElementById('meet-tile-'+id); if(!t) return; t.classList.toggle('sharing', !!on); let b=t.querySelector('.meet-screen'); if(on){ if(!b){ b=document.createElement('div'); b.className='meet-screen'; b.innerHTML=ic('monitor',12)+' Screen'; t.appendChild(b); } } else if(b){ b.remove(); } updateShareMode(); }
 // Stage mode: one chosen shared screen fills the area; other screens + people are small on the right.
 function getSharerIds(){ const a=[]; meetSharers.forEach(id=>a.push(id)); return a; } // #9: '__local' excluded — I don't display my own screen, so it's never the local stage