/* ════════════════════════════════════════════════════════
   A conversa do WhatsApp dentro de outra tela, numa coluna
   (`conversa-embutida.ts`): ao lado do quadro de Cirurgias e
   à direita da ficha do paciente. O módulo põe a classe
   `conversa-embutida` na coluna que o recebe, então a regra
   vale em qualquer uma. Os balões e o compositor são os de
   Conversas, em telas.css.
   ════════════════════════════════════════════════════════ */

.conversa-embutida { display: flex; flex-direction: column; min-height: 0; }
.conversa-embutida .conversa-corpo { flex: 1; min-height: 0; overflow-y: auto; }
.conversa-embutida .balao { max-width: 88%; }
.conversa-embutida .detalhe-topo { align-items: flex-start; gap: .6rem; }
.conversa-embutida .detalhe-titulo { min-width: 0; }
.conversa-embutida .detalhe-titulo h2 { font-size: 1.25rem; overflow-wrap: normal; }
.conversa-embutida .detalhe-acoes { flex: none; }

/* Na ficha do paciente a conversa abre em #coluna-acao, que nasce com a
   largura de um formulário (20rem). Fio de mensagens precisa de mais: enquanto
   ela está lá, a terceira coluna ganha o mesmo peso da ficha. */
@media (min-width: 1181px) {
  .pacientes-area.com-acao.com-detalhe:has(> #coluna-acao.conversa-embutida) {
    grid-template-columns: minmax(16rem, .55fr) minmax(0, 1fr) minmax(24rem, 1fr);
  }
}