/* app/assets/stylesheets/conversas.css
   A inbox, tela unica (Fase 4, redesenho): filas+lista | conversa | contato,
   nas tres colunas que a spec original desenhou (§10) e que o Zenvia (a
   referencia que a equipe ja usa) tambem usa. Paleta verde-e-branca desde o
   redesenho de 08/09 (antes era "Vivid Nightfall", escura/roxa) -- ver
   marca_tokens.css para o porque da troca. So consome token semantico
   (--bc-*), nunca --vn-* nem hex novo -- mesma regra do resto do projeto.

   Familia visual: os mesmos cantos (`--bc-raio`), a mesma borda fina
   (`--bc-line`) e o mesmo degrau de superficie (`--bc-surface` /
   `--bc-surface-2`) que painel.css e dono.css ja usam em `.painel__tabela`
   e `.painel__vazio` -- a inbox e a MESMA casa, nao um estilo a parte. */

/* ── a pagina inteira, sem scroll duplo ──────────────────────────────────
   `.painel__conteudo` (painel.css) normalmente e um documento que rola com
   a pagina (padding generoso, max-width de leitura). A inbox e o oposto:
   uma ferramenta que fica aberta o dia inteiro, com SO a coluna do meio
   rolando -- por isso body e conteudo ganham altura FIXA de viewport (nao
   min-height) e overflow:hidden aqui, escopado com `:has()` para nao
   affectar nenhuma outra tela do painel. */
body.painel:has(.conversas) {
  height: 100dvh;
  overflow: hidden;
}

body.painel:has(.conversas) .painel__conteudo {
  max-width: none;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
  /* Coluna: o grid de tres colunas (`.conversas`) ocupa a altura toda; o
     cabecalho da pagina saiu em 23/10 (as acoes foram para a barra do topo). */
  display: flex;
  flex-direction: column;
}

/* Na inbox o conteudo vai de borda a borda (padding 0) e as colunas tem a propria margem de 30px: a faixa da queda do tempo real
   (A3, 09/11/2026) acompanha a mesma margem, em vez de encostar na lateral e na borda da janela. */
body.painel:has(.conversas) .painel__tempo-real {
  flex: 0 0 auto;
  margin: 0 30px 12px;
}

.conversas__pagina {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

/* ── acoes do topo ────────────────────────────────────────────────────────
   O cabecalho da pagina ("Conversas 1642", legenda) SAIU em 23/10, a pedido do Gustavo,
   para a lista subir; "Conversas" e o numero ja estao no caminho do topo e na aba
   "Em aberto". As acoes moram agora na barra do topo (z_vidro.css: .painel__barra-acoes). */

.conversas__estado-do-numero {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  color: var(--bc-ink-mut);
  font-size: .8rem;
}

.conversas__status-ponto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bc-ink-faint);
}

.conversas__status-ponto--ativo { background: var(--bc-ok); }

/* ── grid de tres colunas ─────────────────────────────────────────────── */

/* `conversas/_filas_e_lista` renderiza DOIS elementos irmaos
   (`.conversas__topo-coluna1` -- busca + filas -- e `.conversas__lista`),
   nao um container so -- os ids que os broadcasts de Turbo Stream miram
   (Task 11) pedem exatamente essa forma. Por isso a coluna 1 nao e uma
   "coluna" de verdade no grid: e DUAS linhas dentro da MESMA coluna 1 (topo
   em cima, lista embaixo), e `.conversas__aberta` (o turbo-frame com a
   conversa + contato) e o unico item da coluna 2, esticado pelas DUAS
   linhas (`grid-row: 1 / -1`). As colunas 2 e 3 do mockup (conversa |
   contato) nascem DENTRO do frame, no grid interno de `.conversa__corpo`
   mais abaixo -- nao aqui. %>
   Um grid com 3 colunas aqui e so 3 itens de verdade (topo, lista, aberta)
   sobrava um item sem lugar e empurrava tudo: o defeito medido no primeiro
   screenshot (conversa inteira espremida em 18rem). */
.conversas {
  display: grid;
  grid-template-columns: 20rem 1fr;
  grid-template-rows: auto 1fr;
  flex: 1 1 auto;
  min-height: 0;
}

/* ── coluna 1: busca + filas + lista ──────────────────────────────────── */

.conversas__topo-coluna1 {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem .85rem .75rem;
  border-bottom: 1px solid var(--bc-line);
}

.conversas__busca {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .7rem;
  color: var(--bc-ink-mut);
  background: var(--bc-surface-2);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
}

.conversas__busca-icone { flex: 0 0 auto; width: 17px; height: 17px; }

.conversas__busca-campo {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  color: var(--bc-ink);
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  font-size: .85rem;
}

.conversas__busca-campo::placeholder { color: var(--bc-ink-faint); }

/* Fileira HORIZONTAL de pilulas (redesenho de layout, 08/09 -- referencia
   visual trazida pelo Gustavo), nao mais uma coluna vertical: cada fila e
   um botao pequeno lado a lado, como um seletor segmentado. */
