/* ---------------------------------------------------------------- as janelas */

/* Fundo escurecido com desfoque, 540 px, canto 16. Fecham com Esc e clicando fora. */
.janela-do-atendimento {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16, 24, 40, .4);
  backdrop-filter: blur(2px);
}
.janela-do-atendimento[hidden] { display: none; }
.janela {
  width: 540px; max-width: 93vw; max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--at-folha); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  color: var(--at-tinta);
}
.cabeca-da-janela {
  padding: 16px 20px; border-bottom: 1px solid var(--at-linha);
  display: flex; justify-content: space-between; align-items: center;
}
.cabeca-da-janela h3 { margin: 0; font-size: 16px; font-weight: 600; }
.fechar-janela {
  border: 0; background: none; color: var(--at-apagado); cursor: pointer;
  font-size: 22px; line-height: 1; padding: 0 4px;
}
.fechar-janela:hover { color: var(--at-tinta); }
.corpo-da-janela { padding: 14px 20px 18px; overflow-y: auto; }
.corpo-da-janela label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--at-mudo); margin: 10px 0 0;
}
.corpo-da-janela input, .corpo-da-janela textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--at-linha); border-radius: 9px;
  font: inherit; font-size: 14px; font-weight: 400; color: var(--at-tinta); background: var(--at-folha);
}
.botoes-da-janela { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.painel-dos-modelos, .lista-das-rapidas { display: grid; gap: 9px; }
.painel-dos-modelos button, .lista-das-rapidas .linha-da-rapida > button:first-child {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--at-linha); border-radius: 11px; background: var(--at-folha);
  padding: 12px 14px; cursor: pointer; font: inherit; color: var(--at-tinta);
}
.painel-dos-modelos button:hover, .lista-das-rapidas .linha-da-rapida > button:first-child:hover {
  border-color: var(--at-verde); background: var(--at-verde-claro);
}
.painel-dos-modelos button b, .lista-das-rapidas button b { display: block; font-size: 14px; font-weight: 600; }
.painel-dos-modelos button span, .lista-das-rapidas button span {
  display: block; margin-top: 3px; font-size: 13px; color: var(--at-mudo); white-space: pre-wrap;
}
.linha-da-rapida { display: flex; gap: 8px; align-items: center; }
.linha-da-rapida > button:first-child { flex: 1; }
.form-da-rapida {
  display: grid; gap: 4px; margin-top: 12px;
  border: 1px dashed var(--at-linha); border-radius: 11px; padding: 12px 14px;
}
.form-da-rapida > b { font-size: 13px; }
.form-da-rapida .btn { justify-self: start; margin-top: 6px; }
.nome-do-arquivo {
  margin: 0; padding: 10px 12px; border-radius: 9px; background: var(--at-so-de-ler);
  font-size: 13px; font-weight: 600; word-break: break-all;
}

/* A webcam do computador (W9.4): controles fora do vídeo, o 16:9 limpo, o rodapé embaixo. */
.janela-da-webcam {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
}
.janela-da-webcam[hidden] { display: none; }

/* Foto | Vídeo à esquerda. O ⚙ fica à direita, na mesma linha. */
.controles-da-webcam {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.wc-vistas {
  display: inline-flex; flex: none; padding: 3px;
  border-radius: 10px; background: var(--at-alternador-fundo);
}
.wc-vistas[hidden] { display: none; }
.wc-vista {
  height: 32px; padding: 0 14px; border: 0; border-radius: 8px;
  background: none; color: var(--at-mudo);
  font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.wc-vista.wc-ativa {
  background: var(--at-alternador-ativo); color: var(--at-tinta);
  box-shadow: 0 1px 4px rgba(21, 46, 39, .12);
}

.quadro-da-webcam {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; background: var(--at-palco-da-webcam);
}
.quadro-da-webcam[hidden] { display: none; }
.quadro-da-webcam video,
.quadro-da-webcam canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; background: var(--at-palco-da-webcam);
}
.quadro-da-webcam video[hidden],
.quadro-da-webcam canvas[hidden] { display: none; }

.aviso-da-webcam { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--at-ambar-texto); }
.aviso-da-webcam[hidden] { display: none; }

/* Rodapé: barrinha e aviso à esquerda (só no Vídeo); botões à direita. */
.pe-da-webcam {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 12px;
}
.pe-da-webcam:not(:has(.nivel-da-webcam:not([hidden]), .tempo-da-webcam:not([hidden]), .botoes-da-janela .btn:not([hidden]))) {
  display: none;
}
.sinais-da-webcam {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0;
}
.sinais-da-webcam:not(:has(.nivel-da-webcam:not([hidden]), .tempo-da-webcam:not([hidden]))) {
  display: none;
}
.nivel-da-webcam {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 16px;
}
.nivel-da-webcam[hidden] { display: none; }
.tempo-da-webcam {
  margin: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--at-tinta);
}
.tempo-da-webcam[hidden] { display: none; }
.janela-da-webcam .botoes-da-janela {
  display: flex; justify-content: flex-end; gap: 8px;
  margin: 0 0 0 auto; flex: none;
}
.janela-da-webcam .botoes-da-janela .btn[hidden] { display: none; }

