/* O VISUAL NOVO — o Atendimento, parte 2 — agente 3.
 * A primeira folha (visual-novo-atendimento.css) passou de 800 linhas; aqui moram a ficha,
 * o "selecionar várias", o seletor do número, as janelas próprias e o recado. Os tokens
 * --vn-at-* e os tamanhos de tela (inclusive a ficha que abre por botão) ficam na primeira.
 * Tudo atrás de html[data-visual="novo"]. Esta folha entra no index logo depois da primeira. */

/* =================================================================== 7. A ficha */

html[data-visual="novo"] .cabeca-da-ficha { align-items: center; gap: 12px; padding: 20px 18px 10px; border-bottom: 0; }
html[data-visual="novo"] .atendimento .inicial.grande { width: 52px; height: 52px; font-size: 16px; }
html[data-visual="novo"] .cabeca-da-ficha .nome { font-size: 16px; font-weight: 600; color: var(--vn-tinta); }
html[data-visual="novo"] .cabeca-da-ficha .telefone { color: var(--vn-cinza); font-size: 13px; }
html[data-visual="novo"] .copiar-telefone { width: 26px; height: 26px; color: var(--vn-cinza2); }
html[data-visual="novo"] .copiar-telefone:hover { background: var(--vn-suave); color: var(--vn-at-verde-texto); }
html[data-visual="novo"] .cabeca-da-ficha .selo { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
html[data-visual="novo"] .bloco-da-ficha { padding: 4px 18px 12px; border-bottom: 0; }

/* O rótulo da seção, pequeno, com o ícone colorido: Dados azul, Negócio laranja, Tags
 * turquesa, Notas roxo, Campos rosa. A seção é reconhecida pelo que tem dentro (:has). */
html[data-visual="novo"] .bloco-da-ficha h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 8px;
  color: var(--vn-cinza2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
html[data-visual="novo"] .bloco-da-ficha h3::before {
  content: "•";
  flex: none;
  width: 20px; height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--vn-cinza2);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
html[data-visual="novo"] .bloco-da-ficha:has(.campo-da-ficha) h3::before { content: "i"; background: var(--vn-azul); }
html[data-visual="novo"] .cartao-do-negocio h3::before { content: "◆"; background: var(--vn-laranja); font-size: 9px; }
html[data-visual="novo"] .bloco-da-ficha:has(> .tags) h3::before { content: "#"; background: var(--vn-teal); }
html[data-visual="novo"] .bloco-da-ficha:has([data-dobra="notas"]) h3::before { content: "✎"; background: var(--vn-roxo); }
html[data-visual="novo"] .bloco-da-ficha:has([data-dobra="campos"]) h3::before { content: "≡"; background: var(--vn-rosa); }
html[data-visual="novo"] .dobra > summary h3 { margin: 10px 0 0; }
html[data-visual="novo"] .dobra[open] > summary { margin-bottom: 8px; }
html[data-visual="novo"] .dobra > summary .seta { color: var(--vn-cinza2); }

/* Os campos em quadradinhos cinza-claros: o nome à esquerda, o valor à direita. */
html[data-visual="novo"] .campo-da-ficha {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  margin-bottom: 6px;
  padding: 0 4px 0 12px;
  border-radius: 9px;
  background: var(--vn-suave);
}
html[data-visual="novo"] .rotulo-do-campo {
  flex: none;
  color: var(--vn-tinta);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
html[data-visual="novo"] .campo-da-ficha .valor-do-campo {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  padding: 6px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--vn-cinza);
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-visual="novo"] button.valor-do-campo:hover { background: var(--vn-placa); color: var(--vn-tinta); }
html[data-visual="novo"] .campo-da-ficha.so-leitura .valor-do-campo { background: transparent; color: var(--vn-cinza); }
html[data-visual="novo"] .campo-da-ficha .input-do-campo { flex: 1; min-width: 0; min-height: 32px; margin: 4px 0; }
html[data-visual="novo"] .acoes-do-contato { margin-top: 10px; }
html[data-visual="novo"] .acoes-do-contato .btn,
html[data-visual="novo"] .nova-nota .btn {
  min-height: 32px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
}
html[data-visual="novo"] .bloco-da-ficha input,
html[data-visual="novo"] .bloco-da-ficha select,
html[data-visual="novo"] .bloco-da-ficha textarea {
  border: 0;
  border-radius: 9px;
  background: var(--vn-suave);
  color: var(--vn-tinta);
  font-size: 13px;
}
html[data-visual="novo"] .bloco-da-ficha .campo-da-ficha .input-do-campo { background: var(--vn-placa); }
html[data-visual="novo"] .bloco-da-ficha input:focus,
html[data-visual="novo"] .bloco-da-ficha select:focus,
html[data-visual="novo"] .bloco-da-ficha textarea:focus { background: var(--vn-placa); box-shadow: 0 0 0 2px rgba(4, 122, 142, .3); }
html[data-visual="novo"] .bloco-da-ficha select { min-height: 40px; }
html[data-visual="novo"] .bloco-da-ficha input.so-de-ler { background: var(--vn-suave); color: var(--vn-cinza); }
html[data-visual="novo"] .bloco-da-ficha input.so-de-ler:focus { box-shadow: none; }
html[data-visual="novo"] .bloco-da-ficha .mudo { color: var(--vn-cinza); font-size: 13px; }
html[data-visual="novo"] .cartao-do-negocio .mudo {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--vn-suave);
  color: var(--vn-tinta);
}
html[data-visual="novo"] .cartao-do-negocio .valor-do-negocio { color: var(--vn-tinta); font-size: 15px; font-weight: 600; }
html[data-visual="novo"] .cartao-do-negocio .abrir-negocio { color: var(--vn-azul); font-size: 13px; font-weight: 500; }
html[data-visual="novo"] .campo-so-de-ler > span { color: var(--vn-cinza); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* As tags em pílula, e o "+ tag" discreto */
html[data-visual="novo"] .tags { gap: 8px; }
html[data-visual="novo"] .tags .selo.tag { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
html[data-visual="novo"] .tag-nova {
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--vn-suave);
  color: var(--vn-cinza);
  font-size: 12px;
  font-weight: 500;
}
html[data-visual="novo"] .tag-nova:hover { background: var(--vn-verde-s); color: var(--vn-at-verde-texto); }

/* As notas, e o "Adicionar" verde largo */
html[data-visual="novo"] .nota-interna { border-radius: 9px; background: var(--vn-amarelo-s); color: var(--vn-tinta); }
html[data-visual="novo"] .nota-interna p { font-size: 13px; }
html[data-visual="novo"] .nota-interna .quem-da-nota { color: var(--vn-at-ambar-texto); font-size: 11px; }
html[data-visual="novo"] .ver-todas { color: var(--vn-at-verde-texto); font-size: 12px; }
html[data-visual="novo"] .nova-nota { gap: 8px; margin-top: 10px; }
html[data-visual="novo"] .nova-nota textarea { min-height: 64px; padding: 10px 12px; }
html[data-visual="novo"] .nova-nota .btn {
  align-self: stretch;
  justify-content: center;
  min-height: 40px;
  border-radius: 9px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(4, 122, 142, .3);
}
html[data-visual="novo"] .ficha-vazia { color: var(--vn-cinza); font-size: 13px; }

/* =================================================================== 8. Selecionar várias */

html[data-visual="novo"] .barra-do-lote { padding: 10px 14px; border-top: 1px solid var(--vn-fio); background: var(--vn-placa); }
html[data-visual="novo"] .barra-do-lote .quantas { color: var(--vn-at-verde-texto); font-size: 13px; }
html[data-visual="novo"] .barra-do-lote select,
html[data-visual="novo"] .barra-do-lote button {
  border: 0;
  border-radius: 9px;
  background: var(--vn-placa);
  box-shadow: var(--vn-at-anel);
  color: var(--vn-tinta);
}
html[data-visual="novo"] .barra-do-lote button.principal { background: var(--sag-green); box-shadow: none; color: #fff; }

/* =================================================================== 9. O seletor do número (na moldura) */

html[data-visual="novo"] .numero-escolhido { padding: 4px 10px 4px 6px; background: var(--vn-placa); box-shadow: var(--vn-at-anel); }
html[data-visual="novo"] .numero-escolhido:hover,
html[data-visual="novo"] .numero-escolhido[aria-expanded="true"] { background: var(--vn-folha); }
html[data-visual="novo"] .marca-do-numero { color: var(--sag-green); }
html[data-visual="novo"] .opcao-do-numero:hover { background: var(--vn-suave); }
html[data-visual="novo"] .opcao-do-numero.escolhida { background: var(--vn-verde-s); color: var(--vn-at-verde-texto); }
html[data-visual="novo"] .situacao-do-numero.conectada { color: var(--vn-at-verde-texto); }
html[data-visual="novo"] .situacao-do-numero.aguardando_qr,
html[data-visual="novo"] .situacao-do-numero.pausada { color: var(--vn-at-ambar-texto); }
html[data-visual="novo"] .situacao-do-numero.banida { color: var(--vn-vermelho); }

/* =================================================================== 10. As janelas próprias */

/* Modelos aprovados, Respostas rápidas, Agendar mensagem, Enviar arquivo e Câmera: a cara da
 * janela comum do visual novo — branca, canto 16, sombra leve, × redondo discreto. */
html[data-visual="novo"] .janela-do-atendimento { background: rgba(28, 28, 30, .28); backdrop-filter: blur(2px); }
html[data-visual="novo"] .janela-da-webcam { background: rgba(28, 28, 30, .28); }
html[data-visual="novo"] .janela-do-atendimento > .janela {
  border-radius: var(--vn-raio-painel);
  background: var(--vn-placa);
  box-shadow: 0 0 0 1px var(--vn-fio), 0 24px 64px rgba(0, 0, 0, .14);
  color: var(--vn-tinta);
}
html[data-visual="novo"] .janela-do-atendimento .cabeca-da-janela { padding: 18px 18px 8px 22px; border-bottom: 0; }
html[data-visual="novo"] .janela-do-atendimento .cabeca-da-janela h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
html[data-visual="novo"] .janela-do-atendimento .fechar-janela {
  width: 32px; height: 32px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--vn-suave);
  color: var(--vn-cinza);
  font-size: 16px;
}
html[data-visual="novo"] .janela-do-atendimento .fechar-janela:hover { background: var(--vn-fundo); color: var(--vn-tinta); }
html[data-visual="novo"] .janela-do-atendimento .corpo-da-janela { padding: 6px 22px 22px; }
html[data-visual="novo"] .janela-do-atendimento .corpo-da-janela label { gap: 8px; margin-top: 12px; color: var(--vn-cinza); font-size: 13px; font-weight: 500; }
html[data-visual="novo"] .janela-do-atendimento .corpo-da-janela input,
html[data-visual="novo"] .janela-do-atendimento .corpo-da-janela textarea {
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: var(--vn-suave);
  color: var(--vn-tinta);
}
html[data-visual="novo"] .janela-do-atendimento .corpo-da-janela input:focus,
html[data-visual="novo"] .janela-do-atendimento .corpo-da-janela textarea:focus {
  outline: none;
  background: var(--vn-placa);
  box-shadow: 0 0 0 2px rgba(4, 122, 142, .3);
}
html[data-visual="novo"] .janela-do-atendimento .botoes-da-janela { margin-top: 18px; }
html[data-visual="novo"] .painel-dos-modelos button,
html[data-visual="novo"] .lista-das-rapidas .linha-da-rapida > button:first-child {
  border: 0;
  border-radius: 12px;
  background: var(--vn-folha);
  box-shadow: inset 0 0 0 1px var(--vn-fio);
}
html[data-visual="novo"] .painel-dos-modelos button:hover,
html[data-visual="novo"] .lista-das-rapidas .linha-da-rapida > button:first-child:hover {
  background: var(--vn-verde-s);
  box-shadow: inset 0 0 0 1px rgba(4, 122, 142, .35);
}
html[data-visual="novo"] .painel-dos-modelos button span,
html[data-visual="novo"] .lista-das-rapidas button span { color: var(--vn-cinza); }
html[data-visual="novo"] .form-da-rapida { border: 1px dashed rgba(0, 0, 0, .12); border-radius: 12px; padding: 14px 16px; }
html[data-visual="novo"] .form-da-rapida > b { font-size: 14px; font-weight: 600; }
html[data-visual="novo"] .nome-do-arquivo { border-radius: 9px; background: var(--vn-suave); }
html[data-visual="novo"] .wc-vistas { border-radius: 9px; background: var(--vn-suave); }
html[data-visual="novo"] .wc-vista { color: var(--vn-cinza); font-size: 13px; font-weight: 600; }
html[data-visual="novo"] .wc-vista.wc-ativa { background: var(--vn-placa); color: var(--vn-tinta); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
html[data-visual="novo"] .aviso-da-webcam { color: var(--vn-at-ambar-texto); font-size: 13px; }
html[data-visual="novo"] .tempo-da-webcam { font-weight: 600; }

/* O recado de sucesso do Atendimento: deixa de ser o toast preto — cartão branco leve. */
html[data-visual="novo"] .recado-do-atendimento {
  border-radius: 12px;
  background: var(--vn-placa);
  color: var(--vn-tinta);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 0 0 1px var(--vn-fio), 0 12px 32px rgba(0, 0, 0, .12);
}

/* O ACABAMENTO DO ATENDIMENTO (revisão tela a tela, 06/11). */
/* As cinco abas da caixa cabem na coluna: "Todas" saía cortada. */
html[data-visual="novo"] .abas-da-caixa .aba { padding: 6px 8px; font-size: 12px; }
/* Os atos da conversa estouravam a coluna no monitor comum: "Não lida" e "Devolver" vão para o "⋯"
 * que o celular já usa; no monitor largo eles voltam a ficar à vista. */
@media (min-width: 701px) and (max-width: 1560px) {
  html[data-visual="novo"] .atos-da-conversa .some-no-celular { display: none; }
  html[data-visual="novo"] .atos-extras { display: block; }
  /* Os atos descem para a linha de baixo: ao lado, eles cortavam o nome do contato ("Suporte M…"). */
  html[data-visual="novo"] .cabeca-da-conversa .atos-da-conversa { flex: 1 0 100%; justify-content: flex-start; margin-left: 0; }
}
/* "Sem negócio aberto" aparecia duas vezes: no texto e na lista logo abaixo. */
html[data-visual="novo"] .cartao-do-negocio:has(select) > p.mudo { display: none; }
html[data-visual="novo"] .cartao-do-negocio > p.mudo + p { display: none; }
/* O contador de não lidas fica embaixo da hora, como no WhatsApp: no canto de baixo ele empurrava os
 * selos para uma segunda linha, e cada conversa ocupava mais altura do que precisava. */
html[data-visual="novo"] .atendimento .conversa .meta { padding-right: 0; }
html[data-visual="novo"] .atendimento .nao-lidas { top: 30px; right: 10px; bottom: auto; }
html[data-visual="novo"] .atendimento .conversa:has(.nao-lidas) .previa { padding-right: 28px; }
/* O bloco do Negócio tinha fundo e canto próprios; agora é igual aos outros blocos da ficha. */
html[data-visual="novo"] .bloco-da-ficha.cartao-do-negocio { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
/* No celular os atos ficavam por cima do nome do contato: descem para a linha de baixo. E a frase do
 * campo de escrever não quebra em duas linhas. */
@media (max-width: 700px) {
  html[data-visual="novo"] .cabeca-da-conversa { flex-wrap: wrap; }
  html[data-visual="novo"] .cabeca-da-conversa .atos-da-conversa { position: static; flex: 1 1 calc(100% - 52px); justify-content: flex-start; margin: 0; }
  html[data-visual="novo"] .rodape-da-conversa textarea::placeholder { white-space: nowrap; }
}