/* =====================================================================
   NINA — PERGUNTAR FALANDO  ·  aparência
   ---------------------------------------------------------------------
   Folha à parte, de propósito: o nina.css continua exatamente como
   estava. Tudo aqui usa as mesmas variáveis de cor, a mesma fonte e as
   mesmas medidas do chat — o botão novo tem 44 px, igual ao de enviar, e
   o mesmo raio de borda.
   ===================================================================== */

/* ---------- o botão de microfone ---------- */
.nina-mic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--nina-borda);
  background: var(--nina-cinza);
  color: var(--nina-tinta-suave);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}
.nina-mic svg { width: 19px; height: 19px; }

@media (hover: hover) and (pointer: fine) {
  .nina-mic:hover {
    border-color: var(--nina-laranja);
    color: var(--nina-laranja);
    background: var(--nina-laranja-claro);
  }
}
.nina-mic:active { transform: scale(0.94); }
.nina-mic:focus-visible {
  outline: 2px solid var(--nina-laranja);
  outline-offset: 2px;
}

/* Gravando: o botão vira laranja cheio e pulsa devagar. A cor não é o
   único sinal — a barra acima escreve "Gravando" e mostra o tempo. */
.nina-mic.gravando {
  background: linear-gradient(135deg, var(--nina-laranja) 0%, var(--nina-laranja-vivo) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 0 0 rgba(245, 134, 52, 0.55);
  animation: nina-mic-pulso 1.6s ease-out infinite;
}
@keyframes nina-mic-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(245, 134, 52, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(245, 134, 52, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 134, 52, 0); }
}

/* Navegador sem reconhecimento de fala: o botão fica apagado, mas
   continua ali e continua clicável — clicar explica o motivo. Sumir
   faria a pessoa achar que o site quebrou no aparelho dela. */
.nina-mic-sem { opacity: 0.45; }

/* ---------- a barra de estado, acima do rodapé ---------- */
.nina-voz-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--nina-laranja-claro);
  border-top: 1px solid var(--nina-borda);
  font-size: 13px;
  color: var(--nina-tinta);
  flex-shrink: 0;
}
.nina-voz-barra[hidden] { display: none; }

.nina-voz-pulso {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #d9403a;
  flex-shrink: 0;
  animation: nina-voz-piscar 1.1s ease-in-out infinite;
}
@keyframes nina-voz-piscar { 50% { opacity: 0.25; } }

.nina-voz-estado { font-weight: 600; }
.nina-voz-tempo {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--nina-tinta-suave);
}

.nina-voz-barra button {
  border: 0;
  border-radius: 999px;
  padding: 6px 13px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.nina-voz-barra button:focus-visible {
  outline: 2px solid var(--nina-tinta);
  outline-offset: 2px;
}
.nina-voz-cancelar {
  background: var(--nina-branco);
  color: var(--nina-tinta-suave);
  border: 1px solid var(--nina-borda) !important;
}
.nina-voz-concluir {
  background: var(--nina-laranja);
  color: #fff;
}
.nina-voz-barra button:hover { filter: brightness(1.06); }

/* ---------- o recado abaixo do rodapé ---------- */
.nina-voz-recado {
  padding: 0 16px 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--nina-tinta-fraca);
}
.nina-voz-recado[hidden] { display: none; }
.nina-voz-recado-erro { color: #b3261e; }
.nina-voz-recado-ok { color: var(--nina-tinta-suave); }

/* ---------- quem pediu menos movimento ---------- */
/* O pulso do microfone e o piscar do ponto são decoração. Quem configurou
   o aparelho para reduzir movimento não deve recebê-los — e o estado
   continua legível, porque ele está escrito, não só animado. */
@media (prefers-reduced-motion: reduce) {
  .nina-mic.gravando { animation: none; box-shadow: 0 0 0 3px rgba(245, 134, 52, 0.4); }
  .nina-voz-pulso { animation: none; }
  .nina-mic, .nina-voz-barra button { transition: none; }
}

/* ---------- telas estreitas ---------- */
@media (max-width: 420px) {
  .nina-voz-barra { padding: 8px 12px; gap: 6px; font-size: 12.5px; }
  .nina-voz-barra button { padding: 5px 10px; font-size: 12px; }
  /* Com dois botões e o relógio, 420 px aperta. O rótulo do tempo cede
     primeiro: ele é conforto, e os botões são o que a pessoa precisa. */
  .nina-voz-tempo { margin-left: auto; }
}