/* ---------- controls at the bottom ---------- */
footer { display: grid; gap: 8px; padding: 10px 0 14px; }
/* The round button: Listen → Pause ↔ Resume. Its ring follows the mic level while listening. */
/* The composer bar, like a messaging app's: End · what Babble is doing · the round mic (listen → pause ↔ resume). */
.mic-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: var(--color-surface);
  border-radius: var(--radius-pill); padding: 6px 6px 6px 8px; }
.mic { --level: 0; grid-column: 3; width: 64px; height: 64px; border-radius: var(--radius-round); border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--color-text); color: var(--color-bg);
  box-shadow: 0 0 0 calc(var(--level) * 10px) rgb(var(--rgb-accent) / calc(.25 + var(--level) * .6)); transition: box-shadow .08s; }
body[data-mode="assist"] .mic { background: var(--color-accent); color: var(--color-on-accent); }
.mic svg { grid-area: 1 / 1; width: 28px; height: 28px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mic .i-pause, .mic .i-resume { stroke: none; }
.mic .i-pause, .mic .i-resume, .mic.on .i-mic, .mic.on.paused .i-pause, .mic:not(.paused) .i-resume { display: none; }
.mic.on .i-pause { display: block; }
.mic.on.paused .i-resume { display: block; }
.mic:not(.on) { box-shadow: none; }
.mic.paused { box-shadow: none; opacity: .85; }
.end { grid-column: 1; justify-self: start; background: var(--color-bg); border: 0; border-radius: var(--radius-pill); padding: 10px 18px;
  font-weight: 600; color: var(--color-text); cursor: pointer; }
.mic-label { display: none; }
/* During a conversation the button shrinks and its label moves beside it, leaving room for the chat. */
.mic-row > * { grid-row: 1; }
.mic-side { grid-column: 2; font-size: var(--text-md); color: var(--color-text-muted); padding-inline-start: 10px; cursor: pointer; }
body.live .mic-side { padding-inline-start: 0; }