/* ═══════════════════════════════════════════════════════════════════════════
   vo-field-draft.css — the Draft control, and the row it shares with Dictate.

   Both controls are deliberately the same size, weight, and colour. They are two ways to fill
   the same box, and making one louder than the other would say something untrue about which one
   to reach for. Quiet until the field is touched, for the same reason the mic is: a page with
   twenty note boxes should not look like a page with forty buttons.
   ═══════════════════════════════════════════════════════════════════════════ */

.vo-fa-row {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; flex-wrap: wrap; margin-top: 4px;
}

.vo-fa-btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 6px;
  font: 500 10.5px/1 var(--vo-font-body, inherit); letter-spacing: .02em;
  border: 1px solid var(--vo-border, #dbe3dd); border-radius: 999px;
  background: var(--vo-surface, #fff); color: var(--vo-ink-soft, #64748b);
  opacity: .6; transition: opacity .12s, border-color .12s, color .12s;
}
/* Reveal on hover anywhere in the field group, and on keyboard focus — never opacity alone as
   the only affordance, or a keyboard user never finds it. Matches the mic exactly. */
.sales-mic-field:hover .vo-fa-btn, .hr-mic-field:hover .vo-fa-btn,
.sales-mic-field:focus-within .vo-fa-btn, .hr-mic-field:focus-within .vo-fa-btn,
.vo-fa-btn:focus-visible { opacity: 1; }
.vo-fa-btn:hover { border-color: var(--vo-green, #649954); color: var(--vo-green-dark, #4d7a40); }
.vo-fa-btn:focus-visible { outline: 2px solid var(--vo-blue, #2f6f9f); outline-offset: 1px; }
.vo-fa-btn[disabled] { cursor: default; opacity: .45; }
.vo-fa-btn.is-busy svg { animation: vo-fa-spin 1.1s linear infinite; }
@keyframes vo-fa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vo-fa-btn.is-busy svg { animation: none; } }

.vo-fa-btn.primary {
  opacity: 1; background: var(--vo-green, #649954); border-color: var(--vo-green-dark, #4d7a40);
  color: #fff;
}
.vo-fa-btn.primary:hover { background: var(--vo-green-dark, #4d7a40); color: #fff; }
.vo-fa-btn.ghost { opacity: 1; border-style: dashed; }

/* ── The suggestion, pending a decision ─────────────────────────────────────
   Visually separate from the field so nobody mistakes it for content that is already saved —
   which is the one way this control could do harm. */
.vo-fa-preview {
  margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--vo-green, #649954);
  border-left-width: 3px; border-radius: 0 7px 7px 0;
  background: var(--vo-green-tint, #e7efe2);
}
.vo-fa-preview.is-error {
  border-color: var(--vo-red, #c73127);
  background: rgba(199, 49, 39, .06);
}
.vo-fa-preview-k {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vo-green-dark, #4d7a40); margin-bottom: 5px;
}
.vo-fa-preview.is-error .vo-fa-preview-k { color: var(--vo-red, #c73127); }
.vo-fa-preview-body {
  font-size: 13px; line-height: 1.55; color: var(--vo-ink, #16233a);
  white-space: pre-wrap; max-height: 320px; overflow-y: auto; max-width: 80ch;
}
.vo-fa-preview-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }

@media (max-width: 640px) {
  .vo-fa-row { justify-content: flex-start; }
}