:root{
  --brand:#F5801F; --brand-lt:#FF9A45; --brand-dk:#DC6E12;
  --bg:#17181b; --panel:#212327; --side:#1b1c1f; --fg:#eceef0;
  --muted:#8b9198; --line:rgba(255,255,255,.09); --field:#131417;
  --ok:#3fb950; --no:#e5675f; --app-h:100dvh;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--fg); height:var(--app-h); overflow:hidden;
}
button{font:inherit;cursor:pointer;border:0;border-radius:8px}
input,textarea{font:inherit;color:var(--fg);background:var(--field);
  border:1px solid var(--line);border-radius:8px;padding:11px 13px;width:100%}
input:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:-1px}

/* ---------- login ---------- */
#login{height:var(--app-h);display:grid;place-items:center;padding:20px}
#login form{width:100%;max-width:360px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:32px}
#login img{height:44px;display:block;margin:0 auto 8px}
#login h1{font-size:15px;font-weight:500;color:var(--muted);text-align:center;margin-bottom:24px}
#login label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}
#login button{width:100%;margin-top:22px;padding:12px;background:var(--brand);color:#fff;font-weight:600}
#login button:hover{background:var(--brand-dk)}
#login button:disabled{opacity:.6;cursor:default}

/* ---------- estrutura ---------- */
#app{display:none;height:var(--app-h);grid-template-rows:auto 1fr}
#app.ativo{display:grid}
header{display:flex;align-items:center;gap:12px;padding:9px 18px;flex-wrap:wrap;
  background:var(--side);border-bottom:1px solid var(--line)}
header img{height:26px}
header .quem{margin-left:auto;color:var(--muted);font-size:13px}
header .sair{background:transparent;color:var(--muted);padding:6px 10px}
header .sair:hover{color:var(--fg);background:var(--line)}
main{display:grid;grid-template-columns:340px 1fr;min-height:0}

/* ---------- lista ---------- */
#lista{background:var(--side);border-right:1px solid var(--line);
  display:grid;grid-template-rows:auto auto 1fr;min-height:0}

header .rotulo-visao{padding:0 0 0 6px;font-size:11px;text-transform:uppercase;
  letter-spacing:.6px;color:var(--muted);white-space:nowrap}
header .filtros{margin-left:4px}
header.sem-filtros .rotulo-visao,
header.sem-filtros .filtros{display:none}
.filtros{display:flex;gap:8px;flex-wrap:wrap}
.filtros button{padding:7px 16px;background:transparent;color:var(--muted);
  border:1px solid var(--line);border-radius:8px;font-size:13px}
