Upload patient.html

templates/patient.html

@@ -148,15 +148,66 @@
         <span id="heard-text"></span>
       </div>
     </div>
-    <p class="helper-text" id="waiting-text">Your provider hasn't replied yet.</p>
+  </div>
+
+  <!-- Waiting state: honest 3-step status (we only actually know two things
+       from the backend: submitted, and answered-or-not, so the middle step
+       is the only one that's ever "current"), plus a manual refresh and a
+       general, clearly-non-personalized safety note. Hidden entirely once
+       a reply arrives, since the chat bubble above becomes the record of
+       that. -->
+  <div class="card" id="waiting-card">
+    <div class="status-timeline">
+      <div class="timeline-step done">
+        <span class="timeline-dot"></span>
+        <span class="timeline-label">Submitted</span>
+      </div>
+      <div class="timeline-connector"></div>
+      <div class="timeline-step current">
+        <span class="timeline-dot"></span>
+        <span class="timeline-label">Waiting for provider</span>
+      </div>
+      <div class="timeline-connector"></div>
+      <div class="timeline-step">
+        <span class="timeline-dot"></span>
+        <span class="timeline-label">Response ready</span>
+      </div>
+    </div>
+
+    <p class="helper-text">We check automatically every little while, no need to keep this open.</p>
+
+    <div class="waiting-note">
+      <strong>While you wait:</strong> if your symptoms feel severe or are getting worse
+      quickly, please go to the nearest clinic instead of waiting for a reply here.
+      This is general safety guidance, not advice about your specific message.
+    </div>
+
     <button type="button" class="btn btn-secondary" id="check-response-btn">
       <span class="btn-spinner spinner" style="display: none;"></span>
-      <span class="btn-label">Check for reply</span>
+      <span class="btn-label">Check now</span>
     </button>
   </div>
 
   <div class="card" id="response-card" style="display: none;">
-    <audio id="response-audio" controls></audio>
+    <h3>Provider's reply</h3>
+    <div class="audio-player">
+      <audio id="response-audio" preload="metadata"></audio>
+      <div class="audio-player-controls">
+        <button type="button" class="audio-btn" id="audio-play-btn" aria-label="Play">
+          <svg class="icon-play" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"/></svg>
+          <svg class="icon-pause" viewBox="0 0 24 24" fill="currentColor" style="display: none;"><rect x="5" y="3" width="5" height="18" rx="1"/><rect x="14" y="3" width="5" height="18" rx="1"/></svg>
+        </button>
+        <button type="button" class="audio-btn audio-btn-sm" id="audio-replay-btn" aria-label="Replay from start">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
+        </button>
+        <span class="audio-time" id="audio-current-time">0:00</span>
+        <input type="range" class="audio-seek" id="audio-seek" min="0" max="0" value="0" step="0.1" aria-label="Seek audio position">
+        <span class="audio-time" id="audio-duration">0:00</span>
+        <a class="audio-btn audio-btn-sm" id="audio-download-btn" download="talktodoc-reply.wav" aria-label="Download audio reply" href="#">
+          <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 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+        </a>
+      </div>
+    </div>
   </div>
 
   <button type="button" class="btn btn-secondary" id="new-conversation-btn">Start a new conversation</button>