/*
 * O chat com o suporte (Fase 63, docs/PLANEJAMENTO-ATENDIMENTO.md, 4.2): a
 * conversa do cliente com o escritório, nas duas áreas.
 *
 * O desenho é o do chat do assistente, como o WhatsApp — o fundo, o
 * cabeçalho, o selo do dia, a pílula do campo e o enviar redondo vêm de
 * `assistente.css`, pelas classes e pelos tokens `--chat-*` de lá. Mora aqui
 * o que só o chat com gente tem: o balão de cada pessoa, com o nome de quem
 * escreveu, o arquivo dentro do balão, o aviso do sistema ao centro e a faixa
 * do que vence. Cor, espaço, cartão e botão vêm de `application.css`; este
 * arquivo não redefine nenhum deles.
 */

/* A faixa fixa do alto da conversa: o que vence e o que fica. No tom das
   faixas dos aplicativos de conversa, que dizem "as mensagens são
   protegidas" — um amarelo apagado, que não é o do aviso de erro. Tokens
   próprios, nos dois temas. */
:root {
  --chat-faixa:       #FBF3CF;
  --chat-faixa-texto: #574A1E;
}

:root[data-theme="dark"] {
  --chat-faixa:       #2A281C;
  --chat-faixa-texto: #E7DDB2;
}

/* O mesmo escuro, para quem escolheu o automático e tem o aparelho no escuro.
   Tem de ficar igual ao bloco de cima: o spec dos temas confere. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --chat-faixa:       #2A281C;
    --chat-faixa-texto: #E7DDB2;
  }
}

.suporte__faixa {
  justify-self: center;
  max-width: 36rem;
  margin: 0 auto .75rem;
  padding: .4rem .85rem;
  border-radius: .5rem;
  background: var(--chat-faixa);
  box-shadow: var(--chat-sombra);
  color: var(--chat-faixa-texto);
  font-size: .8125rem;
  line-height: 1.4;
  text-align: center;
}
.suporte__faixa--aviso { background: var(--aviso-fundo); color: var(--aviso); }

/* Os balões: de gente com gente, mais juntos que as trocas do assistente. Um
   balão novo de outra pessoa abre com um respiro; o que continua o anterior
   — a mesma pessoa, seguida — vem colado, sem o nome e sem o rabicho. */
.suporte__conversa { gap: .2rem; }

.balao {
  position: relative;
  max-width: min(85%, 34rem);
  margin-top: .45rem;
  padding: .35rem .6rem .3rem;
  border-radius: .55rem;
  background: var(--balao);
  box-shadow: var(--chat-sombra);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: .6rem;
}
.balao::before {
  content: "";
  position: absolute;
  top: 0;
  width: .5rem;
  height: .8rem;
  background: var(--balao);
}

.balao--meu {
  --balao: var(--chat-minha);
  justify-self: end;
  margin-right: .5rem;
  border-top-right-radius: 0;
}
.balao--meu::before { right: -.5rem; clip-path: polygon(0 0, 100% 0, 0 100%); }

.balao--deles {
  --balao: var(--chat-dele);
  justify-self: start;
  margin-left: .5rem;
  border-top-left-radius: 0;
}
.balao--deles::before { left: -.5rem; clip-path: polygon(0 0, 100% 0, 100% 100%); }

.balao--continua { margin-top: 0; border-radius: .55rem; }
.balao--continua::before { content: none; }

/* O nome de quem escreveu, no alto do balão, como o de quem escreve num
   grupo: "Escritório · Carla". */
.balao__autor {
  flex-basis: 100%;
  margin: 0 0 .1rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--acento);
  overflow-wrap: anywhere;
}