.conversas__filas {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.conversas__fila {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .7rem;
  color: var(--bc-ink-mut);
  border-radius: 999px;
  text-decoration: none;
  font-size: .82rem; font-weight: 600;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
}

.conversas__fila:hover { color: var(--bc-ink); background: var(--bc-surface-2); }

.conversas__fila--atual {
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
}

.conversas__fila--atual:hover { color: var(--bc-primary-ink); background: var(--bc-primary); }

/* ── filtros da coluna 1 (so admin): grupo, atendente e PERIODO ───────────
   Refeitos em 28/10 (pedido do Gustavo: "muito generico", e as datas para o
   chefe ver as conversas dos dias). Antes eram dois <select> crus do navegador;
   agora tem a MESMA pele do campo de busca logo acima (`.conversas__busca`, ja
   com os ajustes de z_refinamento.css: fundo --bc-bg, canto de 9px, borda
   --bc-line e, no foco, borda --bc-focus com anel de 3px). Os valores estao
   escritos aqui, e nao herdados, porque z_refinamento so alcanca a busca.

   A PELE MORA NO ENVOLTORIO (`.conversas__campo`), nao no controle: o <select> e
   o <input type="date"> ficam sem borda nem fundo, dentro dele. E o que deixa
   o foco (`:focus-within`), o hover e a seta desenhada com `::after` valerem
   igual para os dois, e o texto cortar com reticencias sem a seta passar por
   cima. Tokens --bc-* (solidos) e nao os de vidro --vd-*: a inbox e opaca de
   proposito. Sem imagem e sem `style=""`: a CSP so deixa `img-src 'self'` e
   `style-src 'self'`, entao a seta e um canto de caixa girado, nao um data: URI.

   COMPACTO (28/10): sao DUAS linhas de campo da mesma altura (2,5rem) e mais
   nada -- os dois seletores lado a lado e UM controle "Periodo" embaixo, que e
   um <details> fechado (`.conversas__periodo`). A 1280px de tela a coluna tem
   265px e as abas de fila ja quebram em varias linhas; a versao anterior
   (datas, "Aplicar" e a linha de estado sempre a mostra) media 204px e deixava
   so dois cards na lista. O painel com as datas so abre quando a pessoa vai
   editar o periodo.

   Largura: a coluna tem 310px (z_refinamento.css; 265px ate 1280px de tela,
   240px ate 1050px; a tela inteira no celular). Os dois seletores dividem a
   linha ao meio (`minmax(0, 1fr)` e o que deixa um nome comprido encolher em
   vez de empurrar o vizinho para fora da coluna). No painel aberto as duas
   datas tambem dividem a linha, mas "dd/mm/aaaa" mais o icone do calendario nao
   cabem em meia linha de uma coluna MUITO estreita (menos de 14rem de miolo: a
   de 240px, entre 761px e 1050px de tela): ai elas empilham, cada uma com o
   rotulo ao lado (`@container`, abaixo) -- a medida e a da COLUNA, nao a da
   tela, porque os tres tamanhos dela vem de media queries de outro arquivo.
   Medido em 28/10: com 111px por campo (miolo de 233px, a coluna de 265px a
   1280px de tela) a data cabe inteira; com 98px (miolo de 208px) o ano sai
   cortado ("10/24/202").
   No celular a fonte do campo sobe para 1rem (o Safari da zoom abaixo disso) e
   o limite do empilhamento sobe junto.

   `.conversas__campo--ativo` (escrito pelo servidor) so pinta o que esta
   filtrando; quem filtra e o servidor. */
.conversas__filtros {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  /* O calendario nativo (e a lista do <select>) desenham no esquema de cores da
     pagina: sem isto o icone do calendario ficava escuro sobre o fundo escuro. */
  color-scheme: light;
  container: filtros-conversas / inline-size;
}

body.painel[data-theme="escuro"] .conversas__filtros { color-scheme: dark; }

.conversas__seletores,
.conversas__datas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.conversas__campo {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 2.5rem;
  color: var(--bc-ink);
  background: var(--bc-bg);
  border: 1px solid var(--bc-line);
  border-radius: 9px;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.conversas__campo:hover {
  border-color: color-mix(in srgb, var(--bc-primary) 40%, var(--bc-line));
}

.conversas__campo--ativo {
  background: color-mix(in srgb, var(--bc-primary) 7%, var(--bc-bg));
  border-color: color-mix(in srgb, var(--bc-primary) 55%, var(--bc-line));
}

/* O hover (0,2,0) vence o "ativo" (0,1,0) na especificidade; sem esta, passar o
   mouse num filtro ligado CLAREAVA a borda dele em vez de reforca-la. */
.conversas__campo--ativo:hover {
  border-color: color-mix(in srgb, var(--bc-primary) 70%, var(--bc-line));
}

/* Depois do hover e do "ativo", de proposito: com o foco na caixa a borda
   tem de ser a do foco, qualquer que seja o estado dela. O contorno e para quem
   navega pelo teclado (`:focus-visible`); o clique do mouse so ganha a borda e
   o anel, como a busca. */
.conversas__campo:focus-within {
  border-color: var(--bc-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc-focus) 10%, transparent);
}

.conversas__campo:has(:focus-visible) {
  outline: 2px solid var(--bc-focus);
  outline-offset: 1px;
}

.conversas__seletor,
.conversas__data {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: inherit;
  outline: none;
  font: inherit; font-size: .82rem;
  cursor: pointer;
}

.conversas__seletor {
  appearance: none;
  -webkit-appearance: none;
  /* A direita fica livre para a seta, que e desenhada por cima. O texto longo
     corta com reticencias antes de chegar nela. */
  padding: 0 1.9rem 0 .65rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* A lista que o navegador abre: sem isto, no tema escuro as opcoes herdariam o
   fundo transparente do controle e ficariam ilegiveis em alguns navegadores. */
.conversas__seletor option {
  color: var(--bc-ink);
  background: var(--bc-surface);
}

/* A SETA: o canto de baixo-direita de uma caixa pequena, girado. Nao captura o
   clique (`pointer-events: none`), que cai no <select> por baixo. */
.conversas__campo--seletor::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .85rem;
  width: .42rem;
  height: .42rem;
  border-right: 2px solid var(--bc-ink-mut);
  border-bottom: 2px solid var(--bc-ink-mut);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: border-color 120ms ease;
}

.conversas__campo--seletor:hover::after,
.conversas__campo--seletor:focus-within::after { border-color: var(--bc-ink); }

.conversas__campo--seletor.conversas__campo--ativo::after { border-color: var(--bc-primary); }

/* ── periodo: um <details> com a mesma pele dos seletores ─────────────── */

/* A linha do periodo: o <details> e o "Limpar", IRMAOS. O "Limpar" fica fora da
   <summary> (link dentro de <summary> e controle aninhado) e e posto POR CIMA
   do lado direito dela por `position: absolute`; `top: 0` ancora na linha da
   <summary> e nao no painel, que e quem cresce quando abre. */
.conversas__periodo-linha { position: relative; }

/* A <summary> e um `.conversas__campo` (altura, borda, fundo, hover, foco).
   `display: flex` ja tira o triangulo nativo no Chrome; o resto tira nos
   outros. Texto e icone a esquerda, a seta (`::after`) a direita. */
.conversas__periodo-resumo {
  gap: .5rem;
  padding: 0 1.9rem 0 .65rem;
  font-size: .82rem; font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}

.conversas__periodo-resumo::-webkit-details-marker { display: none; }
.conversas__periodo-resumo::marker { content: ""; }

/* O foco do teclado: o `:has(:focus-visible)` do campo olha para dentro, e aqui
   o foco esta na PROPRIA <summary>. */
.conversas__periodo-resumo:focus-visible {
  outline: 2px solid var(--bc-focus);
  outline-offset: 1px;
}

/* Com periodo a direita tambem leva o "Limpar" (irmao, por cima): a seta
   continua na ponta e o texto corta antes de chegar nele. */
.conversas__periodo--ativo .conversas__periodo-resumo { padding-right: 4.9rem; }

.conversas__periodo-valor {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.conversas__campo--ativo .conversas__periodo-valor { color: var(--bc-primary); font-weight: 700; }

/* A seta, a mesma dos seletores; vira para cima com o painel aberto. */
.conversas__periodo-resumo::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .85rem;
  width: .42rem;
  height: .42rem;
  border-right: 2px solid var(--bc-ink-mut);
  border-bottom: 2px solid var(--bc-ink-mut);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: border-color 120ms ease, transform 160ms ease;
}

.conversas__periodo[open] > .conversas__periodo-resumo::after { transform: translateY(-30%) rotate(-135deg); }

.conversas__periodo-resumo:hover::after,
.conversas__periodo-resumo:focus-within::after { border-color: var(--bc-ink); }

.conversas__campo--ativo.conversas__periodo-resumo::after { border-color: var(--bc-primary); }

/* O icone de calendario, so de CSS (sem imagem): uma caixa com a barra do topo
   e duas argolas. Herda a cor do texto. */
.conversas__periodo-icone {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: .95rem; height: .85rem;
  margin-top: .1rem;
  border: 1.5px solid var(--bc-ink-mut);
  border-radius: 3px;
}

.conversas__periodo-icone::before {
  content: "";
  position: absolute;
  top: 2px; left: 0; right: 0;
  border-top: 1.5px solid var(--bc-ink-mut);
}

.conversas__periodo-icone::after {
  content: "";
  position: absolute;
  top: -5px; left: 2px;
  width: 1.5px; height: 4px;
  background: var(--bc-ink-mut);
  border-radius: 1px;
  box-shadow: 6px 0 0 var(--bc-ink-mut);
}

.conversas__campo--ativo .conversas__periodo-icone,
.conversas__campo--ativo .conversas__periodo-icone::before { border-color: var(--bc-primary); }

.conversas__campo--ativo .conversas__periodo-icone::after {
  background: var(--bc-primary);
  box-shadow: 6px 0 0 var(--bc-primary);
}

/* O "Limpar", sobre a linha da <summary> (`right` deixa a seta de fora). A
   altura e a do campo, para o toque cair no link e nao na <summary> por baixo. */
.conversas__limpar {
  position: absolute;
  z-index: 1;
  top: 0; right: 1.9rem;
  display: flex;
  align-items: center;
  height: 2.5rem;
  padding: 0 .3rem;
  color: var(--bc-ink-mut);
  border-radius: 6px;
  font-size: .75rem; font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.conversas__limpar:hover { color: var(--bc-ink); }

.conversas__limpar:focus-visible {
  outline: 2px solid var(--bc-focus);
  outline-offset: -2px;
}

/* ── o painel: De / Ate, a frase e o Aplicar ──────────────────────────── */
.conversas__periodo-painel {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-top: .55rem;
}

.conversas__data-bloco {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}

.conversas__campo-rotulo {
  padding-left: .15rem;
  color: var(--bc-ink-mut);
  font-size: .7rem; font-weight: 700;
}

.conversas__data {
  padding: 0 .35rem 0 .65rem;
  font-variant-numeric: tabular-nums;
}

/* O icone do calendario fica discreto e acende com o hover do campo. */
.conversas__data::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .6;
  transition: opacity 120ms ease;
}

.conversas__campo:hover .conversas__data::-webkit-calendar-picker-indicator,
.conversas__data:focus-visible::-webkit-calendar-picker-indicator { opacity: 1; }

/* Coluna estreita: as duas datas empilham, com o rotulo ao lado do campo. */
@container filtros-conversas (max-width: 14rem) {
  .conversas__datas { grid-template-columns: minmax(0, 1fr); gap: .4rem; }

  .conversas__data-bloco {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
  }

  .conversas__data-bloco .conversas__campo-rotulo { flex: 0 0 1.9rem; padding-left: 0; }
  .conversas__data-bloco .conversas__campo { flex: 1 1 auto; }
}

/* A frase (visivel, e a que as datas apontam com `aria-describedby`) e o Aplicar
   dividem a ultima linha; a frase cede e quebra, o botao nao. */
.conversas__periodo-rodape {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .6rem;
}

.conversas__periodo-ajuda {
  flex: 1 1 7rem;
  min-width: 0;
  margin: 0;
  color: var(--bc-ink-mut);
  font-size: .7rem; line-height: 1.3;
}

/* O "Aplicar" so vale para as datas (grupo e atendente enviam sozinhos). O
   foco visivel e o de `.painel button:focus-visible` (z_refinamento.css), o
   mesmo de todo botao do painel. */
.conversas__aplicar {
  flex: 0 0 auto;
  height: 2rem;
  padding: 0 1rem;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border: 1px solid transparent;
  border-radius: 9px;
  font: inherit; font-size: .78rem; font-weight: 700;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease;
}

.conversas__aplicar:hover { background: var(--bc-primary-hover); }
.conversas__aplicar:active { transform: translateY(1px); }

/* Os avisos ficam FORA do painel, visiveis com ele fechado. */
.conversas__periodo-aviso {
  margin: 0;
  color: var(--bc-warn);
  font-size: .72rem; font-weight: 600;
}

.conversas__fila-contagem {
  padding: .05rem .4rem;
  color: inherit;
  background: color-mix(in oklab, currentColor 16%, transparent);
  border-radius: 999px;
  font-family: var(--bc-fonte-mono);
  font-size: .7rem; font-weight: 700;
}

.conversas__lista {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: .5rem;
}

.conversas__lista .painel__vazio {
  margin: .75rem;
  font-size: .85rem;
  text-align: center;
}

/* O aviso de lista vazia vem do servidor, mas o card que chega em tempo real
   (Turbo Stream, `prepend` em #conversas-lista) entra AO LADO dele -- e o
   aviso ficava embaixo do card, dizendo "nenhum atendimento" para uma lista
   que acabou de ganhar um. Sempre foi assim; passou a aparecer em 06/10,
   quando a fila "Encerradas" comecou a nascer vazia todo dia. So aparencia:
   com qualquer irmao na lista o aviso some, e volta se o card sair. */
.conversas__lista .painel__vazio:not(:only-child) {
  display: none;
}

/* O aviso de corte da lista com periodo (teto de 500, 28/10): vem DEPOIS dos
   cards, entao nao pode ser `.painel__vazio` (a regra acima o esconderia). */
.conversas__lista-aviso {
  margin: .75rem;
  color: var(--bc-ink-mut);
  font-size: .8rem; line-height: 1.4;
  text-align: center;
}

.conversas__item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .6rem .6rem;
  border-radius: var(--bc-raio);
  text-decoration: none;
  color: var(--bc-ink);
  transition: background-color 120ms ease;
}

