/* Central de Atendimento
   Ferramenta interna. A prioridade aqui é ler rápido e responder sem erro,
   não impressionar. Marca do escritório: bordô #6E1B2D. */

:root {
  --bordo: #6E1B2D;
  --bordo-claro: #8E2A3E;
  --bordo-fraco: #F6ECEE;

  --tinta: #1C1E21;
  --tinta-media: #5B6270;
  --tinta-fraca: #8A93A3;

  --papel: #FFFFFF;
  --fundo: #F2F3F5;
  --fundo-medio: #E9EBEF;
  --linha: #DFE2E8;

  --minha: #E7F1E4;
  --dela: #FFFFFF;

  --verde: #2E7D4F;
  --ambar: #B7791F;

  --fonte: "Segoe UI", system-ui, -apple-system, sans-serif;
  --raio: 8px;
  --sombra: 0 1px 3px rgba(20, 24, 33, .10);

  --col-contas: 220px;
  --col-lista: 330px;
}

* { box-sizing: border-box; }

/* o hidden tem de vencer qualquer display declarado depois */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--fonte);
  font-size: 14px;
  color: var(--tinta);
  background: var(--fundo);
  overflow: hidden;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---------------- entrada ---------------- */

.entrada {
  display: grid;
  place-items: center;
  height: 100%;
  background: linear-gradient(160deg, #2A0C14 0%, #6E1B2D 100%);
  overflow: auto;
}

.cartao-entrada {
  width: min(400px, 92vw);
  background: var(--papel);
  border-radius: 12px;
  padding: 40px 34px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.cartao-entrada h1 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.cartao-entrada .sub {
  margin: 0 0 28px;
  color: var(--tinta-media);
  font-size: 13px;
}

.campo { margin-bottom: 16px; }
.campo label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta-media);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.campo input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #FBFBFC;
}
.campo input:focus {
  outline: none;
  border-color: var(--bordo);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(110, 27, 45, .10);
}

/* rodapé da lista, com o que saiu da fila */
.lista__pe {
  padding: 8px 12px;
  border-top: 1px solid var(--linha);
  background: #FAFAFB;
  font-size: 12px;
  color: var(--tinta-fraca);
  display: flex;
  gap: 12px;
}
.lista__pe button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--tinta-media);
  font-size: 12px;
  text-decoration: underline;
}
.lista__pe button:hover { color: var(--bordo); }

