/* =====================================================================
   VENDAS — Conversas (inbox de WhatsApp do televendas)

   Desenho de app nativo de iPhone: título grande, busca e controle
   segmentado do iOS, barras translúcidas com desfoque, bolhas com
   "rabinho" no fim de cada bloco, folhas que sobem de baixo no celular.

   Tudo fica preso em .cv-app (inbox.js monta a tela dentro dele). O app
   é um contêiner de largura (@container cvapp): a terceira coluna, a do
   contato, só aparece quando a janela do app cabe as três — a barra
   lateral do site pode estar aberta ou recolhida, então a largura da
   tela sozinha não diz nada.

   Tema escuro: .cv-app[data-tema="escuro"] (botão lua/sol na lista).
   ===================================================================== */

.cv-app {
  /* ---- tema claro ---- */
  --cv-fundo: #F2F2F7;          /* fundo agrupado do iOS (painel do contato) */
  --cv-sup: #FFFFFF;            /* superfícies */
  --cv-barra: rgba(249,249,251,.82); /* barras translúcidas */
  --cv-fill: rgba(118,118,128,.12);  /* campos de busca, trilhos */
  --cv-fill2: rgba(118,118,128,.075);/* hover */
  --cv-campo: #FFFFFF;          /* campo de mensagem */
  --cv-campo-borda: rgba(60,60,67,.16);
  --cv-campo-f: #F2F2F7;        /* campos de formulário no painel */
  --cv-txt: #111114;
  --cv-txt2: #6C6C72;           /* 5:1 sobre branco */
  --cv-txt3: #7E7E85;           /* horas, legendas pequenas */
  --cv-sep: rgba(60,60,67,.13);
  --cv-verde: #1A9E58;          /* fundo de botão/selo, ícone de envio */
  --cv-verde-forte: #148049;
  --cv-tint: #128A4B;           /* ícones e textos de ação */
  --cv-sel: rgba(26,158,88,.10);/* conversa selecionada */
  --cv-link: #0A66D6;
  --cv-lida: #2EA6E6;
  --cv-perigo: #E5342A;
  --cv-thread: #FFFFFF;         /* fundo da conversa: limpo */
  --cv-in: #F0F0F3;             /* recebida: cinza-claro */
  --cv-out: #D9FDD3;            /* enviada: verde suave do WhatsApp */
  --cv-meta-out: rgba(17,17,20,.5);
  --cv-falhou: #FDECEC;
  --cv-ambar: #FFF4DE;
  --cv-ambar-txt: #8A5A00;
  --cv-sombra: 0 1px 2px rgba(0,0,0,.04), 0 18px 50px -18px rgba(15,23,42,.16);
  --cv-sombra-pop: 0 0 0 .5px rgba(0,0,0,.06), 0 12px 40px -8px rgba(0,0,0,.22);
  --cv-mola: cubic-bezier(.32,.72,0,1);  /* curva das transições de tela do iOS */

  /* Componentes compartilhados da ficha do lead (leadFicha.js) usam os
     tokens do .bi: aqui eles passam para a paleta do app — o verde vira a
     cor de ação no lugar do azul do painel comercial. */
  --blue: var(--cv-verde);
  --blueDeep: var(--cv-tint);
  --blueWash: var(--cv-sel);
  --blueBar: rgba(26,158,88,.45);

  container: cvapp / inline-size;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-height: 520px;
  max-width: none;
  margin: 0 auto;
  overflow: hidden;
  background: var(--cv-sup);
  color: var(--cv-txt);
  border-radius: 0;
  box-shadow: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

.cv-app[data-tema="escuro"] {
  --cv-fundo: #000000;
  --cv-sup: #1C1C1E;
  --cv-barra: rgba(28,28,30,.8);
  --cv-fill: rgba(118,118,128,.24);
  --cv-fill2: rgba(118,118,128,.16);
  --cv-campo: #2C2C2E;
  --cv-campo-borda: rgba(84,84,88,.6);
  --cv-campo-f: #2C2C2E;
  --cv-txt: #F5F5F7;
  --cv-txt2: #AEAEB2;
  --cv-txt3: #98989F;
  --cv-sep: rgba(84,84,88,.55);
  --cv-verde: #1DAA61;
  --cv-verde-forte: #21C063;
  --cv-tint: #3DD17E;
  --cv-sel: rgba(61,209,126,.13);
  --cv-link: #5EAEFF;
  --cv-lida: #53BDEB;
  --cv-perigo: #FF5A50;
  --cv-thread: #0B0B0D;
  --cv-in: #26262A;
  --cv-out: #0B5C47;
  --cv-meta-out: rgba(255,255,255,.62);
  --cv-falhou: #3D1F21;
  --cv-ambar: #3A2E14;
  --cv-ambar-txt: #F5C451;
  --cv-sombra: 0 0 0 .5px rgba(255,255,255,.06), 0 18px 50px -18px rgba(0,0,0,.6);
  --cv-sombra-pop: 0 0 0 .5px rgba(255,255,255,.1), 0 12px 40px -8px rgba(0,0,0,.6);

  /* tokens do .bi usados pela ficha do lead */
  --white: #1C1C1E;
  --ink: #F5F5F7;
  --ink2: #C7C7CC;
  --ink3: #A1A1A6;
  --ink4: #98989F;
  --rule: rgba(84,84,88,.55);
  --rule2: rgba(84,84,88,.35);
  --ruleStrong: rgba(120,120,128,.6);
  --wash: #2C2C2E;
  --badWash: #3D1F21;
  --bad: #FF6B63;
  --good: #3DD17E;
  --warnInk: #F5C451;
  color-scheme: dark;
}

/* Sem moldura em volta: o app ocupa toda a área ao lado do menu. */
#vendas-conversas.bi { padding: 0; }

.cv-app *, .cv-app *::before, .cv-app *::after { box-sizing: border-box; }
.cv-app button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.cv-app :focus-visible { outline: 2px solid var(--cv-verde); outline-offset: 2px; }
.cv-app svg { flex: none; }
.cv-app h1, .cv-app h3 { margin: 0; }

/* ---------------------------------------------------------------------
   Grade: lista | conversa | contato
   --------------------------------------------------------------------- */
.cv-layout { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(290px, 340px) minmax(0, 1fr); }
.cv-layout.so-estado { display: flex; align-items: center; justify-content: center; }

.cv-lista { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--cv-sup); border-right: .5px solid var(--cv-sep); }
.cv-chat { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--cv-thread); }

