/*
 * Os chamados: a lista e a conversa do lado do cliente, a fila e a conversa do
 * escritório, com a nota interna em destaque e o aviso "o cliente não vê".
 *
 * Mora aqui o que só os chamados desenham. Cor, espaço, cartão, botão,
 * etiqueta e formulário vêm de `application.css`, pelos tokens e pelas classes
 * que já existem — este arquivo não redefine nenhum deles.
 */

/* A conversa: uma mensagem embaixo da outra, na ordem em que foram escritas.
   O cliente fala de um lado e o escritório do outro — quem lê de relance sabe
   quem disse o quê sem ler o nome. */
.conversa {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}

.mensagem {
  width: min(100%, 42rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raio-caixa);
  padding: .85rem 1.05rem;
}

.mensagem--escritorio {
  justify-self: end;
  border-color: var(--acento);
  background: var(--acento-fraco);
}

/* A nota interna é do escritório e só dele: tracejada e em âmbar, para não se
   confundir com a resposta que o cliente lê. */
.mensagem--nota {
  border-style: dashed;
  border-color: var(--aviso);
  background: var(--aviso-fundo);
}

/* O passo da linha do tempo leva à mensagem pela âncora: a barra do topo, que
   gruda, não cobre o começo dela, e a mensagem aberta assim fica marcada. */
.mensagem { scroll-margin-top: 4.5rem; }
.mensagem:target { outline: 2px solid var(--foco); outline-offset: 2px; }

.mensagem__autor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .6rem;
  margin: 0 0 .45rem;
  font-size: .875rem;
  color: var(--ink-medio);
}
.mensagem__autor strong { color: var(--ink); }

/* Texto digitado por gente: endereço comprido e linha sem espaço quebram onde
   precisar, em vez de alargar a página no celular. */
.mensagem__texto { overflow-wrap: anywhere; }
.mensagem__texto p { margin: 0 0 .5rem; }
.mensagem__texto p:last-child { margin-bottom: 0; }

.mensagem__anexos {
  list-style: none;
  margin: .65rem 0 0;
  padding: .55rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: .25rem;
  font-size: .875rem;
  overflow-wrap: anywhere;
}

.chamado__resposta .cartao__titulo { margin-bottom: .85rem; }

/* Quem atende: assumir num toque, ou passar para outra pessoa do escritório. */
.chamado__atendimento {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
  margin-top: 1rem;
}
.chamado__atendimento form { margin: 0; }
/* Cada formulário numa linha só, com o campo e o botão dele juntos; quem
   quebra é a fileira, um formulário inteiro de cada vez. Com o campo podendo
   quebrar dentro do formulário, a fileira apertada espremia o da prioridade,
   e o "Mudar" caía embaixo do campo, longe dele. */
.chamado__atendimento .form-linha { margin-top: 0; flex-wrap: nowrap; }
.chamado__atendimento .form-linha .campo { flex: 0 1 auto; min-width: 0; }

/* A linha do tempo, na ficha do escritório: um passo por linha, a hora à
   esquerda — com algarismos da mesma largura, para as horas se alinharem — e
   o que aconteceu ao lado. No celular estreito, a hora sobe para cima do
   passo, e a frase fica com a largura toda. */
.linha-do-tempo { margin-top: 1.5rem; }
.linha-do-tempo .cartao__titulo { margin-bottom: .75rem; }

.linha-do-tempo__passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
  font-size: .925rem;
}

.linha-do-tempo__passo {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  gap: .1rem .85rem;
  align-items: baseline;
  overflow-wrap: anywhere;
}

.linha-do-tempo__passo time {
  color: var(--ink-fraco);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 30rem) {
  .linha-do-tempo__passos { gap: .7rem; }
  .linha-do-tempo__passo { grid-template-columns: minmax(0, 1fr); }
}

/* A fila recortada por um link — o período de um passo do painel, o
   responsável, o perfil, quem abriu —, dita por extenso acima da lista, com o
   "limpar" ao lado. */
.fila__recorte {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .75rem;
  margin: 0 0 1rem;
  font-size: .875rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Quantos chamados a fila tem, em todas as páginas: o número que o painel
   mostrou antes do link. */
.fila__total { margin: 0 0 .6rem; font-size: .875rem; color: var(--ink-medio); }

/* A situação e, embaixo, a prioridade: duas etiquetas, uma por linha. */
.fila__situacao .etiqueta { display: table; }
.fila__situacao .etiqueta + .etiqueta { margin-top: .3rem; }

/* ---------- O painel dos chamados ---------- */

/* A fila e o painel, lado a lado, logo abaixo do título. */
.secoes-dos-chamados { margin-bottom: 1.35rem; }

/* A mediana dita por extenso — "metade em até 1h05". No cartão, o "metade em
   até" fica no tamanho do texto, e o tempo no tamanho dos números dos outros
   cartões; na tabela, a frase é uma só. */
.tempo-do-painel__valor .tempo-do-painel__prefixo {
  font-family: var(--fonte-corpo);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--ink-medio);
}

