:root {
  color-scheme: light;
  --cor: #0b5cad;
  --cor-escura: #084785;
  --texto: #1d2733;
  --texto-2: #3a4654;
  --mudo: #5f6b7a;
  --borda: #d9dee5;
  --fundo: #f4f6f9;
  --cartao: #ffffff;
  --campo: #ffffff;
  --superficie-2: #f9fafb;
  --linha-par: #fafbfc;
  --hover: #f1f6fc;
  --hover-sec: #eef4fb;
  --topo: #0b5cad;
  --tag-neutro: #eceff3;
  --tag-tipo: #e8f0fa;
  --tag-tipo-texto: #084785;
  --destaque-sombra: rgba(11, 92, 173, .08);
  --ok: #1e7b45;
  --ok-fundo: #e7f5ec;
  --ok-borda: #b7e0c5;
  --erro: #b42318;
  --erro-fundo: #fdecea;
  --erro-borda: #f5c2bd;
  --aviso: #8a5a00;
  --aviso-fundo: #fff5dc;
  --aviso-borda: #f0d9a0;
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
}

/* Modo escuro: segue o sistema, a menos que o usuário escolha no botão ☀/🌙 (data-tema no <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
  color-scheme: dark;
  --cor: #3d86d9;
  --cor-escura: #5a9be6;
  --texto: #e3e8ef;
  --texto-2: #c2cbd6;
  --mudo: #93a1b2;
  --borda: #2b3644;
  --fundo: #0e131a;
  --cartao: #161d26;
  --campo: #0f151d;
  --superficie-2: #1b232e;
  --linha-par: #18202a;
  --hover: #1e2938;
  --hover-sec: #1f2c3d;
  --topo: #13253d;
  --tag-neutro: #263040;
  --tag-tipo: #1a3150;
  --tag-tipo-texto: #a3c8f5;
  --destaque-sombra: rgba(61, 134, 217, .15);
  --ok: #63cf91;
  --ok-fundo: #11291b;
  --ok-borda: #1f5133;
  --erro: #ff8f85;
  --erro-fundo: #341614;
  --erro-borda: #6a2a24;
  --aviso: #efc15f;
  --aviso-fundo: #2e240e;
  --aviso-borda: #5a4517;
  --serie-1: #3987e5;
  --serie-2: #d95926;
  }
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --cor: #3d86d9;
  --cor-escura: #5a9be6;
  --texto: #e3e8ef;
  --texto-2: #c2cbd6;
  --mudo: #93a1b2;
  --borda: #2b3644;
  --fundo: #0e131a;
  --cartao: #161d26;
  --campo: #0f151d;
  --superficie-2: #1b232e;
  --linha-par: #18202a;
  --hover: #1e2938;
  --hover-sec: #1f2c3d;
  --topo: #13253d;
  --tag-neutro: #263040;
  --tag-tipo: #1a3150;
  --tag-tipo-texto: #a3c8f5;
  --destaque-sombra: rgba(61, 134, 217, .15);
  --ok: #63cf91;
  --ok-fundo: #11291b;
  --ok-borda: #1f5133;
  --erro: #ff8f85;
  --erro-fundo: #341614;
  --erro-borda: #6a2a24;
  --aviso: #efc15f;
  --aviso-fundo: #2e240e;
  --aviso-borda: #5a4517;
  --serie-1: #3987e5;
  --serie-2: #d95926;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fundo);
}
a { color: var(--cor); }
h1 { font-size: 1.6rem; margin: 1.2rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .8rem; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px 48px; }
.sem-margem { margin-top: 0; }
.mudo { color: var(--mudo); font-size: .9rem; }
.texto { white-space: pre-wrap; }
.texto a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
.hash { font-family: ui-monospace, monospace; font-size: .8rem; word-break: break-all; }

/* topo */
.topo { background: var(--topo); color: #fff; }
.topo .wrap { padding-bottom: 0; max-width: none; }  /* barra na largura toda: logo no canto esquerdo, engrenagem no direito */
.topo-in { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 16px; flex-wrap: wrap; }
.marca { color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.marca span { font-weight: 400; opacity: .8; }
.topo nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-left: auto; justify-content: flex-end; }
.topo nav a, .topo nav .link { color: #fff; text-decoration: none; padding: 6px 10px; border-radius: 6px; opacity: .85; }
.topo nav a:hover, .topo nav a.ativo { background: rgba(255,255,255,.15); opacity: 1; }
/* Engrenagem do menu do topo (configurações do bot). */
.menu-config { position: relative; }
.menu-config > summary { list-style: none; cursor: pointer; color: #fff; padding: 6px 10px; border-radius: 6px; opacity: .85; display: flex; align-items: center; }

.menu-config > summary::-webkit-details-marker { display: none; }
.menu-config > summary:hover, .menu-config[open] > summary, .menu-config > summary.ativo { background: rgba(255,255,255,.15); opacity: 1; }
.menu-config-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 230px; padding: 6px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.topo nav .menu-config-lista a { display: block; color: var(--texto); opacity: 1; padding: 8px 10px; border-radius: 6px; white-space: nowrap; }
.topo nav .menu-config-lista a:hover { background: var(--hover); }
.topo nav .menu-config-lista a.ativo { background: var(--hover-sec); color: var(--cor); font-weight: 700; }

.menu-config-usuario { padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--borda); }
.menu-config-usuario strong { display: block; color: var(--texto); }
.menu-config-usuario span { display: block; font-size: .8rem; color: var(--mudo); }
.menu-config-sair { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--borda); }
.topo nav .menu-config-sair button { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit;
  color: var(--erro); padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.topo nav .menu-config-sair button:hover { background: var(--erro-fundo); }

/* blocos */
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.cartao.estreito { max-width: 400px; margin: 48px auto; }
.cartao.destaque { border-color: var(--cor); box-shadow: 0 0 0 3px var(--destaque-sombra); }
.cartao.sucesso { border-color: var(--ok); background: var(--ok-fundo); }
.cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cabecalho h1, .cabecalho h2 { margin-bottom: .8rem; }
.alerta { padding: 12px 14px; border-radius: 8px; margin: 16px 0; border: 1px solid; }
.alerta.ok { color: var(--ok); background: var(--ok-fundo); border-color: var(--ok-borda); }
.alerta.erro { color: var(--erro); background: var(--erro-fundo); border-color: var(--erro-borda); }
.alerta.aviso { color: var(--aviso); background: var(--aviso-fundo); border-color: var(--aviso-borda); }

/* formulários */
label { display: block; margin-bottom: 14px; font-weight: 600; font-size: .92rem; }
input, select, textarea {
  display: block; width: 100%; margin-top: 4px; padding: 9px 11px;
  font: inherit; font-weight: 400; color: inherit;
  border: 1px solid var(--borda); border-radius: 7px; background: var(--campo);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cor); outline-offset: -1px; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
label.check input { width: auto; margin-top: 4px; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .grade2 { grid-template-columns: 1fr; } }
.botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.inline { display: inline; }
.busca { display: flex; gap: 8px; margin-bottom: 16px; }
.busca input { margin: 0; }

.btn {
  display: inline-block; padding: 9px 18px; border: 1px solid var(--cor); border-radius: 7px;
  background: var(--cor); color: var(--sobre-cor, #fff); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--cor-escura); }
.btn.sec { background: var(--cartao); color: var(--cor); }
.btn.sec:hover { background: var(--hover-sec); }
.btn.perigo { background: var(--cartao); color: var(--erro); border-color: var(--erro); }
.btn.grande { width: 100%; padding: 14px; font-size: 1.05rem; margin: 6px 0 10px; }
button.link { background: none; border: 0; font: inherit; color: var(--cor); cursor: pointer; padding: 0; }
.topo button.link { color: #fff; }

/* tabelas */
.tabela { width: 100%; border-collapse: collapse; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.tabela th, .tabela td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: middle; line-height: 1.4; }
.tabela tbody tr:nth-child(even) td { background: var(--linha-par); }
.tabela tbody tr:hover td { background: var(--hover); }
.tabela td a { text-decoration: none; }
.tabela td a:hover { text-decoration: underline; }
.tabela th { background: var(--superficie-2); font-size: .85rem; color: var(--mudo); font-weight: 600; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; white-space: nowrap; }
.tabela .acoes { text-align: right; white-space: nowrap; }
.tabela tr.inativo td { color: var(--mudo); }
@media (max-width: 720px) {
  .tabela { display: block; overflow-x: auto; }
}

.filtros { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.filtros a { padding: 5px 12px; border: 1px solid var(--borda); border-radius: 99px; text-decoration: none; background: var(--cartao); }
.filtros a.ativo { background: var(--cor); border-color: var(--cor); color: var(--sobre-cor, #fff); }

.tag { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .8rem; font-weight: 600; vertical-align: middle; }
.tag.pendente { background: var(--aviso-fundo); color: var(--aviso); }
.tag.aceita { background: var(--ok-fundo); color: var(--ok); }

.dados { display: grid; grid-template-columns: 170px 1fr; gap: 8px 16px; margin: 0 0 12px; }
.dados dt { color: var(--mudo); font-size: .9rem; }
.dados dd { margin: 0; }
@media (max-width: 560px) { .dados { grid-template-columns: 1fr; } .dados dd { margin-bottom: 6px; } }

/* botão de tema */
.btn-tema { background: none; border: 0; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 6px 8px; border-radius: 6px; color: #fff; opacity: .85; }
.btn-tema:hover { background: rgba(255,255,255,.15); opacity: 1; }

/* logo e ícone */
.marca { display: inline-flex; align-items: center; gap: 8px; }
.marca-icone { width: 28px; height: 28px; }
.logo-login { text-align: center; margin: 4px 0 20px; }
.logo-login img { max-width: 260px; width: 100%; height: auto; }
.logo-login + h1 { text-align: center; }
.logo-lnxchat { margin-bottom: 8px; }
.logo-lnxchat img { max-width: 96px; }

.logo-escuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo-claro { display: none; }
  :root:not([data-tema="claro"]) .logo-escuro { display: inline; }
}
:root[data-tema="escuro"] .logo-claro { display: none; }
:root[data-tema="escuro"] .logo-escuro { display: inline; }

/* chamados */
.tag.cor-azul { background: #e3eefb; color: #0b5cad; }
.tag.cor-verde { background: var(--ok-fundo); color: var(--ok); }
.tag.cor-amarelo { background: var(--aviso-fundo); color: var(--aviso); }
.tag.cor-laranja { background: #fde9dc; color: #a8430f; }
.tag.cor-vermelho { background: var(--erro-fundo); color: var(--erro); }
.tag.cor-roxo { background: #efe7fb; color: #6b35b5; }
.tag.cor-cinza { background: var(--tag-neutro); color: var(--mudo); }
.bolinha { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.bolinha.cor-azul { background: #2a78d6; } .bolinha.cor-verde { background: #1e9b55; }
.bolinha.cor-amarelo { background: #d9a400; } .bolinha.cor-laranja { background: #eb6834; }
.bolinha.cor-vermelho { background: #d63a2f; } .bolinha.cor-roxo { background: #8a55d6; }
.bolinha.cor-cinza { background: #8994a3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tag.cor-azul { background: #1a3150; color: #a3c8f5; }
  :root:not([data-tema="claro"]) .tag.cor-laranja { background: #3a2012; color: #f5a77a; }
  :root:not([data-tema="claro"]) .tag.cor-roxo { background: #2b1f45; color: #c7a8f2; }
}
:root[data-tema="escuro"] .tag.cor-azul { background: #1a3150; color: #a3c8f5; }
:root[data-tema="escuro"] .tag.cor-laranja { background: #3a2012; color: #f5a77a; }
:root[data-tema="escuro"] .tag.cor-roxo { background: #2b1f45; color: #c7a8f2; }

.filtros .sep { width: 1px; background: var(--borda); margin: 0 6px; }
.filtros a b { font-weight: 600; color: var(--mudo); margin-left: 2px; }
.filtros a.ativo b { color: #fff; }
.busca select { width: auto; margin: 0; }
.busca { flex-wrap: wrap; }
.busca input[type=search] { flex: 1 1 260px; }
.contagem { font-size: .95rem; font-weight: 400; color: var(--mudo); margin-left: 6px; }
.vazio { color: var(--mudo); text-align: center; padding: 32px; }
.voltar { margin: 16px 0 -8px; }
.voltar a { text-decoration: none; }

.col-data { white-space: nowrap; font-size: .88rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) { .lateral { order: -1; } }
.msg { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 18px; margin-bottom: 12px; }
.msg header { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }

.msg.interna { background: var(--aviso-fundo); border-color: var(--aviso-borda); border-left: 3px solid var(--aviso); }
.evento { font-size: .88rem; margin: 0 0 12px 14px; padding-left: 12px; border-left: 2px solid var(--borda); }

textarea { resize: vertical; }
.dados-lateral { grid-template-columns: 100px 1fr; font-size: .92rem; }
.lateral .btn { width: 100%; }
.assumir { margin-top: 8px; }

@media (max-width: 640px) { }
.btn-mini { display: inline-block; padding: 4px 10px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; font-size: .84rem;
  color: var(--cor); background: var(--cartao); white-space: nowrap; text-decoration: none; cursor: pointer; }
.btn-mini:hover { border-color: var(--cor); background: var(--hover-sec); text-decoration: none; }
.btn-mini.perigo { color: var(--erro); }
.btn-mini.perigo:hover { border-color: var(--erro); background: var(--erro-fundo); }
.btn-mini + .btn-mini, .btn-mini + form { margin-left: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tag.tipo { background: var(--tag-tipo); color: var(--tag-tipo-texto); }

/* anexos */
.anexos { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--borda); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.anexos li { font-size: .9rem; }
.anexos a { text-decoration: none; }
.anexos a:hover { text-decoration: underline; }

.cabecalho .botoes { align-items: center; margin-bottom: .8rem; }

@media (prefers-reduced-motion: reduce) { .coluna { transition: none; } }

@media (prefers-color-scheme: dark) { }

.avatar { width: 26px; height: 26px; border-radius: 50%; background: #0b5cad; color: #fff; font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.esqueci { margin: 14px 0 0; text-align: center; }

/* --- WhatsApp (atendimento, simulador e setores) --- */
:root {
  --wa-verde: #1e9b55;
  --wa-fundo-chat: #efeae2;
  --wa-bolha-cliente: #ffffff;
  --wa-bolha-equipe: #dcf3e2;
  --wa-bolha-bot: #eef1f5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --wa-fundo-chat: #0f151d; --wa-bolha-cliente: #1e2733; --wa-bolha-equipe: #173826; --wa-bolha-bot: #1b232e; }
}
:root[data-tema="escuro"] { --wa-fundo-chat: #0f151d; --wa-bolha-cliente: #1e2733; --wa-bolha-equipe: #173826; --wa-bolha-bot: #1b232e; }

main.wa-largo { max-width: none; padding: 0; }
main.wa-largo > .alerta { margin: 12px 16px; }
.wa-col-lista { border-right: 1px solid var(--borda); display: flex; flex-direction: column; }
.wa-busca { padding: 12px; border-bottom: 1px solid var(--borda); }
.wa-nova { padding: 12px 12px 0; }
.wa-nova summary { list-style: none; width: 100%; text-align: center; }
.wa-nova summary::-webkit-details-marker { display: none; }
.wa-nova[open] summary { background: var(--cartao); color: var(--cor); }
.wa-nova form { margin-top: 10px; padding: 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao); }
.wa-nova label { display: block; font-size: .9rem; }
.wa-nova p { font-size: .82rem; margin: 0 0 8px; }
.wa-nova .btn { width: 100%; }
.wa-sugestoes { margin: -6px 0 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao); overflow: hidden; }
.wa-sugestao { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 6px 10px; border: 0; border-bottom: 1px solid var(--borda); background: none; font-family: inherit; font-size: .88rem; color: var(--texto); cursor: pointer; text-align: left; }
.wa-sugestao:last-child { border-bottom: 0; }
.wa-sugestao:hover, .wa-sugestao:focus { background: var(--hover); }
.wa-sugestao span { color: var(--mudo); font-size: .8rem; }
.wa-nome { margin-top: 4px; font-size: .82rem; }
.wa-nome summary { cursor: pointer; list-style: none; }
.wa-nome summary::-webkit-details-marker { display: none; }
.wa-nome form { display: flex; gap: 6px; margin-top: 6px; }
.wa-nome input { margin: 0; padding: 4px 8px; font-size: .86rem; }
.contatos-busca { margin: 0 0 12px; max-width: 360px; }
.wa-busca input { margin: 0; }
#wa-lista { overflow-y: auto; flex: 1; }
.wa-item { display: flex; gap: 10px; padding: 12px; border-bottom: 1px solid var(--borda); color: var(--texto); text-decoration: none; border-left: 3px solid transparent; }
.wa-item:hover { background: var(--hover); }
.wa-item.ativo { background: var(--hover-sec); border-left-color: var(--cor); }
.wa-item-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wa-item-topo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.wa-item-topo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-previa { color: var(--mudo); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-tags { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.wa-tags .tag { font-size: .72rem; padding: 1px 7px; }
.wa-nao-lidas { margin-left: auto; background: var(--wa-verde); color: #fff; border-radius: 99px; font-size: .75rem; font-weight: 700; min-width: 20px; text-align: center; padding: 0 6px; }
.wa-hora { font-size: .74rem; color: var(--mudo); white-space: nowrap; }
.wa-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--cor); color: var(--sobre-cor, #fff); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.wa-avatar.mini { width: 22px; height: 22px; font-size: .62rem; margin-right: 6px; }
.wa-avatar.grande { width: 64px; height: 64px; font-size: 1.3rem; }

.wa-col-conversa { display: flex; flex-direction: column; background: var(--wa-fundo-chat); position: relative; }
/* Setinha discreta no alto de cada barra lateral: esconde a barra e deixa só uma faixa fina para trazê-la de volta. */
.wa-conversa { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wa-conv-topo { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--cartao); border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.wa-conv-quem { display: flex; flex-direction: column; min-width: 0; flex: 1 1 180px; }
.wa-conv-quem .mudo { font-size: .82rem; }
.wa-conv-acoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wa-conv-acoes .btn { padding: 6px 12px; font-size: .88rem; }
.wa-transferir { position: relative; }
.wa-transferir summary { list-style: none; }
.wa-transferir summary::-webkit-details-marker { display: none; }
.wa-transferir-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px; padding: 6px; min-width: 190px; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.wa-transferir-menu button { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 6px; color: var(--texto); }
.wa-transferir-menu button:hover:not([disabled]) { background: var(--hover); }
.wa-transferir-menu button[disabled] { opacity: .45; cursor: default; }
/* Transferir em duas etapas (WA_TRANSFERIR_PESSOA): grupo em chips, depois a fila ou uma pessoa, e a nota. */
.wa-transferir-menu.wa-transf-caixa { width: 340px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.wa-transf-passo { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mudo); margin-top: 4px; }
.wa-transf-grupos { display: flex; flex-wrap: wrap; gap: 5px; }
.wa-transf-chip { margin: 0; cursor: pointer; }
.wa-transf-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wa-transf-chip > span { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid var(--borda); border-radius: 999px; font-size: .8rem; color: var(--texto); }
.wa-transf-chip input:checked + span { border-color: var(--cor); background: var(--hover-sec); color: var(--cor); font-weight: 600; }
.wa-transf-chip input:focus-visible + span { outline: 2px solid var(--cor); outline-offset: 1px; }
.wa-transf-ajuda, .wa-transf-vazio { font-size: .74rem; color: var(--mudo); margin: 0; }
.wa-transf-pessoas { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.wa-transf-pessoa { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 8px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; font-size: .84rem; }
.wa-transf-pessoa:hover { background: var(--hover); }
.wa-transf-pessoa:has(input:checked) { border-color: var(--cor); background: var(--hover-sec); }
.wa-transf-pessoa input { margin: 0; width: auto; flex: none; }
.wa-transf-av { width: 24px; height: 24px; font-size: .62rem; }
.wa-transf-quem { display: flex; flex-direction: column; line-height: 1.25; }
.wa-transf-quem strong { font-weight: 600; }
.wa-transf-quem small, .wa-transf-nota small { color: var(--mudo); font-size: .72rem; font-weight: 400; }
.wa-transf-nota { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 0; font-size: .78rem; font-weight: 600; }
.wa-transf-nota textarea { font: inherit; font-size: .82rem; font-weight: 400; margin: 0; resize: vertical; min-height: 44px; }
.wa-transf-botoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.wa-transferir-menu .wa-transf-botoes button { display: inline-flex; width: auto; padding: 0 11px; }
.wa-transferir-menu .wa-transf-botoes .btn-p:not(.sec) { color: var(--sobre-cor, #fff); }
.wa-transferir-menu .wa-transf-botoes .btn-p.sec { color: var(--texto-2); }
.wa-transf-caixa[hidden], .wa-transf-pessoas[hidden], .wa-transf-vazio[hidden] { display: none; }
.wa-msgs { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 8px; }
.wa-msg { max-width: min(560px, 80%); padding: 8px 12px 6px; border-radius: 10px; background: var(--wa-bolha-cliente); box-shadow: 0 1px 1px rgba(0,0,0,.08); align-self: flex-start; }
.wa-msg > b { display: block; font-size: .8rem; color: var(--cor); }
.wa-msg .wa-hora { display: block; text-align: right; }
.wa-audio { display: block; width: 260px; max-width: 100%; height: 40px; margin: .2rem 0; }
.wa-foto { display: block; max-width: min(280px, 100%); max-height: 320px; border-radius: 6px; margin: .2rem 0; }
a[data-visor] { cursor: zoom-in; }
/* Visor de foto por cima do chat */
.visor-foto { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 14, 20, .88); display: flex;
  align-items: center; justify-content: center; padding: 52px 56px 24px; }
.visor-foto[hidden] { display: none; }
.visor-foto > img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4); }
.visor-barra { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 4px;
  padding: 10px 14px; color: #fff; font-size: .82rem; }
.visor-barra > span { margin-right: auto; opacity: .75; }
.visor-barra a, .visor-barra button { color: #fff; background: none; border: 1px solid rgba(255, 255, 255, .25);
  padding: 4px 10px; font: inherit; cursor: pointer; text-decoration: none; }
.visor-barra a:hover, .visor-barra button:hover { background: rgba(255, 255, 255, .12); }
.visor-ir { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); width: 40px; height: 56px;
  border: 0; background: rgba(255, 255, 255, .1); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.visor-ir:hover { background: rgba(255, 255, 255, .22); }
.visor-ir.visor-prox { left: auto; right: 8px; }
.visor-ir[hidden] { display: none; }
@media (max-width: 700px) {
  .visor-foto { padding: 48px 8px 12px; }
  .visor-barra [data-visor-aba] { display: none; }
  .visor-ir { background: rgba(0, 0, 0, .35); }
}
.wa-msg.bot { align-self: flex-end; background: var(--wa-bolha-bot); border: 1px dashed var(--borda); }
.wa-msg.bot > b { color: var(--mudo); }
.wa-msg.atendente { align-self: flex-end; background: var(--wa-bolha-equipe); }
.wa-msg.atendente > b { color: var(--ok); }
.wa-msg.nota { align-self: stretch; max-width: none; background: var(--aviso-fundo); border: 1px solid var(--aviso-borda); }
.wa-msg.nota > b { color: var(--aviso); }
/* Responder citando (como no WhatsApp): ↩ aparece ao passar o mouse na mensagem do cliente. */
.wa-msg { position: relative; }
.wa-citar { position: absolute; top: 4px; right: -30px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: var(--cartao); color: var(--mudo); box-shadow: 0 1px 2px rgba(0,0,0,.15); cursor: pointer; font-size: .9rem; opacity: 0; transition: opacity .15s; }
.wa-msg:hover .wa-citar, .wa-citar:focus-visible { opacity: 1; }
.wa-citar:hover { color: var(--cor); }
@media (hover: none) { .wa-citar { opacity: .7; } }
.wa-citacao { margin: 2px 0 4px; padding: 4px 8px; border-left: 3px solid var(--cor); border-radius: 4px; background: rgba(0,0,0,.05);
  color: var(--mudo); font-size: .85rem; white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.wa-citando { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 6px 8px 6px 10px; border-left: 3px solid var(--cor);
  border-radius: 6px; background: var(--hover); font-size: .86rem; }
.wa-citando[hidden] { display: none; }
.wa-citando > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-citando b { color: var(--cor); }
.wa-citando span { color: var(--mudo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-citando-tirar { border: 0; background: none; color: var(--mudo); cursor: pointer; font-size: 1rem; padding: 2px 6px; }
.wa-evento { align-self: center; font-size: .78rem; background: var(--aviso-fundo); color: var(--aviso); border-radius: 8px; padding: 3px 10px; text-align: center; }
.wa-escrever { position: relative; background: var(--cartao); border-top: 1px solid var(--borda); padding: 8px 16px 10px; }
.wa-escrever.modo-nota { background: var(--aviso-fundo); }
.wa-modo { display: flex; gap: 6px; margin-bottom: 6px; }
.wa-modo label { margin: 0; font-size: .82rem; padding: 3px 10px; border-radius: 99px; background: var(--tag-neutro); cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.wa-modo input { width: auto; margin: 0; }
.wa-modo label:has(input:checked) { background: var(--ok-fundo); color: var(--ok); }

.wa-escrever textarea { margin: 0; resize: none; border-radius: 20px; padding: 10px 16px; max-height: 40vh; overflow-y: auto; }
.wa-enviar { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--wa-verde); color: #fff; font-size: 1.1rem; cursor: pointer; }
.wa-enviar:hover { filter: brightness(1.08); }
.wa-clipe, .wa-microfone { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; font-size: 1.2rem;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.wa-clipe:hover, .wa-microfone:hover { background: var(--borda); }
.wa-anexo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 6px 10px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--cartao); font-size: .9rem; }
.wa-anexo span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-anexo-tirar, .wa-gravando-tirar { border: 0; background: transparent; cursor: pointer; font-size: 1rem; color: var(--mudo); }
.wa-gravando { flex: 1; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 20px; }
.wa-gravando-ponto { width: 10px; height: 10px; border-radius: 50%; background: #e53935; animation: wa-piscar 1s infinite; }
.wa-gravando-tempo { font-variant-numeric: tabular-nums; font-weight: 600; }
@keyframes wa-piscar { 50% { opacity: .2; } }
.wa-anexo[hidden], .wa-gravando[hidden], .wa-microfone[hidden] { display: none; }
.wa-clipe .wa-arquivo { display: none; }
.wa-escrever.gravando textarea, .wa-escrever.gravando .wa-clipe, .wa-escrever.gravando .wa-microfone { display: none; }
.wa-escrever.enviando .wa-enviar { opacity: .5; cursor: progress; }
.wa-rapidas { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.wa-rapidas-lista { position: absolute; left: 16px; bottom: calc(100% - 6px); z-index: 20; width: min(520px, calc(100% - 32px)); max-height: 300px; overflow-y: auto;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 6px; }
.wa-rapida { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left; border: 0; background: none; color: var(--texto);
  font: inherit; font-size: .9rem; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.wa-rapida b { flex: none; color: var(--cor); }
.wa-rapida span { color: var(--mudo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-rapida:hover, .wa-rapida.sel { background: var(--hover-sec); }
.wa-rapida[hidden] { display: none; }
.wa-rapidas-vazio { margin: 6px 10px; font-size: .9rem; }
.wa-rapidas-cadastrar { display: block; border-top: 1px solid var(--borda); margin-top: 4px; padding: 8px 10px 4px; font-size: .85rem; text-decoration: none; }
.wa-rapida-texto { white-space: pre-line; max-width: 560px; }
.wa-sem-conversa { margin: auto; text-align: center; color: var(--mudo); padding: 24px; max-width: 360px; }
.wa-sem-conversa p:first-child { font-size: 2.5rem; margin: 0; }
.wa-voltar { display: none; }

.wa-lateral { border-left: 1px solid var(--borda); overflow-y: auto; padding: 16px; }

.wa-vincular { margin-top: 10px; font-size: .88rem; }
.wa-vincular summary { cursor: pointer; }
.wa-vincular form { display: flex; gap: 6px; margin-top: 6px; }
.wa-vincular select { margin: 0; padding: 4px 6px; font-size: .85rem; }

.wa-lat-bloquear { margin: 2px 0 10px; }
button.wa-som { background: none; border: 0; font-family: inherit; width: 100%; text-align: left; cursor: pointer; }
.wa-som .som-off, .wa-som-mudo .wa-som .som-on { display: none; }
.wa-som-mudo .wa-som .som-off { display: inline; }
.wa-lat-bloquear button { font-size: .8rem; color: var(--mudo); }
.wa-lat-bloquear button:hover { color: var(--erro); }

.wa-caminho { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--borda); font-size: .84rem; }
.wa-caminho li { margin-bottom: 4px; position: relative; }
.wa-caminho li::before { content: ""; position: absolute; left: -17px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--cor); }

.wa-campos-linha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wa-fluxo { margin: 0; padding-left: 20px; }
.wa-fluxo li { margin-bottom: 6px; }
.wa-conexao { max-width: 520px; }
.wa-conexao-estado { font-size: 1.1rem; font-weight: 600; margin: 0 0 12px; }
#qr-img { display: block; width: 280px; max-width: 100%; height: auto; margin: 0 0 8px; background: #fff; padding: 8px; border-radius: 8px; }

/* simulador */
.sim-corpo { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 16px; background: var(--fundo); }
.sim-intro { max-width: 420px; width: 100%; }
.sim-intro h1 { margin-top: 0; }
.sim-numero[hidden] { display: none; }
.sim-celular { width: 100%; max-width: 400px; height: min(720px, calc(100vh - 32px)); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; border: 8px solid #1d2733; background: var(--wa-fundo-chat); margin-top: 8px; }
.sim-celular[hidden] { display: none; }
.sim-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #075e54; color: #fff; }
.sim-topo div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sim-topo small { opacity: .8; font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-topo .wa-avatar { background: #fff; color: #075e54; }
.sim-trocar { background: none; border: 0; color: #fff; font-size: 1.2rem; cursor: pointer; }
.sim-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.sim-msg { max-width: 85%; padding: 6px 10px 4px; border-radius: 8px; background: var(--wa-bolha-cliente); box-shadow: 0 1px 1px rgba(0,0,0,.1); align-self: flex-start; font-size: .92rem; }
.sim-msg.eu { align-self: flex-end; background: var(--wa-bolha-equipe); }
.sim-msg > b { display: block; font-size: .78rem; color: var(--ok); }
.sim-msg .wa-hora { display: block; text-align: right; font-size: .68rem; }
.sim-escrever { display: flex; gap: 8px; padding: 8px; background: var(--superficie-2); }
.sim-escrever input { margin: 0; border-radius: 20px; padding: 10px 14px; }
.setores-wa { border: 1px solid var(--borda); border-radius: 8px; padding: 8px 14px 4px; margin: 12px 0; }
.setores-wa legend { font-weight: 600; padding: 0 6px; }
.setores-wa .check { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; }

/* Menu do bot: prévias e mensagens editáveis */
.wa-bot-previas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 16px; }
.wa-bot-previas .cartao { margin: 0; }
.wa-previa-bot { max-width: 100%; margin: 0; white-space: pre-line; }
#opcoes, #mensagens { margin-bottom: 16px; }
#opcoes .cabecalho h2 { margin: 0; }
.wa-ordem { width: 70px; }
.wa-opcao-nome { display: flex; align-items: center; gap: 8px; }
.wa-opcao-nome input { flex: 1; min-width: 140px; }
.wa-texto-bot { margin-bottom: 14px; }
.wa-texto-bot > label:first-child { display: block; margin-bottom: 4px; }
.wa-texto-bot textarea { width: 100%; field-sizing: content; min-height: 2.6em; }
.wa-texto-bot .check { margin-top: 4px; font-size: .85rem; }
@media (max-width: 640px) { #opcoes .tabela { display: block; overflow-x: auto; } }

/* Verificação em duas etapas */
.qr-2fa { display: inline-block; background: #fff; padding: 8px; border-radius: 8px; line-height: 0; margin: 4px 0 8px; }
.qr-2fa svg { width: 200px; height: 200px; }
.chave-2fa { word-break: break-all; letter-spacing: .05em; }
.codigo-2fa { font-size: 1.3rem; letter-spacing: .25em; max-width: 12ch; }
.codigos-recuperacao { columns: 2; list-style: none; padding: 0; font-size: 1.05rem; }
.codigos-recuperacao li { margin: 4px 0; }
.recuperacao-2fa { margin-top: 16px; }
.recuperacao-2fa summary { cursor: pointer; color: var(--mudo); }

/* Event Guard (IPs banidos pelo fail2ban) */
.guard-banir { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.guard-banir label { margin: 0; }
.guard-banir input { width: 220px; }
.tag.guard-found { background: var(--aviso-fundo); color: var(--aviso); }
.tag.guard-ban, .tag.guard-restore-ban { background: var(--erro-fundo); color: var(--erro); }
.tag.guard-unban { background: var(--ok-fundo); color: var(--ok); }

/* Tela de login: fundo do chatbot desfocado atrás e cartão centralizado de vidro fosco. */
body:has(main.tela-login) { min-height: 100vh; background: #12121c; }
body:has(main.tela-login)::before {
  content: ""; position: fixed; inset: -40px; z-index: -1;
  background: url(img/fundo-login.png) center / cover no-repeat;
  filter: brightness(.85);
}
main.tela-login .cartao.estreito {
  margin: 12vh auto 48px;
  background: color-mix(in srgb, var(--cartao) 85%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, .2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
@media (max-width: 600px) { main.tela-login .cartao.estreito { margin: 32px auto; } }

/* App no celular: convite para ativar as notificações (canto de baixo) e ajuda de instalação em Minha conta. */
.push-convite { position: fixed; z-index: 50; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(520px, calc(100% - 32px));
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px;
  background: var(--cartao); color: var(--texto); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.push-convite[hidden] { display: none; }
.push-convite div { display: flex; gap: 8px; }
.push-instalar { margin-top: 14px; }
.push-instalar summary { cursor: pointer; color: var(--cor); }
.push-instalar p { margin: 8px 0; font-size: .92rem; }
#push-cartao .btn[hidden] { display: none; }
/* No app instalado (sem a barra do navegador) o topo respeita o entalhe da tela. */
@media (display-mode: standalone) { .topo { padding-top: env(safe-area-inset-top); } }

/* relatórios do chat */
.filtros .sep { width: 1px; background: var(--borda); margin: 0 6px; }

.tabela-relatorio td small { font-size: .82rem; }
.rel-conversa { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; margin-top: 16px; }
@media (max-width: 860px) { .rel-conversa { grid-template-columns: 1fr; } }
.rel-topo { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.rel-quem { flex: 1; min-width: 200px; }
.rel-quem h1 { margin: 0; font-size: 1.3rem; }
.rel-msgs { background: var(--wa-fundo-chat); border: 1px solid var(--borda); border-radius: 10px; max-height: 70vh; }
.rel-historico { list-style: none; margin: 0; padding: 0; }
.rel-historico li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: .92rem; }
.rel-historico li:last-child { border-bottom: 0; }

/* Janela de 24 h da API oficial do WhatsApp (Meta). */
.wa-janela { margin: 8px 16px; padding: 8px 12px; border-radius: 8px; background: var(--aviso-fundo); color: var(--aviso);
  border: 1px solid var(--aviso-borda); font-size: .85rem; }

/* ===================== Nova interface (v1.19.0): menu lateral, lista, conversa e painel do contato ===================== */
:root {
  --cor: #1f5fa8;
  --cor-escura: #174a84;
  /* Menu lateral claro, igual ao do LNX Backup Center (v1.27.0); no tema escuro e no Dracula volta a ser escuro. */
  --trilho: #f4f5f7;
  --trilho-texto: #2f3843;
  --trilho-mudo: #6b7480;
  --trilho-forte: #18202b;
  --trilho-hover: #e8ecf1;
  --trilho-ativo-fundo: #dde8f7;
  --trilho-ativo-texto: #174a84;
  --trilho-borda: #e1e5ea;
  --trilho-topo: #ffffff;
  --trilho-avatar-fundo: #1f5fa8;
  --trilho-avatar-texto: #ffffff;
  --wa-verde: #2e7d57;
  --wa-fundo-chat: #f6f7f9;
  --wa-bolha-cliente: #ffffff;
  --wa-bolha-cliente-borda: #e3e8ee;
  --wa-bolha-equipe: #e3eaf5;
  --wa-bolha-equipe-borda: #d3ddec;
  --wa-bolha-bot: #eef1f5;
  --wa-avatar: #e3eaf5;
  --wa-avatar-texto: #1f3a63;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --trilho: #111c2b; --trilho-texto: #c9d3e3; --trilho-mudo: #8fa0ba; --trilho-forte: #ffffff; --trilho-hover: rgba(255, 255, 255, .08); --trilho-ativo-fundo: rgba(255, 255, 255, .15); --trilho-ativo-texto: #ffffff; --trilho-borda: rgba(255, 255, 255, .12); --trilho-topo: transparent; --trilho-avatar-fundo: #dce4f0; --trilho-avatar-texto: #111c2b;
    --cor: #4a8fdc; --cor-escura: #6aa5e8; --wa-fundo-chat: #0f151d; --wa-bolha-cliente: #1a222d; --wa-bolha-cliente-borda: #2b3644;
    --wa-bolha-equipe: #1c2c44; --wa-bolha-equipe-borda: #2a3d5a; --wa-bolha-bot: #1b232e; --wa-avatar: #1f3150; --wa-avatar-texto: #b9cdeb; --wa-verde: #2f8a5f; }
}
:root[data-tema="escuro"] { --trilho: #111c2b; --trilho-texto: #c9d3e3; --trilho-mudo: #8fa0ba; --trilho-forte: #ffffff; --trilho-hover: rgba(255, 255, 255, .08); --trilho-ativo-fundo: rgba(255, 255, 255, .15); --trilho-ativo-texto: #ffffff; --trilho-borda: rgba(255, 255, 255, .12); --trilho-topo: transparent; --trilho-avatar-fundo: #dce4f0; --trilho-avatar-texto: #111c2b;
    --cor: #4a8fdc; --cor-escura: #6aa5e8; --wa-fundo-chat: #0f151d; --wa-bolha-cliente: #1a222d; --wa-bolha-cliente-borda: #2b3644;
  --wa-bolha-equipe: #1c2c44; --wa-bolha-equipe-borda: #2a3d5a; --wa-bolha-bot: #1b232e; --wa-avatar: #1f3150; --wa-avatar-texto: #b9cdeb; --wa-verde: #2f8a5f; }

body { font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
.mono { font-family: var(--mono); }
.ic { flex: none; display: inline-block; vertical-align: -0.15em; }
.btn { font-weight: 500; padding: 7px 14px; font-size: .9rem; border-radius: 6px; }
/* Botão pequeno e discreto (ações do painel). */
.btn-p { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 6px; border: 1px solid var(--cor);
  background: var(--cor); color: var(--sobre-cor, #fff); font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn-p:hover { background: var(--cor-escura); }
.btn-p.sec { background: var(--cartao); color: var(--texto-2); border-color: var(--borda); }
.btn-p.sec:hover { border-color: var(--cor); color: var(--cor); }
summary.btn-p { list-style: none; }
summary.btn-p::-webkit-details-marker { display: none; }

/* --- Menu lateral (trilho) --- */
body.com-trilho { display: flex; min-height: 100vh; }
body.com-trilho > main { flex: 1; min-width: 0; }
.trilho { position: sticky; top: 0; height: 100vh; height: 100dvh; flex: 0 0 60px; width: 60px; background: var(--trilho); color: var(--trilho-texto); border-right: 1px solid var(--trilho-borda);
  display: flex; flex-direction: column; padding: 12px 8px; z-index: 30; font-size: .84rem; }
:root[data-trilho="aberto"] .trilho { flex-basis: 224px; width: 224px; padding: 12px 10px; }
.trilho-topo { display: flex; align-items: center; margin: -12px -8px 12px; padding: 11px 8px; background: var(--trilho-topo); border-bottom: 1px solid var(--trilho-borda); }
:root[data-trilho="aberto"] .trilho-topo { margin: -12px -10px 12px; padding: 11px 10px; }
.trilho-marca { display: flex; align-items: center; gap: 10px; color: var(--trilho-forte); text-decoration: none; min-width: 0; padding: 0 3px; }
.trilho-logo { flex: none; width: 34px; height: 34px; border-radius: 8px; object-fit: contain; background: #fff; padding: 3px; }
.trilho-logo.letra { display: flex; align-items: center; justify-content: center; padding: 0; background: var(--trilho-avatar-fundo); color: var(--trilho-avatar-texto); font-weight: 600; font-size: 15px; }
.trilho-nome { font-weight: 500; font-size: .92rem; color: var(--trilho-forte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trilho-abrir-movel { display: none; }
.trilho-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.trilho-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 2px; scrollbar-width: none; }
.trilho-rodape { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
.trilho-item { position: relative; display: flex; align-items: center; gap: 11px; height: 40px; padding: 0; justify-content: center; border: 0; border-radius: 8px;
  background: transparent; color: var(--trilho-texto); font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; width: 100%; }
.trilho-item:hover { background: var(--trilho-hover); color: var(--trilho-forte); }
.trilho-item.ativo { background: var(--trilho-ativo-fundo); color: var(--trilho-ativo-texto); font-weight: 500; }
.trilho-item:focus-visible, .trilho-usuario:focus-visible { outline: 2px solid var(--trilho-forte); outline-offset: -2px; }
:root[data-trilho="aberto"] .trilho-item { justify-content: flex-start; padding: 0 11px; }
.trilho-rotulo { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:root[data-trilho="aberto"] .trilho-rotulo { display: inline; }
:root[data-trilho="aberto"] .trilho-item > .trilho-rotulo { flex: 1; text-align: left; }
.trilho-titulo { display: none; margin: 14px 11px 2px; font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--trilho-mudo); }
:root[data-trilho="aberto"] .trilho-titulo { display: block; }
/* Recolhido, o título vira um traço que separa os grupos dos itens de cima. */
:root:not([data-trilho="aberto"]) .trilho-nav > .trilho-titulo { display: block; height: 1px; margin: 10px 12px 6px; overflow: hidden; font-size: 0; background: var(--trilho-borda); }
.trilho-fila { display: none; font-size: .68rem; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: #f2a93b; color: #3a2500; }
:root[data-trilho="aberto"] .trilho-fila { display: inline; }
.trilho-ponto { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #f2a93b; }
:root[data-trilho="aberto"] .trilho-ponto { display: none; }
/* Número no ícone do menu (Conversas: fila + minhas sem ler; Equipe: mensagens novas). Recolhido fica no canto do ícone; aberto vai para a direita do nome. */
.trilho-n { position: absolute; top: 3px; left: 26px; min-width: 17px; height: 17px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #2c4fd7; color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--trilho, #fff); pointer-events: none; }
:root[data-trilho="aberto"] .trilho-n { position: static; margin-left: auto; box-shadow: none; }
.trilho-grupo { height: 34px; }
.trilho-quadro { flex: none; width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .66rem; font-weight: 600; background: #8994a3; }
.trilho-quadro.cor-azul { background: #2f6fd6; } .trilho-quadro.cor-verde { background: #2e9d6a; } .trilho-quadro.cor-amarelo { background: #b8890a; }
.trilho-quadro.cor-laranja { background: #d0612b; } .trilho-quadro.cor-vermelho { background: #c8392e; } .trilho-quadro.cor-roxo { background: #8a55d6; }
.trilho-qtd { display: none; font-size: .72rem; color: var(--trilho-mudo); }
:root[data-trilho="aberto"] .trilho-qtd { display: inline; }
.trilho-online { display: none; }
:root[data-trilho="aberto"] .trilho-online { display: block; }
.trilho-pessoa { height: 30px; cursor: default; }
.trilho-pessoa:hover { background: none; }
.trilho-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--trilho-avatar-fundo); color: var(--trilho-avatar-texto); display: inline-flex;
  align-items: center; justify-content: center; font-weight: 600; font-size: .7rem; }
.trilho-pessoa .trilho-avatar { width: 22px; height: 22px; font-size: .58rem; }
.trilho-usuario { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; padding: 6px 0; border-radius: 8px; color: var(--trilho-forte); text-decoration: none; }
.trilho .menu-usuario > summary.trilho-usuario { padding: 6px 0; opacity: 1; cursor: pointer; }
:root[data-trilho="aberto"] .trilho .menu-usuario > summary.trilho-usuario { padding: 8px; }
.trilho-usuario:hover, .menu-usuario[open] > .trilho-usuario { background: var(--trilho-hover); }
.trilho .menu-usuario .menu-config-sair { border-top: 0; padding-top: 0; }
/* Troca rápida de conta (1.31.0): as outras contas do navegador no menu do nome. */
.trilho .menu-conta { margin: 0; }
.trilho .menu-conta button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; font: inherit;
  color: var(--texto); padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.trilho .menu-conta button:hover { background: var(--hover); }
.trilho .menu-conta .trilho-avatar { width: 24px; height: 24px; font-size: .6rem; }
.trilho .menu-conta strong { display: block; font-weight: 500; font-size: .84rem; }
.trilho .menu-conta small { display: block; color: var(--mudo); font-size: .72rem; }
.trilho .menu-config-lista a.menu-conta-add { color: var(--mudo); font-size: .82rem; margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--borda); border-radius: 6px 6px 0 0; }
:root[data-trilho="aberto"] .trilho-usuario { justify-content: flex-start; padding: 8px 8px; border-top: 1px solid var(--trilho-borda); border-radius: 0; }
.trilho-usuario .trilho-rotulo strong { display: block; font-weight: 500; font-size: .82rem; }
.trilho-usuario .trilho-rotulo small { display: block; color: var(--trilho-mudo); font-size: .7rem; }
.trilho-alternar { height: 30px; color: var(--trilho-mudo); font-size: .78rem; }
/* Alfinete: "Fixar menu" quando está recolhido ou flutuando; "Soltar menu" (alfinete em pé, na cor) quando fixo. */
.trilho-alternar > span { display: flex; align-items: center; gap: 11px; width: 100%; }
:root[data-trilho="aberto"] .trilho-alternar > span { justify-content: flex-start; }
:root:not([data-trilho="aberto"]) .trilho-alternar > span { justify-content: center; }
.trilho-alternar .fixar-on { display: none; }
:root[data-trilho="aberto"]:not([data-trilho-flutua]) .trilho-alternar .fixar-on { display: flex; color: var(--trilho-ativo-texto); }
:root[data-trilho="aberto"]:not([data-trilho-flutua]) .trilho-alternar .fixar-off { display: none; }
.trilho-alternar .fixar-off .ic { transform: rotate(45deg); }
/* Aberto pelo mouse: flutua por cima da tela (ocupa só os 60 px de sempre). */
:root[data-trilho-flutua] .trilho { margin-right: -164px; z-index: 60; box-shadow: 8px 0 24px rgba(0, 0, 0, .14); }
/* Efeito: o menu desliza (largura e margem juntas, então a tela não se mexe ao flutuar), a sombra entra junto e os
   nomes aparecem com um esmaecer curto, um pouco depois da largura começar a abrir. */
@media (min-width: 861px) {
  .trilho { transition: flex-basis .24s cubic-bezier(.2, .7, .2, 1), width .24s cubic-bezier(.2, .7, .2, 1), margin-right .24s cubic-bezier(.2, .7, .2, 1),
    padding .24s ease, box-shadow .24s ease; overflow-x: hidden; }
  :root[data-trilho="aberto"] .trilho .trilho-rotulo, :root[data-trilho="aberto"] .trilho .trilho-titulo, :root[data-trilho="aberto"] .trilho .trilho-fila,
  :root[data-trilho="aberto"] .trilho .trilho-qtd, :root[data-trilho="aberto"] .trilho .trilho-online { animation: trilho-rotulo .26s ease .06s both; }
}
@keyframes trilho-rotulo { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .trilho { transition: none; } :root[data-trilho="aberto"] .trilho * { animation: none !important; } }
.trilho .wa-som .som-on, .trilho .wa-som .som-off { display: contents; }
.trilho .wa-som .som-off, .wa-som-mudo .trilho .wa-som .som-on { display: none; }
.wa-som-mudo .trilho .wa-som .som-off { display: contents; }
/* Configurações: abre ao lado do menu, para cima. */
.trilho .menu-config { position: relative; }
.trilho .menu-config > summary { list-style: none; color: var(--trilho-texto); opacity: 1; }
.trilho .menu-config > summary:hover, .trilho .menu-config[open] > summary { background: var(--trilho-hover); color: var(--trilho-forte); }
.trilho .menu-config > summary.ativo { background: var(--trilho-ativo-fundo); color: var(--trilho-ativo-texto); }
.trilho .menu-config > summary::-webkit-details-marker { display: none; }
.trilho .menu-config-lista { position: absolute; left: calc(100% + 10px); right: auto; top: auto; bottom: 0; z-index: 60; min-width: 240px; padding: 6px;
  background: var(--cartao); color: var(--texto); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); font-size: .88rem; }
.trilho .menu-config-lista a { display: block; color: var(--texto); padding: 7px 10px; border-radius: 6px; white-space: nowrap; text-decoration: none; }
.trilho .menu-config-lista a:hover { background: var(--hover); }
.trilho .menu-config-lista a.ativo { background: var(--hover-sec); color: var(--cor); font-weight: 600; }
.trilho .menu-config-sair button { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 0; background: none; font: inherit;
  color: var(--erro); padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.trilho .menu-config-sair button:hover { background: var(--erro-fundo); }
/* Fora do celular, Configurações e o menu do usuário abrem em aba que desliza na lateral, colada ao menu, na altura toda. */
@media (min-width: 861px) {
  .trilho .menu-config-lista { position: fixed; top: 0; bottom: 0; left: 60px; width: 280px; min-width: 0; overflow-y: auto; padding: 14px 10px;
    border-width: 0 1px 0 0; border-radius: 0; box-shadow: 8px 0 28px rgba(0, 0, 0, .14); animation: aba-desliza .18s ease-out; }
  :root[data-trilho="aberto"] .trilho .menu-config-lista { left: 224px; }
  .trilho .menu-config-lista a { white-space: normal; }
}

@keyframes aba-desliza { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .trilho .menu-config-lista { animation: none; } }
/* Configurações: as opções em blocos, por seção (botão Configurações do menu). */
.cfg { display: flex; flex-direction: column; gap: 24px; padding: 8px 0 24px; }
.cfg-cab h1 { margin: 0; font-size: 1.5rem; font-weight: 400; }
.cfg-cab p { margin: 4px 0 0; font-size: .86rem; color: var(--mudo); }
.cfg h2 { margin: 0 0 10px; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mudo); }
.cfg-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 0; }
.cfg-bloco { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 8px; color: var(--texto); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.cfg-bloco:hover { border-color: var(--cor); color: var(--texto); }
.cfg-bloco.ativo { border-color: var(--cor); background: var(--hover-sec); }
.cfg-bloco strong { font-size: .92rem; font-weight: 500; }
.cfg-bloco > span:last-child { font-size: .8rem; color: var(--mudo); }
.cfg-bloco /* ===================== Temas (data-visual no <html>): amostras de cor ===================== */
.tema-amostra { width: 34px; height: 22px; }
.cfg-ico { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--hover-sec); color: var(--cor); }
.cfg-ico.cfg-verde { background: var(--ok-fundo); color: var(--ok); }
.cfg-ico.cfg-laranja { background: var(--aviso-fundo); color: var(--aviso); }
.cfg-ico.cfg-vermelho { background: var(--erro-fundo); color: var(--erro); }
/* Minha conta: faixa com avatar + cartões em linhas; o lápis abre a edição na própria linha. */
.conta-faixa { display: flex; align-items: center; gap: 18px; padding: 20px 24px; margin-bottom: 16px; background: var(--cartao); border: 1px solid var(--borda); border-top: 3px solid var(--cor); border-radius: 6px; }
.conta-faixa strong { display: block; font-size: 1.18rem; font-weight: 500; }
.conta-faixa p { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 0; font-size: .82rem; color: var(--mudo); }
.conta-avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--trilho-ativo-fundo); color: var(--trilho-ativo-texto); font-size: 1.35rem; font-weight: 500; }
.conta-chip { display: inline-block; padding: 2px 8px; border-radius: 4px; background: var(--trilho-ativo-fundo); color: var(--trilho-ativo-texto); font-size: .72rem; font-weight: 500; }
.conta-chip-ok { background: var(--ok-fundo); color: var(--ok); }
.conta-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; align-items: start; }
.conta-cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 6px; padding: 18px 20px 6px; }
.conta-cartao > header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.conta-cartao h2 { margin: 0; font-size: .95rem; font-weight: 500; }
.conta-cartao header p { margin: 0; font-size: .76rem; color: var(--mudo); }
.conta-ico { flex: none; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; background: var(--hover-sec); color: var(--cor); }
.conta-ico-laranja { background: var(--aviso-fundo); color: var(--aviso); }
.conta-linha { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; min-height: 46px; border-bottom: 1px solid var(--borda); font-size: .86rem; }
.conta-linha:last-of-type { border-bottom: 0; }
.conta-linha > span { color: var(--mudo); }
.conta-linha > strong { font-weight: 500; overflow-wrap: anywhere; display: flex; align-items: center; gap: 8px; }
.conta-linha small { font-weight: 400; font-size: .8rem; color: var(--mudo); }
.conta-senha { letter-spacing: .18em; }
.conta-lapis { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--mudo); cursor: pointer; }
.conta-lapis:hover { background: var(--hover-sec); color: var(--cor); }
.conta-linha.editando > strong, .conta-linha.editando > .conta-lapis { display: none; }
.conta-edicao { grid-column: 2 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 7px 0; margin: 0; }
.conta-edicao input:not([type=hidden]) { flex: 1 1 180px; min-width: 0; height: 32px; margin: 0; }
.conta-edicao .btn { height: 32px; padding: 0 12px; font-size: .8rem; }
.conta-edicao-senha { flex-direction: column; align-items: stretch; }
.conta-edicao[hidden] { display: none; }
.conta-edicao-senha input:not([type=hidden]) { flex: none; }
.conta-edicao-senha > div { display: flex; gap: 6px; }
.conta-push-botoes { display: flex; gap: 6px; grid-column: 2 / -1; padding-bottom: 10px; }
.conta-push-botoes:not(:has(button:not([hidden]))) { display: none; }
.conta-linha-push > strong { padding: 10px 0 6px; }
.conta-instalar { margin: 4px 0 10px; font-size: .82rem; }
@media (max-width: 560px) { .conta-linha { grid-template-columns: 1fr auto; padding: 6px 0; } .conta-linha > span { grid-column: 1 / -1; font-size: .76rem; } .conta-faixa { padding: 16px; } }
/* Foto da equipe: entra no lugar das iniciais, no mesmo círculo. */
.av-foto { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.wa-autor-av { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; margin-right: 5px; vertical-align: -4px;
  background: var(--trilho-avatar-fundo); color: var(--trilho-avatar-texto); font-size: .5rem; font-weight: 600; }
.trilho-avatar:has(.av-foto), .wa-avatar:has(.av-foto), .conta-avatar:has(.av-foto), .wa-autor-av:has(.av-foto) { padding: 0; overflow: hidden; background: none; }
.conta-avatar-caixa { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.foto-form { margin: 0; }
.conta-avatar-caixa > .foto-form { position: absolute; top: 42px; left: 44px; }
label.foto-trocar { width: 26px; height: 26px; margin: 0; display: grid; place-items: center; border-radius: 50%; box-sizing: border-box;
  background: var(--cor); color: #fff; border: 2px solid var(--cartao); cursor: pointer; }
label.foto-trocar:hover { background: var(--cor-escura); }
label.foto-trocar input[type=file] { display: none; }
.foto-remover { margin: 0; }
.foto-remover .btn-link { border: 0; background: none; padding: 0; font: inherit; font-size: .72rem; color: var(--mudo); cursor: pointer; }
.foto-remover .btn-link:hover { color: var(--erro); }
.usuario-foto { display: flex; align-items: center; gap: 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Páginas comuns (contatos, relatórios, configurações) ao lado do menu. */
body.com-trilho > main.wrap:not(.wa-largo) { padding-top: 4px; }

/* --- Tela de atendimento --- */
.wa { display: grid; grid-template-columns: 340px minmax(0, 1fr) 290px; height: calc(100vh - var(--topo-h, 0px)); height: calc(100dvh - var(--topo-h, 0px));
  background: var(--cartao); font-size: .88rem; line-height: 1.45; }
.wa:not(.com-conversa) { grid-template-columns: 340px minmax(0, 1fr); }
.wa > * { min-height: 0; }
.wa-col-lista { border-right: 1px solid var(--borda); display: flex; flex-direction: column; min-width: 0; }
.wa-lista-topo { display: flex; align-items: center; gap: 6px; padding: 14px 14px 10px; position: relative; }
.wa-lista-topo h1 { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-lista-limpar { display: inline-flex; padding: 4px; border-radius: 5px; color: var(--mudo); }
.wa-lista-limpar:hover { background: var(--hover); color: var(--texto); }
.wa-nova { margin-left: auto; padding: 0; }
.wa-nova summary { width: auto; }
.wa-nova form { position: absolute; left: 12px; right: 12px; top: calc(100% - 2px); z-index: 25; margin: 0; padding: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); }
.wa-busca { padding: 0 14px 10px; border-bottom: 0; }
.wa-busca-campo { display: flex; align-items: center; gap: 8px; margin: 0; height: 34px; padding: 0 10px; border: 1px solid var(--borda); border-radius: 7px;
  background: var(--superficie-2); color: var(--mudo); font-weight: 400; }
.wa-busca-campo:focus-within { outline: 2px solid var(--cor); outline-offset: -1px; }
.wa-busca-campo input { border: 0; background: transparent; padding: 0; margin: 0; outline: none; font-size: .86rem; color: var(--texto); }
.wa-abas { display: flex; gap: 2px; margin: 0 14px 10px; padding: 3px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px; }
.wa-aba { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; height: 28px; padding: 0 5px; border-radius: 6px;
  font-size: .74rem; font-weight: 500; color: var(--mudo); text-decoration: none; white-space: nowrap; }
.wa-aba:hover { color: var(--texto); }
.wa-aba.ativo { background: var(--wa-bolha-equipe); color: var(--cor); font-weight: 600; box-shadow: inset 0 0 0 1px var(--wa-bolha-equipe-borda); }
.wa-aba.ativo .wa-qtd { color: var(--cor); }
.wa-aba .wa-qtd { margin: 0; padding: 0; background: none; font-size: .68rem; font-weight: 600; color: var(--mudo); }
.wa-aba.forte .wa-qtd { color: var(--aviso); }
#wa-lista { flex: 1; overflow-y: auto; border-top: 1px solid var(--borda); }
.wa-item { gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--borda); border-left: 0; box-shadow: none; }
.wa-item.ativo { background: var(--hover-sec); box-shadow: inset 2px 0 0 var(--cor); }
.wa-item-topo strong { font-weight: 600; font-size: .86rem; }
.wa-previa { font-size: .82rem; }
.wa-hora { font-family: var(--mono); font-size: .68rem; color: var(--mudo); }
.wa-tags { gap: 6px; margin-top: 3px; }
.wa-grupo { display: inline-flex; align-items: center; font-size: .72rem; color: var(--mudo); }
.wa-grupo .bolinha, .wa-conv-info .bolinha, .wa-transferir-menu .bolinha { width: 6px; height: 6px; margin-right: 5px; vertical-align: 1px; }
.wa-estado { font-size: .68rem; font-weight: 500; padding: 1px 7px; border-radius: 99px; background: var(--tag-neutro); color: var(--texto-2); }
.wa-estado.fila { background: var(--aviso-fundo); color: var(--aviso); }
.wa-estado.voce { background: var(--wa-bolha-equipe); color: var(--cor); }
.wa-nao-lidas { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--cor); color: var(--sobre-cor, #fff);
  font-size: .66rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.wa-avatar { width: 34px; height: 34px; background: var(--wa-avatar); color: var(--wa-avatar-texto); font-weight: 600; font-size: .74rem; }
.wa-avatar.neutro { background: var(--tag-neutro); color: var(--mudo); }
.wa-avatar.grande { width: 56px; height: 56px; font-size: 1.1rem; }

.wa-col-conversa { background: var(--wa-fundo-chat); min-width: 0; }
.wa-conv-topo { padding: 10px 18px; gap: 12px; flex-wrap: wrap; }
.wa-conv-quem strong { font-weight: 600; font-size: .95rem; }
.wa-conv-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--mudo); font-size: .78rem; }
.wa-conv-acoes { gap: 6px; }
/* Assumir em verde; Encerrar igual ao Transferir e vermelho ao passar o mouse. */
.wa-btn-assumir { background: var(--wa-verde); border-color: var(--wa-verde); }
.wa-btn-assumir:hover { background: var(--wa-verde); border-color: var(--wa-verde); filter: brightness(1.08); }
.btn-p.sec.wa-btn-encerrar:hover { background: var(--erro); border-color: var(--erro); color: #fff; }
.wa-transferir-menu { min-width: 200px; padding: 4px; }
.wa-transferir-menu button { font-size: .86rem; }
.wa-msgs { padding: 18px 26px; gap: 10px; }
.wa-msg { max-width: min(560px, 66%); padding: 8px 12px 5px; border-radius: 10px 10px 10px 3px; background: var(--wa-bolha-cliente);
  border: 1px solid var(--wa-bolha-cliente-borda); box-shadow: none; align-self: flex-start; }
.wa-msg > b { display: flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 500; color: var(--mudo); margin-bottom: 2px; }
.wa-msg .wa-hora { display: block; text-align: right; margin-top: 2px; }
.wa-msg.bot { align-self: flex-start; background: var(--wa-bolha-bot); border: 1px solid var(--wa-bolha-cliente-borda); border-style: solid; }
.wa-msg.bot > b { color: var(--mudo); }
.wa-msg.atendente { align-self: flex-end; background: var(--wa-bolha-equipe); border-color: var(--wa-bolha-equipe-borda); border-radius: 10px 10px 3px 10px; }
.wa-msg.atendente > b { color: var(--cor); }
.wa-msg.nota { align-self: flex-end; max-width: min(560px, 66%); background: var(--aviso-fundo); border: 1px dashed var(--aviso-borda); border-radius: 10px 10px 3px 10px; }
.wa-msg.nota > b { color: var(--aviso); }
.wa-citar { right: -32px; display: inline-flex; align-items: center; justify-content: center; }
.wa-evento { align-self: center; display: flex; align-items: center; gap: 10px; background: none; color: var(--mudo); font-size: .72rem; padding: 2px 0; max-width: 90%; text-align: center; }
.wa-evento::before, .wa-evento::after { content: ""; flex: 0 0 36px; height: 1px; background: var(--borda); }
.wa-arquivo-link { display: flex; align-items: center; gap: 10px; padding: 6px 4px; color: var(--texto); text-decoration: none; }
.wa-arquivo-link:hover { color: var(--cor); }
.wa-arquivo-ext { flex: none; width: 34px; height: 40px; border-radius: 5px; background: var(--cartao); border: 1px solid var(--borda);
  display: flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 600; color: var(--erro); }
.wa-arquivo-link > span:not(.wa-arquivo-ext) { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.wa-sem-conversa p:first-child { font-size: 1rem; color: var(--borda); }

/* Escrever */
.wa-escrever { padding: 10px 18px 10px; }
.wa-escrever.modo-nota { background: var(--cartao); }
.wa-modo { gap: 16px; margin-bottom: 8px; }
.wa-modo label { position: relative; padding: 2px 0; border-radius: 0; background: none; font-size: .78rem; font-weight: 500; color: var(--mudo); }
.wa-modo input { position: absolute; opacity: 0; pointer-events: none; }
.wa-modo label:has(input:checked) { background: none; color: var(--texto); font-weight: 600; box-shadow: inset 0 -2px 0 var(--cor); }
.wa-modo label.nota:has(input:checked) { color: var(--aviso); box-shadow: inset 0 -2px 0 var(--aviso); }
.wa-modo label:has(input:focus-visible) { outline: 2px solid var(--cor); outline-offset: 2px; }
.wa-caixa { border: 1px solid var(--borda); border-radius: 9px; background: var(--campo); padding: 6px 8px 4px; }
.wa-caixa:focus-within { border-color: var(--cor); }
.wa-escrever.modo-nota .wa-caixa { border: 1px dashed var(--aviso-borda); background: var(--aviso-fundo); }
.wa-escrever textarea { border: 0; background: transparent; border-radius: 0; padding: 4px 4px; margin: 0; outline: none; font-size: .9rem; }
.wa-escrever textarea:focus { outline: none; }
.wa-ferramentas { display: flex; align-items: center; gap: 2px; }
.wa-ferramentas-meio { flex: 1; }
.wa-clipe, .wa-microfone { width: 32px; height: 32px; border-radius: 6px; font-size: 1rem; color: var(--mudo); display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.wa-clipe:hover, .wa-microfone:hover, .wa-ferramenta:hover { background: var(--hover); color: var(--texto); }
.wa-ferramenta { height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--mudo); font: inherit; font-size: .78rem;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.wa-ferramenta kbd { font-family: var(--mono); font-size: .66rem; border: 1px solid var(--borda); border-radius: 4px; padding: 0 4px; }
.wa-enviar { width: auto; height: 30px; border-radius: 6px; padding: 0 12px; margin-left: 4px; gap: 5px; display: inline-flex; align-items: center;
  background: var(--cor); color: var(--sobre-cor, #fff); font: inherit; font-size: .82rem; font-weight: 500; }
.wa-enviar .nota-txt, .wa-escrever.modo-nota .wa-enviar .enviar-txt { display: none; }
.wa-escrever.modo-nota .wa-enviar .nota-txt { display: inline; }
.wa-escrever.modo-nota .wa-enviar { background: #9a6a12; }
.wa-gravando { height: 40px; margin: 2px 0 4px; }
.wa-escrever.gravando .wa-clipe, .wa-escrever.gravando .wa-ferramenta { display: none; }
.wa-dica { margin: 6px 0 0; font-size: .7rem; color: var(--mudo); }
.wa-rapidas { margin: 0; }
.wa-rapidas-lista { bottom: calc(100% - 4px); }

/* Painel do contato */
.wa-lateral { border-left: 1px solid var(--borda); overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; font-size: .84rem; }

.wa-nome { margin-top: 8px; }
.wa-nome summary.btn-p { height: 26px; font-size: .76rem; }

.wa-caminho { border-left: 1px solid var(--borda); font-size: .8rem; color: var(--texto-2); }
.wa-caminho li { margin-bottom: 7px; }
.wa-caminho li::before { left: -16px; top: 7px; width: 7px; height: 7px; }
.wa-caminho .mono { color: var(--mudo); margin-right: 4px; font-size: .74rem; }
.wa-lat-bloquear { margin: auto 0 0; padding-top: 18px; }
.wa-lat-bloquear button { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--mudo); }
.wa-lat-bloquear button:hover { color: var(--erro); }

@media (max-width: 1280px) {
  .wa.com-conversa, .wa.sem-lateral { grid-template-columns: 300px minmax(0, 1fr); }
  .wa-lateral { display: none; }
}
/* Celular e tablet: o menu vira uma barra no topo (botão Menu) e a tela mostra a lista OU a conversa. */
@media (max-width: 860px) {
  body.com-trilho { flex-direction: column; }
  /* Na coluna, a margem automática do .wrap encolhia o main até o conteúdo (lista vazia = coluna estreita no meio). */
  body.com-trilho > main { width: 100%; }
  .trilho, :root[data-trilho="aberto"] .trilho { position: sticky; top: 0; width: 100%; height: auto; flex: none; padding: 8px 12px; }
  .trilho-topo { margin: -8px -12px 0; padding: 8px 12px; border-bottom: 0; justify-content: space-between; }
  .trilho .trilho-nome { display: inline; }
  .trilho-abrir-movel { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--trilho-borda);
    border-radius: 3px; background: transparent; color: var(--trilho-forte); font: inherit; font-size: .84rem; cursor: pointer; }
  .trilho-corpo { display: none; max-height: calc(100dvh - 60px); overflow-y: auto; padding-top: 8px; }
  .trilho.movel-aberto .trilho-corpo { display: flex; }
  /* Menu aberto toma a tela toda (por cima da conversa, que antes ficava cortada embaixo); "Menu" de novo volta. */
  .trilho.movel-aberto { position: fixed; inset: 0; z-index: 70; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  .trilho.movel-aberto .trilho-corpo { max-height: none; overflow: visible; }
  .trilho .trilho-item { justify-content: flex-start; padding: 0 11px; }
  .trilho .trilho-rotulo, .trilho .trilho-qtd, .trilho .trilho-fila { display: inline; }
  .trilho .trilho-item > .trilho-rotulo { flex: 1; text-align: left; }
  :root:not([data-trilho="aberto"]) .trilho-nav > .trilho-titulo { height: auto; margin: 14px 11px 2px; overflow: visible; font-size: .64rem; background: none; }
  .trilho .trilho-titulo, .trilho .trilho-online { display: block; }
  .trilho .trilho-ponto, .trilho-alternar { display: none; }
  .trilho .trilho-usuario, .trilho .menu-usuario > summary.trilho-usuario { justify-content: flex-start; padding: 8px; }
  .trilho .menu-config-lista { position: static; margin: 4px 0; box-shadow: none; }
  .wa, .wa:not(.com-conversa), .wa.com-conversa, .wa.sem-lateral { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .wa.com-conversa .wa-col-lista { display: none; }
  .wa:not(.com-conversa) .wa-col-conversa { display: none; }
  .wa-col-lista { border-right: 0; }
  .wa-voltar { display: block; padding: 8px 16px; background: var(--cartao); border-bottom: 1px solid var(--borda); text-decoration: none; }
  .wa-conv-topo { padding: 8px 12px; }
  .wa-conv-acoes { width: 100%; }
  .wa-msgs { padding: 12px; }
  .wa-msg, .wa-msg.nota { max-width: 88%; }
  /* viewport-fit=cover: a página vai até atrás da barra de gestos do Android (que fica com a cor da tela, não branca);
     a caixa de escrever e o fim da lista recuam o tamanho dessa barra. */
  .wa-escrever { padding: 6px 10px calc(8px + env(safe-area-inset-bottom)); }
  #wa-lista { padding-bottom: env(safe-area-inset-bottom); }
  body.com-trilho > main.wrap:not(.wa-largo) { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
  .wa-dica { display: none; }
  .wa-campos-linha { grid-template-columns: 1fr; }
}

/* Imagem atrás da conversa (WA_FUNDO_IMAGEM=1, arquivos do cliente em marca/). Só no tema claro. */
/* A imagem em pé inteira, na altura da coluna e no centro: os três triângulos da logo juntos, uma vez por tela. */
body.fundo-imagem .wa-col-conversa { background-image: url(img/fundo-conversa-vertical.png); background-size: contain; background-position: center; background-repeat: no-repeat; }
body.fundo-imagem .wa-msgs { background: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) body.fundo-imagem .wa-col-conversa { background-image: none; } }
:root[data-tema="escuro"] body.fundo-imagem .wa-col-conversa { background-image: none; }

/* Login com a identidade dos triângulos (LOGIN_DESFOCADO=1, padrão = WA_FUNDO_IMAGEM): fundo claro com a imagem do cliente e cartão branco. */
/* Triângulos desfocados atrás (camada fixa maior que a tela, para o desfoque não deixar borda) e cartão de vidro fosco. */
body.login-desfocado:has(main.tela-login) { background: #eef1f5; }
body.login-desfocado:has(main.tela-login)::before { content: ""; position: fixed; inset: -60px; z-index: -1;
  background: url(img/fundo-conversa.png) center / cover no-repeat; filter: blur(22px) saturate(1.6); }
body.login-desfocado:has(main.tela-login) .topo { display: none; }
body.login-desfocado main.tela-login { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding-bottom: 24px; }
body.login-desfocado main.tela-login .cartao.estreito { width: min(380px, 100%); margin: 0; padding: 32px 32px 26px; border-radius: 14px;
  background: color-mix(in srgb, var(--cartao) 62%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 12px 40px rgba(31, 58, 99, .10); }
body.login-desfocado main.tela-login h1 { text-align: center; font-size: 1.25rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
body.login-desfocado main.tela-login label { font-size: .82rem; font-weight: 500; color: var(--texto-2); }
body.login-desfocado main.tela-login input { height: 40px; border-radius: 8px; }
body.login-desfocado main.tela-login .btn { width: 100%; height: 40px; padding: 0; margin-top: 4px; border-radius: 8px; background: var(--trilho); border-color: var(--trilho); }
body.login-desfocado main.tela-login .btn:hover { filter: brightness(1.15); }
.login-marca { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 10px; background: var(--trilho); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 19px; }

.login-rodape { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .74rem; color: var(--mudo); }
.login-tri { display: inline-flex; gap: 3px; }
.login-tri i { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid #f2b8a8; }
.login-tri i:nth-child(2) { border-bottom-color: #a9cdf0; }
.login-tri i:nth-child(3) { border-bottom-color: #bcd9b0; }
body.login-desfocado main.tela-login .login-rodape { color: var(--texto-2); }
@media (max-width: 860px) { body.login-desfocado:has(main.tela-login)::before { background-image: url(img/fundo-conversa-vertical.png); } }
/* Tema escuro: os mesmos triângulos desfocados, só que escurecidos, e o cartão de vidro fosco escuro. */
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) body.login-desfocado:has(main.tela-login) { background: #0b1017; }
  :root:not([data-tema="claro"]) body.login-desfocado:has(main.tela-login)::before { filter: blur(18px) saturate(2.4) brightness(1.25); }
  :root:not([data-tema="claro"]) body.login-desfocado main.tela-login .cartao.estreito { background: color-mix(in srgb, var(--cartao) 66%, transparent);
    border-color: rgba(255, 255, 255, .10); box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
  :root:not([data-tema="claro"]) .login-marca, :root:not([data-tema="claro"]) body.login-desfocado main.tela-login .btn { background: var(--cor); border-color: var(--cor); } }
:root[data-tema="escuro"] body.login-desfocado:has(main.tela-login) { background: #0b1017; }
:root[data-tema="escuro"] body.login-desfocado:has(main.tela-login)::before { filter: blur(18px) saturate(2.4) brightness(1.25); }
:root[data-tema="escuro"] body.login-desfocado main.tela-login .cartao.estreito { background: color-mix(in srgb, var(--cartao) 66%, transparent);
  border-color: rgba(255, 255, 255, .10); box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
:root[data-tema="escuro"] .login-marca, :root[data-tema="escuro"] body.login-desfocado main.tela-login .btn { background: var(--cor); border-color: var(--cor); }

/* Setinha discreta na própria barra do contato: aberta, fica no canto de cima; recolhida, a barra vira uma faixa
   fina com a seta (a faixa inteira é clicável). Fica guardado no navegador; abaixo de 1280 px a barra já some sozinha. */
.wa-lateral { position: relative; }
.wa-lateral .wa-recolher { display: flex; position: absolute; top: 12px; left: 8px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--mudo); align-items: center; justify-content: center; cursor: pointer; opacity: .65; z-index: 2; }
.wa-lateral .wa-recolher:hover { background: var(--hover); color: var(--texto); opacity: 1; }
.wa-lateral .wa-recolher .ic { transform: rotate(180deg); transition: transform .15s; }
.wa.sem-lateral { grid-template-columns: 340px minmax(0, 1fr) 28px; }
.wa.sem-lateral .wa-lateral { display: block; padding: 0; overflow: hidden; }
.wa.sem-lateral #wa-lateral { display: none; }
.wa.sem-lateral .wa-lateral .wa-recolher { inset: 0; width: auto; height: auto; border-radius: 0; align-items: flex-start; padding-top: 16px; }
.wa.sem-lateral .wa-lateral .wa-recolher .ic { transform: none; }

.tema-amostra { flex: none; width: 22px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.tema-padrao { background: linear-gradient(90deg, #1f3a63 50%, #f6f7f9 50%); }
.tema-dracula { background: linear-gradient(90deg, #282a36 50%, #bd93f9 50%); }

/* Dracula: paleta Dracula (fundo #282A36, roxo, rosa, verde, ciano), sempre escuro. */
:root[data-visual="dracula"] {
  color-scheme: dark;
  --cor: #bd93f9; --cor-escura: #d6b8ff; --sobre-cor: #282a36;
  --texto: #f8f8f2; --texto-2: #e2e2dc; --mudo: #a4acd0; --borda: #44475a;
  --fundo: #282a36; --cartao: #21222c; --campo: #1e1f29; --superficie-2: #2e303e; --linha-par: #252632;
  --hover: #343746; --hover-sec: #3a3c4e; --topo: #21222c;
  --tag-neutro: #343746; --tag-tipo: #3a3150; --tag-tipo-texto: #d6b8ff; --destaque-sombra: rgba(189, 147, 249, .15);
  --ok: #50fa7b; --ok-fundo: #1f3a2a; --ok-borda: #2f6a44;
  --erro: #ff6e6e; --erro-fundo: #3a1f26; --erro-borda: #7a2f3a;
  --aviso: #ffb86c; --aviso-fundo: #3a2e1f; --aviso-borda: #7a5a2f;
  --trilho: #191a21; --trilho-texto: #e2e2dc; --trilho-mudo: #6272a4; --trilho-forte: #f8f8f2; --trilho-hover: #343746;
  --trilho-ativo-fundo: #44475a; --trilho-ativo-texto: #f8f8f2; --trilho-borda: #2b2d3a; --trilho-topo: transparent; --trilho-avatar-fundo: #bd93f9; --trilho-avatar-texto: #282a36;
  --wa-verde: #50fa7b; --wa-fundo-chat: #282a36;
  --wa-bolha-cliente: #44475a; --wa-bolha-cliente-borda: #44475a;
  --wa-bolha-equipe: #3d3354; --wa-bolha-equipe-borda: #5b4a80; --wa-bolha-bot: #21222c;
  --wa-avatar: #ff79c6; --wa-avatar-texto: #282a36;
  --mono: "Fira Code", ui-monospace, monospace;
}
:root[data-visual="dracula"] body { font-family: "Fira Sans", system-ui, sans-serif; }
:root[data-visual="dracula"] .trilho-avatar { background: #bd93f9; color: #282a36; }
:root[data-visual="dracula"] .trilho-item.ativo { background: #44475a; color: #f8f8f2; box-shadow: inset 3px 0 0 #bd93f9; }

/* ===================== Visual do LNX Backup Center (v1.27.0): traço fino, cantos retos, abas em link, blocos que recolhem ===================== */
.btn-p { height: 32px; padding: 0 13px; border-radius: 3px; font-size: .84rem; }
.btn-p.sec { background: var(--tag-neutro); color: var(--texto); border-color: var(--borda); font-weight: 400; }
.btn-p.sec:hover { background: var(--hover-sec); border-color: var(--cor); color: var(--cor-escura); }
.btn, .btn-mini { border-radius: 3px; }
/* Lista: título leve, busca reta e abas em link sublinhado (como os filtros do LNX). */
.wa-lista-topo h1 { font-size: 1.4rem; font-weight: 400; }
.wa-busca-campo { border-radius: 3px; background: var(--campo); }
.wa-abas { gap: 2px 16px; margin: 0 14px; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--borda); border-radius: 0; flex-wrap: wrap; }
/* As abas dividem a largura da lista (sem sobra à direita quando são só 3). */
.wa-abas { flex-wrap: nowrap; gap: 0; }
.wa-aba { flex: 1 1 0; justify-content: center; height: 34px; padding: 0 4px; border-radius: 0; font-size: .84rem; font-weight: 400; color: var(--cor); }
.wa-aba:hover { color: var(--cor-escura); box-shadow: inset 0 -2px 0 var(--borda); }
.wa-aba.ativo { background: none; color: var(--texto); font-weight: 500; box-shadow: inset 0 -2px 0 var(--cor); }
.wa-aba .wa-qtd, .wa-aba.ativo .wa-qtd { color: var(--mudo); font-weight: 400; font-size: .72rem; margin-left: 3px; }
.wa-aba.forte .wa-qtd { color: var(--aviso); font-weight: 600; }
/* Abas no mesmo estilo do item escolhido do menu (Conversas): sem borda, a escolhida com fundo azul claro. */
.wa-abas { gap: 6px; padding-bottom: 10px; }
.wa-aba { height: 30px; border-radius: 6px; color: var(--trilho-texto); }
.wa-aba:hover { box-shadow: none; background: var(--trilho-hover); color: var(--trilho-forte); }
.wa-aba.ativo, .wa-aba.ativo:hover { background: var(--trilho-ativo-fundo); color: var(--trilho-ativo-texto); font-weight: 500; box-shadow: none; }
.wa-aba.ativo .wa-qtd { color: var(--trilho-ativo-texto); }
#wa-lista { border-top: 0; }
.wa-item.ativo { box-shadow: inset 3px 0 0 var(--cor); }
/* Conversa: nome leve, botões finos. */
.wa-conv-quem strong { font-weight: 400; font-size: 1.08rem; }
.wa-caixa, .wa-enviar, .wa-transf-pessoa, .wa-transf-chip > span { border-radius: 3px; }
.wa-transferir-menu.wa-transf-caixa { border-radius: 4px; padding: 14px; gap: 8px; box-shadow: 0 10px 28px rgba(24, 32, 43, .14); }
.wa-transf-chip > span { gap: 6px; height: 28px; padding: 0 10px; }
.wa-transf-chip > span .bolinha { border-radius: 2px; }
.wa-transf-pessoas { border: 1px solid var(--borda); border-radius: 3px; gap: 0; padding: 0; }
.wa-transf-pessoa { border: 0; border-radius: 0; padding: 7px 10px; }
.wa-transf-pessoa + .wa-transf-pessoa { border-top: 1px solid var(--borda); }
.wa-transf-pessoa:has(input:checked) { background: var(--hover-sec); }
.wa-transf-quem strong { font-weight: 500; }
.wa-transf-botoes .btn-p { height: 30px; }
/* Painel do contato */
.wa-lateral { padding: 14px; gap: 12px; }

.wa-lateral:not(:has(> #wa-lateral:empty)) { padding-top: 34px; }
.wa-lateral .wa-recolher { top: 7px; left: auto; right: 10px; }
.wa-lat-bloquear { padding-top: 4px; }
/* Páginas comuns (contatos, relatórios, configurações): cabeçalho com ícone, título leve, filtros em link, blocos retos. */
body.com-trilho > main.wrap:not(.wa-largo) { max-width: none; padding-left: 28px; padding-right: 28px; }
.cabecalho h1, main.wrap:not(.wa-largo) > h1 { font-size: 1.6rem; font-weight: 400; letter-spacing: -.01em; }
main.wrap .cartao { border-radius: 3px; box-shadow: none; }
.ac-cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 14px; }
.ac-cab .ac-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; color: var(--cor); }
.ac-cab h1 { margin: 0; font-size: 1.6rem; font-weight: 400; letter-spacing: -.01em; }
.ac-info { font-size: .94rem; color: var(--texto-2); }
.ac-info b { font-weight: 500; color: var(--texto); }
.ac-dir { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.ac-busca { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin: 0 0 14px; }
.ac-busca label { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .9rem; font-weight: 400; color: var(--texto-2); }
.ac-busca input[type=search], .ac-busca select { width: 200px; height: 34px; margin: 0; padding: 0 10px; border-radius: 3px; font-size: .86rem; }
.ac-busca select { width: auto; }
.ac-filtros { display: flex; align-items: center; gap: 2px 14px; flex-wrap: wrap; font-size: .9rem; }
.ac-filtros a { color: var(--cor); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 5px; }
.ac-filtros a:hover { border-bottom-color: var(--borda); }
.ac-filtros a.ativo { color: var(--texto); font-weight: 500; border-bottom-color: var(--cor); }
.ac-filtros .sep { width: 1px; height: 16px; background: var(--borda); }
.ac-painel { border: 1px solid var(--borda); border-radius: 3px; background: var(--cartao); margin: 0 0 14px; }
.ac-painel > summary { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--superficie-2); cursor: pointer; list-style: none;
  font-size: 1.02rem; color: var(--texto); border-radius: 3px; }
.ac-painel > summary::-webkit-details-marker { display: none; }
.ac-painel > summary::before { content: ""; width: 7px; height: 7px; flex: none; margin: 0 2px 3px 2px; border-right: 1.5px solid var(--texto-2);
  border-bottom: 1.5px solid var(--texto-2); transform: rotate(-45deg); transition: transform .15s; }
.ac-painel[open] > summary::before { transform: rotate(45deg); }
.ac-painel[open] > summary { border-bottom: 1px solid var(--borda); border-radius: 3px 3px 0 0; }
.ac-painel > summary small { margin-left: auto; font-size: .8rem; color: var(--mudo); }
.ac-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); padding: 16px 4px 18px; }
.ac-num { padding: 0 18px; border-left: 1px solid var(--borda); min-width: 0; color: inherit; text-decoration: none; }
.ac-num:first-child { border-left: 0; }
.ac-num > span { font-size: .8rem; color: var(--mudo); }
.ac-num strong { display: block; margin-top: 3px; font-size: 1.85rem; font-weight: 300; color: var(--texto); line-height: 1.2; }
.ac-num strong.cor { color: var(--cor); }
a.ac-num:hover strong, a.ac-num.ativo strong { color: var(--cor); }
.ac-num > small { display: block; font-size: .76rem; color: var(--mudo); }
.ac-tab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ac-tab th { text-align: left; font-weight: 600; padding: 11px 10px 8px; color: var(--texto); border-bottom: 1px solid var(--borda); white-space: nowrap; background: none; }
.ac-tab td { padding: 9px 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; color: var(--texto-2); background: none; }
.ac-tab tbody tr:hover td { background: var(--hover); }
.ac-tab .num { text-align: right; }
.ac-ic { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 0; border-radius: 3px; background: none; color: var(--texto-2); cursor: pointer; }
.ac-ic:hover { background: var(--hover-sec); color: var(--cor); }
.ac-rolar { overflow-x: auto; }
/* Login em duas metades (como o LNX Backup Center): à esquerda a marca e o desenho da conversa; à direita o formulário. */
body:has(main.tela-entrar) { background: var(--cartao); }
body:has(main.tela-entrar) .topo { display: none; }
main.tela-entrar { max-width: none; padding: 0; margin: 0; }
.lg { display: grid; grid-template-columns: minmax(380px, 46%) 1fr; min-height: 100vh; min-height: 100dvh; }
.lg-lado { display: flex; flex-direction: column; padding: 32px 44px; background: #f4f5f7; border-right: 1px solid var(--borda); }
.lg-marca { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--texto); }
.lg-marca .ic { color: var(--cor); }
.lg-meio { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 460px; }
.lg-frase { margin: 0 0 26px; font-size: 24px; line-height: 1.35; font-weight: 400; color: var(--texto); letter-spacing: -.01em; }
.lg-conversa { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; font-size: 12.5px; }
.lg-conversa > div { max-width: 74%; padding: 7px 11px; border: 1px solid var(--borda); color: var(--texto-2); }
.lg-cli { align-self: flex-start; background: var(--cartao); border-radius: 3px 10px 10px 10px; }
.lg-bot { align-self: flex-start; background: #eef1f4; border-radius: 3px 10px 10px 10px; }
.lg-bot small { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mudo); margin-bottom: 3px; }
.lg-bot span { display: inline-block; margin: 5px 4px 0 0; padding: 1px 8px; border: 1px solid var(--cor); border-radius: 99px; color: var(--cor); background: var(--cartao); }
.lg-bot span.on { background: var(--cor); color: #fff; }
.lg-conversa > .lg-evento { align-self: center; max-width: none; padding: 0; border: 0; font-size: 11px; color: var(--mudo); }
.lg-eq { align-self: flex-end; background: #e3eefb; border-color: #c9dcf3 !important; border-radius: 10px 3px 10px 10px; color: var(--texto) !important; }
.lg-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.lg-itens li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--texto-2); }
.lg-itens .ic { color: var(--cor); }
.lg-rodape { font-size: 12.5px; color: var(--mudo); }
.lg-rodape img { height: 22px; width: auto; opacity: .75; }
.lg-form-lado { position: relative; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.lg-tema { position: absolute; top: 18px; right: 20px; width: 32px; height: 32px; border: 1px solid var(--borda); border-radius: 3px; background: var(--cartao);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.lg-form { width: min(340px, 100%); }
.lg-form .logo-login { text-align: left; margin: 0 0 22px; }
.lg-form .logo-login img { max-width: 170px; max-height: 64px; width: auto; }
.lg-form .login-marca { margin: 0 0 22px; border-radius: 8px; background: var(--cor); }
.lg-form h1 { margin: 0 0 4px; font-size: 26px; font-weight: 400; letter-spacing: -.01em; text-align: left; }
.lg-sub { margin: 0 0 22px; font-size: 14px; color: var(--mudo); }
.lg-form label { display: block; margin: 0 0 14px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.lg-form input[type=email], .lg-form input[type=password], .lg-form input[type=text] { display: block; width: 100%; height: 38px; margin: 6px 0 0; padding: 0 11px;
  border-radius: 3px; font-size: 14px; box-sizing: border-box; }
.lg-form input:focus { outline: none; border-color: var(--cor); box-shadow: 0 0 0 3px var(--hover-sec); }
.lg-senha { position: relative; display: block; }
.lg-senha input { padding-right: 40px !important; }
.lg-olho { position: absolute; right: 4px; bottom: 4px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 3px;
  background: none; color: var(--mudo); cursor: pointer; padding: 0; }
.lg-olho:hover, .lg-olho.ativo { color: var(--cor); }
.lg-entrar { width: 100%; height: 38px; margin-top: 4px; border: 1px solid var(--cor); border-radius: 3px; background: var(--cor); color: #fff;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.lg-entrar:hover { background: var(--cor-escura); }
.lg-esqueci { margin: 16px 0 0; font-size: 12.5px; text-align: center; }
.lg-aviso { margin: 0 0 14px; padding: 9px 12px; border-radius: 3px; font-size: 13px; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .lg-lado { background: var(--fundo); }
  :root:not([data-tema="claro"]) .lg-bot { background: var(--superficie-2); } :root:not([data-tema="claro"]) .lg-eq { background: var(--wa-bolha-equipe); border-color: var(--wa-bolha-equipe-borda) !important; } }
:root[data-tema="escuro"] .lg-lado { background: var(--fundo); }
:root[data-tema="escuro"] .lg-bot { background: var(--superficie-2); }
:root[data-tema="escuro"] .lg-eq { background: var(--wa-bolha-equipe); border-color: var(--wa-bolha-equipe-borda) !important; }
@media (max-width: 860px) {
  .lg { grid-template-columns: 1fr; }
  .lg-lado { display: none; }
  body.com-trilho > main.wrap:not(.wa-largo) { padding-left: 14px; padding-right: 14px; }
  .ac-num { border-left: 0; padding: 6px 14px; }
}
.trilho-nav > .trilho-titulo-1 { margin-top: 2px; }
:root:not([data-trilho="aberto"]) .trilho-nav > .trilho-titulo-1 { display: none; }
@media (max-width: 860px) { :root:not([data-trilho="aberto"]) .trilho-nav > .trilho-titulo-1 { display: block; } }
@media (max-width: 860px) { .trilho-topo { background: transparent; } .trilho, :root[data-trilho="aberto"] .trilho { border-right: 0; border-bottom: 1px solid var(--trilho-borda); } }
/* 2FA: "Confiar neste navegador por 30 dias" (1.32.0). */
.confiar-2fa { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: .88rem; color: var(--mudo); margin: 4px 0 12px; cursor: pointer; }
.confiar-2fa input { width: auto; margin: 0; }

/* ---------- Ramal (telefone no navegador) ---------- */
.tel-item { position: relative; }
.tel-item small { color: var(--mudo); font-weight: 400; margin-left: 8px; }
.tel-ponto { position: absolute; left: 30px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--mudo); border: 2px solid var(--cartao); }
/* Registrado: bolinha verde viva com brilho e o estado num balãozinho verde. */
.tel-ponto[data-estado="registrado"] { background: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, .35), 0 0 6px #22c55e; }
.tel-item small[data-estado="registrado"] { display: inline-block; color: #fff; background: #22c55e; font-weight: 600; font-size: .72rem;
  line-height: 1; padding: 3px 8px; border-radius: 999px; vertical-align: 1px; }
.tel-ponto[data-estado="chamando"], .tel-ponto[data-estado="em-ligacao"] { background: var(--erro); }
.tel-ponto[data-estado="erro"] { background: var(--aviso); }
.tel-aviso { position: fixed; right: 20px; bottom: 64px; z-index: 60; width: 300px; max-width: calc(100vw - 40px); background: var(--cartao);
  border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); overflow: hidden; }
.tel-aviso-topo { display: flex; justify-content: space-between; background: var(--cor); color: #fff; font-size: .78rem; padding: 7px 12px; }
.tel-aviso-quem { display: flex; gap: 10px; align-items: center; padding: 14px 14px 10px; }
.tel-aviso-quem strong { display: block; }
.tel-aviso-quem small { color: var(--mudo); }
.tel-aviso-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--ok-fundo); color: var(--ok); box-shadow: 0 0 0 4px var(--ok-fundo); animation: tel-pulsar 1.2s ease-in-out infinite; }
@keyframes tel-pulsar { 50% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .tel-aviso-av { animation: none; } }
.tel-aviso-botoes { display: flex; gap: 8px; padding: 0 14px 14px; }
.tel-aviso-botoes .btn { flex: 1; }
.tel-aviso .tel-recusar { color: var(--erro); }
.tel-aviso .tel-atender { background: var(--ok); border-color: var(--ok); }

/* Botão Ligar (telefoninho verde) no painel do contato. */
.wa-lat-ligar { width: 34px; height: 34px; margin: 4px 0 2px; border-radius: 50%; border: 0; background: var(--ok); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); transition: transform .12s, filter .12s; }
.wa-lat-ligar:hover { filter: brightness(1.08); transform: scale(1.06); }
.wa-lat-ligar.mini { display: inline-flex; width: 26px; height: 26px; margin: 0 4px 0 0; vertical-align: middle; box-shadow: none; }

/* Configurações › Ramais da equipe (modelo A): resumo, filtros, tabela com situação ao vivo e ficha que desliza da direita. */
.rm { display: flex; flex-direction: column; gap: 16px; }
.rm-trilha { margin: 0; font-size: .78rem; color: var(--mudo); }
.rm-trilha a { color: inherit; }
.rm-cab h1 { margin: 2px 0 0; font-size: 1.4rem; font-weight: 600; }
.rm-pabx { margin: 4px 0 0; font-size: .84rem; }
.rm-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rm-num { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.rm-num span { font-size: .78rem; color: var(--mudo); }
.rm-num strong { font-size: 1.5rem; font-weight: 600; }
.rm-c-ok { color: var(--ok); }
.rm-c-problema { color: var(--aviso, #8a5a00); }
.rm-tabela { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.rm-barra { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.rm-busca { display: flex; align-items: center; gap: 8px; border: 1px solid var(--borda); border-radius: 8px; padding: 0 10px; height: 32px; color: var(--mudo); flex: 0 1 260px; background: var(--campo); }
.rm-busca:focus-within { border-color: var(--cor); }
.rm-busca input { border: 0; margin: 0; padding: 0; height: 30px; background: none; box-shadow: none; outline: none; font-size: .86rem; }
.rm-filtros { display: flex; gap: 4px; flex-wrap: wrap; }
.rm-filtros button { border: 0; background: none; color: var(--mudo); font: inherit; font-size: .8rem; padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.rm-filtros button:hover { background: var(--hover-sec); }
.rm-filtros button.ativo { background: var(--hover-sec); color: var(--cor); font-weight: 600; }
.rm-rolar { overflow-x: auto; }
.rm-lista { min-width: 760px; margin: 0; border: 0; }
.rm-lista th { font-size: .76rem; font-weight: 500; color: var(--mudo); }
.rm-lista td { vertical-align: middle; }
.rm-lista tr[hidden] { display: none; }
.rm-quem { display: flex; align-items: center; gap: 10px; }
.rm-quem .wa-avatar { width: 32px; height: 32px; font-size: .72rem; flex-shrink: 0; }
.rm-quem strong { display: block; font-weight: 500; }
.rm-quem small { display: block; font-size: .76rem; color: var(--mudo); }
.rm-pq { font-size: .8rem; }
.rm-acoes { text-align: right; white-space: nowrap; }
.rm-vazio { padding: 14px; margin: 0; font-size: .86rem; }
.rm-nota { margin: 0; font-size: .78rem; }
.rm-sit { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; padding: 2px 10px; border-radius: 20px; border: 1px solid var(--borda); color: var(--mudo); white-space: nowrap; }
.rm-sit::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rm-sit-ok { color: var(--ok); background: var(--ok-fundo); border-color: var(--ok-borda); }
.rm-sit-conectando { color: var(--aviso, #8a5a00); background: var(--aviso-fundo, #fff5dc); border-color: var(--aviso-borda, #f0d9a0); }
.rm-sit-erro { color: var(--erro); background: var(--erro-fundo); border-color: var(--erro-borda); }
.rm-sit-fechado { background: var(--fundo); }
.rm-sit-fechado::before { background: none; border: 1.5px solid currentColor; width: 5px; height: 5px; }
.rm-sit-sem { border-style: dashed; }
.rm-sit-sem::before { display: none; }
.rm-fundo { position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, .22); opacity: 0; transition: opacity .25s; }
.rm-fundo.aberta { opacity: 1; }
.rm-ficha { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(360px, 100%); background: var(--cartao); border-left: 1px solid var(--borda);
  box-shadow: -12px 0 32px rgba(0,0,0,.12); transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; overflow-y: auto; }
.rm-ficha.aberta { transform: none; visibility: visible; transition: transform .25s ease; }
.rm-ficha form { min-height: 100%; box-sizing: border-box; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.rm-ficha-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rm-ficha-cab .wa-avatar { width: 40px; height: 40px; font-size: .8rem; flex-shrink: 0; }
.rm-ficha-cab div { flex: 1; min-width: 0; }
.rm-ficha-cab strong { display: block; font-weight: 600; }
.rm-ficha-cab small { display: block; font-size: .78rem; color: var(--mudo); }
.rm-fechar { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--mudo); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rm-fechar:hover { color: var(--texto); background: var(--hover-sec); }
.rm-erro { margin: 0 0 8px; font-size: .8rem; }
.rm-ficha label { font-size: .8rem; font-weight: 500; color: var(--texto-2); margin: 10px 0 0; }
.rm-ficha input { margin: 0; height: 36px; }
.rm-dica { font-size: .76rem; margin: 2px 0 0; }
.rm-info { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--borda); display: flex; flex-direction: column; gap: 8px; font-size: .8rem; }
.rm-info div { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rm-info dt { color: var(--mudo); }
.rm-info dd { margin: 0; }
.rm-ficha-pe { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.rm-registrar { height: 38px; border-radius: 8px; border: 1px solid var(--ok); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; }
.rm-tirar { height: 32px; border: 0; background: none; color: var(--erro); font: inherit; font-size: .8rem; cursor: pointer; border-radius: 8px; }
.rm-tirar:hover { background: var(--erro-fundo); }
.rm-tirar[hidden] { display: none; }
@media (max-width: 760px) { .rm-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.btn-registrar { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 500; }
.btn-registrar:hover { background: var(--ok); border-color: var(--ok); filter: brightness(1.08); }

/* Lista de quem ligar (equipe e contatos) dentro do painel do telefone. */
.lig-busca { display: flex; align-items: center; gap: 8px; border: 1px solid var(--borda); border-radius: 8px; padding: 0 10px; background: var(--campo); color: var(--mudo); }
.lig-busca input { border: 0; margin: 0; background: none; height: 34px; padding: 0; box-shadow: none; outline: none; }
.lig-busca:focus-within { border-color: var(--cor); }
.lig-titulo { display: flex; justify-content: space-between; align-items: baseline; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--mudo); font-weight: 600; margin: 14px 0 2px; }
.lig-titulo a, .lig-titulo span { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .76rem; }
.lig-itens { list-style: none; margin: 0; padding: 0; }
.lig-itens li { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--borda); }
.lig-itens li[hidden] { display: none; }
.lig-itens li:hover { background: var(--hover-sec); }
.lig-itens .wa-avatar { width: 30px; height: 30px; font-size: .7rem; }
.lig-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lig-quem strong { font-weight: 500; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lig-quem small { color: var(--mudo); font-size: .74rem; }
.lig-itens .wa-lat-ligar.mini { margin: 0; }
.lig-vazio { margin: 12px 0 0; font-size: .84rem; }

/* Vaga do telefone na tela de atendimento (entre a conversa e o contato); o painel do telefone se encaixa nela. */
.wa-tel-vaga { border-left: 1px solid var(--borda); background: var(--fundo); }
.wa.com-tel { grid-template-columns: 340px minmax(0, 1fr) 300px; }
.wa.com-tel.com-conversa { grid-template-columns: 340px minmax(0, 1fr) 300px 290px; }
.wa.com-tel.sem-lateral { grid-template-columns: 340px minmax(0, 1fr) 300px 28px; }
@media (max-width: 1280px) {
  .wa.com-tel, .wa.com-tel.com-conversa, .wa.com-tel.sem-lateral { grid-template-columns: 300px minmax(0, 1fr) 300px; }
}
@media (max-width: 860px) { .wa-tel-vaga { display: none; } }
/* Sem largura para o contato, ele some (também a faixa recolhida), para não cair numa segunda linha. */
@media (max-width: 1280px) { .wa.sem-lateral .wa-lateral { display: none; } }

/* ===================== Tema Linuxbras (v1.54.0): laranja, branco, cantos arredondados, Lexend; sempre claro ===================== */
.tema-linuxbras { background: linear-gradient(90deg, #f25c1f 50%, #ffffff 50%); }
:root[data-visual="linuxbras"] {
  color-scheme: light;
  --cor: #f25c1f; --cor-escura: #d94a10; --sobre-cor: #ffffff;
  --texto: #1f2430; --texto-2: #3b4150; --mudo: #7a808c; --borda: #e7e9ee;
  --fundo: #f6f7f9; --cartao: #ffffff; --campo: #ffffff; --superficie-2: #fafafb; --linha-par: #fcfcfd;
  --hover: #fff6f1; --hover-sec: #fff1e9; --topo: #ffffff;
  --tag-neutro: #f3f4f6; --tag-tipo: #fff1e9; --tag-tipo-texto: #c2410c; --destaque-sombra: rgba(242, 92, 31, .12);
  --ok: #2e8b4f; --ok-fundo: #eaf6ee; --ok-borda: #bfe3cb;
  --trilho: #ffffff; --trilho-texto: #4a505c; --trilho-mudo: #9aa0ab; --trilho-forte: #1f2430; --trilho-hover: #f6f7f9;
  --trilho-ativo-fundo: #fff1e9; --trilho-ativo-texto: #f25c1f; --trilho-borda: #eceef2; --trilho-topo: #ffffff;
  --trilho-avatar-fundo: #eef2f7; --trilho-avatar-texto: #2b4a72;
  --wa-verde: #2e8b4f; --wa-fundo-chat: #ffffff;
  --wa-bolha-cliente: #ffffff; --wa-bolha-cliente-borda: #e7e9ee;
  --wa-bolha-equipe: #fff1e9; --wa-bolha-equipe-borda: #fde0cf; --wa-bolha-bot: #f6f7f9;
  --wa-avatar: #fde8dc; --wa-avatar-texto: #c2410c;
}
:root[data-visual="linuxbras"] body { font-family: "Lexend", system-ui, sans-serif; font-weight: 300; }
:root[data-visual="linuxbras"] strong, :root[data-visual="linuxbras"] h1, :root[data-visual="linuxbras"] h2 { font-weight: 500; }
:root[data-visual="linuxbras"] .trilho-logo.letra { background: #f25c1f; color: #fff; border-radius: 8px; }
:root[data-visual="linuxbras"] .trilho-item { border-radius: 8px; }
:root[data-visual="linuxbras"] .trilho-item.ativo { box-shadow: none; }
:root[data-visual="linuxbras"] .wa-aba { border-radius: 8px; }
:root[data-visual="linuxbras"] .wa-item.ativo { background: #fff6f1; box-shadow: inset 3px 0 0 var(--cor); }
:root[data-visual="linuxbras"] .wa-msg { border-radius: 12px; box-shadow: none; border: 1px solid var(--wa-bolha-cliente-borda); }
:root[data-visual="linuxbras"] .wa-msg.atendente { border-color: var(--wa-bolha-equipe-borda); }
:root[data-visual="linuxbras"] .btn, :root[data-visual="linuxbras"] .btn-mini, :root[data-visual="linuxbras"] .btn-p,
:root[data-visual="linuxbras"] .wa-caixa, :root[data-visual="linuxbras"] .wa-enviar, :root[data-visual="linuxbras"] .wa-busca-campo, :root[data-visual="linuxbras"] input, :root[data-visual="linuxbras"] textarea,
:root[data-visual="linuxbras"] select { border-radius: 8px; }
:root[data-visual="linuxbras"] .btn-p.sec { background: #fff; }
:root[data-visual="linuxbras"] .wa-conv-quem strong { font-weight: 500; }

/* ===================== Layout novo do atendimento (v1.55.0, WA_LAYOUT_NOVO, mockup chat-new) ===================== */
/* v1.57.0: sem a coluna da caixa (grupos e equipe ficam no menu lateral, como no padrão); a lista fica com as abas em pílula. */
.wa.layout-novo, .wa.layout-novo:not(.com-conversa) { grid-template-columns: auto minmax(0, 1fr); }
.wa.layout-novo.com-conversa { grid-template-columns: auto minmax(0, 1fr) 320px; }
.wa.layout-novo.sem-lateral { grid-template-columns: auto minmax(0, 1fr) 28px; }
.wa.layout-novo.com-tel { grid-template-columns: auto minmax(0, 1fr) 300px; }
.wa.layout-novo.com-tel.com-conversa { grid-template-columns: auto minmax(0, 1fr) 300px 320px; }
.wa.layout-novo.com-tel.sem-lateral { grid-template-columns: auto minmax(0, 1fr) 300px 28px; }
.wa-lista-dentro { width: 340px; display: flex; flex-direction: column; min-height: 0; }

/* Conversa: bolhas cheias para equipe, bot e IA; cliente em cinza claro. */
.wa.layout-novo .wa-msg { border-radius: 12px; box-shadow: none; border: 0; padding: 9px 14px 7px; }
.wa.layout-novo .wa-msg.cliente { background: var(--tag-neutro); }
.wa.layout-novo .wa-msg.atendente, .wa.layout-novo .wa-msg.bot { background: var(--cor); color: var(--sobre-cor, #fff); border: 0; }
.wa.layout-novo .wa-msg.atendente .wa-hora, .wa.layout-novo .wa-msg.bot .wa-hora,
.wa.layout-novo .wa-msg.atendente > b, .wa.layout-novo .wa-msg.bot > b { color: inherit; opacity: .85; }
.wa.layout-novo .wa-msg.atendente a, .wa.layout-novo .wa-msg.bot a { color: inherit; text-decoration: underline; }
.wa.layout-novo .wa-msg.atendente .wa-citacao, .wa.layout-novo .wa-msg.bot .wa-citacao { background: rgba(255, 255, 255, .16); color: inherit; border-color: rgba(255, 255, 255, .5); }
.wa.layout-novo .wa-evento span { background: var(--hover-sec); color: var(--cor-escura); border-radius: 6px; }
/* Bolha da equipe e do bot na cor clarinha do tema (azul no Padrão, laranja no Linuxbras), com texto escuro: a cor cheia cansava.
   No escuro as variáveis já são escuras; o Dracula segue com a bolha cheia. */
:root:not([data-visual="dracula"]) .wa.layout-novo .wa-msg.atendente, :root:not([data-visual="dracula"]) .wa.layout-novo .wa-msg.bot {
  background: var(--wa-bolha-equipe); color: var(--texto); border: 1px solid var(--wa-bolha-equipe-borda); }
:root:not([data-visual="dracula"]) .wa.layout-novo .wa-msg.atendente > b, :root:not([data-visual="dracula"]) .wa.layout-novo .wa-msg.bot > b { color: var(--cor-escura); opacity: 1; }
:root:not([data-visual="dracula"]) .wa.layout-novo .wa-msg.atendente .wa-hora, :root:not([data-visual="dracula"]) .wa.layout-novo .wa-msg.bot .wa-hora { color: var(--mudo); opacity: 1; }
:root:not([data-visual="dracula"]) .wa.layout-novo .wa-msg.atendente a, :root:not([data-visual="dracula"]) .wa.layout-novo .wa-msg.bot a { color: var(--cor-escura); }
:root:not([data-visual="dracula"]) .wa.layout-novo .wa-msg.atendente .wa-citacao, :root:not([data-visual="dracula"]) .wa.layout-novo .wa-msg.bot .wa-citacao {
  background: rgba(255, 255, 255, .7); border-color: var(--cor); }

/* Painel do contato em linhas, com as notas internas. */
.wa.layout-novo .wa-lateral { padding: 16px 18px; }
.wa-ln-cabeca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--borda); }
.wa-ln-cabeca > strong { flex: 1; min-width: 0; font-weight: 500; font-size: .96rem; overflow: hidden; text-overflow: ellipsis; }
.wa-ln-cabeca .wa-nome { position: relative; }
.wa-ln-cabeca .wa-nome form { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: flex; gap: 6px; padding: 8px; width: 240px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.wa-ln-dados { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px 8px; margin: 16px 0; font-size: .86rem; }
.wa-ln-dados dt { color: var(--mudo); }
.wa-ln-dados dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.wa-ln-dados .bolinha { width: 7px; height: 7px; margin-right: 6px; vertical-align: 1px; }
.wa-ln-titulo { margin: 20px 0 8px; padding-top: 16px; border-top: 1px solid var(--borda); font-size: .86rem; font-weight: 500; color: var(--texto-2); }
.wa-ln-nota { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie-2); }
.wa-ln-nota textarea { border: 0; background: none; resize: vertical; min-height: 44px; padding: 0; font-size: .86rem; outline: none; }
.wa-ln-nota .btn-mini { align-self: flex-end; }
.wa-ln-item { padding: 14px 0 0; }
.wa-ln-quem { display: flex; align-items: center; gap: 8px; }
.wa-ln-quem strong { font-weight: 500; font-size: .84rem; }
.wa-ln-quem small { margin-left: auto; color: var(--mudo); font-size: .74rem; }
.wa-ln-item p { margin: 6px 0 0; font-size: .86rem; color: var(--texto-2); white-space: pre-line; }
.wa-ln-vazio { font-size: .82rem; margin: 10px 0 0; }
.wa-ln-caminho { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--borda); font-size: .84rem; }
.wa-ln-caminho summary { cursor: pointer; color: var(--texto-2); font-weight: 500; }
.wa-ln-caminho summary small { color: var(--mudo); font-weight: 400; }

/* Notebook: a lista fica mais estreita; celular: a lista ocupa a largura toda. */
@media (max-width: 1366px) { .wa-lista-dentro { width: 320px; } .wa.layout-novo.com-conversa { grid-template-columns: auto minmax(0, 1fr) 290px; } }
@media (max-width: 860px) {
  /* v1.62.7: todas as variantes do layout novo; a :not(.com-conversa) é mais específica e deixava a lista numa coluna auto, estreita. */
  .wa.layout-novo, .wa.layout-novo:not(.com-conversa), .wa.layout-novo.com-conversa, .wa.layout-novo.sem-lateral,
  .wa.layout-novo.com-tel, .wa.layout-novo.com-tel.com-conversa, .wa.layout-novo.com-tel.sem-lateral { grid-template-columns: minmax(0, 1fr); }
  .wa-lista-dentro { width: 100%; }
}
/* v1.55.1: a Lexend do tema Linuxbras é mais larga; o título "Conversas" cortava ao lado do ☰ e do Nova conversa. */
:root[data-visual="linuxbras"] .wa-lista-topo h1 { font-size: 1.2rem; flex: 0 1 auto; min-width: 0; }
:root[data-visual="linuxbras"] .wa-lista-topo .wa-nova summary { padding: 0 10px; font-size: .8rem; }
.wa.layout-novo .wa-lista-topo { gap: 4px; }
/* v1.57.0 (layout novo) e v1.57.2 (todos): abas em cima da lista em pílula (PNG botao-no chat): contorno arredondado,
   a escolhida em cinza, número num selo cinza e o nome corta com "…" quando não cabe. */
.wa .wa-abas { display: flex; gap: 1px; margin: 2px 14px 10px; padding: 3px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 999px; }
.wa .wa-aba { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 6px; gap: 4px; border-radius: 999px; font-size: .8rem; font-weight: 400; color: var(--texto-2); box-shadow: none; }
.wa .wa-aba:hover { background: var(--superficie-2); color: var(--texto); box-shadow: none; }
.wa .wa-aba.ativo, .wa .wa-aba.ativo:hover { flex-shrink: 0; background: var(--tag-neutro); color: var(--texto); font-weight: 500; box-shadow: none; }
.wa .wa-aba-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa .wa-aba .wa-qtd { flex: none; min-width: 17px; margin: 0; padding: 1px 5px; border-radius: 999px; background: var(--tag-neutro); color: var(--texto-2); font-size: .7rem; font-weight: 600; text-align: center; }
.wa .wa-aba.ativo .wa-qtd { background: var(--borda); color: var(--texto); }
.wa .wa-aba.forte .wa-qtd { color: var(--aviso); }
:root[data-visual="linuxbras"] .wa .wa-aba { border-radius: 999px; }
/* v1.57.3 (layout novo) e v1.57.4 (todos): cada conversa da lista vira um cartão arredondado, como no mockup da segunda interface;
   sem a linha entre elas, a escolhida com fundo claro e a barrinha da cor de destaque. */
.wa #wa-lista { padding: 4px 8px 8px; }
.wa .wa-item { margin-bottom: 2px; padding: 11px 12px; border: 0; border-radius: 12px; box-shadow: none; }
.wa .wa-item:hover { background: var(--superficie-2); }
.wa .wa-item.ativo { background: var(--hover-sec); box-shadow: inset 3px 0 0 var(--cor); }
:root[data-visual="linuxbras"] .wa .wa-item.ativo { background: #fff6f1; }
/* v1.58.0: Configurações › Atendimento › Tags (botão +, nome e cor em bolinhas, editar na linha). */
.tag-mais { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.tag-cores { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; padding: 0; border: 0; }
.tag-cores legend { padding: 0; margin-bottom: 6px; font-size: .9rem; }
.tag-cor { display: inline-flex; margin: 0; cursor: pointer; }
.tag-cor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tag-cor .bolinha { width: 22px; height: 22px; margin: 0; box-shadow: 0 0 0 2px var(--cartao), 0 0 0 3px transparent; }
.tag-cor input:checked + .bolinha { box-shadow: 0 0 0 2px var(--cartao), 0 0 0 4px var(--texto); }
.tag-cor input:focus-visible + .bolinha { outline: 2px solid var(--cor); outline-offset: 4px; }
.tag-lista { padding: 6px 16px; }
.tag-linha { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.tag-linha:last-child { border-bottom: 0; }
.tag-linha > .tag { margin-top: 3px; }
.tag-acoes { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tag-editar summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.tag-editar summary::-webkit-details-marker { display: none; }
.tag-editar[open] { flex-basis: 100%; }
.tag-editar .tag-form { margin-top: 10px; min-width: 260px; }
/* v1.59.0: ícone de tag no cabeçalho da conversa (marca as tags do contato) e as etiquetas embaixo do nome e na lista. */
.wa-tag-menu { position: relative; }
.wa-tag-menu summary { list-style: none; cursor: pointer; }
.wa-tag-menu summary::-webkit-details-marker { display: none; }
.wa-tag-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0 9px; }
.wa-tag-qtd { font-size: .72rem; font-weight: 600; }
.wa-tag-caixa { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; width: 220px; max-height: 320px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.wa-tag-opcao { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 0; padding: 6px 8px; border: 0; border-radius: 6px; background: none; font: inherit; cursor: pointer; text-align: left; }
.wa-tag-opcao:hover { background: var(--hover); }
.wa-conv-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.wa-conv-tags .tag, .wa-item-tag { padding: 1px 7px; font-size: .7rem; font-weight: 500; }
.wa-tag-check { display: inline-flex; color: var(--cor); visibility: hidden; }
.wa-tag-opcao.marcada .wa-tag-check { visibility: visible; }
.wa-tag-opcao:disabled { opacity: .6; cursor: progress; }
/* v1.61.0: Participantes no painel do contato (acima das notas) e a janela para escolher a pessoa. */
.wa-part { display: flex; flex-direction: column; gap: 4px; }
.wa-part-item { display: flex; align-items: center; gap: 4px; padding: 3px 0; font-size: .86rem; }
.wa-part-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-part-tirar { display: inline-flex; padding: 4px; border: 0; border-radius: 6px; background: none; color: var(--mudo); cursor: pointer; }
.wa-part-tirar:hover { background: var(--hover); color: var(--erro); }
.wa-part-add { align-self: flex-start; margin-top: 4px; }
.wa-part-janela { width: min(380px, calc(100vw - 32px)); max-height: min(520px, calc(100vh - 64px)); padding: 16px; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--cartao); color: var(--texto); box-shadow: 0 16px 40px rgba(0,0,0,.22); }
.wa-part-janela[open] { display: flex; flex-direction: column; gap: 10px; }
.wa-part-janela::backdrop { background: rgba(15, 23, 32, .35); }
.wa-part-topo { display: flex; align-items: center; justify-content: space-between; }
.wa-part-topo h3 { margin: 0; font-size: 1rem; font-weight: 500; }
.wa-part-fechar { display: inline-flex; padding: 6px; border: 0; border-radius: 6px; background: none; color: var(--mudo); cursor: pointer; }
.wa-part-fechar:hover { background: var(--hover); color: var(--texto); }
.wa-part-busca { margin: 0; }
.wa-part-lista { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.wa-part-lista form { margin: 0; }
.wa-part-opcao { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.wa-part-opcao:hover, .wa-part-opcao:focus-visible { background: var(--hover); }
/* v1.62.0: botões "embutidos" (mockup botões embutidos): o mesmo nome de antes, sem contorno e sem fundo, como parte da tela;
   o cinza claro aparece ao passar o mouse. Assumir fica em verde claro; Enviar continua cheio. */
#wa-lateral .btn-p.sec, #wa-lateral .btn-mini, .wa-btn-embutido {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border: 1px solid transparent; border-radius: 8px;
  background: none; color: var(--texto-2); font: inherit; font-size: .86rem; font-weight: 500; cursor: pointer; box-shadow: none; }
#wa-lateral .btn-p.sec:hover, #wa-lateral .btn-mini:hover, .wa-btn-embutido:hover { background: var(--hover); border-color: transparent; color: var(--texto); }
/* v1.62.2: no topo da conversa os botões voltam com contorno, só mais suaves e arredondados. */
.wa-conv-acoes .btn-p { height: 32px; padding: 0 12px; border-radius: 8px; font-weight: 500; box-shadow: none; }
.wa-conv-acoes .btn-p.sec { background: var(--cartao); border-color: var(--borda); color: var(--texto-2); }
.wa-conv-acoes .btn-p.sec:hover, .wa-conv-acoes details[open] > summary.btn-p.sec { background: var(--superficie-2); border-color: var(--borda); color: var(--texto); }
.wa-conv-acoes .btn-p.sec.wa-btn-encerrar:hover { background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro); }
#wa-lateral .btn-p.sec, #wa-lateral .btn-mini, .wa-btn-embutido { height: 30px; padding: 0 9px; font-size: .8rem; }
.wa-btn-embutido.wa-cor { color: var(--cor); }
.wa-btn-embutido.wa-cor:hover { color: var(--cor-escura); }
.wa-ln-titulo-acao { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wa-ln-titulo-acao .wa-btn-embutido { flex: none; margin: -6px -9px -6px 0; white-space: nowrap; }
.wa-ln-nota .wa-btn-embutido { align-self: flex-end; margin: -4px -4px -4px 0; }
/* v1.62.6: Transferir ganha um azul clarinho ao passar o mouse (Assumir é verde, Encerrar vermelho no mouse). */
.wa-conv-acoes .wa-transferir > summary.btn-p.sec:hover, .wa-conv-acoes .wa-transferir[open] > summary.btn-p.sec {
  background: var(--hover-sec); border-color: color-mix(in srgb, var(--cor) 35%, var(--borda)); color: var(--cor-escura); }

/* 1.62.8: sininho das notificações na barra do topo do celular (verde = recebe, riscado = desligado). */
.push-sino { display: none; }
@media (max-width: 860px) {
  .push-sino:not([hidden]) { position: relative; display: inline-grid; place-items: center; width: 36px; height: 34px; margin-left: auto; margin-right: 8px;
    border: 0; border-radius: 8px; background: none; color: var(--trilho-texto, inherit); cursor: pointer; }
  .push-sino:active { background: var(--trilho-borda); }
  .push-sino svg { width: 19px; height: 19px; }
  .push-sino-off { display: none; }
  .push-sino:not([data-estado="ativo"]) .push-sino-on { display: none; }
  .push-sino:not([data-estado="ativo"]) .push-sino-off { display: inline-flex; opacity: .75; }
  .push-sino-ponto { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--trilho-topo, #fff); display: none; }
  .push-sino[data-estado="ativo"] .push-sino-ponto { display: block; background: #1f9d55; }
  .push-sino[data-estado="bloqueado"] .push-sino-ponto, .push-sino[data-estado="instalar"] .push-sino-ponto { display: block; background: #e0a100; }
}

/* Citação clicável: leva até a mensagem citada, que pisca */
a.wa-citacao { display: block; color: inherit; text-decoration: none; cursor: pointer; }
a.wa-citacao:hover { filter: brightness(.95); }
a.wa-citacao.wa-citacao-longe { cursor: default; opacity: .8; }
@keyframes wa-piscar { 0%, 60% { box-shadow: 0 0 0 3px var(--cor); } 100% { box-shadow: 0 0 0 3px transparent; } }
.wa-msg.wa-destaque { animation: wa-piscar 1.6s ease-out; }

/* ===================== Temas Verde e Marinho (v1.66.0, canvas dos modelos mode1/mod2): sempre claros, Figtree ===================== */
/* Verde (modelo 1): menu verde-escuro com os nomes (aberto por padrão), pílulas, equipe em verde cheio. */
.tema-verde { background: linear-gradient(90deg, #0f3d36 50%, #45c4a6 50%); }
.tema-marinho { background: linear-gradient(90deg, #0c2a5c 50%, #2f80f6 50%); }
:root[data-visual="verde"] {
  color-scheme: light;
  --cor: #136b5f; --cor-escura: #0f3d36; --sobre-cor: #ffffff;
  --texto: #10302b; --texto-2: #2d4a44; --mudo: #557069; --borda: #e1eae8;
  --fundo: #f4f7f6; --cartao: #ffffff; --campo: #ffffff; --superficie-2: #f6faf9; --linha-par: #fafcfb;
  --hover: #f1f7f5; --hover-sec: #e3f1ee; --topo: #0f3d36;
  --tag-neutro: #edf2f1; --tag-tipo: #e3f1ee; --tag-tipo-texto: #0f3d36; --destaque-sombra: rgba(19, 107, 95, .12);
  --ok: #136b5f; --ok-fundo: #e3f1ee; --ok-borda: #b8dcd3;
  --trilho: #0f3d36; --trilho-texto: #e6f2ef; --trilho-mudo: #a9cfc6; --trilho-forte: #ffffff; --trilho-hover: rgba(255, 255, 255, .07);
  --trilho-ativo-fundo: #1d5a50; --trilho-ativo-texto: #ffffff; --trilho-borda: rgba(255, 255, 255, .1); --trilho-topo: transparent;
  --trilho-avatar-fundo: #45c4a6; --trilho-avatar-texto: #0f3d36;
  --wa-verde: #136b5f; --wa-fundo-chat: #f4f7f6;
  --wa-bolha-cliente: #ffffff; --wa-bolha-cliente-borda: #e1eae8;
  --wa-bolha-equipe: #136b5f; --wa-bolha-equipe-borda: #136b5f; --wa-bolha-bot: #ffffff;
  --wa-avatar: #dcebe8; --wa-avatar-texto: #0f3d36;
}
/* Marinho (modelo 2): trilho azul-marinho só com ícones, equipe em azul cheio, IA e bot em azul claro. */
:root[data-visual="marinho"] {
  color-scheme: light;
  --cor: #1f5fd6; --cor-escura: #0c2a5c; --sobre-cor: #ffffff;
  --texto: #0c2a5c; --texto-2: #2a4268; --mudo: #4a5f80; --borda: #dde5f0;
  --fundo: #edf2fa; --cartao: #ffffff; --campo: #ffffff; --superficie-2: #f5f8fc; --linha-par: #f8fafd;
  --hover: #f2f6fc; --hover-sec: #e3ebf8; --topo: #0c2a5c;
  --tag-neutro: #eef2f8; --tag-tipo: #e3ebf8; --tag-tipo-texto: #1f5fd6; --destaque-sombra: rgba(31, 95, 214, .12);
  --ok: #17663a; --ok-fundo: #e3f6e8; --ok-borda: #b5e2c3;
  --erro: #c62828; --erro-fundo: #fdecea; --erro-borda: #f3c0bd;
  --trilho: #0c2a5c; --trilho-texto: #c9d6ee; --trilho-mudo: #8fa3c9; --trilho-forte: #ffffff; --trilho-hover: rgba(255, 255, 255, .07);
  --trilho-ativo-fundo: #1e4a90; --trilho-ativo-texto: #ffffff; --trilho-borda: rgba(255, 255, 255, .1); --trilho-topo: transparent;
  --trilho-avatar-fundo: #2f80f6; --trilho-avatar-texto: #ffffff;
  --wa-verde: #1e8a4a; --wa-fundo-chat: #edf2fa;
  --wa-bolha-cliente: #ffffff; --wa-bolha-cliente-borda: #dde5f0;
  --wa-bolha-equipe: #1f5fd6; --wa-bolha-equipe-borda: #1f5fd6; --wa-bolha-bot: #e3ebf8;
  --wa-avatar: #e3ebf8; --wa-avatar-texto: #0c2a5c;
}
:root:is([data-visual="verde"], [data-visual="marinho"]) body { font-family: "Figtree", system-ui, sans-serif; }
:root:is([data-visual="verde"], [data-visual="marinho"]) :is(strong, h1, h2, h3) { font-weight: 600; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .trilho-logo.letra { border-radius: 10px; font-weight: 800; }
:root[data-visual="marinho"] .trilho-logo.letra { border-radius: 12px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .trilho-item { border-radius: 10px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .trilho-item.ativo { box-shadow: none; font-weight: 600; }
:root[data-visual="verde"] .trilho-fila { background: #45c4a6; color: #0f3d36; }
:root[data-visual="verde"] .trilho-ponto { background: #45c4a6; }
:root[data-visual="marinho"] .trilho-fila { background: #e5484d; color: #fff; }
:root[data-visual="marinho"] .trilho-ponto { background: #e5484d; }
/* Cantos e campos dos modelos: 10px; pílulas inteiras. */
:root:is([data-visual="verde"], [data-visual="marinho"]) :is(.btn, .btn-mini, .btn-p, .wa-caixa, .wa-enviar, .wa-busca-campo, input, textarea, select) { border-radius: 10px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .cfg-bloco { border-radius: 14px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa .wa-abas { background: none; border: 0; padding: 0; gap: 5px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa .wa-aba { flex: 0 1 auto; height: 34px; padding: 0 10px; gap: 3px; border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); font-size: .84rem; }
/* Como nos modelos: "Minhas 3", o número junto do nome, sem selo. */
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa .wa-aba .wa-qtd { min-width: 0; padding: 0; background: none; color: inherit; font-size: .84rem; font-weight: inherit; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa .wa-aba.ativo,
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa .wa-aba.ativo:hover { background: var(--cor-escura); border-color: var(--cor-escura); color: #fff; font-weight: 600; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa .wa-aba.ativo .wa-qtd { background: none; color: #fff; }
:root:is([data-visual="verde"], [data-visual="marinho"], [data-visual="azul"]) .wa-estado.voce { background: var(--cor); color: #fff; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa .wa-item.ativo { background: var(--hover-sec); box-shadow: none; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa .wa-item { border-radius: 12px; }
/* Balões: cliente branco com contorno; equipe na cor cheia; bot/IA claro com o nome na cor (como nos modelos). */
:root:is([data-visual="verde"], [data-visual="marinho"], [data-visual="azul"]) .wa-msg { border-radius: 14px; box-shadow: none; }
:root:is([data-visual="verde"], [data-visual="marinho"], [data-visual="azul"]) .wa.layout-novo .wa-msg.cliente,
:root:is([data-visual="verde"], [data-visual="marinho"], [data-visual="azul"]) .wa-msg.cliente { background: var(--wa-bolha-cliente); border: 1px solid var(--wa-bolha-cliente-borda); }
:root:is([data-visual="verde"], [data-visual="marinho"], [data-visual="azul"]) .wa.layout-novo .wa-msg.atendente,
:root:is([data-visual="verde"], [data-visual="marinho"], [data-visual="azul"]) .wa-msg.atendente { background: var(--wa-bolha-equipe); color: #fff; border: 1px solid var(--wa-bolha-equipe); }
:root:is([data-visual="verde"], [data-visual="marinho"], [data-visual="azul"]) .wa.layout-novo .wa-msg.atendente > b,
:root:is([data-visual="verde"], [data-visual="marinho"], [data-visual="azul"]) .wa.layout-novo .wa-msg.atendente .wa-hora { color: rgba(255, 255, 255, .82); opacity: 1; }
:root:is([data-visual="verde"], [data-visual="marinho"], [data-visual="azul"]) .wa.layout-novo .wa-msg.atendente a { color: #fff; }
:root:is([data-visual="verde"], [data-visual="marinho"], [data-visual="azul"]) .wa.layout-novo .wa-msg.atendente .wa-citacao { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .6); color: #fff; }
:root:is([data-visual="verde"], [data-visual="marinho"], [data-visual="azul"]) .wa.layout-novo .wa-msg.bot,
:root:is([data-visual="verde"], [data-visual="marinho"], [data-visual="azul"]) .wa-msg.bot { background: var(--wa-bolha-bot); color: var(--texto); border: 1px solid var(--wa-bolha-cliente-borda); }
:root:is([data-visual="marinho"], [data-visual="azul"]) .wa.layout-novo .wa-msg.bot, :root:is([data-visual="marinho"], [data-visual="azul"]) .wa-msg.bot { border-color: var(--wa-bolha-bot); }
:root:is([data-visual="verde"], [data-visual="marinho"], [data-visual="azul"]) .wa.layout-novo .wa-msg.bot > b { color: var(--cor); opacity: 1; }
:root:is([data-visual="verde"], [data-visual="marinho"], [data-visual="azul"]) .wa.layout-novo .wa-msg.bot .wa-hora { color: var(--mudo); opacity: 1; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa.layout-novo .wa-evento span { background: none; color: var(--mudo); }
:root[data-visual="marinho"] .wa.layout-novo .wa-evento span { background: var(--hover-sec); color: var(--texto-2); border-radius: 12px; padding: 3px 10px; }
/* Botões da conversa: Encerrar cheio (verde no modelo 1, azul-marinho no modelo 2). */
:root:is([data-visual="verde"], [data-visual="marinho"]) .btn-p { padding: 0 12px; font-weight: 600; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .btn-p.sec { background: var(--cartao); color: var(--texto); border-color: var(--borda); }
:root:is([data-visual="verde"], [data-visual="marinho"]) .btn-p.sec:hover { border-color: var(--cor); color: var(--cor); }
:root[data-visual="verde"] .wa-btn-encerrar.btn-p.sec { background: #136b5f; border-color: #136b5f; color: #fff; }
:root[data-visual="marinho"] .wa-btn-encerrar.btn-p.sec { background: #0c2a5c; border-color: #0c2a5c; color: #fff; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-btn-encerrar.btn-p.sec:hover { filter: brightness(1.12); color: #fff; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-enviar { background: var(--cor-escura); border-color: var(--cor-escura); }

/* ---------- v1.66.1: o DESENHO dos modelos (não só a cor): tamanhos, menu, lista, cabeçalho, balões, caixa e telefone ---------- */
/* Comum aos dois: tipografia maior e campos/botões de 44px como nos PNGs. */
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-col-lista { background: var(--cartao); }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-lista-topo { padding: 22px 16px 8px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-lista-topo h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-busca { padding: 4px 16px 0; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-busca-campo { height: 46px; padding: 0 14px; border-radius: 10px; background: var(--superficie-2); }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-busca-campo input { font-size: .95rem; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa .wa-abas { margin: 12px 16px 12px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa #wa-lista { padding: 0 12px 12px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa .wa-item { padding: 12px 14px; gap: 12px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-item .wa-avatar { width: 44px; height: 44px; font-size: .95rem; font-weight: 700; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-item.ativo .wa-avatar { background: var(--cor); color: #fff; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-item-topo strong { font-size: .95rem; font-weight: 600; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-previa { font-size: .88rem; }
/* Cabeçalho da conversa: nome grande, linha de baixo, botões de texto com 44px (Ligar · Transferir · Encerrar). */
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-conv-topo { min-height: 84px; padding: 14px 28px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-conv-topo > .wa-avatar { display: none; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-conv-quem strong { font-size: 1.25rem; font-weight: 700; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-conv-info { font-size: .85rem; color: var(--mudo); }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-conv-acoes { gap: 8px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-conv-acoes .btn-p { height: 44px; padding: 0 16px; font-size: .95rem; font-weight: 500; border-radius: 10px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-conv-acoes .btn-p:not(.wa-tag-btn) > svg { display: none; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-conv-acoes .wa-tag-btn { width: 44px; padding: 0; justify-content: center; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-conv-acoes .wa-btn-encerrar { font-weight: 600; }
/* Conversa: mais respiro, balões de 15px com cantos de 14px. */
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-msgs { padding: 26px 28px; gap: 14px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa.layout-novo .wa-msg { max-width: min(640px, 62%); padding: 12px 16px 8px; font-size: .95rem; line-height: 1.45; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa.layout-novo .wa-msg > b { font-size: .8rem; font-weight: 600; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa.layout-novo .wa-msg .wa-autor-av { display: none; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa.layout-novo .wa-msg .wa-hora { font-family: inherit; font-size: .72rem; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-evento::before, :root:is([data-visual="verde"], [data-visual="marinho"]) .wa-evento::after { display: none; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-evento { font-size: .82rem; }
/* Caixa de mensagem: rótulo em cima, campo de 46px, Enviar grande e escuro ao lado. */
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-escrever { padding: 14px 28px 18px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-modo { margin-bottom: 8px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-modo label { font-size: .82rem; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-caixa { border-radius: 10px; padding: 6px 8px 6px 12px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-escrever textarea { font-size: .95rem; padding: 8px 2px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-enviar { height: 44px; padding: 0 22px; border-radius: 10px; font-size: .95rem; font-weight: 600; background: var(--cor-escura); }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-enviar svg { display: none; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-dica { display: none; }
/* Painel do contato: cabeça centralizada com avatar grande, como o painel do paciente/cliente dos modelos. */
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa.layout-novo .wa-lateral { padding: 24px; background: var(--cartao); }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-ln-cabeca { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-bottom: 18px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-ln-cabeca > .wa-avatar { width: 80px; height: 80px; font-size: 1.7rem; font-weight: 700; background: var(--cor); color: #fff; }
:root[data-visual="marinho"] .wa-ln-cabeca > .wa-avatar { background: var(--hover-sec); color: var(--cor-escura); box-shadow: 0 0 0 4px #c7d8f6; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-ln-cabeca > strong { flex: none; font-size: 1.25rem; font-weight: 700; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-ln-titulo { font-size: .92rem; font-weight: 600; color: var(--texto); }

/* Modelo 1 (Verde): menu largo com os nomes e SEM ícones, itens de 44px, setores com o número à direita. */
:root[data-visual="verde"][data-trilho="aberto"] .trilho { flex-basis: 248px; width: 248px; padding: 22px 18px; }
:root[data-visual="verde"][data-trilho="aberto"] .trilho-topo { margin: -22px -18px 18px; padding: 22px 18px 0; border-bottom: 0; }
:root[data-visual="verde"] .trilho-logo { width: 40px; height: 40px; border-radius: 10px; }
:root[data-visual="verde"] .trilho-nome { font-size: 1.15rem; font-weight: 700; }
:root[data-visual="verde"][data-trilho="aberto"] .trilho-nav { gap: 4px; }
:root[data-visual="verde"][data-trilho="aberto"] .trilho-item { height: 44px; padding: 0 14px; font-size: .95rem; }
:root[data-visual="verde"][data-trilho="aberto"] .trilho-nav > .trilho-item:not(.trilho-pessoa) > svg,
:root[data-visual="verde"][data-trilho="aberto"] .trilho-quadro { display: none; }
:root[data-visual="verde"][data-trilho="aberto"] .trilho-grupo { height: 36px; }
:root[data-visual="verde"][data-trilho="aberto"] .trilho-qtd { font-size: .95rem; color: var(--trilho-texto); }
:root[data-visual="verde"] .trilho-titulo { margin: 24px 14px 6px; font-size: .7rem; letter-spacing: .12em; }
:root[data-visual="verde"] .trilho-titulo-1 { display: none; }
:root[data-visual="verde"] .wa-lista-dentro { width: 340px; }
:root[data-visual="verde"] .wa-busca::before { content: "Buscar"; display: block; margin: 0 0 6px; font-size: .8rem; color: var(--mudo); }
:root[data-visual="verde"] .wa-busca-campo > svg { display: none; }

/* Modelo 2 (Marinho): trilho de 88px, ícones de 22px em quadrados de 48px, logo quadrado azul. */
:root[data-visual="marinho"]:not([data-trilho="aberto"]) .trilho { flex-basis: 88px; width: 88px; padding: 20px 0; }
:root[data-visual="marinho"]:not([data-trilho="aberto"]) .trilho-topo { margin: -20px 0 18px; padding: 20px 0 0; justify-content: center; border-bottom: 0; }
:root[data-visual="marinho"] .trilho-logo { width: 48px; height: 48px; border-radius: 12px; }
:root[data-visual="marinho"] .trilho-logo.letra { font-size: 17px; }
:root[data-visual="marinho"]:not([data-trilho="aberto"]) :is(.trilho-nav, .trilho-rodape) { align-items: center; gap: 10px; }
:root[data-visual="marinho"]:not([data-trilho="aberto"]) .trilho-item { width: 48px; height: 48px; border-radius: 12px; }
:root[data-visual="marinho"]:not([data-trilho="aberto"]) .trilho-item > svg { width: 22px; height: 22px; }
:root[data-visual="marinho"]:not([data-trilho="aberto"]) .trilho-nav > .trilho-titulo { width: 40px; margin: 6px auto; }
:root[data-visual="marinho"] .trilho-ponto { top: 6px; right: 6px; width: 9px; height: 9px; }
:root[data-visual="marinho"] .wa-lista-dentro { width: 320px; }
:root[data-visual="marinho"] .wa-lista-topo h1 { font-size: 1.4rem; font-weight: 800; }
:root[data-visual="marinho"] .wa-conv-quem strong { font-size: 1.12rem; }
:root[data-visual="marinho"] .wa.layout-novo .wa-msg { border-radius: 12px; }
:root[data-visual="marinho"] .wa.layout-novo .wa-msg.atendente { border-radius: 12px; }
:root[data-visual="marinho"] .wa.layout-novo .wa-evento span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: .82rem; }

/* Telefone (painel do lado) nos dois: o Discador do modelo 2 — nome grande, tempo grande, ações em grade 3×2, Desligar vermelho. */
:root:is([data-visual="verde"], [data-visual="marinho"]) body.tel { font-family: "Figtree", system-ui, sans-serif; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-lado { background: var(--cartao); }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-topo { padding: 22px 24px 10px; border-bottom: 0; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-topo strong { font-size: 1.05rem; font-weight: 700; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-topo > svg { display: none; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-chip { font-size: .8rem; font-weight: 700; border: 0; padding: 3px 10px; background: var(--tag-neutro); }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-chip::before { content: ''; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-chip[data-estado="registrado"] { color: #fff; background: #22c55e; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-corpo { padding: 14px 24px; gap: 16px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-numero { height: 48px; border-radius: 12px; font-size: 1.15rem; font-weight: 700; color: var(--cor); }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-numero::placeholder { font: 500 .95rem "Figtree", system-ui, sans-serif; color: var(--mudo); }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-teclado { gap: 10px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-teclado button { height: 58px; border-radius: 12px; font-size: 1.35rem; font-weight: 600; }
:root:is([data-visual="verde"], [data-visual="marinho"]) :is(.tel-ligar, .tel-atender, .tel-desligar, .tel-recusar) { height: 56px; border-radius: 12px; font-size: 1.05rem; font-weight: 700; }
:root[data-visual="marinho"] .tel-desligar { background: #c62828; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-cartao { border: 0; background: none; padding: 6px 0; gap: 6px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-cartao strong { font-size: 1.45rem; font-weight: 800; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-cartao small { font-size: .9rem; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-tempo { font-size: 2.2rem; font-weight: 700; color: var(--cor); letter-spacing: .04em; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-acoes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-acoes button { height: 76px; border-radius: 12px; background: var(--superficie-2); color: var(--texto); font-size: .85rem; font-weight: 500; gap: 8px; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .tel-rodape { padding: 12px 24px; text-align: center; border-top: 0; font-size: .8rem; }
:root:is([data-visual="verde"], [data-visual="marinho"]) .wa-conv-info { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Azul (v1.67.0; 1.67.1 = o azul-marinho do tema Marinho): o Padrão com o menu lateral azul; no escuro o menu volta ao azul-noite do Padrão. */
:root[data-visual="azul"] {
  --trilho: #0c2a5c; --trilho-texto: #c9d6ee; --trilho-mudo: #8fa3c9; --trilho-forte: #ffffff; --trilho-hover: rgba(255, 255, 255, .07);
  --trilho-ativo-fundo: #1e4a90; --trilho-ativo-texto: #ffffff; --trilho-borda: rgba(255, 255, 255, .1); --trilho-topo: transparent;
  --trilho-avatar-fundo: #2f80f6; --trilho-avatar-texto: #ffffff;
  /* 1.69.0: balões como os do Marinho (equipe azul cheio, bot azul claro, cliente branco); 1.69.3: azul da equipe mais claro (#4a8af0). */
  --wa-bolha-cliente: #ffffff; --wa-bolha-cliente-borda: #dde5f0; --wa-bolha-equipe: #4a8af0; --wa-bolha-equipe-borda: #4a8af0; --wa-bolha-bot: #e3ebf8;
}
@media (prefers-color-scheme: dark) {
  :root[data-visual="azul"]:not([data-tema="claro"]) { --trilho: #111c2b; --trilho-texto: #c9d3e3; --trilho-mudo: #8fa0ba; --trilho-hover: rgba(255, 255, 255, .08);
    --trilho-ativo-fundo: rgba(255, 255, 255, .15); --trilho-borda: rgba(255, 255, 255, .12); --trilho-avatar-fundo: #dce4f0; --trilho-avatar-texto: #111c2b;
    --wa-bolha-cliente: #1a222d; --wa-bolha-cliente-borda: #2b3644; --wa-bolha-equipe: #1c2c44; --wa-bolha-equipe-borda: #2a3d5a; --wa-bolha-bot: #1b232e; }
}
:root[data-visual="azul"][data-tema="escuro"] { --trilho: #111c2b; --trilho-texto: #c9d3e3; --trilho-mudo: #8fa0ba; --trilho-hover: rgba(255, 255, 255, .08);
  --trilho-ativo-fundo: rgba(255, 255, 255, .15); --trilho-borda: rgba(255, 255, 255, .12); --trilho-avatar-fundo: #dce4f0; --trilho-avatar-texto: #111c2b;
    --wa-bolha-cliente: #1a222d; --wa-bolha-cliente-borda: #2b3644; --wa-bolha-equipe: #1c2c44; --wa-bolha-equipe-borda: #2a3d5a; --wa-bolha-bot: #1b232e; }
.tema-azul { background: linear-gradient(90deg, #0c2a5c 50%, #f6f7f9 50%); }

/* Painel do contato mais limpo (1.68.0, modelo dos PNGs): cabeça centralizada com avatar grande e o número embaixo do nome,
   seções separadas só por espaço (sem traços) e os dados em linhas rótulo · valor com um traço bem claro. */
.wa.layout-novo .wa-lateral { padding: 22px 20px; }
.wa-ln-cabeca { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding-bottom: 6px; border-bottom: 0; }
.wa-ln-cabeca > .wa-avatar { width: 72px; height: 72px; margin-bottom: 6px; font-size: 1.5rem; font-weight: 600; }
.wa-ln-cabeca > strong { flex: none; max-width: 100%; font-size: 1.1rem; font-weight: 600; }
.wa-ln-fone { color: var(--mudo); font-size: .84rem; }
.wa-ln-acoes { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; }
.wa-ln-acoes .wa-lat-ligar.mini { margin: 0; }
.wa-ln-acoes .wa-nome { margin: 0; }
.wa-ln-cabeca .wa-nome form { right: auto; left: 50%; transform: translateX(-50%); }
.wa-ln-dados { grid-template-columns: auto minmax(0, 1fr); gap: 0; margin: 18px 0 4px; }
.wa-ln-dados :is(dt, dd) { padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--borda) 55%, transparent); }
.wa-ln-dados dd { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-left: 12px; text-align: right; }
.wa-ln-dados :is(dt:last-of-type, dd:last-of-type) { border-bottom: 0; }
.wa-ln-dados .bolinha { margin-right: 0; }
.wa-ln-titulo, :root:is([data-visual="verde"], [data-visual="marinho"]) .wa-ln-titulo { margin: 22px 0 10px; padding-top: 0; border-top: 0; font-size: .9rem; font-weight: 600; color: var(--texto); }
.wa-ln-caminho { margin-top: 24px; padding-top: 0; border-top: 0; }

/* v1.70.0: Transferir numa janela no centro da tela (setor → pessoa), com fundo escuro; clicar fora fecha. */
.wa-transf-janela { width: min(420px, calc(100vw - 32px)); max-height: min(600px, calc(100vh - 48px)); padding: 16px 18px; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--cartao); color: var(--texto); box-shadow: 0 16px 40px rgba(0,0,0,.22); }
.wa-transf-janela[open] { display: flex; flex-direction: column; gap: 8px; }
.wa-transf-janela::backdrop { background: rgba(15, 23, 32, .35); }
.wa-transf-janela .wa-part-topo h3 { margin: 0; font-size: 1rem; font-weight: 500; }
.wa-transf-janela .wa-transf-caixa { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; }
.wa-transf-janela .wa-transf-pessoas { max-height: 260px; }
/* v1.70.4: setores em lista; a bolinha de escolher tem a cor do grupo. */
/* v1.70.6: o setor é um menu: fechado mostra o escolhido com a bolinha da cor; aberto, a lista com as bolinhas. */
.wa-transf-escolha { --c: transparent; display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; margin: 0;
  border: 1px solid var(--borda); border-radius: 8px; background: var(--campo, var(--cartao)); color: var(--texto); font: inherit; font-size: .86rem; cursor: pointer; text-align: left; }
.wa-transf-escolha:hover { border-color: var(--cor); }
.wa-transf-escolha > span[data-transf-escolhido] { flex: 1; }
.wa-transf-escolha:not(.escolhido) > span[data-transf-escolhido] { color: var(--mudo); }
.wa-transf-bola { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--borda); }
.wa-transf-escolha.escolhido .wa-transf-bola { background: var(--c); border-color: var(--c); }
.wa-transf-seta { color: var(--mudo); transition: transform .15s; }
.wa-transf-escolha[aria-expanded="true"] .wa-transf-seta { transform: rotate(180deg); }
/* v1.70.9: a lista dos setores desce por cima (menu suspenso), sem aumentar a janela. */
.wa-transf-janela, .wa-transf-janela .wa-transf-caixa { overflow: visible; }
.wa-transf-menu-setor { position: relative; }
.wa-transf-menu-setor .wa-transf-suspenso { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10; max-height: 240px;
  background: var(--cartao); box-shadow: 0 10px 24px rgba(0,0,0,.16); transition: opacity .18s ease, transform .18s ease, visibility 0s; }
.wa-transf-escolha[aria-expanded="false"] + .wa-transf-suspenso { opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility 0s .15s; }
.wa-transf-escolha.cor-azul { --c: #2a78d6; } .wa-transf-escolha.cor-verde { --c: #1e9b55; } .wa-transf-escolha.cor-amarelo { --c: #d9a400; }
.wa-transf-escolha.cor-laranja { --c: #eb6834; } .wa-transf-escolha.cor-vermelho { --c: #d63a2f; } .wa-transf-escolha.cor-roxo { --c: #8a55d6; } .wa-transf-escolha.cor-cinza { --c: #8994a3; }
.wa-transf-setores { display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: 8px; max-height: 200px; overflow-y: auto; }
.wa-transf-setor { --c: #8994a3; display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; cursor: pointer; font-size: .86rem; }
.wa-transf-setor + .wa-transf-setor { border-top: 1px solid var(--borda); }
.wa-transf-setor:hover { background: var(--hover); }
.wa-transf-setor:has(input:checked) { background: var(--hover-sec); }
.wa-transf-setor strong { flex: 1; font-weight: 500; }
.wa-transf-setor small { color: var(--mudo); font-size: .74rem; }
.wa-transf-janela .wa-transf-setor input { appearance: none; -webkit-appearance: none; flex: 0 0 16px; width: 16px; min-width: 0; height: 16px; min-height: 0; padding: 0; margin: 0; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--c); background: transparent; cursor: pointer; }
.wa-transf-janela .wa-transf-setor input:checked { background: var(--c); box-shadow: inset 0 0 0 2px var(--cartao); }
.wa-transf-janela .wa-transf-setor input:focus { outline: none; }
.wa-transf-janela .wa-transf-setor input:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.wa-transf-setor.cor-azul { --c: #2a78d6; } .wa-transf-setor.cor-verde { --c: #1e9b55; } .wa-transf-setor.cor-amarelo { --c: #d9a400; }
.wa-transf-setor.cor-laranja { --c: #eb6834; } .wa-transf-setor.cor-vermelho { --c: #d63a2f; } .wa-transf-setor.cor-roxo { --c: #8a55d6; }
.wa-transf-janela .wa-transf-botoes button { display: inline-flex; align-items: center; width: auto; padding: 0 12px; }
.wa-transf-janela .wa-transf-botoes .btn-p:not(.sec) { color: var(--sobre-cor, #fff); }
.wa-transf-janela .wa-transf-botoes .btn-p.sec { color: var(--texto-2); }
/* v1.70.11: "Para quem" também é menu suspenso, igual ao do setor. */
.wa-transf-lista-pessoas { border: 1px solid var(--borda); border-radius: 8px; overflow-y: auto; }
.wa-transf-lista-pessoas .wa-transf-pessoas { max-height: none; border: 0; border-radius: 0; }
.wa-transf-escolha:disabled { cursor: default; opacity: .6; border-color: var(--borda); }

/* ===================== Grafite (v1.71.0, modelo chat-new1000): barra grafite com filete laranja, menu branco, Nunito Sans ===================== */
.tema-grafite { background: linear-gradient(90deg, #363636 50%, #f08a24 50%); }
.tema-enterprise { background: linear-gradient(90deg, #363636 50%, #2c4fd7 50%); }
:root[data-visual="grafite"] {
  color-scheme: light;
  --g-topo: #363636; --g-laranja: #c2410c; --g-marinho: #1f2a44; --g-anil: #2f3bb8; --g-anil-forte: #3b49df; --g-anil-claro: #eef0ff;
  --g-cinza-av: #5f6368; --g-campo-borda: #9aa0a6; --g-pilula-borda: #c4c7cc; --g-cartao-borda: #d6d9de;
  --topo-h: 58px;
  --cor: #2f3bb8; --cor-escura: #1f2a44; --sobre-cor: #ffffff;
  --texto: #202124; --texto-2: #3c4043; --mudo: #5f6368; --borda: #e3e5e8;
  --fundo: #f4f5f7; --cartao: #ffffff; --campo: #ffffff; --superficie-2: #f8f9fa; --linha-par: #fafafb;
  --hover: #f1f3f5; --hover-sec: #eceef1; --topo: #363636;
  --tag-neutro: #eceef1; --tag-tipo: #eef0ff; --tag-tipo-texto: #2f3bb8; --destaque-sombra: rgba(47, 59, 184, .12);
  --ok: #1e8e3e; --ok-fundo: #e6f4ea; --ok-borda: #b7dfc2;
  --erro: #c5221f; --erro-fundo: #fdecea; --erro-borda: #f3c0bd;
  --trilho: #ffffff; --trilho-texto: #3c4043; --trilho-mudo: #5f6368; --trilho-forte: #202124; --trilho-hover: #f1f3f5;
  --trilho-ativo-fundo: #eceef1; --trilho-ativo-texto: #202124; --trilho-borda: #e3e5e8; --trilho-topo: transparent;
  --trilho-avatar-fundo: #5f6368; --trilho-avatar-texto: #ffffff;
  --wa-verde: #1e8e3e; --wa-fundo-chat: #eef0f3;
  --wa-bolha-cliente: #ffffff; --wa-bolha-cliente-borda: #d6d9de;
  --wa-bolha-equipe: #eef0ff; --wa-bolha-equipe-borda: #b9c0f5; --wa-bolha-bot: #f1f3f6;
  --wa-avatar: #5f6368; --wa-avatar-texto: #ffffff;
}
:root[data-visual="grafite"] body { font-family: "Nunito Sans", system-ui, sans-serif; background: var(--fundo); }
:root[data-visual="grafite"] :is(strong, h1, h2, h3, b) { font-weight: 700; }
:root[data-visual="grafite"] :is(.btn, .btn-mini, .btn-p, input, textarea, select) { border-radius: 6px; }

/* Barra de cima: grafite, 51 px + faixa de 7 px no degradê azul → laranja (1.90.8; antes 48 px como a do Enterprise); o menu e as telas começam embaixo dela. */
.g-topo { display: none; }
:root[data-visual="grafite"] .g-topo { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 58px; box-sizing: border-box; display: flex; align-items: center; gap: 12px;
  padding: 0 18px 7px 20px; background: linear-gradient(90deg, #2c4fd7 0%, #3b7be0 35%, #f08a24 75%, #f26b0f 100%) bottom / 100% 7px no-repeat, var(--g-topo); color: #fff; }
.g-marca { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; min-width: 0; }
.g-sigla { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 6px; font-weight: 800; font-size: 14px; letter-spacing: .02em; }
.g-sigla-img { object-fit: contain; padding: 3px; background: #fff; }
.g-nome { font-size: 18px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-produto { flex: none; padding: 2px 10px; border: 1px solid #5f6368; border-radius: 999px; font-size: 13px; color: #d0d3d8; }
.g-direita { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.g-org { display: flex; flex-direction: column; justify-content: center; height: 46px; padding: 0 16px; border: 1px solid #6b6e74; border-radius: 999px; line-height: 1.2; }
.g-org strong { font-size: 14px; } .g-org small { font-size: 12px; color: #c4c7cc; }
.g-avatar { width: 42px; height: 42px; border-radius: 50%; background: #5f6368; color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; text-decoration: none; overflow: hidden; }
.g-avatar .av-foto { width: 100%; height: 100%; object-fit: cover; }
/* Tamanhos da barra (um pouco maiores que os do Enterprise, 1.90.8). */
:root[data-visual="grafite"] .g-sigla { width: 32px; height: 32px; border-width: 1.5px; border-radius: 4px; font-size: 13px; }
:root[data-visual="grafite"] .g-nome { font-size: 15px; font-weight: 600; }
:root[data-visual="grafite"] .g-produto { padding: 1px 9px; font-size: 12px; }
:root[data-visual="grafite"] .g-org { height: 38px; padding: 0 14px; }
:root[data-visual="grafite"] .g-org strong { font-size: 13px; } :root[data-visual="grafite"] .g-org small { font-size: 11px; }
:root[data-visual="grafite"] .g-avatar { width: 34px; height: 34px; font-size: 13px; }
:root[data-visual="grafite"] body.com-trilho { padding-top: var(--topo-h); }
/* Minha conta já está na foto da barra de cima: sai do menu lateral (1.90.9). No celular a barra some e o item volta. */
@media (min-width: 861px) { :root[data-visual="grafite"] .trilho-conta { display: none; } }
:root[data-visual="grafite"] .trilho { top: var(--topo-h); height: calc(100vh - var(--topo-h)); height: calc(100dvh - var(--topo-h)); }
/* Tarefas e Equipe (html.tf1) contam a barra de 48 px do Enterprise; no Grafite, a altura da barra daqui. */
:root[data-visual="grafite"].tf1 main.tf-largo, :root[data-visual="grafite"].tf1 main.tf-largo.eq-largo { height: calc(100vh - var(--topo-h)); height: calc(100dvh - var(--topo-h)); }
:root[data-visual="grafite"].tf1 .tf-veu { top: var(--topo-h); }
:root[data-visual="grafite"].tf1 .tf-painel { top: var(--topo-h); }

/* Menu lateral branco: recolhido = ícones de 44px; aberto = nomes (como o menu das telas de Envio/Análises). O escolhido ganha fundo cinza e o traço laranja. */
:root[data-visual="grafite"] .trilho { border-right: 1px solid var(--borda); }
:root[data-visual="grafite"]:not([data-trilho="aberto"]) .trilho { flex-basis: 72px; width: 72px; padding: 14px 0; }
:root[data-visual="grafite"] .trilho-topo { display: none; }
:root[data-visual="grafite"]:not([data-trilho="aberto"]) :is(.trilho-nav, .trilho-rodape) { align-items: center; gap: 6px; }
:root[data-visual="grafite"]:not([data-trilho="aberto"]) .trilho-item { width: 44px; height: 44px; border-radius: 10px; }
:root[data-visual="grafite"] .trilho-item > svg { width: 20px; height: 20px; }
:root[data-visual="grafite"] .trilho-item.ativo { font-weight: 700; }
:root[data-visual="grafite"] .trilho-item.ativo::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--g-laranja); }
:root[data-visual="grafite"][data-trilho="aberto"] .trilho { flex-basis: 241px; width: 241px; padding: 16px 10px; }
:root[data-visual="grafite"][data-trilho="aberto"] .trilho-item { height: 40px; border-radius: 6px; padding: 0 12px; font-size: 14px; }
:root[data-visual="grafite"][data-trilho="aberto"] .trilho-item.ativo::before { left: 0; top: 0; bottom: 0; border-radius: 6px 0 0 6px; }
:root[data-visual="grafite"] .trilho-titulo { color: var(--mudo); }
:root[data-visual="grafite"] .trilho-fila { background: var(--g-anil-forte); color: #fff; }
:root[data-visual="grafite"] .trilho-ponto { background: var(--g-laranja); }
:root[data-visual="grafite"] .trilho-avatar { background: var(--g-cinza-av); color: #fff; }

/* Lista: título grande, abas no bloco grafite (a escolhida branca), conversa escolhida cinza com o traço laranja. */
:root[data-visual="grafite"] .wa-col-lista { background: var(--cartao); border-right: 1px solid var(--borda); }
:root[data-visual="grafite"] .wa-lista-dentro { width: 360px; }
:root[data-visual="grafite"] .wa-lista-topo { padding: 18px 16px 12px 22px; }
:root[data-visual="grafite"] .wa-lista-topo h1 { font-size: 24px; font-weight: 700; letter-spacing: 0; }
:root[data-visual="grafite"] .wa-busca { padding: 0 16px 12px; }
:root[data-visual="grafite"] .wa-busca-campo { height: 42px; border: 1px solid var(--g-campo-borda); border-radius: 6px; background: #fff; }
:root[data-visual="grafite"] .wa-busca-campo input { font-size: 15px; }
:root[data-visual="grafite"] .wa .wa-abas { margin: 0; padding: 6px 8px; gap: 4px; border: 0; border-radius: 0; background: var(--g-topo); flex-wrap: nowrap; }
:root[data-visual="grafite"] .wa .wa-aba { flex: 1 1 auto; min-width: 0; justify-content: center; white-space: nowrap; height: 32px; padding: 0 8px; gap: 4px; border: 0; border-radius: 3px; background: transparent; color: #fff; font-size: 14px; font-weight: 700; }
:root[data-visual="grafite"] .wa .wa-aba:hover { background: rgba(255, 255, 255, .1); color: #fff; }
:root[data-visual="grafite"] .wa .wa-aba .wa-qtd { min-width: 0; padding: 0; background: none; color: inherit; font-size: 14px; font-weight: 700; }
:root[data-visual="grafite"] .wa .wa-aba .wa-qtd::before { content: '('; } :root[data-visual="grafite"] .wa .wa-aba .wa-qtd::after { content: ')'; }
:root[data-visual="grafite"] .wa .wa-aba.ativo, :root[data-visual="grafite"] .wa .wa-aba.ativo:hover { background: #fff; color: var(--texto); }
:root[data-visual="grafite"] .wa .wa-aba.ativo .wa-qtd { color: var(--texto); background: none; }
:root[data-visual="grafite"] .wa #wa-lista { padding: 0; }
:root[data-visual="grafite"] .wa .wa-item { padding: 16px 16px 16px 18px; gap: 14px; border-radius: 0; border-bottom: 1px solid #eceef1; }
:root[data-visual="grafite"] .wa .wa-item:hover { background: var(--hover); }
:root[data-visual="grafite"] .wa .wa-item.ativo { background: var(--hover-sec); box-shadow: inset 4px 0 0 var(--g-laranja); }
:root[data-visual="grafite"] .wa-item .wa-avatar { width: 52px; height: 52px; font-size: 22px; font-weight: 700; background: var(--g-cinza-av); color: #fff; }
:root[data-visual="grafite"] .wa-item-topo strong { font-size: 17px; font-weight: 600; }
:root[data-visual="grafite"] .wa-item .wa-hora { font-size: 13px; color: var(--mudo); }
:root[data-visual="grafite"] .wa-previa { font-size: 14px; color: var(--mudo); }
:root[data-visual="grafite"] .wa-tags { gap: 6px; }
/* Selo do grupo: pílula com contorno na cor do grupo; etiquetas: pílula branca com contorno. */
:root[data-visual="grafite"] .wa-grupo { padding: 1px 9px; border: 1px solid #9aa0a6; border-radius: 999px; font-size: 13px; color: var(--texto-2); background: #fff; }
:root[data-visual="grafite"] .wa-grupo .bolinha { display: none; }
:root[data-visual="grafite"] .wa-grupo:has(.cor-azul) { background: #eef0ff; border-color: #3b49df; color: #2f3bb8; }
:root[data-visual="grafite"] .wa-grupo:has(.cor-laranja) { background: #fff4dc; border-color: #b7791f; color: #7a4a00; }
:root[data-visual="grafite"] .wa-grupo:has(.cor-amarelo) { background: #fff8d6; border-color: #b8960a; color: #6b5600; }
:root[data-visual="grafite"] .wa-grupo:has(.cor-verde) { background: #e6f4ea; border-color: #1e8e3e; color: #14532d; }
:root[data-visual="grafite"] .wa-grupo:has(.cor-vermelho) { background: #fdecea; border-color: #c5221f; color: #a50e0e; }
:root[data-visual="grafite"] .wa-grupo:has(.cor-roxo) { background: #f5ecfb; border-color: #8e24aa; color: #6a1b9a; }
:root[data-visual="grafite"] .wa-item .tag { background: #fff; border: 1px solid currentColor; border-radius: 999px; padding: 1px 9px; font-size: 13px; }
:root[data-visual="grafite"] .wa-estado { border-radius: 999px; font-size: 12px; }
:root[data-visual="grafite"] .wa-estado.voce { background: var(--g-marinho); color: #fff; }
:root[data-visual="grafite"] .wa-nao-lidas { background: var(--g-anil-forte); color: #fff; }

/* Conversa: cabeçalho com avatar cinza de 56px, fundo pontilhado, eventos em cartão, balões com contorno. */
:root[data-visual="grafite"] .wa-conv-topo { min-height: 113px; padding: 12px 16px 12px 20px; border-bottom: 1px solid var(--borda); background: #fff; }
:root[data-visual="grafite"] .wa-conv-topo > .wa-avatar { width: 56px; height: 56px; font-size: 24px; font-weight: 700; background: var(--g-cinza-av); color: #fff; }
:root[data-visual="grafite"] .wa-conv-quem strong { font-size: 20px; font-weight: 600; }
:root[data-visual="grafite"] .wa-conv-info { font-size: 14px; color: var(--mudo); }
:root[data-visual="grafite"] .wa-conv-acoes { gap: 6px; }
:root[data-visual="grafite"] .wa-conv-acoes .btn-p { height: 40px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 700; }
:root[data-visual="grafite"] .btn-p.sec { background: transparent; border-color: transparent; color: var(--texto-2); }
:root[data-visual="grafite"] .btn-p.sec:hover, :root[data-visual="grafite"] .wa-conv-acoes details[open] > summary.btn-p.sec { background: #e3e5e8; color: var(--texto); border-color: transparent; }
:root[data-visual="grafite"] .btn-p:not(.sec), :root[data-visual="grafite"] .btn:not(.sec) { background: var(--g-anil); border-color: var(--g-anil); color: #fff; }
:root[data-visual="grafite"] .wa-btn-assumir.btn-p { background: var(--g-marinho); border-color: var(--g-marinho); }
:root[data-visual="grafite"] .wa-msgs { padding: 22px 24px; gap: 14px; background-color: var(--wa-fundo-chat);
  background-image: radial-gradient(#d9dce1 1px, transparent 1px); background-size: 18px 18px; }
:root[data-visual="grafite"] .wa.layout-novo .wa-msg, :root[data-visual="grafite"] .wa-msg { border-radius: 8px; box-shadow: none; padding: 10px 14px; font-size: 15px; }
:root[data-visual="grafite"] .wa.layout-novo .wa-msg.cliente, :root[data-visual="grafite"] .wa-msg.cliente { background: #fff; border: 1px solid var(--g-cartao-borda); }
:root[data-visual="grafite"] .wa.layout-novo .wa-msg.atendente, :root[data-visual="grafite"] .wa-msg.atendente { background: var(--g-anil-claro); color: var(--texto); border: 1px solid #b9c0f5; }
:root[data-visual="grafite"] .wa.layout-novo .wa-msg.bot, :root[data-visual="grafite"] .wa-msg.bot { background: #f1f3f6; color: var(--texto); border: 1px dashed var(--g-campo-borda); }
:root[data-visual="grafite"] .wa.layout-novo .wa-msg > b { color: var(--mudo); font-size: 12px; font-weight: 700; opacity: 1; }
:root[data-visual="grafite"] .wa.layout-novo .wa-msg .wa-hora { color: var(--mudo); font-size: 12px; opacity: 1; font-family: inherit; }
:root[data-visual="grafite"] .wa.layout-novo .wa-msg.nota, :root[data-visual="grafite"] .wa-msg.nota { border-radius: 8px; }
:root[data-visual="grafite"] .wa-evento::before, :root[data-visual="grafite"] .wa-evento::after { display: none; }
:root[data-visual="grafite"] .wa.layout-novo .wa-evento span, :root[data-visual="grafite"] .wa-evento span { display: inline-block; padding: 8px 18px; border: 1px solid var(--g-cartao-borda); border-radius: 999px; background: #fff; color: var(--texto-2); font-size: 14px; }
/* Caixa de escrever: campo com contorno, Enviar em anil. */
:root[data-visual="grafite"] .wa-escrever { padding: 10px 14px 14px; border-top: 1px solid var(--borda); background: #fff; }
:root[data-visual="grafite"] .wa-caixa { border: 1px solid var(--g-campo-borda); border-radius: 6px; background: #fff; }
:root[data-visual="grafite"] .wa-escrever textarea { font-size: 15px; }
:root[data-visual="grafite"] .wa-enviar { background: transparent; border-color: transparent; color: var(--g-laranja); }
:root[data-visual="grafite"] .wa-enviar:hover { background: #fdf0ea; }
:root[data-visual="grafite"] .wa-modo label { font-size: 14px; }
/* Painel do contato: como o painel de Ticket — título grande, campos com contorno de 42px, cartão do solicitante. */
:root[data-visual="grafite"] .wa.layout-novo .wa-lateral, :root[data-visual="grafite"] .wa-lateral { background: #fff; border-left: 1px solid var(--borda); padding: 18px 16px 24px; }
:root[data-visual="grafite"] .wa-ln-cabeca > .wa-avatar { background: var(--g-cinza-av); color: #fff; font-weight: 700; }
:root[data-visual="grafite"] .wa-ln-cabeca > strong { font-size: 22px; font-weight: 700; }
:root[data-visual="grafite"] .wa-ln-titulo { font-size: 15px; font-weight: 700; color: var(--texto); }
:root[data-visual="grafite"] .wa-lateral :is(input, select, textarea) { border: 1px solid var(--g-campo-borda); border-radius: 6px; font-size: 15px; }
:root[data-visual="grafite"] .wa-ln-item { border: 1px solid var(--g-cartao-borda); border-radius: 6px; padding: 10px 12px; }

/* Telas de página (Configurações, Contatos, Relatórios…): fundo cinza claro, cartões brancos com contorno, pílulas e tabela do modelo. */
:root[data-visual="grafite"] body.com-trilho > main.wrap:not(.wa-largo) { padding-top: 28px; }
:root[data-visual="grafite"] main h1 { font-size: 32px; font-weight: 700; letter-spacing: 0; }
:root[data-visual="grafite"] :is(.cfg-bloco, .cartao, .caixa) { background: #fff; border: 1px solid var(--g-cartao-borda); border-radius: 8px; box-shadow: none; }
:root[data-visual="grafite"] :is(input, select, textarea):not([type=radio]):not([type=checkbox]) { border-color: var(--g-campo-borda); }
:root[data-visual="grafite"] table th { font-size: 13px; font-weight: 700; color: var(--texto); }
:root[data-visual="grafite"] table td { border-bottom-color: #eceef1; }
:root[data-visual="grafite"] main a:not(.btn):not(.btn-p):not(.btn-mini):not(.wa-item):not(.wa-aba):not(.trilho-item) { color: var(--g-anil); }

/* Telefone (painel do lado) no Grafite. */
:root[data-visual="grafite"] body.tel { font-family: "Nunito Sans", system-ui, sans-serif; }
:root[data-visual="grafite"] .tel-ligar, :root[data-visual="grafite"] .tel-atender { background: var(--ok); }
/* Discador na beirada direita (páginas sem conversa): o topo dele continua a barra grafite com o filete laranja. */
:root[data-visual="grafite"] .tel-lado:not(.encaixado) .tel-topo { flex: none; height: 58px; min-height: 58px; box-sizing: border-box; padding: 0 14px 7px; border-bottom: 0; background: linear-gradient(90deg, #2c4fd7 0%, #3b7be0 35%, #f08a24 75%, #f26b0f 100%) bottom / 100% 7px no-repeat, var(--g-topo); color: #fff; }
:root[data-visual="grafite"] .tel-lado:not(.encaixado) .tel-topo strong { color: #fff; }
:root[data-visual="grafite"] .tel-lado:not(.encaixado) .tel-recolher { color: #c4c7cc; }
:root[data-visual="grafite"] .tel-lado:not(.encaixado) .tel-recolher:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* Celular: a barra de cima some e o menu volta ao topo de sempre (branco). */
@media (max-width: 860px) {
  :root[data-visual="grafite"] { --topo-h: 0px; }
  :root[data-visual="grafite"] .g-topo { display: none; }
  :root[data-visual="grafite"] body.com-trilho { padding-top: 0; }
  :root[data-visual="grafite"] .trilho { top: 0; height: auto; }
  :root[data-visual="grafite"] .trilho-topo { display: flex; background: linear-gradient(90deg, #2c4fd7 0%, #3b7be0 35%, #f08a24 75%, #f26b0f 100%) bottom / 100% 4px no-repeat, var(--g-topo); }
  :root[data-visual="grafite"] .trilho-topo .trilho-nome { color: #fff; }
  :root[data-visual="grafite"] .trilho-abrir-movel { color: #fff; border-color: #6b6e74; }
}

/* Gaveta Tarefas do atendimento (botão Tarefas no topo da conversa, WA_TAREFAS): desliza da direita.
   Na interface 2 o style2.css só a põe abaixo da barra de cima. */
.v2-gaveta-veu { position: fixed; inset: 0; z-index: 60; background: rgba(20, 20, 30, .18); }
.v2-gaveta-veu[hidden] { display: none; }
.v2-gaveta { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(440px, 100vw); display: flex; flex-direction: column;
  background: #fff; border-left: 1px solid var(--borda); box-shadow: -10px 0 30px rgba(20, 20, 30, .12);
  transform: translateX(105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
.v2-gaveta.aberta { transform: none; visibility: visible; transition: transform .22s ease; }
.v2-gaveta-topo { flex: none; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px 0 18px; border-bottom: 1px solid var(--borda); color: #222; }
.v2-gaveta-topo h2 { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; }
.v2-gaveta-topo button { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: none; color: #4a4f5c; cursor: pointer; }
.v2-gaveta-topo button:hover { background: #f3f3f5; color: #222; }
.v2-gaveta iframe { flex: 1; width: 100%; border: 0; background: #fff; }
@media (prefers-reduced-motion: reduce) { .v2-gaveta, .v2-gaveta.aberta { transition: none; } }

/* Empresa do contato no painel (1.89.0): selo + lápis; o formulário abre por cima, sem empurrar o painel. */
.wa-ln-dados .wa-ln-empresa { display: flex; align-items: center; gap: 6px; position: relative; }
.wa-empresa-selo { display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 2px 8px; border-radius: 4px; background: var(--hover-sec, #eef1f6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-empresa-selo svg { flex: none; color: var(--mudo); }
.wa-empresa { margin-left: auto; }
.wa-empresa summary { list-style: none; cursor: pointer; }
.wa-empresa summary::-webkit-details-marker { display: none; }
.wa-empresa form { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: flex; gap: 6px; padding: 8px; width: 250px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.wa-empresa input { flex: 1; min-width: 0; margin: 0; padding: 4px 8px; font-size: .86rem; }