.conversas__item:hover { background: var(--bc-surface-2); }

/* Item ativo: a mesma cor de acao do resto do painel (`.painel__nav-item--
   atual`), para "qual conversa estou vendo agora" ficar obvio sem ler o
   texto -- mesma linguagem visual das abas de fila acima. */
/* A conversa esta carregando (clique num card): o Turbo poe `aria-busy` no frame. Sem isto o clique nao dava sinal ate a conversa
   nova chegar (achado de UI/UX, 09/11/2026). */
turbo-frame#conversa_aberta[aria-busy="true"] {
  opacity: .55;
  transition: opacity 150ms ease 120ms;
}

.conversas__item--atual,
.conversas__item--atual:hover {
  background: color-mix(in oklab, var(--bc-primary) 24%, var(--bc-surface));
}

.conversas__item-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px; height: 34px;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border-radius: 50%;
  font-size: .82rem; font-weight: 700;
}

.conversas__item-corpo {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  flex: 1 1 auto;
  min-width: 0;
}

.conversas__item-linha1,
.conversas__item-linha2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

/* 700, nao 600: nome de contato e o rotulo principal da linha -- reforco
   de peso pedido no redesenho de 08/09 (paleta clara precisa de mais peso
   que a escura para o olho achar o "titulo" da linha de primeira). */
.conversas__item-nome {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700; font-size: .88rem;
  color: var(--bc-ink);
}

.conversas__item-hora {
  flex: 0 0 auto;
  color: var(--bc-ink-faint);
  font-family: var(--bc-fonte-mono);
  font-size: .7rem;
}

.conversas__item-atendente {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--bc-ink-mut);
  font-size: .76rem;
}

.conversas__item-badge {
  flex: 0 0 auto;
  padding: .05rem .45rem;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border-radius: 999px;
  font-family: var(--bc-fonte-mono);
  font-size: .7rem; font-weight: 700;
}

/* ── coluna 2: a conversa aberta ──────────────────────────────────────── */

.conversas__aberta {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--bc-line);
}

.conversas__vazio {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--bc-ink-faint);
  font-size: .95rem;
}

.conversa {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.conversa__topo {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: 0 0 auto;
  padding: .95rem 1.25rem;
  border-bottom: 1px solid var(--bc-line);
}

/* So aparece no mobile (regra abaixo) -- desktop sempre mostra a lista ao
   lado, entao "voltar" nao tem o que fazer la. */
.conversa__voltar {
  display: none;
  flex: 0 0 auto;
  color: var(--bc-ink-mut);
  text-decoration: none;
}

.conversa__voltar svg { width: 20px; height: 20px; display: block; }

.conversa__topo-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border-radius: 50%;
  font-size: .92rem; font-weight: 700;
}

.conversa__topo-identidade {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  flex: 1 1 auto;
  min-width: 0;
}

.conversa__topo h1 {
  margin: 0;
  color: var(--bc-ink);
  font-size: 1rem; font-weight: 700;
}

.conversa__topo-telefone {
  color: var(--bc-ink-mut);
  font-family: var(--bc-fonte-mono);
  font-size: .76rem;
}

.conversa__janela {
  flex: 0 0 auto;
  padding: .3rem .65rem;
  color: var(--bc-ink-mut);
  background: var(--bc-surface-2);
  border-radius: 999px;
  font-family: var(--bc-fonte-mono);
  font-size: .78rem; font-weight: 600;
  white-space: nowrap;
}

