/* A caixa de Atendimento em três colunas — o desenho da SAG v2.

 * Cada coluna rola sozinha. A página inteira não rola: a moldura já ocupa a
 * altura da janela, e uma segunda barra de rolagem esconderia o rodapé de
 * enviar atrás do fim da tela.
 *
 * As medidas, cores e cantos são os da parte 7 de
 * docs/referencias/sag-v2/ANALISE-DO-ATENDIMENTO.md (item 3.7). Toda cor vai
 * com a palavra ao lado.
 */

/* AS CORES DO ATENDIMENTO (item 3.9) — réguas, nunca cor à mão, como o launivo.css.
 * Cada uma tem o par do tema escuro logo abaixo; cor nova entra nos DOIS blocos. A
 * paleta das iniciais fica de fora: a letra branca no círculo lê igual nos dois. */
:root {
  --at-folha: #fff;
  --at-tinta: #17201e;
  --at-mudo: #66736f;
  --at-apagado: #91a09b;
  --at-linha: #e4e9e7;
  --at-linha-suave: #edf0ef;
  --at-suave: #f7f9f8;
  --at-suave-forte: #eef4f2;
  --at-so-de-ler: #f4f6f5;
  --at-neutro-fundo: #f1f3f2;
  --at-rolagem: #cdd7d3;
  --at-foco: #9bcabd;
  --at-fundo-da-conversa: #eef3f1;
  --at-pontinho: rgba(18, 71, 58, .055);

  --at-verde: #15866d;
  --at-verde-hover: #126d59;
  --at-verde-texto: #126d59;
  --at-verde-icone: #15866d;
  --at-verde-claro: #e9f5f1;
  --at-verde-borda: #cfe6de;
  --at-sobre-verde: #fff;
  --at-balao-nosso: #dff3ec;
  --at-balao-cliente: #fff;

  --at-ensaio-fundo: rgba(244, 251, 248, .96);
  --at-ensaio-borda: #cfe5dd;
  --at-ensaio-texto: #3f6f61;
  --at-ensaio-ponto: #24a981;
  --at-ensaio-halo: #dcf1ea;

  --at-ambar-fundo: #fff4df;
  --at-ambar-borda: #ffe0a3;
  --at-ambar-texto: #a15c00;
  --at-nota-texto: #5a4a1a;
  --at-nota-quem: #a17a2a;

  --at-azul-fundo: #eaf2ff;
  --at-azul-texto: #2563eb;

  --at-recado-fundo: #17201e;
  --at-recado-texto: #fff;
  --at-vidro-do-balao: rgba(255, 255, 255, .66);
  --at-vidro-do-vazio: rgba(255, 255, 255, .85);
  /* o menu do "+" (W9.6): a cor de cada icone, como no WhatsApp */
  --at-mais-roxo: #7f66ff;
  --at-mais-azul: #007bfc;
  --at-mais-rosa: #ff2e74;
  --at-mais-laranja: #ff8a00;
  --at-mais-verde: #02a698;
  --at-mais-amarelo: #f5a300;
  --at-mais-turquesa: #15866d;
  --at-mais-anil: #5157ae;
  --at-palco-da-webcam: #121816;
  /* alternador Foto | Vídeo da webcam: trilho claro e pastilha ativa */
  --at-alternador-fundo: #f5f8f6;
  --at-alternador-ativo: #fff;
  /* situação do número no seletor do topo (tarefa 14) */
  --at-ruim: #b44752;
  /* rostinho de reagir (Henrique, 15/10): sombra leve do círculo */
  --at-sombra-do-rosto: 0 1px 3px rgba(17, 49, 41, .16);
}

