/* Conversas no estilo do WhatsApp Web (04/10/2026).
   Tudo com prefixo cv- e preso dentro de .cv: o style.css do painel define
   button, input e label para a pagina inteira, e a grade de horarios ja usa
   .dia. Os resets abaixo devolvem os elementos ao zero so aqui dentro. */

.cv {
  /* Identidade Embracon (18/10/2026): as variáveis cv- apontam para as do painel;
     balões e fundo deixaram o verde e o bege do WhatsApp. */
  --cv-verde: var(--marca); --cv-acento: var(--marca); --cv-ok: var(--ok); --cv-alerta: var(--alerta); --cv-erro: var(--erro);
  --cv-texto: var(--texto); --cv-cinza: var(--cinza); --cv-cinza2: #4A4F55; --cv-linha: var(--linha);
  --cv-lado: var(--carta); --cv-claro: var(--fundo-2); --cv-hover: var(--fundo); --cv-input: var(--carta);
  --cv-papel: var(--fundo); --cv-pontos: transparent;
  --cv-b-cliente: var(--carta); --cv-b-agente: #ECEFF5; --cv-b-voce: var(--marca-clara);
  --cv-rot-agente: var(--azul); --cv-rot-voce: var(--marca);
  --cv-ficha: var(--fundo); --cv-sec: var(--carta); --cv-evento: var(--alerta-fundo); --cv-evento-txt: var(--alerta);
  --cv-chip: var(--marca-clara); --cv-chip-txt: var(--marca); --cv-sombra: 0 1px 1px rgba(27, 31, 36, .08);
  --cv-menu: var(--carta); --cv-onda: #AEB4BB;
  height: calc(100vh - var(--cv-topo, 56px));
  height: calc(100dvh - var(--cv-topo, 56px));
  display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr) 340px; grid-template-rows: minmax(0, 1fr);
  background: var(--cv-lado); color: var(--cv-texto); font-size: 14px; line-height: 1.35;
  position: relative; overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .cv { --cv-cinza2: #B9BEC4; --cv-b-agente: #232A36; --cv-onda: #6B727A; --cv-sombra: 0 1px 1px rgba(0, 0, 0, .4); }
}
#aba-conversas.aba { padding: 0; max-width: none; }
/* Com o menu lateral, lista e ficha cedem espaço para a conversa. */
@media (min-width: 901px) { .cv { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) 320px; } .cv.sem-ficha { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); } }
/* Menus e janelas ficam fora da grade (senao viram uma linha nova dela). */
#cv-camada { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.cv.sem-ficha { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); }
.cv button { background: none; color: inherit; border: 0; border-radius: 0; padding: 0; font: inherit; font-weight: inherit; text-align: inherit; }
.cv label { display: block; margin: 0; font-size: inherit; color: inherit; }
.cv input, .cv textarea, .cv select { width: auto; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; }
.cv svg { display: block; }
.cv mark { background: #FFE58F; color: inherit; border-radius: 2px; padding: 0 1px; }

/* ---------- lista ---------- */
.cv-lado { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--cv-linha); background: var(--cv-lado); }
.cv-lado-cab { padding: 14px 16px 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cv-lado-cab h2 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.cv .cv-numero { display: inline-flex; align-items: center; gap: 6px; background: var(--cv-claro); padding: 6px 10px; border-radius: 8px; font-size: 13px; max-width: 62%; white-space: nowrap; }
.cv .cv-numero span { overflow: hidden; text-overflow: ellipsis; }
.cv .cv-numero svg { width: 14px; height: 14px; color: var(--cv-cinza); flex: none; }
.cv .cv-numero:disabled { opacity: 1; cursor: default; }
.cv-busca { margin: 4px 12px 8px; position: relative; }
.cv .cv-busca input { width: 100%; height: 36px; border-radius: 8px; background: var(--cv-claro); padding: 0 34px 0 40px; font-size: 14px; }
.cv .cv-busca input::placeholder { color: var(--cv-cinza); }
.cv .cv-busca input:focus { outline: 2px solid var(--cv-acento); outline-offset: -2px; background: var(--cv-input); }
.cv-busca > svg { position: absolute; left: 13px; top: 9px; width: 18px; height: 18px; color: var(--cv-cinza); pointer-events: none; }
.cv .cv-busca .limpar { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--cv-cinza); }
.cv .cv-busca .limpar svg { width: 16px; height: 16px; }
/* Filtros quebram linha em vez de sumirem pela direita (Bruno, 18/10). */
.cv-filtros { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 10px; border-bottom: 1px solid var(--cv-linha); }
.cv-filtros::-webkit-scrollbar { display: none; }
.cv .cv-filtros button { flex: none; background: var(--cv-claro); color: var(--cv-cinza2); border-radius: 999px; padding: 5px 10px; font-size: 13.5px; white-space: nowrap; }
.cv .cv-filtros button.ativo { background: var(--cv-chip); color: var(--cv-chip-txt); font-weight: 600; }
.cv-filtros .n { margin-left: 4px; font-variant-numeric: tabular-nums; opacity: .8; }
.cv-lista { flex: 1; overflow-y: auto; min-height: 0; }
.cv .cv-item { width: 100%; display: grid; grid-template-columns: 49px minmax(0, 1fr); gap: 0 13px; align-items: center; padding: 0 0 0 13px; text-align: left; }
.cv .cv-item:hover { background: var(--cv-hover); }
.cv .cv-item.ativo { background: var(--cv-claro); }
.cv-item .corpo { min-width: 0; padding: 12px 15px 12px 0; border-bottom: 1px solid var(--cv-linha); display: grid; gap: 2px; }
.cv-item .l1, .cv-item .l2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cv-item .nome { flex: 1; min-width: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-item .num { flex: none; font-size: 12px; color: var(--cv-cinza); background: var(--cv-claro); border-radius: 4px; padding: 0 5px; font-variant-numeric: tabular-nums; }
.cv-item .hora { flex: none; font-size: 12px; color: var(--cv-cinza); font-variant-numeric: tabular-nums; }
.cv-item.espera .hora { color: var(--ok); font-weight: 600; }
.cv-item .cv-prev { flex: 1; min-width: 0; font-size: 14px; color: var(--cv-cinza); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-item .cv-prev b { font-weight: 500; color: var(--cv-cinza2); }
.cv-item .cv-prev svg { display: inline-block; vertical-align: -3px; width: 15px; height: 15px; margin-right: 3px; }
.cv-item .marcas { flex: none; display: flex; align-items: center; gap: 6px; color: var(--cv-cinza); }
.cv-item .marcas svg { width: 16px; height: 16px; }
.cv-item .espera-tag { background: var(--ok); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 600; padding: 1px 7px; }
.cv-item .bloqueou-tag { background: var(--cv-erro); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 600; padding: 1px 7px; }
.cv-lista-fim { padding: 16px; text-align: center; color: var(--cv-cinza); font-size: 13px; }
.cv .cv-mais-lista { color: var(--cv-verde); font-weight: 600; font-size: 13.5px; padding: 8px 12px; border-radius: 8px; }
@media (prefers-color-scheme: dark) { .cv .cv-mais-lista { color: var(--cv-acento); } }
.cv-av { position: relative; overflow: hidden; width: 49px; height: 49px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 17px; letter-spacing: .02em; flex: none; }
.cv-av.p { width: 40px; height: 40px; font-size: 15px; }
.cv-av.g { width: 96px; height: 96px; font-size: 34px; }
/* Foto do WhatsApp cobre as iniciais; sem foto, a imagem é removida. */
.cv-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Excluídos: não abrem, só restauram. */
.cv .cv-item.cv-excluido { cursor: default; }
.cv .cv-item.cv-excluido:hover { background: none; }
.cv-excluido .cv-av { filter: grayscale(1); opacity: .6; }
.cv-excluido .nome { color: var(--cv-cinza2); }
.cv-nota-excluidos { text-align: left; line-height: 18px; border-bottom: 1px solid var(--cv-linha); }
.cv .cv-menu button.perigo { color: var(--cv-erro); }
@media (prefers-color-scheme: dark) { .cv .cv-menu button.perigo { color: #F08A8A; } }

/* ---------- conversa ---------- */
.cv-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--cv-papel); position: relative; }
.cv-chat::before { content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: radial-gradient(var(--cv-pontos) 1px, transparent 1px); background-size: 22px 22px; }
.cv-vazio { position: relative; flex: 1; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--cv-cinza); border-left: 1px solid var(--cv-linha); background: var(--cv-claro); }
.cv-vazio h3 { margin: 14px 0 6px; font-size: 22px; font-weight: 400; color: var(--cv-texto); }
.cv-vazio p { margin: 0 auto; max-width: 44ch; font-size: 14px; line-height: 20px; }
.cv-vazio svg { width: 56px; height: 56px; margin: 0 auto; color: var(--cv-cinza); opacity: .6; }
.cv-chat-cab { position: relative; z-index: 6; height: 60px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 16px; background: var(--cv-claro); border-left: 1px solid var(--cv-linha); }
.cv .cv-chat-cab .quem { flex: 1; min-width: 0; cursor: pointer; text-align: left; }
.cv-chat-cab .quem b { display: block; font-weight: 500; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-chat-cab .quem span { display: block; font-size: 13px; color: var(--cv-cinza); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-chat-cab .quem span.escrevendo { color: var(--cv-acento); font-weight: 500; }
.cv .cv-voltar { display: none; color: var(--cv-cinza2); padding: 6px; margin-left: -8px; border-radius: 50%; }
.cv-voltar svg { width: 24px; height: 24px; }
.cv-agente { display: inline-flex; align-items: center; gap: 10px; border: 1px solid #CFE9DA; background: var(--cv-input); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 13.5px; white-space: nowrap; }
.cv-agente .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--cv-ok); flex: none; }
.cv-agente.pausado { border-color: #F0DDB0; background: #FFF9EC; }
.cv-agente.pausado .ponto { background: var(--cv-alerta); }
@media (prefers-color-scheme: dark) {
  .cv-agente { border-color: #1F4D3F; }
  .cv-agente.pausado { border-color: #5A4A1E; background: #2B2615; }
}
.cv .cv-sw { position: relative; width: 36px; height: 20px; border-radius: 999px; background: #C5CDD1; flex: none; }
.cv .cv-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.cv .cv-sw[aria-checked="true"] { background: var(--cv-ok); }
.cv .cv-sw[aria-checked="true"]::after { transform: translateX(16px); }
.cv .cv-sw:disabled { opacity: .5; }
@media (prefers-color-scheme: dark) { .cv .cv-sw { background: #3B4A54; } }
.cv .cv-icone { color: var(--cv-cinza2); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.cv .cv-icone:hover { background: rgba(0, 0, 0, .06); }
.cv .cv-icone svg { width: 22px; height: 22px; }
.cv .cv-icone.ativo { background: rgba(0, 0, 0, .08); }
@media (prefers-color-scheme: dark) { .cv .cv-icone:hover, .cv .cv-icone.ativo { background: rgba(255, 255, 255, .08); } }

.cv-contexto { position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: 10px; padding: 7px 16px; background: var(--cv-lado); border-bottom: 1px solid var(--cv-linha); border-left: 1px solid var(--cv-linha); font-size: 13px; color: var(--cv-cinza2); }
.cv-contexto > svg { width: 16px; height: 16px; color: var(--cv-cinza); flex: none; }
.cv-contexto .txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-contexto .txt b { font-weight: 600; color: var(--cv-texto); }
.cv .cv-link { color: var(--cv-verde); font-weight: 600; font-size: 13px; padding: 2px 0; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .cv .cv-link { color: var(--cv-acento); } }

.cv-baloes { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; padding: 12px 6% 10px; display: flex; flex-direction: column; }
.cv .cv-antigas { align-self: center; margin: 4px 0 8px; background: var(--cv-lado); color: var(--cv-cinza2); font-size: 12.5px; padding: 6px 14px; border-radius: 999px; box-shadow: var(--cv-sombra); }
.cv-dia { align-self: center; margin: 10px 0 8px; background: var(--cv-lado); color: var(--cv-cinza2); font-size: 12.5px; padding: 5px 12px; border-radius: 8px; box-shadow: var(--cv-sombra); }
.cv-evento { align-self: center; margin: 4px 0 10px; background: var(--cv-evento); color: var(--cv-evento-txt); font-size: 12.5px; padding: 6px 12px; border-radius: 8px; box-shadow: var(--cv-sombra); text-align: center; max-width: 85%; }
.cv-msg { display: flex; margin-top: 8px; }
.cv-msg.cont { margin-top: 2px; }
.cv-msg.dele { justify-content: flex-start; }
.cv-msg.nosso { justify-content: flex-end; }
.cv-b { position: relative; max-width: min(65%, 520px); padding: 6px 8px 7px 9px; border-radius: 8px; font-size: 14.2px; line-height: 19px; box-shadow: var(--cv-sombra); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--cv-b-cliente); }
.cv-b .meta { float: right; margin: 6px 0 -4px 10px; font-size: 11px; line-height: 15px; color: var(--cv-cinza); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-b .autor { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 1px; }
.cv-b a { color: #027EB5; }
@media (prefers-color-scheme: dark) { .cv-b a { color: var(--azul); } }
.cv-msg.agente .cv-b { background: var(--cv-b-agente); }
.cv-msg.agente .cv-b .autor { color: var(--cv-rot-agente); }
.cv-msg.voce .cv-b { background: var(--cv-b-voce); }
.cv-msg.voce .cv-b .autor { color: var(--cv-rot-voce); }
.cv-b.rabo::before { content: ''; position: absolute; top: 0; width: 10px; height: 13px; }
.dele .cv-b.rabo { border-top-left-radius: 0; }
.dele .cv-b.rabo::before { left: -8px; background: linear-gradient(to bottom right, transparent 50%, var(--cv-b-cliente) 50%); }
.nosso .cv-b.rabo { border-top-right-radius: 0; }
.agente .cv-b.rabo::before { right: -8px; background: linear-gradient(to bottom left, transparent 50%, var(--cv-b-agente) 50%); }
.voce .cv-b.rabo::before { right: -8px; background: linear-gradient(to bottom left, transparent 50%, var(--cv-b-voce) 50%); }
.cv-b.so-figurinha { background: none !important; box-shadow: none; padding: 0; }
.cv-b.so-figurinha::before { display: none; }
.cv-b.so-figurinha .meta { float: none; display: inline-block; margin: 2px 0 0; background: var(--cv-lado); border-radius: 6px; padding: 0 6px; }
.cv-fig { display: block; width: 130px; height: 130px; object-fit: contain; }

/* midia */
.cv-b.midia { padding: 3px 3px 6px; }
.cv-b.midia .meta { margin: 4px 6px -2px 10px; }
.cv-b.midia .legenda { display: block; padding: 4px 6px 0; }
.cv .cv-foto { display: block; border-radius: 6px; overflow: hidden; cursor: zoom-in; max-width: 330px; min-width: 120px; background: rgba(0, 0, 0, .06); }
.cv-foto img { display: block; width: 100%; max-height: 360px; object-fit: cover; }
.cv .cv-baixa { display: flex; align-items: center; gap: 12px; width: 280px; max-width: 100%; padding: 12px; border-radius: 6px; background: rgba(0, 0, 0, .05); text-align: left; }
.cv .cv-baixa.foto, .cv .cv-baixa.video { height: 170px; justify-content: center; flex-direction: column; gap: 8px; background: linear-gradient(135deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .03)); }
.cv .cv-baixa.figurinha { width: 130px; height: 110px; justify-content: center; flex-direction: column; gap: 6px; }
@media (prefers-color-scheme: dark) {
  .cv .cv-baixa { background: rgba(255, 255, 255, .05); }
  .cv .cv-baixa.foto, .cv .cv-baixa.video { background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); }
  .cv .cv-foto { background: rgba(255, 255, 255, .05); }
}
.cv-circ { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(11, 20, 26, .55); color: #fff; flex: none; position: relative; }
.cv-circ svg { width: 22px; height: 22px; }
.cv-baixa .rot { font-size: 13px; color: var(--cv-cinza2); font-weight: 500; }
.cv-baixa .rot small { display: block; margin: 1px 0 0; font-weight: 400; color: var(--cv-cinza); font-size: 12px; }
.cv-baixa.foto .rot, .cv-baixa.video .rot, .cv-baixa.figurinha .rot { text-align: center; }
.cv-baixa.baixando .cv-circ::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--cv-acento); animation: cv-gira .8s linear infinite; }
.cv-baixa.falhou .cv-circ { background: var(--cv-erro); }
.cv-baixa .erro-midia { display: block; color: var(--cv-erro); font-size: 12px; margin-top: 2px; font-weight: 400; }
@keyframes cv-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cv-baixa.baixando .cv-circ::after { animation-duration: 2.4s; } }
.cv .cv-video-pronto { position: relative; display: grid; place-items: center; width: 280px; max-width: 100%; height: 170px; border-radius: 6px; background: #111B21; color: #fff; }
.cv-video-pronto .rot { position: absolute; left: 8px; bottom: 6px; font-size: 12px; color: #E9EDEF; }

.cv-doc { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(0, 0, 0, .04); border-radius: 6px; min-width: 260px; max-width: 100%; }
@media (prefers-color-scheme: dark) { .cv-doc { background: rgba(255, 255, 255, .05); } }
.cv-doc .ico { width: 34px; height: 40px; border-radius: 4px; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em; flex: none; }
.cv-doc .ico.pdf { background: #E5484D; } .cv-doc .ico.ppt { background: #E66A2C; } .cv-doc .ico.docw { background: var(--azul); } .cv-doc .ico.xls { background: #1B7F4B; } .cv-doc .ico.arq { background: #667781; }
.cv-doc .dados { min-width: 0; flex: 1; }
.cv-doc .dados b { display: block; font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-doc .dados span { display: block; font-size: 12px; color: var(--cv-cinza); margin-top: 1px; }
.cv-doc .dados .erro-midia { color: var(--cv-erro); }
.cv-doc .acoes { display: flex; gap: 4px; flex: none; }
.cv .cv-doc .acoes button, .cv .cv-doc .acoes a { color: var(--cv-verde); font-size: 13px; font-weight: 600; padding: 6px 8px; border-radius: 6px; text-decoration: none; }
.cv .cv-doc .acoes button:hover, .cv .cv-doc .acoes a:hover { background: rgba(0, 0, 0, .05); }
@media (prefers-color-scheme: dark) { .cv .cv-doc .acoes button, .cv .cv-doc .acoes a { color: var(--cv-acento); } }
.cv-doc.baixando .acoes { opacity: .5; pointer-events: none; }

.cv-contato { display: flex; align-items: center; gap: 12px; padding: 8px 10px; min-width: 220px; }
.cv-contato .cv-av { width: 40px; height: 40px; font-size: 15px; background: #8696A0; }
.cv-contato b { display: block; font-weight: 500; }
.cv-contato span { display: block; font-size: 12.5px; color: var(--cv-cinza); font-variant-numeric: tabular-nums; }

.cv-audio { display: flex; align-items: center; gap: 10px; min-width: 250px; padding: 2px 0 4px; }
.cv .cv-audio .play { width: 34px; height: 34px; border-radius: 50%; background: var(--cv-cinza2); color: #fff; display: grid; place-items: center; flex: none; position: relative; }
.agente .cv-audio .play { background: var(--cv-rot-agente); }
.voce .cv-audio .play { background: var(--cv-rot-voce); }
.cv-audio .play svg { width: 16px; height: 16px; }
.cv-audio .play.carregando::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--cv-acento); animation: cv-gira .8s linear infinite; }
.cv-audio .onda { flex: 1; display: flex; align-items: center; gap: 2px; height: 26px; cursor: pointer; }
.cv-audio .onda i { flex: 1; max-width: 3px; border-radius: 2px; background: var(--cv-onda); }
.cv-audio .onda i.foi { background: var(--cv-cinza2); }
.agente .cv-audio .onda i.foi { background: var(--cv-rot-agente); }
.voce .cv-audio .onda i.foi { background: var(--cv-rot-voce); }
.cv-audio .dur { font-size: 12px; color: var(--cv-cinza); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }
.cv .cv-audio .vel { font-size: 12px; font-weight: 600; color: var(--cv-cinza2); background: rgba(0, 0, 0, .07); border-radius: 999px; padding: 2px 7px; font-variant-numeric: tabular-nums; }
.cv-audio-erro { display: block; color: var(--cv-erro); font-size: 12px; }
.cv-transcricao { display: block; margin-top: 2px; padding: 6px 8px; border-radius: 6px; background: rgba(0, 0, 0, .04); font-size: 13.5px; line-height: 18px; color: var(--cv-cinza2); }
.cv-b.midia .cv-transcricao { margin: 4px 3px 0; }
.cv-transcricao em { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: var(--cv-cinza); margin-bottom: 1px; }
@media (prefers-color-scheme: dark) { .cv-transcricao, .cv .cv-audio .vel { background: rgba(255, 255, 255, .06); } }
.cv-nota { display: inline-flex; align-items: center; gap: 6px; color: var(--cv-cinza); font-style: italic; }
.cv-nota svg { width: 16px; height: 16px; }

.cv .cv-descer { position: absolute; z-index: 5; right: 18px; bottom: 86px; width: 42px; height: 42px; border-radius: 50%; background: var(--cv-lado); color: var(--cv-cinza2); box-shadow: 0 2px 6px rgba(11, 20, 26, .2); display: grid; place-items: center; }
.cv-descer svg { width: 22px; height: 22px; }
.cv-descer .n { position: absolute; top: -6px; right: -4px; background: var(--ok); color: #fff; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 6px; font-variant-numeric: tabular-nums; }

/* compor */
.cv-compor { position: relative; z-index: 2; flex: none; background: var(--cv-claro); padding: 6px 16px 10px; }
.cv-aviso { font-size: 12px; color: var(--cv-cinza); padding: 2px 4px 6px; display: flex; align-items: center; gap: 6px; }
.cv-aviso svg { width: 14px; height: 14px; }
.cv-form { display: flex; align-items: flex-end; gap: 6px; }
.cv .cv-form textarea { flex: 1; resize: none; border-radius: 8px; padding: 10px 12px; font-size: 15px; line-height: 20px; min-height: 42px; max-height: 140px; background: var(--cv-input); }
.cv .cv-form textarea::placeholder { color: var(--cv-cinza); }
.cv .cv-form textarea:focus { outline: none; }
.cv .cv-enviar { width: 42px; height: 42px; border-radius: 50%; background: var(--cv-verde); color: #fff; display: grid; place-items: center; flex: none; }
@media (prefers-color-scheme: dark) { .cv .cv-enviar { background: var(--cv-acento); color: #fff; } }
.cv-enviar svg { width: 20px; height: 20px; }
.cv-erro-envio { color: var(--cv-erro); font-size: 13px; padding: 0 4px 6px; }
.cv-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; padding: 6px 0 8px; max-height: 172px; overflow-y: auto; }
.cv .cv-emojis button { font-size: 22px; line-height: 1; padding: 6px 0; border-radius: 6px; text-align: center; }
.cv .cv-emojis button:hover { background: rgba(0, 0, 0, .06); }
.cv-anexo { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin-bottom: 8px; border-radius: 10px; background: var(--cv-lado); box-shadow: var(--cv-sombra); }
.cv-anexo img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; }
.cv-anexo .ico { width: 44px; height: 52px; border-radius: 6px; background: #667781; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.cv-anexo .dados { flex: 1; min-width: 0; }
.cv-anexo .dados b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-anexo .dados span { display: block; font-size: 12.5px; color: var(--cv-cinza); }
.cv .cv-anexo .dados input { width: 100%; margin-top: 6px; padding: 7px 10px; border-radius: 8px; background: var(--cv-claro); font-size: 14px; }
.cv .cv-btn { border-radius: 8px; padding: 9px 16px; font-size: 14px; font-weight: 600; }
.cv .cv-btn.prim { background: var(--cv-verde); color: #fff; }
.cv .cv-btn.sec { background: var(--cv-lado); color: var(--cv-verde); border: 1px solid var(--linha-forte); }
.cv .cv-btn.perigo { background: var(--cv-lado); color: var(--cv-erro); border: 1px solid #E8C4C4; }
@media (prefers-color-scheme: dark) {
  .cv .cv-btn.prim { background: var(--cv-acento); color: #fff; }
  .cv .cv-btn.sec { color: var(--cv-acento); border-color: #2A3942; }
  .cv .cv-btn.perigo { border-color: #5A2A2A; color: #F08A8A; }
}
.cv-gravando { display: flex; align-items: center; gap: 12px; padding: 6px 4px; font-size: 15px; }
.cv-gravando .ponto { width: 10px; height: 10px; border-radius: 50%; background: #E5484D; animation: cv-pisca 1.1s ease-in-out infinite; }
.cv-gravando .tempo { flex: 1; font-variant-numeric: tabular-nums; }
@keyframes cv-pisca { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .cv-gravando .ponto { animation: none; } }

/* ---------- ficha ---------- */
.cv-ficha { border-left: 1px solid var(--cv-linha); background: var(--cv-ficha); overflow-y: auto; min-height: 0; }
.cv-ficha-cab { height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--cv-claro); position: sticky; top: 0; z-index: 2; }
.cv-ficha-cab b { font-weight: 500; font-size: 16px; flex: 1; }
.cv-ficha-topo { background: var(--cv-sec); text-align: center; padding: 22px 16px 18px; border-bottom: 1px solid var(--cv-linha); }
.cv-ficha-topo .cv-av { margin: 0 auto 12px; }
.cv-ficha-topo h3 { margin: 0; font-size: 20px; font-weight: 500; overflow-wrap: anywhere; }
.cv-ficha-topo p { margin: 3px 0 0; font-size: 15px; color: var(--cv-cinza); font-variant-numeric: tabular-nums; }
.cv-ficha-topo .perfil { font-size: 13px; margin-top: 2px; }
.cv-tags { display: flex; justify-content: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.cv-tag { font-size: 12px; font-weight: 500; border-radius: 999px; padding: 3px 9px; background: var(--cv-claro); color: var(--cv-cinza2); }
.cv-tag.quente { background: #FDE7E2; color: #A33A1A; }
.cv-tag.morno { background: #FFF2D6; color: #8A5A00; }
.cv-tag.frio { background: #E3EEFB; color: var(--azul); }
@media (prefers-color-scheme: dark) {
  .cv-tag.quente { background: #4A2018; color: #F4A58E; }
  .cv-tag.morno { background: #3D3015; color: #F0C86A; }
  .cv-tag.frio { background: #1A2D45; color: #8AB4F8; }
}
.cv-sec { background: var(--cv-sec); margin-top: 8px; padding: 14px 16px; border-top: 1px solid var(--cv-linha); border-bottom: 1px solid var(--cv-linha); }
.cv-sec h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--cv-cinza); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cv-linha-ficha { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 5px 0; }
.cv-linha-ficha span { color: var(--cv-cinza); flex: none; }
.cv-linha-ficha b { font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.cv-sec p { margin: 0; font-size: 14px; line-height: 20px; color: var(--cv-cinza2); white-space: pre-wrap; overflow-wrap: anywhere; }
.cv-sec p + p { margin-top: 8px; }
.cv-sec p em { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: var(--cv-cinza); margin-bottom: 2px; }
.cv-mais { margin-top: 4px; }
.cv-mais summary { color: var(--cv-verde); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.cv-mais summary::-webkit-details-marker { display: none; }
.cv-mais[open] summary { margin-bottom: 6px; }
@media (prefers-color-scheme: dark) { .cv-mais summary { color: var(--cv-acento); } }
.cv-sec .cv-sem { color: var(--cv-cinza); font-size: 13.5px; }
.cv-resumo h5 { margin: 10px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--cv-texto); }
.cv-resumo h5:first-child { margin-top: 0; }
.cv-resumo ul { margin: 0; padding-left: 16px; font-size: 13.5px; line-height: 19px; color: var(--cv-cinza2); }
.cv-resumo li { margin: 2px 0; }
.cv-resumo li.nc { color: var(--cv-cinza); }
.cv-ficha-agente { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cv-ficha-agente b { display: block; font-weight: 500; font-size: 14.5px; }
.cv-ficha-agente small { display: block; color: var(--cv-cinza); font-size: 12.5px; margin-top: 1px; }
.cv .cv-sec select { width: 100%; height: 36px; border: 1px solid var(--cv-linha); border-radius: 8px; padding: 0 10px; font-size: 14px; background: var(--cv-input); color: var(--cv-texto); }
.cv-reuniao { display: flex; gap: 12px; align-items: center; }
.cv-reuniao svg { width: 22px; height: 22px; color: var(--cv-ok); flex: none; }
.cv-reuniao b { display: block; font-weight: 500; }
.cv-reuniao span { display: block; font-size: 12.5px; color: var(--cv-cinza); }
.cv .cv-acao-ficha { display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 0; font-size: 14.5px; border-top: 1px solid var(--cv-linha); }
.cv .cv-acao-ficha:first-child { border-top: 0; }
.cv-acao-ficha svg { width: 20px; height: 20px; color: var(--cv-cinza); }

/* ---------- menus, avisos, janelas ---------- */
.cv-menu { position: absolute; z-index: 30; background: var(--cv-menu); border-radius: 10px; box-shadow: 0 6px 24px rgba(11, 20, 26, .18), 0 1px 3px rgba(11, 20, 26, .12); padding: 6px 0; min-width: 250px; max-width: min(360px, calc(100vw - 24px)); }
.cv-menu .tit { font-size: 12.5px; color: var(--cv-cinza); padding: 8px 16px 6px; }
.cv .cv-menu button { display: block; width: 100%; text-align: left; padding: 10px 16px; font-size: 14.5px; }
.cv .cv-menu button:hover, .cv .cv-menu button:focus-visible { background: var(--cv-claro); outline: none; }
.cv .cv-menu button.marcado { font-weight: 600; }
.cv-menu button small { display: block; font-size: 12.5px; color: var(--cv-cinza); margin-top: 2px; line-height: 16px; }
.cv-menu hr { border: 0; border-top: 1px solid var(--cv-linha); margin: 6px 0; }
.cv-menu .lista-rolar { max-height: 360px; overflow-y: auto; }
.cv-toast { position: absolute; z-index: 40; left: 50%; bottom: 90px; transform: translateX(-50%); background: #2A2F36; color: #fff; border-radius: 8px; padding: 10px 14px; font-size: 14px; display: flex; gap: 16px; align-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); max-width: calc(100% - 32px); }
.cv-toast span { overflow-wrap: anywhere; }
.cv .cv-toast button { color: var(--azul); font-weight: 600; flex: none; }
.cv-toast.cv-toast-erro { background: var(--erro); }

.cv-fundo { position: fixed; inset: 0; z-index: 50; background: rgba(11, 20, 26, .45); display: grid; place-items: center; padding: 20px; }
.cv-modal { background: var(--cv-lado); color: var(--cv-texto); border-radius: 14px; width: min(580px, 100%); max-height: calc(100vh - 40px); overflow: auto; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.cv-modal.peq { width: min(420px, 100%); }
.cv-modal-cab { display: flex; align-items: center; gap: 12px; padding: 16px 20px 6px; }
.cv-modal-cab h3 { margin: 0; font-size: 18px; font-weight: 600; flex: 1; }
.cv-modal-sub { margin: 0; padding: 0 20px 12px; font-size: 13.5px; color: var(--cv-cinza); line-height: 19px; }
.cv-modal-aviso { margin: 0 20px 14px; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; line-height: 19px; background: var(--cv-claro); color: var(--cv-texto); }
.cv-modal-aviso.forte { background: var(--cv-evento); color: var(--cv-evento-txt); }
.cv-modal-corpo { padding: 4px 20px 6px; }
.cv-campo { margin: 14px 0; }
.cv-campo > .rot { display: block; font-size: 13px; font-weight: 600; color: var(--cv-cinza2); margin-bottom: 8px; }
.cv .cv-campo input[type=text], .cv .cv-campo textarea { width: 100%; border: 1px solid #D1D7DB; border-radius: 8px; padding: 10px 12px; font-size: 15px; background: var(--cv-input); }
@media (prefers-color-scheme: dark) { .cv .cv-campo input[type=text], .cv .cv-campo textarea { border-color: #3B4A54; } }
.cv .cv-campo input[type=text]:focus, .cv .cv-campo textarea:focus { outline: 2px solid var(--cv-acento); outline-offset: -1px; border-color: transparent; }
.cv .cv-campo textarea { min-height: 110px; resize: vertical; line-height: 21px; }
.cv .cv-campo textarea.curto { min-height: 0; height: auto; }
.cv-campo .dica { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--cv-cinza); margin-top: 6px; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cv .cv-chips button { border: 1px solid #D1D7DB; background: var(--cv-lado); color: var(--cv-cinza2); border-radius: 999px; padding: 7px 13px; font-size: 14px; }
.cv .cv-chips button.ativo { border-color: var(--cv-verde); background: var(--marca-clara); color: var(--cv-verde); font-weight: 600; }
.cv .cv-chips.peq button { padding: 5px 11px; font-size: 13px; }
.cv .cv-chips.peq button.usado { opacity: .45; }
@media (prefers-color-scheme: dark) {
  .cv .cv-chips button { border-color: #3B4A54; }
  .cv .cv-chips button.ativo { border-color: var(--cv-acento); background: var(--cv-chip); color: var(--cv-chip-txt); }
}
.cv-previa-ag { max-height: 150px; overflow-y: auto; background: var(--cv-claro); border: 1px solid var(--cv-linha); border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 20px; color: var(--cv-cinza2); overflow-wrap: anywhere; }
.cv-previa-ag em { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: var(--cv-cinza); margin-bottom: 4px; }
.cv-modal-rodape { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px 18px; flex-wrap: wrap; position: sticky; bottom: 0; background: var(--cv-lado); border-top: 1px solid var(--cv-linha); }
.cv-modal .cv-erro-envio { padding: 0 20px; }

.cv-visor { position: fixed; inset: 0; z-index: 60; background: rgba(17, 27, 33, .96); display: flex; flex-direction: column; color: #E9EDEF; }
.cv-visor-cab { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.cv-visor-cab .quem { flex: 1; min-width: 0; font-size: 14.5px; }
.cv-visor-cab .quem span { display: block; font-size: 12.5px; color: #AEBAC1; }
.cv .cv-visor-cab button, .cv .cv-visor-cab a { color: #E9EDEF; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.cv .cv-visor-cab button:hover, .cv .cv-visor-cab a:hover { background: rgba(255, 255, 255, .1); }
.cv-visor-cab svg { width: 22px; height: 22px; }
.cv-visor-corpo { flex: 1; display: grid; place-items: center; padding: 10px 64px 24px; min-height: 0; position: relative; }
.cv-visor-corpo img, .cv-visor-corpo video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.cv-visor-corpo .leg { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 14px; color: #E9EDEF; padding: 0 70px; }
.cv .cv-visor .seta { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #E9EDEF; display: grid; place-items: center; }
.cv .cv-visor .seta:hover { background: rgba(255, 255, 255, .16); }
.cv-visor .seta svg { width: 24px; height: 24px; }
.cv-visor .seta.ant { left: 12px; }
.cv-visor .seta.prox { right: 12px; }
.cv-visor .carregando { color: #AEBAC1; font-size: 14px; }

/* ---------- telas medias: a ficha vira painel por cima da conversa ---------- */
@media (min-width: 901px) and (max-width: 1199px) {
  .cv { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
  .cv .cv-ficha { position: absolute; top: 0; right: 0; bottom: 0; width: 340px; z-index: 20; box-shadow: -8px 0 24px rgba(11, 20, 26, .15); }
}

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .cv, .cv.sem-ficha { grid-template-columns: minmax(0, 1fr); }
  .cv .cv-chat, .cv .cv-ficha { display: none; }
  .cv.vendo .cv-lado { display: none; }
  .cv.vendo .cv-chat { display: flex; }
  .cv.ficha-aberta .cv-chat { display: none; }
  .cv.ficha-aberta .cv-ficha { display: block; }
  .cv .cv-voltar { display: block; }
  .cv-baloes { padding: 10px 12px; }
  .cv-b { max-width: 85%; }
  .cv-agente .rot { display: none; }
  .cv-agente { padding: 5px 6px 5px 10px; gap: 8px; }
  .cv-chat-cab { padding: 0 6px 0 10px; gap: 8px; }
  .cv .cv-icone.so-pc { display: none; }
  .cv-contexto { padding: 7px 12px; }
  .cv-compor { padding: 6px 8px 8px; }
  .cv .cv-foto { max-width: 100%; }
  .cv-fundo { padding: 0; place-items: stretch; }
  .cv-modal, .cv-modal.peq { width: 100%; max-height: none; height: 100%; border-radius: 0; }
  .cv-visor-corpo { padding: 10px 8px 24px; }
  .cv .cv-visor .seta { display: none; }
  .cv .cv-descer { bottom: 80px; right: 12px; }
}
/* Conversa aberta no celular: a barra do painel sai e a conversa ocupa a tela,
   como no WhatsApp. A seta de voltar devolve a lista (e a barra). */
@media (max-width: 900px) {
  body.cv-cheio .topo { display: none; }
  body.cv-cheio .cv { height: 100vh; height: 100dvh; }
}

/* Gerente acompanhando a conversa de outro consultor (08/10/2026): só leitura. */
.cv-so-ler [data-acao="sw-agente"], .cv-so-ler [data-acao="contexto"], .cv-so-ler [data-acao="mais"],
.cv-so-ler [data-acao="nome"] { display: none !important; }
.cv-so-ler-aviso { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--cv-claro); color: var(--cv-cinza2); font-size: 13.5px; border-top: 1px solid var(--cv-linha); }
.cv-so-ler-aviso svg { width: 18px; height: 18px; flex: none; }

@media (min-width: 901px) { .cv.sem-ficha { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); } }