.conversa__janela--fechada { color: var(--bc-danger); }
/* Na ULTIMA HORA (janela_controller.js): atencao, nao alarme -- ainda da para responder em texto livre. A tinta e a do tema e o fundo
   ambar translucido, como o aviso da janela fechada: ambar puro como cor de texto media pouco no claro. */
.conversa__janela--acabando {
  color: var(--bc-ink);
  background: color-mix(in srgb, var(--bc-warn) 24%, var(--bc-surface-2));
  box-shadow: inset 0 0 0 1px var(--bc-warn);
}
/* Janela NULA (29/09): o cliente nunca escreveu. Neutro, nao alarme --
   e espera, nao falha. */
.conversa__janela--aguardando { color: var(--bc-ink-mut); }

/* Fechamento de atendimento (15/09). Botao no cabecalho, mesma familia
   visual do resto do topo (nunca cor de perigo -- encerrar nao e uma acao
   destrutiva, e um passo normal do atendimento, ao contrario de "Apagar"
   em Grupos/Templates). */
.conversa__encerrar,
.conversa__guia-ddd-botao {
  flex: 0 0 auto;
  padding: .4rem .9rem;
  color: var(--bc-ink);
  background: var(--bc-surface-2);
  border: 1px solid var(--bc-line);
  border-radius: 999px;
  font-size: .82rem; font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.conversa__encerrar:hover,
.conversa__guia-ddd-botao:hover { background: var(--bc-line-soft); }

.conversa__encerrar--desabilitado {
  color: var(--bc-ink-mut);
  cursor: not-allowed;
}

.conversa__encerrar-modal,
.conversa__guia-ddd {
  width: min(360px, calc(100vw - 2rem));
  padding: 1.25rem;
  color: var(--bc-ink);
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: 14px;
  box-shadow: var(--bc-shadow);
}

.conversa__encerrar-modal::backdrop,
.conversa__guia-ddd::backdrop { background: rgb(0 0 0 / .45); }

.conversa__encerrar-titulo,
.conversa__guia-ddd-titulo {
  margin: 0 0 .85rem;
  font-size: 1rem; font-weight: 700;
}

.conversa__encerrar-motivos {
  display: grid;
  gap: .5rem;
  max-height: 45vh;
  margin: 0 0 1.1rem;
  padding: 0;
  overflow-y: auto;
  border: 0;
}

.conversa__encerrar-motivo {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .88rem;
}

.conversa__encerrar-acoes,
.conversa__guia-ddd-acoes {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
}

.conversa__encerrar-acoes button[type="button"],
.conversa__guia-ddd-acoes button[type="button"] {
  color: var(--bc-ink-mut);
  background: none;
  border: 0;
  cursor: pointer;
}

.conversa__encerrar-acoes input[type="submit"] {
  padding: .45rem 1rem;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

.conversa__encerrar-acoes input[type="submit"]:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Guia de DDD (11/11/2026): o dialogo e as acoes sao as `.conversa__encerrar-*` acima; aqui so o que e do guia -- a busca e a tabela com rolagem
   propria (67 linhas). 16px no campo para o Safari do iPhone nao dar zoom ao focar. */
.conversa__guia-ddd { width: min(560px, calc(100vw - 2rem)); } /* depois do grupo acima: esta largura vence a de 360px */
.conversa__guia-ddd-rotulo { display: block; margin: 0 0 .3rem; font-size: .75rem; color: var(--bc-ink-mut); }
.conversa__guia-ddd-busca {
  width: 100%; box-sizing: border-box; margin: 0 0 .8rem; padding: .55rem .7rem;
  color: var(--bc-ink); background: var(--bc-surface-2);
  border: 1px solid var(--bc-campo-borda, var(--bc-line)); border-radius: 8px;
  font: inherit; font-size: 1rem;
}
.conversa__guia-ddd-lista { max-height: 45vh; overflow-y: auto; border: 1px solid var(--bc-line); border-radius: 8px; }
.conversa__guia-ddd-lista:focus-visible { outline: 2px solid var(--bc-focus); outline-offset: 1px; }
.conversa__guia-ddd-tabela { width: 100%; border-collapse: collapse; font-size: .85rem; }
.conversa__guia-ddd-tabela th, .conversa__guia-ddd-tabela td {
  padding: .4rem .6rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bc-line);
}
.conversa__guia-ddd-tabela thead th { position: sticky; top: 0; background: var(--bc-surface); font-size: .72rem; color: var(--bc-ink-mut); }
.conversa__guia-ddd-tabela tbody th { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.conversa__guia-ddd-tabela tr[hidden] { display: none; }
.conversa__guia-ddd-vazio { margin: .8rem 0 0; font-size: .85rem; color: var(--bc-ink-mut); }
.conversa__guia-ddd-vazio[hidden] { display: none; }

/* Lead para o CRM (01/10). O dialogo e as acoes sao as `.conversa__encerrar-*`
   acima; aqui so o que este formulario tem a mais: campos de texto empilhados
   e as duas linhas so de leitura (telefone e SDR). */
.conversa__lead-campos {
  display: grid;
  gap: .35rem;
  margin: 0 0 1.1rem;
  font-size: .85rem;
}

.conversa__lead-campos label {
  margin-top: .45rem;
  color: var(--bc-ink-mut);
  font-size: .78rem; font-weight: 600;
}

.conversa__lead-campos input,
.conversa__lead-campos textarea {
  width: 100%;
  padding: .45rem .6rem;
  color: var(--bc-ink);
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: 8px;
  font: inherit;
}

.conversa__lead-fixos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .75rem;
  margin: .6rem 0 0;
}

.conversa__lead-fixos dt { color: var(--bc-ink-mut); }
.conversa__lead-fixos dd { margin: 0; font-weight: 600; }

/* "Encerrar todas" (17/09). Nenhuma classe nova de MODAL aqui de proposito:
   o dialogo em massa usa exatamente as `.conversa__encerrar-*` acima, para
   nao virar um segundo desenho da mesma coisa. So o que a versao em massa
   tem a mais: o lugar na barra do topo da inbox e o paragrafo do freio. */
.conversas__acoes-do-topo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .9rem;
}

.conversas__massa { display: inline-flex; }

.conversa__encerrar-aviso,
.conversa__guia-ddd-aviso {
  margin: 0 0 1rem;
  color: var(--bc-ink-mut);
  font-size: .85rem;
  line-height: 1.45;
}

.conversa__encerrar-aviso strong,
.conversa__guia-ddd-aviso strong { color: var(--bc-ink); }

.conversa__encerrar-quebra {
  margin: -.5rem 0 1rem;
  padding-left: 1.1rem;
  color: var(--bc-ink-mut);
  font-size: .85rem;
  line-height: 1.45;
}

/* EXATAMENTE dois filhos diretos: `.conversa__thread` e `.conversa__contato`
   -- e o que corrige o bug de layout (o grid de 2 colunas tinha TRES
   filhos, e o terceiro furava para uma segunda linha do grid). */
.conversa__corpo {
  display: grid;
  grid-template-columns: 1fr 14rem;
  flex: 1 1 auto;
  min-height: 0;
}

.conversa__thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--bc-line-soft);
}

