Add reset confirmation

internal/service/static/main.css

@@ -446,6 +446,20 @@ body {
   border-color: var(--color-red);
 }
 
+.footer__toolbar-btn--pending {
+  background: var(--color-yellow);
+  color: var(--color-black);
+  border-color: var(--color-yellow);
+}
+
+@media (hover: hover) {
+  .footer__toolbar-btn--pending:hover {
+    background: var(--color-yellow);
+    color: var(--color-black);
+    border-color: var(--color-yellow);
+  }
+}
+
 @media (hover: hover) {
   .footer__toolbar-btn--muted:hover {
     color: var(--color-red);

internal/service/static/main.js

@@ -28,6 +28,7 @@ class Odidere {
     this.isProcessing = false;
     this.isRecording = false;
     this.isMuted = false;
+    this.isResetPending = false;
     this.mediaRecorder = null;
 
     // DOM Elements
@@ -143,8 +144,9 @@ class Odidere {
     // Send button
     this.$send.addEventListener('click', () => this.#submitText());
 
-    // Reset button
+    // Reset button: two-press safety
-    this.$reset.addEventListener('click', () => this.reset());
+    this.$reset.addEventListener('click', () => this.#handleResetClick());
+    this.document.addEventListener('click', (e) => this.#handleResetCancel(e));
 
     // File attachment
     this.$attach.addEventListener('click', () => this.$fileInput.click());
@@ -327,6 +329,33 @@ class Odidere {
     this.$fileInput.value = '';
   }
 
+  /**
+   * #handleResetClick toggles the pending state on first press,
+   * executes the reset on second press.
+   */
+  #handleResetClick() {
+    if (this.isResetPending) {
+      this.isResetPending = false;
+      this.$reset.classList.remove('footer__toolbar-btn--pending');
+      this.reset();
+    } else {
+      this.isResetPending = true;
+      this.$reset.classList.add('footer__toolbar-btn--pending');
+    }
+  }
+
+  /**
+   * #handleResetCancel clears the pending reset state when the user
+   * clicks anywhere outside the reset button.
+   * @param {MouseEvent} event
+   */
+  #handleResetCancel(event) {
+    if (!this.isResetPending) return;
+    if (this.$reset.contains(event.target)) return;
+    this.isResetPending = false;
+    this.$reset.classList.remove('footer__toolbar-btn--pending');
+  }
+
   // ====================
   // AUDIO RECORDING
   // ====================