/* Painel de atendimento — estilo WhatsApp Web enxuto */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { color-scheme: light; --verde-escuro: #075e54; --verde: #128c7e; --verde-claro: #25d366; --fundo: #eae6df; --fundo-chat: #efeae2; --bolha-in: #ffffff; --bolha-out: #d9fdd3; --texto: #111b21; --texto-suave: #667781; --borda: #d1d7db; --vermelho: #dc3545; --amarelo: #ffc107; --superficie: #ffffff; --superficie-2: #f0f2f5; --superficie-3: #f5f5f5; --selo-fundo: #e7f3f1; --selo-texto: #075e54; --titulo: #075e54; --topo-fundo: #075e54; --sobreposicao: rgba(0, 0, 0, .06); } /* Tema escuro (paleta do WhatsApp Web dark) — ativado por data-theme no */ [data-theme="dark"] { color-scheme: dark; --fundo: #0b141a; --fundo-chat: #0b141a; --bolha-in: #202c33; --bolha-out: #005c4b; --texto: #e9edef; --texto-suave: #8696a0; --borda: #2a3942; --superficie: #111b21; --superficie-2: #202c33; --superficie-3: #2a3942; --selo-fundo: #1f2c33; --selo-texto: #8fd3c7; --titulo: #00a884; --topo-fundo: #202c33; --sobreposicao: rgba(255, 255, 255, .08); } body { font-family: "Segoe UI", Helvetica, Arial, sans-serif; background: var(--fundo); color: var(--texto); height: 100vh; display: flex; flex-direction: column; } /* ---------- topo ---------- */ .topo { background: var(--topo-fundo); color: #fff; display: flex; align-items: center; gap: 24px; padding: 10px 20px; flex-shrink: 0; } .topo-marca { font-weight: 700; font-size: 17px; } .topo-nav { display: flex; gap: 4px; flex: 1; } .topo-nav a { color: #d9e7e5; text-decoration: none; padding: 6px 14px; border-radius: 6px; font-size: 14px; } .topo-nav a:hover, .topo-nav a.ativo { background: rgba(255,255,255,.15); color: #fff; } .topo-usuario { font-size: 13px; display: flex; align-items: center; gap: 12px; } .topo-usuario .sair { color: #ffd0d0; text-decoration: none; } .tema-toggle { background: none; border: none; cursor: pointer; font-size: 16px; padding: 2px 4px; border-radius: 6px; } .tema-toggle:hover { background: rgba(255,255,255,.15); } .conteudo { flex: 1; overflow: hidden; display: flex; } /* ---------- login ---------- */ .login-caixa { margin: auto; background: var(--superficie); padding: 40px; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.12); width: 340px; } .login-caixa h1 { font-size: 20px; margin-bottom: 20px; color: var(--titulo); } .login-caixa label { display: block; font-size: 13px; margin: 12px 0 4px; color: var(--texto-suave); } .login-caixa input { width: 100%; padding: 10px; border: 1px solid var(--borda); border-radius: 6px; font-size: 14px; background: var(--superficie); color: var(--texto); } .login-caixa button { margin-top: 20px; width: 100%; } .erro-login { color: var(--vermelho); font-size: 13px; margin-top: 10px; } /* ---------- botões ---------- */ .btn { background: var(--verde); color: #fff; border: none; padding: 9px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; } .btn:hover { background: var(--verde-escuro); } .btn.secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); } .btn.secundario:hover { background: var(--superficie-3); } .btn.perigo { background: var(--vermelho); } .btn.pequeno { padding: 5px 10px; font-size: 12px; } /* ---------- chat ---------- */ .chat-layout { display: flex; width: 100%; height: 100%; background: var(--superficie); } .chat-lista { width: 340px; border-right: 1px solid var(--borda); display: flex; flex-direction: column; flex-shrink: 0; } .chat-lista-topo { padding: 12px; border-bottom: 1px solid var(--borda); } .chat-lista-topo input { width: 100%; padding: 8px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: 13px; background: var(--superficie-2); color: var(--texto); } .chat-itens { flex: 1; overflow-y: auto; } .chat-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-bottom: 1px solid var(--superficie-2); cursor: pointer; } .chat-item:hover, .chat-item.ativo { background: var(--superficie-2); } .chat-item-linha1 { display: flex; justify-content: space-between; align-items: center; } .chat-item-nome { font-weight: 600; font-size: 14px; } .chat-item-hora { font-size: 11px; color: var(--texto-suave); } .chat-item-linha2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .chat-item-preview { font-size: 13px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .selo { font-size: 10px; padding: 2px 7px; border-radius: 10px; background: var(--selo-fundo); color: var(--selo-texto); white-space: nowrap; } .selo.nao-lidas { background: var(--verde-claro); color: #fff; font-weight: 700; } .selo.humano { background: var(--amarelo); color: #6b5200; } .chat-conversa { flex: 1; display: flex; flex-direction: column; background: var(--fundo-chat); } .chat-vazio { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--texto-suave); font-size: 15px; } .conversa-topo { background: var(--superficie-2); padding: 10px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--borda); } .conversa-topo .nome { font-weight: 600; flex: 1; } .conversa-topo .numero { font-size: 12px; color: var(--texto-suave); } .modo-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; } .modo-toggle button { border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); padding: 5px 12px; cursor: pointer; font-size: 12px; } .modo-toggle button:first-child { border-radius: 6px 0 0 6px; } .modo-toggle button:last-child { border-radius: 0 6px 6px 0; } .modo-toggle button.ativo { background: var(--verde); color: #fff; border-color: var(--verde); } .mensagens { flex: 1; overflow-y: auto; padding: 20px 8%; display: flex; flex-direction: column; gap: 4px; } .carregar-mais { text-align: center; margin-bottom: 10px; } .bolha { max-width: 65%; padding: 7px 10px; border-radius: 8px; font-size: 14px; line-height: 1.35; box-shadow: 0 1px 1px rgba(0,0,0,.08); white-space: pre-wrap; word-wrap: break-word; } .bolha.entrada { background: var(--bolha-in); align-self: flex-start; } .bolha.saida { background: var(--bolha-out); align-self: flex-end; } .bolha .hora { display: block; font-size: 10px; color: var(--texto-suave); text-align: right; margin-top: 3px; } .envio { display: flex; gap: 10px; padding: 10px 16px; background: var(--superficie-2); border-top: 1px solid var(--borda); } .envio textarea { flex: 1; resize: none; border: none; border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; height: 42px; background: var(--superficie); color: var(--texto); } .envio textarea:focus { outline: none; } /* ---------- mídia nas bolhas ---------- */ .bolha-img { display: block; max-width: 320px; max-height: 320px; width: 100%; border-radius: 6px; cursor: zoom-in; object-fit: cover; } .bolha audio { max-width: 280px; display: block; } .bolha-video { display: block; max-width: 320px; max-height: 320px; border-radius: 6px; } .bolha-texto { display: block; } .bolha-img + .bolha-texto, .bolha-video + .bolha-texto { margin-top: 5px; } .bolha-doc { display: flex; align-items: center; gap: 8px; min-width: 180px; } .doc-icone { font-size: 22px; } .doc-nome { flex: 1; font-size: 13px; word-break: break-all; } .doc-baixar { color: var(--verde); font-size: 13px; font-weight: 600; text-decoration: none; } .doc-baixar:hover { text-decoration: underline; } /* bolha de envio com falha */ .bolha.erro { border: 1px solid var(--vermelho); } .bolha.erro .hora { color: var(--vermelho); } /* destaque temporário ao navegar até uma mensagem citada */ .bolha.destaque { outline: 2px solid var(--verde-claro); } /* ---------- reply (responder mensagem) ---------- */ .bolha { position: relative; } .bolha-acao { position: absolute; top: 2px; right: 4px; border: none; cursor: pointer; background: var(--sobreposicao); color: var(--texto-suave); border-radius: 50%; width: 22px; height: 22px; font-size: 13px; line-height: 1; opacity: 0; transition: opacity .15s; } .bolha:hover .bolha-acao { opacity: 1; } .bolha-acao:hover { background: var(--sobreposicao); opacity: .9; } .bolha-citacao { border-left: 3px solid var(--verde); background: var(--sobreposicao); border-radius: 4px; padding: 4px 8px; margin-bottom: 4px; font-size: 12px; cursor: pointer; } .citacao-autor { font-weight: 600; color: var(--verde); } .citacao-trecho { color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } .reply-preview { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--superficie-2); border-top: 1px solid var(--borda); } .reply-preview[hidden] { display: none; } .reply-info { flex: 1; border-left: 3px solid var(--verde); padding: 2px 10px; background: var(--sobreposicao); border-radius: 4px; min-width: 0; } .reply-rotulo { font-size: 11px; font-weight: 600; color: var(--verde); } .reply-trecho { font-size: 13px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reply-preview button { border: none; background: none; font-size: 20px; cursor: pointer; color: var(--texto-suave); } /* ---------- lightbox (ampliar imagem) ---------- */ .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; z-index: 100; cursor: zoom-out; } .lightbox.aberto { display: flex; } .lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 4px; } /* ---------- páginas de lista (instâncias / conhecimento) ---------- */ .pagina { flex: 1; overflow-y: auto; padding: 30px; max-width: 960px; margin: 0 auto; width: 100%; } .pagina h1 { font-size: 20px; margin-bottom: 4px; color: var(--titulo); } .pagina .subtitulo { color: var(--texto-suave); font-size: 13px; margin-bottom: 20px; } .pagina-acoes { margin-bottom: 16px; display: flex; gap: 10px; align-items: center; } .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 14px; } .cartao .info { flex: 1; } .cartao .titulo { font-weight: 600; font-size: 15px; } .cartao .detalhe { font-size: 12px; color: var(--texto-suave); margin-top: 2px; } .cartao .acoes { display: flex; gap: 6px; flex-wrap: wrap; } .status-bola { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .status-bola.conectada { background: var(--verde-claro); } .status-bola.conectando { background: var(--amarelo); } .status-bola.desconectada { background: var(--vermelho); } /* ---------- modal ---------- */ .modal-fundo { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; z-index: 50; } .modal-fundo.aberto { display: flex; } .modal { background: var(--superficie); border-radius: 12px; padding: 28px; width: 380px; text-align: center; position: relative; } .modal h2 { font-size: 17px; margin-bottom: 14px; color: var(--titulo); } .modal .fechar { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--texto-suave); } .modal input { width: 100%; padding: 10px; border: 1px solid var(--borda); border-radius: 6px; font-size: 14px; margin-bottom: 14px; background: var(--superficie); color: var(--texto); } .qr-area { min-height: 280px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; } .qr-area img { width: 260px; height: 260px; } .qr-status { font-size: 13px; color: var(--texto-suave); } .qr-conectado { font-size: 16px; color: var(--verde); font-weight: 700; } /* ---------- página de configurações (/configuracoes) ---------- */ .secao-titulo { font-size: 16px; color: var(--titulo); margin: 26px 0 4px; } .secao-titulo:first-of-type { margin-top: 10px; } .select-config { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px; font-size: 13px; background: var(--superficie); color: var(--texto); max-width: 280px; } .grupo-parametros { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 4px 16px 6px; margin-bottom: 14px; } .grupo-parametros h3 { font-size: 13px; color: var(--titulo); margin: 12px 0 2px; } .parametro { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--superficie-2); } .parametro:last-child { border-bottom: none; } .parametro-info { flex: 1; min-width: 0; } .parametro-info label { font-size: 13px; font-weight: 600; } .parametro-info .detalhe { font-size: 12px; color: var(--texto-suave); margin-top: 2px; } .parametro-info code { font-size: 11px; } .parametro-controle { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } .parametro-controle input[type="text"], .parametro-controle input[type="number"] { width: 280px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px; font-size: 13px; background: var(--superficie); color: var(--texto); } .parametro-controle input[type="number"] { width: 120px; } .parametro-controle input[type="checkbox"] { width: 18px; height: 18px; } .parametro-valor { font-size: 12px; color: var(--texto-suave); word-break: break-all; max-width: 45%; text-align: right; } .selo.origem-painel { background: var(--verde-claro); color: #fff; } /* horário de atendimento por instância */ .horario-dias { display: flex; gap: 10px; flex-wrap: wrap; } .dia-check { font-size: 12px; display: flex; align-items: center; gap: 4px; color: var(--texto); cursor: pointer; } .parametro-controle input[type="time"] { padding: 6px 8px; border: 1px solid var(--borda); border-radius: 6px; font-size: 13px; background: var(--superficie); color: var(--texto); } .parametro-controle textarea { width: 320px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px; font-size: 13px; background: var(--superficie); color: var(--texto); resize: vertical; font-family: inherit; } /* ---------- upload conhecimento ---------- */ .upload-area { display: flex; gap: 10px; align-items: center; } .progresso { font-size: 13px; color: var(--texto-suave); margin-top: 8px; } .aviso { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; } .aviso.erro { background: #fdecea; color: #8a1c14; } .aviso.ok { background: #e7f6ec; color: #1d6b3a; } /* ---------- página de logs (/log) ---------- */ .log-cartao { align-items: flex-start; } .log-nivel { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; margin-right: 6px; vertical-align: middle; } .log-nivel.warning { background: #fff4d6; color: #7a5b00; } .log-nivel.error, .log-nivel.critical { background: #fdecea; color: #8a1c14; } .log-stack { margin-top: 8px; font-size: 12px; } .log-stack summary { cursor: pointer; color: var(--texto-suave); } .log-stack pre { margin-top: 6px; padding: 10px; background: #1f2428; color: #e6e6e6; border-radius: 8px; overflow-x: auto; font-size: 11px; line-height: 1.5; }