/* MÃOS LIVRES e FOTO/ANEXOS do Claudinho (registro 415, 02/11/2026 23h08 e 23h09).
   Botão de falar: VERMELHO parado, VERDE ouvindo. Botões de câmera e anexo ao lado, grandes. */
.botao-falar.escuta-desligada { background: radial-gradient(circle at 35% 30%, #FF8A80, #EF4444 60%, #B91C1C); }
.botao-falar.escuta-ligada { background: radial-gradient(circle at 35% 30%, #7CF0A4, var(--verde) 60%, #138A40); box-shadow: 0 0 0 6px rgba(34,197,94,.28), 0 8px 22px rgba(0,0,0,.3); }
.maos-livres.estado-ouvindo .botao-falar.escuta-ligada { animation: respirar 1s infinite; box-shadow: 0 0 0 10px rgba(34,197,94,.4), 0 8px 22px rgba(0,0,0,.3); }
.estado-ouvindo .botao-falar.escuta-desligada { background: radial-gradient(circle at 35% 30%, #FF8A80, #EF4444 60%, #B91C1C); }
.estado-pensando .botao-falar.escuta-ligada, .estado-falando .botao-falar.escuta-ligada { opacity: 1; }
#rotulo-falar { font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }

.botoes .espaco { display: none; }
.botoes { justify-content: center; gap: 10px; }
.botao-anexo {
  width: 64px; height: 64px; border-radius: 20px; border: 3px solid rgba(255,255,255,.8);
  background: rgba(255,255,255,.14); color: #fff; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; padding: 0; font: inherit; -webkit-tap-highlight-color: transparent;
}
.botao-anexo svg { width: 30px; height: 30px; }
.botao-anexo span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.botao-anexo:active { transform: scale(.94); background: rgba(255,255,255,.28); }
#botao-camera { background: rgba(255,216,77,.22); border-color: var(--amarelo); }

.anexo-bolha { margin: -3px -6px 6px; }
.anexo-bolha img, .anexo-bolha video { display: block; width: 100%; max-width: 260px; max-height: 260px; object-fit: cover; border-radius: 14px; background: rgba(0,0,0,.15); }
.anexo-ficha { font-weight: 800; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.55); }
.bolha.tutu:has(.anexo-bolha) span { display: block; }
@media (max-width: 360px) { .botao-anexo { width: 56px; height: 56px; } .botao-anexo svg { width: 26px; height: 26px; } }