Reorder webcam results section: answer first, then scores, then buttons (#176)

Move the webcam controls below the bird detection result and score
details so users see the most important information (is it a bird?)
at the top of the results area.

Co-authored-by: Claude <noreply@anthropic.com>

Author: simonw

is-it-a-bird.html

@@ -222,6 +222,12 @@
     .webcam-container.active {
       display: block;
     }
+    .webcam-bottom-controls {
+      display: none;
+    }
+    .webcam-bottom-controls.active {
+      display: block;
+    }
     .video-wrapper {
       position: relative;
       overflow: hidden;
@@ -372,12 +378,6 @@ <h1>Is it a bird?</h1>
         <video id="webcam-video" autoplay playsinline></video>
         <div class="zoom-hint" id="zoom-hint">Pinch to zoom</div>
       </div>
-      <div class="webcam-controls">
-        <button class="webcam-btn start" id="start-camera-btn">Start Camera</button>
-        <button class="webcam-btn stop" id="stop-camera-btn" style="display: none;">Stop Camera</button>
-        <button class="webcam-btn switch" id="switch-camera-btn" style="display: none;">Switch Camera</button>
-      </div>
-      <div class="webcam-status" id="webcam-status"></div>
     </div>
 
     <img id="preview" alt="Preview of uploaded image">
@@ -390,6 +390,15 @@ <h1>Is it a bird?</h1>
     <div id="result"></div>
     <div id="score-details"></div>
 
+    <div class="webcam-bottom-controls" id="webcam-bottom-controls">
+      <div class="webcam-controls">
+        <button class="webcam-btn start" id="start-camera-btn">Start Camera</button>
+        <button class="webcam-btn stop" id="stop-camera-btn" style="display: none;">Stop Camera</button>
+        <button class="webcam-btn switch" id="switch-camera-btn" style="display: none;">Switch Camera</button>
+      </div>
+      <div class="webcam-status" id="webcam-status"></div>
+    </div>
+
     <div class="footer">
       <p>This tool runs entirely in your browser using the <a href="https://huggingface.co/Xenova/clip-vit-base-patch32">Xenova/clip-vit-base-patch32</a> model. No images are uploaded to any server.</p>
       <p>Uses a threshold of 0.5 to determine if something is "likely a bird". The model compares the image against candidate labels: bird, animal, object, person, landscape.</p>
@@ -421,6 +430,7 @@ <h1>Is it a bird?</h1>
     const imageModeBtn = document.getElementById('image-mode-btn');
     const webcamModeBtn = document.getElementById('webcam-mode-btn');
     const webcamContainer = document.getElementById('webcam-container');
+    const webcamBottomControls = document.getElementById('webcam-bottom-controls');
 
     // Webcam elements
     const webcamVideo = document.getElementById('webcam-video');
@@ -647,13 +657,15 @@ <h1>Is it a bird?</h1>
         webcamModeBtn.classList.remove('active');
         dropzone.style.display = 'flex';
         webcamContainer.classList.remove('active');
+        webcamBottomControls.classList.remove('active');
         stopWebcam();
       } else {
         webcamModeBtn.classList.add('active');
         imageModeBtn.classList.remove('active');
         dropzone.style.display = 'none';
         preview.style.display = 'none';
         webcamContainer.classList.add('active');
+        webcamBottomControls.classList.add('active');
         // Reset result when switching to webcam
         document.body.classList.remove('is-bird', 'not-bird');
         result.style.display = 'none';