.balao__texto { flex: 0 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.balao__texto:not(:last-of-type) { flex-basis: 100%; margin-bottom: .35rem; }

/* A hora no canto de baixo, no fim da última linha quando cabe nela, com o
   "visto" do balão de quem lê (`.troca__visto`, de `assistente.css`). */
.balao__quando {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  margin-left: auto;
  font-size: .6875rem;
  line-height: 1.2;
  color: var(--chat-hora);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Por onde a mensagem veio ou foi — "pelo WhatsApp", "entregue ✓✓", "Não
   chegou ao WhatsApp" (Fase 76) —, embaixo do texto e antes da hora. Os
   tokens são os do chat, nos dois temas; a falha usa o do aviso. */
.balao__canal {
  flex-basis: 100%;
  margin: .2rem 0 0;
  font-size: .75rem;
  color: var(--chat-hora);
  overflow-wrap: anywhere;
}
.balao__canal--falhou { color: var(--aviso); font-weight: 600; }
.balao__canal--nota { font-style: italic; }
.balao__tentar-form { display: inline; margin: 0; }
.balao__tentar {
  margin-left: .35rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: .15em;
  cursor: pointer;
}

/* O arquivo ocupa a largura do balão, e a hora vem embaixo dele. Sem quebra
   de linha: na coluna, a quebra fazia o nome de quem mandou — que ocupa a
   linha inteira no balão de texto — abrir uma coluna só para ele, e o
   arquivo, o "Arquivo apagado em" e o "Guardado em" iam para o lado,
   cortados no celular (Fase 65). */
.balao--arquivo { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.balao--arquivo > .balao__quando { align-self: flex-end; margin-top: .2rem; }

/* A imagem no próprio balão, reduzida pela tela: a miniatura é a imagem. */
.balao__imagem { display: block; margin: .1rem 0 0; border-radius: .4rem; overflow: hidden; }
.balao__imagem img {
  display: block;
  width: min(15rem, 100%);
  height: auto;
  max-height: 18rem;
  object-fit: cover;
}
.balao__imagem:focus-visible { outline-offset: 2px; }

/* O PDF, a planilha, o XML: um cartão com o ícone, o nome e o tamanho. */
.balao__arquivo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: .6rem;
  align-items: center;
  min-width: 0;
  margin: .1rem 0 0;
  padding: .5rem .65rem;
  border-radius: .4rem;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
  text-decoration: none;
}
.balao__arquivo:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.balao__icone { grid-row: 1 / span 2; color: var(--acento); }
.balao__nome { font-weight: 600; font-size: .875rem; overflow-wrap: anywhere; }
.balao__tamanho { font-size: .75rem; color: var(--ink-medio); }

/* A mensagem de voz: o tocador do navegador, com o nome e o tamanho embaixo.
   O tocador tem largura própria (16rem, ou a do balão, se menor): com a
   largura em porcentagem, o balão de nome curto o encolheria até o botão de
   tocar. O esquema de cores é o herdado do tema da conta (`:root[data-theme]`),
   e não o do aparelho. A cor do fundo é a do cartão do arquivo. */
.balao__audio {
  display: grid;
  gap: .15rem;
  min-width: 0;
  margin: .1rem 0 0;
  padding: .4rem .5rem .5rem;
  border-radius: .4rem;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
}
.balao__audio audio { width: 16rem; max-width: 100%; height: 2.25rem; }
.balao__audio a.balao__nome { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.balao__audio .balao__nome,
.balao__audio .balao__tamanho { padding-inline: .15rem; }

.balao__vence,
.balao__apagado { margin: .25rem 0 0; font-size: .75rem; color: var(--chat-hora); }
.balao__apagado { font-style: italic; overflow-wrap: anywhere; }

/* O aviso do sistema, ao centro, numa pílula: "Carla está te atendendo",
   "Atendimento concluído por Carla". */
.suporte__aviso { justify-self: center; margin: .5rem 0 .2rem; text-align: center; }
.suporte__aviso span {
  display: inline-block;
  max-width: 32rem;
  padding: .3rem .75rem;
  border-radius: .5rem;
  background: var(--chat-dele);
  box-shadow: var(--chat-sombra);
  font-size: .8125rem;
  color: var(--ink-medio);
  overflow-wrap: anywhere;
}
.suporte__aviso--fim { margin-top: .75rem; }

/* As linhas embaixo do campo: o que o clipe aceita e o espaço, e, no
   escritório, como o cliente vê o nome de quem responde. */
.suporte__dica {
  margin: .35rem 0 0;
  padding-inline: .75rem;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--ink-medio);
}

/* A linha do escritório embaixo do nome do cliente — o perfil, o documento, a
   situação e quem atende — corre como texto e quebra onde couber, e não em
   colunas espremidas ao lado do "Concluir" no celular. */
.chat__perfil.suporte__ficha { display: block; line-height: 1.7; }
.suporte__ficha .ponto-cor { display: inline-block; margin: 0 .3rem 0 0; vertical-align: middle; }
.suporte__ficha .etiqueta { white-space: nowrap; }

/* A inicial do cliente no lugar da foto, no cabeçalho do escritório. */
.suporte__inicial { font-family: var(--fonte-titulo); font-size: 1.15rem; font-weight: 600; }

/* A conversa só de leitura não tem campo: o pé fica com a frase. */
.suporte__pe-de-leitura { padding-top: .75rem; }

/* ---------- Fase 64: a fila, o horário e os avisos ao escritório ---------- */

/* As abas da fila: cinco não cabem lado a lado no celular, e a fileira corre
   para o lado em vez de espremer os rótulos. */
.fila-do-chat__abas { max-width: 100%; overflow-x: auto; margin-bottom: 1rem; }
.fila-do-chat__acao { text-align: right; }

.fila-do-chat__acao form { margin: 0; }

@media (max-width: 40rem) {
  .segmentado.fila-do-chat__abas { justify-content: flex-start; }
  .fila-do-chat__abas .segmentado__item { flex: 0 0 auto; padding-inline: .7rem; }
  .fila-do-chat__acao { text-align: left; }
}

/* O horário de atendimento no cabeçalho do chat, embaixo do perfil. */
.chat__horario {
  margin: .1rem 0 0;
  font-size: .75rem;
  line-height: 1.35;
  color: var(--ink-medio);
  overflow-wrap: anywhere;
}

/* O "Passar para…" no pé da conversa do escritório. */
.suporte__passar { margin-top: .5rem; padding-inline: .75rem; }
.suporte__passar > summary {
  cursor: pointer;
  font-size: .875rem;
  font-weight: 600;
  color: var(--acento);
}
.suporte__passar-form { margin-top: .5rem; }
.suporte__passar-form textarea { min-height: 3.5rem; }

/* A tela do horário: cada faixa é um par de horas, "08:00 às 12:00". */
.horario__efeitos { margin: .25rem 0 .75rem; padding-left: 1.1rem; line-height: 1.5; }
.horario__faixa { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
/* O campo de hora no desenho dos outros campos (`.campo input`), mais
   estreito: são seis por dia, e a semana cabe na tela larga sem rolar. */
.horario__faixa input[type="time"] {
  width: 6.4rem;
  padding: .4rem .45rem;
  border: 1px solid var(--line-forte);
  border-radius: var(--raio);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}
.tabela.horario th,
.tabela.horario td { padding-inline: .6rem; }

/* O alerta da mensagem nova, no canto de baixo, por cima de tudo menos da
   gaveta da navegação: discreto, e some sozinho. Em qualquer página da
   administração de quem atende o chat. */
.aviso-do-atendimento__alerta {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 35;
  max-width: min(26rem, calc(100vw - 2rem));
}
.aviso-do-atendimento__caixa {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--acento);
  border-radius: var(--raio);
  background: var(--surface);
  box-shadow: var(--sombra-alta);
  color: var(--ink);
  font-size: .9rem;
}
.aviso-do-atendimento__texto { flex: 1 1 12rem; overflow-wrap: anywhere; }
.aviso-do-atendimento__caixa a { color: var(--acento); font-weight: 600; }

/* No celular, os botões do cabeçalho da conversa — "Conversas anteriores",
   "Assumir", "Concluir" — descem para a linha de baixo: ao lado do nome,
   espremiam o perfil, quem atende e o horário numa coluna de poucas letras. */
@media (max-width: 40rem) {
  .suporte .chat__cabecalho { flex-wrap: wrap; row-gap: .5rem; }
  .suporte .chat__quem { flex: 1 1 calc(100% - 3.5rem); }
  .suporte .chat__nova { margin-left: 3.35rem; }
  .suporte .chat__nova + .chat__nova { margin-left: 0; }
}

/* ---------- Fase 65: o que fica além dos 30 dias ---------- */

/* Onde o escritório guardou o arquivo nos documentos, embaixo dele, no tom da
   hora — é nota, não mensagem —, e o "Guardar nos documentos" do escritório,
   como link do balão. */
.balao__guardado { margin: .2rem 0 0; font-size: .75rem; color: var(--chat-hora); overflow-wrap: anywhere; }
.balao__guardar {
  align-self: flex-start;
  margin-top: .2rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--acento);
}

/* O aviso de que a conversa virou chamado leva ao chamado. */
.suporte__aviso a { color: var(--acento); font-weight: 600; }

/* Os arquivos que vão ao chamado: o nome inteiro, que quebra onde couber. */
.virar-chamado__arquivo { overflow-wrap: anywhere; }

/* O cartão do arquivo que se guarda e o da conversa que vira chamado, acima
   do formulário: um respiro entre os dois, e o texto colado aos dados. */
.cartao.antes-do-formulario { margin-bottom: 1.5rem; }
.cartao.antes-do-formulario .texto-apoio { margin: 1rem 0 0; }

/* O arquivo que já foi guardado, dito antes do formulário de guardar. */
.guarda__repetida { margin: 0 0 1.25rem; }

/* ---------- Fase 66: o painel de atendimentos ---------- */

/* A fila e o painel, numa fileira própria acima das abas da fila: as duas
   fileiras de botões lado a lado se leriam como uma só. */
.secoes-do-atendimento { display: flex; width: fit-content; margin-bottom: 1rem; }

/* Quem o filtro de atendente recortou, logo abaixo dele. */
.painel-de-atendimentos__recorte { margin: -.5rem 0 1.25rem; font-size: .875rem; }

/* As cores das roscas de categorias, em ordem fixa, escolhidas para cada tema. */
:root {
  --serie-categoria-1: #2A78D6;
  --serie-categoria-2: #EB6834;
  --serie-categoria-3: #1BAF7A;
  --serie-categoria-4: #EDA100;
  --serie-categoria-5: #E87BA4;
  --serie-categoria-6: #6250D6;
  /* As faixas de demora da primeira resposta: um tom só, mais forte conforme
     a demora — a ordem das faixas se lê na cor. No escuro o mais forte é o
     mais claro: é o que mais se destaca do fundo. */
  --serie-faixa-1: #4DB8A4;
  --serie-faixa-2: #1F9C88;
  --serie-faixa-3: #007A68;
  --serie-faixa-4: #00564A;
}
:root[data-theme="dark"] {
  --serie-categoria-1: #3987E5;
  --serie-categoria-2: #D95926;
  --serie-categoria-3: #199E70;
  --serie-categoria-4: #C98500;
  --serie-categoria-5: #D55181;
  --serie-categoria-6: #9085E9;
  --serie-faixa-1: #1F6F62;
  --serie-faixa-2: #2F9F8A;
  --serie-faixa-3: #5CC4B0;
  --serie-faixa-4: #A5E3D6;
}

/* O mesmo escuro, para quem escolheu o automático e tem o aparelho no escuro.
   Tem de ficar igual ao bloco de cima: o spec dos temas confere. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --serie-categoria-1: #3987E5;
    --serie-categoria-2: #D95926;
    --serie-categoria-3: #199E70;
    --serie-categoria-4: #C98500;
    --serie-categoria-5: #D55181;
    --serie-categoria-6: #9085E9;
    --serie-faixa-1: #1F6F62;
    --serie-faixa-2: #2F9F8A;
    --serie-faixa-3: #5CC4B0;
    --serie-faixa-4: #A5E3D6;
  }
}

/* Os números do painel numa faixa só: três grupos lado a lado, separados por
   um fio, que se empilham quando a coluna encolhe. */
.faixa-do-painel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 2rem;
}