@media (max-width: 580px) {
  .janela-da-webcam { align-items: stretch; justify-content: flex-start; }
  .janela-da-webcam > .janela {
    width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0;
  }
  .janela-da-webcam .wc-vistas { flex: 1; width: auto; min-width: 0; }
  .janela-da-webcam .wc-vista { flex: 1; }
  .janela-da-webcam .pe-da-webcam { flex-direction: column; align-items: stretch; }
  .janela-da-webcam .botoes-da-janela {
    width: 100%; margin-left: 0; flex-direction: column;
  }
  .janela-da-webcam .botoes-da-janela .btn { width: 100%; }
}
.mudo { color: var(--at-apagado); margin: 0; font-size: 13px; }

/* O RECADO depois de cada ação: o toast escuro da v2, no pé da tela, 2,6 s. No tema
 * escuro ele inverte — escuro sobre escuro não se veria. */
.recado-do-atendimento {
  position: fixed; left: 50%; bottom: 24px; z-index: 99;
  transform: translateX(-50%);
  padding: 12px 20px; border-radius: 10px;
  background: var(--at-recado-fundo); color: var(--at-recado-texto);
  font-size: 13.5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  pointer-events: none;
}

/* ---------------------------------------------------------------- selecionar várias */

/* A caixinha só aparece no modo, e a bolinha de não lidas sai para não disputar o
 * canto com a marca. */
.conversa .caixinha {
  display: none; width: 18px; height: 18px; flex: none; align-self: center;
  border: 2px solid var(--at-linha); border-radius: 5px; background: var(--at-folha);
  color: var(--at-sobre-verde); font-size: 12px; line-height: 14px; text-align: center;
}
.atendimento.selecionando .conversa .caixinha { display: block; }
.atendimento.selecionando .conversa .nao-lidas { display: none; }
.conversa.marcada { background: var(--at-verde-claro); border-color: var(--at-verde-borda); }
.conversa.marcada .caixinha { background: var(--at-verde); border-color: var(--at-verde); }
.conversa.marcada .caixinha::after { content: "✓"; }

.barra-do-lote {
  /* display/align/gap: `.barra-de-controles`; aqui só o encaixe na coluna. */
  padding: 10px 14px; border-top: 1px solid var(--at-linha); background: var(--at-folha);
}
.barra-do-lote[hidden] { display: none; }
.barra-do-lote .quantas { margin-right: auto; font-size: 12.5px; font-weight: 600; color: var(--at-verde-texto); }
.barra-do-lote select, .barra-do-lote button {
  font: inherit; padding: 0 9px; border: 1px solid var(--at-linha);
  border-radius: 8px; background: var(--at-folha); color: var(--at-tinta); cursor: pointer;
}
.barra-do-lote button.principal { background: var(--at-verde); border-color: var(--at-verde); color: var(--at-sobre-verde); }
.tag-do-lote { width: 100%; }
.tag-do-lote[hidden] { display: none; }
.tag-do-lote input { flex: 1; }

/* ---------------------------------------------------------------- o seletor de número */

/* O SELETOR DE NÚMERO no topo da moldura (tarefa 14) — o "BA · Bússola da Alma ⌄"
 * da v2, agora à esquerda de "Todos os projetos". Cores pela régua --at-*.
 * Henrique, 16/10: o balão fica solto, sem o quadrado verde. */