.conversa__mensagens {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

.conversa__separador-data {
  display: flex;
  justify-content: center;
  margin: .5rem 0;
}

.conversa__separador-data span {
  padding: .2rem .7rem;
  color: var(--bc-ink-mut);
  background: var(--bc-surface-2);
  border-radius: 999px;
  font-family: var(--bc-fonte-mono);
  font-size: .72rem; font-weight: 600;
}

.conversa__bolha {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  max-width: 68%;
  padding: .55rem .75rem;
  border-radius: var(--bc-raio);
  font-size: .9rem;
  line-height: 1.4;
}

/* So a bolha do CLIENTE ganha contorno/sombra: no tema claro o fundo do
   container e uma lavanda quase branca (--bc-surface-2) e a bolha e
   branca pura (--bc-bolha-eles) -- a diferenca e pequena demais pra dar
   contraste sozinha, e a bolha ficava "apagada". `--bc-line` (mais forte
   que o `--bc-line-soft` usado antes) mais uma sombra leve resolvem sem
   mudar a cor da bolha -- mesmo truque de cartao de chat que WhatsApp/Zenvia
   usam. `--saida` (roxa) e `--nota` (ambar) ja tem cor propria de sobra pra
   se destacar do fundo nos dois temas, entao ficam como estavam. */
.conversa__bolha--entrada {
  align-self: flex-start;
  color: var(--bc-ink);
  background: var(--bc-bolha-eles);
  border: 1px solid var(--bc-line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.conversa__bolha--saida {
  align-self: flex-end;
  color: var(--bc-primary-ink);
  background: var(--bc-bolha-nos);
}

.conversa__bolha--sistema,
.conversa__bolha--nota {
  align-self: center;
  max-width: 85%;
  color: var(--bc-ink-mut);
  background: var(--bc-bolha-nota);
  border: 1px dashed var(--bc-line);
  font-size: .82rem;
  text-align: center;
}

/* O aviso do SISTEMA ("Conversa encerrada por ...", "puxada por ...") e uma linha discreta do fio, sem a caixa: so a NOTA de
   um colega fica na caixa ambar tracejada, com o rotulo "Nota interna" e o nome de quem a escreveu (10/11/2026). Antes os dois
   dividiam o mesmo bloco e nao se distinguiam. */
.conversa__bolha--sistema {
  background: transparent;
  border-color: transparent;
  font-style: italic;
}

.conversa__bolha-corpo {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ── midia recebida/enviada (imagem, figurinha, audio, video, documento) ─
   Mesma bolha, so o conteudo muda por `Mensagem#tipo`. Largura maxima fixa
   (nao um %) para nao estourar a bolha quando a midia tem proporcao larga
   -- a bolha em si ja tem `max-width: 68%` do container, isto e sobre a
   midia dentro dela. */
.conversa__midia-imagem {
  display: block;
  max-width: 260px;
  max-height: 320px;
  border-radius: 8px;
  object-fit: cover;
}

/* Foto que abre (22/10): o link so embrulha a miniatura. `fit-content` para
   a area clicavel ser a foto, nao a largura inteira da bolha; o tamanho
   continua sendo o da `.conversa__midia-imagem` acima. A lupa avisa que o
   clique amplia (abre a foto inteira numa aba). O anel de foco por teclado
   vem de `.painel a:focus-visible` (z_refinamento.css). */
.conversa__midia-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  border-radius: 8px;
  cursor: zoom-in;
}

/* Anel de foco mais perto da foto: os 4px de `.painel a:focus-visible`
   (z_refinamento.css) encostavam na legenda logo abaixo. O `.painel` na
   frente nao e enfeite: aquela regra pesa (0,2,1) e o z_refinamento.css
   carrega DEPOIS deste arquivo -- sem ele, os 4px ganhariam. */
.painel .conversa__midia-link:focus-visible {
  outline-offset: 2px;
}

.conversa__midia-video {
  display: block;
  max-width: 260px;
  border-radius: 8px;
}

.conversa__midia-audio {
  display: block;
  max-width: 260px;
}

.conversa__midia-documento {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  word-break: break-all;
}

.conversa__midia-documento-icone {
  flex: 0 0 auto;
}

.conversa__midia-pendente {
  color: color-mix(in oklab, currentColor 65%, transparent);
  font-style: italic;
}

/* O fim da bolha (conversas/_fim_da_mensagem): aviso de falha opcional + a linha da hora. Mora num bloco proprio para o
   status andar ao vivo (Mensagem#difundir_status!). O rodape continua alinhado a direita como antes; o aviso ocupa a
   largura da bolha, alinhado a esquerda, para ler como frase. */
.conversa__bolha-fim {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .2rem;
}

.conversa__bolha-rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .3rem;
  align-self: flex-end;
}

/* O motivo de "falhou" e o aviso de "sem confirmacao", em texto (antes: glifo de 12 px e `title`, que nao existe no
   toque). O TEXTO herda a cor da bolha (tinta, contraste alto nos dois temas); a cor de perigo/atencao vai na borda e no
   fundo translucido -- pintar o texto de vermelho/ambar sobre o verde da bolha media 3,5:1 ou menos. */
.conversa__bolha-aviso {
  align-self: stretch;
  margin: 0;
  padding: .3rem .5rem;
  border-left: 3px solid var(--conversa-aviso, var(--bc-danger));
  border-radius: 4px;
  background: color-mix(in oklab, var(--conversa-aviso, var(--bc-danger)) 14%, transparent);
  color: inherit;
  font-size: .78rem; font-weight: 600; line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
}

.conversa__bolha-aviso--falhou { --conversa-aviso: var(--bc-danger); }
.conversa__bolha-aviso--indeterminado { --conversa-aviso: var(--bc-warn); }

.conversa__bolha-hora {
  color: color-mix(in oklab, currentColor 65%, transparent);
  font-family: var(--bc-fonte-mono);
  font-size: .68rem;
}

/* Indicador de status (so na bolha `--saida`): o mesmo dado que o webhook de
   status da Meta ja grava em `Mensagem#situacao`, so nao aparecia na tela.
   Cor neutra ate confirmar leitura -- so "lida" ganha `--bc-ok`, como o
   duplo check azul do WhatsApp de verdade; "falhou" usa `--bc-danger`. */
.conversa__bolha-status {
  color: color-mix(in oklab, currentColor 65%, transparent);
  font-family: var(--bc-fonte-mono);
  font-size: .72rem; font-weight: 700;
  letter-spacing: -.02em;
}

/* "Mensagem automatica" (numero dedicado, RespostaAutomaticaJob): a mesma
   cor esmaecida da hora, para nao competir com o texto. */
.conversa__bolha-rotulo {
  color: color-mix(in oklab, currentColor 70%, transparent);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Na bolha de NOTA o fundo e creme/marrom e o texto ja e o tom esmaecido da nota: o rotulo herda esse tom, em vez de
   esmaecer de novo (a 70% ele media ~3:1 no claro). */
.conversa__bolha--nota .conversa__bolha-rotulo { color: inherit; }

/* O aviso do admin acima do campo de resposta, em conversa de OUTRO atendente (09/11/2026): a mesma cor esmaecida dos
   textos de apoio da tela, sem competir com o campo. */
.conversa__composer-aviso {
  margin: 0;
  padding: .55rem .9rem 0;
  color: var(--bc-ink-soft);
  font-size: .82rem;
}

.conversa__bolha-status--lida { color: var(--bc-ok); }
.conversa__bolha-status--falhou { color: var(--bc-danger); font-weight: 700; }
.conversa__bolha-status--indeterminado { color: var(--bc-warn); font-weight: 700; }

.conversa__janela-fechada-aviso {
  margin: 0;
  padding: .6rem 1.25rem;
  color: var(--bc-warn);
  background: color-mix(in oklab, var(--bc-warn) 12%, transparent);
  border-top: 1px solid var(--bc-line-soft);
  font-size: .82rem;
}

/* ── composer: fixo na base da coluna 2, duas abas ────────────────────
   Redesenho de layout (08/09, referencia visual trazida pelo Gustavo):
   "Responder"/"Enviar template" e "Nota interna" dividem o MESMO espaco,
   alternados por composer_controller.js (Stimulus) -- so um dos dois
   `data-composer-target="painel*"` fica visivel por vez (ver
   conversas/_composer.html.erb). */

.conversa__composer {
  flex: 0 0 auto;
  background: var(--bc-surface);
  border-top: 1px solid var(--bc-line);
}

/* O aviso de recusa desenhado dentro do frame (conversas/_flash_do_frame): a
   margem do `.painel__flash` e a da pagina inteira, aqui ele fica rente ao
   composer. */
.conversa__flash { margin: .6rem .75rem 0; }

/* A conversa de um COLEGA do grupo de plantao (26/10), no lugar do composer:
   o aviso de com quem ela esta e o botao "Puxar para mim" (conversas/
   _aviso_de_leitura). Faixa lateral na cor de atencao, como os outros avisos
   do painel; o botao e o `.conversa__enviar` de sempre. */
.conversa__leitura {
  flex: 0 0 auto;
  background: var(--bc-surface);
  border-top: 1px solid var(--bc-line);
}

.conversa__leitura-corpo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.25rem;
  margin: .85rem 1.25rem;
  padding: .85rem 1rem;
  background: color-mix(in oklab, var(--bc-warn) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--bc-warn) 30%, transparent);
  border-left: 4px solid var(--bc-warn);
  border-radius: 10px;
}

.conversa__leitura-texto {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  flex: 1 1 14rem;
  min-width: 0;
  margin: 0;
  color: var(--bc-ink-soft);
  font-size: .84rem;
  line-height: 1.4;
}

.conversa__leitura-titulo {
  color: var(--bc-ink);
  font-size: .92rem;
}

.conversa__leitura-formulario { margin: 0; }

.conversa__composer-abas {
  display: flex;
  gap: 1.25rem;
  padding: .7rem 1.25rem 0;
  border-bottom: 1px solid var(--bc-line-soft);
}

.conversa__composer-aba {
  appearance: none;
  padding: 0 0 .65rem;
  color: var(--bc-ink-mut);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: .84rem; font-weight: 600;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.conversa__composer-aba:hover { color: var(--bc-ink); }

.conversa__composer-aba--ativa {
  color: var(--bc-primary);
  border-bottom-color: var(--bc-primary);
}

.conversa__formulario {
  display: flex;
  align-items: flex-end;
  gap: .6rem;
  flex: 0 0 auto;
  padding: .85rem 1.25rem;
}

.conversa__campo-texto {
  flex: 1 1 auto;
  min-height: 2.6rem;
  max-height: 8rem;
  padding: .6rem .8rem;
  resize: none;
  color: var(--bc-ink);
  background: var(--bc-surface-2);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  font: inherit;
  font-size: .88rem;
  line-height: 1.4;
  /* Cresce com o conteudo sem JS, onde o navegador suporta -- degrada bem
     (o resize continua desligado, so nao acompanha o texto) onde nao. */
  field-sizing: content;
}

.conversa__campo-texto:focus-visible {
  outline: 2px solid var(--bc-focus);
  outline-offset: 1px;
}

.conversa__enviar {
  flex: 0 0 auto;
  padding: .6rem 1.1rem;
  appearance: none;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border: 0;
  border-radius: var(--bc-raio);
  font: inherit;
  font-size: .88rem; font-weight: 700;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.conversa__enviar:hover { background: var(--bc-primary-hover); }

.conversa__formulario-template {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .65rem;
  flex: 0 0 auto;
  padding: .85rem 1.25rem;
}

/* Escolha do template + o bloco do escolhido (09/11, achados A2/A4 da revisao de UI/UX): a mensagem como o cliente
   recebe e os campos dele, cada um com label. O Stimulus `template-da-conversa` mostra um bloco por vez e desabilita os
   campos dos outros. `[hidden]` precisa de regra propria porque `display: grid` abaixo vence o atributo. */
.conversa__template-escolha {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.conversa__template-rotulo,
.conversa__template-campo label {
  color: var(--bc-ink-soft);
  font-size: .8rem; font-weight: 600;
}

.conversa__template-bloco {
  display: grid;
  gap: .5rem;
}

.conversa__template-bloco[hidden] { display: none; }

/* Os campos do template lado a lado, quebrando linha so quando nao cabem: o composer fica baixo e a conversa continua a vista. */
.conversa__template-campos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}

.conversa__template-campo {
  display: grid;
  gap: .2rem;
  flex: 1 1 11rem;
  max-width: 16rem;
}

.conversa__template-campo input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

.conversa__template-vazio {
  margin: 0;
  padding: .85rem 1.25rem;
  color: var(--bc-ink-mut);
  font-size: .85rem;
}

.conversa__formulario-template select,
.conversa__formulario-template input[type="text"] {
  padding: .5rem .7rem;
  color: var(--bc-ink);
  background: var(--bc-surface-2);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  font: inherit;
  font-size: .85rem;
}

.conversa__formulario-template input[type="submit"] {
  padding: .55rem 1.1rem;
  appearance: none;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border: 0;
  border-radius: var(--bc-raio);
  font: inherit;
  font-size: .85rem; font-weight: 700;
  cursor: pointer;
  align-self: flex-start;
}

/* ── coluna 3: painel de contato ──────────────────────────────────────── */
/* Redesenho de layout (08/09, referencia visual trazida pelo Gustavo):
   secoes com rotulo maiusculo, mesmo padrao do prototipo. O formulario de
   nota MUDOU de casa (foi para conversas/_composer.html.erb, junto de
   "Responder") -- o que sobra aqui e so contagem + atalho, ver
   `.conversa__contato-nota-atalho` mais abaixo. */

.conversa__contato {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem 1.1rem;
}

.conversa__contato-titulo {
  margin: 0 0 1.4rem;
  color: var(--bc-ink-mut);
  font-size: .78rem; font-weight: 700;
  text-align: left;
}

.conversa__contato-cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1.25rem;
}

.conversa__contato-avatar {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: .6rem;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border-radius: 50%;
  font-size: 1.15rem; font-weight: 700;
}

.conversa__contato-cabecalho h2 {
  margin: 0;
  color: var(--bc-ink);
  font-size: 1rem;
}

.conversa__contato-telefone {
  margin: .2rem 0 0;
  color: var(--bc-ink-mut);
  font-family: var(--bc-fonte-mono);
  font-size: .78rem;
}

.conversa__contato-secao {
  padding-top: 1.1rem;
  margin-top: 1.1rem;
  border-top: 1px solid var(--bc-line-soft);
}

.conversa__contato-secao h3 {
  margin: 0 0 .8rem;
  color: var(--bc-ink-mut);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
}

.conversa__contato-secao dl { margin: 0; font-size: .84rem; }

.conversa__contato-secao dt {
  margin: .6rem 0 .2rem;
  color: var(--bc-ink-faint);
  font-size: .74rem;
}

.conversa__contato-secao dt:first-child { margin-top: 0; }

.conversa__contato-secao dd {
  margin: 0;
  color: var(--bc-ink);
  font-weight: 600;
}

.conversa__janela-cartao {
  padding: .75rem .85rem;
  color: var(--bc-ok);
  background: color-mix(in oklab, var(--bc-ok) 12%, var(--bc-surface));
  border: 1px solid color-mix(in oklab, var(--bc-ok) 30%, transparent);
  border-radius: var(--bc-raio);
}

.conversa__janela-cartao strong { display: block; font-size: .85rem; }

.conversa__janela-cartao p {
  margin: .25rem 0 0;
  color: var(--bc-ink-mut);
  font-size: .78rem;
  line-height: 1.4;
}

.conversa__janela-cartao--fechada {
  color: var(--bc-danger);
  background: color-mix(in oklab, var(--bc-danger) 10%, var(--bc-surface));
  border-color: color-mix(in oklab, var(--bc-danger) 30%, transparent);
}

/* Janela NULA (29/09): o cliente nunca escreveu. Neutro -- nem o verde de
   "pode responder" (texto livre esta bloqueado), nem o alarme de "fechada". */
.conversa__janela-cartao--aguardando {
  color: var(--bc-ink-mut);
  background: var(--bc-surface-2);
  border-color: var(--bc-line-soft);
}

.conversa__contato-notas-contagem {
  margin: 0 0 .6rem;
  color: var(--bc-ink-mut);
  font-size: .82rem;
}

.conversa__contato-nota-atalho {
  appearance: none;
  padding: 0;
  color: var(--bc-primary);
  background: none;
  border: 0;
  font: inherit;
  font-size: .82rem; font-weight: 700;
  cursor: pointer;
}

.conversa__contato-nota-atalho:hover { color: var(--bc-primary-hover); }

/* Formulario de nota, agora dentro do composer (conversas/_composer.html.erb),
   nao mais no painel de contato -- mesma casca, so o padding casa com as
   outras abas do composer (`.conversa__formulario`/`.conversa__formulario-
   template` acima). */
.conversa__formulario-nota {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .85rem 1.25rem;
}

.conversa__campo-nota {
  min-height: 4.5rem;
  padding: .55rem .7rem;
  resize: vertical;
  color: var(--bc-ink);
  background: var(--bc-surface-2);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  font: inherit;
  font-size: .83rem;
  line-height: 1.4;
}

.conversa__campo-nota:focus-visible {
  outline: 2px solid var(--bc-focus);
  outline-offset: 1px;
}

@media (max-width: 1180px) {
  .conversas { grid-template-columns: 17rem 1fr; }
  .conversa__corpo { grid-template-columns: 1fr 12rem; }
}

/* ── mobile: uma coluna por vez ───────────────────────────────────────────
   Mesmo breakpoint de painel.css (760px, onde a barra lateral vira barra
   superior). Sem lista+conversa+contato cabendo lado a lado num telefone,
   o padrao vira "lista OU conversa", trocado por NAVEGACAO normal (o
   "voltar" acima e um link, nao JS) -- `:has(.conversa)` distingue as duas
   estados (index sem conversa aberta vs. show com uma) sem precisar de
   classe nem parametro novo: so olha o que ja esta no DOM. */
@media (max-width: 760px) {
  .conversas {
    display: flex;
    flex-direction: column;
  }

  .conversas__topo-coluna1 { flex: 0 0 auto; }
  .conversas__lista { flex: 1 1 auto; }

  /* Abaixo de 16px o Safari do iPhone da zoom na pagina quando o campo recebe
     foco (mesmo motivo da regra de zz_nativo.css, que so alcanca o app). */
  .conversas__seletor,
  .conversas__data,
  .conversas__periodo-resumo { font-size: 1rem; }

  /* Com a fonte em 1rem "dd/mm/aaaa" e o icone pedem mais que meia linha ate de
     uma coluna que, no desktop, ainda caberia (a 320px de tela o miolo mede
     ~16,6rem): o empilhamento sobe de 14rem para 17rem. As mesmas tres regras
     do `@container` do desktop, so com outro limite. */
  @container filtros-conversas (max-width: 17rem) {
    .conversas__datas { grid-template-columns: minmax(0, 1fr); gap: .4rem; }

    .conversas__data-bloco {
      flex-direction: row;
      align-items: center;
      gap: .5rem;
    }

    .conversas__data-bloco .conversas__campo-rotulo { flex: 0 0 1.9rem; padding-left: 0; }
    .conversas__data-bloco .conversas__campo { flex: 1 1 auto; }
  }

  .conversas__aberta { display: none; }
  .conversas:has(.conversa) .conversas__aberta { display: flex; flex: 1 1 auto; }
  .conversas:has(.conversa) .conversas__topo-coluna1,
  .conversas:has(.conversa) .conversas__lista { display: none; }

  .conversa__voltar { display: block; }
  .conversa__corpo { grid-template-columns: 1fr; }
  /* O PAINEL DO CONTATO VAI PARA BAIXO DA CONVERSA, em vez de sumir (achado de UI/UX, 09/11/2026): no celular ele era `display: none`, e com
     ele iam embora "Atendimentos anteriores" (a primeira coisa que o suporte procura), o envio do lead ao CRM, as notas e o estado da
     janela. O mesmo desenho das Redes (redes_sociais.css): o corpo rola inteiro, a conversa ocupa a primeira tela, e o painel vem depois. */
  .conversa__corpo { display: block; overflow-y: auto; }
  .conversa__thread { height: 100%; border-right: 0; }
  .conversa__contato { display: flex; overflow: visible; border-top: 1px solid var(--bc-line); }
}

/* ---------------------------------------------------------------------------
   Menu das mensagens pre-determinadas -- a "/" no campo de resposta (17/09).

   `.conversa__formulario` e um flex ROW (campo + botao Enviar). Um menu como
   filho normal viraria uma terceira coluna e espremeria o campo, entao ele sai
   do fluxo: `position: absolute` ancorado no proprio formulario, subindo a
   partir da borda de cima (`bottom: 100%`) para nao cobrir o que se digita.
   --------------------------------------------------------------------------- */
.conversa__formulario { position: relative; }

.conversa__rapidas {
  position: absolute;
  bottom: calc(100% - .25rem);
  left: 1.25rem; right: 1.25rem;
  z-index: 20;
  max-height: 16rem;
  overflow-y: auto;
  padding: .35rem;
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  box-shadow: 0 .75rem 1.75rem rgb(0 0 0 / .18);
}

.conversa__rapidas-titulo {
  margin: 0;
  padding: .3rem .55rem .4rem;
  color: var(--bc-ink-faint);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}

.conversa__rapidas-lista { display: grid; gap: .1rem; }

/* `display: grid` na regra abaixo passa por cima do atributo `hidden`: sem esta
   linha, a opcao que o filtro do menu "/" esconde (`hidden` posto pelo
   `mensagens-rapidas`) continuava na tela, com o destaque de antes, ao lado do
   aviso "Nenhuma mensagem com esse atalho" (achado de 22/10, junto do Enter que
   envia). Vale tambem para o menu do composer de Instagram/Messenger. */
.conversa__rapida[hidden] { display: none; }

.conversa__rapida {
  display: grid;
  gap: .12rem;
  width: 100%;
  padding: .45rem .55rem;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: calc(var(--bc-raio) - 2px);
  cursor: pointer;
  font: inherit;
}

.conversa__rapida:hover,
.conversa__rapida--ativa {
  background: color-mix(in srgb, var(--bc-primary) 12%, transparent);
}

.conversa__rapida-atalho {
  color: var(--bc-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; font-weight: 600;
}

/* Uma linha so por opcao: o menu e para RECONHECER a mensagem, nao para
   ler ela inteira -- o texto completo cai no campo depois de escolhida. */
.conversa__rapida-corpo {
  display: block;
  color: var(--bc-ink-soft);
  font-size: .8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversa__rapidas-vazio {
  margin: 0;
  padding: .45rem .55rem;
  color: var(--bc-ink-faint);
  font-size: .8rem;
}

/* ---------------------------------------------------------------------------
   Imagem e audio no campo de resposta (02/10): "+", microfone, aviso de
   imagem anexada e o cronometro de gravacao. O `[hidden]` explicito existe
   porque `display: flex` das regras abaixo venceria o `hidden` do HTML, que
   e o que o conversa_midia_controller.js liga e desliga.
   --------------------------------------------------------------------------- */
.conversa__entrada {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.conversa__entrada .conversa__campo-texto { width: 100%; }

.conversa__midia-botao {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  appearance: none;
  color: var(--bc-ink-mut);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.conversa__midia-botao:hover { color: var(--bc-ink); background: var(--bc-surface-2); }

.conversa__midia-botao:focus-visible {
  outline: 2px solid var(--bc-focus);
  outline-offset: 1px;
}

.conversa__midia-botao--cancelar:hover {
  color: var(--bc-danger);
  background: color-mix(in srgb, var(--bc-danger) 15%, transparent);
}

.conversa__midia-svg { width: 1.2rem; height: 1.2rem; }

.conversa__anexo {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: .8rem;
  /* Peso normal no rotulo "Arquivo anexado:"; so o NOME vem em negrito (o
     `<strong>` do `anexoNome`), para rotulo e nome se distinguirem. */
  font-weight: 400;
  color: var(--bc-ink);
}

.conversa__anexo-remover {
  padding: 0;
  appearance: none;
  color: var(--bc-ink-mut);
  background: none;
  border: 0;
  font: inherit;
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
}

.conversa__anexo-remover:hover { color: var(--bc-danger); }

/* Nome do arquivo anexado (22/10): nome comprido quebra em qualquer ponto em
   vez de empurrar o "Remover" para fora do campo. `min-width: 0` e o que
   deixa um filho de flex encolher abaixo da largura do proprio texto. */
.conversa__anexo-nome {
  min-width: 0;
  overflow-wrap: anywhere;
}

.conversa__gravando {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.6rem;
  margin: 0;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  color: var(--bc-ink);
}

.conversa__gravando-ponto {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--bc-danger);
  animation: conversa-gravando 1.2s ease-in-out infinite;
}

@keyframes conversa-gravando {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
  .conversa__gravando-ponto { animation: none; }
}

/* O microfone que falhou (10/11/2026): o aviso abaixo do campo, a mesma cara do aviso do chat de suporte (.suporte__composer-aviso).
   Fica escondido ate o controller ter o que dizer (conversa_midia_controller.js). */
.conversa__aviso-mic {
  margin: .4rem 0 0;
  padding: .4rem .6rem;
  color: var(--bc-ink);
  background: color-mix(in srgb, var(--bc-danger) 10%, transparent);
  border-left: 3px solid var(--bc-danger);
  border-radius: 4px;
  font-size: .82rem;
}

.conversa__midia-botao[hidden],
.conversa__anexo[hidden],
.conversa__gravando[hidden],
.conversa__aviso-mic[hidden],
.conversa__campo-texto[hidden] { display: none; }

/* ── historico do posto (22/10) ───────────────────────────────────────────
   Spec 2026-10-22-melhorias-suporte-ao-posto-design.md, secao 4. Duas pecas:

   1. a secao "Atendimentos anteriores", logo depois de "Atendimento" no
      painel do contato (conversas/_contato). O painel tem ~200px uteis
      (z_refinamento.css: 235px menos o padding), entao cada linha e um
      cartao estreito: data e hora, quem atendeu e quantas mensagens, o grupo
      (quando o servidor manda), o motivo e o trecho da primeira mensagem do
      contato. A seta na coluna da direita e o realce no hover e no foco dizem
      "isto abre". Fundo NEUTRO com borda fina, de proposito: o verde claro e o
      do cartao "Janela de conversa", logo abaixo, que nao e clicavel;
   2. a tela de leitura (conversas/historico/show), uma pagina inteira do
      painel, sem a lista: o cabecalho e as bolhas num cartao so, na mesma
      familia visual da caixa de Conversas (borda, raio de 14px, sombra). As
      bolhas sao as mesmas da conversa normal e nao ganham regra nova. */

.conversa__anteriores-lista {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O conteudo empilhado a esquerda, a seta sozinha a direita, no meio da
   altura do cartao. */
.conversa__anterior {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .6rem .55rem .65rem;
  color: var(--bc-ink);
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: 8px;
  font-size: .78rem;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}

.conversa__anterior-corpo {
  display: grid;
  flex: 1 1 auto;
  gap: .15rem;
  min-width: 0;
}

.conversa__anterior:hover,
.conversa__anterior:focus-visible {
  background: var(--bc-surface-2);
  border-color: color-mix(in srgb, var(--bc-primary) 45%, var(--bc-line));
}

.conversa__anterior:hover .conversa__anterior-data,
.conversa__anterior:focus-visible .conversa__anterior-data {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.conversa__anterior-seta {
  flex: 0 0 auto;
  color: var(--bc-ink-faint);
  font-size: 1.15rem;
  line-height: 1;
}

.conversa__anterior:hover .conversa__anterior-seta,
.conversa__anterior:focus-visible .conversa__anterior-seta { color: var(--bc-primary); }

.conversa__anterior-data {
  font-family: var(--bc-fonte-mono);
  font-weight: 700;
}

.conversa__anterior-quem { color: var(--bc-ink-mut); }

.conversa__anterior-atendente {
  color: var(--bc-ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* O grupo: rotulo pequeno, para o admin nao misturar o comercial com o
   suporte. So aparece quando o servidor decide (`mostrar_grupo?`). */
.conversa__anterior-grupo {
  justify-self: start;
  padding: .05rem .4rem;
  color: var(--bc-ink-mut);
  background: var(--bc-surface-2);
  border-radius: 4px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  overflow-wrap: anywhere;
}

.conversa__anterior-motivo {
  color: var(--bc-ink-mut);
  overflow-wrap: anywhere;
}

.conversa__anterior-trecho {
  color: var(--bc-ink-mut);
  font-style: italic;
  overflow-wrap: anywhere;
}

/* Os dois avisos sao TEXTO apagado, nao link: nada a clicar. */
.conversa__anteriores-vazio,
.conversa__anteriores-mais {
  margin: .55rem 0 0;
  color: var(--bc-ink-faint);
  font-size: .78rem;
  line-height: 1.4;
}

.conversa__anteriores-vazio { margin-top: 0; }

.conversa-lida {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.conversa-lida__voltar {
  align-self: flex-start;
  color: var(--bc-primary);
  font-size: .875rem; font-weight: 700;
  text-decoration: none;
}

.conversa-lida__voltar:hover { text-decoration: underline; }

.conversa-lida__cartao {
  overflow: hidden;
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: 14px;
  box-shadow: var(--bc-shadow);
}

.conversa-lida__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--bc-line);
}

.conversa-lida__identidade {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  flex: 1 1 auto;
  min-width: 0;
}

.conversa-lida__olho {
  margin: 0;
  color: var(--bc-ink-mut);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
}

.conversa-lida__identidade h1 {
  margin: 0;
  color: var(--bc-ink);
  font-size: 1.1rem; font-weight: 700;
}

/* Os dados do atendimento numa faixa propria, embaixo do nome: ao lado dele
   o rotulo "somente leitura" quebrava em duas linhas no notebook (1283 px). */
.conversa-lida__dados {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: .6rem 1.75rem;
  margin: 0;
  padding-top: .85rem;
  border-top: 1px solid var(--bc-line-soft);
  font-size: .82rem;
}

.conversa-lida__dados dt {
  color: var(--bc-ink-faint);
  font-size: .72rem;
}

.conversa-lida__dados dd {
  margin: 0;
  color: var(--bc-ink);
  font-weight: 600;
}

.conversa-lida__vazio {
  margin: 0;
  color: var(--bc-ink-mut);
  text-align: center;
}