Upload style.css

static/css/style.css

@@ -1095,6 +1095,162 @@ audio {
   color: var(--color-success);
 }
 
+/* Waiting-state status timeline: 3 honest steps (submitted / waiting /
+   ready). Only "submitted" and "waiting" are ever shown as reached,
+   because that's genuinely all two states the backend tracks; the app
+   never fabricates an in-between "provider is reviewing" stage. */
+.status-timeline {
+  display: flex;
+  align-items: flex-start;
+  margin: var(--space-4) 0 var(--space-5);
+}
+
+.timeline-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  text-align: center;
+}
+
+.timeline-dot {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--color-surface);
+  border: 2px solid var(--color-border);
+  margin-bottom: var(--space-2);
+  flex-shrink: 0;
+}
+
+.timeline-step.done .timeline-dot {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.timeline-step.current .timeline-dot {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 4px var(--color-primary-light);
+  animation: timeline-pulse 1.8s ease-in-out infinite;
+}
+
+@keyframes timeline-pulse {
+  0%, 100% { box-shadow: 0 0 0 4px var(--color-primary-light); }
+  50% { box-shadow: 0 0 0 7px var(--color-primary-light); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .timeline-step.current .timeline-dot {
+    animation: none;
+  }
+}
+
+.timeline-label {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  line-height: 1.3;
+}
+
+.timeline-step.done .timeline-label,
+.timeline-step.current .timeline-label {
+  color: var(--color-text);
+}
+
+.timeline-connector {
+  flex: 0 0 auto;
+  width: 32px;
+  height: 2px;
+  background: var(--color-border);
+  margin: 7px -4px 0;
+}
+
+/* General, clearly-non-personalized safety guidance shown while waiting.
+   Uses the primary-light tint rather than the error/warning colors, since
+   it's reassurance and a standing safety note, not an alert. */
+.waiting-note {
+  background: var(--color-primary-light);
+  border-left: 3px solid var(--color-primary);
+  border-radius: var(--radius-sm);
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--text-sm);
+  color: var(--color-text);
+  margin-bottom: var(--space-4);
+}
+
+.waiting-note strong {
+  color: var(--color-primary-dark);
+}
+
+/* Custom audio player, replaces the bare native <audio controls> element
+   so playback matches the rest of the design system instead of looking
+   like a raw, inconsistently-styled browser widget. */
+.audio-player audio {
+  display: none;
+}
+
+.audio-player-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.audio-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: none;
+  background: var(--color-primary);
+  color: var(--color-text-on-primary);
+  cursor: pointer;
+  transition: background 150ms ease, transform 100ms ease;
+}
+
+.audio-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.audio-btn:hover {
+  background: var(--color-primary-dark);
+}
+
+.audio-btn:active {
+  transform: scale(0.94);
+}
+
+.audio-btn-sm {
+  width: 36px;
+  height: 36px;
+  background: var(--color-primary-light);
+  color: var(--color-primary-dark);
+}
+
+.audio-btn-sm:hover {
+  background: #DAE1CD;
+}
+
+.audio-time {
+  font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-secondary);
+  flex-shrink: 0;
+  min-width: 34px;
+}
+
+.audio-seek {
+  flex: 1;
+  min-width: 0;
+  height: 4px;
+  accent-color: var(--color-primary);
+  cursor: pointer;
+}
+
 /* Toast confirmation, appears briefly after an action completes */
 .toast {
   position: fixed;