/* achados dentro das mensagens */
.achados { border-top: 1px solid var(--linha); }
.achados__titulo {
  padding: 9px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  background: #FAFAFB;
}
.achado {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid #F0F1F4;
  background: transparent;
  text-align: left;
}
.achado:hover { background: var(--bordo-fraco); }
.achado__linha1 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
}
.achado__quando { font-size: 11px; color: var(--tinta-fraca); font-weight: 400; }
.achado__trecho {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--tinta-media);
  line-height: 1.4;
}
.achado__trecho mark { background: #FBE9A8; padding: 0 1px; }

/* etiquetas */
.etiqueta {
  display: inline-block;
  margin: 3px 3px 0 0;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
}

.etiquetas-lista { margin-bottom: 14px; }
.etiqueta-opcao {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 4px;
  border-bottom: 1px solid #F0F1F4;
  font-size: 13px;
  cursor: pointer;
}
.etiqueta-opcao:hover { background: #FAFAFB; }
.etiqueta-opcao input { accent-color: var(--bordo); }
.etiqueta-opcao .bolinha {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex: none;
}
.etiqueta-opcao .quantas { margin-left: auto; font-size: 11px; color: var(--tinta-fraca); }
.etiqueta-opcao .apagar {
  border: 0; background: none; color: var(--tinta-fraca); font-size: 11px;
  text-decoration: underline;
}
.etiqueta-opcao .apagar:hover { color: #9B2226; }

.etiqueta-nova { display: flex; gap: 8px; }
.etiqueta-nova input[type="text"], .etiqueta-nova #etiquetaNova { flex: 1; }
.etiqueta-nova input[type="color"] {
  width: 42px;
  padding: 2px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #fff;
}
.etiqueta-nova .botao { width: auto; padding: 10px 16px; }

/* situação da conversa */
.conversa__situacao {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--verde);
  font-weight: 600;
}
.conversa__situacao--adiada { color: var(--ambar); }
.conversa__situacao--aguardando { color: #2B6CB0; }
.conversa__situacao--remarketing { color: #7B3FA0; }

/* opções de cada conversa na lista */
.conversa { position: relative; }
.conversa__opcoes {
  position: absolute;
  top: 8px;
  right: 6px;
  display: none;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--papel);
  color: var(--tinta-fraca);
  box-shadow: 0 1px 3px rgba(20, 24, 33, .2);
}
.conversa:hover .conversa__opcoes { display: grid; }
.conversa__opcoes:hover { color: var(--bordo); }
.conversa__opcoes svg { width: 15px; height: 15px; }

.alfinete {
  width: 12px; height: 12px;
  margin-right: 3px;
  color: var(--bordo);
  vertical-align: -1px;
}

/* o que apaga fica visualmente separado do resto */
.menu__perigo { color: #9B2226 !important; }
.menu__perigo:hover { background: #FDECEC !important; color: #9B2226 !important; }

.botao--perigo { background: #9B2226; }
.botao--perigo:hover { background: #B02A2E; }

.alerta {
  margin: 4px 0 16px;
  padding: 12px 14px;
  border: 1px solid #F0D0D0;
  border-radius: var(--raio);
  background: #FDF5F5;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tinta-media);
}
.alerta ul, .alerta ol { margin: 6px 0 0; padding-left: 18px; }

.alerta--lembrete {
  border-color: #D8E3D8;
  background: #F3F8F3;
}
.alerta--lembrete b { display: block; margin-bottom: 8px; color: var(--verde); }
.alerta--lembrete .lembrete { margin: 0; }
.alerta li { margin-bottom: 4px; }

/* menus suspensos */
.menu {
  position: absolute;
  z-index: 40;
  min-width: 250px;
  padding: 6px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
  box-shadow: 0 10px 30px rgba(20, 24, 33, .16);
}
.menu button {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  font-size: 13px;
  color: var(--tinta);
}
.menu button:hover { background: var(--bordo-fraco); color: var(--bordo); }

.painel__topo { position: relative; }
#menuConversa { top: calc(100% - 4px); right: 18px; }
.menu--conversa { position: fixed; min-width: 220px; }
.menu--envio { bottom: calc(100% + 8px); left: 18px; }
.envio { position: relative; }

/* ações da própria mensagem */
.balao { position: relative; }
.balao__acoes {
  position: absolute;
  top: 4px;
  right: 6px;
  display: none;
  gap: 2px;
  padding: 2px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 4px rgba(20, 24, 33, .18);
}
.balao:hover .balao__acoes { display: flex; }
.balao__acoes button {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 14px;
  line-height: 1;
  color: var(--tinta-media);
}
.balao__acoes button:hover { background: var(--fundo-medio); }
.balao__acoes svg { width: 14px; height: 14px; }

.emojis {
  position: absolute;
  z-index: 45;
  display: flex;
  gap: 2px;
  padding: 5px 7px;
  border: 1px solid var(--linha);
  border-radius: 22px;
  background: var(--papel);
  box-shadow: 0 8px 22px rgba(20, 24, 33, .18);
}
.emojis button {
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 19px;
  line-height: 1;
}
.emojis button:hover { background: var(--fundo); transform: scale(1.15); }

/* agendamento */
.janela__cartao--largo { width: min(520px, 94vw); max-height: 90vh; overflow-y: auto; }

.atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.atalhos button {
  padding: 5px 10px;
  border: 1px solid var(--linha);
  border-radius: 20px;
  background: var(--papel);
  font-size: 12px;
  color: var(--tinta-media);
}
.atalhos button:hover { border-color: var(--bordo); color: var(--bordo); }

.dica-campo { margin: 6px 0 0; font-size: 11.5px; color: var(--tinta-fraca); }

.campo input[type="datetime-local"], .campo input[type="file"], .campo select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #FBFBFC;
}
.campo textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #FBFBFC;
  resize: vertical;
  line-height: 1.5;
}

.agendados { margin-top: 18px; border-top: 1px solid var(--linha); padding-top: 14px; }
.agendados h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.agendado {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 10px;
  margin-bottom: 7px;
  border: 1px solid var(--linha);
  border-radius: 7px;
  background: #FBFBFC;
  font-size: 12.5px;
}
.agendado__quando { font-weight: 600; color: var(--bordo); white-space: nowrap; }
.agendado__texto { flex: 1; color: var(--tinta-media); }
.agendado__arquivo { display: block; font-size: 11.5px; color: var(--tinta-fraca); margin-top: 2px; }
.agendado__cancelar {
  border: 0;
  background: none;
  color: var(--tinta-fraca);
  font-size: 11.5px;
  text-decoration: underline;
}
.agendado__cancelar:hover { color: #9B2226; }

/* anexo e gravação */
.icone--envio {
  width: 42px;
  height: 44px;
  flex: none;
  border-radius: 8px;
}

.anexo-previa {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--fundo);
}
.anexo-previa__corpo { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.anexo-previa img {
  width: 52px; height: 52px;
  object-fit: cover;
  border-radius: 6px;
  flex: none;
}
.anexo-previa__nome {
  font-size: 13px;
  font-weight: 500;
  word-break: break-all;
}
.anexo-previa__peso { font-size: 11.5px; color: var(--tinta-fraca); }
.anexo-previa__tirar {
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--tinta-fraca);
  padding: 0 4px;
}
.anexo-previa__tirar:hover { color: #9B2226; }

.gravando {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid #E8C9C9;
  border-radius: var(--raio);
  background: #FDF3F3;
  font-size: 13px;
  color: var(--tinta-media);
}
.gravando__ponto {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #C0392B;
  animation: pulsar 1.2s ease-in-out infinite;
}
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.gravando__cancelar, .gravando__enviar {
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--papel);
  font-size: 12.5px;
}
.gravando__enviar {
  margin-left: 0;
  border-color: var(--bordo);
  background: var(--bordo);
  color: #fff;
  font-weight: 500;
}

.baixar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 3px 8px;
  border: 1px solid var(--linha);
  border-radius: 5px;
  background: var(--papel);
  color: var(--tinta-media);
  font-size: 11.5px;
  text-decoration: none;
}
.baixar:hover { color: var(--bordo); border-color: var(--bordo); }
.baixar svg { width: 13px; height: 13px; }

/* procurar e escrever para um número */
.lista__procura { display: flex; gap: 8px; }
.lista__procura .busca { flex: 1; }

.nova-conversa {
  width: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--bordo);
  color: #fff;
}
.nova-conversa:hover { background: var(--bordo-claro); }
.nova-conversa svg { width: 18px; height: 18px; }

/* telefone dentro da mensagem */
.balao__texto a.fone {
  border-bottom: 1px dashed currentColor;
  text-decoration: none;
  white-space: nowrap;
}

/* assinatura */
.envio__pe {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--tinta-fraca);
}
.assinatura {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--tinta-media);
}
.assinatura input { accent-color: var(--bordo); }
.assinatura b { color: var(--bordo); }
.assinatura__editar {
  border: 0;
  background: none;
  padding: 0;
  color: var(--tinta-fraca);
  font-size: 11.5px;
  text-decoration: underline;
}
.assinatura__editar:hover { color: var(--bordo); }

/* assinatura própria de uma conversa */
.assinatura__propria {
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--bordo-fraco);
  color: var(--bordo);
  font-size: 10.5px;
  font-weight: 600;
}
.campo .escolha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta);
  cursor: pointer;
}
/* `.campo input` estica todo campo à largura inteira, e o redondo também */
.campo .escolha input { width: auto; flex: none; margin: 0; padding: 0; accent-color: var(--bordo); }
.envio__pe .envio__dica { margin: 0 0 0 auto; }

.previa {
  margin: 4px 0 2px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--minha);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* mostrar a senha: botão com o texto escrito, logo abaixo do campo */
