/* ==========================================================================
   nova.css — interface nova (migração 2026)

   Gerado a partir de docs/apresentacao/mock-2026/sistema-whatsapp.html.
   Mexeu no visual? Mexa no mock e gere de novo, senão viram duas verdades.

   Este arquivo é carregado SÓ pelo layout de app/Views/nova. O app.css não é
   tocado e não há colisão de classe entre as duas interfaces — é o que permite
   as duas conviverem enquanto a migração acontece (doc 02, §8).
   ========================================================================== */
/* ==========================================================================
   Atendimento — mock com a cara do WhatsApp Web
   Pires Embalagens · arquivo único, sem ligação com o sistema em produção.

   Fidelidade: medidas, cores e tipos são os do WhatsApp Web. O que é nosso
   (fila, departamento, transferência, observação, retorno) entra no idioma
   do WhatsApp Business — etiqueta colorida, barra de aviso, item de painel —
   nunca com componente de fora.

   Tokens: escuro é o padrão; o claro é redefinição de token em
   [data-tema="claro"], nunca inversão automática.
   ========================================================================== */

:root {
    /* Quem desenha a lista aberta de um <select> é o sistema, não o nosso CSS.
       Sem esta linha ela vem branca e cada opção herda o --tx claro do campo —
       era o "Transferir para" ilegível. Vale para todo select do tema. */
    color-scheme: dark;

    /* superfícies */
    --rail:        #202c33;
    --painel:      #111b21;
    --topo:        #202c33;
    --chat:        #0b141a;
    --entrada:     #2a3942;
    --hover:       #202c33;
    --ativo:       #2a3942;
    --borda:       #222d34;
    --sistema:     #182229;

    /* bolhas */
    --saida:       #005c4b;
    --entrada-b:   #202c33;

    /* texto */
    --tx:          #e9edef;
    --tx-2:        #8696a0;
    --tx-hora:     rgba(233,237,239,.6);

    /* marca */
    --verde:       #00a884;
    --verde-2:     #21c063;
    --verde-fraco: #103529;
    --tick:        #53bdeb;
    --link:        #53bdeb;

    /* etiquetas (WhatsApp Business) — é onde o assunto/departamento aparece */
    --et-1: #ff9500;
    --et-2: #00a884;
    --et-3: #53bdeb;
    --et-4: #e542a3;
    --et-5: #f15c6d;

    --sombra-bolha: 0 1px .5px rgba(11,20,26,.13);
    --sombra-menu:  0 2px 5px rgba(11,20,26,.26), 0 2px 10px rgba(11,20,26,.16);

    --fonte: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, sans-serif;
}

:root[data-tema="claro"] {
    color-scheme: light;

    --rail:        #f0f2f5;
    --painel:      #ffffff;
    --topo:        #f0f2f5;
    --chat:        #efeae2;
    --entrada:     #ffffff;
    --hover:       #f5f6f6;
    --ativo:       #f0f2f5;
    --borda:       #e9edef;
    --sistema:     #ffffff;

    --saida:       #d9fdd3;
    --entrada-b:   #ffffff;

    --tx:          #111b21;
    --tx-2:        #667781;
    --tx-hora:     rgba(17,27,33,.5);

    --verde:       #008069;
    --verde-2:     #008069;
    --verde-fraco: #d9fdd3;
    --link:        #027eb5;

    /* etiqueta clara precisa de mais tinta: as do escuro somem no branco */
    --et-1: #c2410c;
    --et-2: #047857;
    --et-3: #0369a1;
    --et-4: #be185d;
    --et-5: #dc2626;
}

