/* ================================================================
TEMAS — 3 opções (pedido do usuário): "dark" (padrão/atual),
"clean" (claro, botões pretos) e "whatsapp" (clarinho, parecido
com o WhatsApp Web). A troca é feita botando data-tema="clean" ou
data-tema="whatsapp" neste elemento (#anyway-app-root) — ver
aplicarTema() em core.js. Sem o atributo (ou com "dark"), fica no
tema escuro de sempre, é o :root-equivalente logo abaixo.
Truque pra não precisar duplicar TODO botão/badge do app: cores
de status (kanban, chamados, follow-ups etc) continuam com hex
fixo nos próprios seletores — não usam essas variáveis de
propósito, porque o SIGNIFICADO da cor (vermelho = falhou, amarelo
= em atendimento...) precisa ficar reconhecível em qualquer tema.
Só a "casca" do app (fundo, texto, bordas, cor de destaque/botão
primário) troca com o tema.
--anyway-limao-rgb / --anyway-contraste-rgb existem só pra dar pra
usar a cor de destaque e o "branco/preto de overlay" dentro de
rgba(), já que rgba() não aceita uma variável com hex dentro —
precisa dos 3 números separados (ver uso em rgba(var(--anyway-
limao-rgb), 0.15) pelo arquivo abaixo). */
/* Desliga o gesto nativo do Chrome de "arrastar pra esquerda/direita
navega pra página anterior/seguinte" — sem isso, arrastar o dedo na
horizontal em qualquer lugar do app (celular) podia sair do Anyway
sem querer. Precisa ser em html/body (é um comportamento do
documento/viewport, não só do widget) — não muda nada visualmente,
só desliga esse gesto específico. O JS (configurarGestoAbrirMenuCelular,
em core.js) é quem assume esse gesto no lugar, abrindo o menu. */
html, body { overscroll-behavior-x: none; }
#anyway-app-root, #anyway-app-root * { box-sizing: border-box; }
#anyway-app-root {
font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
--anyway-preto: #0a0a0a;
--anyway-preto-painel: #131313;
--anyway-preto-item: #1a1a1a;
--anyway-borda: #2a2a2a;
--anyway-texto: #f5f5f5;
--anyway-texto-fraco: #a3a3a3;
--anyway-titulo: #fff;
--anyway-limao: #c6ff2f;
--anyway-limao-hover: #b0e828;
--anyway-limao-rgb: 198, 255, 47;
--anyway-contraste-rgb: 255, 255, 255;
--anyway-laranja: #ff8a3d;
--anyway-erro: #ff6b6b;
/* "Em atendimento" saiu do verde limão pra esse amarelo choque —
decisão do usuário pra não ficar idêntico ao "Fechado" (que agora
também usa o limão, ver STATUS_COR no core.js — cores usadas nos
avatares por status da lista de Conversas e do card do contato). */
--anyway-amarelo-choque: #fff400;
--anyway-sidebar-largura: 220px;
--anyway-topbar-altura: 52px;
}
/* Tema "Clean" — fundo claro, texto preto, botões pretos onde hoje
é lima (referência: cards brancos sobre cinza clarinho, número
em círculo preto, botão primário preto com texto claro). */
#anyway-app-root[data-tema="clean"] {
--anyway-preto: #f2f2f4;
--anyway-preto-painel: #ffffff;
--anyway-preto-item: #f5f5f6;
--anyway-borda: #e3e3e6;
--anyway-texto: #1a1a1a;
--anyway-texto-fraco: #767676;
--anyway-titulo: #0a0a0a;
--anyway-limao: #0a0a0a;
--anyway-limao-hover: #2e2e2e;
--anyway-limao-rgb: 10, 10, 10;
--anyway-contraste-rgb: 10, 10, 10;
}
/* Tema "WhatsApp" — clarinho, paleta bem próxima da do WhatsApp Web
(verde-teal de destaque, fundo #f0f2f5, textos #111b21/#667781). */
#anyway-app-root[data-tema="whatsapp"] {
--anyway-preto: #f0f2f5;
--anyway-preto-painel: #ffffff;
--anyway-preto-item: #f5f6f6;
--anyway-borda: #e9edef;
--anyway-texto: #111b21;
--anyway-texto-fraco: #667781;
--anyway-titulo: #111b21;
--anyway-limao: #00a884;
--anyway-limao-hover: #06cf9c;
--anyway-limao-rgb: 0, 168, 132;
--anyway-contraste-rgb: 0, 0, 0;
}
/* Scroll discreto padronizado em todo o app (lista de conversas, menu
lateral, kanban, listas de modais, caixa de digitação etc.) — fino, na
cor da borda do app, sem fundo. Escopado a #anyway-app-root pra não
afetar o resto da página (WordPress/Elementor) onde o widget é embutido. */
#anyway-app-root, #anyway-app-root * {
scrollbar-width: thin;
scrollbar-color: var(--anyway-borda) transparent;
}
#anyway-app-root *::-webkit-scrollbar { width: 6px; height: 6px; }
#anyway-app-root *::-webkit-scrollbar-track { background: transparent; }
#anyway-app-root *::-webkit-scrollbar-thumb { background: var(--anyway-borda); border-radius: 3px; }
#anyway-app-root *::-webkit-scrollbar-thumb:hover { background: var(--anyway-texto-fraco); }
/* ---------- Login ----------
Visual FIXO (preto/branco, minimalista) — decisão do usuário: essa
tela NÃO muda com o tema escolhido depois de logado (nem daria pra
saber a preferência antes de identificar quem está entrando). Por
isso hex direto aqui, nunca var(--anyway-*). Layout em duas colunas
(marca à esquerda, formulário à direita), empilha no celular. */
.anyway-login-v2 {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
height: 100vh;
height: 100dvh;
display: flex;
overflow-y: auto;
background: #0a0a0a;
color: #fff;
}
.anyway-login-lado {
flex: 1 1 50%;
min-width: 0;
padding: 56px;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.anyway-login-marca { border-right: 1px solid #202020; justify-content: space-between; }
.anyway-login-etiqueta {
display: flex; align-items: center; gap: 8px;
font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #888;
}
.anyway-login-etiqueta-tracos { display: inline-block; width: 18px; height: 1px; background: #666; }
.anyway-login-logo-wrap { margin: 36px 0; }
.anyway-login-logo-wrap img { height: 84px; width: auto; max-width: 100%; display: block; }
.anyway-login-descricao { font-size: 14px; line-height: 1.7; color: #b3b3b3; max-width: 380px; margin: 0; }
.anyway-login-rodape { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #555; margin-top: 40px; }
.anyway-login-form-lado { align-items: flex-start; }
.anyway-login-form-lado h1 { font-size: 30px; font-weight: 700; color: #fff; margin: 18px 0 8px; }
.anyway-login-subtexto { font-size: 14px; color: #999; margin: 0 0 28px; max-width: 360px; }
#anyway-login-form { width: 100%; max-width: 380px; }
#anyway-login-form label {
display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
color: #888; margin: 16px 0 6px;
}
#anyway-login-form label:first-child { margin-top: 0; }
#anyway-login-form input {
width: 100%; padding: 13px 14px; border-radius: 6px; font-size: 14px;
background: #141414; border: 1px solid #2a2a2a; color: #fff; box-sizing: border-box;
}
#anyway-login-form input::placeholder { color: #555; }
#anyway-login-form button {
width: 100%; margin-top: 26px; padding: 13px; border: none; border-radius: 6px;
background: #fff; color: #0a0a0a; font-weight: 700; font-size: 13px;
letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
}
#anyway-login-form button:hover { background: #dcdcdc; }
#anyway-login-form .erro { color: #ff6b6b; font-size: 13px; margin-top: 12px; }
.anyway-login-suporte-nota { font-size: 12px; color: #666; margin-top: 24px; max-width: 360px; }
@media (max-width: 760px) {
.anyway-login-v2 { flex-direction: column; }
.anyway-login-lado { padding: 36px 24px; }
.anyway-login-marca { border-right: none; border-bottom: 1px solid #202020; }
.anyway-login-logo-wrap { margin: 24px 0; }
}
/* ---------- Shell (estrutura com menu) ----------
Ocupa a janela do navegador inteira (sai do fluxo normal da
página pra não somar com cabeçalho/rodapé do site, igual ao
ajuste que já fizemos pro celular — agora vale pro desktop
também). 100vh como fallback, 100dvh por cima onde suportado. */
#anyway-shell {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
width: 100%;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
border: none;
border-radius: 0;
overflow: hidden;
overscroll-behavior-x: none;
background: var(--anyway-preto);
color: var(--anyway-texto);
z-index: 9999;
}
/* Menu lateral (desktop) / gaveta (celular) */
#anyway-sidebar {
width: var(--anyway-sidebar-largura);
flex-shrink: 0;
display: flex;
flex-direction: column;
background: var(--anyway-preto-painel);
border-right: 1px solid var(--anyway-borda);
}
/* Logo em imagem (pedido do usuário — antes era texto estilizado).
No tema Dark o chip continua fixo escuro com a logo branca (mesmo
visual de sempre). Nos temas Clean/UaitsApp o chip passa a acompanhar
o fundo claro do próprio menu (pedido do usuário: "mantendo a cor de
fundo do tema") — nesse caso a logo BRANCA ficaria invisível, então
troca pra versão PRETA (ver as duas ![]()
em #anyway-sidebar-marca no
JS: .anyway-logo-clara/.anyway-logo-escura, uma delas escondida via
CSS conforme o data-tema). O login (renderLogin) é sempre fixo e
nunca entra aqui — sempre usa a logo branca. */
#anyway-sidebar-marca {
padding: 14px 18px;
background: #0a0a0a;
border-bottom: 1px solid #2a2a2a;
display: flex;
align-items: center;
}
#anyway-sidebar-marca img { display: block; height: 30px; width: auto; max-width: 100%; }
#anyway-sidebar-marca .anyway-logo-escura { display: none; }
#anyway-app-root[data-tema="clean"] #anyway-sidebar-marca,
#anyway-app-root[data-tema="whatsapp"] #anyway-sidebar-marca {
background: transparent;
border-bottom-color: var(--anyway-borda);
}
#anyway-app-root[data-tema="clean"] #anyway-sidebar-marca .anyway-logo-clara,
#anyway-app-root[data-tema="whatsapp"] #anyway-sidebar-marca .anyway-logo-clara { display: none; }
#anyway-app-root[data-tema="clean"] #anyway-sidebar-marca .anyway-logo-escura,
#anyway-app-root[data-tema="whatsapp"] #anyway-sidebar-marca .anyway-logo-escura { display: block; }
#anyway-sidebar-nav { flex: 1; padding: 10px; overflow-y: auto; }
.anyway-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
margin-bottom: 4px;
font-size: 14px;
font-weight: 600;
color: var(--anyway-texto-fraco);
cursor: pointer;
user-select: none;
}
.anyway-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.anyway-nav-item:hover { background: var(--anyway-preto-item); color: var(--anyway-titulo); }
.anyway-nav-item.ativo { background: var(--anyway-preto-item); color: var(--anyway-limao); }
.anyway-nav-item.desabilitado { cursor: not-allowed; opacity: 0.45; }
.anyway-nav-item.desabilitado:hover { background: none; color: var(--anyway-texto-fraco); }
.anyway-nav-item.desabilitado.previsualizavel { cursor: pointer; opacity: 0.8; }
.anyway-nav-item.desabilitado.previsualizavel:hover { background: var(--anyway-preto-item); color: var(--anyway-titulo); }
.anyway-nav-badge {
margin-left: auto;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .03em;
padding: 2px 6px;
border-radius: 8px;
background: var(--anyway-preto);
border: 1px solid var(--anyway-borda);
color: var(--anyway-texto-fraco);
}
/* Bolinha verde limão no ícone "Conversas" do menu lateral — acende
quando QUALQUER conversa tem mensagem não lida (independente do
status do Kanban de cada uma), ver carregarConversas() no core.js. */
.anyway-nav-indicador {
margin-left: auto;
width: 9px; height: 9px;
border-radius: 50%;
background: var(--anyway-limao);
flex-shrink: 0;
}
#anyway-sidebar-rodape {
padding: 12px;
border-top: 1px solid var(--anyway-borda);
}
#anyway-sidebar-email {
font-size: 11px;
color: var(--anyway-texto-fraco);
padding: 0 4px 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#anyway-sair {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
border-radius: 8px;
border: 1px solid var(--anyway-borda);
background: none;
color: var(--anyway-texto-fraco);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
#anyway-sair:hover { color: var(--anyway-titulo); border-color: var(--anyway-limao); }
#anyway-sair svg { width: 16px; height: 16px; }
/* Botão de notificações (chamada + mensagem nova) no rodapé do menu —
só o ícone de sino (pedido do usuário: texto do lado ficava estranho/
poluído — e tinha até um bug, ver comentário em atualizarBotaoNotificacoes
no core.js). Estado só por cor + title/tooltip, dois momentos bem
diferentes (ver core.js): antes da permissão do navegador ser concedida,
é um convite pra ativar (cinza padrão); depois de concedida, vira um
interruptor da sessão — verde limão = notificações ativas, cinza =
silenciadas (mesma lógica visual dos ícones de robô/fantasma no card
do contato: ativo=limão, inativo=cinza padrão). */
#anyway-notificacoes-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 9px 12px;
margin-bottom: 8px;
border-radius: 8px;
border: 1px solid var(--anyway-borda);
background: none;
color: var(--anyway-texto-fraco);
cursor: pointer;
}
/* Botão "Tema" — sempre mostra esse texto fixo (pedido do usuário: não
troca pro nome do tema escolhido), abre o popover de troca ao clicar
(abrirPopoverTema). Mesmo formato/tamanho de toque do botão de
notificações logo acima. */
#anyway-tema-wrap {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
margin-bottom: 8px;
border-radius: 8px;
border: 1px solid var(--anyway-borda);
background: none;
color: var(--anyway-texto-fraco);
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 600;
text-align: left;
}
#anyway-tema-wrap:hover { color: var(--anyway-titulo); border-color: var(--anyway-limao); }
#anyway-tema-wrap svg { width: 18px; height: 18px; flex-shrink: 0; }
#anyway-notificacoes-btn:hover { color: var(--anyway-titulo); border-color: var(--anyway-limao); }
#anyway-notificacoes-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
#anyway-notificacoes-btn.ativo { border-color: var(--anyway-limao); color: var(--anyway-limao); }
#anyway-notificacoes-btn.ativo:hover { background: rgba(var(--anyway-limao-rgb), 0.1); }
/* Bloqueado pelo próprio navegador (permissão negada no site) — cor
própria (vermelho), diferente do cinza padrão/silenciado, pra não
parecer que o botão simplesmente "parou de funcionar" depois do
clique (bug relatado no Chrome — o botão continua clicável, só que
nesse estado o clique mostra um aviso em vez de pedir permissão de
novo, porque o navegador não deixa re-perguntar depois de negada). */
#anyway-notificacoes-btn.bloqueado { color: var(--anyway-erro); cursor: pointer; border-color: rgba(255, 107, 107, 0.4); }
#anyway-notificacoes-btn.bloqueado:hover { color: var(--anyway-erro); border-color: var(--anyway-erro); }
/* Barra superior (só aparece no celular) */
#anyway-topbar {
display: none;
align-items: center;
gap: 12px;
padding: 0 14px;
height: var(--anyway-topbar-altura);
flex-shrink: 0;
border-bottom: 1px solid var(--anyway-borda);
background: var(--anyway-preto-painel);
}
#anyway-abrir-menu {
background: none;
border: none;
color: var(--anyway-limao);
cursor: pointer;
padding: 4px;
display: flex;
}
#anyway-abrir-menu svg { width: 22px; height: 22px; }
#anyway-topbar-titulo { font-weight: 700; color: var(--anyway-titulo); font-size: 15px; }
/* Atalhos (Conversas/Ligações/E-mail) — alinhados à direita, servem de
navegação rápida e de indicador visual de novidade (bolinha) sem
precisar abrir a gaveta do menu lateral. Aparecem em DOIS lugares no
celular, com a mesma classe (.anyway-topbar-atalhos): na topbar
normal (#anyway-topbar) e no cabeçalho da conversa aberta em tela
cheia (#anyway-chat-thread-header) — esse segundo cobre o primeiro
por cima (position:fixed), então sem essa duplicata os ícones
sumiriam com um chat aberto. Os dois pais já são display:none no
desktop (media query lá embaixo é quem liga isso no celular), então
esse bloco só aparece de fato no celular. */
.anyway-topbar-atalhos {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.anyway-topbar-atalho {
position: relative;
background: none;
border: none;
color: var(--anyway-texto-fraco);
padding: 6px;
display: flex;
cursor: pointer;
}
.anyway-topbar-atalho svg { width: 20px; height: 20px; }
.anyway-topbar-atalho:hover { color: var(--anyway-titulo); }
.anyway-topbar-atalho-badge {
position: absolute;
top: 4px; right: 4px;
width: 8px; height: 8px;
border-radius: 50%;
background: #ff3b30;
border: 1.5px solid var(--anyway-preto-painel);
}
#anyway-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
z-index: 998;
}
/* ---------- Área de conteúdo ---------- */
#anyway-conteudo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.anyway-secao { flex: 1; display: none; min-height: 0; }
.anyway-secao.ativa { display: flex; }
/* Placeholder "em breve" */
.anyway-em-breve {
margin: auto;
text-align: center;
color: var(--anyway-texto-fraco);
padding: 40px;
}
.anyway-em-breve strong { display: block; color: var(--anyway-titulo); font-size: 16px; margin-bottom: 6px; }
/* ---------- Kanban ---------- */
#anyway-secao-kanban { padding: 16px; overflow: hidden; }
#anyway-kanban-board { display: flex; gap: 14px; flex: 1; overflow-x: auto; overflow-y: hidden; align-items: flex-start; }
.anyway-kanban-coluna {
flex: 0 0 270px;
width: 270px;
display: flex;
flex-direction: column;
background: var(--anyway-preto-painel);
border: 1px solid var(--anyway-borda);
border-radius: 10px;
max-height: 100%;
border-top: 3px solid var(--anyway-cor-coluna, var(--anyway-limao));
}
.anyway-kanban-coluna.sobre-drag { background: var(--anyway-preto-item); border-color: var(--anyway-cor-coluna, var(--anyway-limao)); }
.anyway-kanban-coluna-header {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px; border-bottom: 1px solid var(--anyway-borda); flex-shrink: 0;
}
.anyway-kanban-coluna-titulo { font-size: 13px; font-weight: 700; color: var(--anyway-titulo); }
.anyway-kanban-coluna-contagem {
font-size: 11px; color: var(--anyway-texto-fraco); background: var(--anyway-preto);
border-radius: 10px; padding: 1px 7px;
}
.anyway-kanban-coluna-cards { flex: 1; overflow-y: auto; padding: 8px; min-height: 60px; }
.anyway-kanban-card {
position: relative;
background: var(--anyway-preto-item);
border: 1px solid var(--anyway-borda);
border-radius: 8px;
padding: 10px 10px 10px 13px;
margin-bottom: 8px;
cursor: grab;
}
.anyway-kanban-card:hover { border-color: var(--anyway-cor-coluna, var(--anyway-limao)); }
.anyway-kanban-card.arrastando { opacity: 0.4; }
.anyway-kanban-card.pendente { border-left: 3px solid var(--anyway-limao); padding-left: 10px; }
.anyway-kanban-card-nome { font-weight: 600; font-size: 13px; color: var(--anyway-titulo); margin-bottom: 3px; }
.anyway-kanban-card-preview {
font-size: 12px; color: var(--anyway-texto-fraco); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px;
}
.anyway-kanban-card-agente { font-size: 11px; color: var(--anyway-texto-fraco); }
.anyway-kanban-card-indicador {
position: absolute; top: 10px; right: 10px;
width: 7px; height: 7px; border-radius: 50%; background: var(--anyway-limao);
}
.anyway-kanban-coluna-vazio { color: var(--anyway-texto-fraco); font-size: 12px; text-align: center; padding: 16px 6px; }
/* ---------- Início (visão geral da conta, dado real) ---------- */
#anyway-secao-inicio { flex-direction: column; overflow-y: auto; padding: 24px; }
.anyway-inicio-topo {
display: flex; align-items: center; justify-content: flex-end;
gap: 8px; margin-bottom: 16px;
}
#anyway-inicio-atualizado { font-size: 12px; color: var(--anyway-texto-fraco); }
#anyway-inicio-atualizar-btn { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; }
#anyway-inicio-atualizar-btn svg { width: 16px !important; height: 16px !important; }
.anyway-inicio-secao { margin-bottom: 26px; }
.anyway-inicio-secao:last-child { margin-bottom: 0; }
.anyway-inicio-secao-titulo {
font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--anyway-texto-fraco); margin: 0 0 10px;
}
.anyway-inicio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
}
.anyway-stat-card {
background: var(--anyway-preto-painel);
border: 1px solid var(--anyway-borda);
border-radius: 10px;
padding: 16px;
}
.anyway-stat-valor { display: block; font-size: 26px; font-weight: 800; color: var(--anyway-titulo); }
.anyway-stat-rotulo { display: block; font-size: 12px; color: var(--anyway-texto-fraco); margin-top: 4px; }
/* ---------- Agentes ---------- */
#anyway-secao-agentes { flex-direction: column; overflow-y: auto; padding: 24px; }
.anyway-painel-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.anyway-painel-header h3 { margin: 0; color: var(--anyway-titulo); font-size: 17px; }
/* Subtítulo curto logo abaixo de um .anyway-painel-header (ex: telas do
Instagram) — separado do texto explicativo mais longo (.anyway-template-campo-hint)
que continua vindo depois, quando existir. */
.anyway-painel-subtitulo { font-size: 12px; color: var(--anyway-texto-fraco); margin-bottom: 10px; }
.anyway-btn-primario {
background: var(--anyway-limao);
color: var(--anyway-preto);
border: none;
border-radius: 6px;
padding: 9px 16px;
font-weight: 700;
font-size: 13px;
cursor: pointer;
}
.anyway-btn-primario:hover { background: var(--anyway-limao-hover); }
.anyway-agente-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px;
padding: 12px 14px;
background: var(--anyway-preto-painel);
border: 1px solid var(--anyway-borda);
border-radius: 8px;
margin-bottom: 8px;
position: relative;
}
.anyway-agente-info { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
.anyway-agente-nome-linha { display: flex !important; align-items: center !important; gap: 6px; }
.anyway-agente-nome { color: var(--anyway-titulo); font-weight: 600; font-size: 14px; }
.anyway-agente-nome .anyway-agente-voce { color: var(--anyway-texto-fraco); font-weight: 400; }
.anyway-agente-meta { color: var(--anyway-texto-fraco); font-size: 12px; margin-top: 2px; }
.anyway-agente-editar-nome {
background: none !important;
border: none !important;
color: var(--anyway-texto-fraco) !important;
cursor: pointer;
padding: 2px !important;
width: 22px !important; height: 22px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
flex: 0 0 auto !important;
}
.anyway-agente-editar-nome:hover { color: var(--anyway-limao) !important; }
.anyway-agente-editar-nome svg { width: 13px; height: 13px; }
.anyway-agente-nome-input {
background: var(--anyway-preto) !important;
color: var(--anyway-texto) !important;
border: 1px solid var(--anyway-limao) !important;
border-radius: 6px !important;
padding: 4px 8px !important;
font-size: 14px !important;
width: 180px !important;
max-width: 60vw !important;
box-sizing: border-box !important;
}
.anyway-agente-nome-salvar, .anyway-agente-nome-cancelar {
background: none !important;
border: 1px solid var(--anyway-borda) !important;
border-radius: 6px !important;
width: 26px !important; height: 26px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
cursor: pointer;
flex: 0 0 auto !important;
}
.anyway-agente-nome-salvar { color: var(--anyway-limao) !important; }
.anyway-agente-nome-salvar svg, .anyway-agente-nome-cancelar svg { width: 13px; height: 13px; }
.anyway-agente-nome-cancelar { color: var(--anyway-texto-fraco) !important; }
.anyway-agente-papel-select {
flex: 0 0 auto !important;
width: 130px !important;
max-width: 130px !important;
min-width: 130px !important;
box-sizing: border-box !important;
position: relative !important;
display: inline-block !important;
background: var(--anyway-preto) !important;
color: var(--anyway-texto) !important;
border: 1px solid var(--anyway-borda) !important;
border-radius: 6px !important;
padding: 6px 8px !important;
margin: 0 !important;
font-size: 12px !important;
}
.anyway-agente-remover {
background: none !important;
border: 1px solid var(--anyway-borda) !important;
color: var(--anyway-erro) !important;
border-radius: 6px !important;
width: 32px !important; height: 32px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
cursor: pointer;
padding: 0 !important;
flex: 0 0 auto !important;
}
.anyway-agente-remover:hover { border-color: var(--anyway-erro) !important; }
.anyway-agente-remover svg { width: 15px !important; height: 15px !important; }
.anyway-agente-vazio { color: var(--anyway-texto-fraco); font-size: 13px; padding: 20px 0; text-align: center; }
/* Modal de convidar agente (mesmo padrão do lightbox) */
#anyway-agente-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.65);
z-index: 10000;
align-items: center;
justify-content: center;
padding: 20px;
}
#anyway-agente-modal.aberto { display: flex; }
#anyway-agente-modal-card {
background: var(--anyway-preto-painel);
border: 1px solid var(--anyway-borda);
border-radius: 10px;
padding: 22px;
width: 100%;
max-width: 360px;
color: var(--anyway-texto);
}
#anyway-agente-modal-card h3 { margin: 0 0 16px; color: var(--anyway-titulo); font-size: 16px; }
#anyway-agente-form .anyway-campo { margin-bottom: 12px; text-align: left; }
#anyway-agente-form label { display: block; font-size: 12px; color: var(--anyway-texto-fraco); margin-bottom: 4px; }
#anyway-agente-form input, #anyway-agente-form select {
width: 100%; padding: 9px; border-radius: 6px; font-size: 14px;
background: var(--anyway-preto); border: 1px solid var(--anyway-borda); color: var(--anyway-texto);
}
#anyway-agente-form-status { font-size: 12px; margin: 8px 0; min-height: 16px; }
#anyway-agente-form-status.erro { color: var(--anyway-erro); }
#anyway-agente-form-status.sucesso { color: var(--anyway-limao); }
.anyway-agente-modal-botoes { display: flex; gap: 8px; margin-top: 14px; }
.anyway-agente-modal-botoes button { flex: 1; padding: 10px; border-radius: 6px; font-weight: 700; font-size: 13px; cursor: pointer; }
#anyway-agente-cancelar { background: none; border: 1px solid var(--anyway-borda); color: var(--anyway-texto-fraco); }
#anyway-agente-enviar { background: var(--anyway-limao); border: none; color: var(--anyway-preto); }
#anyway-agente-enviar:disabled { opacity: 0.5; cursor: default; }
/* ---------- Contatos ---------- */
#anyway-secao-contatos { flex-direction: column; overflow-y: auto; padding: 24px; }
.anyway-contato-busca {
width: 100%; padding: 9px 12px; margin-bottom: 14px; box-sizing: border-box;
background: var(--anyway-preto); border: 1px solid var(--anyway-borda);
border-radius: 6px; color: var(--anyway-texto); font-size: 13px;
}
.anyway-contato-busca::placeholder { color: var(--anyway-texto-fraco); }
.anyway-contato-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px;
padding: 12px 14px;
background: var(--anyway-preto-painel);
border: 1px solid var(--anyway-borda);
border-radius: 8px;
margin-bottom: 8px;
position: relative;
}
.anyway-contato-info { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
.anyway-contato-nome { color: var(--anyway-titulo); font-weight: 600; font-size: 14px; }
.anyway-contato-meta { color: var(--anyway-texto-fraco); font-size: 12px; margin-top: 2px; }
.anyway-contato-ver-conversa {
flex: 0 0 auto !important;
background: none;
border: 1px solid var(--anyway-limao);
color: var(--anyway-limao);
border-radius: 6px;
padding: 6px 10px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.anyway-contato-ver-conversa:hover { background: var(--anyway-limao); color: var(--anyway-preto); }
/* Modal de novo/editar contato (mesmo padrão do modal de agente) */
#anyway-contato-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.65);
z-index: 10000;
align-items: center;
justify-content: center;
padding: 20px;
}
#anyway-contato-modal.aberto { display: flex; }
#anyway-contato-modal-card {
background: var(--anyway-preto-painel);
border: 1px solid var(--anyway-borda);
border-radius: 10px;
padding: 22px;
width: 100%;
max-width: 360px;
color: var(--anyway-texto);
}
#anyway-contato-modal-card h3 { margin: 0 0 16px; color: var(--anyway-titulo); font-size: 16px; }
#anyway-contato-form .anyway-campo { margin-bottom: 12px; text-align: left; }
#anyway-contato-form label { display: block; font-size: 12px; color: var(--anyway-texto-fraco); margin-bottom: 4px; }
#anyway-contato-form input, #anyway-contato-form select {
width: 100%; padding: 9px; border-radius: 6px; font-size: 14px;
background: var(--anyway-preto); border: 1px solid var(--anyway-borda); color: var(--anyway-texto); box-sizing: border-box;
}
#anyway-contato-form-status { font-size: 12px; margin: 8px 0; min-height: 16px; }
#anyway-contato-form-status.erro { color: var(--anyway-erro); }
#anyway-contato-cancelar { background: none; border: 1px solid var(--anyway-borda); color: var(--anyway-texto-fraco); }
#anyway-contato-enviar { background: var(--anyway-limao); border: none; color: var(--anyway-preto); }
#anyway-contato-enviar:disabled { opacity: 0.5; cursor: default; }
.anyway-painel-header-botoes { display: flex !important; gap: 8px; flex: 0 0 auto !important; }
.anyway-btn-secundario {
background: none;
color: var(--anyway-texto);
border: 1px solid var(--anyway-borda);
border-radius: 6px;
padding: 9px 16px;
font-weight: 700;
font-size: 13px;
cursor: pointer;
}
.anyway-btn-secundario:hover { border-color: var(--anyway-limao); color: var(--anyway-limao); }
.anyway-contato-etiqueta {
display: inline-block;
margin-top: 4px;
font-size: 11px;
font-weight: 600;
color: var(--anyway-limao);
background: rgba(var(--anyway-limao-rgb), 0.1);
border: 1px solid rgba(var(--anyway-limao-rgb), 0.4);
border-radius: 10px;
padding: 1px 8px;
}
/* Modal de importar lista (mesmo padrão dos outros modais, só mais largo) */
#anyway-importar-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.65);
z-index: 10000;
align-items: center;
justify-content: center;
padding: 20px;
}
#anyway-importar-modal.aberto { display: flex; }
#anyway-importar-modal-card {
background: var(--anyway-preto-painel);
border: 1px solid var(--anyway-borda);
border-radius: 10px;
padding: 22px;
width: 100%;
max-width: 440px;
color: var(--anyway-texto);
}
#anyway-importar-modal-card h3 { margin: 0 0 10px; color: var(--anyway-titulo); font-size: 16px; }
.anyway-importar-instrucao { font-size: 12px; color: var(--anyway-texto-fraco); margin: 0 0 12px; line-height: 1.5; }
.anyway-importar-arquivo-linha { margin-bottom: 12px; }
.anyway-importar-arquivo-linha input[type="file"] { color: var(--anyway-texto-fraco); font-size: 13px; }
#anyway-importar-textarea {
width: 100%; box-sizing: border-box; padding: 9px; border-radius: 6px; font-size: 13px;
background: var(--anyway-preto); border: 1px solid var(--anyway-borda); color: var(--anyway-texto); resize: vertical; font-family: monospace;
}
#anyway-importar-status { font-size: 12px; margin: 8px 0; min-height: 16px; }
#anyway-importar-status.erro { color: var(--anyway-erro); }
#anyway-importar-status.sucesso { color: var(--anyway-limao); }
#anyway-importar-cancelar { background: none; border: 1px solid var(--anyway-borda); color: var(--anyway-texto-fraco); }
#anyway-importar-enviar { background: var(--anyway-limao); border: none; color: var(--anyway-preto); }
#anyway-importar-enviar:disabled { opacity: 0.5; cursor: default; }
/* Modal de envio de template — mesmo padrão dos outros modais, só mais
largo e com scroll, já que os campos variam de acordo com o template
escolhido (pode ter cabeçalho de mídia, várias variáveis, botões...) */
#anyway-template-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.65);
z-index: 10000;
align-items: center;
justify-content: center;
padding: 20px;
}
#anyway-template-modal.aberto { display: flex; }
#anyway-template-modal-card {
background: var(--anyway-preto-painel);
border: 1px solid var(--anyway-borda);
border-radius: 10px;
padding: 22px;
width: 100%;
max-width: 460px;
max-height: 85vh;
overflow-y: auto;
color: var(--anyway-texto);
box-sizing: border-box;
}
#anyway-template-modal-card h3 { margin: 0 0 16px; color: var(--anyway-titulo); font-size: 16px; }
#anyway-template-modal .anyway-campo { margin-bottom: 12px; text-align: left; }
#anyway-template-modal label { display: block; font-size: 12px; color: var(--anyway-texto-fraco); margin-bottom: 4px; }
#anyway-template-modal select,
#anyway-template-modal input[type="text"],
#anyway-template-modal textarea {
width: 100%; padding: 9px; border-radius: 6px; font-size: 14px;
background: var(--anyway-preto); border: 1px solid var(--anyway-borda); color: var(--anyway-texto); box-sizing: border-box;
}
#anyway-template-modal textarea { resize: vertical; font-family: inherit; }
.anyway-template-campo-estatico {
font-size: 12px; color: var(--anyway-texto-fraco); background: var(--anyway-preto);
border: 1px dashed var(--anyway-borda); border-radius: 6px; padding: 8px 10px; line-height: 1.4;
}
.anyway-template-campo-hint { font-size: 11px; color: var(--anyway-texto-fraco); margin-top: 3px; }
/* Classe compartilhada pela caixa de pré-visualização — usada tanto no
popup de template do chat quanto no Disparador (ids diferentes, mesmo
visual). */
.anyway-template-preview-box {
background: var(--anyway-preto-item); border: 1px solid var(--anyway-borda);
border-radius: 10px; padding: 12px; font-size: 13px; color: var(--anyway-texto);
white-space: pre-wrap; line-height: 1.5;
}
.anyway-template-preview-box .anyway-template-preview-header { font-weight: 700; margin-bottom: 6px; }
.anyway-template-preview-box .anyway-template-preview-rodape { color: var(--anyway-texto-fraco); font-size: 11px; margin-top: 8px; }
.anyway-template-preview-box .anyway-template-preview-botao {
display: inline-block; margin: 8px 6px 0 0; padding: 5px 10px; border-radius: 14px;
border: 1px solid var(--anyway-limao); color: var(--anyway-limao); font-size: 11px; font-weight: 600;
}
.anyway-template-preview-box .anyway-template-preview-vazio { color: var(--anyway-texto-fraco); font-style: italic; }
.anyway-template-preview-box .anyway-template-preview-imagem {
display: block; max-width: 100%; max-height: 220px; width: auto;
border-radius: 8px; margin-bottom: 8px; object-fit: cover;
}
#anyway-template-status { font-size: 12px; margin: 8px 0; min-height: 16px; }
#anyway-template-status.erro { color: var(--anyway-erro); }
#anyway-template-status.sucesso { color: var(--anyway-limao); }
#anyway-template-cancelar { background: none; border: 1px solid var(--anyway-borda); color: var(--anyway-texto-fraco); }
#anyway-template-enviar { background: var(--anyway-limao); border: none; color: var(--anyway-preto); }
#anyway-template-enviar:disabled { opacity: 0.5; cursor: default; }
/* ---------- Disparador ---------- */
#anyway-secao-disparador { flex-direction: column; overflow-y: auto; padding: 24px; }
#anyway-secao-follow-ups { flex-direction: column; overflow-y: auto; padding: 24px; }
#anyway-secao-instagram { flex-direction: column; overflow-y: auto; padding: 24px; }
#anyway-secao-email { flex-direction: column; overflow-y: auto; padding: 24px; }
.anyway-disparo-colunas { display: flex; gap: 32px; align-items: flex-start; }
.anyway-disparo-coluna-esquerda { flex: 0 1 420px; min-width: 300px; max-width: 420px; }
.anyway-disparo-coluna-direita { flex: 1 1 0; min-width: 280px; position: sticky; top: 0; }
#anyway-disparador-form .anyway-campo { margin-bottom: 14px; text-align: left; }
#anyway-disparador-form label { display: block; font-size: 12px; color: var(--anyway-texto-fraco); margin-bottom: 4px; }
#anyway-disparador-form select,
#anyway-disparador-form input[type="text"],
#anyway-disparador-form input[type="number"],
#anyway-disparador-form input[type="datetime-local"],
#anyway-disparador-form textarea {
width: 100%; padding: 9px; border-radius: 6px; font-size: 14px;
background: var(--anyway-preto); border: 1px solid var(--anyway-borda); color: var(--anyway-texto); box-sizing: border-box;
}
#anyway-disparador-form textarea { resize: vertical; font-family: inherit; }
#anyway-disparador-form input[type="file"] { color: var(--anyway-texto-fraco); font-size: 13px; }
/* Card de configuração da conta Instagram (Id + token), direto na
seção — mesmo padrão visual dos outros formulários da tela. */
#anyway-instagram-credenciais-card {
max-width: 480px; background: var(--anyway-preto-painel, var(--anyway-preto-painel)); border: 1px solid var(--anyway-borda);
border-radius: 10px; padding: 18px; margin-bottom: 12px;
}
#anyway-instagram-credenciais-resumo {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
#anyway-instagram-credenciais-resumo-texto { font-size: 13px; color: var(--anyway-texto-fraco); line-height: 1.6; }
#anyway-instagram-credenciais-resumo-texto strong { color: var(--anyway-texto); font-weight: 600; }
#anyway-instagram-credenciais-form-botoes { display: flex; gap: 8px; margin-top: 4px; }
#anyway-instagram-credenciais-form .anyway-campo { margin-bottom: 14px; text-align: left; }
#anyway-instagram-credenciais-form label { display: block; font-size: 12px; color: var(--anyway-texto-fraco); margin-bottom: 4px; }
#anyway-instagram-credenciais-form input[type="text"],
#anyway-instagram-credenciais-form input[type="password"] {
width: 100%; padding: 9px; border-radius: 6px; font-size: 14px;
background: var(--anyway-preto); border: 1px solid var(--anyway-borda); color: var(--anyway-texto); box-sizing: border-box;
}
/* Texto explicativo acima do card de engajamento — mesma largura
máxima do card logo abaixo (1048px, 5 cards da grade), com um
respiro maior embaixo pra não ficar colado no card. */
#anyway-instagram-engajamento-hint { max-width: 1048px; margin-bottom: 16px; }
/* Card de engajamento (comentário de quem não segue) — mesmo padrão
visual do card de credenciais, sem o resumo/Editar (não guarda nada
sensível, então já mostra os campos direto). */
#anyway-instagram-engajamento-card {
/* Largura de 5 cards da grade de automações (200px cada + gap de
12px): 5*200 + 4*12 = 1048px — alinha a borda direita do card
com a borda direita do 5º card da grade logo abaixo. */
max-width: 1048px;
background: var(--anyway-preto-painel, var(--anyway-preto-painel)); border: 1px solid var(--anyway-borda);
border-radius: 10px; padding: 18px; margin-bottom: 12px;
}
#anyway-instagram-engajamento-form .anyway-campo { margin-bottom: 14px; text-align: left; }
#anyway-instagram-engajamento-form label { display: block; font-size: 12px; color: var(--anyway-texto-fraco); margin-bottom: 4px; }
#anyway-instagram-engajamento-form textarea {
width: 100%; padding: 9px; border-radius: 6px; font-size: 14px; min-height: 70px; resize: vertical; font-family: inherit;
background: var(--anyway-preto); border: 1px solid var(--anyway-borda); color: var(--anyway-texto); box-sizing: border-box;
}
/* Card de engajamento no direct — mesmo padrão visual dos outros dois
cards de configuração da tela Instagram (mesma largura de 5 cards). */
#anyway-instagram-direct-engajamento-hint { max-width: 1048px; margin-bottom: 16px; }
/* Texto explicativo da seção "Automações no Direct" — mesmo alinhamento
(largura de 5 cards da grade) dos outros textos explicativos da tela. */
#anyway-instagram-direct-automacoes-hint { max-width: 1048px; margin-bottom: 16px; }
#anyway-instagram-direct-engajamento-card {
max-width: 1048px;
background: var(--anyway-preto-painel, var(--anyway-preto-painel)); border: 1px solid var(--anyway-borda);
border-radius: 10px; padding: 18px; margin-bottom: 12px;
}
#anyway-instagram-direct-engajamento-form .anyway-campo { margin-bottom: 14px; text-align: left; }
#anyway-instagram-direct-engajamento-form label { display: block; font-size: 12px; color: var(--anyway-texto-fraco); margin-bottom: 4px; }
#anyway-instagram-direct-engajamento-form textarea {
width: 100%; padding: 9px; border-radius: 6px; font-size: 14px; min-height: 70px; resize: vertical; font-family: inherit;
background: var(--anyway-preto); border: 1px solid var(--anyway-borda); color: var(--anyway-texto); box-sizing: border-box;
}
.anyway-campo-linha { display: flex; gap: 12px; }
.anyway-campo-linha .anyway-campo { flex: 1; min-width: 0; }
.anyway-disparo-abas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.anyway-disparo-aba, .anyway-disparo-quando-opcao {
background: none; border: 1px solid var(--anyway-borda); color: var(--anyway-texto-fraco);
border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.anyway-disparo-aba.ativa, .anyway-disparo-quando-opcao.ativa {
border-color: var(--anyway-limao); color: var(--anyway-limao); background: rgba(var(--anyway-limao-rgb),0.08);
}
.anyway-disparo-aba-conteudo { margin-top: 8px; }
.anyway-disparo-resumo { margin-top: 8px; font-size: 12px; color: var(--anyway-texto-fraco); }
.anyway-disparo-resumo.erro { color: var(--anyway-erro); }
.anyway-disparo-resumo.ok { color: var(--anyway-limao); }
/* Tela de revisão dos destinatários (abas "Arquivo" e "Por identificação") —
a lista carregada não é definitiva: cada linha pode ser excluída antes de
programar o disparo, e opcionalmente uma identificação pode ser aplicada
de uma vez só a todos os contatos que sobraram na lista. */
.anyway-disparo-revisao-lista {
max-height: 240px; overflow-y: auto; margin-top: 6px;
border: 1px solid var(--anyway-borda); border-radius: 8px; padding: 6px;
}
.anyway-disparo-revisao-item {
display: flex !important; flex-direction: row !important; align-items: center !important;
gap: 10px; padding: 8px 10px; border-radius: 6px;
}
.anyway-disparo-revisao-item:not(:last-child) { border-bottom: 1px solid rgba(var(--anyway-contraste-rgb),0.06); }
.anyway-disparo-revisao-info { flex: 1 1 auto !important; min-width: 0 !important; font-size: 13px; color: var(--anyway-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anyway-disparo-revisao-vazio { color: var(--anyway-texto-fraco); font-size: 12px; text-align: center; padding: 10px 0; }
.anyway-disparo-revisao-etiqueta { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.anyway-disparo-revisao-etiqueta select { flex: 1 1 160px; width: auto; }
.anyway-disparo-revisao-etiqueta input[type="text"] { flex: 1 1 160px; width: auto; }
.anyway-disparo-revisao-etiqueta button { flex: 0 0 auto; white-space: nowrap; }
#anyway-disparo-status { font-size: 12px; margin: 8px 0; min-height: 16px; }
#anyway-disparo-status.erro { color: var(--anyway-erro); }
#anyway-disparo-status.sucesso { color: var(--anyway-limao); }
#anyway-disparo-programar:disabled { opacity: 0.5; cursor: default; }
.anyway-disparo-item-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.anyway-disparo-badge {
display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .02em;
padding: 3px 8px; border-radius: 10px; text-transform: uppercase;
}
.anyway-disparo-badge.agendado { background: rgba(var(--anyway-contraste-rgb),0.1); color: #ccc; }
.anyway-disparo-badge.em_andamento { background: rgba(var(--anyway-limao-rgb),0.15); color: var(--anyway-limao); }
.anyway-disparo-badge.pausado { background: rgba(255,193,7,0.15); color: #ffc107; }
.anyway-disparo-badge.concluido { background: rgba(60,180,90,0.18); color: #6be08a; }
.anyway-disparo-badge.cancelado { background: rgba(255,107,107,0.15); color: var(--anyway-erro); }
.anyway-disparo-item-clicavel { cursor: pointer; }
.anyway-disparo-item-clicavel:hover { border-color: var(--anyway-limao); }
/* Botões de ação de um disparo (pausar/retomar/editar/cancelar) — mesmo
visual base, cor por ação — usados tanto no card da lista quanto no
modal de detalhe/andamento. */
.anyway-disparo-acoes { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto !important; }
.anyway-disparo-acao-btn {
flex: 0 0 auto !important;
background: none; border-radius: 6px; padding: 6px 10px; font-size: 12px; font-weight: 600;
cursor: pointer; white-space: nowrap;
}
.anyway-disparo-acao-btn.pausar { border: 1px solid #ccc; color: #ccc; }
.anyway-disparo-acao-btn.pausar:hover { background: #ccc; color: var(--anyway-preto); }
.anyway-disparo-acao-btn.retomar { border: 1px solid var(--anyway-limao); color: var(--anyway-limao); }
.anyway-disparo-acao-btn.retomar:hover { background: var(--anyway-limao); color: var(--anyway-preto); }
.anyway-disparo-acao-btn.editar { border: 1px solid #8ab4f8; color: #8ab4f8; }
.anyway-disparo-acao-btn.editar:hover { background: #8ab4f8; color: var(--anyway-preto); }
.anyway-disparo-acao-btn.cancelar { border: 1px solid var(--anyway-erro); color: var(--anyway-erro); }
.anyway-disparo-acao-btn.cancelar:hover { background: var(--anyway-erro); color: var(--anyway-preto); }
/* Modal de detalhe/andamento do disparo — mesma base dos outros modais */
#anyway-disparo-detalhe-modal {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65);
z-index: 10000; align-items: center; justify-content: center; padding: 20px;
}
#anyway-disparo-detalhe-modal.aberto { display: flex; }
#anyway-disparo-detalhe-modal-card {
background: var(--anyway-preto-painel); border: 1px solid var(--anyway-borda); border-radius: 10px;
padding: 22px; width: 100%; max-width: 480px; max-height: 82vh;
display: flex; flex-direction: column; color: var(--anyway-texto);
}
#anyway-disparo-detalhe-modal-card .anyway-painel-header { margin-bottom: 6px; }
#anyway-disparo-detalhe-titulo { margin: 0; font-size: 16px; color: var(--anyway-titulo); }
#anyway-disparo-detalhe-acoes { margin: 10px 0 4px; }
.anyway-disparo-detalhe-lista { overflow-y: auto; margin-top: 12px; border: 1px solid var(--anyway-borda); border-radius: 8px; padding: 6px; }
.anyway-disparo-detalhe-item {
display: flex !important; flex-direction: row !important; align-items: center !important;
gap: 10px; padding: 8px 10px; border-radius: 6px;
}
.anyway-disparo-detalhe-item:not(:last-child) { border-bottom: 1px solid rgba(var(--anyway-contraste-rgb),0.06); }
.anyway-disparo-detalhe-info { flex: 1 1 auto !important; min-width: 0 !important; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anyway-disparo-detalhe-status { flex: 0 0 auto !important; font-size: 11px; font-weight: 700; display: flex !important; align-items: center !important; gap: 4px; }
.anyway-disparo-detalhe-status svg { width: 14px; height: 14px; }
.anyway-disparo-detalhe-status.enviado { color: #6be08a; }
.anyway-disparo-detalhe-status.falhou { color: var(--anyway-erro); }
.anyway-disparo-detalhe-status.pendente { color: var(--anyway-texto-fraco); }
/* Modal de editar disparo — mesma base dos outros, só mais alto/rolável
porque reaproveita o formulário inteiro do template + a lista de quem
ainda falta receber. */
#anyway-disparo-editar-modal {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65);
z-index: 10000; align-items: center; justify-content: center; padding: 20px;
}
#anyway-disparo-editar-modal.aberto { display: flex; }
#anyway-disparo-editar-modal-card {
background: var(--anyway-preto-painel); border: 1px solid var(--anyway-borda); border-radius: 10px;
padding: 22px; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
color: var(--anyway-texto);
}
#anyway-disparo-editar-modal-card .anyway-campo { margin-bottom: 14px; text-align: left; }
#anyway-disparo-editar-modal-card label { display: block; font-size: 12px; color: var(--anyway-texto-fraco); margin-bottom: 4px; }
#anyway-disparo-editar-modal-card select,
#anyway-disparo-editar-modal-card input[type="text"],
#anyway-disparo-editar-modal-card input[type="number"],
#anyway-disparo-editar-modal-card input[type="datetime-local"],
#anyway-disparo-editar-modal-card textarea {
width: 100%; padding: 9px; border-radius: 6px; font-size: 14px;
background: var(--anyway-preto); border: 1px solid var(--anyway-borda); color: var(--anyway-texto); box-sizing: border-box;
}
#anyway-disparo-editar-modal-card input[type="file"] { color: var(--anyway-texto-fraco); font-size: 13px; margin: 6px 0; }
.anyway-disparo-editar-adicionar { margin-top: 10px; }
.anyway-disparo-editar-adicionar textarea { resize: vertical; font-family: inherit; margin-bottom: 6px; }
.anyway-disparo-editar-zona-risco {
margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--anyway-borda);
}
#anyway-disparo-editar-recomecar { width: 100%; text-align: center; }
#anyway-disparo-editar-status.erro { color: var(--anyway-erro); }
#anyway-disparo-editar-status.sucesso { color: var(--anyway-limao); }
#anyway-disparo-editar-cancelar { background: none; border: 1px solid var(--anyway-borda); color: var(--anyway-texto-fraco); }
#anyway-disparo-editar-salvar { background: var(--anyway-limao); border: none; color: var(--anyway-preto); }
/* ---------- Follow-ups ---------- */
.anyway-followup-badge {
display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .02em;
padding: 3px 8px; border-radius: 10px; text-transform: uppercase;
}
.anyway-followup-badge.pendente { background: rgba(var(--anyway-contraste-rgb),0.1); color: #ccc; }
.anyway-followup-badge.enviado { background: rgba(var(--anyway-limao-rgb),0.15); color: var(--anyway-limao); }
.anyway-followup-badge.falhou { background: rgba(255,107,107,0.15); color: var(--anyway-erro); }
.anyway-followup-badge.cancelado { background: rgba(var(--anyway-contraste-rgb),0.06); color: #777; }
.anyway-followup-tipo {
display: inline-block; font-size: 10px; font-weight: 600; padding: 3px 8px;
border-radius: 10px; background: rgba(138,180,248,0.15); color: #8ab4f8;
}
/* Cards de "Modelos de Follow-up" — um grupo por tipo (sem resposta,
reunião, falar depois), com ícone grande pra identificar de longe. */
.anyway-modelo-secao-header { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 10px; }
.anyway-modelo-secao-header h4 { margin: 0; font-size: 14px; color: var(--anyway-titulo); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.anyway-modelo-secao-header h4 svg { width: 16px; height: 16px; color: var(--anyway-limao); flex-shrink: 0; }
.anyway-modelo-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.anyway-modelo-card {
width: 200px; background: var(--anyway-preto-painel, var(--anyway-preto-painel)); border: 1px solid var(--anyway-borda); border-radius: 10px;
padding: 14px; display: flex; flex-direction: column; gap: 6px;
}
.anyway-modelo-card.vazio { color: var(--anyway-texto-fraco); font-size: 13px; border-style: dashed; }
.anyway-modelo-card.programado { border-color: rgba(var(--anyway-limao-rgb),0.5); }
.anyway-modelo-card-icone {
width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--anyway-limao-rgb),0.12);
display: flex; align-items: center; justify-content: center; color: var(--anyway-limao);
}
.anyway-modelo-card-icone svg { width: 20px; height: 20px; }
.anyway-modelo-card-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.anyway-modelo-card-nome { font-weight: 600; font-size: 14px; color: var(--anyway-titulo); }
.anyway-modelo-card-resumo { font-size: 12px; color: var(--anyway-texto-fraco); line-height: 1.4; }
.anyway-modelo-card-status {
flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
padding: 3px 8px; border-radius: 10px; white-space: nowrap;
}
.anyway-modelo-card-status.programado { background: rgba(var(--anyway-limao-rgb),0.15); color: var(--anyway-limao); }
.anyway-modelo-card-status.rascunho { background: rgba(var(--anyway-contraste-rgb),0.08); color: var(--anyway-texto-fraco); }
.anyway-modelo-card-status.direct { background: rgba(255,138,61,0.15); color: var(--anyway-laranja); }
.anyway-modelo-card-acoes { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
/* Editar/Excluir do card de modelo — cores próprias (laranja/branco), sem
mexer nas cores dos mesmos nomes de classe usadas no Disparador. */
.anyway-modelo-card-acoes .anyway-disparo-acao-btn.editar { border: 1px solid var(--anyway-texto); color: var(--anyway-texto); }
.anyway-modelo-card-acoes .anyway-disparo-acao-btn.editar:hover { background: var(--anyway-texto); color: var(--anyway-preto); }
.anyway-modelo-card-acoes .anyway-disparo-acao-btn.cancelar { border: 1px solid var(--anyway-laranja); color: var(--anyway-laranja); }
.anyway-modelo-card-acoes .anyway-disparo-acao-btn.cancelar:hover { background: var(--anyway-laranja); color: var(--anyway-preto); }
.anyway-modelo-card-acoes .anyway-disparo-acao-btn.programar { border: 1px solid var(--anyway-limao); color: var(--anyway-limao); }
.anyway-modelo-card-acoes .anyway-disparo-acao-btn.programar:hover { background: var(--anyway-limao); color: var(--anyway-preto); }
.anyway-modelo-card-acoes .anyway-disparo-acao-btn.despoprogramar { border: 1px solid #666; color: #ccc; }
.anyway-modelo-card-acoes .anyway-disparo-acao-btn.despoprogramar:hover { background: #666; color: var(--anyway-titulo); }
/* Toggle "Programar" dentro do modal de criar/editar modelo */
.anyway-followup-modelo-programar-btn {
display: inline-flex; align-items: center; gap: 8px; border: 1px solid #666; color: #ccc;
background: none; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.anyway-followup-modelo-programar-btn svg { width: 16px; height: 16px; }
.anyway-followup-modelo-programar-btn.programado { border-color: var(--anyway-limao); color: var(--anyway-limao); background: rgba(var(--anyway-limao-rgb),0.1); }
.anyway-modelo-card-nova {
width: 200px; border: 1px dashed #3a3a3a; border-radius: 10px; background: none; color: var(--anyway-texto-fraco);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
padding: 14px; cursor: pointer; font-size: 13px; min-height: 110px;
}
.anyway-modelo-card-nova:hover { border-color: var(--anyway-limao); color: var(--anyway-limao); }
.anyway-modelo-card-nova span.mais { font-size: 22px; line-height: 1; }
/* Os 20 slots fixos de automação do Instagram — reaproveita .anyway-modelo-card
(mesmo card usado nos modelos de follow-up); vazio = clicável, tracejado. */
.anyway-modelo-card.instagram-vazio {
cursor: pointer; align-items: center; justify-content: center; text-align: center;
color: var(--anyway-texto-fraco); border-style: dashed; min-height: 110px; gap: 4px;
}
.anyway-modelo-card.instagram-vazio:hover { border-color: var(--anyway-limao); color: var(--anyway-limao); }
.anyway-modelo-card.instagram-vazio .numero { font-size: 22px; line-height: 1; }
.anyway-modelo-card.instagram-inativo { opacity: 0.55; }
/* ---------- E-mail ---------- */
.anyway-modelo-card-status.gmail { background: rgba(234,67,53,0.15); color: #ea4335; }
.anyway-modelo-card-status.outlook { background: rgba(0,120,212,0.15); color: #0078d4; }
.anyway-modelo-card-status.imap_smtp { background: rgba(var(--anyway-contraste-rgb),0.08); color: var(--anyway-texto-fraco); }
.anyway-modelo-card-status.nova { background: rgba(var(--anyway-limao-rgb),0.15); color: var(--anyway-limao); }
.anyway-modelo-card-status.lida { background: rgba(var(--anyway-contraste-rgb),0.08); color: var(--anyway-texto-fraco); }
.anyway-modelo-card-status.respondida { background: rgba(83,189,235,0.15); color: #53bdeb; }
.anyway-modelo-card-status.arquivada { background: rgba(var(--anyway-contraste-rgb),0.05); color: #666; }
/* Etiqueta de categoria (email_categorias) — dinâmica, criada pelo
usuário além das 2 fixas, por isso só "Contas a Pagar"/"Orçamento"
e "Não classificado" ganham cor própria; o resto usa a cor neutra
padrão de .anyway-modelo-card-status. */
.anyway-modelo-card-status.categoria-contas-a-pagar { background: rgba(255,138,61,0.15); color: var(--anyway-laranja); }
.anyway-modelo-card-status.categoria-orcamento { background: rgba(83,189,235,0.15); color: #53bdeb; }
.anyway-modelo-card-status.categoria-nao-classificado { background: rgba(var(--anyway-contraste-rgb),0.05); color: #666; }
#anyway-email-caixas-lista, #anyway-email-drive-card { margin-bottom: 8px; }
.anyway-email-caixa-linha {
display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--anyway-borda);
border-radius: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.anyway-email-caixa-linha .anyway-email-caixa-info { flex: 1; min-width: 180px; }
.anyway-email-caixa-linha .anyway-email-caixa-endereco { font-weight: 600; font-size: 13px; color: var(--anyway-titulo); }
.anyway-email-caixa-linha .anyway-email-caixa-apelido { font-size: 12px; color: var(--anyway-texto-fraco); }
.anyway-email-caixa-linha.email-inativa { opacity: 0.5; }
.anyway-email-conversa-card { cursor: pointer; }
.anyway-email-conversa-card .anyway-modelo-card-nome { font-size: 13px; }
#anyway-email-conversa-mensagens {
max-height: 320px; overflow-y: auto; background: var(--anyway-preto); border: 1px solid var(--anyway-borda);
border-radius: 8px; padding: 12px; margin-bottom: 12px;
}
.anyway-email-anexos-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.anyway-email-anexo-chip {
font-size: 11px; background: rgba(var(--anyway-contraste-rgb),0.06); border: 1px solid var(--anyway-borda); border-radius: 12px;
padding: 3px 10px; color: var(--anyway-texto-fraco);
}
/* Categoria/anexos/vencimento-Drive agora vivem em CADA MENSAGEM (não
mais um bloco único da conversa) — ver anyway-msg-extra dentro de
cada bolha em #anyway-email-conversa-mensagens. */
.anyway-msg-extra { margin-top: 6px; clear: both; }
.anyway-msg-extra .anyway-email-anexos-lista { margin-bottom: 4px; }
.anyway-msg-extra .anyway-modelo-card-status { display: inline-block; margin-bottom: 4px; }
.anyway-msg-extra .anyway-msg-drive-linha { font-size: 11px; color: var(--anyway-texto-fraco); }
.anyway-msg-extra .anyway-msg-drive-linha a { color: #53bdeb; margin-left: 6px; }
.anyway-msg.enviada .anyway-msg-extra { text-align: right; }
.anyway-email-categoria-item {
display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
padding: 8px 10px; border: 1px solid var(--anyway-borda); border-radius: 6px; margin-bottom: 6px; font-size: 13px;
}
.anyway-email-categoria-item .anyway-email-categoria-nome { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--anyway-titulo); }
.anyway-email-categoria-item .anyway-email-categoria-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.anyway-email-categoria-item .anyway-email-categoria-acoes button {
background: none; border: 1px solid var(--anyway-borda); color: var(--anyway-texto-fraco); cursor: pointer;
font-size: 11px; border-radius: 6px; padding: 4px 8px;
}
.anyway-email-categoria-item .anyway-email-categoria-acoes button.excluir { border-color: var(--anyway-erro); color: var(--anyway-erro); }
#anyway-email-credencial-modal, #anyway-email-regras-modal, #anyway-email-conversa-modal {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65);
z-index: 10000; align-items: center; justify-content: center; padding: 20px;
}
#anyway-email-credencial-modal.aberto, #anyway-email-regras-modal.aberto, #anyway-email-conversa-modal.aberto { display: flex; }
#anyway-email-credencial-modal-card, #anyway-email-regras-modal-card, #anyway-email-conversa-modal-card {
background: var(--anyway-preto-painel); border: 1px solid var(--anyway-borda); border-radius: 10px;
padding: 22px; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
color: var(--anyway-texto);
}
#anyway-email-conversa-modal-card { max-width: 620px; }
#anyway-email-credencial-modal-card .anyway-campo,
#anyway-email-regras-modal-card .anyway-campo,
#anyway-email-conversa-modal-card .anyway-campo { margin-bottom: 14px; text-align: left; }
#anyway-email-credencial-modal-card label,
#anyway-email-regras-modal-card label,
#anyway-email-conversa-modal-card label { display: block; font-size: 12px; color: var(--anyway-texto-fraco); margin-bottom: 4px; }
#anyway-email-credencial-modal-card select,
#anyway-email-credencial-modal-card input[type="text"],
#anyway-email-credencial-modal-card input[type="password"],
#anyway-email-credencial-modal-card input[type="number"],
#anyway-email-regras-modal-card input[type="text"],
#anyway-email-conversa-modal-card textarea {
width: 100%; padding: 9px; border-radius: 6px; font-size: 14px;
background: var(--anyway-preto); border: 1px solid var(--anyway-borda); color: var(--anyway-texto); box-sizing: border-box;
}
#anyway-email-conversa-modal-card textarea { min-height: 90px; resize: vertical; font-family: inherit; }
#anyway-email-credencial-cancelar, #anyway-email-regras-fechar, #anyway-email-conversa-fechar { background: none; border: 1px solid var(--anyway-borda); color: var(--anyway-texto-fraco); }
#anyway-email-credencial-salvar { background: var(--anyway-limao); border: none; color: var(--anyway-preto); }
.anyway-email-regra-item {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 6px 10px; border: 1px solid var(--anyway-borda); border-radius: 6px; margin-bottom: 6px; font-size: 13px;
}
.anyway-email-regra-item button { background: none; border: none; color: var(--anyway-erro); cursor: pointer; font-size: 12px; }
.anyway-email-regra-add-linha { display: flex; gap: 8px; margin-top: 6px; }
.anyway-email-regra-add-linha input { flex: 1; }
/* Mesmos cards, em modo "escolher" dentro do modal de contato — e as
chips compactas de "sem resposta" no card fixo de Conversas. */
.anyway-modelo-card.selecionavel { cursor: pointer; }
.anyway-modelo-card.selecionavel:hover { border-color: #555; }
.anyway-modelo-card.selecionado { border-color: var(--anyway-limao); background: rgba(var(--anyway-limao-rgb),0.06); }
.anyway-modelo-chip {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px;
background: rgba(var(--anyway-contraste-rgb),0.05); border: 1px solid var(--anyway-borda); color: #ccc; font-size: 12px;
cursor: pointer; white-space: nowrap;
}
.anyway-modelo-chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.anyway-modelo-chip:hover { border-color: #555; }
.anyway-modelo-chip.ativo { background: rgba(var(--anyway-limao-rgb),0.15); border-color: var(--anyway-limao); color: var(--anyway-limao); font-weight: 600; }
/* Seletor de ícone (conjunto fixo) no modal de criar/editar modelo */
.anyway-icone-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.anyway-icone-opcao {
width: 48px; height: 48px; min-width: 48px; min-height: 48px; flex: 0 0 auto; box-sizing: border-box;
border-radius: 50%; border: 1px solid #3a3a3a; background: var(--anyway-preto);
color: #ccc; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.anyway-icone-opcao svg { width: 24px; height: 24px; flex-shrink: 0; display: block; }
.anyway-icone-opcao:hover { border-color: #666; color: var(--anyway-titulo); }
.anyway-icone-opcao.selecionado { border-color: var(--anyway-limao); background: rgba(var(--anyway-limao-rgb),0.15); color: var(--anyway-limao); }
/* Modais genéricos (marcar reunião/falar depois, modelo de follow-up) —
mesma base visual do modal de editar disparo. */
#anyway-contato-followup-modal, #anyway-followup-modelo-modal, #anyway-instagram-automacao-modal, #anyway-instagram-direct-automacao-modal {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65);
z-index: 10000; align-items: center; justify-content: center; padding: 20px;
}
#anyway-contato-followup-modal.aberto, #anyway-followup-modelo-modal.aberto, #anyway-instagram-automacao-modal.aberto, #anyway-instagram-direct-automacao-modal.aberto { display: flex; }
#anyway-contato-followup-modal-card, #anyway-followup-modelo-modal-card, #anyway-instagram-automacao-modal-card, #anyway-instagram-direct-automacao-modal-card {
background: var(--anyway-preto-painel); border: 1px solid var(--anyway-borda); border-radius: 10px;
padding: 22px; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
color: var(--anyway-texto);
}
#anyway-contato-followup-modal-card .anyway-campo,
#anyway-followup-modelo-modal-card .anyway-campo,
#anyway-instagram-automacao-modal-card .anyway-campo,
#anyway-instagram-direct-automacao-modal-card .anyway-campo { margin-bottom: 14px; text-align: left; }
#anyway-contato-followup-modal-card label,
#anyway-followup-modelo-modal-card label,
#anyway-instagram-automacao-modal-card label,
#anyway-instagram-direct-automacao-modal-card label { display: block; font-size: 12px; color: var(--anyway-texto-fraco); margin-bottom: 4px; }
#anyway-contato-followup-modal-card select,
#anyway-contato-followup-modal-card input[type="text"],
#anyway-contato-followup-modal-card input[type="number"],
#anyway-contato-followup-modal-card input[type="datetime-local"],
#anyway-followup-modelo-modal-card select,
#anyway-followup-modelo-modal-card input[type="text"],
#anyway-followup-modelo-modal-card input[type="number"],
#anyway-followup-modelo-modal-card textarea,
#anyway-instagram-automacao-modal-card select,
#anyway-instagram-automacao-modal-card input[type="text"],
#anyway-instagram-automacao-modal-card textarea,
#anyway-instagram-direct-automacao-modal-card select,
#anyway-instagram-direct-automacao-modal-card input[type="text"],
#anyway-instagram-direct-automacao-modal-card textarea {
width: 100%; padding: 9px; border-radius: 6px; font-size: 14px;
background: var(--anyway-preto); border: 1px solid var(--anyway-borda); color: var(--anyway-texto); box-sizing: border-box;
}
#anyway-followup-modelo-texto-livre { min-height: 80px; resize: vertical; font-family: inherit; }
#anyway-instagram-automacao-modal-card textarea, #anyway-instagram-direct-automacao-modal-card textarea { min-height: 70px; resize: vertical; font-family: inherit; }
#anyway-contato-followup-modal-card input[type="file"],
#anyway-followup-modelo-modal-card input[type="file"] { color: var(--anyway-texto-fraco); font-size: 13px; margin: 6px 0; }
#anyway-contato-followup-status.erro, #anyway-followup-modelo-status.erro, #anyway-instagram-automacao-status.erro, #anyway-instagram-direct-automacao-status.erro { color: var(--anyway-erro); }
#anyway-contato-followup-status.sucesso, #anyway-followup-modelo-status.sucesso, #anyway-instagram-automacao-status.sucesso, #anyway-instagram-direct-automacao-status.sucesso { color: var(--anyway-limao); }
#anyway-contato-followup-cancelar, #anyway-followup-modelo-cancelar, #anyway-instagram-automacao-cancelar, #anyway-instagram-direct-automacao-cancelar { background: none; border: 1px solid var(--anyway-borda); color: var(--anyway-texto-fraco); }
#anyway-contato-followup-salvar, #anyway-followup-modelo-salvar, #anyway-instagram-automacao-salvar, #anyway-instagram-direct-automacao-salvar { background: var(--anyway-limao); border: none; color: var(--anyway-preto); }
#anyway-contato-followup-remover { width: 100%; text-align: center; margin-top: 10px; }
#anyway-contato-followup-modelo-info { line-height: 1.5; }
#anyway-contato-followup-modelo-info.erro { color: var(--anyway-erro); }
#anyway-contato-followup-modelo-info a, .anyway-link-botao {
color: var(--anyway-limao); cursor: pointer; text-decoration: underline; background: none; border: none; padding: 0; font: inherit;
}
.anyway-followup-modelo-passo-linha {
display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
background: rgba(var(--anyway-contraste-rgb),0.03); margin-bottom: 6px;
}
.anyway-followup-modelo-passo-linha span { flex: 1; font-size: 13px; }
.anyway-followup-modelo-passo-add-linha { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.anyway-followup-modelo-passo-add-linha input[type="text"] { flex: 1; min-width: 120px; }
.anyway-followup-modelo-passo-add-linha input[type="number"] { width: 90px; }
.anyway-followup-modelo-passo-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.anyway-followup-modelo-passo-preset {
font-size: 11px; padding: 4px 9px; border-radius: 12px; background: rgba(var(--anyway-contraste-rgb),0.05);
border: 1px solid var(--anyway-borda); color: #ccc; cursor: pointer;
}
.anyway-followup-modelo-passo-preset:hover { border-color: var(--anyway-limao); color: var(--anyway-limao); }
/* Select de feedback pós-reunião expirada, dentro do painel do ícone de
calendário (ver #anyway-chat-contato-reuniao-painel mais abaixo) —
mesmo visual escuro dos outros selects do card (status/agente). */
.anyway-fu-feedback-select {
background: var(--anyway-preto) !important; color: var(--anyway-texto) !important;
border: 1px solid var(--anyway-borda) !important; border-radius: 6px !important;
padding: 5px 6px !important; font-size: 12px !important; width: 100%; box-sizing: border-box;
}
/* ---------- Conversas (chat) ---------- */
#anyway-secao-conversas { flex: 1; min-height: 0; }
#anyway-chat-lista {
width: 300px;
flex-shrink: 0;
display: flex;
flex-direction: column;
border-right: 1px solid var(--anyway-borda);
background: var(--anyway-preto-painel);
}
/* Cabeçalho fixo (busca + pills de filtro) — fica parado no topo, só a
lista de itens embaixo rola (ver #anyway-conversas-itens). */
#anyway-conversas-topo {
flex-shrink: 0;
padding: 12px 14px 10px;
border-bottom: 1px solid var(--anyway-borda);
}
#anyway-conversas-busca {
width: 100%; padding: 9px 12px; margin-bottom: 10px; box-sizing: border-box;
background: var(--anyway-preto); border: 1px solid var(--anyway-borda);
border-radius: 20px; color: var(--anyway-texto); font-size: 13px;
}
#anyway-conversas-busca::placeholder { color: var(--anyway-texto-fraco); }
/* Pills "Tudo" / "Não lidas" / cada status do Kanban — rolagem
horizontal quando não cabe tudo (mesmo espírito das abas do
WhatsApp), sem quebrar linha. */
#anyway-conversas-pills {
display: flex;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
}
#anyway-conversas-pills::-webkit-scrollbar { display: none; }
.anyway-conversa-pill {
flex-shrink: 0;
padding: 6px 12px;
border-radius: 20px;
border: 1px solid var(--anyway-borda);
background: var(--anyway-preto);
color: var(--anyway-texto-fraco);
font-size: 12px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
}
.anyway-conversa-pill:hover { color: var(--anyway-texto); }
.anyway-conversa-pill.ativa { background: var(--anyway-limao); border-color: var(--anyway-limao); color: var(--anyway-preto); }
#anyway-conversas-itens { flex: 1; overflow-y: auto; }
.anyway-conversa-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--anyway-borda); cursor: pointer; }
.anyway-conversa-item:hover, .anyway-conversa-item.ativa { background: var(--anyway-preto-item); }
/* No tema UaitsApp não tem linha separando os cards — visual mais
suave, mais perto do WhatsApp de verdade (que não usa essas linhas). */
#anyway-app-root[data-tema="whatsapp"] .anyway-conversa-item { border-bottom-color: transparent; }
/* Avatar com iniciais — cor de fundo = cor do status do Kanban dessa
conversa (STATUS_COR, definida via JS). Clicar nele abre o popover
de troca rápida de status (abrirPopoverStatus), sem precisar entrar
na conversa. */
.anyway-conversa-avatar {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700;
border: none; cursor: pointer; padding: 0;
font-family: inherit;
}
.anyway-conversa-info { flex: 1; min-width: 0; }
/* Nome e status lado a lado (em vez de empilhados) — aproveita melhor o
espaço horizontal e evita a sensação de informação empilhada; vale
nos 3 temas (pedido do usuário). O nome encolhe/trunca antes do
status, que fica sempre visível encostado à direita. */
.anyway-conversa-linha-topo { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.anyway-conversa-nome {
flex: 1; min-width: 0;
font-weight: 600; font-size: 17px; color: var(--anyway-titulo);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Descritivo do status (ex: "Em atendimento") ao lado do nome — texto
simples na cor padrão do app (pedido do usuário: nada de cor por
status aqui, isso já é o avatar; texto colorido demais poluiria o
card). */
.anyway-conversa-status-texto { flex-shrink: 0; font-size: 12px; color: var(--anyway-texto-fraco); }
.anyway-conversa-preview { font-size: 14px; color: var(--anyway-texto-fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.anyway-conversa-agente { font-size: 13px; color: var(--anyway-texto-fraco); margin-top: 2px; }
.anyway-conversa-item.pendente { border-left: 3px solid var(--anyway-limao); padding-left: 11px; }
.anyway-conversa-indicador {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--anyway-limao);
margin-right: 6px;
vertical-align: middle;
position: relative;
top: -1px;
}
/* Popover de troca rápida de status — aberto pelo clique no avatar,
tanto na lista de Conversas quanto no card do contato dentro do
chat (abrirPopoverStatus, posicionado via JS com position:fixed). */
/* Compartilhado com #anyway-tema-popover (abrirPopoverTema) e
#anyway-kanban-filtro-popover (abrirPopoverFiltroKanban) — mesmo
visual/comportamento, só muda o que é listado dentro. */
#anyway-status-popover, #anyway-tema-popover, #anyway-kanban-filtro-popover {
display: none;
position: fixed;
width: 208px;
max-height: 320px;
overflow-y: auto;
background: var(--anyway-preto-painel);
border: 1px solid var(--anyway-borda);
border-radius: 10px;
padding: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
/* Tinha z-index:30 — MENOR que o #anyway-shell (9999, ver acima), que
cobre a tela inteira. Isso deixava o popover tecnicamente "aberto"
(display:block) mas pintado POR BAIXO do shell, ou seja, invisível
(bug real, achado ao investigar o popover de troca de tema que
"não aparecia mais"). Sobe pra acima até dos modais (10000) pra
nunca mais ficar escondido atrás de nada. */
z-index: 10010;
}
#anyway-status-popover.mostrando, #anyway-tema-popover.mostrando, #anyway-kanban-filtro-popover.mostrando { display: block; }
.anyway-status-popover-item {
display: flex; align-items: center; gap: 8px;
width: 100%; text-align: left;
padding: 7px 8px; border-radius: 6px;
background: transparent; border: none; cursor: pointer;
color: var(--anyway-texto); font-size: 13px; font-family: inherit;
}
.anyway-status-popover-item:hover { background: var(--anyway-preto-item); }
.anyway-status-popover-item.ativo { background: var(--anyway-preto-item); color: var(--anyway-titulo); font-weight: 600; }
.anyway-status-popover-dot {
flex-shrink: 0;
width: 10px; height: 10px;
border-radius: 50%;
}
/* Select de status/agente dentro do card do chat — mesmo padrão (com
!important) do select de papel na tela Agentes, que já provou
funcionar sem interferência do tema do WordPress/Elementor. */
.anyway-chat-contato-select {
flex: 0 0 auto !important;
box-sizing: border-box !important;
position: relative !important;
display: inline-block !important;
background: var(--anyway-preto) !important;
color: var(--anyway-texto) !important;
border: 1px solid var(--anyway-borda) !important;
border-radius: 6px !important;
padding: 7px 8px !important;
margin: 0 !important;
font-size: 13px !important;
width: 160px !important; max-width: 160px !important; min-width: 160px !important;
}
#anyway-chat-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#anyway-chat-thread-header {
display: none;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--anyway-borda);
background: var(--anyway-preto-painel);
font-weight: 600;
color: var(--anyway-titulo);
}
#anyway-chat-voltar {
background: none; border: none; color: var(--anyway-limao);
font-size: 20px; line-height: 1; cursor: pointer; padding: 4px;
}
/* Card fixo com dados do contato + ações rápidas, sempre visível
(desktop e mobile) enquanto uma conversa está aberta. */
#anyway-chat-contato-card {
display: none;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--anyway-borda);
background: var(--anyway-preto-painel);
}
#anyway-chat-contato-card.mostrando { display: flex; }
#anyway-chat-contato-textos { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Avatar com iniciais do contato — cor de fundo = cor do status do
Kanban dessa conversa (STATUS_COR, via JS), igual ao avatar da lista
de Conversas. Clicável: abre o mesmo popover de troca de status. */
#anyway-chat-contato-avatar {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; color: var(--anyway-preto);
background: var(--anyway-limao);
cursor: pointer;
}
#anyway-chat-contato-nome-tel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#anyway-chat-contato-nome { font-weight: 600; font-size: 14px; color: var(--anyway-titulo); }
/* Descritivo do status (ex: "Em atendimento") — mesmo padrão do
.anyway-conversa-status-texto da lista: texto simples, cor branca
padrão do app, sem repetir a cor do avatar. */
#anyway-chat-contato-status-texto { font-size: 12px; color: var(--anyway-texto); }
#anyway-chat-contato-telefone { font-size: 12px; color: var(--anyway-texto-fraco); }
#anyway-chat-contato-acoes { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
/* Ícone de status (kanban) e ícone de agente — os dois só decorativos
(span puramente visual, mostra tooltip); quem é clicável de verdade é
o