/* Contato: folha sobreposta vinda da direita (padrão)… */
.cv-contato {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 30;
  width: min(480px, 100%);
  display: flex; flex-direction: column; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--cv-fundo);
  box-shadow: -18px 0 40px -24px rgba(0,0,0,.35);
  transform: translateX(104%);
  visibility: hidden;
  transition: transform .42s var(--cv-mola), visibility 0s linear .42s;
}
.cv-layout:not(.sem-contato) .cv-contato:not(:empty) { transform: none; visibility: visible; transition: transform .42s var(--cv-mola), visibility 0s; }
.cv-contato-fundo { position: absolute; inset: 0; z-index: 29; background: rgba(0,0,0,.22); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.cv-layout:not(.sem-contato) .cv-contato:not(:empty) + .cv-contato-fundo { opacity: 1; pointer-events: auto; }

/* …e terceira coluna fixa quando o app tem largura para as três. */
@supports selector(:has(*)) {
@container cvapp (min-width: 1240px) {
  .cv-layout:not(.sem-contato):has(.cv-contato:not(:empty)) { grid-template-columns: 330px minmax(0, 1fr) 460px; }
  .cv-layout .cv-contato { position: relative; width: auto; transform: none; visibility: visible; box-shadow: none; border-left: .5px solid var(--cv-sep); transition: none; }
  .cv-layout.sem-contato .cv-contato, .cv-layout .cv-contato:empty { display: none; }
  .cv-contato-fundo { display: none; }
}
}

/* ---------------------------------------------------------------------
   Lista de conversas
   --------------------------------------------------------------------- */
.cv-lista-cab { flex: none; padding: 8px 16px 10px; border-bottom: .5px solid transparent; }
.cv-lista-barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.cv-lista-acoes { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.cv-titulo { font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin: 2px 0 10px !important; color: var(--cv-txt); }

.cv-numero-sel { position: relative; display: inline-flex; min-width: 0; max-width: 62%; margin: 0; }
.cv-numero-sel::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); color: var(--cv-tint); pointer-events: none; }
.cv-app .cv-numero-sel select {
  appearance: none; -webkit-appearance: none; width: 100%; height: 32px; padding: 0 30px 0 12px;
  border: 0; border-radius: 16px; background: var(--cv-fill2); color: var(--cv-tint);
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; cursor: pointer; text-overflow: ellipsis;
}
.cv-app .cv-numero-sel select:hover { background: var(--cv-fill); }

.cv-busca { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border-radius: 11px; background: var(--cv-fill); color: var(--cv-txt3); margin: 0; cursor: text; transition: background .2s; }
.cv-busca:focus-within { background: var(--cv-fill2); box-shadow: 0 0 0 1.5px var(--cv-sel) inset; }
.cv-app .cv-busca input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; box-shadow: none;
  font: inherit; font-size: 16px; color: var(--cv-txt); outline: none;
}
.cv-app .cv-busca input::placeholder { color: var(--cv-txt3); }
.cv-app .cv-busca input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .5; }

