/* Dictation bar under lesson-note boxes (public/dictation.js).
   Copied verbatim from the approved mockup's PROPOSED block:
   docs/superpowers/specs/2026-10-01-dictation-mic-mockup.gen.mjs.
   Design spec: docs/superpowers/specs/2026-10-01-dictation-mic-design.md */

.dictation-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 10px; margin-top: 6px;
}
.dictation-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white); color: var(--text);
  font: inherit; font-size: 0.85rem; font-weight: 600; line-height: 1.3;
  white-space: nowrap; cursor: pointer;
}
.dictation-btn:hover:not(:disabled) { background: var(--green-light); }
.dictation-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dictation-btn.is-busy:disabled { opacity: 1; cursor: progress; }
/* Spec N1 (2026-10-08): the icon buttons are the same width, centred. The list icon is 1.3em (set on the SVG),
   the text's line height, so every button is the same height. */
.dictation-bar .dictation-dictate, .dictation-bar .dictation-bullet, .dictation-bar .dictation-newline,
.dictation-bar .dictation-clear, .dictation-bar .dictation-undo { min-width: 44px; justify-content: center; }
/* Spec N1 (2026-10-08): while busy, 🎤 stays a fixed square; its word stays in the markup at zero width (so the
   button keeps its line height and the icon stays centred) and the status line says what is happening. */
.dictation-bar .dictation-dictate { gap: 0; }
.dictation-bar .dictation-dictate .dictation-btn-label { display: inline-block; width: 0; overflow: hidden; white-space: nowrap; }
.dictation-status { font-size: 0.82rem; line-height: 1.4; color: var(--text-muted); }
.dictation-status.is-error { color: var(--emergency-accent); }
.dictation-status.is-warn { color: #8a4a00; }
[data-theme="dark"] .dictation-status.is-warn { color: #f0c27b; }
.dictation-dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  animation: dictation-pulse 1.2s ease-in-out infinite;
}
.dictation-spinner {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: dictation-spin 0.8s linear infinite;
}
@keyframes dictation-pulse { 50% { opacity: 0.3; } }
@keyframes dictation-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dictation-dot, .dictation-spinner { animation: none; }
}
/* The box being dictated into gets a red edge while the mic is live. */
textarea.is-dictating,
.admin-shared-notes-card .note-box.is-dictating,
.admin-private-notes-card .private-text.is-dictating,
#coach-todo-section .coach-todo-note-editor textarea.is-dictating {
  border-color: #b3261e; box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.15);
}
/* Hardcoded-light cards (#398). */
.admin-shared-notes-card .dictation-btn { background: #fff; border-color: #b7d3c1; color: #1f4d33; }
.admin-shared-notes-card .dictation-btn:hover:not(:disabled) { background: #e1f0e6; }
.admin-shared-notes-card .dictation-status { color: #3d5a47; }
.admin-private-notes-card .dictation-btn { background: #fff; border-color: #d8c07d; color: #6b4f00; }
.admin-private-notes-card .dictation-btn:hover:not(:disabled) { background: #fbefc9; }
.admin-private-notes-card .dictation-status { color: #5a5a44; }
.admin-shared-notes-card .dictation-status.is-error,
.admin-private-notes-card .dictation-status.is-error { color: #8a2a22; }
.admin-shared-notes-card .dictation-status.is-warn,
.admin-private-notes-card .dictation-status.is-warn { color: #8a4a00; }
/* Recording wins over every card's pinned colors (white on #b3261e = 6.54:1). */
.dictation-btn.is-recording,
.admin-shared-notes-card .dictation-btn.is-recording,
.admin-private-notes-card .dictation-btn.is-recording {
  background: #b3261e; border-color: #b3261e; color: #fff;
}
.dictation-btn.is-recording:hover:not(:disabled),
.admin-shared-notes-card .dictation-btn.is-recording:hover:not(:disabled),
.admin-private-notes-card .dictation-btn.is-recording:hover:not(:disabled) { background: #8f1e18; }
/* Tablets and phones: 44px floor, real padding only (see the pointer: coarse block). Spec N15 (2026-10-08):
   room for large fingers. The icon buttons are 44px squares, spread across the row (capped at 420px so on
   the tablet they stay within one hand's reach); Undo keeps its slot while hidden, so nothing moves when it
   appears; the status line and Try again go on their own line below. */
@media (pointer: coarse) {
  .dictation-btn { min-height: 44px; padding: 10px 16px; }
  .dictation-bar { justify-content: space-between; max-width: 420px; }
  .dictation-bar .dictation-btn { min-width: 44px; padding-left: 8px; padding-right: 8px; justify-content: center; }
  /* The drawn icons (Bullet, New line, Clear, Undo) at 22px, so they can be made out on the phone and tablet. */
  .dictation-bar .dictation-btn svg { width: 22px; height: 22px; }
  .dictation-bar .dictation-undo[hidden] { display: inline-flex; visibility: hidden; }
  .dictation-bar .dictation-status { flex-basis: 100%; order: 1; }
  .dictation-bar .dictation-retry { order: 2; }
}

/* The bar toggles the `hidden` attribute (Try again, the status line); an author
   `display` rule (.dictation-btn is inline-flex) would otherwise beat it. */
.dictation-bar [hidden] { display: none; }

/* #998 recovery actions never occupy a tool icon slot. */
.dictation-recovery-hint { flex-basis: 100%; font-size: .82rem; color: var(--text-muted); }
.dictation-recordings { margin: 12px 0; border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.dictation-recordings summary { cursor: pointer; min-height: 44px; display: list-item; padding: 10px 0; }
.dictation-saved-row { border-top: 1px solid var(--border); padding: 12px 0; overflow-wrap: anywhere; }
.dictation-saved-row .dictation-btn { margin: 4px 8px 4px 0; }
@media (pointer: coarse) {
  .dictation-bar .dictation-recovery-action { order: 2; }
  .dictation-bar .dictation-recovery-hint { order: 3; }
}