.seletor-do-numero { position: relative; }
.numero-escolhido, .opcao-do-numero {
  display: flex; align-items: center; gap: 8px; text-align: left;
  border: 0; background: transparent; color: var(--at-tinta); font: inherit; cursor: pointer;
}
.numero-escolhido { max-width: 240px; padding: 4px 6px; border-radius: 9px; }
.numero-escolhido:hover,
.numero-escolhido[aria-expanded="true"] { background: var(--at-verde-claro); }
.numero-escolhido > b { font-size: 12px; color: var(--at-mudo); }
.marca-do-numero {
  width: 26px; height: 26px; flex: none;
  background: transparent; color: var(--at-verde);
  display: grid; place-items: center;
}
.marca-do-numero svg {
  width: 26px; height: 26px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.nome-do-numero { display: flex; flex-direction: column; min-width: 0; }
.nome-do-numero strong {
  font-size: 12.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.nome-do-numero small { font-size: 11px; color: var(--at-mudo); white-space: nowrap; }
.numero-escondido { font-style: normal; font-weight: 400; color: var(--at-mudo); font-size: 11px; }
.situacao-do-numero.conectada { color: var(--at-verde); }
.situacao-do-numero.aguardando_qr, .situacao-do-numero.pausada { color: var(--at-ambar-texto); }
.situacao-do-numero.banida { color: var(--at-ruim); }
.situacao-do-numero.desconectada { color: var(--at-mudo); }
.menu-do-numero {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 260px;
  max-height: 360px; overflow-y: auto; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--at-folha); border: 1px solid var(--at-linha); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(13, 48, 42, .14);
}
.menu-do-numero[hidden] { display: none; }
.opcao-do-numero { width: 100%; padding: 7px 8px; border-radius: 9px; }
.opcao-do-numero:hover { background: var(--at-verde-claro); }
.opcao-do-numero.escolhida { background: var(--at-verde-claro); color: var(--at-verde-texto); }

/* ---------------------------------------------------------------- a ficha */

/* A FICHA COM RESPIRO (tarefa 15): inicial 48 px, nome 17/800, seções com 16 px
 * entre elas e linha fina; campos de 36 px e canto 10 px; padding 16 px. A largura
 * da coluna (300 px) não muda. */
.cabeca-da-ficha {
  padding: 16px;
  display: flex; align-items: flex-start; gap: 12px;
  border-bottom: 1px solid var(--at-linha);
}
.quem-da-ficha { min-width: 0; flex: 1; }
.cabeca-da-ficha .nome {
  display: block; font-size: 17px; font-weight: 800; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.linha-do-telefone {
  margin: 4px 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
}
.cabeca-da-ficha .telefone { color: var(--at-mudo); font-size: 12px; }
.copiar-telefone {
  width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--at-apagado); cursor: pointer;
  display: inline-grid; place-items: center;
}
.copiar-telefone:hover { background: var(--at-suave); color: var(--at-verde-texto); }
.copiar-telefone svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.linha-do-atendente { margin: 8px 0 0; }
.cabeca-da-ficha .selo {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px; font-style: normal; cursor: pointer;
}
.cabeca-da-ficha .selo:hover { filter: brightness(.97); }

.bloco-da-ficha {
  padding: 16px;
  border-bottom: 1px solid var(--at-linha);
}
.bloco-da-ficha + .bloco-da-ficha { margin-top: 0; }
.bloco-da-ficha h3 {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--at-apagado);
}
.bloco-da-ficha p { margin: 0; font-size: 12px; }
.bloco-da-ficha input, .bloco-da-ficha select, .bloco-da-ficha textarea {
  width: 100%;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid var(--at-linha);
  border-radius: 10px;
  font: inherit;
  font-size: 12px;
  color: var(--at-tinta);
  background: var(--at-folha);
  outline: none;
  box-sizing: border-box;
}
.bloco-da-ficha textarea {
  min-height: calc(1.4em * 2 + 16px);
  max-height: calc(1.4em * 5 + 16px);
  resize: none; line-height: 1.4;
}
.bloco-da-ficha input:focus, .bloco-da-ficha select:focus, .bloco-da-ficha textarea:focus {
  border-color: var(--at-verde);
}
.bloco-da-ficha input.so-de-ler { background: var(--at-so-de-ler); color: var(--at-mudo); cursor: default; }
.bloco-da-ficha input.so-de-ler:focus { border-color: var(--at-linha); }

.campo-da-ficha { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.campo-da-ficha:last-of-type { margin-bottom: 0; }
.rotulo-do-campo {
  font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--at-apagado);
}
.campo-da-ficha .valor-do-campo {
  min-height: 36px; margin: 0; padding: 8px 11px;
  border: 1px solid transparent; border-radius: 10px;
  font: inherit; font-size: 12px; color: var(--at-tinta);
  text-align: left; background: var(--at-suave); cursor: text;
  box-sizing: border-box; width: 100%;
}
button.valor-do-campo:hover { border-color: var(--at-linha); background: var(--at-folha); }
.campo-da-ficha.so-leitura .valor-do-campo {
  background: var(--at-so-de-ler); color: var(--at-mudo); cursor: default;
}
.campo-da-ficha .input-do-campo[hidden],
.campo-da-ficha .valor-do-campo[hidden] { display: none; }
.acoes-do-contato {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;
}
.acoes-do-contato[hidden] { display: none; }
.acoes-do-contato .btn {
  min-height: 0; font-size: 11px; font-weight: 600;
  padding: 6px 12px; border-radius: 10px;
}

.cartao-do-negocio .valor-do-negocio {
  margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--at-tinta);
}
.cartao-do-negocio .abrir-negocio {
  display: inline-block; margin: 0 0 10px;
  font-size: 12px; font-weight: 600; color: var(--at-verde-texto); text-decoration: none;
}
.cartao-do-negocio .abrir-negocio:hover { text-decoration: underline; }
.cartao-do-negocio .mudo { margin-bottom: 10px; }
.cartao-do-negocio select { margin-top: 0; }