.faixa-do-painel__grupo + .faixa-do-painel__grupo {
  padding-left: 2rem;
  border-left: 1px solid var(--line);
}

/* Dois níveis de seletor: no painel administrativo o título também é um
   `secao__titulo`, com margem de seção. */
.faixa-do-painel .faixa-do-painel__titulo {
  margin: 0 0 .85rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
}

.faixa-do-painel__numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}

/* Dentro da faixa o número não é cartão: o cartão é a faixa. */
.faixa-do-painel .indicador { padding: 0; background-image: none; overflow: visible; }
/* Duas linhas reservadas ao rótulo: o que quebra não desalinha o número do lado. */
.faixa-do-painel .indicador__rotulo { align-self: start; min-height: 2.6em; font-size: .7rem; line-height: 1.3; }
.faixa-do-painel .indicador__valor { font-size: 1.7rem; font-weight: 700; color: var(--cor-do-numero, var(--ink)); }
.faixa-do-painel .indicador__valor a { color: inherit; }
.faixa-do-painel__numero--aviso      { --cor-do-numero: var(--aviso); }
.faixa-do-painel__numero--andamento  { --cor-do-numero: var(--acento); }
.faixa-do-painel__numero--chegada    { --cor-do-numero: var(--serie-chegada); }
.faixa-do-painel__numero--resolucao  { --cor-do-numero: var(--serie-resolucao); }
.faixa-do-painel__numero--alerta     { --cor-do-numero: var(--saida); }

