/* Botão de gravar áudio do composer (web/js/gravador-audio.js + inbox.js).
   Só usa as variáveis do tema: funciona no claro e no escuro. */
.composer-linha .botao-microfone { flex: none; color: var(--ouro); }
.composer-linha .botao-microfone svg { width: 18px; height: 18px; }
/* com texto (ou anexo escolhido) some o microfone; vazio, some o enviar do celular */
.composer-linha.tem-texto .botao-microfone { display: none; }
@media (max-width: 760px) {
  .composer-linha:not(.tem-texto):has(.botao-microfone) .botao-enviar-movel { display: none; }
}

.gravacao {
  display: flex; align-items: center; gap: 10px; min-height: 36px;
  padding: 0 4px; border: 1px solid var(--borda); border-radius: 10px; background: var(--input);
}
.gravacao .botao-icone { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.gravacao .botao-icone svg { width: 18px; height: 18px; }
.gravacao-cancelar { color: var(--erro); }
.gravacao-enviar { color: var(--ouro); }
.gravacao-enviar:disabled, .gravacao-pausar:disabled { opacity: .5; cursor: wait; }
.gravacao-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--erro); flex: none; animation: gravacao-pulso 1.1s ease-in-out infinite; }
.gravacao.pausada .gravacao-ponto { animation: none; opacity: .45; }
.gravacao.pedindo .gravacao-ponto { background: var(--texto-3); }
.gravacao-tempo { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 42px; }
.gravacao-limite { color: var(--texto-3); font-size: 11.5px; }
.gravacao-aviso { flex: 1; min-width: 0; font-size: 12px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes gravacao-pulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .gravacao-ponto { animation: none; } }
@media (max-width: 760px) { .gravacao-limite { display: none; } }

/* ---------- escolha do microfone (microfone.js / escolher-microfone.js) ---------- */
.composer-linha .botao-mic-escolher { flex: none; width: 22px; margin-left: -8px; color: var(--texto-3); }
.composer-linha .botao-mic-escolher svg { width: 14px; height: 14px; }
.composer-linha .botao-mic-escolher:hover, .composer-linha .botao-mic-escolher[aria-expanded="true"] { color: var(--ouro); }
.composer-linha.tem-texto .botao-mic-escolher { display: none; }

.mic-menu {
  position: fixed; z-index: 40; max-height: min(60vh, 360px); overflow-y: auto; padding: 6px;
  background: var(--fundo-2); color: var(--texto); border: 1px solid var(--borda-forte); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.mic-menu-titulo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-3); padding: 4px 8px 6px; }
.mic-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 8px;
  border: 0; border-radius: 7px; background: transparent; color: var(--texto); text-align: left; cursor: pointer; font-size: 13px;
}
.mic-menu-item:hover, .mic-menu-item:focus-visible { background: var(--marca-fundo); outline: none; }
.mic-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--ouro); }
.mic-menu-item[aria-checked="true"] { color: var(--marca); font-weight: 600; }
.mic-menu-item.ausente .mic-menu-nome { color: var(--texto-3); }
.mic-menu-marca { width: 14px; flex: none; text-align: center; }
.mic-menu-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mic-menu-liberar { color: var(--texto-2); font-style: italic; }
.mic-menu-dica { font-size: 11.5px; color: var(--texto-3); padding: 6px 8px 2px; border-top: 1px solid var(--borda); margin-top: 4px; }

/* barra de gravação: nome do microfone + mini medidor (--nivel 0..1, posto pelo medidor-nivel.js) */
.gravacao-mic { max-width: 30%; font-size: 11.5px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gravacao-mic:empty { display: none; }
.gravacao-nivel { flex: none; width: 42px; height: 6px; border-radius: 3px; background: var(--borda); overflow: hidden; }
.gravacao-nivel i { display: block; height: 100%; width: 100%; background: var(--ok); transform-origin: left; transform: scaleX(var(--nivel, 0)); transition: transform .08s linear; }
.gravacao.pausada .gravacao-nivel i { background: var(--texto-3); }
@media (prefers-reduced-motion: reduce) { .gravacao-nivel i { transition: none; } }
@media (max-width: 760px) { .gravacao-mic { display: none; } .gravacao-nivel { width: 28px; } }