:root[data-tema="escuro"] {
  --at-folha: #1b1e2e;
  --at-tinta: #e6e9f4;
  --at-mudo: #9aa1b8;
  --at-apagado: #7d849c;
  --at-linha: #2c3047;
  --at-linha-suave: #262a3e;
  --at-suave: #202334;
  --at-suave-forte: #282c42;
  --at-so-de-ler: #23263a;
  --at-neutro-fundo: #262a3e;
  --at-rolagem: #3a3f5c;
  --at-foco: #3f8f7b;
  --at-fundo-da-conversa: #151826;
  --at-pontinho: rgba(230, 233, 244, .05);

  --at-verde: #1f9c80;
  --at-verde-hover: #27b392;
  --at-verde-texto: #6fd3bd;
  --at-verde-icone: #6fd3bd;
  --at-verde-claro: #14322b;
  --at-verde-borda: #1f4a40;
  --at-sobre-verde: #fff;
  --at-balao-nosso: #173d34;
  --at-balao-cliente: #23263a;

  --at-ensaio-fundo: rgba(20, 50, 43, .92);
  --at-ensaio-borda: #1f4a40;
  --at-ensaio-texto: #9fd8c6;
  --at-ensaio-ponto: #4dd7be;
  --at-ensaio-halo: #1a3d35;

  --at-ambar-fundo: #3a2c14;
  --at-ambar-borda: #5a4520;
  --at-ambar-texto: #e8b06a;
  --at-nota-texto: #ecd9a8;
  --at-nota-quem: #c9a25a;

  --at-azul-fundo: #1a2a42;
  --at-azul-texto: #8db8f0;

  --at-recado-fundo: #e6e9f4;
  --at-recado-texto: #12141f;
  --at-vidro-do-balao: rgba(255, 255, 255, .08);
  --at-vidro-do-vazio: rgba(27, 30, 46, .85);
  /* o menu do "+" (W9.6): a cor de cada icone, como no WhatsApp */
  --at-mais-roxo: #a593ff;
  --at-mais-azul: #5aa9ff;
  --at-mais-rosa: #ff6f9c;
  --at-mais-laranja: #ffaa4d;
  --at-mais-verde: #3fc9bc;
  --at-mais-amarelo: #ffc24d;
  --at-mais-turquesa: #4fbfa3;
  --at-mais-anil: #8a8fe0;
  --at-palco-da-webcam: #070908;
  /* alternador Foto | Vídeo da webcam: trilho e pastilha no tema escuro */
  --at-alternador-fundo: #151826;
  --at-alternador-ativo: #2c3148;
  /* situação do número no seletor do topo (tarefa 14) */
  --at-ruim: #ff9b93;
  /* rostinho de reagir: a mesma sombra, visível no fundo escuro */
  --at-sombra-do-rosto: 0 1px 3px rgba(0, 0, 0, .45);
}