/* Controle segmentado do iOS: trilho cinza, "polegar" branco que desliza. */
.cv-seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; padding: 2px; border-radius: 9px; background: var(--cv-fill); }
.cv-seg-trilho {
  position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / 3);
  border-radius: 7px; background: var(--cv-sup);
  box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04), 0 0 0 .5px rgba(0,0,0,.04);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform .32s var(--cv-mola);
}
.cv-app[data-tema="escuro"] .cv-seg-trilho { background: #636366; }
.cv-seg button { position: relative; z-index: 1; height: 30px; border: 0; background: transparent; color: var(--cv-txt); font-size: 13.5px; font-weight: 500; cursor: pointer; border-radius: 7px; transition: opacity .15s; }
.cv-seg button.on { font-weight: 600; }
.cv-seg button:not(.on):hover { opacity: .7; }

.cv-itens { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 16px; scrollbar-width: thin; }

.cv-item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 10px; border: 0; border-radius: 14px; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background .18s ease, transform .12s ease;
}
/* separador fininho, recuado até o texto, como nas listas do iOS */
.cv-item::after { content: ""; position: absolute; left: 76px; right: 10px; bottom: 0; height: .5px; background: var(--cv-sep); transition: opacity .15s; }
.cv-item:last-child::after, .cv-item:hover::after, .cv-item.on::after,
.cv-item:has(+ .cv-item:hover)::after, .cv-item:has(+ .cv-item.on)::after { opacity: 0; }
.cv-item:hover { background: var(--cv-fill2); }
.cv-item:active { transform: scale(.985); background: var(--cv-fill); }
.cv-item.on { background: var(--cv-sel); }
.cv-item-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cv-item .l1, .cv-item .l2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.cv-item .l2 { align-items: center; }
.cv-item .n { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--cv-txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-item .h { flex: none; font-size: 13px; color: var(--cv-txt3); font-variant-numeric: tabular-nums; }
.cv-item.nl .h { color: var(--cv-tint); font-weight: 600; }
.cv-item .p { font-size: 14.5px; color: var(--cv-txt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-item.nl .p { color: var(--cv-txt); }
.cv-item .nlb { flex: none; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; background: var(--cv-verde); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 21px; text-align: center; animation: cvPop .3s var(--cv-mola); }
.cv-item .l3 { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }

/* selos da lista */
.cv-app .tag, .cv-app .cv-selo-qual {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border: 0; border-radius: 6px;
  background: var(--cv-fill2); color: var(--cv-txt2); font-family: inherit; font-size: 11.5px; font-weight: 500; letter-spacing: 0; white-space: nowrap;
}
.cv-app .tag.ad { background: var(--cv-ambar); color: var(--cv-ambar-txt); }
.cv-app .tag.lucas { background: rgba(124,58,237,.1); color: #6D28D9; font-weight: 600; }
.cv-app[data-tema="escuro"] .tag.lucas { background: rgba(167,139,250,.16); color: #C4B5FD; }
.cv-app .cv-selo-qual { background: var(--cv-sel); color: var(--cv-tint); font-weight: 600; }
.cv-app .cv-selo-qual svg { width: 12px; height: 12px; }

/* Avatares: tons suaves fixos por pessoa (a cor sai do nome, inbox.js). */

/* ---------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------- */
.cv-btn-ico {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--cv-tint);
  cursor: pointer; text-decoration: none;
  transition: background .18s ease, transform .15s ease, color .18s;
}
.cv-btn-ico:hover { background: var(--cv-fill2); }
.cv-btn-ico:active { transform: scale(.9); background: var(--cv-fill); }
.cv-btn-ico.on, .cv-btn-ico[aria-expanded="true"] { background: var(--cv-sel); }
.cv-btn-ico:disabled { opacity: .4; cursor: default; }
/* "Nova conversa" também é .btn-primario (some no modo só leitura); o
   visual é o do botão de ícone. */
.cv-app .cv-btn-nova, .cv-app .cv-btn-nova:hover { background: transparent; border: 0; color: var(--cv-tint); padding: 0; }
.cv-app .cv-btn-nova:hover { background: var(--cv-fill2); }

.cv-btn-texto { border: 0; background: transparent; color: var(--cv-tint); font-size: 16px; font-weight: 600; padding: 6px 8px; border-radius: 8px; cursor: pointer; transition: opacity .15s; }
.cv-btn-texto:hover { opacity: .7; }

/* ---------------------------------------------------------------------
   Estados: vazio, erro, esqueleto
   --------------------------------------------------------------------- */
.cv-estado { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 40px 28px; text-align: center; color: var(--cv-txt2); animation: cvSurge .4s ease both; }
.cv-estado h3 { font-size: 18px; font-weight: 600; color: var(--cv-txt); letter-spacing: -.01em; }
.cv-estado p { margin: 0; max-width: 360px; font-size: 14.5px; line-height: 1.45; }
.cv-estado b { color: var(--cv-txt); font-weight: 600; }
.cv-estado-ico { width: 76px; height: 76px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; background: var(--cv-fill2); color: var(--cv-txt3); }
.cv-estado-chat { flex: 1; background: var(--cv-thread); }
.cv-estado-lista { padding: 48px 20px; }
.cv-estado-lista .cv-estado-ico { width: 60px; height: 60px; }
.cv-estado-lista h3 { font-size: 16px; }
.cv-estado-lista p { font-size: 14px; }
.cv-estado-thread { margin: auto; }
.cv-estado .cv-btn-texto { margin-top: 10px; }

.cv-esq { display: block; height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--cv-fill2) 0%, var(--cv-fill) 40%, var(--cv-fill2) 80%); background-size: 220% 100%; animation: cvBrilho 1.4s ease-in-out infinite; animation-delay: var(--d, 0ms); }
.cv-esq-item { display: flex; align-items: center; gap: 12px; padding: 12px 10px; }
.cv-esq-item .cv-esq-av { width: 52px; height: 52px; border-radius: 50%; flex: none; }
.cv-esq-c { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.cv-esq-thread { flex: 1; overflow: hidden; padding-top: 80px !important; }
.cv-esq-bolhas { display: flex; flex-direction: column; gap: 10px; }
.cv-esq-b { height: 38px; border-radius: 18px; }
.cv-esq-b.in { align-self: flex-start; }
.cv-esq-b.out { align-self: flex-end; background: linear-gradient(90deg, var(--cv-sel) 0%, rgba(26,158,88,.18) 40%, var(--cv-sel) 80%); background-size: 220% 100%; }

/* ---------------------------------------------------------------------
   Cabeçalho da conversa (barra translúcida do iOS)
   --------------------------------------------------------------------- */
.cv-cab {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: 4px;
  min-height: 64px; padding: env(safe-area-inset-top) 10px 0 12px;
  background: var(--cv-barra);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--cv-sep);
}
.cv-voltar { display: none; width: 34px; height: 40px; flex: none; place-items: center; padding: 0; margin-left: -6px; border: 0; background: none; color: var(--cv-tint); cursor: pointer; border-radius: 10px; }
.cv-voltar:active { opacity: .5; }
.cv-cab-quem { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 4px; border: 0; border-radius: 14px; background: transparent; color: inherit; text-align: left; cursor: pointer; transition: background .18s; }
.cv-cab-quem:hover { background: var(--cv-fill2); }
.cv-cab-t { min-width: 0; display: flex; flex-direction: column; }
.cv-cab-t .n { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; color: var(--cv-txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-cab-t .s { font-size: 12.5px; color: var(--cv-txt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-janela-ind { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.cv-janela-ind::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cv-janela-ind.ok { color: var(--cv-tint); }
.cv-janela-ind.off { color: var(--cv-ambar-txt); }
.cv-cab-digitando { display: none; color: var(--cv-tint); font-weight: 500; }
.cv-cab.digitando .cv-cab-status { display: none; }
.cv-cab.digitando .cv-cab-digitando { display: inline; animation: cvSurge .25s ease; }
.cv-cab-a { display: flex; align-items: center; gap: 2px; flex: none; }
.cv-app .cv-btn-assumir {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px 0 11px; margin-right: 6px;
  border: 0; border-radius: 16px; background: var(--cv-verde); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: background .18s, transform .15s;
}
.cv-app .cv-btn-assumir:hover { background: var(--cv-verde-forte); }
.cv-app .cv-btn-assumir:active { transform: scale(.95); }

/* Menu "⋯": menu de contexto do iOS, com desfoque e itens em linha. */
.cv-mais { position: relative; }
.cv-mais-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 268px; padding: 0;
  overflow: hidden; border-radius: 14px;
  background: var(--cv-sup);
  background: color-mix(in srgb, var(--cv-sup) 96%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--cv-sombra-pop);
  transform-origin: top right; animation: cvMenu .22s var(--cv-mola);
}
.cv-mais-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  padding: 11px 16px; border: 0; border-bottom: .5px solid var(--cv-sep); background: none;
  color: var(--cv-txt); font-size: 15.5px; text-align: left; cursor: pointer; transition: background .12s;
}
.cv-mais-menu button:last-child { border-bottom: 0; }
.cv-mais-menu button:hover { background: var(--cv-fill2); }
.cv-mais-menu button:active { background: var(--cv-fill); }
.cv-mi-t { display: flex; flex-direction: column; }
.cv-mi-t span { font-size: 12.5px; color: var(--cv-txt2); margin-top: 1px; }
.cv-mais-menu button.perigo { color: var(--cv-perigo); }

/* ---------------------------------------------------------------------
   Conversa
   --------------------------------------------------------------------- */
.cv-thread {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: 76px clamp(12px, 4%, 48px) 14px;
  background: var(--cv-thread);
  scrollbar-width: thin;
}
.cv-thread.cv-abrindo { animation: cvSurge .32s ease both; }

/* separador de data: pílula discreta que gruda sob a barra ao rolar */
.cv-dia { position: sticky; top: 70px; z-index: 3; align-self: center; margin: 14px 0 6px; pointer-events: none; }
.cv-dia span {
  display: inline-block; padding: 4px 11px; border-radius: 10px;
  background: var(--cv-sup);
  background: color-mix(in srgb, var(--cv-sup) 86%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 .5px var(--cv-sep), 0 1px 2px rgba(0,0,0,.04);
  color: var(--cv-txt2); font-size: 12px; font-weight: 600; text-transform: capitalize;
}

.cv-sys { align-self: center; display: flex; align-items: center; gap: 7px; max-width: min(88%, 520px); margin: 10px 0; padding: 7px 12px; border-radius: 12px; background: var(--cv-fill2); color: var(--cv-txt2); font-size: 12.5px; line-height: 1.4; text-align: center; }
.cv-sys b { color: var(--cv-txt); font-weight: 600; }
.cv-sys.ad { background: var(--cv-ambar); color: var(--cv-ambar-txt); text-align: left; }
.cv-sys.ad b { color: inherit; }
.cv-reacao { font-size: 13px; }

.cv-autor { align-self: flex-end; margin: 12px 14px 3px 0; font-size: 12px; font-weight: 600; color: var(--cv-tint); }

/* Bolhas. --cv-bolha alimenta a bolha E o rabinho (pseudo-elementos). */
.cv-msg {
  --cv-bolha: var(--cv-in);
  position: relative; isolation: isolate;
  max-width: min(75%, 560px); margin-top: 2px; padding: 7px 12px;
  border-radius: 18px; background: var(--cv-bolha);
  color: var(--cv-txt); font-size: 15.5px; line-height: 1.38;
  overflow-wrap: anywhere;
}
.cv-msg.in { align-self: flex-start; }
.cv-msg.out { align-self: flex-end; --cv-bolha: var(--cv-out); }
.cv-msg.out.falhou { --cv-bolha: var(--cv-falhou); }
.cv-msg.ini { margin-top: 10px; }
.cv-autor + .cv-msg.ini { margin-top: 0; }
/* mensagens do mesmo bloco se "encostam": cantos internos menores */
.cv-msg.in:not(.ini) { border-top-left-radius: 6px; }
.cv-msg.in:not(.fim) { border-bottom-left-radius: 6px; }
.cv-msg.out:not(.ini) { border-top-right-radius: 6px; }
.cv-msg.out:not(.fim) { border-bottom-right-radius: 6px; }
/* rabinho na última bolha do bloco */
.cv-msg.fim::before, .cv-msg.fim::after { content: ""; position: absolute; bottom: 0; height: 17px; z-index: -1; }
.cv-msg.in.fim { border-bottom-left-radius: 4px; }
.cv-msg.in.fim::before { left: -7px; width: 20px; background: var(--cv-bolha); border-bottom-right-radius: 16px 14px; }
.cv-msg.in.fim::after { left: -26px; width: 26px; background: var(--cv-thread); border-bottom-right-radius: 10px; }
.cv-msg.out.fim { border-bottom-right-radius: 4px; }
.cv-msg.out.fim::before { right: -7px; width: 20px; background: var(--cv-bolha); border-bottom-left-radius: 16px 14px; }
.cv-msg.out.fim::after { right: -26px; width: 26px; background: var(--cv-thread); border-bottom-left-radius: 10px; }

.cv-msg .t { white-space: pre-wrap; }
.cv-msg .t a { color: var(--cv-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cv-msg .t.cv-nao { color: var(--cv-txt2); font-style: italic; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* A hora "flutua" no canto da última linha; o espaçador reserva o lugar. */
.cv-m-esp { display: inline-block; width: 44px; height: 1px; }
.cv-msg.out .cv-m-esp { width: 62px; }
.cv-msg .m { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 3px; font-size: 11.5px; line-height: 1; color: var(--cv-txt3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-msg.out .m { color: var(--cv-meta-out); }
.cv-msg .m.flut { position: absolute; right: 11px; bottom: 7px; margin: 0; }
.cv-msg .tk { display: inline-flex; align-items: center; }
.cv-msg .tk.lida { color: var(--cv-lida); }
.cv-msg .tk.err { width: 15px; height: 15px; justify-content: center; border-radius: 50%; background: var(--cv-perigo); color: #fff; font-size: 10.5px; font-weight: 700; }
.cv-erro { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 12.5px; color: var(--cv-perigo); }
/* com o aviso de erro embaixo, a hora desce para a própria linha */
.cv-msg.falhou .m.flut { position: static; margin-top: 4px; }
.cv-msg.falhou .cv-m-esp { display: none; }

.cv-quote { margin: 1px -4px 5px; padding: 6px 10px; border-left: 3px solid var(--cv-verde); border-radius: 8px; background: rgba(0,0,0,.05); color: var(--cv-txt2); font-size: 13.5px; }
.cv-app[data-tema="escuro"] .cv-quote { background: rgba(255,255,255,.07); }
.cv-quote b { display: block; font-size: 12.5px; font-weight: 600; color: var(--cv-tint); margin-bottom: 1px; }
.cv-tpl { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--cv-txt2); }

/* mídia */
.cv-msg.so-midia { padding: 4px; }
.cv-msg.so-midia .m { padding: 2px 8px 5px; }
.cv-msg.so-midia .cv-doc, .cv-msg.so-midia .cv-audio { margin: 0; }
.cv-img { display: block; margin: -3px -8px 5px; border-radius: 14px; overflow: hidden; line-height: 0; }
.cv-msg.so-midia .cv-img { margin: 0; }
.cv-img img { display: block; width: auto; max-width: 300px; max-height: 340px; object-fit: cover; transition: transform .3s ease, filter .2s; }
.cv-img:hover img { filter: brightness(.96); }
.cv-img.sticker img { max-width: 160px; }
.cv-msg.so-imagem .m { position: absolute; right: 10px; bottom: 9px; padding: 3px 7px; border-radius: 10px; background: rgba(0,0,0,.42); color: #fff; }
.cv-msg.so-imagem .tk.lida { color: #9EE0FF; }
.cv-video { display: block; max-width: min(320px, 100%); max-height: 300px; border-radius: 14px; margin: -3px -8px 5px; }
.cv-msg.so-midia .cv-video { margin: 0; }

.cv-audio { display: flex; align-items: center; gap: 8px; padding: 4px 4px 0; }
.cv-audio-ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--cv-verde); color: #fff; flex: none; }
.cv-audio audio { height: 40px; width: min(250px, 55vw); }

.cv-doc {
  display: flex; align-items: center; gap: 10px; min-width: min(240px, 100%); max-width: 320px;
  margin: -1px -4px 4px; padding: 9px 10px; border-radius: 12px;
  background: rgba(0,0,0,.045); color: var(--cv-txt); text-decoration: none;
  transition: background .15s, transform .15s;
}
.cv-app[data-tema="escuro"] .cv-doc { background: rgba(255,255,255,.07); }
.cv-doc:hover { background: rgba(0,0,0,.075); }
.cv-app[data-tema="escuro"] .cv-doc:hover { background: rgba(255,255,255,.11); }
.cv-doc:active { transform: scale(.98); }
.cv-doc-ico { position: relative; width: 38px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 8px; background: #6B7686; color: #fff; }
.cv-doc-ico b { font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }
.cv-doc-ico b ~ svg, .cv-doc-ico svg:has(+ b) { display: none; }
.cv-doc-ico.ext-pdf { background: #E5484D; }
.cv-doc-ico.ext-xls, .cv-doc-ico.ext-xlsx, .cv-doc-ico.ext-csv { background: #1F8A4C; }
.cv-doc-ico.ext-doc, .cv-doc-ico.ext-docx { background: #2F6BD9; }
.cv-local .cv-doc-ico { background: #E5484D; height: 38px; border-radius: 50%; }
.cv-doc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cv-doc-t .nm { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-doc-t .sub { font-size: 12px; color: var(--cv-txt2); }
.cv-doc-baixar { color: var(--cv-txt3); display: grid; }

/* entrada de mensagem nova (recebida ou enviada) */
.cv-msg.cv-novo { animation: cvEntra .38s var(--cv-mola) both; }
.cv-msg.in.cv-novo { transform-origin: 0 100%; }
.cv-msg.out.cv-novo { transform-origin: 100% 100%; }
.cv-provisoria { opacity: .72; }

/* "Lucas digitando…" */
.cv-digitando { align-self: flex-start; display: flex; align-items: center; gap: 4px; margin-top: 10px; padding: 13px 15px; border-radius: 18px; background: var(--cv-in); animation: cvEntra .3s var(--cv-mola) both; transform-origin: 0 100%; }
.cv-digitando span { width: 7px; height: 7px; border-radius: 50%; background: var(--cv-txt3); animation: cvPonto 1.3s ease-in-out infinite; }
.cv-digitando span:nth-child(2) { animation-delay: .16s; }
.cv-digitando span:nth-child(3) { animation-delay: .32s; }

/* ---------------------------------------------------------------------
   Campo de mensagem
   --------------------------------------------------------------------- */
.cv-composer {
  position: relative; flex: none; z-index: 8;
  padding: 8px 12px calc(9px + env(safe-area-inset-bottom));
  background: var(--cv-barra);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--cv-sep);
  animation: cvSobe .34s var(--cv-mola) both;
}
.cv-app[data-tema="claro"] .cv-composer { background: rgba(246,246,248,.9); }
.cv-linha { display: flex; align-items: flex-end; gap: 8px; }
.cv-linha[hidden], .cv-gravando[hidden], .cv-anexo[hidden], .cv-pop[hidden] { display: none !important; }

.cv-btn-circ {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  transition: transform .15s ease, background .18s, opacity .18s, color .18s;
}
.cv-btn-circ:active { transform: scale(.88); }
.cv-btn-anexo { background: transparent; color: var(--cv-tint); }
.cv-btn-anexo:hover { background: var(--cv-fill2); }
.cv-btn-anexo svg { transition: transform .3s var(--cv-mola); }
.cv-btn-anexo.on svg { transform: rotate(45deg); }

.cv-campo {
  flex: 1; min-width: 0; display: flex; align-items: flex-end;
  min-height: 38px; border-radius: 20px; background: var(--cv-campo);
  box-shadow: 0 0 0 .5px var(--cv-campo-borda) inset;
  transition: box-shadow .2s;
}
.cv-campo:focus-within { box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-verde) 55%, transparent) inset, 0 0 0 3px var(--cv-sel); }
.cv-app .cv-campo textarea {
  flex: 1; min-width: 0; width: auto; max-height: 160px; min-height: 38px; margin: 0;
  padding: 9px 4px 9px 15px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--cv-txt); font: inherit; font-size: 15.5px; line-height: 20px; resize: none; outline: none;
}
.cv-app .cv-campo textarea::placeholder { color: var(--cv-txt3); }
.cv-campo-btn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cv-txt3); cursor: pointer; transition: color .15s, transform .15s; }
.cv-campo-btn:hover, .cv-campo-btn[aria-expanded="true"] { color: var(--cv-tint); }
.cv-campo-btn:active { transform: scale(.88); }

/* enviar: círculo verde; microfone: ícone simples (como no iOS) */
.cv-app .cv-btn-enviar, .cv-app .cv-btn-enviar:hover { background: var(--cv-verde); border: 0; color: #fff; }
.cv-app .cv-btn-enviar:hover { background: var(--cv-verde-forte); }
.cv-app .cv-btn-enviar svg { margin-left: 2px; }
.cv-app .cv-btn-enviar:disabled { opacity: .55; cursor: default; }
.cv-app .cv-btn-mic, .cv-app .cv-btn-mic:hover { background: transparent; border: 0; color: var(--cv-tint); }
.cv-app .cv-btn-mic:hover { background: var(--cv-fill2); }
/* Com gravação de áudio disponível, microfone e enviar se revezam. */
.cv-composer.com-mic:not(.tem-conteudo) #cv-enviar { display: none; }
.cv-composer.com-mic.tem-conteudo #cv-mic { display: none; }
.cv-composer.com-mic #cv-enviar, .cv-composer.com-mic #cv-mic { animation: cvPop .24s var(--cv-mola); }
/* Sem gravação: enviar sempre à vista, apagado enquanto não há o que mandar. */
.cv-composer:not(.com-mic):not(.tem-conteudo) #cv-enviar { opacity: .45; }

/* anexo escolhido, antes de enviar */
.cv-anexo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px 8px 8px 10px; border-radius: 16px; background: var(--cv-campo); box-shadow: 0 0 0 .5px var(--cv-campo-borda) inset; animation: cvSobe .28s var(--cv-mola) both; }
.cv-anexo img, .cv-anexo-ico { width: 42px; height: 42px; flex: none; border-radius: 9px; object-fit: cover; }
.cv-anexo-ico { display: grid; place-items: center; background: var(--cv-fill); color: var(--cv-txt2); }
.cv-anexo-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cv-anexo-t .nm { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-anexo-t small { font-size: 12px; color: var(--cv-txt2); }
.cv-x { width: 28px; height: 28px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--cv-fill); color: var(--cv-txt2); cursor: pointer; transition: transform .15s, background .15s; }
.cv-x:hover { background: var(--cv-fill2); color: var(--cv-txt); }
.cv-x:active { transform: scale(.88); }

/* balões do compositor: anexos e emojis */
.cv-pop {
  position: absolute; bottom: calc(100% + 8px); z-index: 12;
  border-radius: 16px;
  background: var(--cv-sup);
  background: color-mix(in srgb, var(--cv-sup) 97%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--cv-sombra-pop);
  animation: cvMenu .24s var(--cv-mola);
}
.cv-menu-anexo { left: 10px; min-width: 240px; padding: 6px; transform-origin: 0 100%; }
.cv-menu-anexo button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--cv-txt); font-size: 15.5px; text-align: left; cursor: pointer; transition: background .12s; }
.cv-menu-anexo button:hover { background: var(--cv-fill2); }
.cv-menu-anexo button:active { background: var(--cv-fill); }
.cv-pop-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; color: #fff; }
.cv-pop-ico.azul { background: #0A7AFF; }
.cv-pop-ico.roxo { background: #9B51E0; }
.cv-pop-ico.verde { background: var(--cv-verde); }
.cv-emojis { right: 10px; width: min(348px, calc(100% - 20px)); display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; transform-origin: 100% 100%; }
.cv-emojis button { aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: none; font-size: 23px; line-height: 1; cursor: pointer; transition: background .12s, transform .12s; }
.cv-emojis button:hover { background: var(--cv-fill2); transform: scale(1.12); }
.cv-emojis button:active { transform: scale(.9); }

/* gravando áudio */
.cv-gravando { display: flex; align-items: center; gap: 8px; animation: cvSurge .2s ease; }
.cv-grav-cancelar { background: transparent; color: var(--cv-perigo); }
.cv-grav-cancelar:hover { background: var(--cv-fill2); }
.cv-grav-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border-radius: 20px; background: var(--cv-campo); box-shadow: 0 0 0 .5px var(--cv-campo-borda) inset; font-size: 15px; font-variant-numeric: tabular-nums; }
.cv-grav-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--cv-perigo); animation: cvPisca 1.1s ease-in-out infinite; }
.cv-grav-onda { flex: 1; display: flex; align-items: center; gap: 3px; height: 22px; overflow: hidden; }
.cv-grav-onda i { width: 3px; height: 30%; border-radius: 2px; background: var(--cv-txt3); animation: cvOnda 1s ease-in-out infinite; }
.cv-grav-onda i:nth-child(3n) { animation-delay: .15s; }
.cv-grav-onda i:nth-child(3n+1) { animation-delay: .35s; }
.cv-grav-onda i:nth-child(4n) { animation-delay: .5s; }

/* fora da janela de 24h */
.cv-janela { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 16px; background: var(--cv-ambar); color: var(--cv-ambar-txt); font-size: 13.5px; line-height: 1.4; animation: cvSobe .3s var(--cv-mola) both; }
.cv-janela > div { flex: 1; min-width: 0; }
.cv-janela > div > b { display: block; font-size: 14.5px; }
.cv-janela b { font-weight: 600; }
.cv-janela-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); }
.cv-app .cv-btn-pilula, .cv-app .cv-btn-pilula:hover { flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: 18px; background: var(--cv-verde); color: #fff; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .18s, transform .15s; }
.cv-app .cv-btn-pilula:hover { background: var(--cv-verde-forte); }
.cv-app .cv-btn-pilula:active { transform: scale(.96); }

/* ---------------------------------------------------------------------
   Dados do contato (lista agrupada do iOS)
   --------------------------------------------------------------------- */
.cv-ct-barra {
  position: sticky; top: 0; z-index: 5; flex: none;
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding-top: env(safe-area-inset-top);
  background: var(--cv-fundo);
  background: color-mix(in srgb, var(--cv-fundo) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--cv-sep);
  font-size: 16px; font-weight: 600;
}
.cv-ct-barra .cv-btn-texto { position: absolute; right: 8px; bottom: 9px; }
.cv-ct-cab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 16px 6px; text-align: center; animation: cvSurge .35s ease both; }
.cv-ct-cab .n { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--cv-txt); overflow-wrap: anywhere; }
.cv-ct-cab .s { font-size: 14.5px; color: var(--cv-txt2); }
.cv-ct-atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 16px; }
.cv-atalho { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px 9px; border: 0; border-radius: 12px; background: var(--cv-sup); color: var(--cv-tint); font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s; }
.cv-atalho:hover { background: var(--cv-sup); background: color-mix(in srgb, var(--cv-sup) 92%, var(--cv-verde)); }
.cv-atalho:active { transform: scale(.95); }

.cv-contato .cv-ct-bloco { flex: none; display: flex; flex-direction: column; gap: 10px; margin: 12px 16px 0; padding: 14px; border: 0; border-radius: 14px; background: var(--cv-sup); color: var(--cv-txt); animation: cvSurge .35s ease both; }
.cv-contato .cv-ct-bloco:last-child { margin-bottom: 28px; }
.cv-contato .cv-ct-bloco:empty { display: none; }
.cv-contato .cv-ct-bloco .s, .cv-contato .cv-ad .s { font-size: 12.5px; color: var(--cv-txt2); }
.cv-contato .cv-ct-bloco .s b { color: var(--cv-txt); font-weight: 600; }
.cv-contato .hint { margin: 0; font-size: 13.5px; color: var(--cv-txt2); line-height: 1.45; }
.cv-contato .hint b { color: var(--cv-txt); }
.cv-contato .k, .cv-contato .lk-prox .k { font-size: 15px; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--cv-txt); margin: 0; }
.cv-contato .cv-tit { display: flex; align-items: center; gap: 8px; }
.cv-contato .cv-tit .lk-ico { width: 18px; height: 18px; flex: none; color: var(--cv-tint); }
.cv-contato .cv-tit-sub { margin-top: 10px; }
.cv-contato .cv-tit-perigo .lk-ico { color: var(--cv-perigo); }

/* campos do painel e das folhas: preenchidos, sem borda, cantos do iOS */
.cv-contato input:not([type=checkbox]):not([type=radio]), .cv-contato select, .cv-contato textarea,
.cv-gaveta input:not([type=checkbox]):not([type=radio]), .cv-gaveta select, .cv-gaveta textarea {
  width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px;
  background: var(--cv-campo-f); color: var(--cv-txt); font-family: inherit; font-size: 15px; box-shadow: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.cv-contato textarea, .cv-gaveta textarea { padding: 10px 12px; line-height: 1.45; resize: vertical; }
.cv-contato input:focus, .cv-contato select:focus, .cv-contato textarea:focus,
.cv-gaveta input:focus, .cv-gaveta select:focus, .cv-gaveta textarea:focus {
  outline: none; border-color: color-mix(in srgb, var(--cv-verde) 60%, transparent); box-shadow: 0 0 0 3px var(--cv-sel); background: var(--cv-sup);
}
.cv-contato input::placeholder, .cv-contato textarea::placeholder, .cv-gaveta input::placeholder { color: var(--cv-txt3); }

/* botões do painel e das folhas */
.cv-contato .btn, .cv-gaveta .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px;
  border: 0; border-radius: 10px; background: var(--cv-fill2); color: var(--cv-tint);
  font-family: inherit; font-size: 14.5px; font-weight: 600; box-shadow: none; cursor: pointer;
  transition: background .15s, transform .15s;
}
.cv-contato .btn:hover, .cv-gaveta .btn:hover { background: var(--cv-fill); color: var(--cv-tint); box-shadow: none; }
.cv-contato .btn:active, .cv-gaveta .btn:active { transform: scale(.97); }
.cv-contato .btn.btn-primario, .cv-gaveta .btn.btn-primario { background: var(--cv-verde); color: #fff; }
.cv-contato .btn.btn-primario:hover, .cv-gaveta .btn.btn-primario:hover { background: var(--cv-verde-forte); color: #fff; }
.cv-contato .btn:disabled, .cv-gaveta .btn:disabled { opacity: .5; cursor: default; }
.cv-contato .btn-texto { color: var(--cv-tint); }
.cv-contato .lk-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cv-contato .lk-linha input[type=date] { width: auto; min-width: 160px; }

/* ficha do lead dentro do painel */
.cv-contato .lk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; margin: 0; }
.cv-contato .lk-f.g2, .cv-contato #lk-cnpj-resultado { grid-column: 1 / -1; }
.cv-contato .lk-f { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; }
.cv-contato .lk-rot { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--cv-txt2); text-transform: none; letter-spacing: 0; }
.cv-contato .lk-rot .lk-ico { width: 14px; height: 14px; color: var(--cv-txt3); }
.cv-contato .lk-prox { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: transparent; }
.cv-contato .lk-tg.rep { background: var(--cv-fill2); color: var(--cv-txt2); }
.cv-contato .lk-steps::before { background: var(--cv-sep); }
.cv-contato .lk-step { font-size: 10.5px; color: var(--cv-txt3); }
.cv-contato .lk-step .dot { background: var(--cv-sup); }
.cv-contato .lk-step.done .dot { background: var(--cv-verde); border-color: var(--cv-verde); }
.cv-contato .lk-step.now { color: var(--cv-txt); }
.cv-contato .lk-step:hover:not(.now) { color: var(--cv-tint); }
.cv-lead-etapas .aviso { margin: 0; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--cv-txt2); }

.cv-ficha-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: transparent; color: var(--cv-txt); font: inherit; text-align: left; cursor: pointer; }
.cv-ficha-toggle.fixo { cursor: default; }
.cv-ficha-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--cv-verde); color: #fff; }
.cv-ficha-ico svg { width: 18px; height: 18px; }
.cv-ficha-tit { flex: 1; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.cv-ficha-seta { width: 20px; height: 20px; flex: none; color: var(--cv-txt3); transition: transform .25s var(--cv-mola); }
.cv-ficha-toggle[aria-expanded="false"] .cv-ficha-seta { transform: rotate(180deg); }
.cv-ficha-toggle.fixo .cv-ficha-seta { display: none; }
#ct-ficha:not([hidden]) { animation: cvSurge .25s ease; }

/* qualificação: grade 2x2 com filete entre as células */
.cv-qual-topo { display: flex; align-items: center; gap: 8px; }
.cv-qual-topo .cv-tit { flex: none; }
.cv-qual-topo .dias { margin-left: auto; font-size: 12.5px; color: var(--cv-txt2); }
.cv-qual-selo { padding: 4px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; }
.cv-qual-selo.pend { background: var(--cv-fill2); color: var(--cv-txt2); }
.cv-qual-grade { display: grid; grid-template-columns: 1fr 1fr; gap: .5px; overflow: hidden; border-radius: 12px; background: var(--cv-sep); box-shadow: 0 0 0 .5px var(--cv-sep); }
.cv-qual-c { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 11px; background: var(--cv-sup); }
.cv-qual-c span { font-size: 11.5px; font-weight: 500; color: var(--cv-txt2); }
.cv-qual-c b { font-size: 14.5px; font-weight: 600; color: var(--cv-txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-qual-c b.cv-qual-vazio { color: var(--cv-txt3); font-weight: 400; }
.cv-contato .lk-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.cv-contato .lk-tag { padding: 2px 8px; border-radius: 6px; background: var(--cv-sel); color: var(--cv-tint); font-size: 12px; font-weight: 500; }

.cv-lucas, .cv-dados { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 13.5px; }
.cv-lucas dt, .cv-dados dt { color: var(--cv-txt2); }
.cv-lucas dd, .cv-dados dd { margin: 0; color: var(--cv-txt); }
.cv-dados dd { text-align: right; font-variant-numeric: tabular-nums; }
.cv-ad b { color: var(--cv-txt); font-size: 14.5px; font-weight: 600; }
.cv-ad a { font-size: 13px; color: var(--cv-link); }

/* histórico: linha do tempo */
.cv-linha-tempo { display: flex; flex-direction: column; }
.cv-ev { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding-bottom: 14px; }
.cv-ev:last-child { padding-bottom: 0; }
.cv-ev::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 0; width: 1.5px; background: var(--cv-sep); }
.cv-ev:last-child::before { display: none; }
.cv-ev-ponto { width: 10px; height: 10px; margin: 4px 0 0 2px; border-radius: 50%; border: 2px solid var(--cv-verde); background: var(--cv-sup); }
.cv-ev:first-child .cv-ev-ponto { background: var(--cv-verde); }
.cv-ev-corpo { min-width: 0; font-size: 13.5px; line-height: 1.4; }
.cv-ev-corpo b { font-weight: 600; color: var(--cv-txt); }
.cv-ev-desc { margin-top: 2px; color: var(--cv-txt2); }
.cv-ev-meta { margin-top: 3px; font-size: 12px; color: var(--cv-txt3); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Folhas sobrepostas (template, nova conversa)
   --------------------------------------------------------------------- */
.cv-app .cv-folha-fundo { position: absolute; inset: 0; z-index: 60; background: rgba(0,0,0,.3); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: cvFade .25s ease both; }
.cv-app .cv-folha-fundo.saindo { animation: cvFadeSai .2s ease both; }
.cv-app .cv-gaveta {
  position: absolute; top: 50%; left: 50%; right: auto; bottom: auto; z-index: 61;
  width: min(500px, calc(100% - 32px)); max-height: min(760px, calc(100% - 48px));
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  border: 0; border-radius: 20px; background: var(--cv-sup); color: var(--cv-txt);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.4), 0 0 0 .5px var(--cv-sep);
  transform: translate(-50%, -50%);
  animation: cvModal .34s var(--cv-mola) both;
}
.cv-app .cv-gaveta.saindo { animation: cvModalSai .2s ease both; }
.cv-gaveta .lk-gcab { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 14px; background: var(--cv-sup); background: color-mix(in srgb, var(--cv-sup) 88%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: .5px solid var(--cv-sep); }
.cv-gaveta .lk-gtopo { display: flex; align-items: center; gap: 10px; }
.cv-gaveta .lk-gcab h2 { margin: 0; font-family: inherit; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--cv-txt); }
.cv-gaveta .lk-gcab .sub { font-size: 13.5px; color: var(--cv-txt2); line-height: 1.45; }
.cv-gaveta .cv-fechar-folha { width: 30px; height: 30px; margin-left: auto; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--cv-fill); color: var(--cv-txt2); cursor: pointer; transition: transform .15s, background .15s; }
.cv-gaveta .cv-fechar-folha:hover { background: var(--cv-fill2); color: var(--cv-txt); }
.cv-gaveta .cv-fechar-folha:active { transform: scale(.88); }
.cv-gaveta .lk-gcorpo { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px; }
.cv-gaveta .lk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.cv-gaveta .lk-f { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.cv-gaveta .lk-f.g2 { grid-column: 1 / -1; }
.cv-gaveta .lk-f > span { font-size: 12.5px; font-weight: 500; color: var(--cv-txt2); text-transform: none; letter-spacing: 0; }
.cv-gaveta .lk-f input + input { margin-top: 6px; }
.cv-gaveta .hint { margin: 0; font-size: 13.5px; color: var(--cv-txt2); }
.cv-gaveta .lk-grod { position: sticky; bottom: 0; display: flex; gap: 10px; margin-top: auto; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--cv-sup); background: color-mix(in srgb, var(--cv-sup) 88%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: .5px solid var(--cv-sep); }
.cv-gaveta .lk-grod .btn { flex: 1; height: 44px; border-radius: 12px; font-size: 16px; }
/* prévia do template: uma bolha enviada, como vai aparecer */
.cv-previa { align-self: flex-end; max-width: 100%; padding: 9px 12px; border-radius: 18px 18px 4px 18px; background: var(--cv-out); color: var(--cv-txt); font-size: 15px; line-height: 1.4; white-space: pre-wrap; }
.cv-previa mark { padding: 0 3px; border-radius: 4px; background: var(--cv-ambar); color: var(--cv-ambar-txt); }

/* ---------------------------------------------------------------------
   Animações — rápidas e discretas
   --------------------------------------------------------------------- */
@keyframes cvEntra { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes cvSurge { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cvSobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cvPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes cvMenu { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes cvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cvFadeSai { to { opacity: 0; } }
@keyframes cvModal { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes cvModalSai { to { opacity: 0; transform: translate(-50%, -48%) scale(.97); } }
@keyframes cvFolha { from { transform: translateY(100%); } to { transform: none; } }
@keyframes cvFolhaSai { to { transform: translateY(100%); } }
@keyframes cvBrilho { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes cvPonto { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes cvPisca { 50% { opacity: .25; } }
@keyframes cvOnda { 0%, 100% { height: 25%; } 50% { height: 95%; } }

@media (prefers-reduced-motion: reduce) {
  .cv-app *, .cv-app *::before, .cv-app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------
   Tablet: lista mais estreita
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .cv-layout { grid-template-columns: minmax(270px, 310px) minmax(0, 1fr); }
  .cv-cab-tel { display: none; }
}

/* =====================================================================
   CELULAR: duas telas, como no WhatsApp do iPhone — a lista, e a
   conversa que entra deslizando da direita por cima dela.

   A tela de mensagens não é uma página de relatório: é o aplicativo
   inteiro enquanto está aberta. A altura é encadeada por flex, de <body>
   até .cv-app, em vez de descontada com número mágico: assim a barra do
   navegador pode crescer e encolher sem cortar o campo de mensagem.
   ===================================================================== */
@media (max-width: 760px) {
  body.conversas-cheia { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body.conversas-cheia .mobile-topbar { flex: none; }
  /* conversa aberta: sem a barra do site, a conversa ocupa a tela toda */
  body.conversas-cheia.cv-mov-chat .mobile-topbar { display: none; }
  body.conversas-cheia .app { flex: 1 1 auto; min-height: 0; }
  body.conversas-cheia main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; }
  body.conversas-cheia #vendas-conversas.pagina.ativa { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; }

  #vendas-conversas .cv-app { flex: 1 1 auto; height: auto; min-height: 0; max-width: none; margin: 0; border-radius: 0; box-shadow: none; }

  .cv-layout { display: block; overflow: hidden; overflow: clip; }
  .cv-img img { max-width: 64vw; }
  .cv-lista, .cv-chat { position: absolute; inset: 0; width: 100%; will-change: transform; }
  .cv-lista { border-right: 0; transition: transform .42s var(--cv-mola), visibility 0s; }
  .cv-chat { z-index: 2; transform: translateX(100%); visibility: hidden; box-shadow: -10px 0 30px -10px rgba(0,0,0,.18); transition: transform .42s var(--cv-mola), visibility 0s linear .42s; }
  .cv-layout.mov-chat .cv-chat { transform: none; visibility: visible; transition: transform .42s var(--cv-mola), visibility 0s; }
  .cv-layout.mov-chat .cv-lista { transform: translateX(-28%); visibility: hidden; transition: transform .42s var(--cv-mola), visibility 0s linear .42s; }

  .cv-lista-cab { padding: 6px 16px 10px; }
  .cv-titulo { font-size: 34px; }
  .cv-itens { padding: 2px 6px 24px; }
  .cv-item { padding: 10px; border-radius: 12px; }

  .cv-voltar { display: grid; }
  .cv-cab { gap: 2px; padding-left: 8px; padding-right: 6px; }
  .cv-cab-quem { padding-left: 2px; gap: 9px; }
  .cv-cab-a { gap: 0; }
  .cv-cab-a .cv-btn-ico { width: 36px; }
  .cv-app .cv-btn-assumir { padding: 0 11px; margin-right: 2px; }
  .cv-app .cv-btn-assumir svg { display: none; }
  .cv-thread { padding-left: 12px; padding-right: 12px; }
  .cv-msg { max-width: 82%; font-size: 16px; }
  .cv-app .cv-campo textarea { font-size: 16px; }   /* 16px: o Safari não dá zoom ao focar */
  .cv-composer { padding-left: 8px; padding-right: 8px; }
  .cv-linha { gap: 6px; }
  .cv-janela { flex-wrap: wrap; }
  .cv-janela .cv-btn-pilula { width: 100%; }

  .cv-contato { width: 100%; box-shadow: none; }

  /* folhas sobem de baixo, com a alça no topo */
  .cv-app .cv-gaveta { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 92%; border-radius: 20px 20px 0 0; transform: none; animation: cvFolha .42s var(--cv-mola) both; }
  .cv-app .cv-gaveta.saindo { animation: cvFolhaSai .25s ease both; }
  .cv-app .cv-gaveta::before { content: ""; position: sticky; top: 0; z-index: 3; display: block; flex: none; width: 36px; height: 5px; margin: 7px auto -12px; border-radius: 3px; background: var(--cv-fill); }
  .cv-gaveta .lk-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Seletor do site (seletor.js) dentro do painel e das folhas: mesmo
   campo preenchido dos inputs ao lado.
   --------------------------------------------------------------------- */
.cv-app .cv-contato .sel-botao, .cv-app .cv-gaveta .sel-botao {
  min-height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px;
  background: var(--cv-campo-f); color: var(--cv-txt); font-family: inherit; font-size: 15px; box-shadow: none;
}
.cv-app .cv-contato .sel-botao:hover, .cv-app .cv-gaveta .sel-botao:hover { border-color: transparent; background: var(--cv-fill); }
.cv-app .cv-contato .sel-botao.aberto, .cv-app .cv-gaveta .sel-botao.aberto,
.cv-app .cv-contato .sel-botao:focus-visible, .cv-app .cv-gaveta .sel-botao:focus-visible {
  outline: none; border-color: color-mix(in srgb, var(--cv-verde) 60%, transparent); box-shadow: 0 0 0 3px var(--cv-sel); background: var(--cv-sup);
}
.cv-app .cv-contato .sel-texto.sel-vazio, .cv-app .cv-gaveta .sel-texto.sel-vazio { color: var(--cv-txt3); }
.cv-app .cv-contato .sel-botao svg, .cv-app .cv-gaveta .sel-botao svg { color: var(--cv-txt3); }

/* O menu do seletor é montado no <body>, fora do app: o tema escuro
   chega nele pela marca que inbox.js põe no <body> (cv-escuro). */
body.conversas-cheia.cv-escuro .sel-menu { background: #2C2C2E; border-color: rgba(84,84,88,.6); color: #F5F5F7; color-scheme: dark; }
body.conversas-cheia.cv-escuro .sel-menu .sel-busca input { background: #1C1C1E; border-color: rgba(84,84,88,.6); color: #F5F5F7; }
body.conversas-cheia.cv-escuro .sel-menu .sel-op.ativo { background: #3A3A3C; }
body.conversas-cheia.cv-escuro .sel-menu .sel-op[aria-selected="true"] { color: #3DD17E; }
body.conversas-cheia.cv-escuro .sel-menu .sel-op[aria-selected="true"].ativo { background: rgba(61,209,126,.16); }