.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tags .selo.tag {
  font-size: 11px; font-weight: 500; padding: 5px 10px; border-radius: 20px; font-style: normal;
}
.tag-nova {
  border: 1px dashed var(--at-linha); background: transparent; color: var(--at-mudo);
  border-radius: 20px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: 11px;
}
.tag-nova:hover { border-color: var(--at-verde); color: var(--at-verde-texto); }
.caixa-da-tag { width: 100%; margin-top: 8px; }
.caixa-da-tag[hidden] { display: none; }
.caixa-da-tag input { flex: 1; }
.tirar-tag {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font: inherit; padding: 0 0 0 4px; opacity: .6;
}
.tirar-tag:hover { opacity: 1; }

.dobra > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.dobra > summary::-webkit-details-marker { display: none; }
.dobra > summary h3 { margin: 0; }
.dobra > summary .seta { color: var(--at-apagado); font-size: 12px; line-height: 1; transition: transform .15s; }
.dobra:not([open]) > summary .seta { transform: rotate(-90deg); }
.dobra[open] > summary { margin-bottom: 10px; }
.campos-da-ficha { display: flex; flex-direction: column; gap: 10px; }
.campo-so-de-ler { display: flex; flex-direction: column; gap: 4px; }
.campo-so-de-ler > span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--at-apagado);
}

.notas { display: flex; flex-direction: column; gap: 8px; }
.nota-interna {
  background: var(--at-ambar-fundo); color: var(--at-nota-texto);
  border-radius: 10px; padding: 10px 12px;
}
.nota-interna[hidden] { display: none; }
.nota-interna p { margin: 0; font-size: 12px; }
.nota-interna .quem-da-nota { margin-top: 4px; font-size: 10px; color: var(--at-nota-quem); }
.ver-todas {
  align-self: flex-start; border: 0; background: transparent; padding: 2px 0;
  color: var(--at-verde-texto); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
}
.ver-todas:hover { text-decoration: underline; }
.nova-nota {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px;
}
.nova-nota textarea { width: 100%; }
.nova-nota .btn {
  align-self: flex-end; font-size: 11px; font-weight: 600;
  padding: 7px 14px; border-radius: 10px;
}
.bloco-da-ficha .mudo { font-size: 12px; color: var(--at-apagado); }

/* ---------------------------------------------------------------- três tamanhos de tela */

/* Até 1.250 px some a ficha. */
@media (max-width: 1250px) {
  .atendimento-ficha { display: none; }
  .atendimento-lista { width: 310px; flex-basis: 310px; }
}

/* Até 930 px: atos só com ícone (title no botão); some a dica do Enter. */
@media (max-width: 930px) {
  #conteudo:has(.atendimento) { padding: 8px; }
  .atendimento-lista { width: 275px; flex-basis: 275px; }
  .atendimento-conversa { min-width: 320px; }
  .ato-etiqueta, .ato-botao:not(.ato-mais) { padding: 0; width: 32px; }
  .atos-da-conversa .palavra-do-ato,
  .atos-da-conversa .texto-do-ato,
  .ato-etiqueta > b { display: none; }
  .dica-do-enter { display: none; }
  .anexo-da-conversa { grid-template-columns: 1fr; }
}

/* Até 700 px: ⋯ junta Não lida / Devolver·Assumir; some a etiqueta das linhas. */
@media (max-width: 700px) {
  #conteudo:has(.atendimento) { padding: 0; }
  .atendimento { border-radius: 0; border-width: 1px 0 0; box-shadow: none; }
  .atendimento-lista { width: 245px; flex-basis: 245px; }
  .titulo-da-caixa p { display: none; }
  .abas-da-caixa, .topo-da-busca { padding-left: 7px; padding-right: 7px; }
  .conversa { padding: 8px; }
  .conversa .meta { display: none; }
  .atendimento-conversa { min-width: 280px; }
  .atos-da-conversa .some-no-celular { display: none; }
  .atos-extras { display: block; }
  .fios { padding-left: 15px; padding-right: 15px; }
  /* No celular o "+" ocupa a largura do rodapé. */
  .menu-do-mais {
    left: 0; right: 0; width: auto; max-width: none;
    border-radius: 14px 14px 0 0; border-width: 1px 0 0;
  }
  .menu-do-mais button { padding: 11px 14px; font-size: 13px; }
  /* No celular a caixinha de emojis ocupa a largura da tela. */
  .caixa-de-emojis {
    position: fixed; left: 0; right: 0; bottom: 64px;
    width: auto; max-width: none; border-radius: 14px 14px 0 0;
  }
  .faixa-do-ensaio, .faixa-da-janela, .atendimento-conversa > .recado { margin-left: 8px; margin-right: 8px; }
}