/* nome de quem fala no grupo e autor da citação — legíveis nos dois temas */
:root[data-tema="claro"] .cor-1 { color: #0a7cff }
:root[data-tema="claro"] .cor-2 { color: #c1226b }
:root[data-tema="claro"] .cor-3 { color: #007d6d }
:root[data-tema="claro"] .citacao-autor { color: #007d6d }
:root[data-tema="claro"] .citacao.dele .citacao-autor { color: #027eb5 }

* { box-sizing: border-box }

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

body {
    background: var(--chat);
    color: var(--tx);
    font-family: var(--fonte);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

button, input, textarea { font: inherit; color: inherit }
button { background: none; border: 0; cursor: pointer; padding: 0 }

/* O `hidden` do HTML vale menos que qualquer `display` de classe — e a folha
   está cheia deles (`display:block` no .campo-dica, `display:grid` no contador
   do rail). Sem esta linha, esconder por JS funciona num elemento e falha no
   vizinho, calado: o aviso de "admin não entra na trava de horário" aparecia
   para atendente porque o .campo-dica é block. */
[hidden] { display: none !important }

::-webkit-scrollbar       { width: 6px; height: 6px }
::-webkit-scrollbar-thumb { background: rgba(134,150,160,.3); border-radius: 3px }

.ico { width: 24px; height: 24px; display: block; fill: currentColor }

/* --- Moldura ------------------------------------------------------------ */

.app { display: flex; height: 100vh; background: var(--painel) }

/* --- Rail de ícones ----------------------------------------------------- */

.rail {
    width: 64px; flex: 0 0 64px;
    background: var(--rail);
    border-right: 1px solid var(--borda);
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 0 14px;
    gap: 2px;
}

.rail-btn {
    position: relative;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--tx-2);
}
.rail-btn:hover { background: rgba(134,150,160,.12) }
.rail-btn.ativa { background: var(--ativo); color: var(--tx) }
:root[data-tema="claro"] .rail-btn.ativa { background: #e9edef; color: #111b21 }

.rail-sep { flex: 1 }

.rail-badge {
    position: absolute; top: 3px; right: 3px;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 9px;
    background: var(--verde-2);
    color: #111b21;
    font-size: 11px; font-weight: 700;
    display: grid; place-items: center;
    border: 2px solid var(--rail);
}

.rail-avatar { width: 34px; height: 34px; border-radius: 50%; margin-top: 6px }

/* --- Painel da lista ---------------------------------------------------- */

.painel {
    width: 30%; min-width: 348px; max-width: 460px; flex: 0 0 30%;
    background: var(--painel);
    border-right: 1px solid var(--borda);
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
}

.painel-topo {
    height: 59px; flex: 0 0 59px;
    padding: 0 14px 0 22px;
    display: flex; align-items: center; justify-content: space-between;
}
.painel-topo h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.2px }
.painel-acoes { display: flex; gap: 2px }

/* Abas do grupo no topo do painel: as outras telas do mesmo grupo do rail,
   quando a tela atual tem indice proprio embaixo. Chips e nao lista, para
   nao parecer o indice da tela. */
.painel-grupo {
    flex: 0 0 auto;
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 10px 14px 8px 18px;
    border-bottom: 1px solid var(--borda);
}
.painel-grupo-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    font-size: 12.5px; line-height: 16px;
    color: var(--tx-2);
    background: rgba(134, 150, 160, .10);
    text-decoration: none;
}
.painel-grupo-item .ico { width: 15px; height: 15px }
.painel-grupo-item:hover { background: var(--hover); color: var(--tx) }
.painel-grupo-item.ativo { background: var(--ativo); color: var(--tx) }
:root[data-tema="claro"] .painel-grupo-item.ativo { background: #e9edef; color: #111b21 }

/* --- Sino de menções ----------------------------------------------------- */

/* Ele SOME quando não há menção (o `hidden` vem do JS), em vez de ficar
   apagado: ícone permanente e quase sempre vazio vira cenário. */
.sino-caixa { position: relative; flex: none }

.sino {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 0; background: none;
    color: var(--et-1);
    display: grid; place-items: center;
    cursor: pointer;
    position: relative;
}
.sino:hover { background: var(--hover) }
.sino .ico { width: 22px; height: 22px }

.sino-n {
    position: absolute; top: 3px; right: 2px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px;
    background: var(--et-5); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 17px;
    text-align: center;
}

.sino-painel {
    position: absolute; z-index: 30;
    top: 46px; right: 0;
    width: 330px; max-height: 60vh; overflow-y: auto;
    background: var(--painel);
    border: 1px solid var(--borda); border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,.4);
}
.sino-topo {
    padding: 10px 14px;
    border-bottom: 1px solid var(--borda);
    font-size: 13px; color: var(--tx-2);
}

.sino-item {
    display: block; width: 100%;
    padding: 10px 14px;
    border: 0; border-bottom: 1px solid var(--borda);
    background: none; color: var(--tx);
    text-align: left; cursor: pointer;
}
.sino-item:last-child { border-bottom: 0 }
.sino-item:hover { background: var(--hover) }
/* A menção ao número de quem está olhando: a faixa separa "é com você" de
   "aconteceu no sistema". */
.sino-item-minha { box-shadow: inset 3px 0 0 var(--et-5) }

.sino-linha { display: flex; align-items: baseline; gap: 8px }
.sino-nome { font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sino-hora { font-size: 11px; color: var(--tx-2); white-space: nowrap }
.sino-trecho {
    font-size: 13px; color: var(--tx-2); margin-top: 3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sino-conexao { font-size: 11px; color: var(--tx-2); margin-top: 4px; opacity: .85 }

/* A conversa chamada, na lista */
.conversa-mencionada { box-shadow: inset 3px 0 0 var(--et-5) }

/* A conversa presa no topo (migration 065). Fundo, e não a faixa lateral: ali
   mora a menção, que pede ação — fixação é só lugar na lista, e as duas marcas
   na mesma faixa de 3px brigariam na conversa que tem as duas coisas. Âmbar
   fechado em rgba porque a mesma regra serve aos dois temas. */
.conversa-fixada { background: rgba(255,149,0,.10) }
.conversa-fixada:hover { background: rgba(255,149,0,.16) }
.conversa-alfinete { font-size: 11px; flex: none; opacity: .75 }

/* O botão de fixar, quando a conversa aberta já está presa. */
.btn-contato-ativo { background: rgba(255,149,0,.16) }
.btn-contato-ativo:hover { background: rgba(255,149,0,.24) }
.chip-mencao { background: var(--et-5); color: #fff }
.chip-mencao-outro { background: rgba(134,150,160,.16); color: var(--et-5) }

/* --- Busca nas mensagens ------------------------------------------------- */

/* Altura fixa e a lista rolando dentro: com `max-height` a caixa pulsaria a
   cada resultado que chega, e o campo de digitação sairia do lugar. */
.modal-busca-caixa {
    width: min(640px, calc(100% - 32px));
    height: 80vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}

.busca-msg-campo { padding: 12px 20px; border-bottom: 1px solid var(--borda) }
.busca-msg-campo input {
    width: 100%; height: 40px;
    background: var(--entrada);
    border: 0; border-radius: 8px;
    padding: 0 12px;
    outline: none;
    font-size: 15px;
    color: var(--tx);
}
:root[data-tema="claro"] .busca-msg-campo input { background: #f0f2f5 }
.busca-msg-campo input::placeholder { color: var(--tx-2) }

.busca-msg-lista { flex: 1; min-height: 0; overflow-y: auto }

.busca-msg-item {
    display: block; width: 100%;
    padding: 11px 20px;
    border: 0; border-bottom: 1px solid var(--borda);
    background: none;
    text-align: left; cursor: pointer;
    font: inherit;
    color: var(--tx);
}
.busca-msg-item:last-child { border-bottom: 0 }
.busca-msg-item:hover, .busca-msg-item:focus-visible { background: var(--hover); outline: none }

.busca-msg-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.busca-msg-topo strong { font-size: 15px; font-weight: 500 }
.busca-msg-quando { margin-left: auto; font-size: 12px; color: var(--tx-2); white-space: nowrap }

.busca-msg-trecho {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--tx-2);
    word-break: break-word;
}
.busca-msg-trecho mark { background: rgba(255,149,0,.35); color: var(--tx); padding: 0 2px; border-radius: 3px }
.busca-msg-qtd { margin-top: 3px; font-size: 12px; color: var(--et-1); font-weight: 600 }

.icone-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--tx-2);
    flex: 0 0 auto;
}
/* O mesmo botão, esticado para caber a palavra ao lado do desenho. Ícone
   sozinho só se explica pelo `title` — que exige parar o mouse em cima e, no
   celular, não existe. */
.icone-btn-rotulo {
    width: auto; height: 36px;
    padding: 0 14px 0 11px;
    gap: 7px;
    border-radius: 18px;
    display: inline-flex; align-items: center;
    font-size: 14px;
    color: var(--tx);
    border: 1px solid var(--borda);
    background: none;
    cursor: pointer;
}
.icone-btn-rotulo .ico { width: 19px; height: 19px }

.icone-btn:hover { background: rgba(134,150,160,.12) }
:root[data-tema="claro"] .icone-btn:hover { background: rgba(11,20,26,.06) }

/* Criar direto no painel, ao lado da lista — usado onde criar é digitar um
   nome só (departamentos). Mandar isso para outra tela seria uma volta a mais
   por uma palavra. */
.painel-form { padding: 0 12px 8px; display: flex; align-items: center; gap: 6px }
.painel-form .entrada-txt { height: 35px; font-size: 14px }

.busca-linha { padding: 0 12px 8px; display: flex; align-items: center; gap: 8px }

.busca {
    flex: 1; height: 35px;
    background: var(--entrada);
    border-radius: 8px;
    display: flex; align-items: center;
    padding: 0 12px; gap: 14px;
}
:root[data-tema="claro"] .busca { background: #f0f2f5 }
.busca svg { color: var(--tx-2); width: 20px; height: 20px; flex: 0 0 20px }
.busca input { flex: 1; background: none; border: 0; outline: none; font-size: 15px }
.busca input::placeholder { color: var(--tx-2) }

.filtros { display: flex; gap: 8px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none }
.filtros::-webkit-scrollbar { display: none }

.filtro {
    height: 32px; padding: 0 12px;
    border-radius: 16px;
    background: var(--entrada);
    color: var(--tx-2);
    font-size: 14px; white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
}
:root[data-tema="claro"] .filtro { background: #f0f2f5 }
.filtro.ativo { background: var(--verde-fraco); color: var(--verde-2) }
.filtro-n { font-size: 12px; font-weight: 600; background: rgba(134,150,160,.25); border-radius: 9px; padding: 0 6px }
.filtro.ativo .filtro-n { background: rgba(33,192,99,.22) }

.lista { flex: 1; overflow-y: auto; padding-bottom: 12px }

.conversa {
    display: flex; align-items: center; gap: 15px;
    width: 100%; min-height: 72px;
    padding: 8px 15px 8px 13px;
    text-align: left; position: relative;
}
.conversa:hover { background: var(--hover) }
.conversa.ativa { background: var(--ativo) }
:root[data-tema="claro"] .conversa.ativa { background: #f0f2f5 }

.conversa::after {
    content: ""; position: absolute;
    left: 77px; right: 0; bottom: 0;
    border-bottom: 1px solid var(--borda);
}

.avatar {
    width: 49px; height: 49px; border-radius: 50%;
    flex: 0 0 49px; object-fit: cover;
    background: var(--entrada);
}

.conversa-corpo { flex: 1; min-width: 0 }
.conversa-l1, .conversa-l2 { display: flex; align-items: center; gap: 6px }
.conversa-l2 { margin-top: 2px; min-width: 0 }

.conversa-nome {
    font-size: 17px; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conversa-hora { font-size: 12px; color: var(--tx-2); white-space: nowrap }
.conversa.nao-lida .conversa-hora { color: var(--verde-2) }

/* block, não flex: em flex container o text-overflow não corta o texto solto */
.previa {
    flex: 1; min-width: 0; font-size: 14px; color: var(--tx-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.previa svg { display: inline; width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px }

.badge {
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px;
    background: var(--verde-2); color: #111b21;
    font-size: 12px; font-weight: 700;
    display: grid; place-items: center;
}

.etiquetas { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap }

.etiqueta {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; line-height: 16px;
    padding: 1px 7px 1px 6px;
    border-radius: 4px;
    background: rgba(134,150,160,.16);
}
.etiqueta::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor }
/* etiqueta do Business é colorida por inteiro — quadradinho e texto */
.et-1 { color: var(--et-1) } .et-2 { color: var(--et-2) } .et-3 { color: var(--et-3) }
.et-4 { color: var(--et-4) } .et-5 { color: var(--et-5) }

/* --- Sobreposição: nova conversa / contatos ----------------------------- */

.folha {
    position: absolute; inset: 0;
    background: var(--painel);
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform .18s ease-out;
    z-index: 5;
}
.folha.aberta { transform: none }

.folha-topo {
    height: 108px; flex: 0 0 108px;
    background: var(--topo);
    display: flex; align-items: flex-end;
    gap: 22px;
    padding: 0 0 22px 22px;
    color: var(--tx);
}
.folha-topo strong { font-size: 19px; font-weight: 500 }
.folha-topo .icone-btn { width: 24px; height: 24px; color: var(--tx) }

.folha-corpo { flex: 1; overflow-y: auto }

.grupo-titulo {
    padding: 20px 32px 10px;
    color: var(--verde-2);
    font-size: 15px;
}

.contato {
    display: flex; align-items: center; gap: 15px;
    width: 100%; min-height: 72px;
    padding: 8px 15px 8px 13px;
    text-align: left; position: relative;
}
.contato:hover { background: var(--hover) }
.contato::after {
    content: ""; position: absolute; left: 77px; right: 0; bottom: 0;
    border-bottom: 1px solid var(--borda);
}
.contato-nome { font-size: 17px }
.contato-recado { font-size: 14px; color: var(--tx-2); margin-top: 2px }

.acao-redonda {
    width: 49px; height: 49px; border-radius: 50%;
    flex: 0 0 49px;
    background: var(--verde);
    color: #fff;
    display: grid; place-items: center;
}
:root[data-tema="claro"] .acao-redonda { background: #00a884 }

.letra {
    padding: 22px 0 8px 32px;
    font-size: 15px; color: var(--verde-2);
}

/* --- Chat --------------------------------------------------------------- */

.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative }

.chat-topo {
    height: 59px; flex: 0 0 59px;
    background: var(--topo);
    border-left: 1px solid var(--borda);
    display: flex; align-items: center;
    gap: 15px; padding: 0 16px;
    position: relative; z-index: 2;
}
.chat-topo .avatar { width: 40px; height: 40px; flex: 0 0 40px }
.chat-topo-corpo { flex: 1; min-width: 0; cursor: pointer }
.chat-topo-nome { font-size: 16px }
.chat-topo-sub { font-size: 13px; color: var(--tx-2); margin-top: 1px }
.chat-topo-sub.digitando { color: var(--verde-2) }

.chat-corpo {
    flex: 1; position: relative;
    overflow-y: auto;
    background: var(--chat);
    padding: 12px 6% 12px;
}

/* o papel de parede: rabisco claro no escuro, escuro no claro (invertido) */
.chat-corpo::before {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--doodle);
    background-size: 366px 366px;
    opacity: .09;
    pointer-events: none;
    z-index: 0;
}
:root[data-tema="claro"] .chat-corpo::before { filter: invert(1); opacity: .08 }

.chat-corpo > * { position: relative; z-index: 1 }

/* conversa curta encosta embaixo, como no app — e [hidden] tem de vencer o flex */
.thread {
    min-height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.thread[hidden] { display: none }

/* --- Divisores e avisos do sistema -------------------------------------- */

.marco { display: flex; justify-content: center; margin: 12px 0 }

.marco span {
    background: var(--sistema);
    color: var(--tx-2);
    font-size: 12.5px; font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 5px 12px;
    border-radius: 7.5px;
    box-shadow: var(--sombra-bolha);
}
:root[data-tema="claro"] .marco span { color: #54656f }

.aviso { display: flex; justify-content: center; margin: 12px 0 }

.aviso span {
    max-width: 85%;
    text-align: center;
    background: #182229;
    color: #ffd279;
    font-size: 12.5px;
    padding: 5px 12px;
    border-radius: 7.5px;
    box-shadow: var(--sombra-bolha);
}
:root[data-tema="claro"] .aviso span { background: #ffeecd; color: #54656f }

/* --- Bolhas ------------------------------------------------------------- */

.linha { display: flex; margin: 2px 0; padding: 0 4px }
.linha.saida { justify-content: flex-end }
.linha.espaco { margin-top: 12px }

.bolha {
    position: relative;
    max-width: 65%;
    background: var(--entrada-b);
    border-radius: 7.5px;
    padding: 6px 7px 8px 9px;
    box-shadow: var(--sombra-bolha);
    font-size: 14.2px; line-height: 19px;
    word-wrap: break-word;
}
.linha.saida .bolha { background: var(--saida) }

/* o rabinho só na primeira da sequência, como no app */
.linha.espaco .bolha::after {
    content: "";
    position: absolute; top: 0;
    width: 8px; height: 13px;
}
.linha.entrada.espaco .bolha { border-top-left-radius: 0 }
.linha.entrada.espaco .bolha::after {
    left: -8px;
    background: var(--entrada-b);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.linha.saida.espaco .bolha { border-top-right-radius: 0 }
.linha.saida.espaco .bolha::after {
    right: -8px;
    background: var(--saida);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.texto { white-space: pre-wrap }

.meta {
    float: right;
    margin: -6px 0 -5px 12px;
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px;
    color: var(--tx-hora);
    line-height: 15px;
    position: relative; top: 5px;
}
.meta svg { width: 16px; height: 15px }
.meta .lida { color: var(--tick) }

/* citação */
.citacao {
    display: flex;
    background: rgba(0,0,0,.18);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 4px;
    cursor: pointer;
}
:root[data-tema="claro"] .citacao { background: rgba(11,20,26,.05) }
.citacao-barra { width: 4px; flex: 0 0 4px; background: var(--verde-2) }
.citacao.dele .citacao-barra { background: #06cf9c }
.citacao-corpo { padding: 5px 8px; min-width: 0 }
.citacao-autor { display: block; font-size: 12.8px; color: #06cf9c; margin-bottom: 2px }
.citacao.dele .citacao-autor { color: #53bdeb }
.citacao-texto {
    font-size: 13px; color: var(--tx-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* autor no grupo */
.autor { display: block; font-size: 12.8px; font-weight: 500; margin-bottom: 2px }
.cor-1 { color: #53bdeb } .cor-2 { color: #ffa5c0 } .cor-3 { color: #06cf9c }

/* encaminhada */
.encaminhada {
    display: flex; align-items: center; gap: 4px;
    font-size: 12.5px; font-style: italic;
    color: var(--tx-2);
    margin-bottom: 2px;
}

/* mídia */
.bolha.midia { padding: 3px 3px 8px }
.bolha.midia .legenda { padding: 4px 6px 0 }
.foto {
    width: 330px; max-width: 100%;
    border-radius: 6px; display: block;
}

/* documento */
.doc {
    display: flex; align-items: center; gap: 12px;
    background: rgba(0,0,0,.18);
    border-radius: 6px;
    padding: 13px 12px;
    margin-bottom: 4px;
    min-width: 260px;
}
:root[data-tema="claro"] .doc { background: rgba(11,20,26,.04) }
.doc-nome { font-size: 13.6px }
.doc-sub { font-size: 12px; color: var(--tx-2); margin-top: 3px; text-transform: uppercase }

/* áudio */
.audio { display: flex; align-items: center; gap: 8px; min-width: 260px; padding: 3px 0 }
.audio .avatar { width: 40px; height: 40px; flex: 0 0 40px }
.audio-play { color: var(--tx-2); flex: 0 0 auto }
.onda { flex: 1; height: 24px; display: flex; align-items: center; gap: 2px }
.onda i {
    display: block; width: 2px; border-radius: 1px;
    background: var(--tx-2);
    height: calc(4px + var(--h) * 1px);
}
.onda i.tocada { background: var(--verde-2) }
.audio-tempo { font-size: 11px; color: var(--tx-hora); margin-top: 4px }

/* figurinha */
.linha.figurinha .bolha { background: none; box-shadow: none; padding: 0 }
.linha.figurinha .bolha::after { display: none }
.figura { width: 140px; height: 140px; display: block }
.linha.figurinha .meta { float: none; display: flex; justify-content: flex-end; margin: 2px 4px 0 0 }

/* reação */
.reacao {
    position: absolute; bottom: -13px; left: 8px;
    background: var(--entrada-b);
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 1px 6px;
    font-size: 12px;
    box-shadow: var(--sombra-bolha);
    white-space: nowrap;
}
.linha.saida .reacao { left: auto; right: 8px }
.linha.tem-reacao { margin-bottom: 16px }

/* apagada */
.apagada { display: flex; align-items: center; gap: 6px; color: var(--tx-2); font-style: italic }

/* --- Barra do sistema (fila, bot, transferência) ------------------------ */

.barra-sistema {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    background: var(--topo);
    border-left: 1px solid var(--borda);
    border-top: 1px solid var(--borda);
    font-size: 13.5px;
    position: relative; z-index: 2;
}
.barra-sistema[hidden] { display: none }
.barra-sistema .texto-barra { flex: 1; color: var(--tx-2) }
.barra-sistema .texto-barra strong { color: var(--tx); font-weight: 600 }

.btn {
    height: 34px; padding: 0 16px;
    border-radius: 17px;
    background: var(--verde);
    color: #fff;
    font-size: 14px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
}
:root[data-tema="claro"] .btn:not(.btn-vazado) { background: #008069 }
.btn:hover { filter: brightness(1.08) }

.btn-vazado {
    background: none;
    border: 1px solid var(--verde);
    color: var(--verde-2);
}
/* O .btn-perigo mais abaixo pinta o fundo de vermelho; no botão vazado o fundo
   fica limpo, senão o texto vermelho some sobre ele. */
/* Cartão que é link inteiro (a lista de conexões): sem sublinhado e com o realce
   de borda para mostrar que clica. */
a.cartao-link { display: block; color: inherit; text-decoration: none; transition: border-color .15s, background .15s }
a.cartao-link:hover { border-color: var(--verde); background: var(--hover) }
.btn-vazado.btn-perigo { background: none; border-color: #f15c6d; color: #f15c6d }
.btn-texto { background: none; color: var(--tx-2); padding: 0 8px }
.btn-texto:hover { color: var(--tx); text-decoration: underline }

/* --- Composer ----------------------------------------------------------- */

.composer {
    min-height: 62px;
    background: var(--topo);
    border-left: 1px solid var(--borda);
    display: flex; align-items: flex-end;
    gap: 8px;
    padding: 5px 16px 5px 12px;
    position: relative; z-index: 2;
}

.composer .icone-btn { margin-bottom: 1px }

/* respostas rápidas — o "/" do WhatsApp Business */
.rapidas {
    position: absolute; left: 60px; bottom: 68px;
    width: 320px;
    background: var(--topo);
    border-radius: 8px;
    box-shadow: var(--sombra-menu);
    padding: 6px 0;
    z-index: 6;
}
.rapidas .titulo { padding: 8px 16px; font-size: 12px; color: var(--tx-2); text-transform: uppercase }
.rapida { display: block; width: 100%; text-align: left; padding: 9px 16px }
.rapida:hover { background: var(--hover) }
.rapida b { font-weight: 600; color: var(--verde-2) }
.rapida small { display: block; color: var(--tx-2); font-size: 12.5px; margin-top: 2px }

/* --- Painel de dados do contato ----------------------------------------- */

.dados {
    width: 380px; flex: 0 0 380px;
    background: var(--painel);
    border-left: 1px solid var(--borda);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.dados[hidden] { display: none }

.dados-topo {
    height: 59px; flex: 0 0 59px;
    background: var(--topo);
    display: flex; align-items: center; gap: 22px;
    padding: 0 22px;
}
.dados-topo strong { font-size: 16px; font-weight: 500 }

.dados-corpo { flex: 1; overflow-y: auto; background: var(--chat) }
:root[data-tema="claro"] .dados-corpo { background: #f0f2f5 }

.bloco { background: var(--painel); padding: 14px 30px; margin-bottom: 10px }
.bloco.centro { text-align: center; padding: 28px 30px 24px }

.foto-grande { width: 200px; height: 200px; border-radius: 50%; object-fit: cover }
.dados-nome { font-size: 24px; margin: 14px 0 4px }
.dados-fone { font-size: 16px; color: var(--tx-2) }

.bloco-titulo { font-size: 14px; color: var(--tx-2); margin-bottom: 8px }
.bloco p { margin: 0; font-size: 14.5px; line-height: 20px }

.midias { display: flex; gap: 4px; margin-top: 10px }
.midias img { width: 33%; aspect-ratio: 1; object-fit: cover; border-radius: 6px }

.item {
    display: flex; align-items: center; gap: 22px;
    width: 100%;
    padding: 14px 30px;
    background: var(--painel);
    text-align: left;
    border-bottom: 1px solid var(--borda);
    color: var(--tx);
}
.item:hover { background: var(--hover) }
.item .rotulo { flex: 1; font-size: 15px }
.item .valor { font-size: 13px; color: var(--tx-2) }
.item.perigo { color: #f15c6d }

.obs {
    background: var(--sistema);
    border-radius: 7.5px;
    padding: 9px 11px;
    margin-bottom: 8px;
    font-size: 13.6px; line-height: 19px;
}
:root[data-tema="claro"] .obs { background: #f5f6f6 }
.obs em { display: block; font-style: normal; color: var(--tx-2); font-size: 12px; margin-top: 5px }

.tags-linha { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.tag {
    font-size: 12.5px; padding: 3px 10px;
    border-radius: 13px;
    background: rgba(134,150,160,.16);
    color: var(--tx);
    display: inline-flex; align-items: center; gap: 6px;
}
.tag button { color: var(--tx-2); display: grid; place-items: center }

/* --- Menu de contexto / anexo ------------------------------------------- */

.menu {
    position: absolute;
    background: var(--topo);
    border-radius: 8px;
    box-shadow: var(--sombra-menu);
    padding: 8px 0;
    min-width: 220px;
    z-index: 20;
}
.menu button {
    display: flex; align-items: center; gap: 16px;
    width: 100%; padding: 11px 22px;
    text-align: left; font-size: 14.5px;
}
.menu button:hover { background: var(--hover) }
.menu .cor-doc  { color: #7f66ff }
.menu .cor-foto { color: #007bfc }
.menu .cor-cam  { color: #ff2e74 }
.menu .cor-fig  { color: #02a698 }
.menu .cor-cont { color: #0ec1c9 }
.menu .cor-enq  { color: #f5c33b }

/* --- Régua da apresentação (não faz parte do produto) ------------------- */

/* --- Aperto de tela ------------------------------------------------------
   Em notebook de 1366 o painel de dados espremia o chat e a barra do sistema
   quebrava em quatro linhas. O texto passa a cortar e as ações secundárias
   somem antes de o layout ceder. */

.barra-sistema .texto-barra { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

@media (max-width: 1440px) { .barra-sistema .opcional { display: none } }
@media (max-width: 1500px) { .dados { width: 330px; flex: 0 0 330px } }
@media (max-width: 1200px) { .dados { display: none } }

/* --- Papel de parede e avatares ---------------------------------------- */

/* o rabisco do WhatsApp, desenhado à mão em SVG para o arquivo ficar solto */
:root {
    --doodle: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 40c0-5 4-9 9-9s9 4 9 9-9 14-9 14-9-9-9-14z'/%3E%3Cpath d='M70 22h26a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H80l-8 7v-7h-2a4 4 0 0 1-4-4V26a4 4 0 0 1 4-4z'/%3E%3Cpath d='M132 26l30 12-9 24-6-11-11-4z'/%3E%3Crect x='190' y='24' width='30' height='21' rx='4'/%3E%3Ccircle cx='205' cy='34.5' r='6'/%3E%3Cpath d='M197 24l3-5h10l3 5'/%3E%3Cpath d='M250 46V22l18-3v22'/%3E%3Ccircle cx='247' cy='47' r='4'/%3E%3Ccircle cx='265' cy='44' r='4'/%3E%3Cpath d='M28 92h22v11a8 8 0 0 1-8 8h-6a8 8 0 0 1-8-8z'/%3E%3Cpath d='M50 94h5a5 5 0 0 1 0 10h-5'/%3E%3Cpath d='M26 116h26'/%3E%3Ccircle cx='96' cy='100' r='10'/%3E%3Cpath d='M96 82v-6M96 124v-6M78 100h-6M120 100h-6M84 88l-4-4M112 116l-4-4M84 112l-4 4M112 84l-4 4'/%3E%3Cpath d='M150 84l5 11 12 2-9 8 2 12-10-6-10 6 2-12-9-8 12-2z'/%3E%3Cpath d='M204 80l-9 15h8l-3 14 11-16h-8z'/%3E%3Crect x='245' y='84' width='26' height='18' rx='2'/%3E%3Cpath d='M245 90h26M258 84v18M258 84c-4-8-12-4-8 2M258 84c4-8 12-4 8 2'/%3E%3Ccircle cx='36' cy='168' r='13'/%3E%3Cpath d='M36 160v9l6 3'/%3E%3Cpath d='M92 158a12 12 0 0 0-12 12h24a12 12 0 0 0-12-12z'/%3E%3Cpath d='M92 170v14a4 4 0 0 1-8 0'/%3E%3Ccircle cx='150' cy='166' r='14'/%3E%3Cpath d='M144 162v2M156 162v2M143 172c3 4 11 4 14 0'/%3E%3Cpath d='M196 176a12 12 0 0 1 10-19 9 9 0 0 1 9 8 7 7 0 0 1-1 14z'/%3E%3Cpath d='M254 156a8 8 0 1 1-6 13l-12 12-4-4 12-12a8 8 0 0 1 10-9z'/%3E%3Cpath d='M240 174l3 3M236 178l3 3'/%3E%3Cpath d='M40 236a10 10 0 0 1-14-14 12 12 0 1 0 14 14z'/%3E%3Crect x='78' y='224' width='30' height='20' rx='3'/%3E%3Cpath d='M78 231h30M93 224v20M93 224c-3-7-11-4-7 2M93 224c3-7 11-4 7 2'/%3E%3Cpath d='M142 218l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/%3E%3Cpath d='M196 244v-24M188 228l8-8 8 8'/%3E%3Ccircle cx='196' cy='250' r='2.5'/%3E%3Cpath d='M246 220a12 12 0 0 1 12 12c0 8-12 16-12 16s-12-8-12-16a12 12 0 0 1 12-12z'/%3E%3Ccircle cx='246' cy='232' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

.ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.ico-fill { fill: currentColor; stroke: none }

.avatar {
    display: grid; place-items: center;
    color: #fff; font-size: 18px; font-weight: 600;
    letter-spacing: .3px;
    user-select: none;
}
.chat-topo .avatar, .audio .avatar { font-size: 15px }
.foto-grande {
    display: grid; place-items: center;
    color: #fff; font-size: 72px; font-weight: 600;
    margin: 0 auto;
}
.foto-grande .ico { width: 96px; height: 96px; stroke-width: 1.3 }
.av-1 { background: #6b7c85 } .av-2 { background: #b95d3f } .av-3 { background: #3d7a5c }
.av-4 { background: #5b6bb5 } .av-5 { background: #8c5aa8 } .av-6 { background: #a8813d }
.av-7 { background: #4a7f96 } .av-8 { background: #a44a63 }

/* a "foto" das mensagens é vetor, para o mock não depender de arquivo */
.foto { background: linear-gradient(160deg, #d8c39a, #b2895a) }


/* ==========================================================================
   O resto do sistema no casco do WhatsApp Web
   Tokens e componentes de base vêm do mock de atendimento (copiados acima).
   Daqui para baixo é só o que a gestão precisa e a conversa não pedia.

   Regra do desenho: tela de gestão é o painel de Configurações do WhatsApp —
   menu à esquerda, conteúdo à direita. Onde há muitos registros, lista à
   esquerda e ficha à direita, exatamente como conversa e mensagem.
   ========================================================================== */

:root {
    --fundo:     #0b141a;   /* área de conteúdo */
    --cartao:    #111b21;
    --cartao-2:  #202c33;
}
:root[data-tema="claro"] {
    --fundo:     #f0f2f5;
    --cartao:    #ffffff;
    --cartao-2:  #ffffff;
}

/* --- Área de conteúdo --------------------------------------------------- */

.conteudo {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    background: var(--fundo);
    border-left: 1px solid var(--borda);
}

.conteudo-topo {
    height: 59px; flex: 0 0 59px;
    background: var(--topo);
    display: flex; align-items: center; gap: 14px;
    padding: 0 20px;
}
.conteudo-topo h2 { margin: 0; font-size: 17px; font-weight: 500; flex: 1 }
.conteudo-topo .sub { font-size: 13px; color: var(--tx-2) }

.conteudo-corpo { flex: 1; overflow-y: auto; padding: 22px 26px 40px }

/* Faixa de aviso geral (acesso encerrando, conexao fora do ar). Vive entre o topo
   e o corpo, e nunca dentro dele: no atendimento o corpo e flex row, e ali o
   aviso virava coluna e comia metade da tela do chat. */
.aviso-topo {
    flex: 0 0 auto;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
    padding: 8px 20px; font-size: 13px; line-height: 1.45;
    border-bottom: 1px solid var(--borda);
}
.aviso-topo strong { font-weight: 600 }
.aviso-topo a { color: inherit; text-decoration: underline }
.aviso-topo-erro { background: rgba(241, 92, 109, .16); color: #f4a2ab }
.aviso-topo-hora { background: rgba(255, 210, 121, .16); color: #ffd279 }
/* Conexao que caiu ha menos de 30 s: a piscada do `connecting`, que quase
   sempre volta sozinha (AvisoConexao). */
.aviso-topo-instavel { background: rgba(255, 210, 121, .16); color: #ffd279 }
:root[data-tema="claro"] .aviso-topo-erro { color: #a3202c }
:root[data-tema="claro"] .aviso-topo-hora { color: #7a5300 }
:root[data-tema="claro"] .aviso-topo-instavel { color: #7a5300 }
/* Prazo de atualizacao da ponte (075): a cor sobe com a proximidade, e vencido
   vira placa solida. */
.aviso-topo-prazo-longe   { background: rgba(255, 255, 255, .05); color: var(--tx-2) }
.aviso-topo-prazo-atencao { background: rgba(255, 210, 121, .16); color: #ffd279 }
.aviso-topo-prazo-perto   { background: rgba(255, 159, 67, .18);  color: #ffb26b }
.aviso-topo-prazo-critico { background: rgba(241, 92, 109, .16);  color: #f4a2ab }
.aviso-topo-prazo-vencido { background: #c9313f; color: #fff; border-bottom-color: #8f1f2a }
:root[data-tema="claro"] .aviso-topo-prazo-longe   { background: rgba(0, 0, 0, .04) }
:root[data-tema="claro"] .aviso-topo-prazo-atencao { color: #7a5300 }
:root[data-tema="claro"] .aviso-topo-prazo-perto   { color: #8a3d00 }
:root[data-tema="claro"] .aviso-topo-prazo-critico { color: #a3202c }
.conteudo-corpo.solto { padding: 0 }

.faixa { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px }
.faixa:first-child { margin-top: 0 }
.faixa h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .2px }
.faixa .conta { font-size: 13px; color: var(--tx-2) }
.faixa .fim { margin-left: auto; display: flex; gap: 8px; align-items: center }

/* --- Cartão ------------------------------------------------------------- */

.cartao {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 18px 20px;
}
.cartao + .cartao { margin-top: 12px }
.cartao h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600 }
.cartao p  { margin: 0; font-size: 13.5px; color: var(--tx-2); line-height: 19px }

.colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px }
.colunas-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px }
@media (max-width: 1280px) { .colunas-2 { grid-template-columns: 1fr } }

/* --- Métrica ------------------------------------------------------------ */

.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px }

.metrica {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
}
.metrica .rot { font-size: 13px; color: var(--tx-2) }
.metrica .num { font-size: 30px; font-weight: 600; line-height: 40px; letter-spacing: -.5px }
.metrica .var { font-size: 12.5px; color: var(--tx-2) }
.metrica .var b { font-weight: 600 }
.metrica .sobe b { color: var(--verde-2) }
.metrica .desce b { color: #f15c6d }
.metrica::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--verde);
}
.metrica.espera::after { background: #ffd279 }
.metrica.ruim::after   { background: #f15c6d }
.metrica.neutra::after { background: var(--tx-2); opacity: .4 }

/* --- Gráfico de barras -------------------------------------------------- */

.grafico { display: flex; align-items: flex-end; gap: 6px; height: 150px; margin-top: 8px }
.graf-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px }
.graf-barra {
    width: 100%;
    background: var(--verde);
    border-radius: 4px 4px 0 0;
    height: calc(var(--v) * 1%);
    min-height: 3px;
    opacity: .85;
}
.graf-col.pico .graf-barra { opacity: 1 }
.graf-col span { font-size: 11px; color: var(--tx-2) }

/* barra horizontal de proporção — usada em ranking */
.proporcao { display: flex; align-items: center; gap: 10px; padding: 7px 0 }
.proporcao .quem { width: 148px; font-size: 13.5px; flex: 0 0 148px }
.trilho { flex: 1; height: 8px; border-radius: 4px; background: rgba(134,150,160,.2) }
.cheio  { display: block; height: 8px; border-radius: 4px; background: var(--verde); width: calc(var(--v) * 1%) }
.proporcao .valor  { width: 62px; text-align: right; font-size: 13px; color: var(--tx-2) }

/* --- Tabela em linhas (nunca grade densa) ------------------------------- */

.tabela { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; overflow: hidden }

.linha-tab {
    display: flex; align-items: center; gap: 14px;
    width: 100%; text-align: left;
    padding: 12px 18px;
    border-bottom: 1px solid var(--borda);
    color: var(--tx);
}
.linha-tab:last-child { border-bottom: 0 }
.linha-tab:hover { background: var(--hover) }
.linha-tab .principal { flex: 1; min-width: 0 }
.linha-tab .titulo { display: block; font-size: 14.5px }
.linha-tab .sub { display: block; font-size: 12.5px; color: var(--tx-2); margin-top: 2px }
.linha-tab .num { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 13px; color: var(--tx-2) }
.linha-tab .col { flex: 0 0 auto; font-size: 13px; color: var(--tx-2) }
.linha-tab.cabeca { background: var(--cartao-2); color: var(--tx-2); font-size: 12px; text-transform: uppercase; letter-spacing: .4px }
.linha-tab.cabeca:hover { background: var(--cartao-2) }

/* --- Pill de estado ----------------------------------------------------- */

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 10px;
    border-radius: 12px;
    font-size: 12.5px;
    background: rgba(134,150,160,.16);
    color: var(--tx-2);
    white-space: nowrap;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor }
.pill-ok    { background: var(--verde-fraco); color: var(--verde-2) }
.pill-espera{ background: rgba(255,210,121,.16); color: #ffd279 }
.pill-erro  { background: rgba(241,92,109,.16); color: #f15c6d }
.pill-info  { background: rgba(83,189,235,.16); color: var(--tick) }
:root[data-tema="claro"] .pill-espera { background: #fff3d6; color: #a86a00 }
:root[data-tema="claro"] .pill-erro   { background: #fde8ea; color: #c0392b }
:root[data-tema="claro"] .pill-info   { background: #e3f2fd; color: #0369a1 }
.pill.sem-ponto::before { display: none }

/* --- Formulário --------------------------------------------------------- */

.campo-form { margin-bottom: 16px }
.campo-form label { display: block; font-size: 13px; color: var(--tx-2); margin-bottom: 6px }

.entrada-txt {
    width: 100%; height: 40px;
    background: var(--entrada);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 0 12px;
    outline: none;
    font-size: 14.5px;
}
:root[data-tema="claro"] .entrada-txt { background: #fff }
.entrada-txt:focus { border-color: var(--verde) }
textarea.entrada-txt { height: 84px; padding: 10px 12px; resize: vertical; line-height: 20px }

.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }

.chave {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--borda);
}
.chave:last-child { border-bottom: 0 }
.chave .txt { flex: 1 }
.chave .txt strong { display: block; font-size: 14.5px; font-weight: 500 }
.chave .txt small { font-size: 12.5px; color: var(--tx-2) }

.switch {
    width: 42px; height: 24px; flex: 0 0 42px;
    border-radius: 12px;
    background: rgba(134,150,160,.35);
    position: relative;
    transition: background .15s;
}
.switch::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}
.switch.on { background: var(--verde) }
.switch.on::after { transform: translateX(18px) }

/* Ficha de edição: formulário longo com o painel do meio servindo de índice.
   O cabeçalho diz de quem é a ficha — no meio de cinco cartões de opção, saber
   quem se está editando não pode depender de rolar até o topo. */
.ficha-cabeca {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--borda);
}
.ficha-cabeca .avatar { width: 42px; height: 42px; flex: 0 0 42px; font-size: 15px }
.ficha-cabeca-txt { min-width: 0 }
.ficha-cabeca-txt strong {
    display: block; font-size: 15px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ficha-cabeca-txt small { font-size: 12.5px; color: var(--tx-2) }

/* O .switch-campo é inline-flex; combinado com .chave, que é a linha inteira,
   ganha a largura de volta — senão o rótulo e o botão se espremem à esquerda. */
.chave.switch-campo { display: flex; width: 100% }

/* Âncora do índice: sem a margem, o cartão encosta na borda de cima do scroll. */
.cartao[id] { scroll-margin-top: 16px }

/* Sete dias curtos numa grade de 200px viram três colunas e uma linha órfã;
   estes cabem em uma. */
.checks-grade.compacta { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) }

/* --- Abas --------------------------------------------------------------- */

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 18px }
/* Sete abas (uma por ponte, mais as de comportamento) não cabem em tela de
   celular: rolam na horizontal em vez de quebrar em duas linhas, que empurraria
   o conteúdo para baixo da dobra. */
.abas { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none }
.abas::-webkit-scrollbar { height: 0 }
.aba-btn { white-space: nowrap }
.aba-btn {
    padding: 10px 14px;
    font-size: 14px;
    color: var(--tx-2);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.aba-btn.ativa { color: var(--verde-2); border-bottom-color: var(--verde) }

/* --- Conectar aparelho (QR) --------------------------------------------- */

.qr-tela { display: flex; gap: 46px; align-items: center; justify-content: center; padding: 40px 20px; flex-wrap: wrap }
.passos { list-style: none; margin: 0; padding: 0; max-width: 380px }
.passos li { display: flex; gap: 14px; padding: 11px 0; font-size: 15px; line-height: 21px }
.passos .n {
    flex: 0 0 26px; height: 26px; border-radius: 50%;
    background: var(--cartao-2); color: var(--tx-2);
    display: grid; place-items: center; font-size: 13px;
}
:root[data-tema="claro"] .passos .n { background: #f0f2f5 }

.qr-caixa {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    width: 268px; height: 268px;
    display: grid; place-items: center;
    position: relative;
}
.qr-caixa svg { width: 100%; height: 100% }
.qr-marca {
    position: absolute; inset: 0;
    display: grid; place-items: center;
}
.qr-marca span {
    width: 46px; height: 46px; border-radius: 10px;
    background: var(--verde); color: #fff;
    display: grid; place-items: center;
    border: 4px solid #fff;
}

/* --- Editor de fluxo ---------------------------------------------------- */

.canvas-fluxo {
    position: relative;
    height: 100%;
    min-height: 520px;
    background-image: radial-gradient(circle, rgba(134,150,160,.22) 1px, transparent 1px);
    background-size: 22px 22px;
    overflow: auto;
}
.no-fluxo {
    position: absolute;
    width: 218px;
    background: var(--cartao);
    border: 1px solid var(--borda-forte, var(--borda));
    border-radius: 10px;
    box-shadow: var(--sombra-menu);
    font-size: 13px;
    overflow: hidden;
}
.no-fluxo .no-topo {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: var(--cartao-2);
    font-size: 12.5px; font-weight: 600;
    border-bottom: 1px solid var(--borda);
}
.no-fluxo .no-corpo { padding: 10px; color: var(--tx-2); line-height: 18px }
.no-fluxo.inicio .no-topo { color: var(--verde-2) }
.no-fluxo.pergunta .no-topo { color: var(--tick) }
.no-fluxo.acao .no-topo { color: #ffd279 }
.no-fluxo.fim .no-topo { color: #f15c6d }
.no-fluxo .opcao {
    display: flex; justify-content: space-between;
    padding: 5px 10px;
    border-top: 1px solid var(--borda);
    color: var(--tx);
}
.paleta-no {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 11px 16px;
    text-align: left;
    border-bottom: 1px solid var(--borda);
    color: var(--tx);
}
.paleta-no:hover { background: var(--hover) }
.paleta-no small { display: block; color: var(--tx-2); font-size: 12px; margin-top: 2px }

/* --- Editor de modelo de mensagem (templates da API oficial) -------------- */
/* Editor à esquerda, celular à direita. A prévia usa as cores do WhatsApp de
   propósito, e não as do tema: o ponto dela é mostrar como o cliente vai ver. */

.me-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start }
.me-layout > .me-celular-col { position: sticky; top: 12px }

.me-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px }
.me-tipo {
    text-align: left; padding: 12px 14px; border-radius: 10px; cursor: pointer;
    border: 2px solid rgba(134,150,160,.35); background: transparent; color: inherit; font: inherit;
}
.me-tipo strong { display: block; font-size: 15px }
.me-tipo span { display: block; font-size: 12px; opacity: .75; margin-top: 2px }
.me-tipo.ativo { border-color: #21c063; background: rgba(33,192,99,.08) }

.me-secao { margin-bottom: 18px }
.me-secao > h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; opacity: .7 }
.me-barra { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px }
.me-fmt { padding: 4px 10px !important; min-height: 0 !important; font-size: 13px !important }
.me-exemplos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 10px }
.me-arquivo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px }
.me-arquivo-nome { font-size: 13px; opacity: .8; word-break: break-all }
.me-botoes { display: flex; flex-direction: column; gap: 10px }
.me-botao, .me-cartao { border: 1px solid rgba(134,150,160,.35); border-radius: 10px; padding: 10px 12px }
.me-cartao { margin-bottom: 12px }
.me-botao-topo, .me-cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px }
.me-botao-tipo { font-weight: 600; font-size: 14px }

/* O celular */
.mb-celular { width: 340px; max-width: 100%; border-radius: 28px; padding: 10px; background: #1f2c34; box-shadow: 0 8px 28px rgba(0,0,0,.35) }
.mb-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #008069; color: #fff; border-radius: 18px 18px 0 0; font-weight: 600 }
.mb-topo-avatar { width: 30px; height: 30px; border-radius: 50%; background: #dfe5e7; display: inline-block }
.mb-tela {
    min-height: 420px; max-height: 620px; overflow-y: auto; padding: 14px 10px 18px;
    background: #efeae2; border-radius: 0 0 18px 18px; color: #111b21;
    font: 14.2px/1.4 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
.mb-balao {
    position: relative; background: #fff; border-radius: 0 8px 8px 8px; padding: 6px 7px 8px 9px;
    max-width: 92%; box-shadow: 0 1px .5px rgba(11,20,26,.13); word-wrap: break-word;
}
.mb-balao::before {
    content: ""; position: absolute; left: -8px; top: 0;
    border-top: 0 solid transparent; border-right: 8px solid #fff; border-bottom: 10px solid transparent;
}
.mb-balao.mb-com-botoes { border-radius: 0 8px 0 0 }
.mb-cab { font-weight: 700; margin-bottom: 4px }
.mb-texto { white-space: normal; padding-right: 42px }
.mb-texto code { font-family: Consolas, monospace; font-size: 13px }
.mb-rodape { color: #667781; font-size: 13px; margin-top: 4px; padding-right: 42px }
.mb-hora { position: absolute; right: 8px; bottom: 4px; font-size: 11px; color: #667781 }
.mb-var { background: #fff3c4; color: #8a6d00; border-radius: 3px; padding: 0 2px }
.mb-dica { color: #8696a0; font-style: italic }
.mb-midia { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 6px; margin-bottom: 6px; background: #d1d7db }
.mb-midia-vazia { height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 34px; color: #8696a0 }
.mb-midia-vazia span { font-size: 12px; margin-top: 4px }
.mb-video { position: relative }
.mb-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%);
    width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.mb-doc { display: flex; gap: 10px; align-items: center; background: #f5f6f6; border-radius: 6px; padding: 10px; margin-bottom: 6px }
.mb-doc-ico svg { width: 30px; height: 30px; fill: #e94235 }
.mb-doc small { display: block; color: #667781; font-size: 11px }
.mb-botoes { max-width: 92%; background: #fff; border-radius: 0 0 8px 8px; box-shadow: 0 1px .5px rgba(11,20,26,.13) }
.mb-botao {
    display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px;
    border-top: 1px solid #e9edef; color: #027eb5; font-size: 14px; font-weight: 500;
}
.mb-botao svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 16px }
.mb-carrossel { display: flex; gap: 8px; overflow-x: auto; margin-top: 8px; padding-bottom: 6px; scroll-snap-type: x mandatory }
.mb-cartao {
    flex: 0 0 230px; scroll-snap-align: start; background: #fff; border-radius: 8px; padding: 6px 6px 0;
    box-shadow: 0 1px .5px rgba(11,20,26,.13);
}
.mb-cartao .mb-texto { padding: 0 4px 8px }
.mb-cartao .mb-botoes { max-width: none; box-shadow: none; margin: 0 -6px }

@media (max-width: 980px) {
    .me-layout { grid-template-columns: 1fr }
    .me-layout > .me-celular-col { position: static }
}

/* --- Entrar ------------------------------------------------------------- */

.login-tela[hidden] { display: none }
.login-tela {
    position: fixed; inset: 0;
    background: var(--fundo);
    display: flex; flex-direction: column;
}
.login-faixa { height: 222px; background: var(--verde); flex: 0 0 222px }
:root[data-tema="claro"] .login-faixa { background: #00a884 }

.login-caixa {
    width: min(680px, calc(100% - 40px));
    margin: -160px auto 0;
    background: var(--cartao);
    border-radius: 12px;
    box-shadow: 0 17px 50px rgba(11,20,26,.19), 0 12px 15px rgba(11,20,26,.24);
    padding: 42px 56px 46px;
    position: relative;
}
.login-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; color: var(--tx-2) }
.login-marca .logo {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--verde); color: #fff;
    display: grid; place-items: center;
}
.login-marca strong { font-size: 13px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase }
.login-caixa h1 { margin: 0 0 24px; font-size: 26px; font-weight: 400; letter-spacing: -.3px }
.login-rodape { text-align: center; color: var(--tx-2); font-size: 13px; padding: 26px 0 }

/* --- Entrar: o cartão de duas colunas ----------------------------------- */

/* Largo só no login. O mesmo casco serve a troca de senha, que é um campo e um
   botão — 880px lá dentro seria um cartão vazio. */
.login-caixa-larga { width: min(880px, calc(100% - 40px)); padding: 40px 48px 44px }

.login-duo { display: grid; grid-template-columns: 1fr 268px; gap: 46px }

.login-form h1 { margin: 0 0 6px; font-size: 26px; font-weight: 400; letter-spacing: -.3px }
.login-sub { margin: 0 0 24px; color: var(--tx-2); font-size: 14px }

.campo-login { margin-bottom: 14px }

.entrada-login {
    display: flex; align-items: center; gap: 12px;
    height: 58px;
    background: var(--entrada);
    border: 1.5px solid transparent;
    border-radius: 12px;
    padding: 0 14px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
:root[data-tema="claro"] .entrada-login { background: #f4f6f7 }

/* O foco é anel, não só borda: a borda sozinha, com 1,5px num cartão claro,
   não se distingue de campo comum a um braço de distância. */
.entrada-login:focus-within {
    border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(0,168,132,.16);
    background: var(--entrada);
}
:root[data-tema="claro"] .entrada-login:focus-within { background: #fff }

.campo-ico { width: 21px; height: 21px; color: var(--tx-2); flex: 0 0 21px; transition: color .15s }
.entrada-login:focus-within .campo-ico { color: var(--verde) }

/* O rótulo flutuante: em repouso ele é o placeholder, com texto ele vira
   etiqueta em cima. Um elemento no lugar de dois, e o campo preenchido continua
   dizendo o que é. */
.campo-cx { position: relative; flex: 1; min-width: 0; height: 100%; display: block }
.campo-cx input {
    width: 100%; height: 100%;
    background: none; border: 0; outline: none;
    padding: 20px 0 6px;
    font-size: 15.5px; color: var(--tx);
}
.campo-cx label {
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    color: var(--tx-2); font-size: 15.5px;
    pointer-events: none;
    transition: top .14s, font-size .14s, color .14s, letter-spacing .14s;
}
.campo-cx input:focus + label,
.campo-cx input:not(:placeholder-shown) + label {
    top: 11px;
    transform: none;
    font-size: 11.5px; letter-spacing: .4px;
}
.campo-cx input:focus + label { color: var(--verde) }

/* O amarelo do autofill do Chrome apaga o campo inteiro no tema escuro. Não há
   como pintar o fundo dele: só a sombra interna vence. */
.campo-cx input:-webkit-autofill,
.campo-cx input:-webkit-autofill:hover,
.campo-cx input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--tx);
    -webkit-box-shadow: 0 0 0 60px var(--entrada) inset;
    transition: background-color 9999s;
}
:root[data-tema="claro"] .campo-cx input:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px #fff inset }

.entrada-login input:disabled { opacity: .5 }

.olho {
    color: var(--tx-2);
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    flex: 0 0 34px;
    transition: color .15s, background .15s;
}
.olho svg { width: 20px; height: 20px }
.olho:hover { color: var(--tx); background: rgba(134,150,160,.14) }
.olho.aberto { color: var(--verde) }

/* Campo em vermelho é para o que a pessoa deixou em branco. Recusa de senha
   NÃO marca campo — ver o comentário na view. */
.campo-login.ruim .entrada-login { border-color: #f15c6d }
.campo-login.ruim .entrada-login:focus-within { box-shadow: 0 0 0 3px rgba(241,92,109,.16) }
.campo-login.ruim .campo-ico { color: #f15c6d }
.campo-nota { margin-top: 6px; font-size: 12.5px; color: #f15c6d }
:root[data-tema="claro"] .campo-nota { color: #dc2626 }

.campo-caps { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12.5px; color: #ffd279 }
.campo-caps svg { width: 14px; height: 14px }
:root[data-tema="claro"] .campo-caps { color: #a86a00 }

.login-aviso {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 13px;
    border-radius: 8px;
    font-size: 13.5px; line-height: 19px;
    margin-bottom: 20px;
}
.login-aviso svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px }
.login-aviso strong { display: block; font-weight: 600 }
.login-aviso span { opacity: .9 }
.login-aviso.erro   { background: rgba(241,92,109,.12); color: #f15c6d }
.login-aviso.espera { background: rgba(255,210,121,.12); color: #ffd279 }
:root[data-tema="claro"] .login-aviso.erro   { background: #fde8ea; color: #c0392b }
:root[data-tema="claro"] .login-aviso.espera { background: #fff3d6; color: #a86a00 }

.login-fim { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px }
.login-lembrar { display: flex; align-items: center; gap: 8px; color: var(--tx-2); font-size: 13.5px; cursor: pointer }
.login-lembrar input { width: 16px; height: 16px; accent-color: var(--verde); cursor: pointer }

.login-btn { height: 48px; padding: 0 34px; border-radius: 24px; font-size: 15px; min-width: 152px; justify-content: center }
.login-btn[disabled] { opacity: .55; cursor: not-allowed; filter: none }

.login-giro {
    width: 17px; height: 17px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-girar .7s linear infinite;
}
@keyframes login-girar { to { transform: rotate(360deg) } }

.login-esqueci { margin: 18px 0 0; font-size: 13.5px; color: var(--tx-2) }
.login-esqueci button { color: var(--verde-2); font-size: 13.5px }
.login-esqueci button:hover { text-decoration: underline }

.login-marca-col { border-left: 1px solid var(--borda); padding-left: 40px }
.login-marca-col img { display: block; height: 44px; width: auto; margin-bottom: 18px }
.login-marca-col h2 {
    margin: 0 0 4px;
    font-size: 13px; font-weight: 600;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--tx-2);
}
.login-marca-col p { margin: 0; font-size: 19px; line-height: 26px; font-weight: 400 }

.login-selo {
    margin-top: 26px !important; padding-top: 18px;
    border-top: 1px solid var(--borda);
    font-size: 12.5px !important; line-height: 18px !important; color: var(--tx-2);
}
.login-selo strong { color: var(--tx); font-weight: 500 }

@media (max-width: 820px) {
    .login-caixa-larga { padding: 32px 26px 34px }
    .login-duo { grid-template-columns: 1fr; gap: 30px }
    .login-marca-col { border-left: 0; border-top: 1px solid var(--borda); padding: 26px 0 0 }
    .login-marca-col img { height: 36px }
}

/* --- Log de acesso ------------------------------------------------------ */

.log { position: relative; padding-left: 26px }
.log::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--borda) }
.log-item { position: relative; padding: 9px 0 }
.log-item::before {
    content: ""; position: absolute; left: -25px; top: 15px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--verde); border: 2px solid var(--fundo);
}
.log-item.falha::before { background: #f15c6d }
.log-item .quando { font-size: 12px; color: var(--tx-2) }
.log-item .oque { font-size: 14px; margin-top: 1px }

/* --- Vazio -------------------------------------------------------------- */

.vazio { text-align: center; color: var(--tx-2); padding: 60px 20px }
.vazio .ico { width: 54px; height: 54px; margin: 0 auto 14px; opacity: .5 }


/* --- Menu de gestão no painel esquerdo ---------------------------------- */

.menu-titulo { padding: 18px 22px 8px; font-size: 13px; color: var(--verde-2) }

.menu-item {
    display: flex; align-items: center; gap: 18px;
    width: 100%; padding: 13px 22px;
    text-align: left; color: var(--tx);
}
.menu-item:hover { background: var(--hover) }
.menu-item.ativo { background: var(--ativo) }
:root[data-tema="claro"] .menu-item.ativo { background: #f0f2f5 }
.menu-item .rot { flex: 1; font-size: 15px }
.menu-item .conta { font-size: 12.5px; color: var(--tx-2) }
.menu-item svg { color: var(--tx-2) }
.menu-item.ativo svg { color: var(--verde-2) }


/* no claro o verde escurece: o número do badge precisa de branco para aparecer */
:root[data-tema="claro"] .rail-badge,
:root[data-tema="claro"] .badge { color: #fff }

/* cartão de conexão não estica junto com o vizinho mais alto */
.colunas { align-items: start }


/* --- Correções de layout da revisão ------------------------------------- */

/* dentro de grid os cards são irmãos: o empilhamento vertical desalinhava a
   segunda e a terceira coluna em 12px */
.colunas > .cartao + .cartao,
.colunas-2 > .cartao + .cartao { margin-top: 0 }
.colunas { align-items: stretch }
.colunas > .cartao { height: 100% }

/* conteúdo não acompanha monitor largo: linha de 1.600px ninguém lê */
.conteudo-corpo { width: 100%; max-width: 1280px; margin-inline: auto }
.conteudo-corpo.estreito { max-width: 780px }
.conteudo-corpo.solto { max-width: none }

/* pill nunca encolhe quando o título ao lado quebra em duas linhas */
.cartao .pill, .conteudo-topo .pill { flex: 0 0 auto }

/* o ponto do log fica sobre o cartão, não sobre o fundo da área */
.log-item::before { border-color: var(--cartao) }

/* par rótulo/valor fora da tabela também é cinza */
.chave .col { font-size: 13px; color: var(--tx-2) }


/* switch dentro de célula de tabela é span inline: sem display a chave sumia */
.switch { display: inline-block; vertical-align: middle }

/* barra de proporção parava de comunicar quando esticava a tela inteira */
.trilho { max-width: 560px }


/* coluna de marca com trilho fixo: com o pill de largura variável, a descrição
   ao lado dançava de linha para linha */
.marca { flex: 0 0 128px; display: flex; align-items: center }


/* ==========================================================================
   nova-extra.css — o que o mock não tinha
   Concatenado ao nova.css por gerar-assets.php. Editável como CSS normal.
   ========================================================================== */

a { color: var(--link); text-decoration: none }
a:hover { text-decoration: underline }

/* O switch do mock é enfeite; aqui ele é um checkbox de verdade, escondido
   atrás do desenho — o clique tem de marcar o campo, não só pintar a chave. */
.switch-campo { cursor: pointer; display: inline-flex }
.switch-campo input { position: absolute; opacity: 0; width: 0; height: 0 }
.switch-campo input:checked + .switch { background: var(--verde) }
.switch-campo input:checked + .switch::after { transform: translateX(18px) }
.switch-campo input:focus-visible + .switch { outline: 2px solid var(--verde-2); outline-offset: 2px }

/* Filtro e menu viram <a> no sistema: sem isto o link fica sublinhado e azul. */
.filtro, .menu-item, .rail-btn { text-decoration: none; color: inherit }
.filtro:hover, .menu-item:hover, .rail-btn:hover { text-decoration: none }
.menu-item.ativo { background: var(--ativo) }

.vazio p { margin: 0 }

/* Foco visível: o mock não navega por teclado, o sistema sim. */
:focus-visible { outline: 2px solid var(--verde-2); outline-offset: 2px }


/* ==========================================================================
   Atendimento — veste as classes que o JS já gera

   A tela de atendimento monta a lista, os balões e o painel do contato em
   JavaScript, com as classes do `app.css`. Reescrever esse JS para as classes
   do mock seria mexer no código que envia mensagem, grava áudio e faz polling
   — muito risco para uma troca de visual.

   Então é o contrário: as classes de lá (`.conversa`, `.balao`, `.fila-barra`,
   `.inbox-envio`…) recebem aqui o desenho do mock. O JS fica intacto, e a
   equivalência com o mock está anotada em cada bloco.
   ========================================================================== */

/* --- Moldura: chat + painel do contato dentro do conteúdo ---------------- */

/* a área de conteúdo vira moldura do chat: sem padding, sem rolagem própria */
.conteudo-corpo.solto { display: flex; overflow: hidden; padding: 0 }
.atendimento { display: flex; flex: 1; min-height: 0; min-width: 0 }

/* `#painel` é o chat (nome que vem do JS antigo) — equivale a `.chat` do mock */
#painel {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    background: var(--chat);
    position: relative;
}

/* O papel de parede mora AQUI, e não na lista de mensagens, porque é este
   elemento que não rola.
   Dentro de uma caixa com `overflow-y:auto`, o bloco que contém um filho
   absoluto é a caixa de rolagem inteira — não a parte visível dela. O `inset:0`
   esticava o rabisco até a altura de toda a conversa e ele descia junto com as
   mensagens; em conversa longa, o começo do papel de parede ficava metros acima
   da tela. Preso ao pai, ele fica parado e só o texto anda.
   Cabeçalho, barra da fila, citação e composer têm fundo próprio, então
   continuam cobrindo o rabisco. */
#painel::before {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--doodle);
    background-size: 366px 366px;
    opacity: .09;
    pointer-events: none;
    z-index: 0;
}
:root[data-tema="claro"] #painel::before { filter: invert(1); opacity: .08 }
#painel > * { position: relative; z-index: 1 }

/* Sem conversa aberta o painel é liso, como era antes de o rabisco subir de
   nível — é a tela de "escolha uma conversa", não um chat vazio. */
#painel:has(.inbox-vazio-grande)::before { display: none }

.inbox-vazio {
    padding: 30px 20px;
    text-align: center;
    color: var(--tx-2);
    font-size: 14px;
}
.inbox-vazio-grande {
    flex: 1;
    display: grid; place-items: center;
    background: var(--chat);
}
.inbox-vazio-icone { font-size: 42px; opacity: .5; margin-bottom: 10px }

/* --- Lista de conversas (painel do meio) --------------------------------- */

.inbox-busca { padding: 0 12px 8px; display: flex; align-items: center; gap: 8px }

.inbox-busca input[type="search"] {
    flex: 1; height: 35px;
    background: var(--entrada);
    border: 0; border-radius: 8px;
    padding: 0 12px;
    outline: none;
    font-size: 15px;
    color: var(--tx);
}
:root[data-tema="claro"] .inbox-busca input[type="search"] { background: #f0f2f5 }
.inbox-busca input::placeholder { color: var(--tx-2) }

.inbox-busca select {
    height: 32px;
    background: var(--entrada);
    color: var(--tx);
    border: 0; border-radius: 16px;
    padding: 0 8px;
    font-size: 13px;
    max-width: 46%;
}
:root[data-tema="claro"] .inbox-busca select { background: #f0f2f5 }

/* abas = os filtros em pílula do mock */
.inbox-abas {
    display: flex; gap: 8px;
    padding: 0 12px 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.inbox-abas::-webkit-scrollbar { display: none }

.aba {
    height: 32px; padding: 0 12px;
    border: 0; border-radius: 16px;
    background: var(--entrada);
    color: var(--tx-2);
    font-size: 14px; white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
    cursor: pointer;
}
:root[data-tema="claro"] .aba { background: #f0f2f5 }
.aba.ativa { background: var(--verde-fraco); color: var(--verde-2) }

.aba-n {
    font-size: 12px; font-weight: 600;
    background: rgba(134,150,160,.25);
    border-radius: 9px; padding: 0 6px;
}
.aba.ativa .aba-n { background: rgba(33,192,99,.22) }

.conversas { flex: 1; overflow-y: auto; padding-bottom: 12px }

/* Fim da lista: a página seguinte do arquivo. Discreto de propósito — é o
   rodapé da rolagem, não uma ação da tela. */
.conversas-mais { padding: 14px 15px 22px; text-align: center }
.conversas-mais button {
    width: 100%; height: 36px;
    border: 1px solid var(--borda);
    border-radius: 18px;
    color: var(--tx-2);
    font-size: 13.5px;
}
.conversas-mais button:hover:not([disabled]) { background: var(--hover); color: var(--tx) }
.conversas-mais button[disabled] { opacity: .6; cursor: progress }

.conversa {
    display: flex; align-items: center; gap: 15px;
    width: 100%; min-height: 72px;
    padding: 8px 15px 8px 13px;
    background: none; border: 0;
    text-align: left; position: relative;
    cursor: pointer;
    color: var(--tx);
}
.conversa:hover { background: var(--hover) }
.conversa.ativa { background: var(--ativo) }
:root[data-tema="claro"] .conversa.ativa { background: #f0f2f5 }

.conversa::after {
    content: ""; position: absolute;
    left: 77px; right: 0; bottom: 0;
    border-bottom: 1px solid var(--borda);
}

.conversa-avatar {
    width: 49px; height: 49px; flex: 0 0 49px;
    border-radius: 50%;
    object-fit: cover;
}
.conversa-avatar-txt {
    display: grid; place-items: center;
    color: #fff; font-size: 17px; font-weight: 600;
    user-select: none;
}

.conversa-corpo { flex: 1; min-width: 0 }
.conversa-topo { display: flex; align-items: center; gap: 6px }
.conversa-nome {
    font-size: 17px; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conversa-hora { font-size: 12px; color: var(--tx-2); white-space: nowrap }

/* Grupo na lista: avatar próprio, etiqueta colada no nome e faixa lateral.
   Antes era só um chip no rodapé, com o mesmo peso da etiqueta da conexão —
   e por isso ninguém percebia que a conversa não era de um cliente.

   Laranja (`--et-1`), e não o rosa que o chip antigo usava: laranja é a cor da
   casa e salta mais na lista, que é o ponto todo desta marca. */
.conversa-e-grupo { box-shadow: inset 3px 0 0 var(--et-1) }
.conversa-avatar-grupo { background: var(--et-1); font-size: 23px }
.tag-grupo {
    flex: none;
    background: var(--et-1);
    /* Texto escuro no tema escuro: lá o `--et-1` é um laranja vivo (#ff9500) e
       branco em cima dele fica ilegível. No claro ele é queimado (#c2410c) e a
       relação se inverte. */
    color: #2a1c07;
    font-size: 10px; font-weight: 700; letter-spacing: .06em;
    padding: 1px 6px; border-radius: 4px;
    line-height: 16px;
}
:root[data-tema="claro"] .tag-grupo { color: #fff }

.conversa-previa {
    font-size: 14px; color: var(--tx-2);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* rodapé = a linha de etiquetas do mock */
.conversa-rodape { display: flex; align-items: center; gap: 5px; margin-top: 5px; flex-wrap: wrap }

.chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; line-height: 16px;
    padding: 1px 7px;
    border-radius: 4px;
    background: rgba(134,150,160,.16);
    color: var(--tx-2);
    border: 0;
    white-space: nowrap;
}
.chip-departamento { color: var(--tick) }
.chip-fila         { color: var(--et-1) }
.chip-meu          { color: var(--verde-2) }
.chip-vazio        { color: var(--tx-2) }
.chip-conexao      { color: var(--tx) }

.conversa-badge {
    min-width: 20px; height: 20px; padding: 0 6px;
    margin-left: auto;
    border-radius: 10px;
    background: var(--verde-2); color: #111b21;
    font-size: 12px; font-weight: 700;
    display: grid; place-items: center;
}
:root[data-tema="claro"] .conversa-badge { color: #fff }

/* --- Cabeçalho do chat --------------------------------------------------- */

.inbox-cabecalho {
    height: 59px; flex: 0 0 59px;
    background: var(--topo);
    border-left: 1px solid var(--borda);
    display: flex; align-items: center; justify-content: space-between;
    gap: 15px; padding: 0 16px;
    position: relative; z-index: 2;
}
.inbox-cabecalho strong { font-size: 16px; font-weight: 500 }

/* Abre o painel do contato. Tem borda e nome porque é a porta para a ficha, o
   histórico e as tags — e, sem isso, era um "Info" de letra pequena ao lado do
   nome do cliente, que ninguém lê. */
.btn-contato {
    flex: none;
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 15px;
    border: 1px solid var(--borda);
    border-radius: 19px;
    background: none;
    color: var(--tx);
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.btn-contato:hover { background: var(--hover) }

/* Painel estreito: fica só o ícone, que aqui já é conhecido — quem chegou a
   esta largura já usou o botão inteiro antes. */
@media (max-width: 1100px) {
    .btn-contato { padding: 0 12px; gap: 0; font-size: 0 }
    .btn-contato span { font-size: 17px }
}
.inbox-cabecalho-txt { flex: 1; min-width: 0 }
.inbox-cabecalho-txt strong,
.inbox-cabecalho-txt .celula-sub {
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.celula-sub { font-size: 13px; color: var(--tx-2); margin-top: 1px }
.origem-anuncio a { color: inherit; text-decoration: none; }
.origem-anuncio a:hover { text-decoration: underline; }

/* A foto do contato, à esquerda do nome. As iniciais ficam sempre atrás: se a
   foto falhar ao carregar, o JS só tira a <img> e o que sobra já é o certo —
   sem `onerror` remontando HTML. */
.inbox-avatar {
    position: relative; overflow: hidden;
    width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff; font-size: 14px; font-weight: 600;
    letter-spacing: .3px;
    user-select: none;
    background: var(--entrada);
}
.inbox-avatar img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* --- Mensagens ----------------------------------------------------------- */

/* Transparente de propósito: o papel de parede é do `#painel`, que não rola.
   Fundo aqui taparia o rabisco. */
.inbox-mensagens {
    flex: 1;
    overflow-y: auto;
    padding: 12px 6%;
    background: none;
    position: relative;
}

.dia-separador { display: flex; justify-content: center; margin: 12px 0 }
.dia-separador span,
.dia-separador {
    color: var(--tx-2);
}
.dia-separador > * {
    background: var(--sistema);
    color: var(--tx-2);
    font-size: 12.5px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .3px;
    padding: 5px 12px;
    border-radius: 7.5px;
    box-shadow: var(--sombra-bolha);
}

.mensagens-anteriores { display: flex; justify-content: center; margin: 8px 0 14px }
.mensagens-anteriores button {
    background: var(--sistema);
    color: var(--tx-2);
    border: 0; border-radius: 7.5px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    box-shadow: var(--sombra-bolha);
}

/* --- Balões -------------------------------------------------------------- */

.balao {
    position: relative;
    max-width: 65%;
    width: fit-content;
    background: var(--entrada-b);
    border-radius: 7.5px;
    padding: 6px 9px 7px 9px;
    margin: 2px 0;
    box-shadow: var(--sombra-bolha);
    font-size: 14.2px; line-height: 19px;
    word-wrap: break-word;
    color: var(--tx);
}
.balao.enviada  { background: var(--saida); margin-left: auto }
.balao.recebida { margin-right: auto }

/* o rabinho, como no app: só quando muda o lado */
.balao.recebida::after,
.balao.enviada::after {
    content: ""; position: absolute; top: 0;
    width: 8px; height: 13px;
}
.balao.recebida::after {
    left: -8px;
    background: var(--entrada-b);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.balao.enviada::after {
    right: -8px;
    background: var(--saida);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.balao.recebida + .balao.recebida::after,
.balao.enviada + .balao.enviada::after { display: none }
.balao.recebida + .balao.recebida { border-top-left-radius: 7.5px }
.balao.enviada + .balao.enviada { border-top-right-radius: 7.5px }
.balao.recebida { border-top-left-radius: 0 }
.balao.enviada { border-top-right-radius: 0 }

.balao-autor { display: block; font-size: 12.8px; font-weight: 500; color: #06cf9c; margin-bottom: 2px }
:root[data-tema="claro"] .balao-autor { color: #007d6d }

.balao-texto { display: block; white-space: pre-wrap; overflow-wrap: anywhere }
/* Link mandado na conversa: sublinhado como no WhatsApp, na cor do proprio
   balao para nao brigar com os dois temas. */
.balao-texto a { color: inherit; text-decoration: underline }

/* Mensagem editada. O balao mostra as duas versoes — o que o cliente leu na
   hora e o que vale agora —, e o texto antigo precisa parecer antigo: riscado,
   apagado e menor, para ninguem ler os dois como se fossem duas frases ditas
   em seguida. */
.balao-antes {
    display: block;
    opacity: .55;
    text-decoration: line-through;
    font-size: 13.5px;
}
.balao-editado {
    display: block;
    margin: 2px 0 3px;
    font-size: 11.5px;
    text-transform: lowercase;
    opacity: .7;
}

/* Menção em grupo. Enquanto é só o LID (`@206214365470721`) fica apagada — é um
   número que não identifica ninguém; com nome no lugar, ganha o azul de menção
   do WhatsApp. */
.mencao { color: var(--tx-2) }
.mencao-nomeada { color: var(--tick); font-weight: 500 }

/**
 * O rodapé — de onde veio, data, hora e os tiques — em linha própria, embaixo
 * do texto e encostado à direita.
 *
 * Já foi `float: right` para caber na última linha do texto, como o app faz.
 * Isso só funciona enquanto sobra espaço nela: com o texto ocupando a linha
 * inteira o float descia e as margens negativas o jogavam para fora do balão.
 * A linha própria não tem esse limite — cabe sempre, com qualquer texto e com
 * qualquer largura de rodapé (a origem faz ele variar bastante).
 */
.balao-hora {
    display: flex; align-items: center; justify-content: flex-end; gap: 3px;
    margin-top: 3px;
    font-size: 11px;
    color: var(--tx-hora);
    line-height: 15px;
    white-space: nowrap;
}
.balao-hora .tick-lido { color: #53bdeb; }
.balao-origem {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    opacity: .8;
}

.balao-img, .balao-video {
    max-width: 330px; width: 100%;
    border-radius: 6px; display: block;
    margin: -3px -4px 4px -6px;
}
.balao-audio-linha { display: flex; align-items: center; gap: 6px; margin: 2px 0 }
.balao-audio { width: 260px; max-width: 100%; min-width: 0 }
.balao-audio-vel {
    flex: 0 0 auto; min-width: 40px; padding: 5px 8px;
    border: 0; border-radius: 999px; background: rgba(255,255,255,.12);
    color: inherit; font-size: 12px; font-weight: 700; line-height: 1;
    cursor: pointer;
}
.balao-audio-vel:hover { background: rgba(255,255,255,.22) }
:root[data-tema="claro"] .balao-audio-vel { background: rgba(11,20,26,.08) }
:root[data-tema="claro"] .balao-audio-vel:hover { background: rgba(11,20,26,.16) }

.balao-doc {
    display: flex; align-items: center; gap: 12px;
    background: rgba(0,0,0,.18);
    border-radius: 6px;
    padding: 11px 12px;
    margin-bottom: 4px;
    color: inherit;
}
:root[data-tema="claro"] .balao-doc { background: rgba(11,20,26,.04) }

.balao-citada {
    display: flex; flex-direction: column;
    background: rgba(0,0,0,.18);
    border-left: 4px solid #06cf9c;
    border-radius: 5px;
    padding: 5px 8px;
    margin-bottom: 4px;
    cursor: pointer;
}
:root[data-tema="claro"] .balao-citada { background: rgba(11,20,26,.05) }
.balao-citada-autor { font-size: 12.8px; color: #06cf9c; margin-bottom: 2px }
.balao-citada-texto {
    font-size: 13px; color: var(--tx-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* A etiqueta pendura 13px abaixo do balão: sem folga embaixo, o balão
   seguinte (posicionado e depois no DOM) pinta por cima e corta o emoji. */
.balao.tem-reacao { margin-bottom: 18px }

.balao-reacao {
    position: absolute; bottom: -13px; left: 8px;
    z-index: 1;
    background: var(--entrada-b);
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 1px 6px;
    font-size: 12px;
    box-shadow: var(--sombra-bolha);
    white-space: nowrap;
    cursor: pointer;
}
.balao.enviada .balao-reacao { left: auto; right: 8px }

/* Encaminhada: a marca vem antes do conteúdo, como no WhatsApp — saber que
   aquilo é de outra pessoa depois de ler já é tarde. */
.balao-enc {
    display: flex; align-items: center; gap: 4px;
    font-size: 12.5px; font-style: italic;
    color: var(--tx-2);
    margin-bottom: 3px;
}
.balao-enc span { opacity: .85 }

/* --- Escolher para quem encaminhar -------------------------------------- */

.enc { text-align: left }
.enc-previa {
    margin: 0 0 12px;
    padding: 8px 10px;
    background: var(--entrada);
    border-radius: 8px;
    font-size: 13px; color: var(--tx-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.enc-busca {
    width: 100%; height: 38px;
    background: var(--entrada);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px; color: var(--tx);
    outline: none;
}
.enc-busca:focus { border-color: var(--verde) }

.enc-lista {
    margin-top: 10px;
    max-height: 280px; overflow-y: auto;
    border: 1px solid var(--borda);
    border-radius: 8px;
}
.enc-lista .muted { padding: 14px; margin: 0; text-align: center }

.enc-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 10px 12px;
    text-align: left; color: var(--tx);
    border-bottom: 1px solid var(--borda);
}
.enc-item:last-child { border-bottom: 0 }
.enc-item:hover { background: var(--hover) }
.enc-item.escolhida { background: var(--verde-fraco) }
.enc-nome { flex: 1; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.enc-marca { color: var(--verde-2); opacity: 0; font-weight: 700 }
.enc-item.escolhida .enc-marca { opacity: 1 }

.enc-conta { margin: 10px 0 0; font-size: 12.5px; color: var(--tx-2); text-align: left }

.balao-acoes {
    position: absolute; top: 2px; right: 4px;
    display: flex; gap: 2px;
    opacity: 0;
    transition: opacity .12s;
}
.balao:hover .balao-acoes, .balao-acoes:focus-within { opacity: 1 }
.balao-acao {
    width: 26px; height: 26px;
    border: 0; border-radius: 50%;
    background: var(--topo);
    color: var(--tx-2);
    cursor: pointer;
    font-size: 13px;
    box-shadow: var(--sombra-bolha);
}
.balao-acao:hover { color: var(--tx) }

.balao-destacado { animation: piscar-balao 1.4s ease-out }
@keyframes piscar-balao {
    0%, 60% { background: var(--verde-fraco) }
    100% { background: inherit }
}

.balao-transcricao {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(134,150,160,.25);
    font-size: 13px;
    color: var(--tx-2);
}
.balao-transcricao-rotulo { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px }
.balao-transcricao-espera { font-style: italic; opacity: .8 }

.balao-sem-midia { font-size: 13px; color: var(--tx-2); font-style: italic }
.balao-sem-midia-motivo { display: block; font-size: 12px; opacity: .8 }

/* --- Barra da fila (equivale à barra-sistema do mock) -------------------- */

.fila-barra {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    background: var(--topo);
    border-left: 1px solid var(--borda);
    border-top: 1px solid var(--borda);
    font-size: 13.5px;
    color: var(--tx-2);
    position: relative; z-index: 2;
}
.fila-barra[hidden] { display: none }
.fila-barra strong { color: var(--tx); font-weight: 600 }
.fila-barra > span:first-child { flex: 1; min-width: 0 }
.fila-acoes { display: flex; align-items: center; gap: 8px; flex: 0 0 auto }

.fila-aguardando { box-shadow: inset 3px 0 0 #ffd279 }
.fila-minha      { box-shadow: inset 3px 0 0 var(--verde) }
.fila-outro      { box-shadow: inset 3px 0 0 var(--tx-2) }
.fila-grupo      { box-shadow: inset 3px 0 0 var(--et-4) }

/* --- Composer ------------------------------------------------------------ */

.inbox-envio {
    min-height: 62px;
    background: var(--topo);
    border-left: 1px solid var(--borda);
    display: flex; align-items: flex-end;
    gap: 6px;
    padding: 5px 16px 5px 10px;
    position: relative; z-index: 2;
}

.envio-acao { position: relative; display: flex; align-items: center }

.anexo-botao {
    width: 40px; height: 40px;
    border: 0; border-radius: 50%;
    background: none;
    color: var(--tx-2);
    font-size: 19px;
    cursor: pointer;
    display: grid; place-items: center;
}
.anexo-botao:hover { background: rgba(134,150,160,.12); color: var(--tx) }
.anexo-botao.gravando { color: #f15c6d }

.inbox-envio textarea {
    flex: 1;
    background: var(--entrada);
    border: 0; border-radius: 8px;
    padding: 11px 12px;
    min-height: 42px; max-height: 130px;
    resize: none;
    outline: none;
    font-size: 15px; line-height: 20px;
    color: var(--tx);
    font-family: inherit;
}
:root[data-tema="claro"] .inbox-envio textarea { background: #fff }
.inbox-envio textarea::placeholder { color: var(--tx-2) }

.inbox-envio .btn { margin-bottom: 1px }

/* --- Citação armada ------------------------------------------------------ */

.citacao-armada {
    display: flex; align-items: center; gap: 10px;
    background: var(--topo);
    border-left: 1px solid var(--borda);
    padding: 8px 16px 0;
    position: relative; z-index: 2;
}
.citacao-armada[hidden] { display: none }
.citacao-corpo {
    flex: 1; min-width: 0;
    background: rgba(0,0,0,.18);
    border-left: 4px solid var(--verde-2);
    border-radius: 5px;
    padding: 6px 10px;
}
:root[data-tema="claro"] .citacao-corpo { background: #f0f2f5 }
.citacao-autor { display: block; font-size: 12.8px; color: var(--verde-2) }
.citacao-texto {
    display: block; font-size: 13px; color: var(--tx-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.citacao-x {
    background: none; border: 0;
    color: var(--tx-2);
    font-size: 18px; cursor: pointer;
    padding: 0 4px;
}

/* --- Gravador de áudio --------------------------------------------------- */

.gravador {
    position: absolute; inset: 0;
    background: var(--topo);
    display: flex; align-items: center; gap: 12px;
    padding: 0 16px;
}
.gravador[hidden] { display: none }
.gravador-x { background: none; border: 0; color: #f15c6d; font-size: 18px; cursor: pointer }
.gravador-luz {
    width: 10px; height: 10px; border-radius: 50%;
    background: #f15c6d;
    animation: pulsar-gravador 1.2s infinite;
}
@keyframes pulsar-gravador { 50% { opacity: .25 } }
.gravador-tempo { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 14px }
.gravador-dica { flex: 1; color: var(--tx-2); font-size: 13px }
.gravador-audio { height: 34px }

/* --- Menus flutuantes, emoji e figurinhas -------------------------------- */

.menu-flutuante {
    position: absolute; bottom: 46px; left: 0;
    background: var(--topo);
    border-radius: 8px;
    box-shadow: var(--sombra-menu);
    padding: 6px 0;
    min-width: 210px;
    z-index: 20;
}
.menu-flutuante[hidden] { display: none }
.menu-flutuante button {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 10px 18px;
    background: none; border: 0;
    color: var(--tx);
    text-align: left; font-size: 14.5px;
    cursor: pointer;
}
.menu-flutuante button:hover { background: var(--hover) }

.painel-emoji, .painel-figurinhas {
    width: 320px; max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    display: flex; flex-wrap: wrap; gap: 4px;
}
.painel-emoji button, .painel-figurinhas button {
    width: auto; padding: 4px 6px;
    font-size: 22px;
    border-radius: 6px;
    justify-content: center;
}

.figurinha-item { position: relative; width: 74px; height: 74px }
.figurinha-usar { width: 100%; height: 100%; padding: 0 }
.figurinha-usar img { width: 100%; height: 100%; object-fit: contain }
.figurinha-x {
    position: absolute; top: -4px; right: -4px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--erro, #f15c6d); color: #fff;
    border: 0; font-size: 12px; cursor: pointer;
    display: grid; place-items: center;
}
.figurinhas-vazio { color: var(--tx-2); font-size: 13px; padding: 10px }

.painel-reacao {
    position: absolute;
    background: var(--topo);
    border-radius: 22px;
    box-shadow: var(--sombra-menu);
    padding: 5px 8px;
    display: flex; gap: 3px;
    z-index: 30;
}
.painel-reacao button {
    background: none; border: 0;
    font-size: 22px; cursor: pointer;
    padding: 2px 4px; border-radius: 50%;
}
.painel-reacao button:hover { background: var(--hover) }
.painel-reacao-mais { font-size: 18px; color: var(--tx-2) }
.painel-reacao-todos { flex-wrap: wrap; max-width: 300px; max-height: 220px; overflow-y: auto; border-radius: 12px }

/* --- Painel do contato (equivale a .dados do mock) ----------------------- */

.inbox-contato {
    width: 380px; flex: 0 0 380px;
    background: var(--painel);
    border-left: 1px solid var(--borda);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.inbox-contato[hidden] { display: none }

.contato-topo {
    height: 59px; flex: 0 0 59px;
    background: var(--topo);
    display: flex; align-items: center; gap: 22px;
    padding: 0 22px;
}
.contato-topo strong { font-size: 16px; font-weight: 500 }
/* Reconferir o contato na ponte: só admin enxerga, e fica na ponta oposta do
   fechar para ninguém disparar uma ida à API querendo fechar o painel. */
.contato-sincronizar { margin-left: auto; font-size: 13px; white-space: nowrap }
.contato-sincronizar[disabled] { opacity: .6; cursor: progress }

/* Relatório da conferência (SweetAlert) */
.sinc-itens { list-style: none; margin: 0; padding: 0; text-align: left }
.sinc-itens li {
    display: flex; flex-direction: column; gap: 1px;
    padding: 8px 10px 8px 26px;
    position: relative;
    border-bottom: 1px solid var(--borda);
    font-size: 13.5px;
}
.sinc-itens li:last-child { border-bottom: 0 }
.sinc-itens li::before { position: absolute; left: 6px; top: 8px }
.sinc-ok::before     { content: "\2713"; color: var(--verde-2) }
.sinc-falhou::before { content: "\2717"; color: #f15c6d }
.sinc-itens span { color: var(--tx-2) }
.sinc-erro { margin: 10px 0 0; font-size: 13px; color: var(--tx-2); text-align: left }

.contato-corpo { flex: 1; overflow-y: auto; background: var(--fundo) }

.contato-cabeca { background: var(--painel); text-align: center; padding: 26px 20px 22px; margin-bottom: 10px }
.contato-foto { width: 170px; height: 170px; border-radius: 50%; object-fit: cover; margin: 0 auto }
.contato-foto-txt {
    display: grid; place-items: center;
    color: #fff; font-size: 58px; font-weight: 600;
}
.contato-nome { font-size: 22px; margin-top: 14px }
.contato-apelido { font-size: 14px; color: var(--tx-2); margin-top: 2px }
.contato-numero { font-size: 15px; color: var(--tx-2); margin-top: 4px }

.contato-bloco { background: var(--painel); padding: 14px 24px; margin-bottom: 10px }
.contato-bloco h4, .contato-bloco h3 { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--tx-2) }
.contato-dados {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    align-items: baseline;
    margin: 0;
    font-size: 14.5px; line-height: 21px;
}
.contato-dados dt { color: var(--tx-2) }
.contato-dados dd { margin: 0; text-align: right; word-break: break-word }
.contato-dados dd .celula-sub { text-align: right }

.contato-tags, .contato-tags-livres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.tag, .tag-livre {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; padding: 3px 10px;
    border-radius: 13px;
    background: rgba(134,150,160,.16);
    color: var(--tx);
}
.tag-x, .tag-apagar {
    background: none; border: 0;
    color: var(--tx-2);
    cursor: pointer; font-size: 13px; line-height: 1;
}
.contato-nova-tag, .contato-nova-obs { display: flex; gap: 8px; margin-top: 10px }
.contato-nova-tag input, .contato-nova-obs textarea, .tag-livre-caixa input {
    flex: 1;
    background: var(--entrada);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--tx);
    outline: none;
    font-size: 14px;
    font-family: inherit;
}
:root[data-tema="claro"] .contato-nova-tag input,
:root[data-tema="claro"] .contato-nova-obs textarea { background: #fff }

.obs {
    background: var(--sistema);
    border-radius: 7.5px;
    padding: 9px 11px;
    margin-bottom: 8px;
    font-size: 13.6px; line-height: 19px;
}
:root[data-tema="claro"] .obs { background: #f5f6f6 }
.obs-texto { white-space: pre-wrap }
.obs-meta { display: block; color: var(--tx-2); font-size: 12px; margin-top: 5px }

/* --- Botões do JS antigo ------------------------------------------------- */

.btn-secundario {
    background: none;
    border: 1px solid var(--verde);
    color: var(--verde-2);
}
.btn-link {
    background: none; border: 0;
    color: var(--tx-2);
    padding: 0 6px;
    font-size: 13.5px;
    cursor: pointer;
}
.btn-link:hover { color: var(--tx); text-decoration: underline }
.btn-mini { height: 28px; padding: 0 12px; font-size: 13px }

/* --- Modal (anexo, desfecho, transferência) ------------------------------ */

.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center }
.modal[hidden] { display: none }
.modal-fundo { position: absolute; inset: 0; background: rgba(11,20,26,.7) }

.modal-caixa {
    position: relative;
    width: min(560px, calc(100% - 32px));
    max-height: 90vh;
    overflow-y: auto;
    background: var(--painel);
    border-radius: 12px;
    box-shadow: var(--sombra-alta, 0 24px 60px rgba(0,0,0,.5));
}
.modal-largo { width: min(860px, calc(100% - 32px)) }

.modal-topo {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--borda);
}
.modal-topo strong { font-size: 16px; font-weight: 500 }
.modal-x { background: none; border: 0; color: var(--tx-2); font-size: 22px; cursor: pointer }

.modal-corpo { padding: 16px 20px }
.modal-previa { padding: 16px 20px; display: grid; place-items: center }
.modal-previa img, .modal-previa video, .modal-previa canvas { max-width: 100%; border-radius: 8px }
.modal-icone { font-size: 46px }

.modal-arquivo {
    display: flex; align-items: center; gap: 10px;
    padding: 0 20px 10px;
    font-size: 13.5px; color: var(--tx-2);
}

.modal-rodape {
    display: flex; align-items: flex-end; gap: 10px;
    padding: 12px 20px 18px;
    border-top: 1px solid var(--borda);
}
.modal-rodape textarea {
    flex: 1;
    background: var(--entrada);
    border: 0; border-radius: 8px;
    padding: 10px 12px;
    color: var(--tx);
    outline: none; resize: none;
    font-family: inherit; font-size: 14.5px;
}
:root[data-tema="claro"] .modal-rodape textarea { background: #f0f2f5 }

.editor-barra {
    display: flex; align-items: center; gap: 8px;
    padding: 0 20px 12px;
    flex-wrap: wrap;
}
.editor-barra button, .ferramenta {
    background: var(--entrada); border: 0;
    color: var(--tx);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
}
.editor-barra .ativa { background: var(--verde); color: #fff }

/* --- Desfecho (dentro do SweetAlert) ------------------------------------- */

.desfecho { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center }
.desfecho button {
    background: var(--entrada); border: 0;
    color: var(--tx);
    border-radius: 16px;
    padding: 8px 14px;
    cursor: pointer;
}
.desfecho button:hover { background: var(--ativo) }
.desfecho-cliente { color: var(--tx-2); font-size: 13px }

/* --- Aperto de tela ------------------------------------------------------ */

@media (max-width: 1500px) { .inbox-contato { width: 330px; flex: 0 0 330px } }
@media (max-width: 1200px) { .inbox-contato { display: none } }

/* --- Restos do atendimento antigo que também precisam de roupa ----------- */

.muted { color: var(--tx-2); font-size: .9em }
.divisor { border: 0; border-top: 1px solid var(--borda); margin: 18px 0 }

.check { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; cursor: pointer }
.check input { margin-top: 3px }

/* --- SweetAlert dentro do tema ------------------------------------------- */

/* O popup vem branco de fábrica, e tudo que montamos dentro dele usa as cores
   do tema: campo escuro, rótulo cinza-claro, divisória escura. O resultado era
   uma caixa branca com metade do conteúdo ilegível. Aqui o modal passa a ser do
   sistema, e não da biblioteca — e acompanha a troca de tema junto com o resto,
   porque tudo abaixo sai de variável. */
.swal2-popup {
    background: var(--painel);
    color: var(--tx);
    border: 1px solid var(--borda);
    border-radius: 12px;
}
.swal2-title { color: var(--tx); font-size: 19px; font-weight: 600 }
.swal2-html-container { color: var(--tx-2); font-size: 14.5px }
.swal2-actions { gap: 10px }
.swal-pires .btn { min-width: 118px }

.swal2-close { color: var(--tx-2); box-shadow: none }
.swal2-close:hover { color: var(--tx); background: none }

/* Campos que a própria biblioteca desenha (o `input:` do UI.confirmar). Os
   nossos já vêm estilizados pelo `.campo`. */
.swal2-input, .swal2-textarea, .swal2-select, .swal2-file {
    background: var(--entrada);
    color: var(--tx);
    border: 1px solid var(--borda);
    border-radius: 8px;
    box-shadow: none;
}
.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus {
    border-color: var(--verde);
    box-shadow: none;
}

/* O checkbox e o radio da biblioteca não leem o `background` do popup: eles
   pintam com `var(--swal2-background)`, que ela deixa em `white` fixo. Como o
   texto sai de `color: inherit` — ou seja, `var(--tx)` —, no tema escuro dava
   cinza-claro sobre branco: o rótulo do "incluir também os grupos" existia e
   não dava para ler. Redefinir a variável no popup conserta os dois de uma vez,
   e qualquer outro lugar da lib que dependa dela. */
.swal2-popup { --swal2-background: var(--painel) }

.swal2-checkbox, .swal2-radio {
    background: transparent;
    color: var(--tx);
    /* De fábrica vêm centralizados: rótulo de frase inteira fica torto ao lado
       da caixa. À esquerda, alinhados pelo topo, como o `.check` do sistema. */
    justify-content: flex-start;
    align-items: flex-start;
    margin: 14px 0 0;
    padding: 0;
}
.swal2-checkbox label, .swal2-radio label { font-size: 14.5px; text-align: left; line-height: 1.45 }
.swal2-checkbox input, .swal2-radio input { accent-color: var(--verde); margin-top: 3px }

/* As caixas que o `confirmarComOpcoes` monta usam o `.check` do sistema. O
   container do modal pinta tudo com a cor fraca — boa para o texto que
   explica, apagada demais para o rótulo de uma escolha. */
.swal2-html-container .check { color: var(--tx); padding: 5px 0 }

.swal2-validation-message {
    background: var(--entrada);
    color: var(--et-5);
    border-radius: 8px;
}

/* Escurece o fundo mais que o padrão: sobre um app já escuro, o véu claro da
   biblioteca não separava o modal da tela. */
.swal2-container { background: rgba(0, 0, 0, .55) }

/* Com `.swal-toast-pires` sozinho o fundo empatava em especificidade com o
   `.swal2-toast` da biblioteca — e como o CSS dela é injetado em runtime, quem
   vencia era o branco fixo. O título, esse sim mais específico, já vinha na cor
   do tema: no escuro dava caixa branca com texto claro, ilegível. `.swal2-popup`
   na frente desempata para o nosso lado nos dois temas. */
.swal2-popup.swal-toast-pires {
    background: var(--painel);
    border: 1px solid var(--borda);
    box-shadow: var(--sombra-menu);
    color: var(--tx);
}
.swal2-popup.swal-toast-pires .swal2-title { font-size: 14px !important; font-weight: 500; color: var(--tx) }

/* O `.desfecho` acima veio do mock, onde era uma LINHA DE BOTÕES: flex, com
   quebra e centralizada. Os nossos modais reusaram a classe como caixa do
   formulário — e aí "Observação", data, valor e o resto viravam itens de flex
   lado a lado, espremidos e centralizados no meio do popup.

   Dentro do SweetAlert ele é o que sempre quis ser: uma caixa, alinhada à
   esquerda. O uso do mock continua de pé, com a regra de cima. */
.swal2-html-container .desfecho {
    display: block;
    text-align: left;
}
.swal2-html-container .desfecho .campo { margin-bottom: 12px }
.swal2-html-container .desfecho .check { margin-top: 10px }
.swal2-html-container .desfecho textarea { min-height: 62px }

/* Separa o cliente do formulário, como na interface antiga: sem a linha, o
   nome e o número colam no primeiro campo e parecem rótulo dele. */
.swal2-html-container .desfecho-cliente {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--borda);
    line-height: 1.5;
}

/* o escolhedor de desfecho, dentro do SweetAlert */
.desfecho-escolha { display: flex; gap: 8px; margin-bottom: 14px }
.desfecho-op {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 8px;
    background: var(--entrada); border: 1px solid var(--borda);
    border-radius: 8px;
    color: var(--tx);
    cursor: pointer;
}
.desfecho-op.escolhido { border-color: var(--verde); color: var(--verde-2) }

.contato-obs { display: flex; flex-direction: column; gap: 9px }
.obs-x {
    background: none; border: 0;
    color: var(--tx-2);
    cursor: pointer; font-size: 13px;
    float: right;
}

.btn-link-perigo { color: #f15c6d }
.btn-link-perigo:hover { color: #f15c6d }

/* participantes do grupo */
/* Painel de grupo: um bloco só, ocupando a altura inteira.

   Com o teto de 260px a lista parava no meio e o resto do painel ficava vazio
   até o fim da tela — em grupo não vem tag, observação nem dados de cliente
   para preencher aquilo. Agora a caixa estica e a rolagem é dela.

   `min-height: 0` em cada nível é o que permite encolher: sem isso o item flex
   nunca fica menor que o conteúdo e a lista transborda o painel. */
.contato-corpo-grupo { display: flex; flex-direction: column }
.contato-corpo-grupo .contato-cabeca { flex: none }
.contato-corpo-grupo .js-grupo {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    margin-bottom: 0;
}
.contato-corpo-grupo #grupo-participantes {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
}
.contato-corpo-grupo .grupo-lista { flex: 1; min-height: 0; max-height: none }

.grupo-lista { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto }
.grupo-part { padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 14px }
.grupo-part:last-child { border-bottom: 0 }
.grupo-part-nome { font-weight: 600 }

/* --- Contatos e retornos: a ficha ao lado da lista ----------------------- */

.ficha { display: block }
.ficha[hidden] { display: none }

/* --- Rail com rótulo ----------------------------------------------------- */

/* O mock tem 5 ícones óbvios; o sistema tem 9, e dentro de "Gestão" moram
   Usuários, Conexões e Bots. Ícone mudo aqui não é minimalismo, é esconder
   tela — quem procurava Usuários não achava. */
.rail { width: 78px; flex: 0 0 78px; padding: 8px 4px 14px; gap: 4px }

.rail-btn {
    width: 68px; height: auto;
    padding: 7px 2px 6px;
    border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-align: center;
}

.rail-rot {
    font-size: 10px; line-height: 12px;
    letter-spacing: .1px;
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rail-badge { top: 2px; right: 10px }
.rail-avatar { margin-top: 0 }

/* Hash da versão publicada, no pé do rail: do tamanho do rótulo, cor apagada. */
.rail-versao {
    font-size: 9px; line-height: 12px;
    color: var(--tx-2); opacity: .7;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .3px;
    padding: 2px 0 6px;
    cursor: help;
}

/* Com Gestão desmembrada o rail passa de 9 para 12 itens: em notebook de 768px
   de altura não cabe tudo. Rola só a lista de telas — Tema e Perfil ficam no pé,
   porque menu que some quando a pessoa quer sair é menu que atrapalha. */
.rail { overflow: hidden }
.rail-lista {
    flex: 1; min-height: 0;
    width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin;
}
.rail-lista::-webkit-scrollbar { width: 4px }
.rail-sep { flex: 0 0 auto; height: 1px; width: 44px; background: var(--borda); margin: 6px 0 }

/* 12 itens x 56px nao cabem em notebook de 768px (menos ainda com zoom), e o
   ultimo a sumir era justamente "Sistema", do dev, atras de uma barra de 4px
   que ninguem ve (17/09/2026). Em tela baixa o rail aperta: icone menor, menos
   respiro — 12 itens em ~520px. */
@media (max-height: 820px) {
    .rail { gap: 2px; padding-top: 4px }
    .rail-lista { gap: 2px }
    .rail-btn { padding: 4px 2px 3px; gap: 2px; border-radius: 10px }
    .rail-btn .ico { width: 20px; height: 20px }
    .rail-sep { margin: 3px 0 }
    .rail-versao { padding: 0 0 2px }
}

/* Notebook 1366x768 com o Windows a 125%: sobram ~525px de altura util no
   navegador, e nem o compacto de cima cabe. Aqui o rail vai ao minimo legivel:
   12 itens em ~420px. O rotulo fica — icone mudo nao se acha. */
@media (max-height: 660px) {
    .rail { padding-bottom: 6px }
    .rail-lista { gap: 1px }
    .rail-btn { padding: 3px 2px 2px; gap: 1px; border-radius: 8px }
    .rail-btn .ico { width: 17px; height: 17px }
    .rail-rot { font-size: 9px; line-height: 11px }
    .rail-avatar { width: 28px; height: 28px; font-size: 11px }
    .rail-versao { display: none }
}

/* E quando mesmo assim sobra item embaixo, uma seta no pe da lista diz "tem
   mais" — e rola ao clicar. Barra de rolagem de 4px nao diz nada; o item
   cortado pela metade, menos ainda. Ligada pelo script do layout so enquanto
   houver o que rolar (`.rolavel`). */
.rail-mais {
    display: none;
    flex: 0 0 auto;
    width: 44px; height: 16px;
    margin-top: -2px;
    border: 0; border-radius: 8px;
    background: rgba(134, 150, 160, .18);
    color: var(--tx);
    font-size: 11px; line-height: 16px;
    cursor: pointer;
}
.rail-mais:hover { background: rgba(134, 150, 160, .32) }
.rail-lista.rolavel + .rail-mais { display: block }



/* ==========================================================================
   nova-legado.css — o kit antigo com a roupa nova

   As telas de gestão e de sistema (18 delas) são PHP puro com `.card`,
   `.tabela`, `.campo`, `.pill`. Reescrever as 18 de uma vez seria trocar 3.400
   linhas de view às pressas, no mesmo dia — e cada uma tem regra de permissão,
   validação e mensagem que só aparecem em uso.

   Então elas entram no casco novo como estão, e o kit inteiro recebe aqui a
   aparência da interface nova. Quem quiser virar lista-e-ficha de verdade
   (usuários, conexões) vira depois, uma por uma, sem pressa e sem risco.

   Isto NÃO é o alvo final: é o que deixa o sistema todo com a mesma cara sem
   um único dia de tela quebrada.
   ========================================================================== */

/* --- Moldura ------------------------------------------------------------- */

.container { width: 100%; margin: 0; padding: 0 }

/* O casco já mostra o nome da tela no alto; o h1 repetido logo abaixo era o
   mesmo texto duas vezes. O parágrafo explicativo fica — ele é conteúdo. */
.pagina-titulo { margin-bottom: 18px }
.pagina-titulo h1 { display: none }
.pagina-titulo p {
    margin: 0 0 4px;
    font-size: 14px; line-height: 20px;
    color: var(--tx-2);
}
.pagina-titulo p strong { color: var(--tx) }

.center { text-align: center }
.divisor { border: 0; border-top: 1px solid var(--borda); margin: 18px 0 }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }

/* --- Cartão -------------------------------------------------------------- */

.card {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 14px;
}
.card.sem-padding { padding: 0; overflow: hidden }
.card h1, .card h2, .card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600 }
.card h2 + p, .card h3 + p { margin-top: 0 }
.card p { margin: 0 0 10px; font-size: 13.5px; line-height: 20px; color: var(--tx-2) }
.card p:last-child { margin-bottom: 0 }

.card-topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--borda);
}
.card.sem-padding > .card-topo:first-child { border-bottom: 1px solid var(--borda) }
.card:not(.sem-padding) > .card-topo:first-child { padding: 0 0 14px }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px }

/* --- Métrica (painel antigo) --------------------------------------------- */

.metrica {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
}
.metrica::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--tx-2); opacity: .35;
}
.metrica.verde::after { background: var(--verde); opacity: 1 }
.metrica.escura::after { background: var(--tick); opacity: .8 }
/* `display: block` explícito: as telas antigas usam <div> aqui e as novas usam
   <span>, e sem isto o rótulo sobe para a linha do número. */
.metrica-valor { display: block; font-size: 28px; font-weight: 600; line-height: 38px; letter-spacing: -.5px }
.metrica-rotulo { display: block; font-size: 13px; color: var(--tx-2) }

/* --- Tabela -------------------------------------------------------------- */

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.tabela thead th {
    background: var(--cartao-2);
    color: var(--tx-2);
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px;
    text-align: left;
    padding: 11px 16px;
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
}
.tabela tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
}
.tabela tbody tr:last-child td { border-bottom: 0 }
.tabela tbody tr:hover { background: var(--hover) }
.tabela tbody tr.linha-inativa { opacity: .55 }
.tabela.tabela-embutida { background: none }
.tabela-clicavel tbody tr { cursor: pointer }

.col-num { text-align: right; font-variant-numeric: tabular-nums }
.col-acoes { text-align: right; white-space: nowrap }
.celula-sub { font-size: 12.5px; color: var(--tx-2); margin-top: 3px }
.celula-link { color: var(--link) }
.linha-edicao { background: var(--cartao-2) }
.linha-entre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }

code {
    background: rgba(134,150,160,.16);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: ui-monospace, "Cascadia Mono", monospace;
    font-size: .88em;
}

/* --- Formulário ---------------------------------------------------------- */

.campo { margin-bottom: 14px }
.campo > label {
    display: block;
    font-size: 13px; color: var(--tx-2);
    margin-bottom: 6px;
}
.campo input[type="text"], .campo input[type="password"], .campo input[type="email"],
.campo input[type="search"], .campo input[type="number"], .campo input[type="date"],
.campo input[type="time"], .campo input[type="tel"], .campo input[type="url"],
.campo select, .campo textarea,
.linha-form input, .linha-form select, .form-inline input, .form-inline select {
    width: 100%;
    min-height: 40px;
    background: var(--entrada);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--tx);
    outline: none;
    font-size: 14.5px;
    font-family: inherit;
}
:root[data-tema="claro"] .campo input, :root[data-tema="claro"] .campo select,
:root[data-tema="claro"] .campo textarea, :root[data-tema="claro"] .linha-form input,
:root[data-tema="claro"] .linha-form select { background: #fff }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--verde) }

/* A lista aberta de um <select> é janela do sistema, não parte da página: o
   `color-scheme` lá em cima devia bastar, e no Chromium do Windows não basta —
   com o campo já pintado por nós, ele desenha a lista em branco enquanto cada
   linha herda o --tx claro. Branco no branco. Pintar a própria <option> é o
   único caminho que esse desenho respeita. */
select option {
    background-color: var(--entrada);
    color: var(--tx);
}
/* A opção escolhida, no verde da marca. O `linear-gradient` repetindo a mesma
   cor não é enfeite: com a lista pintada pelo autor, o Chromium ignora
   `background-color` aqui e só obedece a uma imagem de fundo. */
select option:checked {
    background: var(--verde-fraco) linear-gradient(0deg, var(--verde-fraco) 0%, var(--verde-fraco) 100%);
    color: var(--tx);
}
.campo textarea { min-height: 84px; resize: vertical; line-height: 20px }
.campo input[type="color"] { min-height: 40px; padding: 4px; cursor: pointer }
.campo input[type="checkbox"], .campo input[type="radio"] { width: auto; min-height: 0 }
/* Dentro de `.linha-form` todo input vira campo de texto (100% de largura, 40px de
   altura) — e o radio ou checkbox junto, gigante. Mesma exceção do `.campo`. */
.linha-form input[type="checkbox"], .linha-form input[type="radio"],
.form-inline input[type="checkbox"], .form-inline input[type="radio"] {
    width: auto; min-height: 0; padding: 0; border-radius: 0; background: none;
}

.campo-dica { display: block; font-size: 12.5px; color: var(--tx-2); margin-top: 5px; line-height: 18px }
.campo-erro { display: block; font-size: 12.5px; color: #f15c6d; margin-top: 5px }
.campo-cresce { flex: 1; min-width: 180px }
.campo-busca { min-width: 220px }
.campo-linha-cheia { grid-column: 1 / -1 }

.form-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px }
.linha-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap }
.form-inline { display: inline-flex; align-items: center; gap: 8px; margin: 0 }
.acoes-form { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap }
.acoes-tabela { display: inline-flex; align-items: center; gap: 6px }

.checks-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 16px }

/* --- Botões -------------------------------------------------------------- */

.btn {
    height: 36px; padding: 0 16px;
    border: 0; border-radius: 18px;
    background: var(--verde);
    color: #fff;
    font-size: 14px; font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { filter: brightness(1.08); text-decoration: none }
.btn-bloco { width: 100%; height: 40px }
.btn-secundario { background: none; border: 1px solid var(--verde); color: var(--verde-2) }
.btn-perigo { background: #f15c6d }
.btn-mini { height: 28px; padding: 0 12px; font-size: 13px }

.btn-icone {
    width: 32px; height: 32px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: none;
    color: var(--tx-2);
    display: inline-grid; place-items: center;
    cursor: pointer;
}
.btn-icone:hover { color: var(--tx); background: var(--hover) }

/* --- Estado: pill, chip, badge, alerta ----------------------------------- */

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 10px;
    border-radius: 12px;
    font-size: 12.5px;
    background: rgba(134,150,160,.16);
    color: var(--tx-2);
    white-space: nowrap;
}
.pill-ok    { background: var(--verde-fraco); color: var(--verde-2) }
.pill-aviso { background: rgba(255,210,121,.16); color: #ffd279 }
.pill-erro  { background: rgba(241,92,109,.16); color: #f15c6d }
.pill-off   { background: rgba(134,150,160,.16); color: var(--tx-2) }
.pill-eu    { background: rgba(83,189,235,.16); color: var(--tick) }
:root[data-tema="claro"] .pill-aviso { background: #fff3d6; color: #a86a00 }
:root[data-tema="claro"] .pill-erro  { background: #fde8ea; color: #c0392b }
:root[data-tema="claro"] .pill-eu    { background: #e3f2fd; color: #0369a1 }

.badge {
    display: inline-flex; align-items: center;
    height: 22px; padding: 0 9px;
    border-radius: 11px;
    font-size: 12px; font-weight: 600;
    background: rgba(134,150,160,.16);
    color: var(--tx-2);
    text-transform: lowercase;
}
.badge-dev       { background: rgba(134,150,160,.2); color: var(--tx) }
.badge-admin     { background: var(--verde-fraco); color: var(--verde-2) }
.badge-atendente { background: rgba(83,189,235,.16); color: var(--tick) }

.alerta {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--tick);
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 14px;
    font-size: 13.5px; line-height: 20px;
    color: var(--tx-2);
}
.alerta-aviso { border-left-color: #ffd279 }
.alerta strong { color: var(--tx) }

.filtro-periodo { display: flex; gap: 8px; flex-wrap: wrap }
.filtro-periodo a, .filtro-periodo .atual {
    height: 30px; padding: 0 12px;
    border-radius: 15px;
    background: var(--entrada);
    color: var(--tx-2);
    font-size: 13.5px;
    display: inline-flex; align-items: center;
    text-decoration: none;
}
:root[data-tema="claro"] .filtro-periodo a { background: #f0f2f5 }
.filtro-periodo .atual { background: var(--verde-fraco); color: var(--verde-2) }

/* --- Bots (lista) -------------------------------------------------------- */

.bots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px }
.bot-card {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 16px 18px;
}
.bot-card-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px }
.bot-card-conexoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 }

/* --- QR ------------------------------------------------------------------ */

.qr-area {
    display: grid; place-items: center;
    gap: 14px;
    padding: 26px;
    text-align: center;
}
.qr-img {
    width: 268px; height: 268px;
    background: #fff;
    border-radius: 12px;
    padding: 12px;
}
.qr-img img { width: 100%; height: 100%; image-rendering: pixelated }
.qr-ok { color: var(--verde-2); font-size: 15px }
.qr-erro { color: #f15c6d; font-size: 14px }
.qr-carregando { color: var(--tx-2); font-size: 14px }

/* --- Meu número caiu (faixa na lista + modal do QR no atendimento) ------- */

.conexao-caida {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 12px 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(241,92,109,.14); color: #f15c6d;
    font-size: 13.5px;
}
.conexao-caida .btn-link { color: #f15c6d; font-weight: 600; margin-left: auto; padding: 0 }
/* Menos de 30 s fora: instavel, nao caida — amarelo e sem o botao de reconectar. */
.conexao-caida.instavel { background: rgba(255, 210, 121, .16); color: #ffd279 }
.conexao-caida.instavel .btn-link { display: none }
:root[data-tema="claro"] .conexao-caida.instavel { color: #7a5300 }

.modal-qr-caixa { width: min(440px, calc(100% - 32px)) }
.modal-qr-corpo { padding: 16px 20px 4px; text-align: center }
.modal-qr-corpo .qr-area { padding: 14px }
.modal-qr-rodape { justify-content: center }

/* --- Janela de 24h da API oficial (faixa acima da barra de envio) -------- */

/* Mesmo amarelo da conexao instavel, e pelo mesmo motivo: e um estado que
   passa sozinho, nao um erro para alguem consertar. */
.aviso-janela {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 12px 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 210, 121, .16); color: #ffd279;
    font-size: 13.5px;
}
.aviso-janela .btn-link { color: #ffd279; font-weight: 600; margin-left: auto; padding: 0 }
:root[data-tema="claro"] .aviso-janela { color: #7a5300 }

.modelo-previa {
    margin: 4px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    text-align: left;
    white-space: pre-wrap;
    font-size: 13.5px;
}

/* --- Importação de histórico -------------------------------------------- */

.imp-caixa { display: block; margin-top: 6px }
.imp-caixa.oculto { display: none }

.imp-barra {
    height: 8px;
    background: rgba(134,150,160,.2);
    border-radius: 4px;
    overflow: hidden;
}
.imp-barra > * { display: block; height: 8px; background: var(--verde) }
.imp-texto { font-size: 13px; color: var(--tx-2); margin-top: 6px }

/* --- Editor de fluxo do bot --------------------------------------------- */

.editor { display: flex; flex-direction: column; height: 100% }
.editor-topo {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 0;
}
.editor-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.editor-largo { flex: 1 }
.editor-acoes { display: flex; gap: 8px; margin-left: auto }

.editor-tela, .editor-canvas {
    position: relative;
    flex: 1;
    min-height: 520px;
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: 10px;
    background-image: radial-gradient(circle, rgba(134,150,160,.22) 1px, transparent 1px);
    background-size: 22px 22px;
    overflow: auto;
}
.editor-mundo { position: relative; transform-origin: 0 0 }
.editor-linhas { position: absolute; inset: 0; pointer-events: none }

/* As ligações entre os blocos. Sem `fill: none` e sem `stroke` o navegador pinta
   a área da curva de preto — eram as faixas grossas que o editor mostrava. */
.editor-linhas .linha {
    fill: none;
    stroke: var(--tx-2);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .8;
    pointer-events: stroke;
    cursor: pointer;
    transition: stroke .15s, stroke-width .15s, opacity .15s;
}
.editor-linhas .linha:hover { stroke: #f15c6d; stroke-width: 3; opacity: 1 }
.editor-linhas .linha-fantasma { stroke: var(--verde-2); stroke-dasharray: 6 5; opacity: .85; pointer-events: none }

/* Linhas do bloco selecionado: correm no sentido do fluxo. */
.editor-linhas .linha-ativa {
    stroke: var(--verde-2);
    stroke-width: 2.6;
    opacity: 1;
    stroke-dasharray: 8 6;
    animation: fluir-linha .7s linear infinite;
}
.editor-linhas .linha-ativa:hover { stroke: #f15c6d }
@keyframes fluir-linha { to { stroke-dashoffset: -28 } }
@media (prefers-reduced-motion: reduce) {
    .editor-linhas .linha-ativa { animation: none }
}
.editor-nos { position: relative }
.editor-zoom { display: flex; gap: 6px; align-items: center }

.editor-paleta {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px;
}
.paleta-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: 8px;
    color: var(--tx);
    font-size: 13.5px;
    cursor: grab;
}
.paleta-item:hover { border-color: var(--verde) }
.paleta-arrastando { opacity: .5 }

/* A paleta como painel do meio: a barra de blocos era uma segunda coluna
   estreita ao lado do rail, e o canvas ficava com o que sobrava. Aqui ela ocupa
   a coluna que o casco já reserva, e o canvas fica com o resto da tela. */
.paleta-lista {
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column; gap: 6px;
    padding: 4px 12px 16px;
}
.paleta-lista .paleta-item { width: 100% }
.paleta-emoji { font-size: 16px; line-height: 1; flex: 0 0 20px; text-align: center }
.paleta-item .rot { flex: 1; text-align: left }

.paleta-dicas { margin-top: 14px; display: flex; flex-direction: column; gap: 12px }
.paleta-dicas p { margin: 0; font-size: 12.5px; color: var(--tx-2); line-height: 18px }

/* O canvas é a tela: sem cartão em volta, sem borda arredondada e sem margem —
   tudo isso seria área de trabalho a menos para montar o fluxo. */
/* `flex: 1` porque o `.conteudo-corpo.solto` é flex row: sem isto a largura é a
   do conteúdo, e um fluxo ainda vazio não tem conteúdo nenhum — o canvas nascia
   com zero de largura em bot recém-criado, justamente quando ele é mais usado. */
.canvas-area { position: relative; flex: 1; min-width: 0; height: 100%; min-height: 0 }
.editor-canvas.canvas-cheio {
    height: 100%;
    min-height: 0;
    border: 0; border-radius: 0;
}

/* Ancorado na área, não no canvas: filho de caixa que rola sobe junto com o
   conteúdo no primeiro arrasto. */
.zoom-flutuante {
    position: absolute; right: 16px; bottom: 16px;
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 4px;
    box-shadow: var(--sombra-bolha);
}
.zoom-flutuante button {
    min-width: 30px; height: 28px;
    border-radius: 6px;
    color: var(--tx-2);
    font-size: 14px;
}
.zoom-flutuante button:hover { background: var(--hover); color: var(--tx) }

.no {
    position: absolute;
    width: 220px;
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: 10px;
    box-shadow: var(--sombra-menu);
    font-size: 13px;
    /* Visível, e não `hidden`: as bolinhas de ligação ficam metade para fora da
       caixa e seriam cortadas. O que precisa de corte (cabeçalho e corpo) o faz
       por conta própria, mais abaixo. */
    overflow: visible;
}
.no-topo {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: var(--cartao-2);
    border-bottom: 1px solid var(--borda);
    border-radius: 9px 9px 0 0;
    font-size: 12.5px; font-weight: 600;
    cursor: move;
}
.no-corpo { padding: 10px; color: var(--tx-2); line-height: 18px; overflow: hidden }
.no-texto { white-space: pre-wrap; color: var(--tx) }
.no-ativo { border-color: var(--verde) }
.no-arrastando { opacity: .7 }
.no-inicio .no-topo, .no-inicial .no-topo { color: var(--verde-2) }
.no-saidas { border-top: 1px solid var(--borda) }
.no-saida, .no-mini-op {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-top: 1px solid var(--borda);
    color: var(--tx);
}
.no-saida-rotulo { color: var(--tx-2) }

/* Os pontos de ligação ficam sobre a borda da caixa: metade para fora, metade
   para dentro. A saída é a borda direita da linha (a caixa tem 1px de borda,
   por isso o -8px, e não -7px, centra o ponto de 14px na borda); a entrada é a
   borda esquerda, na altura do cabeçalho. O JS mede o centro do próprio ponto,
   então a linha nasce e termina exatamente nele. */
.no-conector, .no-entrada {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--cartao-2);
    border: 2px solid var(--verde);
    padding: 0;
    z-index: 2;
}
.no-conector {
    position: absolute;
    right: -8px; top: 50%;
    margin-top: -7px;
    cursor: crosshair;
    transition: transform .12s, background .12s;
}
.no-conector:hover { background: var(--verde); transform: scale(1.2) }
.no-entrada {
    position: absolute;
    left: -8px; top: 9px;
}
.no-x, .no-apagar {
    background: none; border: 0;
    color: var(--tx-2);
    cursor: pointer; font-size: 14px;
}
.no-add, .no-saida-add {
    background: none; border: 0;
    color: var(--verde-2);
    cursor: pointer; font-size: 13px;
    padding: 6px 10px;
}
.no-linha { display: flex; align-items: center; gap: 8px }
.no-rot { font-size: 12px; color: var(--tx-2) }
.no-mini { font-size: 12.5px }
.no-mini-larga { width: 100% }
.no-arquivo { font-size: 12.5px; color: var(--tx-2) }
.no-horario { padding: 8px 10px }
.canvas-alvo { outline: 2px dashed var(--verde); outline-offset: -6px }
.canvas-puxando { cursor: crosshair }

.cor-escolha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.cor-sugestao {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid var(--borda);
    cursor: pointer;
}

/* --- Tela de troca de senha dentro do casco de entrada ------------------- */

.auth-card h2 { margin: 0 0 18px; font-size: 22px; font-weight: 400 }
.auth-nota { font-size: 13px; color: var(--tx-2); line-height: 19px }
.auth-rodape, .auth-rodape-link { font-size: 13px; color: var(--tx-2); text-align: center; margin-top: 16px }

/* --- Menu antigo: some no casco novo ------------------------------------ */

/* O rail e o painel do meio já respondem "para onde eu vou". A barra antiga,
   se aparecesse aqui, seria a segunda navegação da mesma tela. */
.lateral, .aviso-pele { display: none }

/* --- Aviso de tela ainda não refeita ------------------------------------- */

/* Discreto de propósito: não é problema, é obra. Some sozinho conforme as
   telas são migradas de verdade. */
.aviso-legado {
    display: flex; align-items: center; gap: 8px;
    background: var(--cartao);
    border: 1px dashed var(--borda);
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--tx-2);
}

/* [hidden] perde para display:grid — o contador de retornos aparecia zerado */
.rail-badge[hidden] { display: none }

/* Relatório da varredura de grupos (/system/saude, só dev). Uma linha por
   grupo, com a cor dizendo o que deu certo: os dois, um só, ou nenhum. */
.grupo-conf {
    padding: 8px 10px;
    border-left: 3px solid var(--borda);
    border-bottom: 1px solid var(--borda);
    font-size: 14px;
}
.grupo-conf:last-child { border-bottom: 0 }
.grupo-conf .muted { font-size: 12.5px }
.grupo-conf-ok    { border-left-color: var(--verde-2) }
.grupo-conf-aviso { border-left-color: var(--et-1) }
.grupo-conf-erro  { border-left-color: var(--et-5) }

/* Lista de quem dá para marcar com @, dentro do formulário de envio.

   Ela nasce do `.menu-flutuante` do anexo, mas ocupa a linha inteira: nomes de
   pessoa são longos e o menu estreito cortaria justamente o que se está
   procurando. */
.painel-mencao {
    left: 12px; right: 12px;
    bottom: 62px;
    min-width: 0;
    max-height: 264px; overflow-y: auto;
}
.painel-mencao button { justify-content: space-between; gap: 12px }
.mencao-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mencao-fone { color: var(--tx-2); font-size: 12px; flex: none }

.sino-vezes {
    flex: none;
    font-size: 11px; font-weight: 700;
    color: var(--et-5);
}

/* --- Aviso de versão nova (ui.js, versaoServidor) --------------------------- */
.aviso-versao {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 9000; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    max-width: calc(100% - 32px); padding: 10px 14px 10px 18px;
    background: #FEF3C7; color: #92400E; border: 1px solid #F59E0B;
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); font-size: 14px;
}
.aviso-versao .btn { padding: 6px 12px; font-size: 13px; }