body:has(.atendimento) {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body:has(.atendimento) .aplicacao {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* O menu nasce com 100vh. Com a tarja de teste em cima, 100vh estoura a janela
 * e a página volta a rolar — o que esta folha existe para impedir. */
body:has(.atendimento) .menu {
  height: 100%;
  max-height: 100%;
}

body:has(.atendimento) .folha {
  flex: 1;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: hidden;
}

/* A margem da folha branca é a da v2: 12 px em cima, 14 nos lados e embaixo. */
#conteudo:has(.atendimento) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px 14px 14px;
}

/* A FOLHA BRANCA em volta das três colunas. */
.atendimento {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  background: var(--at-folha);
  border: 1px solid var(--at-linha);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(22, 54, 46, .045);
  color: var(--at-tinta);
}

.atendimento-lista,
.atendimento-conversa,
.atendimento-ficha {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.atendimento-lista {
  width: 330px;
  flex: 0 0 330px;
  border-right: 1px solid var(--at-linha);
  background: var(--at-folha);
}

.atendimento-conversa {
  flex: 1;
  min-width: 400px;
  position: relative;
  background-color: var(--at-fundo-da-conversa);
  background-image: radial-gradient(circle at 1px 1px, var(--at-pontinho) 1px, transparent 0);
  background-size: 22px 22px;
}

.atendimento-ficha {
  width: 300px;
  flex: 0 0 300px;
  border-left: 1px solid var(--at-linha);
  background: var(--at-folha);
  overflow-y: auto;
}

/* A barra de rolagem fina da v2: 9 px. */
.atendimento .lista-de-conversas,
.atendimento .fios,
.atendimento-ficha,
.corpo-da-janela {
  scrollbar-width: thin;
  /* No padrão do resto do Launivo (16/10): a barra só aparece com o mouse em cima. */
  scrollbar-color: transparent transparent;
}
.atendimento .lista-de-conversas:hover,
.atendimento .fios:hover,
.atendimento-ficha:hover,
.corpo-da-janela:hover { scrollbar-color: var(--at-rolagem) transparent; }
.atendimento ::-webkit-scrollbar,
.corpo-da-janela::-webkit-scrollbar { width: 9px; height: 9px; }
.atendimento ::-webkit-scrollbar-thumb,
.corpo-da-janela::-webkit-scrollbar-thumb {
  background: transparent; border-radius: 9px; border: 2px solid transparent; background-clip: padding-box;
}
.atendimento ::-webkit-scrollbar-track { background: transparent; }
.atendimento :hover::-webkit-scrollbar-thumb,
.corpo-da-janela:hover::-webkit-scrollbar-thumb { background-color: var(--at-rolagem); }

/* ---------------------------------------------------------------- a lista */

/* Sem o seletor de número (que subiu para a barra do app), o cabeçalho da
 * coluna volta a ser só o título e o "+". */
.titulo-da-caixa {
  padding: 15px 16px 11px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.titulo-da-caixa h2 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--at-tinta); }
.titulo-da-caixa p { margin: 3px 0 0; color: var(--at-apagado); font-size: 9.5px; }
.novo-da-caixa {
  width: 31px; height: 31px; flex: none; border: 0; border-radius: 9px;
  background: var(--at-verde); color: var(--at-sobre-verde); font: inherit; font-size: 17px; font-weight: 500; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.novo-da-caixa:hover { background: var(--at-verde-hover); }
.novo-da-caixa[hidden] { display: none; }

.topo-da-busca { display: flex; gap: 8px; align-items: center; padding: 0 13px 9px; }
.topo-da-busca .busca-da-caixa { flex: 1; padding: 0; }
.selecionar-varias {
  width: 38px; height: 38px; box-sizing: border-box; flex: none; border: 1px solid var(--at-linha-suave); border-radius: 9px;
  background: var(--at-suave); color: var(--at-mudo); cursor: pointer; display: grid; place-items: center;
}
.selecionar-varias[hidden] { display: none; }
.selecionar-varias svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.selecionar-varias.ligado { background: var(--at-verde); border-color: var(--at-verde); color: var(--at-sobre-verde); }

.busca-da-caixa { display: block; position: relative; }
.busca-da-caixa input {
  /* ALINHADO COM O BOTÃO AO LADO (Henrique, 16/10): em bloco e com 38 px cravados, como o
   * "Selecionar várias" — sem a margem de cima que todo campo de formulário ganha no
   * launivo.css (é ela que empurrava a busca para baixo). */
  display: block;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  padding: 0 11px;
  font: inherit;
  font-size: 12px;
  color: var(--at-tinta);
  background: var(--at-suave);
  border: 1px solid var(--at-linha-suave);
  border-radius: 9px;
  outline: none;
}
.busca-da-caixa input:focus { border-color: var(--at-foco); background: var(--at-folha); }

.sumido {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.abas-da-caixa {
  display: flex;
  gap: 3px;
  padding: 0 13px 10px;
  border-bottom: 1px solid var(--at-linha-suave);
  overflow-x: auto;
}
.abas-da-caixa .aba {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--at-mudo);
  font: inherit;
  font-size: 9.8px;
  font-weight: 600;
  padding: 7px 9px;
  border-radius: 7px;
  cursor: pointer;
}
.abas-da-caixa .aba:hover { background: var(--at-suave); }
.abas-da-caixa .aba.ativa { background: var(--at-verde-claro); color: var(--at-verde-texto); font-weight: 750; }

.lista-de-conversas { flex: 1; min-height: 0; overflow-y: auto; padding: 7px; }

.conversa {
  width: 100%;
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
}
.conversa[hidden] { display: none; }
.conversa:hover { background: var(--at-suave); border-color: var(--at-linha-suave); }
.conversa.escolhida { background: var(--at-verde-claro); border-color: var(--at-verde-borda); }
.conversa.comentario { cursor: default; flex-wrap: wrap; }
.conversa .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conversa .r1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.conversa .nome {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversa .hora { flex: none; color: var(--at-apagado); font-size: 9px; }
.conversa .previa {
  margin: 2px 0 5px;
  color: var(--at-mudo);
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversa .meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding-right: 22px; }
.conversa .selo { font-size: 8px; font-weight: 600; padding: 2px 6px; border-radius: 20px; font-style: normal; }
.conversa .btn { margin-left: auto; }
.nao-lidas {
  position: absolute; right: 10px; bottom: 10px;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 10px;
  background: var(--at-verde); color: var(--at-sobre-verde); font-size: 8px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.vazio-da-caixa { margin: 0; padding: 24px; text-align: center; color: var(--at-apagado); font-size: 11px; }
.vazio-da-caixa[hidden] { display: none; }

/* As etiquetas: a palavra é o que informa; a cor só acompanha. */
.selo.atendente { background: var(--at-verde-claro); color: var(--at-verde-texto); }
.selo.nenhum { background: var(--at-neutro-fundo); color: var(--at-apagado); }
.selo.espera { background: var(--at-ambar-fundo); color: var(--at-ambar-texto); }
.selo.fechada { background: var(--at-neutro-fundo); color: var(--at-mudo); }
.selo.bot { background: var(--at-azul-fundo); color: var(--at-azul-texto); }
.selo.humano { background: var(--at-ambar-fundo); color: var(--at-ambar-texto); }
.selo.tag { background: var(--at-verde-claro); color: var(--at-verde-texto); }
.selo.neutro { background: var(--at-neutro-fundo); color: var(--at-mudo); }

.inicial {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--at-sobre-verde);
  font-weight: 600;
  font-size: 14px;
}
/* A inicial da ficha: 48 px, ao lado do nome — e não 62 px no meio, empurrando tudo. */
.inicial.grande { width: 48px; height: 48px; font-size: 18px; }

/* A PALETA DA V2 (13 cores), escolhida pelo nome. A letra no círculo é a palavra. */
.inicial.cor-0 { background: #e57373; }
.inicial.cor-1 { background: #f06292; }
.inicial.cor-2 { background: #ba68c8; }
.inicial.cor-3 { background: #9575cd; }
.inicial.cor-4 { background: #7986cb; }
.inicial.cor-5 { background: #5c9ce6; }
.inicial.cor-6 { background: #4db6ac; }
.inicial.cor-7 { background: #66bb6a; }
.inicial.cor-8 { background: #9ccc65; }
.inicial.cor-9 { background: #ffa726; }
.inicial.cor-10 { background: #ff8a65; }
.inicial.cor-11 { background: #a1887f; }
.inicial.cor-12 { background: #78909c; }

/* ---------------------------------------------------------------- os vazios */

.conversa-vazia {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--at-apagado);
}
.conversa-vazia .icone-do-vazio {
  width: 52px; height: 52px; border-radius: 16px; background: var(--at-folha);
  display: flex; align-items: center; justify-content: center;
  color: var(--at-verde-icone); box-shadow: 0 7px 22px rgba(21, 64, 52, .08);
}
.conversa-vazia .icone-do-vazio svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; }
.conversa-vazia > span:last-child { font-size: 11px; color: var(--at-mudo); }

.ficha-vazia { margin: 0; padding: 44px 20px; text-align: center; color: var(--at-apagado); font-size: 11px; }

.fio-vazio {
  margin: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: var(--at-apagado);
}
.fio-vazio b {
  width: 44px; height: 44px; border-radius: 13px; background: var(--at-vidro-do-vazio);
  color: var(--at-verde-icone); display: flex; align-items: center; justify-content: center;
  font-size: 10px; box-shadow: 0 5px 17px rgba(23, 64, 53, .08);
}
.fio-vazio strong { font-size: 11.5px; color: var(--at-mudo); margin-top: 10px; }
.fio-vazio span { font-size: 9.5px; margin-top: 3px; }