/* O painel administrativo: a faixa sem grupos, com tantos números quantos o
   papel alcançar, e a de usuários ao lado da equipe, em que cada grupo toma a
   largura que os seus números pedem. */
.faixa-do-painel + .faixa-do-painel { margin-top: 1.25rem; }
.faixa-do-painel--corrida { display: block; }
.faixa-do-painel--corrida .faixa-do-painel__numeros {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
}
.faixa-do-painel--corrida .indicador__rotulo { min-height: 3.9em; }
.faixa-do-painel--plataforma .faixa-do-painel__numeros {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr));
}
.faixa-do-painel--plataforma { grid-template-columns: minmax(0, 5fr) minmax(0, 2.5fr); }
.faixa-do-painel--plataforma:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
.faixa-do-painel__acao { margin: .85rem 0 0; font-size: .85rem; }

/* "metade em até" numa linha, o tempo noutra: na coluna estreita da faixa, a
   frase inteira quebraria no meio do número. */
.faixa-do-painel .tempo-do-painel__prefixo { display: block; font-size: .75rem; line-height: 1.3; }

/* As roscas: até três por linha, e a legenda ao lado do desenho. Com quatro
   (a de cada atendente), duas colunas em duas linhas, para nenhuma ficar só. */
.roscas-do-painel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.roscas-do-painel:has(> :nth-child(4)) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