.mostrar-senha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  padding: 4px 8px 4px 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--tinta-media);
  font-size: 12.5px;
  line-height: 1;
}
.mostrar-senha svg { width: 16px; height: 16px; flex: none; }
.mostrar-senha:hover { color: var(--bordo); background: var(--fundo); }
.mostrar-senha--ativo { color: var(--bordo); font-weight: 500; }
.mostrar-senha:focus-visible { outline: 2px solid var(--bordo); outline-offset: 1px; }

.botao {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: var(--raio);
  background: var(--bordo);
  color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
  transition: background .2s;
}
.botao:hover { background: var(--bordo-claro); }
.botao:disabled { opacity: .6; cursor: default; }

.aviso {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--raio);
  background: #FDECEC;
  color: #9B2226;
  font-size: 13px;
}
.aviso[hidden] { display: none; }

.aviso--bom {
  background: #EAF6EE;
  color: #1F6B3F;
}

.rodape-link {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--tinta-fraca);
}
.rodape-link a { color: var(--bordo); text-decoration: none; }
.rodape-link a:hover { text-decoration: underline; }
.rodape-link .separador { margin: 0 8px; }

/* ---------------- moldura ---------------- */

.moldura {
  display: grid;
  grid-template-columns: var(--col-contas) 6px var(--col-lista) 6px 1fr;
  height: 100%;
}

/* ---------------- puxadores das colunas ---------------- */

/* Pedido dela em 14/09/2026: poder alargar a lista ou a conversa arrastando a
   divisa. A barra é estreita para não roubar espaço, e acende ao passar o
   ponteiro para dizer que é dali que se puxa. */
.puxador {
  cursor: col-resize;
  background: var(--linha);
  position: relative;
}
.puxador:hover, .puxador.puxando { background: var(--bordo); }
.puxador::after {          /* área de pega maior que a linha visível */
  content: "";
  position: absolute;
  inset: 0 -4px;
}
body.arrastando { user-select: none; cursor: col-resize; }

/* ---------------- coluna das contas ---------------- */

.contas {
  background: #241019;
  color: #E8DDE1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.contas__topo {
  display: block;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s;
}
.contas__topo:hover { background: rgba(255, 255, 255, .06); color: inherit; }
.contas__topo:active { background: rgba(255, 255, 255, .1); }
.contas__topo h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
}
/* a marca no lugar do nome escrito, desde 14/09/2026 */
.contas__marca { display: block; height: 30px; width: auto; margin: -2px 0 2px -6px; }
.contas__topo p {
  margin: 2px 0 0;
  font-size: 11px;
  color: rgba(232, 221, 225, .6);
}

.contas__lista { flex: 1; overflow-y: auto; padding: 8px; }

.conta {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 11px;
  margin-bottom: 3px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-align: left;
  transition: background .15s;
}
.conta:hover { background: rgba(255, 255, 255, .07); }
.conta.ativa { background: rgba(255, 255, 255, .13); }