/* As partes de um número — de cada lado, de cada origem —, uma por linha:
   três frases separadas por ponto quebram no meio de uma delas no celular. */
.lados-do-numero {
  grid-column: 1 / -1;
  display: grid;
  gap: .15rem;
  margin: .2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .8rem;
  color: var(--ink-fraco);
}
.lados-do-numero a { color: var(--ink-medio); }

/* Os tempos são frases — a mediana por extenso, a média, em quantos chamados e
   o que se mede —, e no celular cada um ganha a largura inteira. */
@media (max-width: 48rem) {
  .indicadores--tempos { grid-template-columns: minmax(0, 1fr); }
}

/* O nome da pessoa, o assunto e o cliente são o título da linha, e não mais um
   cabeçalho de coluna: na tabela comum o `th` da linha sai em caixa alta e
   cinza, como os do `thead`. No celular a ficha já o desenha assim. */
.tabela-do-painel tbody th[scope="row"] {
  background: none;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
}
.tabela-do-painel tbody tr:last-child th { border-bottom: 0; }

/* Seis colunas cabem na largura do painel quando o cabeçalho pode quebrar:
   "Em aberto agora" em duas linhas, e não a tabela rolando para o lado. */
.tabela-por-atendente thead th { white-space: normal; vertical-align: bottom; }

/* "em 3 chamados" é o número que o link leva à fila: inteiro numa linha, e não
   "em 3" numa e "chamados" na outra. */
.tabela-por-atendente .campo__dica a { white-space: nowrap; }

/* O que cada tabela conta, embaixo dela. */
.painel-dos-chamados__nota { margin: .6rem 0 0; max-width: 46rem; }

/* O aviso de que o número de um mês passado pode cair: o último texto da
   página, separado das tabelas. */
.painel-dos-chamados__rodape {
  margin-top: 2.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .875rem;
}

/* O gráfico do que chegou e do que se resolveu. As duas cores são só dele, e
   não as de entrada e saída: verde contra vermelho se confunde para quem não
   distingue os dois, e as do tema — o verde-azulado do acento e o verde da
   entrada — são parecidas demais entre si. Âmbar e verde-azulado se separam
   para todo tipo de visão, nos dois temas, e passaram no validador de paleta
   (separação para daltonismo, piso de croma, faixa de luminosidade e
   contraste com o cartão). O âmbar não é o `--aviso`, que é estado. */
:root {
  --serie-chegada:   #B8740F;
  --serie-resolucao: #008470;
}
:root[data-theme="dark"] {
  --serie-chegada:   #B98535;
  --serie-resolucao: #2F9F8A;
}

.grafico__barra--chegada   { fill: var(--serie-chegada); }
.grafico__barra--resolucao { fill: var(--serie-resolucao); }
.grafico__chave--chegada::before   { background: var(--serie-chegada); }
.grafico__chave--resolucao::before { background: var(--serie-resolucao); }

.grafico-do-painel { margin-top: 1.5rem; }

/* O valor da linha de cima, logo acima dela, na cor do texto fraco, como os
   rótulos do eixo de baixo. O `gap` da figura o separa um pouco demais do
   gráfico; a margem negativa o encosta na linha. */
.grafico__teto {
  margin-bottom: -.55rem;
  font-size: .7rem;
  line-height: 1;
  color: var(--ink-fraco);
  font-variant-numeric: tabular-nums;
}
.grafico-do-painel .cartao__titulo { margin-bottom: .25rem; }
.grafico-do-painel__janela { margin: 0 0 .85rem; font-size: .85rem; }

/* Os filtros do painel, entre as abas e os números que eles recortam. */
.filtros-do-painel { margin-bottom: 1.25rem; }

/* A barra fina de uma linha — por assunto, por cliente, por prioridade —, do
   tamanho do número contra o maior da lista. Nasce da esquerda, reta ali e
   arredondada na ponta, na cor do acento: uma série só, e o nome e o número
   já estão escritos ao lado. */
.barra-do-painel {
  display: block;
  width: calc(var(--fracao, 0) * 100%);
  height: 6px;
  margin-top: .35rem;
  border-radius: 0 3px 3px 0;
  background: var(--acento);
}

/* A lista do cartão "por prioridade": o nome e o número na mesma linha, a
   barra embaixo, com a largura do cartão. */
.barras-do-painel {
  grid-column: 1 / -1;
  display: grid;
  gap: .55rem;
  margin: .35rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .875rem;
}
.barras-do-painel li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: .75rem;
}
.barras-do-painel__nome { color: var(--ink-medio); }
.barras-do-painel__numero { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.barras-do-painel .barra-do-painel { grid-column: 1 / -1; margin-top: .2rem; }