/* R51: local recording, deliberate preview and an explicit queue action. */
.record-bar[data-record-state] { flex-wrap:wrap; gap:10px; padding:14px 16px; border-radius:20px; background:var(--surface,#fff); border:1px solid var(--line,#dedce6); box-shadow:0 8px 30px #25203914; }
.record-bar[data-record-state] .record-bar__hint { flex:1 1 190px; font-size:12px; line-height:1.5; min-width:0; }
.record-bar__controls { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; min-width:0; max-width:100%; }
.record-bar__controls button { min-height:44px; min-width:44px; max-width:100%; padding:10px 16px; border:1px solid var(--line,#dedce6); border-radius:14px; font:inherit; white-space:normal; overflow-wrap:anywhere; color:inherit; background:transparent; cursor:pointer; }
.record-bar__controls [data-record-send] { background:var(--accent,#7564d8); color:white; border-color:transparent; font-weight:650; }
.record-bar__controls [data-record-cancel] { color:var(--danger,#b2334f); }
.record-bar__controls button:focus-visible { outline:3px solid var(--accent,#7564d8); outline-offset:3px; }
.record-bar__controls button:disabled { opacity:.6; cursor:wait; }
.record-bar__preview { width:100%; flex-basis:100%; min-width:0; height:44px; }
.record-bar[data-record-state="preview"] .record-bar__dot,
.record-bar[data-record-state="sending"] .record-bar__dot { animation:none; background:var(--accent,#7564d8); }
.record-bar[data-record-state="requesting"] .record-bar__dot { animation:none; opacity:.4; }
@media(max-width:420px) { .record-bar[data-record-state] { padding:12px; } .record-bar__controls { width:100%; } .record-bar__controls button { flex:1; } }
@media(prefers-reduced-motion:reduce) { .record-bar[data-record-state] .record-bar__dot { animation:none!important; } }