.conta__ponto {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--tinta-fraca);
}
.conta__ponto.ligado { background: #4CAF7D; }
.conta__ponto.desligado { background: #C4554D; }

.conta__texto { min-width: 0; flex: 1; }
.conta__nome {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conta__numero {
  font-size: 11px;
  color: rgba(232, 221, 225, .55);
}
.conta__contador {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--bordo-claro);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.conta__contador[hidden] { display: none; }

/* bolinhas de cor da etiqueta do número */
.cores { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.cor {
  width: 28px; height: 28px;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
  cursor: pointer;
}
.cor:hover { transform: scale(1.08); }
.cor.ativa { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tinta); }
.cores__escolhida {
  margin-left: 6px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta-media);
}

/* nome e ordem dos números */
.conta { position: relative; }
/* a faixa da cor da etiqueta, à esquerda do número */
.conta[draggable="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--cor-da-conta, transparent);
}
.menu--cores { padding: 10px 12px 12px; min-width: 0; }
.menu--cores .cores { max-width: 230px; }
/* o botão de menu é bloco de largura inteira; a bolinha de cor não */
.menu.menu--cores button.cor {
  display: inline-block;
  width: 28px; height: 28px;
  padding: 0;
  border-radius: 50%;
}
.menu__titulo { font-size: 12px; font-weight: 600; color: var(--tinta-media); margin-bottom: 6px; }
.conta__opcoes {
  display: none;
  flex: none;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: rgba(232, 221, 225, .75);
}
.conta__opcoes svg { width: 15px; height: 15px; }
.conta__opcoes:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.conta:hover .conta__opcoes { display: grid; }
.conta[draggable="true"] { cursor: grab; }
.conta--arrastando { opacity: .45; }
.conta--antes { box-shadow: inset 0 2px 0 #C9A24A; }
.conta--depois { box-shadow: inset 0 -2px 0 #C9A24A; }
.conta__editor {
  position: fixed;
  z-index: 60;
  padding: 4px 8px;
  border: 1px solid #C9A24A;
  border-radius: 6px;
  background: #fff;
  color: var(--tinta);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.conta__editor:focus { outline: none; }

.contas__rodape {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
}
.contas__rodape button {
  width: 100%;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px;
  background: transparent;
  color: rgba(232, 221, 225, .85);
}
.contas__rodape button:hover { background: rgba(255, 255, 255, .08); }
.contas__rodape .quem { margin-bottom: 8px; color: rgba(232, 221, 225, .6); }

/* ---------------- lista de conversas ---------------- */

.lista {
  background: var(--papel);
  border-right: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lista__topo { padding: 12px; border-bottom: 1px solid var(--linha); }

.busca {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--linha);
  border-radius: 20px;
  background: var(--fundo);
}
.busca:focus {
  outline: none;
  border-color: var(--bordo);
  background: #fff;
}

/* cinco abas numa coluna estreita: em vez de partir a palavra ao meio, cada
   aba fica inteira e a linha quebra por baixo */
.abas { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.aba {
  flex: 1 0 auto;
  white-space: nowrap;
  padding: 6px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tinta-media);
  font-size: 12px;
  font-weight: 500;
}
.aba:hover { background: var(--fundo); }
.aba.ativa { background: var(--bordo-fraco); color: var(--bordo); font-weight: 600; }
.aba__conta {
  display: inline-block;
  min-width: 17px;
  margin-left: 3px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--bordo);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
}
.aba__conta[hidden] { display: none; }
/* número das abas de situação: informa, não chama atenção como a não lida */
.aba__conta--neutra { background: var(--linha); color: var(--tinta-media); }

.lista__corpo { flex: 1; overflow-y: auto; }

.conversa {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid #F0F1F4;
  background: transparent;
  text-align: left;
}
.conversa:hover { background: #FAFAFB; }

/* Não lida em verde claro, a pedido dela em 14/09/2026: o negrito sozinho se
   perdia no meio da lista. A faixa verde à esquerda é o que se enxerga de
   longe; a conversa aberta continua mandando na cor, senão a pessoa perde de
   vista onde está. */
.conversa.nao-lida {
  background: #E9F7EE;
  box-shadow: inset 3px 0 0 var(--verde);
}
.conversa.nao-lida:hover { background: #DFF2E7; }
.conversa.ativa, .conversa.nao-lida.ativa { background: var(--bordo-fraco); }
.conversa.nao-lida.ativa { box-shadow: inset 3px 0 0 var(--verde); }
.conversa.nao-lida .conversa__resumo { color: var(--tinta); font-weight: 500; }
.conversa.nao-lida .conversa__bolinha { background: var(--verde); }

.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex: none;
  background: var(--fundo-medio);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta-media);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.grupo { background: #E3E9F2; color: #46536B; }

/* span nao corta com reticencias enquanto for inline */
.conversa__texto { display: block; min-width: 0; flex: 1; overflow: hidden; }
.conversa__linha1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.conversa__nome {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conversa__hora { font-size: 11px; color: var(--tinta-fraca); flex: none; }
/* o telefone embaixo do nome, discreto: serve para reconhecer a pessoa, não
   para competir com o nome dela */
.conversa__numero {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--tinta-fraca);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversa__resumo {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--tinta-media);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conversa__marca {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  letter-spacing: .02em;
}
.conversa__bolinha {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bordo);
  flex: none;
  align-self: center;
}

.vazio {
  padding: 40px 20px;
  text-align: center;
  color: var(--tinta-fraca);
  font-size: 13px;
}

.carregar-mais {
  width: 100%;
  padding: 12px;
  border: 0;
  background: transparent;
  color: var(--bordo);
  font-size: 12.5px;
  font-weight: 600;
}
.carregar-mais:hover { background: var(--fundo); }

/* ---------------- painel da conversa ---------------- */

.painel {
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  overflow: hidden;
}

.conversa-aberta {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.painel__topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
}
.painel__nome { font-size: 15px; font-weight: 600; }
.painel__detalhe { font-size: 12px; color: var(--tinta-media); }
.painel__acoes { margin-left: auto; display: flex; gap: 6px; }
.icone {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--papel);
  color: var(--tinta-media);
}
.icone:hover { background: var(--fundo); color: var(--bordo); }
.icone.ativo { background: var(--bordo-fraco); color: var(--bordo); border-color: #E4CBD1; }

.painel__corpo {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* Sem scroll-behavior: smooth. Com ele, abrir a conversa deslizava desde o topo,
   passava pela faixa que carrega as anteriores e parava nas mensagens antigas.
   Quem precisa de deslize (ir até a citada) pede no próprio scrollIntoView. */
.fluxo {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px 12px;
  background: #D5D9E0;
}
.fluxo .dia::before, .fluxo .dia::after { background: #BFC5CE; }
.fluxo .dia { color: var(--tinta-media); }

.dia {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: var(--tinta-fraca);
  font-size: 11.5px;
}
.dia::before, .dia::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linha);
}

.balao {
  max-width: min(640px, 74%);
  margin-bottom: 8px;
  padding: 9px 12px 7px;
  border-radius: 10px;
  background: var(--dela);
  box-shadow: var(--sombra);
  position: relative;
  word-wrap: break-word;
}
.balao.minha { margin-left: auto; background: var(--minha); }

.balao__autor {
  font-size: 12px;
  font-weight: 600;
  color: var(--bordo);
  margin-bottom: 3px;
}
.balao__texto { white-space: pre-wrap; line-height: 1.5; }
.balao__texto a { color: var(--bordo); }

/* campos lado a lado na mesma linha (dia, hora e duração da reunião) */
.campos-lado { display: flex; gap: 10px; flex-wrap: wrap; }
.campos-lado .campo { flex: 1 1 120px; }

/* evento do WhatsApp e avisos do que vem protegido */
.evento {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(20, 24, 33, .05);
  border-left: 3px solid var(--bordo);
}
.evento--cancelado { border-left-color: #8A93A3; }
.evento--cancelado .evento__nome { text-decoration: line-through; color: var(--tinta-media); }
.evento__icone { color: var(--bordo); flex: none; padding-top: 2px; }
.evento__corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evento__tipo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-fraca); }
.evento__nome { font-weight: 600; }
.evento__linha { font-size: 12.5px; color: var(--tinta-media); }
.evento__linha::first-letter { text-transform: uppercase; }
a.evento__linha { color: var(--bordo); }
.evento__descricao { margin-top: 4px; font-size: 12.5px; white-space: pre-wrap; }
.balao__aviso { font-size: 12.5px; font-style: italic; color: var(--tinta-media); }

/* formatação do WhatsApp dentro da mensagem, da citação e da prévia da lista */
.balao__texto strong, .citada__texto strong, .conversa__resumo strong { font-weight: 700; }
.balao__texto code, .citada__texto code, .conversa__resumo code {
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
  font-size: .92em;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(20, 24, 33, .07);
}
.balao__texto code.bloco {
  display: block;
  margin: 2px 0;
  padding: 6px 8px;
  white-space: pre-wrap;
}
.citacao-wa {
  display: inline-block;
  padding-left: 8px;
  border-left: 3px solid #C9CED6;
  color: var(--tinta-media);
}

.balao__rodape {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--tinta-fraca);
}
.balao__visto { color: var(--verde); }

.balao img.midia {
  max-width: 100%;
  border-radius: 6px;
  margin-bottom: 6px;
  cursor: zoom-in;
}
.balao audio { width: 300px; max-width: 100%; margin: 2px 0; }
.balao video { max-width: 100%; border-radius: 6px; }

.anexo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--linha);
  border-radius: 7px;
  background: #FAFAFB;
  color: var(--tinta);
  text-decoration: none;
  margin-bottom: 4px;
}
.anexo:hover { background: var(--fundo); }
.anexo__icone {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--bordo-fraco);
  color: var(--bordo);
  flex: none;
}
.anexo__nome {
  font-size: 13px;
  font-weight: 500;
  word-break: break-all;
}
.anexo__tipo { font-size: 11px; color: var(--tinta-fraca); }

.sistema {
  margin: 10px auto;
  padding: 5px 12px;
  border-radius: 10px;
  background: #E6E9EF;
  color: var(--tinta-media);
  font-size: 11.5px;
  text-align: center;
  width: fit-content;
  max-width: 70%;
}

/* ---------------- barra de envio ---------------- */

.envio {
  padding: 12px 18px 16px;
  background: var(--papel);
  border-top: 1px solid var(--linha);
}

.envio__caixa {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.envio textarea {
  flex: 1;
  min-height: 44px;
  max-height: 180px;
  padding: 11px 14px;
  border: 1px solid var(--linha);
  border-radius: 20px;
  background: var(--fundo);
  resize: none;
  line-height: 1.45;
}
.envio textarea:focus {
  outline: none;
  border-color: var(--bordo);
  background: #fff;
}

.enviar {
  width: 44px; height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--bordo);
  color: #fff;
  display: grid;
  place-items: center;
}
.enviar:hover { background: var(--bordo-claro); }
.enviar:disabled { background: #C9CDD5; }

.envio__dica {
  margin-top: 6px;
  font-size: 11px;
  color: var(--tinta-fraca);
}

.sugestoes {
  margin-bottom: 8px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
  max-height: 190px;
  overflow-y: auto;
}
.sugestoes[hidden] { display: none; }
.sugestao {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid #F0F1F4;
  background: transparent;
  text-align: left;
}
.sugestao:hover { background: var(--bordo-fraco); }
.sugestao b { color: var(--bordo); }
.sugestao span { display: block; font-size: 12px; color: var(--tinta-media); margin-top: 2px; }

.lista__nota, .fluxo__nota {
  margin: 10px 12px;
  padding: 9px 11px;
  border-radius: 7px;
  background: #FFFBEA;
  border: 1px solid #F3E8C4;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tinta-media);
}
.fluxo__nota { margin: 18px auto; max-width: 460px; text-align: center; }

/* ---------------- painel lateral de notas ---------------- */

.notas {
  width: 300px;
  flex: none;
  background: var(--papel);
  border-left: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notas[hidden] { display: none; }

.notas__topo {
  padding: 12px 14px;
  border-bottom: 1px solid var(--linha);
  font-size: 13px;
  font-weight: 600;
}
.notas__lista { flex: 1; overflow-y: auto; padding: 10px; }
.nota {
  padding: 10px 11px;
  margin-bottom: 8px;
  border-radius: 7px;
  background: #FFFBEA;
  border: 1px solid #F3E8C4;
  font-size: 13px;
  line-height: 1.45;
}
.nota__meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--tinta-fraca);
  display: flex;
  justify-content: space-between;
}
.nota__apagar { border: 0; background: none; color: var(--tinta-fraca); font-size: 11px; }
.nota__apagar:hover { color: #9B2226; }

.notas__nova { padding: 10px; border-top: 1px solid var(--linha); }
.notas__nova textarea {
  width: 100%;
  min-height: 64px;
  padding: 9px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  resize: vertical;
}
.notas__nova button {
  width: 100%;
  margin-top: 7px;
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: var(--bordo);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
}

/* ---------------- painel lateral da ficha do cliente ---------------- */

.ficha {
  width: 330px;
  flex: none;
  background: var(--papel);
  border-left: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ficha[hidden] { display: none; }

.ficha__topo {
  padding: 12px 14px;
  border-bottom: 1px solid var(--linha);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ficha__rever {
  border: 0;
  background: none;
  color: var(--tinta-fraca);
  font-size: 11px;
  font-weight: 500;
}
.ficha__rever:hover { color: var(--bordo); }

.ficha__corpo { flex: 1; overflow-y: auto; padding: 12px 14px 20px; }

.ficha__aviso {
  color: var(--tinta-media);
  font-size: 13px;
  line-height: 1.5;
}

.ficha__nome {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.ficha__marcas { margin: 7px 0 12px; display: flex; flex-wrap: wrap; gap: 5px; }
.ficha__marca {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fundo-medio);
  color: var(--tinta-media);
}
.ficha__marca--cliente { background: var(--bordo-fraco); color: var(--bordo); font-weight: 600; }
.ficha__marca--ativo { background: #E7F3EC; color: var(--verde); }

.ficha__bloco { margin-top: 16px; }
.ficha__titulo {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin-bottom: 6px;
}

.ficha__linha {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 3px 0;
}
.ficha__linha span:first-child { color: var(--tinta-media); flex: none; }
.ficha__linha span:last-child { text-align: right; overflow-wrap: anywhere; }

.ficha__caso {
  display: block;
  padding: 9px 10px;
  margin-bottom: 7px;
  border: 1px solid var(--linha);
  border-radius: 7px;
  font-size: 12.5px;
  line-height: 1.45;
  color: inherit;
  text-decoration: none;
}
.ficha__caso:hover { border-color: var(--bordo); background: var(--bordo-fraco); }
.ficha__caso b { display: block; font-size: 13px; }
.ficha__caso span { color: var(--tinta-media); }
.ficha__caso .ficha__situacao { float: right; font-size: 11px; }
.ficha__caso .ficha__situacao--ativo { color: var(--verde); }

.ficha__pasta {
  display: block;
  padding: 9px 10px;
  border-radius: 7px;
  background: var(--bordo-fraco);
  color: var(--bordo);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.ficha__pasta:hover { background: #EFDDE1; }

.ficha__dossie {
  display: block;
  padding: 6px 2px;
  font-size: 12.5px;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid #F0F1F4;
  word-break: break-word;
}
.ficha__dossie:hover { color: var(--bordo); }

.ficha__ressalva {
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--tinta-media);
  background: #FFFBEA;
  border: 1px solid #F3E8C4;
  border-radius: 6px;
  padding: 7px 9px;
}

/* ---------------- nada aberto ---------------- */

.nada {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--tinta-fraca);
  padding: 40px;
}
.nada h2 { margin: 0 0 6px; font-size: 17px; color: var(--tinta-media); font-weight: 600; }
.nada p { margin: 0; font-size: 13px; max-width: 340px; }

/* ---------------- janela sobreposta ---------------- */

.janela {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 18, 24, .55);
}

.janela__cartao {
  width: min(400px, 94vw);
  padding: 28px 26px 22px;
  border-radius: 12px;
  background: var(--papel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.janela__cartao h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.janela__sub { margin: 0 0 20px; font-size: 12.5px; color: var(--tinta-media); }

.janela__acoes { display: flex; gap: 10px; margin-top: 18px; }
.janela__acoes .botao { flex: 1; }

.botao--claro {
  background: var(--fundo);
  color: var(--tinta-media);
  border: 1px solid var(--linha);
}
.botao--claro:hover { background: var(--fundo-medio); }

.contas__rodape button + button { margin-top: 6px; }

/* ---------------- numero novo ---------------- */

.conta--novo {
  margin: 0 8px 8px;
  width: calc(100% - 16px);
  border: 1px dashed rgba(255, 255, 255, .22);
  color: rgba(232, 221, 225, .75);
}
.conta__mais {
  width: 9px;
  flex: none;
  font-size: 15px;
  line-height: 1;
  text-align: center;
}

.qr {
  display: grid;
  place-items: center;
  min-height: 250px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #FBFBFC;
}
.qr img { width: 250px; height: 250px; image-rendering: pixelated; }
.qr__conectado {
  text-align: center;
  color: var(--verde);
  font-weight: 600;
}
.qr__esperando { color: var(--tinta-fraca); font-size: 13px; }

.qr__passos {
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: 12.5px;
  color: var(--tinta-media);
  line-height: 1.7;
}

/* ---------------- lightbox ---------------- */

.lupa {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 18, 24, .9);
  display: grid;
  place-items: center;
  padding: 30px;
}
.lupa[hidden] { display: none; }
.lupa img { max-width: 100%; max-height: 100%; border-radius: 4px; }
.lupa__fechar {
  position: absolute;
  top: 18px; right: 22px;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 20px;
}

/* ---------------- recado de erro ---------------- */

.recado {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  padding: 11px 18px;
  border-radius: 22px;
  background: #2B2F36;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
}
.recado[hidden] { display: none; }
.recado.erro { background: #8E2A2A; }

/* ---------------- telas estreitas ---------------- */

.voltar { display: none; }

@media (max-width: 1100px) {
  :root { --col-contas: 62px; --col-lista: 300px; }
  .conta__texto, .contas__topo p, .contas__rodape .quem { display: none; }
  .contas__topo h1 { font-size: 12px; text-align: center; }
  .contas__marca { height: 24px; margin-left: 0; }
  .conta { justify-content: center; padding: 12px 4px; }
  .notas { width: 260px; }
  .ficha { width: 290px; }
}

@media (max-width: 780px) {
  .moldura { grid-template-columns: 1fr; }
  .puxador { display: none; }
  .contas {
    flex-direction: row;
    align-items: center;
    height: 52px;
    grid-row: 1;
  }
  .contas__lista { display: flex; flex: 1; padding: 6px; }
  .contas__topo, .contas__rodape { display: none; }
  .moldura { grid-template-rows: 52px 1fr; }
  .lista { grid-row: 2; }
  .painel {
    position: fixed;
    inset: 0;
    z-index: 50;
    transform: translateX(100%);
    transition: transform .25s ease;
  }
  .painel.aberto { transform: none; }
  .voltar { display: grid; }
  .notas, .ficha { position: fixed; inset: 0; width: auto; z-index: 60; }
}

/* ---------------- página de conexões ---------------- */

.pagina {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 18px 60px;
  overflow-y: auto;
  height: 100%;
}
.pagina__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.pagina__topo h1 { margin: 0; font-size: 22px; font-weight: 600; }
.pagina__topo .sub { margin: 4px 0 0; font-size: 13px; color: var(--tinta-media); }
.pagina__voltar {
  flex: none;
  font-size: 13px;
  color: var(--bordo);
  text-decoration: none;
  padding-top: 4px;
}
.pagina__voltar:hover { text-decoration: underline; }

.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.cartao h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.cartao__texto {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tinta-media);
}
.cartao--nota { background: #FFFBEA; border-color: #F3E8C4; }

.cartao__acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.cartao__acoes .botao { width: auto; padding: 10px 16px; font-size: 13px; }
.botao--linha {
  background: transparent;
  color: var(--bordo);
  border: 1px solid var(--linha);
}
.botao--linha:hover { background: var(--bordo-fraco); }

.campo-duplo { display: flex; gap: 12px; }
.campo-duplo .campo { flex: 1; }
.campo--curto { max-width: 110px; }

.ligacao {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 13px 14px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  margin-bottom: 10px;
}
.ligacao--ativa { border-color: var(--bordo); background: var(--bordo-fraco); }
.ligacao__nome { font-size: 14px; font-weight: 600; }
.ligacao__marca {
  margin-left: 7px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bordo);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  vertical-align: 1px;
}
.ligacao__detalhe { margin-top: 3px; font-size: 12px; color: var(--tinta-media); }
.ligacao__erro { color: #9B2226; }
.ligacao__botoes { display: flex; gap: 6px; flex: none; flex-wrap: wrap; }
.ligacao__botoes button {
  border: 1px solid var(--linha);
  background: var(--papel);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--tinta-media);
}
.ligacao__botoes button:hover { border-color: var(--bordo); color: var(--bordo); }
.ligacao__perigo:hover { border-color: #9B2226 !important; color: #9B2226 !important; }

@media (max-width: 620px) {
  .ligacao { flex-direction: column; }
  .campo-duplo { flex-direction: column; }
  .campo--curto { max-width: none; }
}

/* ---------------- responder citando, fixadas e salvos ---------------- */

/* a mensagem citada dentro do balão */
.citada {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0 0 6px;
  padding: 6px 9px;
  border: 0;
  border-left: 3px solid var(--bordo);
  border-radius: 5px;
  background: rgba(110, 27, 45, .06);
  cursor: pointer;
}
.balao.minha .citada { background: rgba(0, 0, 0, .05); border-left-color: #2E7D4F; }
.citada__quem {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--bordo);
}
.balao.minha .citada__quem { color: #2E7D4F; }
.citada__texto {
  display: block;
  font-size: 12.5px;
  color: var(--tinta-media);
  max-height: 34px;
  overflow: hidden;
}

.balao--piscando { animation: piscar 1.5s ease; }
@keyframes piscar {
  0%, 100% { background: inherit; }
  25%, 60% { background: #FFF3C4; }
}

/* a faixa acima da caixa de escrever */
.citando {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 14px 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--bordo);
  border-radius: 5px;
  background: var(--bordo-fraco);
}
.citando[hidden] { display: none; }
.citando__corpo { flex: 1; min-width: 0; }
.citando__quem { display: block; font-size: 11.5px; font-weight: 600; color: var(--bordo); }
.citando__texto {
  display: block;
  font-size: 12.5px;
  color: var(--tinta-media);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.citando__tirar {
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--tinta-fraca);
  flex: none;
}
.citando__tirar:hover { color: var(--bordo); }

/* as mensagens presas no alto da conversa */
.faixa-fixadas {
  display: flex;
  gap: 8px;
  padding: 8px 14px;
  overflow-x: auto;
  background: #FFFBEA;
  border-bottom: 1px solid #F3E8C4;
}
.faixa-fixadas[hidden] { display: none; }
.fixada {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  max-width: 340px;
  padding: 5px 9px;
  border: 1px solid #F3E8C4;
  border-radius: 999px;
  background: var(--papel);
  font-size: 12px;
  color: var(--tinta-media);
}
.fixada:hover { border-color: var(--bordo); }
.fixada__texto {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fixada__soltar { color: var(--tinta-fraca); font-size: 15px; line-height: 1; }
.fixada__soltar:hover { color: #9B2226; }

/* os botões que apareceram no balão */
.balao__responder svg, .balao__salvar svg, .balao__fixar svg {
  width: 14px; height: 14px;
}
.balao__salvar.aceso, .balao__fixar.aceso { color: var(--bordo); }

/* ---------------- atalhos da lista, e o ir para ---------------- */

.atalhos {
  display: flex;
  gap: 6px;
  padding: 0 12px 10px;
  flex-wrap: wrap;
}
.atalho {
  border: 1px solid var(--linha);
  background: var(--papel);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11.5px;
  color: var(--tinta-media);
  display: flex;
  align-items: center;
  gap: 5px;
}
.atalho:hover { border-color: var(--bordo); color: var(--bordo); }
.atalho.ativo { background: var(--bordo); border-color: var(--bordo); color: #fff; }
.atalho__conta {
  background: var(--bordo-fraco);
  color: var(--bordo);
  border-radius: 999px;
  padding: 0 6px;
  font-weight: 600;
  font-size: 10.5px;
}
.atalho.ativo .atalho__conta { background: rgba(255, 255, 255, .25); color: #fff; }
.atalho__conta[hidden] { display: none; }

/* sinal de que a lista está recebendo ao vivo */
.ao-vivo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 11px;
  color: var(--tinta-fraca);
  cursor: default;
}
.ao-vivo__ponto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ambar);
}
.ao-vivo--ligado { color: var(--verde); }
.ao-vivo--ligado .ao-vivo__ponto { background: var(--verde); box-shadow: 0 0 0 3px rgba(46, 125, 79, .18); }

/* várias conversas de uma vez */
.selecao {
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--linha);
  background: var(--bordo-fraco);
}
.selecao__topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.selecao__quantas { font-weight: 600; color: var(--bordo); font-size: 12.5px; margin-right: auto; }
.selecao__link {
  border: 0; background: none; padding: 2px 0;
  color: var(--tinta-media); font-size: 11.5px; text-decoration: underline;
}
.selecao__link:hover { color: var(--bordo); }
.selecao__acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.selecao__acoes button {
  border: 1px solid var(--bordo);
  background: var(--papel);
  color: var(--bordo);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 500;
}
.selecao__acoes button:hover:not(:disabled) { background: var(--bordo); color: #fff; }
.selecao__acoes button:disabled { opacity: .45; cursor: default; }

.conversa__caixa {
  flex: none;
  align-self: center;
  width: 20px; height: 20px;
  border: 2px solid var(--tinta-fraca);
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--papel);
}
.conversa--marcada { background: var(--bordo-fraco); }
.conversa--marcada .conversa__caixa { background: var(--bordo); border-color: var(--bordo); }
/* escolhendo, os três pontinhos só atrapalham o clique */
.conversa--escolhendo .conversa__opcoes { display: none !important; }

.lista__nota--acao {
  display: block;
  width: calc(100% - 24px);
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  color: var(--bordo);
}
.lista__nota--acao:hover { background: #FFF6D8; }

/* a janela que abre com Ctrl+K */
.ir-para {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 24, 33, .45);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 12vh;
}
.ir-para[hidden] { display: none; }
.ir-para__caixa {
  width: min(560px, 92vw);
  background: var(--papel);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.ir-para__caixa input {
  width: 100%;
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid var(--linha);
  font-size: 15px;
}
.ir-para__caixa input:focus { outline: none; }
.ir-para__lista { max-height: 46vh; overflow-y: auto; }
.ir-para__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 18px;
  border: 0;
  background: none;
  border-bottom: 1px solid #F0F1F4;
}
.ir-para__item.escolhida, .ir-para__item:hover { background: var(--bordo-fraco); }
.ir-para__nome { display: block; font-size: 13.5px; font-weight: 600; }
.ir-para__detalhe { display: block; font-size: 11.5px; color: var(--tinta-fraca); margin-top: 1px; }
.ir-para__pe {
  padding: 8px 18px;
  background: #FAFAFB;
  border-top: 1px solid var(--linha);
  font-size: 11px;
  color: var(--tinta-fraca);
}

.achados__ajuda {
  padding: 6px 12px 8px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--tinta-fraca);
  border-bottom: 1px solid #F0F1F4;
}
.achados__ajuda b { color: var(--tinta-media); font-weight: 600; }

/* ---------------- resumo e perguntas ---------------- */

.resumo__saida {
  margin: 4px 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: #FAFAFB;
  font-size: 13.5px;
  line-height: 1.65;
  max-height: 52vh;
  overflow-y: auto;
}
.resumo__saida[hidden] { display: none; }
.resumo__saida b { color: var(--bordo); }
.resumo__espera {
  margin: 4px 0 14px;
  font-size: 13px;
  color: var(--tinta-media);
}
.resumo__espera[hidden] { display: none; }

/* ---------------- cartão de contato compartilhado ---------------- */

.anexo--cartao { align-items: flex-start; }
.cartao { margin-top: 2px; }
.cartao__nome { font-size: 13.5px; font-weight: 600; }
.cartao__sem { font-size: 12px; color: var(--tinta-fraca); }
.cartao__numero {
  display: inline-block;
  margin: 5px 5px 0 0;
  padding: 4px 10px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--papel);
  font-size: 12.5px;
  color: var(--bordo);
  font-weight: 500;
}
.cartao__numero:hover { background: var(--bordo); color: #fff; border-color: var(--bordo); }

/* ---------------------------------------------------------------------------
   Visual restaurado ao de antes da varredura de 16/09/2026, por ordem dela
   ("coloque o visual do jeito de antes"). Abaixo, só o que a tela nova usa e
   não existia: a marca de mensagem editada, a lista de pastas parecidas na
   ficha, e o tamanho dos ícones que viraram SVG.
   --------------------------------------------------------------------------- */
.balao__editada { font-style: italic; margin-right: 2px; }
.ficha__opcoes { margin: 6px 0 0; padding-left: 18px; }
.balao__acoes svg, .conversa svg:not(.alfinete) { width: 14px; height: 14px; vertical-align: -2px; }

/* ---------------------------------------------------------------------------
   Encaminhar (16/09/2026): escolher mensagens na conversa e mandar para outras.
   --------------------------------------------------------------------------- */
.fluxo--escolhendo .balao__acoes { display: none !important; }
.fluxo--escolhendo .balao { cursor: pointer; user-select: none; }
.fluxo--escolhendo .balao:not(.escolhivel) { opacity: .55; cursor: not-allowed; }
.fluxo--escolhendo .balao.escolhivel { margin-left: 34px; }
.fluxo--escolhendo .balao.minha.escolhivel { margin-left: auto; }
.balao__marca {
  position: absolute;
  top: 50%;
  left: -30px;
  width: 20px; height: 20px;
  margin-top: -10px;
  border: 2px solid var(--tinta-fraca);
  border-radius: 50%;
  background: var(--papel);
}
.balao.minha .balao__marca { left: auto; right: calc(100% + 10px); }
.balao.escolhida { box-shadow: 0 0 0 2px var(--bordo); }
.balao.escolhida .balao__marca { border-color: var(--bordo); background: var(--bordo); }
.balao.escolhida .balao__marca::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.envio--escolhendo > :not(#barraEscolha) { display: none !important; }
.escolha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px;
}
.escolha__fechar {
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: transparent;
  font-size: 22px; line-height: 1;
  color: var(--tinta-media);
}
.escolha__fechar:hover { background: var(--fundo-medio); }
.escolha__quantas { margin-right: auto; font-weight: 600; color: var(--tinta); }
.escolha__encaminhar { width: auto; padding-left: 22px; padding-right: 22px; }
.escolha__encaminhar:disabled { opacity: .45; cursor: default; }

.encaminhar__escolhidos { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 10px; }
.encaminhar__chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 10px;
  border-radius: 999px;
  background: var(--bordo-fraco);
  color: var(--bordo);
  font-size: 12px; font-weight: 500;
}
.encaminhar__chip button {
  width: 20px; height: 20px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--bordo);
  font-size: 15px; line-height: 1;
}
.encaminhar__chip button:hover { background: rgba(110, 27, 45, .12); }
.encaminhar__lista {
  max-height: 40vh;
  overflow-y: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.encaminhar__titulo {
  padding: 8px 12px 4px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-fraca);
}
.encaminhar__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0; border-bottom: 1px solid var(--linha);
  background: var(--papel);
  text-align: left;
}
.encaminhar__item:last-child { border-bottom: 0; }
.encaminhar__item:hover { background: var(--fundo); }
.encaminhar__item.ligada { background: var(--bordo-fraco); }
.encaminhar__caixa {
  position: relative;
  flex: none;
  width: 18px; height: 18px;
  border: 2px solid var(--tinta-fraca);
  border-radius: 4px;
}
.encaminhar__item.ligada .encaminhar__caixa { border-color: var(--bordo); background: var(--bordo); }
.encaminhar__item.ligada .encaminhar__caixa::after {
  content: "";
  position: absolute;
  left: 4px; top: 0;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.encaminhar__texto { min-width: 0; }
.encaminhar__nome { display: block; font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.encaminhar__detalhe { display: block; font-size: 11.5px; color: var(--tinta-fraca); margin-top: 1px; }
.encaminhar__nota { margin: 10px 0 0; font-size: 11.5px; color: var(--tinta-fraca); }

/* a marca "Encaminhada", como o WhatsApp desenha: cinza, em itálico, acima do texto */
.balao__encaminhada {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 3px;
  font-size: 12px; font-style: italic;
  color: var(--tinta-fraca);
}
.balao__encaminhada svg { width: 13px; height: 13px; flex: none; }