/* Redesenho aprovado em 02/10 (docs/blackse/design-aprovado). Área: conversas. */
/* ════════════════════════════════════════════════════════════════════════
   CONVERSAS (02-conversas.html; plano 16.C). Três colunas: lista (320),
   conversa e ficha do cliente (300, retrátil). Celular: uma coisa por vez.
   Tudo preso em `.zap.nconv` (só as telas de conversa), por cima das regras
   antigas `.zap-*` (globals.css e tema-blackse.css), que a junção limpa.
   🔴 NÃO mexer no `display` de `.zap-lista`/`.zap-fio` fora das media queries:
   é ele que troca lista ↔ conversa no celular (`.zap.no-fio`/`.zap.com-fio`).
   ════════════════════════════════════════════════════════════════════════ */
.zap.nconv{
  --c-fundo:var(--n-fundo,#FFFFFF); --c-sup:var(--n-sup,#F7F6F3); --c-sup-2:var(--n-sup-2,#F2F1EE);
  --c-linha:var(--n-linha,#ECEAE6); --c-linha-2:var(--n-linha-2,#E3E1DC);
  --c-texto:var(--n-texto,#141414); --c-texto-2:var(--n-texto-2,#4A4845); --c-texto-3:var(--n-texto-3,#5E5C58);
  --c-verde:var(--n-verde,#146C38); --c-vermelho:var(--n-vermelho,#A3190F);
  display:flex;position:relative;background:var(--c-fundo);color:var(--c-texto);
  font-family:'Outfit','Helvetica Neue',sans-serif;min-height:0;overflow:hidden}
.zap.nconv button,.zap.nconv input,.zap.nconv textarea{font-family:inherit}

/* ── a lista ── */
.zap.nconv .zap-lista{flex:0 0 320px;width:320px;min-width:0;background:var(--c-fundo);border-right:1px solid var(--c-linha)}
.zap.nconv .zap-lista-topo{padding:24px 20px 14px;gap:14px;border-bottom:0;display:flex;flex-direction:column}
.zap.nconv .zap-lista-topo h1{display:block;margin:0;font-size:24px;font-weight:600;line-height:1.2;color:var(--c-texto)}
.zap.nconv .nconv-filtros{display:flex;flex-wrap:nowrap;gap:5px;margin:0;padding:0;border:0;background:none;overflow:hidden}
.zap.nconv .nconv-filtros a{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;
  height:auto;padding:6px 9px;border:1px solid var(--c-linha-2);border-radius:8px;background:var(--c-fundo);
  font-size:13px;font-weight:400;line-height:1.35;color:var(--c-texto) !important;text-decoration:none;box-shadow:none}
.zap.nconv .nconv-filtros a:first-child{padding:6px 11px}
.zap.nconv .nconv-filtros a:last-child{flex-shrink:1}
.zap.nconv .nconv-filtros a:hover{background:var(--c-sup)}
.zap.nconv .nconv-filtros a.atual{background:var(--c-texto);border-color:var(--c-texto);color:#FFFFFF !important;font-weight:600}
.zap.nconv .nconv-filtros .conta-aba{margin:0;padding:0;min-width:0;height:auto;background:none;border:0;border-radius:0;
  color:inherit;font-size:13px;font-weight:600;line-height:inherit}
.zap.nconv .nconv-ponto{flex:none;display:inline-block;width:8px;height:8px;border-radius:4px;background:var(--c-verde)}
.zap.nconv .nconv-ponto.humano{background:var(--c-vermelho)}
.zap.nconv .nconv-novas{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--c-verde);color:#FFFFFF;font-size:11px;font-weight:600;line-height:1}
.zap.nconv .zap-busca-linha{display:flex}
.zap.nconv .zap-busca{flex:1;display:flex;align-items:center;gap:8px;height:38px;margin:0;padding:0 12px;
  background:#F4F3F1;border-radius:10px;color:var(--c-texto-3)}
.zap.nconv .zap-busca svg{flex:none}
.zap.nconv .zap-busca input{flex:1;min-width:0;width:100%;min-height:0;height:36px;padding:0;border:0;border-radius:0;
  background:transparent;outline:none;font-size:14px;color:var(--c-texto)}
.zap.nconv .zap-busca input::placeholder{color:var(--c-texto-3)}
.zap.nconv .zap-desconectado{margin:0 20px 10px}
.zap.nconv .zap-rolagem .lista{margin:0;padding:0;list-style:none}
.zap.nconv .zap-rolagem .lista li,
.zap.nconv .zap-rolagem .lista li:has(.linha-conversa){border-bottom:0;padding:0;margin:0}
.zap.nconv .zap-lista .linha-conversa{display:flex;align-items:flex-start;gap:12px;padding:12px 20px;margin:0;border-radius:0;
  background:transparent;text-decoration:none;color:var(--c-texto)}
.zap.nconv .zap-lista .linha-conversa:hover{background:var(--c-sup)}
.zap.nconv .zap-lista .linha-conversa.aberta{background:var(--c-sup-2)}
.zap.nconv .zap-lista .avatar{flex:none}
.zap.nconv .zap-lista .zap-meio{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.zap.nconv .zap-lista .nconv-nome{display:block;font-size:14px;font-weight:500;color:var(--c-texto);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zap.nconv .zap-lista .previa{display:block;font-size:13px;color:var(--c-texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zap.nconv .zap-lista .nao-lida .nconv-nome{font-weight:600}
.zap.nconv .zap-lista .nao-lida .previa{color:var(--c-texto-2)}
.zap.nconv .nconv-lado{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-top:2px}
.zap.nconv .nconv-lado .quando{font-size:12px;color:var(--c-texto-3);line-height:1.2}
/* O alarme do YouSalon, sem faixa: a hora fica vermelha (S386). */
.zap.nconv .nconv-lado .quando.atrasada{color:var(--c-vermelho);font-weight:600}
/* Por que a assistente não responde (06/10): o motivo curto ao lado do pontinho vermelho. */
.zap.nconv .nconv-situacao{display:flex;align-items:center;gap:6px;min-width:0}
.zap.nconv .nconv-sem-ia{font-size:11px;line-height:1.2;color:var(--c-vermelho);white-space:nowrap}
.zap.nconv .zap-vazio{padding:40px 20px}
.zap.nconv .zap-tem-mais{color:var(--c-texto-3)}

/* ── a conversa ── */
.zap.nconv .zap-fio{flex:1 1 auto;min-width:0;background:#FAFAF8}
.zap.nconv .zap-nada{color:var(--c-texto-3)}
.zap.nconv .zap-fio-topo{position:relative;flex:none;display:flex;align-items:center;gap:10px;height:72px;min-height:72px;
  padding:0 24px;background:var(--c-fundo);border-bottom:1px solid var(--c-linha);box-shadow:none}
.zap.nconv .nconv-quem{flex:0 1 auto;align-self:center;height:auto;display:flex;align-items:center;gap:10px;min-width:0;margin:0 auto 0 -8px;
  padding:6px 8px;border:0;border-radius:10px;background:transparent;cursor:pointer;color:var(--c-texto);text-align:left}
.zap.nconv .nconv-quem:hover{background:var(--c-sup)}
.zap.nconv .nconv-quem .zap-quem{display:flex;flex-direction:column;min-width:0}
.zap.nconv .nconv-quem .zap-nome{font-size:16px;font-weight:600;color:var(--c-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zap.nconv .nconv-chevron{flex:none;color:var(--c-texto-3);transition:transform .15s ease}
.zap.nconv[data-ficha="aberta"] .nconv-chevron{transform:rotate(180deg)}
@media (min-width:1200px){ .zap.nconv[data-ficha="auto"] .nconv-chevron{transform:rotate(180deg)} }

/* o botão único: Assumir (preto, com os prazos) ou Reativar IA · tempo */
.zap.nconv .nconv-chave{position:static;flex:none;display:flex;align-items:center;margin:0 0 0 auto;min-width:0}
.zap.nconv .nconv-chave form{margin:0}
.zap.nconv .nconv-assumir{height:38px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border:0;border-radius:10px;
  background:var(--c-texto);color:#FFFFFF;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.zap.nconv .nconv-assumir:hover:not(:disabled){background:#000}
.zap.nconv .nconv-reativar{height:38px;padding:0 14px;border:1px solid var(--c-linha-2);border-radius:10px;background:var(--c-fundo);
  color:var(--c-texto);font-size:14px;cursor:pointer;white-space:nowrap}
.zap.nconv .nconv-reativar:hover:not(:disabled){background:var(--c-sup)}
.zap.nconv .nconv-tempo{color:var(--c-texto-3)}
.zap.nconv .nconv-prazos{position:absolute;top:64px;right:24px;z-index:20;width:240px;display:flex;flex-direction:column;
  padding:8px;background:var(--c-fundo);border:1px solid var(--c-linha-2);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.10)}
.zap.nconv .nconv-prazos p{margin:0;padding:6px 10px 8px;font-size:12px;color:var(--c-texto-3)}
.zap.nconv .nconv-prazos button{text-align:left;border:0;background:transparent;padding:10px;border-radius:8px;font-size:14px;
  color:var(--c-texto);cursor:pointer}
.zap.nconv .nconv-prazos button:hover,.zap.nconv .nconv-prazos button:focus-visible{background:var(--c-sup-2);outline:none}
.zap.nconv .nconv-chave .erro-inline{position:absolute;top:100%;right:24px;z-index:6;margin-top:4px}

/* o fio: fundo claro liso, balões do desenho (entrada branca com contorno,
   saída preta), sem a "cauda" do WhatsApp */
.zap.nconv .zap-fio-rolagem{background:#FAFAF8;background-image:none;padding:24px}
.zap.nconv .zap-fio-rolagem .fio{gap:0}
.zap.nconv .zap-fio-rolagem .msg{margin-top:4px}
.zap.nconv .zap-fio-rolagem .msg.primeira{margin-top:10px}
.zap.nconv .zap-fio-rolagem .balao{max-width:min(420px,78%);padding:10px 14px;font-size:14px;line-height:1.45;box-shadow:none;
  background:var(--c-fundo);border:1px solid var(--c-linha);border-radius:14px 14px 14px 4px;color:var(--c-texto)}
.zap.nconv .zap-fio-rolagem .msg.saida .balao{background:var(--c-texto);border-color:var(--c-texto);color:#FFFFFF;
  border-radius:14px 14px 4px 14px}
.zap.nconv .zap-fio-rolagem .msg .balao::after{display:none;content:none}
.zap.nconv .zap-fio-rolagem .balao p{color:inherit}
.zap.nconv .zap-fio-rolagem .balao .quando{color:var(--c-texto-3);opacity:1}
.zap.nconv .zap-fio-rolagem .msg.saida .balao .quando,
.zap.nconv .zap-fio-rolagem .msg.saida .quem,
.zap.nconv .zap-fio-rolagem .msg.saida .recibo{color:rgba(255,255,255,.72);opacity:1}
.zap.nconv .zap-fio-rolagem .msg.saida .quem-ia{color:inherit}
.zap.nconv .zap-fio-rolagem .msg.saida .recibo.falhou{color:#FFB4AC}
.zap.nconv .zap-fio-rolagem .msg.saida .reenviar{color:#FFFFFF}
.zap.nconv .zap-fio-rolagem .msg.saida a{color:#FFFFFF}
.zap.nconv .zap-fio-rolagem .tarja-dia{align-self:center;margin:12px auto 6px;padding:4px 10px;border:0;border-radius:8px;
  background:#F0EFEC;color:var(--c-texto-3);font-size:12px}
.zap.nconv .zap-fio-rolagem .balao:has(.midia-foto),
.zap.nconv .zap-fio-rolagem .balao:has(.midia-video),
.zap.nconv .zap-fio-rolagem .balao:has(.midia-doc),
.zap.nconv .zap-fio-rolagem .balao:has(.audio-player){max-width:min(300px,80%)}

/* a caixa de mensagem: emoji, clipe, raio, campo e o botão redondo */
.zap.nconv .zap-fio-pe{padding:16px 24px 20px;background:var(--c-fundo);border-top:1px solid var(--c-linha)}
.zap.nconv .zap-fio-pe .responder{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;
  min-height:52px;padding:6px 8px 6px 6px;border:1px solid var(--c-linha-2);border-radius:12px;background:var(--c-fundo)}
.zap.nconv .zap-fio-pe .responder:focus-within{border-color:var(--c-texto-3)}
.zap.nconv .zap-fio-pe .anexar{flex:none;width:38px;height:38px;border:0;border-radius:9px;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;color:var(--c-texto-2)}
.zap.nconv .zap-fio-pe .anexar:hover:not(:disabled),
.zap.nconv .zap-fio-pe .anexar.aberto{background:var(--c-sup-2);color:var(--c-texto)}
.zap.nconv .zap-fio-pe .anexo-caixa{position:relative;flex:none;display:inline-flex}
.zap.nconv .zap-fio-pe .responder textarea{flex:1 1 120px;min-width:0;min-height:38px;max-height:120px;padding:9px 6px;border:0;
  border-radius:0;background:transparent;outline:none;resize:none;font-size:14px;line-height:1.4;color:var(--c-texto)}
.zap.nconv .zap-fio-pe .responder textarea:focus{border:0;background:transparent}
.zap.nconv .zap-fio-pe .responder textarea::placeholder{color:var(--c-texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zap.nconv .zap-fio-pe .enviar-redondo{flex:none;width:40px;height:40px;border:0;border-radius:20px;background:var(--c-texto);
  color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center}
.zap.nconv .zap-fio-pe .enviar-redondo:hover:not(:disabled){background:#000}
.zap.nconv .zap-fio-pe .gravando{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.zap.nconv .zap-fio-pe .anexo-preso{background:var(--c-sup)}
.zap.nconv .zap-fio-pe .emojis,
.zap.nconv .zap-fio-pe .bse-prontas-menu{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:15;margin:0;
  background:var(--c-fundo);border:1px solid var(--c-linha-2);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.10)}
.zap.nconv .zap-fio-pe .emojis{max-height:260px;overflow-y:auto;padding:8px 10px}
.zap.nconv .zap-fio-pe .bse-prontas-menu{max-height:300px;overflow-y:auto;padding:6px}
.zap.nconv .nconv-criar-pronta{margin:4px 6px 6px;align-self:flex-start}
.zap.nconv .zap-fio-pe .responder-bloqueado{border-radius:12px}
/* A linha discreta da conversa aberta: por que a assistente não respondeu (06/10). */
.zap.nconv .nconv-sem-ia-linha{margin:0 0 8px;font-size:12px;line-height:1.4;color:var(--c-texto-3)}
.zap.nconv .nconv-sem-ia-linha a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ── a ficha do cliente ── */
.zap.nconv .nconv-ficha{flex:0 0 300px;width:300px;min-width:0;display:flex;flex-direction:column;gap:20px;padding:24px 22px;
  border-left:1px solid var(--c-linha);background:var(--c-fundo);overflow-y:auto}
.zap.nconv[data-ficha="fechada"] .nconv-ficha{display:none}
.zap.nconv.no-fio .nconv-ficha{display:none}
.zap.nconv .nconv-ficha-celular{display:none}
.zap.nconv .nconv-ficha-fechar{width:40px;height:40px;margin-left:-10px;border:0;border-radius:10px;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;color:var(--c-texto);cursor:pointer}
.zap.nconv .nconv-ficha-topo{display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:20px;
  border-bottom:1px solid var(--c-linha);text-align:center}
.zap.nconv .nconv-ficha-nome{font-weight:600;font-size:17px;color:var(--c-texto) !important;text-decoration:none;
  max-width:100%;overflow-wrap:anywhere}
.zap.nconv .nconv-ficha-nome:hover{text-decoration:underline}
.zap.nconv .nconv-ficha-fone{font-size:13px;color:var(--c-texto-3)}
.zap.nconv .nconv-ficha-numeros{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;font-size:13px;color:var(--c-texto-3)}
.zap.nconv .nconv-ficha-numeros strong{color:var(--c-texto);font-weight:600}
.zap.nconv .nconv-ficha-numeros .ruim strong{color:var(--c-vermelho)}
.zap.nconv .nconv-ficha-dados{display:flex;flex-direction:column;gap:12px;margin:0;font-size:14px}
.zap.nconv .nconv-ficha-dados > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-width:0}
.zap.nconv .nconv-ficha-dados dt{flex:none;color:var(--c-texto-3)}
.zap.nconv .nconv-ficha-dados dd{margin:0;min-width:0;text-align:right;overflow-wrap:anywhere;color:var(--c-texto)}
.zap.nconv .nconv-ficha-dados dd.ruim{color:var(--c-vermelho)}
.zap.nconv .nconv-ficha-acoes{display:flex;flex-direction:column;gap:8px}
.zap.nconv .nconv-ficha-botao{height:42px;display:flex;align-items:center;justify-content:center;padding:0 12px;
  border:1px solid var(--c-linha-2);border-radius:10px;background:var(--c-fundo);color:var(--c-texto) !important;
  font-size:14px;font-weight:400;text-decoration:none;cursor:pointer;width:100%;box-sizing:border-box}
.zap.nconv .nconv-ficha-botao:hover{background:var(--c-sup)}
.zap.nconv .nconv-ficha-vazio{margin:0 0 4px;font-size:14px;color:var(--c-texto-3);text-align:center}

/* ── a oportunidade dentro da conversa (pedido do Felipe, 05/10; plano 16.J):
   a ficha editável, em seções que abrem e fecham. ── */
.zap.nconv .nconv-ficha:has(.nconv-op){gap:0}
.zap.nconv .nconv-ficha:has(.nconv-op) .nconv-ficha-topo{padding-bottom:16px}
.zap.nconv .nconv-ficha-topo .nconv-ficha-fone + .nconv-ficha-fone{margin-top:-6px}
.zap.nconv .nconv-op{display:flex;flex-direction:column;min-width:0}
.zap.nconv .nconv-op-recado{margin:12px 0 0;padding:8px 10px;border-radius:10px;background:var(--c-sup);font-size:13px;
  color:var(--c-texto-2)}
.zap.nconv .nconv-op-recado.alerta{background:#FFF4EC;color:var(--n-alerta,#9A3412)}
.zap.nconv .nconv-op-secao{border-bottom:1px solid var(--c-linha);min-width:0}
.zap.nconv .nconv-op-secao h3{margin:0;font-size:inherit}
.zap.nconv .nconv-op-secao h3 button{width:100%;display:flex;align-items:center;gap:8px;padding:14px 0;border:0;background:none;
  color:var(--c-texto);font-size:14px;font-weight:600;cursor:pointer;text-align:left}
.zap.nconv .nconv-op-secao h3 button > span:first-child{flex:1;min-width:0}
.zap.nconv .nconv-op-secao h3 svg{flex:none;color:var(--c-texto-3);transition:transform .15s ease;transform:rotate(-90deg)}
.zap.nconv .nconv-op-secao.aberta h3 svg{transform:none}
.zap.nconv .nconv-op-conta{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--c-sup-2);
  font-size:12px;font-weight:600;line-height:20px;text-align:center;color:var(--c-texto)}
.zap.nconv .nconv-op-corpo{display:flex;flex-direction:column;gap:10px;padding:0 0 16px;min-width:0}

/* etapa, produto e canal: rótulo à esquerda, a lista à direita */
.zap.nconv .nconv-op-campos{display:flex;flex-direction:column;gap:8px}
.zap.nconv .nconv-op-campo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;min-width:0;font-size:14px}
.zap.nconv .nconv-op-campo > span{flex:none;color:var(--c-texto-3)}
.zap.nconv .nconv-op-campo select{flex:0 1 auto;min-width:0;max-width:66%;height:34px;padding:0 28px 0 10px;
  border:1px solid var(--c-linha-2);border-radius:9px;background:var(--c-fundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235E5C58' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;
  -webkit-appearance:none;appearance:none;font:inherit;font-size:14px;color:var(--c-texto);text-overflow:ellipsis;cursor:pointer}
.zap.nconv .nconv-op-campo select:hover:not(:disabled){background-color:var(--c-sup)}
.zap.nconv .nconv-op-campo select:disabled{opacity:.6;cursor:progress}

.zap.nconv .nconv-op-dados{display:flex;flex-direction:column;gap:8px;margin:0;font-size:14px}
.zap.nconv .nconv-op-dados > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-width:0}
.zap.nconv .nconv-op-dados dt{flex:none;color:var(--c-texto-3)}
.zap.nconv .nconv-op-dados dd{margin:0;min-width:0;text-align:right;overflow-wrap:anywhere;color:var(--c-texto)}
.zap.nconv .nconv-op-dados > div.texto-longo{flex-direction:column;gap:2px}
.zap.nconv .nconv-op-dados > div.texto-longo dd{text-align:left;white-space:pre-line;color:var(--c-texto-2)}
.zap.nconv .nconv-op-faltou{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--n-alerta,#9A3412)}
.zap.nconv .nconv-op-faltou p{margin:0}

/* os botões da coluna: o contorno de sempre (cheio) e o pequeno da linha */
.zap.nconv .nconv-op-mais{height:38px;display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;
  padding:0 12px;border:1px solid var(--c-linha-2);border-radius:10px;background:var(--c-fundo);color:var(--c-texto) !important;
  font-size:14px;text-decoration:none;cursor:pointer}
.zap.nconv .nconv-op-mais:hover{background:var(--c-sup)}
.zap.nconv .nconv-op-mini{flex:none;height:30px;padding:0 10px;border:1px solid var(--c-linha-2);border-radius:8px;
  background:var(--c-fundo);color:var(--c-texto);font-size:13px;cursor:pointer;white-space:nowrap}
.zap.nconv .nconv-op-mini:hover:not(:disabled){background:var(--c-sup)}
.zap.nconv .nconv-op .botao-linha.pequeno{min-height:30px;height:30px;margin:0;padding:0 10px;border-radius:8px;font-size:13px;width:auto}

/* follow-ups: o texto (remarcar/cancelar) e o "Feito" */
.zap.nconv .nconv-op-fu{display:flex;align-items:center;gap:8px;min-width:0}
.zap.nconv .nconv-op-fu-texto{flex:1;min-width:0;padding:6px 0;border:0;background:none;text-align:left;font-size:14px;
  color:var(--c-texto);cursor:pointer;overflow-wrap:anywhere}
.zap.nconv .nconv-op-fu-texto:hover{text-decoration:underline}
.zap.nconv .nconv-op-fu-texto small{color:var(--c-texto-3);font-size:13px}
.zap.nconv .nconv-op-fu.atrasado .nconv-op-fu-texto{color:var(--n-alerta,#9A3412)}

/* sessões: a marcada, com Remarcar e Cancelar; as anteriores numa lista curta */
.zap.nconv .nconv-op-sessao{display:flex;flex-direction:column;gap:8px}
.zap.nconv .nconv-op-sessao p{margin:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.zap.nconv .nconv-op-sessao small{font-size:13px;color:var(--c-texto-3)}
.zap.nconv .nconv-op-sessao-acoes{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.zap.nconv .nconv-op-sessao-acoes details{min-width:0;max-width:100%}
.zap.nconv .nconv-op-sessao-acoes details[open]{flex:1 1 100%}
.zap.nconv .nconv-op-sessao-acoes details .dupla{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.zap.nconv .nconv-op-sessao-acoes details input,.zap.nconv .nconv-op-sessao-acoes details select{max-width:100%;min-width:0;box-sizing:border-box}
.zap.nconv .nconv-op-lista{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px}
.zap.nconv .nconv-op-lista li{display:flex;align-items:center;gap:8px;min-width:0;color:var(--c-texto-2)}
.zap.nconv .nconv-op-lista li > :first-child{flex:1;min-width:0}
.zap.nconv .nconv-op-lista .ruim{color:var(--c-vermelho)}
.zap.nconv .nconv-op-lista a{color:var(--c-texto) !important}

/* dados da pessoa e o aceite */
.zap.nconv .nconv-op-aceite{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--c-texto-2)}
.zap.nconv .nconv-op-aceite .ruim{color:var(--c-vermelho);font-weight:600}

/* histórico: 6 linhas e "Ver tudo" (como na ficha do Funil) */
.zap.nconv .nconv-op-historico{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px;
  color:var(--c-texto-2);overflow-wrap:anywhere}
.zap.nconv .nconv-op-historico span{color:var(--c-texto-3)}
.zap.nconv .nconv-op-link{align-self:flex-start;padding:0;border:0;background:none;font-size:13px;color:var(--c-texto);
  text-decoration:underline;cursor:pointer}

/* sem oportunidade aberta: uma frase e um botão */
.zap.nconv .nconv-op-vazio{display:flex;flex-direction:column;gap:10px;padding:16px 0;border-bottom:1px solid var(--c-linha)}
.zap.nconv .nconv-op-vazio p{margin:0;font-size:14px;color:var(--c-texto-3);text-align:center}

/* Tela média (dois painéis cabem, três não): a ficha começa fechada e, aberta,
   fica por cima da conversa, encostada à direita. */
@media (min-width:1001px) and (max-width:1199px){
  .zap.nconv[data-ficha="auto"] .nconv-ficha{display:none}
  .zap.nconv[data-ficha="aberta"] .nconv-ficha{position:absolute;top:0;right:0;bottom:0;z-index:12;
    box-shadow:-8px 0 24px rgba(20,20,20,.08)}
  .zap.nconv[data-ficha="aberta"] .nconv-ficha-celular{display:flex}
}

/* ── celular (e tablet em pé): uma coisa por vez — lista → conversa → ficha ── */
@media (max-width:1000px){
  .zap.nconv .zap-lista{flex:1 1 auto;width:auto;border-right:0}
  .zap.nconv .nconv-ficha{display:none}
  .zap.nconv.com-fio[data-ficha="aberta"] .zap-fio{display:none}
  .zap.nconv.com-fio[data-ficha="aberta"] .nconv-ficha{display:flex;flex:1 1 auto;width:auto;border-left:0;padding:12px 20px 24px}
  .zap.nconv[data-ficha="aberta"] .nconv-ficha-celular{display:flex}
  .zap.nconv .nconv-chevron{display:none}
  .zap.nconv .zap-voltar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:-10px;
    border-radius:10px;color:var(--c-texto) !important;text-decoration:none}
  .zap.nconv .zap-fio-topo{height:64px;min-height:64px;padding:0 12px 0 14px;gap:4px}
  .zap.nconv .nconv-quem{margin-left:0;padding:6px 4px}
  .zap.nconv .nconv-prazos{top:58px;right:12px}
  .zap.nconv .zap-fio-rolagem{padding:16px 14px 8px}
  .zap.nconv .zap-fio-rolagem .balao{max-width:85%}
  .zap.nconv .zap-fio-pe{padding:8px 10px max(10px, env(safe-area-inset-bottom, 0px))}
  .zap.nconv .zap-lista-topo{padding:16px 16px 12px;gap:12px}
  .zap.nconv .zap-lista .linha-conversa{padding:12px 16px}
  .zap.nconv .zap-desconectado{margin:0 16px 10px}
}
@media (max-width:420px){
  .zap.nconv .zap-fio-pe .anexar{width:34px;height:34px}
  .zap.nconv .zap-fio-pe .responder{gap:2px;padding:5px 6px 5px 4px}
  .zap.nconv .nconv-assumir,.zap.nconv .nconv-reativar{padding:0 12px}
  .zap.nconv .nconv-quem .avatar{display:none}
}

/* As fotos do desenho: iniciais em cinza claro; a da conversa aberta (na
   lista, no topo e na ficha) em preto. A cor por nome do núcleo sai daqui
   (o `style` em linha pede o !important). */
.zap.nconv .avatar{background:#E9E7E3 !important;color:var(--c-texto) !important;font-weight:600}
.zap.nconv .linha-conversa.aberta .avatar,
.zap.nconv .zap-fio-topo .avatar,
.zap.nconv .nconv-ficha .avatar{background:var(--c-texto) !important;color:#FFFFFF !important}
.zap.nconv .avatar.sem-nome{color:var(--c-texto-3) !important}
.zap.nconv .linha-conversa.aberta .avatar.sem-nome,
.zap.nconv .zap-fio-topo .avatar.sem-nome,
.zap.nconv .nconv-ficha .avatar.sem-nome{color:#FFFFFF !important}

/* ── a assistente marcou a sessão (plano 16.R, 05/10): uma nota no fio ───── */
.zap-fio-rolagem .msg-nota{list-style:none;display:flex;justify-content:center;margin:8px 0}
.zap-fio-rolagem .msg-nota span{max-width:min(520px,92%);padding:5px 12px;border-radius:10px;text-align:center;
  background:#EAF3EC;color:var(--n-verde,#146C38);font-size:12.5px;line-height:1.35}

/* ── ecos do celular, recibos e cartão de contato (05/10, 0042, plano 16.W) ── */
/* "pelo celular": a fala que a equipe mandou pelo aplicativo, discreta, ao lado da hora */
.zap-fio-rolagem .balao .pelo-celular{font-size:11px;letter-spacing:.01em}
/* ✓✓ lida: o azul do WhatsApp, claro o bastante no balão preto */
.zap.nconv .zap-fio-rolagem .msg.saida .recibo.lida{color:#7CC7F0}
/* o balão do cartão de contato */
.zap-fio-rolagem .cartao-contato{display:flex;flex-direction:column;gap:8px;min-width:200px;flex:1 1 100%}
.zap-fio-rolagem .cartao-contato .cc-rotulo{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--n-texto-3,#8A8782);text-transform:none}
.zap-fio-rolagem .cartao-contato .cc-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;
  background:var(--n-sup,#F7F6F3);border:1px solid var(--n-linha,#ECEAE6)}
.zap-fio-rolagem .cartao-contato .cc-nome{font-size:14px;font-weight:600;color:var(--n-texto,#141414);overflow-wrap:anywhere}
.zap-fio-rolagem .cartao-contato .cc-tel{font-size:13px;color:var(--n-texto-2,#5E5C58)}
.zap-fio-rolagem .cartao-contato .cc-o-que{font-size:12.5px;color:var(--n-texto-2,#5E5C58);margin:0}
.zap-fio-rolagem .cartao-contato .cc-ficha{margin-top:4px;font-size:13px;font-weight:600;color:var(--n-texto,#141414);
  text-decoration:underline;text-underline-offset:2px}

/* ── Testar a assistente (06/10, ERP 0056): o fio de ensaio dentro de Meu atendimento ── */
.zap.nconv.ens{flex:none;flex-direction:column;height:min(70vh,720px);min-height:420px;border:1px solid var(--c-linha);border-radius:14px}
.zap.nconv.ens .zap-fio-rolagem{flex:1;min-height:0;overflow-y:auto}
.zap.nconv.ens .zap-nada{display:flex;flex-direction:column;align-items:center;gap:10px;margin:auto;color:var(--c-texto-2)}
.zap.nconv.ens .zap-nada p{margin:0}
.zap.nconv.ens .ens-pensando .balao p{color:rgba(255,255,255,.72);font-style:italic}
.zap.nconv.ens .ens-barrada{font-style:italic}
@media (max-width:640px){
  .zap.nconv.ens{height:calc(100vh - 340px);min-height:320px;border-radius:10px}
  .zap.nconv.ens .zap-fio-rolagem{padding:14px 12px}
  .zap.nconv.ens .zap-fio-pe{padding:10px 10px 12px}
}

/* O Direct do Instagram (0061): o ícone ao lado do nome e o @ embaixo, no topo da conversa. */
.zap.nconv .nconv-canal-ig{display:inline-flex;flex:none;align-items:center;margin-left:6px;color:#C13584;vertical-align:-2px}
.zap.nconv .zap-lista .nconv-nome .nconv-canal-ig{margin-left:5px}
.zap.nconv .nconv-quem .zap-nome{display:inline-flex;align-items:center;max-width:100%}
.zap.nconv .nconv-quem .zap-usuario{font-size:12px;color:var(--c-texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zap.nconv .nconv-ig-aviso{margin:0;padding:12px 4px;font-size:13px;color:var(--c-texto-2);text-align:center}
/* As páginas da lista (14/10): 100 por vez */
.zap.nconv .nconv-paginas{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:12px 16px 16px}
.zap.nconv .nconv-paginas > :last-child{justify-self:end}
.zap.nconv .nconv-paginas-conta{font-size:13px;color:var(--c-texto-3);white-space:nowrap}
/* Os três filtros de liga/desliga (Felipe, 14/10): sem "Todas" e sem número, sempre numa linha só,
   dividindo a largura; a letra fica um pouco menor para caber. */
.zap.nconv .nconv-filtros{flex-wrap:nowrap;gap:6px;overflow:hidden}
.zap.nconv .nconv-filtros a,.zap.nconv .nconv-filtros a:first-child{flex:1 1 auto;justify-content:center;gap:5px;padding:6px 7px;font-size:12.5px}
.zap.nconv .nconv-filtros a.atual .nconv-ponto{box-shadow:0 0 0 1.5px #FFFFFF}

/* Botões de resposta rápida (modelo da Meta), como o WhatsApp desenha: cada
   botão é um bloco da largura do balão, logo abaixo dele, com a setinha de
   responder. O balão sem botão não muda (`so-balao` some do layout). */
.zap-fio-rolagem .so-balao{display:contents}
.zap-fio-rolagem .com-botoes{display:flex;flex-direction:column;gap:2px;max-width:min(420px,78%)}
/* mais específico que `.zap.nconv .zap-fio-rolagem .balao` (78%): o balão ocupa a largura do conjunto */
.zap.nconv .zap-fio-rolagem .com-botoes .balao{max-width:none;align-self:stretch}
.zap.nconv .zap-fio-rolagem .msg.saida .com-botoes .balao{border-radius:14px 14px 4px 4px}
.zap-fio-rolagem .botoes-zap{display:flex;flex-direction:column;gap:2px}
.zap-fio-rolagem .botao-zap{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;
  background:var(--c-texto);color:#FFFFFF;font-size:14px;font-weight:600;line-height:1.2;border-radius:4px;
  text-align:center;cursor:default}
.zap-fio-rolagem .botao-zap:last-child{border-bottom-left-radius:14px;border-bottom-right-radius:14px}
.zap-fio-rolagem .botao-zap svg{flex:none;opacity:.8}
@media (max-width:1000px){ .zap-fio-rolagem .com-botoes{max-width:85%} }