/* ══════════════════════════════════════════════════════════════════════
   Voice mode — a mic button in the chat composer, nothing else.
   Speaking sends a question exactly like typing one: it lands in the same
   message list, gets the same typing indicator while the answer is being
   worked out, and the answer renders with the same text/tables/charts.
══════════════════════════════════════════════════════════════════════ */

/* ── Composer mic button ──────────────────────────────────────────────
   .sbtn (the send button's own class, defined later in the page's inline
   <style>) sets background/color too — same specificity as a bare .micbtn
   rule here would have, so source order would let .sbtn win regardless of
   which comes first in the cascade. Compounding with .sbtn on every rule
   below makes these unambiguously more specific instead of depending on
   link order. */
.sbtn.micbtn { display: none; background: var(--bg2); border: 1px solid var(--bdr); color: var(--tx2); }
.sbtn.micbtn.vc-avail { display: flex; }
.sbtn.micbtn:hover { background: var(--bg3); color: var(--tx); }
.sbtn.micbtn.vc-hot {
  background: var(--red); border-color: var(--red); color: #fff;
  animation: vcMicPulse 1.4s ease-in-out infinite;
}
.sbtn.micbtn.vc-busy { opacity: .5; pointer-events: none; }
@keyframes vcMicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.35); }
  50%      { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}
@media (prefers-reduced-motion: reduce) {
  .micbtn.vc-hot { animation: none; }
}

/* ── Chat welcome card ─────────────────────────────────────────────
   Greeting, capability blurb, and (if voice is on) a one-line mention that
   the mic works too — not a card advertising a separate mode. */
#chat-welcome {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; margin: 4px 0 14px; padding: 20px 18px 16px;
  border: 1px solid var(--bdr); border-radius: 16px;
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  text-align: center;
}
.cw-t {
  font-size: 17px; font-weight: 700; letter-spacing: -.25px;
  color: var(--tx); line-height: 1.25; text-wrap: balance;
}
.cw-d {
  font-size: 12.5px; color: var(--tx2); margin-top: 7px;
  line-height: 1.5; max-width: 38ch;
}

.cw-voice-hint {
  display: flex; align-items: center; gap: 7px; margin-top: 13px;
  padding: 7px 13px; border-radius: 99px;
  border: 1px solid var(--bdr); background: var(--bg);
  font-size: 12px; color: var(--tx2);
}
.cw-voice-hint svg { flex-shrink: 0; color: var(--gold); }

/* ── Typed examples ──────────────────────────────────────────────── */
.cw-egs {
  width: 100%; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--bdr);
  display: flex; flex-direction: column; gap: 6px; align-items: stretch;
}
.cw-egs-h {
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--tx4); margin-bottom: 2px;
}
.cw-eg {
  display: block; width: 100%; text-align: left;
  padding: 8px 11px; border-radius: 8px;
  border: 1px solid var(--bdr); background: var(--bg);
  color: var(--tx2); font-family: var(--f); font-size: 12px; line-height: 1.35;
  cursor: pointer; transition: all .14s;
}
.cw-eg:hover { border-color: var(--gold-bd); color: var(--tx); background: var(--bg2); }

@media (max-width: 768px) {
  #chat-welcome { padding: 22px 16px 18px; border-radius: 18px; }
  .cw-t { font-size: 19px; }
  .cw-d { font-size: 13.5px; }
  .cw-eg { font-size: 13px; padding: 10px 12px; }
}

/* ── Read-aloud button on individual chat messages ─────────────────── */
.vc-play {
  border: none; background: none; padding: 2px 4px; margin-left: 4px;
  color: var(--tx4); cursor: pointer; vertical-align: middle;
  transition: color .14s; display: none;
}
.vc-play.vc-avail { display: inline-flex; }
.vc-play:hover { color: var(--gold); }
.vc-play.playing { color: var(--gold); }