/* ══════════════════════════════════════════════════════════════
   PROMETHEUS // BOTÃO DE VOZ
   Três estados legíveis de longe: PARADO, OUVINDO, PROCESSANDO.
   Enquanto ouve, o anel pulsa e as barrinhas dançam — assim você
   sabe que o microfone está aberto sem precisar ler nada.
   ══════════════════════════════════════════════════════════════ */

.m-mic {
  position: relative;
  width: 46px; height: 46px;
  flex: 0 0 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 212, 255, .35);
  background: radial-gradient(circle at 50% 35%, rgba(0, 212, 255, .16), rgba(3, 6, 12, .95));
  color: #dff6ff;
  font-size: 17px; line-height: 1;
  transition: transform .18s cubic-bezier(.22, 1, .36, 1), border-color .25s, box-shadow .25s;
  -webkit-tap-highlight-color: transparent;
}
.m-mic:hover { border-color: rgba(0, 212, 255, .7); transform: translateY(-1px); }
.m-mic:active { transform: scale(.94); }

/* ── OUVINDO: anel que respira + barras de áudio ─────────────── */
.m-mic.rec {
  border-color: rgba(255, 83, 110, .85);
  background: radial-gradient(circle at 50% 35%, rgba(255, 83, 110, .3), rgba(12, 3, 6, .96));
  box-shadow: 0 0 0 0 rgba(255, 83, 110, .5);
  animation: micPulso 1.9s ease-out infinite;
}
@keyframes micPulso {
  0%   { box-shadow: 0 0 0 0 rgba(255, 83, 110, .45); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 83, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 83, 110, 0); }
}
/* anel externo girando devagar: sinal de "canal aberto" */
.m-mic.rec::before {
  content: ""; position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 83, 110, .5);
  animation: micGiro 5s linear infinite;
}
@keyframes micGiro { to { transform: rotate(360deg); } }

/* barrinhas de nível dentro do botão */
.m-mic.rec::after {
  content: "";
  position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%);
  width: 20px; height: 9px;
  background:
    linear-gradient(#ff8ba0, #ff8ba0) 0    50% / 2px 100% no-repeat,
    linear-gradient(#ff8ba0, #ff8ba0) 6px  50% / 2px 60%  no-repeat,
    linear-gradient(#ff8ba0, #ff8ba0) 12px 50% / 2px 90%  no-repeat,
    linear-gradient(#ff8ba0, #ff8ba0) 18px 50% / 2px 45%  no-repeat;
  animation: micBarras .85s ease-in-out infinite alternate;
  opacity: .95;
}
@keyframes micBarras {
  from { background-size: 2px 40%, 2px 95%, 2px 55%, 2px 80%; }
  to   { background-size: 2px 95%, 2px 45%, 2px 100%, 2px 40%; }
}

/* ── PROCESSANDO: arco girando, sem pulso ────────────────────── */
.m-mic.proc {
  border-color: rgba(168, 85, 247, .8);
  background: radial-gradient(circle at 50% 35%, rgba(168, 85, 247, .26), rgba(6, 3, 12, .96));
  animation: none;
}
.m-mic.proc::before {
  content: ""; position: absolute; inset: -5px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(168, 85, 247, .95);
  border-right-color: rgba(0, 212, 255, .6);
  animation: micGiro .8s linear infinite;
}
.m-mic.proc::after { content: none; }

/* ── painel silenciado: piscada curta de confirmação ──────────── */
.mother-panel.calada { animation: caladaFlash .5s ease-out 2; }
@keyframes caladaFlash {
  0%, 100% { box-shadow: none; }
  50%      { box-shadow: inset 0 0 0 1px rgba(255, 200, 87, .55); }
}
.mother-panel.calada #motherState { color: #ffc857; }

/* ── estado textual: não deixa quebrar o layout ───────────────── */
#motherState { font-size: 10px; letter-spacing: .12em; white-space: nowrap; }

/* ── no celular o alvo cresce ─────────────────────────────────── */
@media (max-width: 820px) {
  .m-mic { width: 52px; height: 52px; flex-basis: 52px; font-size: 19px; }
  #motherState { font-size: 9px; }
}

/* ── quem prefere menos movimento não leva animação na cara ───── */
@media (prefers-reduced-motion: reduce) {
  .m-mic.rec, .m-mic.rec::before, .m-mic.rec::after,
  .m-mic.proc::before, .mother-panel.calada { animation: none; }
  .m-mic.rec { box-shadow: 0 0 0 3px rgba(255, 83, 110, .35); }
}