feat: 3-dot menu with download option on gallery photos

index.html

@@ -367,6 +367,14 @@
     </div>
   </div>
 
+  <!-- ══ PHOTO CONTEXT MENU ══ -->
+  <div id="photo-menu" class="photo-menu hidden">
+    <button id="photo-menu-download">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+      Download photo
+    </button>
+  </div>
+
   <!-- ══ BOTTOM NAV ══ -->
   <nav id="bottom-nav">
     <button class="nav-btn active" data-screen="map"><span class="nav-icon"><i data-lucide="map"></i></span><span>Map</span></button>
@@ -723,8 +731,17 @@
           const locStr  = (s.latitude && s.longitude) ? `${s.latitude.toFixed(3)}, ${s.longitude.toFixed(3)}` : 'Location not recorded';
           return `
             <div class="gallery-card">
-              <img class="gallery-card-img" src="${s.photo_url}" alt="sighting"
-                onerror="this.style.background='#eee';this.src=''"/>
+              <div class="gallery-card-img-wrap">
+                <img class="gallery-card-img" src="${s.photo_url}" alt="sighting"
+                  onerror="this.style.background='#eee';this.src=''"/>
+                <button class="gallery-card-menu-btn" data-url="${s.photo_url}" data-date="${dateStr}" aria-label="Options">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                    <circle cx="12" cy="5" r="1.2" fill="currentColor" stroke="none"/>
+                    <circle cx="12" cy="12" r="1.2" fill="currentColor" stroke="none"/>
+                    <circle cx="12" cy="19" r="1.2" fill="currentColor" stroke="none"/>
+                  </svg>
+                </button>
+              </div>
               <div class="gallery-card-info">
                 <div class="gallery-card-date">
                   <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
@@ -1060,6 +1077,43 @@
     updateSubmitBtn();
   }
 
+  // ── PHOTO CONTEXT MENU ────────────────────────────────────────────────────
+  let photoMenuUrl = null;
+  const photoMenu  = document.getElementById('photo-menu');
+
+  function openPhotoMenu(btn) {
+    photoMenuUrl = btn.dataset.url;
+    const rect   = btn.getBoundingClientRect();
+    const appRect = document.getElementById('app').getBoundingClientRect();
+    photoMenu.classList.remove('hidden');
+    // Position below the button, clamped inside app
+    let top  = rect.bottom - appRect.top + 4;
+    let left = rect.right  - appRect.left - photoMenu.offsetWidth;
+    if (left < 8) left = 8;
+    photoMenu.style.top  = top  + 'px';
+    photoMenu.style.left = left + 'px';
+  }
+
+  function closePhotoMenu() { photoMenu.classList.add('hidden'); photoMenuUrl = null; }
+
+  document.getElementById('app').addEventListener('click', e => {
+    const btn = e.target.closest('.gallery-card-menu-btn');
+    if (btn) { e.stopPropagation(); openPhotoMenu(btn); return; }
+    if (!photoMenu.contains(e.target)) closePhotoMenu();
+  });
+
+  document.getElementById('photo-menu-download').addEventListener('click', () => {
+    if (!photoMenuUrl) return;
+    const a = document.createElement('a');
+    a.href     = photoMenuUrl;
+    a.download = 'pawmap-photo.jpg';
+    a.target   = '_blank';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    closePhotoMenu();
+  });
+
   // ── HELP SHEET ────────────────────────────────────────────────────────────
   let helpAnimal = null;
 

static/style.css

@@ -304,6 +304,15 @@
 /* Adopt button */
 .btn-adopt svg { width: 18px; height: 18px; stroke: #fff; fill: #fff; }
 
+    /* ── Gallery card menu ── */
+    .gallery-card-img-wrap { position:relative; }
+    .gallery-card-menu-btn { position:absolute; top:6px; right:6px; width:28px; height:28px; background:rgba(0,0,0,.45); border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; padding:0; }
+    .gallery-card-menu-btn svg { width:14px; height:14px; }
+    .photo-menu { position:absolute; z-index:800; background:#fff; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,.15); overflow:hidden; min-width:160px; }
+    #photo-menu-download { display:flex; align-items:center; gap:10px; padding:13px 16px; font-size:14px; font-weight:500; color:var(--text); background:none; border:none; cursor:pointer; width:100%; }
+    #photo-menu-download:active { background:var(--bg); }
+    #photo-menu-download svg { width:16px; height:16px; flex-shrink:0; color:var(--text-muted); }
+
     /* ── Helped banner & events ── */
     #profile-helped-banner { display:flex; align-items:center; gap:8px; background:var(--green-soft); border:1px solid var(--green-pale); border-radius:10px; padding:10px 14px; margin:10px 0 4px; font-size:13px; color:var(--green-dark); font-weight:500; }
     #profile-helped-banner i { flex-shrink:0; }