/* coach.css - just the voice controls in the Ask tab (the microphone and "read replies aloud").
   Its own file because styles.css is at the 1000-line cap. Everything else in the Ask tab still
   lives there under .cx-*; only the two voice bits are here. */

/* The row above the chat: read-aloud on the left, clear on the right. */
.cx-bar{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 6px}
.cx-bar .cx-clear{margin:0}

.cx-speak{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:var(--mut2); background:transparent; border:1px solid transparent; border-radius:999px;
  padding:3px 10px 3px 8px; line-height:1.5}
.cx-speak svg{width:15px; height:15px; display:block; flex:none}
.cx-speak.on{color:var(--acc); background:var(--card); border-color:var(--line)}

/* The mic sits where the send arrow does and takes its place while the box is empty, so the row
   never gets a fifth button squeezed into it on a phone. */
.cx-mic{flex:none; width:42px; height:42px; border-radius:50%; background:var(--card); color:var(--mut);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center}
.cx-mic svg{width:20px; height:20px; display:block}
.cx-mic:disabled{opacity:.5}
.cx-input.has-mic .cx-send{display:none}
.cx-input.has-mic.has-text .cx-send{display:flex}
.cx-input.has-mic.has-text .cx-mic{display:none}

/* Shown under a reply ONLY when Claude wasn't the one who answered. Deliberately quiet: it is a note
   in the margin, not a warning, because the answer is still a perfectly good one. */
.cx-backup{max-width:82%; margin:-4px 0 10px; font-size:11px; color:var(--mut2); padding-left:13px}

/* Listening: filled in, with a soft pulse so there's no doubt it's live and hearing her. */
.cx-mic.on{background:var(--acc); color:var(--acctxt); border-color:var(--acc); animation:cxmic 1.4s ease-in-out infinite}
@keyframes cxmic{0%,100%{box-shadow:0 0 0 0 rgba(180,143,154,.5)} 70%{box-shadow:0 0 0 9px rgba(180,143,154,0)}}
@media (prefers-reduced-motion:reduce){.cx-mic.on{animation:none}}