/* Com cinco ou seis (o painel de atendimentos), três por fileira e nunca mais:
   a coluna tem pelo menos um terço da largura — e pelo menos 19rem, o que
   leva a tela estreita a duas colunas e depois a uma. */
.roscas-do-painel:has(> :nth-child(5)) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(19rem, calc((100% - 2.5rem) / 3))), 1fr));
}

.roscas-do-painel .cartao__titulo { margin-bottom: .75rem; }
.roscas-do-painel .grafico__tela--rosca { height: 10.5rem; }
.roscas-do-painel .rosca-legenda__fatia { min-width: 2.8rem; }

@media (max-width: 75rem) {
  .faixa-do-painel { grid-template-columns: minmax(0, 1fr); }
  .faixa-do-painel__grupo + .faixa-do-painel__grupo {
    padding: 1.25rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* ---------- Os dados do cliente, no chamado e na conversa ---------- */

.dados-do-cliente-gaveta { margin-bottom: 1rem; }
.dados-do-cliente-gaveta > summary {
  cursor: pointer;
  font-size: .875rem;
  font-weight: 600;
  color: var(--acento);
}
.dados-do-cliente-gaveta > summary:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.dados-do-cliente-gaveta > turbo-frame { display: block; margin-top: .75rem; }

.dados-do-cliente { display: grid; gap: 1.25rem; }
.dados-do-cliente .texto-apoio { margin: 0; }
.dados-do-cliente__titulo { margin: 0 0 .6rem; font-size: 1rem; }
.dados-do-cliente__quebra { overflow-wrap: anywhere; }
.dados-do-cliente__lista { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.dados-do-cliente__lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .6rem;
  overflow-wrap: anywhere;
}
.dados-do-cliente__links { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .6rem 0 0; font-size: .875rem; }

/* O WhatsApp do escritório (Fase 74): a faixa no alto da fila quando a conexão
   caiu ou está pausada, e a tela de conexão. */
.whatsapp__faixa { margin-bottom: 1rem; }
.whatsapp__faixa a { color: inherit; font-weight: 600; text-decoration: underline; }
.whatsapp__estado { margin-bottom: 1rem; }
.whatsapp__botoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.whatsapp__passos { margin: 0 0 1rem 1.25rem; padding: 0; }
.whatsapp__qr {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--raio);
  /* Branco de propósito, nos dois temas: o QR code só se lê com fundo claro. */
  background: #fff;
}
.whatsapp__conectar > .secao__titulo:first-child { margin-top: 0; }
.whatsapp__pareamento .form { max-width: 22rem; }
.whatsapp__pedir { width: 100%; margin-top: .75rem; }
/* O código do pareamento, em destaque e numa linha só. */
.whatsapp__codigo { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--raio); background: var(--surface-alt); }
.whatsapp__codigo-valor { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: .15em; white-space: nowrap; color: var(--ink); }