.filtros button:hover{color:var(--fg);border-color:var(--muted)}
.filtros button.on{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600}
#conversas{overflow-y:auto;min-height:0}
.conversa{padding:13px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.conversa:hover{background:var(--panel)}
.conversa.on{background:var(--panel);box-shadow:inset 3px 0 0 var(--brand)}
.conversa .topo{display:flex;align-items:center;gap:8px}
.conversa .nome{font-weight:600;font-size:14px;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conversa .previa{color:var(--muted);font-size:13px;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selo{font-size:11px;padding:2px 7px;border-radius:20px;border:1px solid var(--line);color:var(--muted)}
.selo.open{color:var(--ok);border-color:var(--ok)}
.nao-lidas{background:var(--brand);color:#fff;font-size:11px;font-weight:700;
  min-width:19px;height:19px;border-radius:20px;display:grid;place-items:center;padding:0 5px}

/* ---------- conversa ---------- */
#painel{display:grid;grid-template-rows:auto 1fr auto;min-height:0}
#painel .cabeca{display:flex;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--line)}
#painel .cabeca b{font-size:15px}
#painel .cabeca .tel{color:var(--muted);font-size:13px}
#painel .cabeca button{margin-left:auto;padding:7px 14px;background:var(--panel);
  color:var(--fg);border:1px solid var(--line);font-size:13px}
#painel .cabeca button:hover{border-color:var(--brand);color:var(--brand)}
#mensagens{overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:8px;min-height:0;
  background-color:#0b141a;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68' viewBox='0 0 68 68'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.035' stroke-width='1.4'%3E%3Cpath d='M14 10c3 4 1 8-2 10M52 8c-2 5 1 8 4 9M30 26c4 2 5 7 2 10M60 34c-4 1-6 5-4 9M10 44c5 0 8 4 7 9M40 54c2-4 7-5 10-2'/%3E%3Ccircle cx='24' cy='46' r='2.5'/%3E%3Ccircle cx='47' cy='24' r='2'/%3E%3Ccircle cx='8' cy='24' r='1.8'/%3E%3Ccircle cx='60' cy='58' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat}
.msg{max-width:min(620px,78%);padding:10px 14px;border-radius:14px;white-space:pre-wrap;word-break:break-word}
.msg{box-shadow:0 1px 1px rgba(0,0,0,.3)}
.msg.entrada{background:#202c33;border-top-left-radius:4px;align-self:flex-start}
.msg.saida{background:var(--brand-dk);border-top-right-radius:4px;align-self:flex-end}
.msg .hora{display:block;font-size:11px;color:var(--muted);margin-top:5px}
.msg.saida .hora{color:rgba(255,255,255,.72)}
#responder{display:block;padding:14px 20px;border-top:1px solid var(--line)}
#responder textarea{resize:none;max-height:140px;border:0;background:transparent;
  padding:11px 6px 11px 12px;flex:1;min-width:0}
#responder textarea:focus{outline:none}
#responder button:disabled{opacity:.5;cursor:default}

.vazio{display:grid;place-items:center;height:100%;color:var(--muted);padding:30px;text-align:center}
.erro{background:rgba(229,103,95,.13);border:1px solid var(--no);color:var(--no);
  padding:10px 13px;border-radius:8px;font-size:13px;margin-top:14px}
@media(max-width:760px){ main{grid-template-columns:1fr} #painel{display:none} }

/* ---------- atalhos ---------- */
header .aba{background:transparent;color:var(--muted);padding:6px 12px;border:1px solid transparent}
header .aba:hover{color:var(--fg)}
header .aba.on{color:var(--brand);border-color:var(--line);background:var(--panel)}
#tela-config{display:none;grid-template-rows:1fr auto;min-height:0}
#tela-config.ativo{display:grid}
.aviso-rodape{padding:10px 30px;border-top:1px solid var(--line);
  color:var(--muted);font-size:12px;background:var(--side)}
#conteudo-config{overflow-y:auto;padding:24px 30px;min-height:0}
.painel .topo{display:flex;align-items:center;margin-bottom:6px}
.painel h2{font-size:19px;font-weight:600}
.painel .explica{color:var(--muted);font-size:13px;margin-bottom:18px}
.painel .topo button{margin-left:auto;background:var(--brand);color:#fff;padding:9px 16px;font-weight:600}
.painel .topo button:hover{background:var(--brand-dk)}
select.campo{width:100%;background:var(--field);color:var(--fg);border:1px solid var(--line);
  border-radius:8px;padding:11px 13px;font:inherit}
label.checa{display:flex;align-items:center;gap:8px;margin-top:14px}
label.checa input{width:auto}
.papel{font-size:12px;padding:3px 9px;border-radius:20px;border:1px solid var(--line);color:var(--muted)}
.papel.administrator{color:var(--brand);border-color:var(--brand)}
.pendente{font-size:12px;color:var(--no);margin-left:6px}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
td code{background:var(--field);padding:2px 7px;border-radius:5px;color:var(--brand-lt);font-size:13px}
td .acao{background:transparent;color:var(--muted);padding:4px 8px;font-size:13px}
td .acao:hover{color:var(--brand)}
td .acao.remover:hover{color:var(--no)}

.fundo{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:20px;z-index:10}
.fundo[hidden]{display:none}
.janela{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  width:min(680px,100%);max-height:88vh;overflow-y:auto;padding:26px}
.janela h3{font-size:17px;margin-bottom:4px}
.janela .sub{color:var(--muted);font-size:13px;margin-bottom:20px}
.janela label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}
.linha{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modos{display:flex;gap:8px;margin-top:6px}
.modos button{flex:1;padding:9px;background:var(--field);color:var(--muted);border:1px solid var(--line);font-size:13px}
.modos button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.canais{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.canais label{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;
  background:var(--field);border:1px solid var(--line);border-radius:20px;padding:6px 12px;cursor:pointer}
.canais input{width:auto}
.variaveis{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.variaveis button{background:var(--field);border:1px solid var(--line);color:var(--brand-lt);
  font-size:12px;padding:4px 9px;border-radius:6px}
.variaveis button:hover{border-color:var(--brand)}
.bloco{border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:12px;background:var(--field)}
.bloco .cabeca{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.bloco select{background:var(--bg);color:var(--fg);border:1px solid var(--line);
  border-radius:7px;padding:7px 10px;font:inherit}
.bloco .tirar{margin-left:auto;background:transparent;color:var(--muted);padding:4px 8px}
.bloco .tirar:hover{color:var(--no)}
.janela .rodape{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.janela .rodape .cancelar{background:transparent;color:var(--muted);border:1px solid var(--line);padding:10px 18px}
.janela .rodape .salvar{background:var(--brand);color:#fff;padding:10px 22px;font-weight:600}
.mais{margin-top:12px;background:var(--field);color:var(--brand-lt);border:1px dashed var(--line);padding:9px 14px;width:100%}

#sugestoes{position:absolute;bottom:100%;left:20px;right:20px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;margin-bottom:8px;max-height:230px;overflow-y:auto;z-index:5}
#sugestoes[hidden]{display:none}
#sugestoes div{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--line)}
#sugestoes div:last-child{border-bottom:0}
#sugestoes div:hover,#sugestoes div.marcado{background:var(--field)}
#sugestoes code{color:var(--brand-lt);font-size:13px}
#sugestoes small{color:var(--muted);display:block;margin-top:2px}
#responder{position:relative}

/* ---------- barra de visões ---------- */
#tela-atendimento{grid-template-columns:62px 340px 1fr}
#visoes{background:var(--bg);border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0}
#visoes button{position:relative;width:42px;height:42px;display:grid;place-items:center;
  background:transparent;border-radius:10px;color:var(--muted)}
#visoes button:hover{background:var(--panel);color:var(--fg)}
#visoes button.on{background:var(--brand);color:#fff}
#visoes svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
#visoes .conta{position:absolute;top:2px;right:2px;background:var(--brand);color:#fff;
  font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:10px;
  display:grid;place-items:center;padding:0 4px}
#visoes button.on .conta{background:#fff;color:var(--brand)}
.busca{padding:12px 12px 0}
.busca input{padding:9px 12px;font-size:13px}
.rotulo-visao{padding:12px 14px 4px;font-size:12px;text-transform:uppercase;
  letter-spacing:.6px;color:var(--muted)}
.aviso-visao{padding:10px 14px;margin:0 12px 8px;border:1px solid var(--line);
  border-radius:8px;color:var(--muted);font-size:12px;line-height:1.45}
@media(max-width:760px){ #tela-atendimento{grid-template-columns:62px 1fr} }


/* botão de melhorar o texto com IA */
#responder .ferramentas{display:flex;align-items:center}
#btn-ia{background:var(--panel);color:var(--brand-lt);border:1px solid var(--line);
  padding:10px 13px;white-space:nowrap;font-size:13px;display:flex;align-items:center;gap:7px}
#btn-ia:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
#btn-ia:disabled{opacity:.55;cursor:default}
#btn-ia svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
#painel .cabeca{background:var(--side)}

/* ---------- barra de visões ---------- */
#visoes{position:relative;overflow:visible}

/* ---------- menu suspenso de configurações ---------- */
#menu-config-suspenso{position:absolute;left:56px;bottom:56px;z-index:40;min-width:210px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);padding:6px 0}
#menu-config-suspenso[hidden]{display:none}
#menu-config-suspenso .titulo{display:block;font-size:11px;text-transform:uppercase;
  letter-spacing:.7px;color:var(--muted);padding:10px 16px 8px;
  border-bottom:1px solid var(--line);margin-bottom:4px}
#menu-config-suspenso button{display:block;width:100%;text-align:left;padding:11px 16px;
  background:transparent;color:var(--fg);font-size:14px;border-radius:0}
#menu-config-suspenso button:hover{background:var(--field)}
#menu-config-suspenso button.on,
#menu-config-suspenso button.on:hover{background:var(--brand);color:#fff;font-weight:600}


/* ---------- rodapé da barra lateral: engrenagem e perfil ---------- */
.rodape-visoes{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding-top:10px;border-top:1px solid var(--line);width:100%}
.rodape-visoes button{width:42px;height:42px;display:grid;place-items:center;
  background:transparent;border-radius:10px;color:var(--muted)}
.rodape-visoes button:hover{background:var(--panel);color:var(--fg)}
.rodape-visoes button.on{background:var(--brand);color:#fff}
.rodape-visoes svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
#avatar{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700;overflow:hidden}
#avatar img{width:100%;height:100%;object-fit:cover}
#btn-perfil:hover #avatar{box-shadow:0 0 0 2px var(--brand-lt)}

#menu-perfil{position:absolute;left:56px;bottom:8px;z-index:40;min-width:230px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);padding:6px 0}
#menu-perfil[hidden]{display:none}
#menu-perfil .cartao{padding:12px 16px;border-bottom:1px solid var(--line);margin-bottom:4px}
#menu-perfil .nome{display:block;font-size:14px;word-break:break-all}
#menu-perfil .papel-perfil{display:inline-block;margin-top:6px;font-size:11px;
  padding:2px 9px;border-radius:20px;border:1px solid var(--brand);color:var(--brand)}
#menu-perfil button{display:block;width:100%;text-align:left;padding:11px 16px;
  background:transparent;color:var(--fg);font-size:14px;border-radius:0}
#menu-perfil button:hover{background:var(--field);color:var(--no)}
header .quem{margin-left:auto;color:var(--muted);font-size:13px}

/* ---------- menu da conversa ---------- */
#painel .cabeca{flex-wrap:wrap}
#painel .identidade{display:flex;flex-direction:column;gap:2px;min-width:0}
#painel .protocolo{font-size:11px;color:var(--muted);letter-spacing:.3px}
#painel .acoes{margin-left:auto;display:flex;align-items:center;gap:4px;position:relative}
#painel .acoes button{background:transparent;border:0;padding:8px;border-radius:8px;
  color:var(--muted);display:grid;place-items:center}
#painel .acoes button:hover{background:var(--panel);color:var(--brand)}
#painel .acoes svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
#menu-mais{position:absolute;right:0;top:40px;z-index:40;min-width:214px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);padding:6px 0}
#menu-mais[hidden]{display:none}
#menu-mais button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:11px 16px;background:transparent;color:var(--fg);font-size:14px;border-radius:0}
#menu-mais button:hover{background:var(--field)}
#menu-mais button:disabled{opacity:.45;cursor:default}
#menu-mais button:disabled:hover{background:transparent}

.janela.larga{width:min(860px,100%)}
.abas-topsapp{display:flex;gap:8px;margin:18px 0 4px;border-bottom:1px solid var(--line)}
.abas-topsapp button{background:transparent;color:var(--muted);padding:9px 14px;
  border-bottom:2px solid transparent;border-radius:0;font-size:14px}
.abas-topsapp button.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;padding:18px 0}
.ficha .campo-ficha{display:flex;flex-direction:column;gap:3px}
.ficha .rotulo{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.ficha .valor{font-size:14px;word-break:break-word}
.cartao-servico{border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:12px;
  background:var(--field)}
.cartao-servico .topo-servico{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cartao-servico .id{font-weight:600}
.etiqueta{font-size:11px;padding:2px 9px;border-radius:20px;border:1px solid var(--line);color:var(--muted)}
.etiqueta.ok{color:var(--ok);border-color:var(--ok)}
.etiqueta.no{color:var(--no);border-color:var(--no)}
.linha-atendimento{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:10px}
.linha-atendimento .cabeca-at{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.linha-atendimento .detalhe{font-size:13px;color:var(--muted)}


/* ---------- rodapé de digitação: + | campo (✨) | enviar ---------- */
.linha-envio{display:flex;align-items:flex-end;gap:8px}
.campo-envio{flex:1;display:flex;align-items:flex-end;min-width:0;
  background:var(--field);border:1px solid var(--line);border-radius:12px}
.campo-envio:focus-within{border-color:var(--brand)}
#btn-mais-envio,#btn-enviar{background:transparent;border:0;padding:10px;border-radius:10px;
  color:var(--brand-lt);display:grid;place-items:center}
#btn-mais-envio:hover,#btn-enviar:hover{background:var(--panel);color:var(--brand)}
#btn-mais-envio svg,#btn-enviar svg{width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#btn-enviar svg{fill:currentColor;stroke:none}
#btn-ia{background:transparent;border:0;padding:9px;margin:0 2px 1px 0;border-radius:9px;
  color:var(--muted);display:grid;place-items:center}
#btn-ia:hover:not(:disabled){background:var(--panel);color:var(--brand)}
#btn-ia svg{width:18px;height:18px;fill:currentColor;stroke:none}
#btn-ia.pensando{opacity:.6}
#btn-ia.pensando svg{animation:pulsar 1s ease-in-out infinite}
@keyframes pulsar{50%{opacity:.35}}

#menu-envio,#menu-ia{position:absolute;bottom:64px;z-index:40;min-width:210px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);padding:6px 0}
#menu-envio{left:20px}
#menu-ia{right:74px}
#menu-envio[hidden],#menu-ia[hidden]{display:none}
#menu-envio button,#menu-ia button{display:block;width:100%;text-align:left;padding:11px 18px;
  background:transparent;color:var(--fg);font-size:14px;border-radius:0;font-weight:400}
#menu-envio button:hover:not(:disabled),#menu-ia button:hover:not(:disabled){background:var(--field)}
#menu-envio button:disabled,#menu-ia button:disabled{opacity:.45;cursor:default}

/* ---------- quem atende e o botão de assumir ---------- */
#painel .quem-atende{font-size:11px;color:var(--muted)}
#painel .acoes button.assumir{background:var(--brand);color:#fff;border:0;padding:8px 15px;
  font-weight:600;font-size:13px;border-radius:8px;white-space:nowrap}
#painel .acoes button.assumir:hover{background:var(--brand-dk);color:#fff}

/* ---------- departamento no cadastro de usuário ---------- */
.etiqueta-dep{display:inline-block;font-size:11px;padding:2px 9px;border-radius:20px;
  border:1px solid var(--line);color:var(--brand-lt);margin-right:4px}
.sem-dep,.todos-deps{font-size:12px;color:var(--muted)}
.carregando{font-size:13px;color:var(--muted)}
.acao.editar{margin-right:6px}

/* ---------- painel de motores de IA ---------- */
.bloco-painel{margin-top:26px}
.topo-bloco{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.topo-bloco h4{font-size:15px;font-weight:600}
.topo-bloco button{margin-left:auto;padding:8px 14px;background:var(--brand);color:#fff;
  font-weight:600;font-size:13px;border-radius:8px;border:0}
.topo-bloco button:hover{background:var(--brand-dk)}
.linha-funcao{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.linha-funcao:last-child{border-bottom:0}
.linha-funcao span{flex:0 0 210px;font-size:14px}
.linha-funcao select{flex:1;max-width:420px}
small.obs{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.teste{margin-top:12px;padding:11px 14px;border-radius:9px;background:var(--field);
  border:1px solid var(--line);font-size:13px;color:var(--muted);line-height:1.6}
.teste.ok{border-color:var(--ok);color:var(--fg)}
.teste.no{border-color:var(--no);color:var(--fg)}
.teste[hidden]{display:none}
.teste .sugestao{display:inline-block;margin:4px 4px 0 0;padding:4px 10px;font-size:12px;
  background:var(--panel);border:1px solid var(--line);color:var(--brand-lt);border-radius:7px}
.teste .sugestao:hover{border-color:var(--brand);color:var(--brand)}
.janela .rodape button.testar{background:var(--panel);border:1px solid var(--line);color:var(--fg);
  margin-right:auto}
.janela .rodape button.testar:hover{border-color:var(--brand);color:var(--brand)}

/* ---------- painel de WhatsApp: situação e QR Code ---------- */
.estado-ok{font-size:13px;color:var(--ok)}
.estado-no{font-size:13px;color:var(--no)}
.qr-conexao .passos-qr{margin:4px 0 14px 18px;font-size:13px;color:var(--muted);line-height:1.9}
.qr-conexao .passos-qr b{color:var(--fg);font-weight:600}
.qr-conexao .qr{display:inline-block;background:#fff;color:#17181b;
  padding:12px;border-radius:12px;border:1px solid var(--line)}
.qr-conexao .qr img{display:block;width:248px;height:248px;image-rendering:pixelated}

/* ---------- filtro de período (Histórico geral e Meus encerramentos) ---------- */
#filtros-data{display:flex;align-items:center;gap:6px;padding:0 14px 12px}
#filtros-data[hidden]{display:none}
#filtros-data input[type=date]{flex:1;min-width:0;padding:8px 10px;font-size:13px;
  background:var(--field);color:var(--fg);border:1px solid var(--line);border-radius:8px}
#filtros-data input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.65;cursor:pointer}
#filtros-data .ate{color:var(--muted);font-size:13px}
#filtros-data #limpar-datas{background:transparent;color:var(--muted);padding:4px 7px;font-size:13px}
#filtros-data #limpar-datas:hover{color:var(--fg)}

/* ---------- aviso de conversa nova: pisca até a visão ser aberta ---------- */
@keyframes pisca-aviso{
  0%,100%{box-shadow:0 0 0 0 rgba(245,128,31,0);background:transparent}
  50%{box-shadow:0 0 0 3px rgba(245,128,31,.35);background:rgba(245,128,31,.22)}
}
#visoes button.avisando{animation:pisca-aviso 1.1s ease-in-out infinite;border-radius:10px}
#visoes button.avisando svg{color:var(--brand-lt)}

/* ---------- anexos e transcrição de áudio ---------- */
.msg .anexo-audio{display:block;width:260px;max-width:100%;margin:8px 0 2px}
.msg .anexo-imagem{display:block;max-width:260px;border-radius:10px;margin:8px 0 2px}
.msg .anexo-video{display:block;max-width:280px;border-radius:10px;margin:8px 0 2px}
.msg .anexo-arquivo{display:inline-block;margin:8px 0 2px;color:var(--brand-lt);font-size:13px}
.msg .transcricao{margin:6px 0 2px;padding:8px 10px;border-radius:8px;font-size:13px;
  line-height:1.5;background:rgba(0,0,0,.22);color:var(--fg);border:1px solid var(--line)}
.msg .transcricao b{color:var(--muted);font-weight:600}
.msg .transcricao.falhou{color:var(--no)}