:root { --fundo: #f5f5f7; --superficie: #ffffff; --texto-principal: #1d1d1f; --texto-secundario: #6e6e73; --acento: #007aff; --acento-fraco: #e8f1ff; --borda: #e5e5ea; --sombra: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05); --raio: 16px; --bolha-bot: #ffffff; --bolha-usuario: #007aff; /* Emblema de cada ação: fundo ÚNICO/uniforme (mesmo tom pastel pra tudo) - o emoji já é colorido sozinho, o círculo é só uma "moldura" suave. Corrigido em 02/09/2026 depois do Max comparar com a 1a versão: um arco-íris de cor por ação (testado antes) ficou "menos sofisticado" que o padrão uniforme original. Só o vermelho continua diferente, reservado pra ação destrutiva (Encerrar caso). */ --emblema-azul: var(--acento-fraco); --emblema-verde: var(--acento-fraco); --emblema-roxo: var(--acento-fraco); --emblema-laranja: var(--acento-fraco); --emblema-ciano: var(--acento-fraco); --emblema-vermelho: #ffe9e8; } /* Tema escuro (pedido do Max, 01/09/2026) - alternado via atributo data-tema no , escolha guardada no localStorage do aparelho. Mantido simples/plano de propósito (02/09/2026: a versão com gradiente "vidro fosco" foi rejeitada pelo Max - "esquece a atualização que você fez"). */ html[data-tema="escuro"] { --fundo: #000000; --superficie: #1c1c1e; --texto-principal: #f5f5f7; --texto-secundario: #98989d; --acento: #0a84ff; --acento-fraco: #0a2c4d; --borda: #2c2c2e; --sombra: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3); --bolha-bot: #1c1c1e; --bolha-usuario: #0a84ff; --emblema-azul: var(--acento-fraco); --emblema-verde: var(--acento-fraco); --emblema-roxo: var(--acento-fraco); --emblema-laranja: var(--acento-fraco); --emblema-ciano: var(--acento-fraco); --emblema-vermelho: #4a1210; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--fundo); color: var(--texto-principal); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } .tela { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 96px; /* espaco pra barra de acoes fixa */ } .cabecalho { padding: 28px 20px 12px; } .cabecalho .titulo { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0; } .cabecalho .subtitulo { color: var(--texto-secundario); font-size: 15px; margin: 4px 0 0; } .caso-atual { margin: 4px 20px 8px; padding: 14px 16px; background: var(--acento-fraco); border-radius: 14px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--acento); font-weight: 600; } .grade-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 12px 20px; } .cartao-acao { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-decoration: none; color: var(--texto-principal); transition: transform 0.15s ease, box-shadow 0.15s ease; border: 1px solid transparent; } .cartao-acao:active { transform: scale(0.97); } .cartao-acao .emblema { width: 40px; height: 40px; border-radius: 12px; background: var(--acento-fraco); display: flex; align-items: center; justify-content: center; font-size: 20px; } .cartao-acao .nome { font-weight: 600; font-size: 16px; } .cartao-acao .comando { font-size: 12px; color: var(--texto-secundario); font-family: "SF Mono", Consolas, monospace; } .cartao-acao.destaque { grid-column: 1 / -1; flex-direction: row; align-items: center; background: var(--acento); color: white; } .cartao-acao.destaque .emblema { background: rgba(255, 255, 255, 0.2); } .cartao-acao.destaque .comando { color: rgba(255, 255, 255, 0.75); } .secao-titulo { padding: 18px 20px 4px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-secundario); } .lista-documentos { padding: 4px 20px; display: flex; flex-direction: column; gap: 10px; } .linha-documento { background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra); padding: 14px 16px; display: flex; align-items: center; gap: 12px; } .linha-documento .icone-doc { width: 36px; height: 36px; border-radius: 10px; background: var(--acento-fraco); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .linha-documento .info { flex: 1; min-width: 0; } .linha-documento .info .nome { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .linha-documento .info .meta { font-size: 13px; color: var(--texto-secundario); } .barra-acoes { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--borda); } .barra-acoes .conteudo { width: 100%; max-width: 480px; display: flex; gap: 8px; overflow-x: auto; } .botao-barra { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; padding: 8px 4px; border-radius: 12px; color: var(--texto-secundario); font-family: inherit; font-size: 11px; font-weight: 500; white-space: nowrap; } .botao-barra .icone { font-size: 20px; } .botao-barra.principal { color: var(--acento); } .botao-barra:active { background: var(--acento-fraco); } .campo-busca { margin: 4px 20px 8px; display: flex; align-items: center; gap: 8px; background: var(--superficie); border-radius: 14px; padding: 12px 16px; box-shadow: var(--sombra); } .campo-busca input { border: none; outline: none; font-size: 16px; flex: 1; font-family: inherit; color: var(--texto-principal); background: transparent; } .campo-busca input::placeholder { color: var(--texto-secundario); } .filtros { display: flex; gap: 8px; padding: 4px 20px 8px; overflow-x: auto; } .chip-filtro { padding: 8px 14px; border-radius: 20px; background: var(--superficie); border: 1px solid var(--borda); font-size: 13px; font-weight: 500; color: var(--texto-secundario); white-space: nowrap; } .chip-filtro.ativo { background: var(--acento); color: white; border-color: var(--acento); } /* ── Chat (redesenho de 01/09/2026, a pedido do Max: cara de chat de verdade, não tela de app) ────────────────────────────────────── */ /* Testado com moldura (borda + margem + rolagem só dentro da caixa) em 02/09/2026, mas o Max preferiu a sensação de "chat infinito" que já existia antes - cabeçalho/rodapé fixos na tela toda, sutis mas perceptíveis pelo tom, sem caixa/margem lateral. Revertido de propósito - ver `notas/diario_de_decisoes.md`. */ .tela-chat { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; } .chat-cabecalho { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--borda); } html[data-tema="escuro"] .chat-cabecalho { background: rgba(28, 28, 30, 0.82); } .chat-cabecalho .avatar { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Marca oficial (imagem real fornecida pelo Max, 06/09/2026 - NÃO redesenhada por código; só recortada/redimensionada). Sem border-radius: a própria marca já tem o contorno de bolha+rabo, um recorte circular cortaria o rabo. */ .chat-cabecalho .avatar img { width: 100%; height: auto; object-fit: contain; transition: transform 0.2s ease; } /* Animação de "pensando" (pedido do Max, 06/09/2026, inspirado no ícone do Claude pulsando enquanto responde) - ligada via JS (".pensando" em ".avatar") enquanto espera a IA responder. */ @keyframes respirar-marca { 0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(10, 132, 255, 0)); } 50% { transform: scale(1.1) rotate(-4deg); filter: drop-shadow(0 0 10px rgba(10, 132, 255, 0.55)); } } .chat-cabecalho .avatar.pensando img { animation: respirar-marca 1.1s ease-in-out infinite; } .chat-cabecalho .info { flex: 1; min-width: 0; } .chat-cabecalho .nome { font-weight: 600; font-size: 16px; } .chat-cabecalho .status { font-size: 12px; color: var(--texto-secundario); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ponto-status { width: 7px; height: 7px; border-radius: 50%; background: var(--emblema-verde); flex-shrink: 0; } .chat-cabecalho .acoes-cabecalho { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .botao-tema, .botao-menu { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borda); background: var(--superficie); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; color: var(--texto-principal); } .thread { flex: 1; padding: 16px 12px 12px; display: flex; flex-direction: column; gap: 14px; } .mensagem { display: flex; flex-direction: column; max-width: 86%; gap: 8px; } .mensagem.bot { align-self: flex-start; } .mensagem.usuario { align-self: flex-end; align-items: flex-end; } .bolha { padding: 12px 14px; border-radius: 18px; font-size: 15px; line-height: 1.4; box-shadow: var(--sombra); } .mensagem.bot .bolha { background: var(--bolha-bot); color: var(--texto-principal); border-bottom-left-radius: 6px; } .mensagem.usuario .bolha { background: var(--bolha-usuario); color: white; border-bottom-right-radius: 6px; } .hora-mensagem { font-size: 11px; color: var(--texto-secundario); padding: 0 4px; } .botoes-inline { display: flex; flex-direction: column; gap: 8px; width: 100%; } /* 2 botões por linha, pra economizar espaço na conversa (pedido do Max, 02/09/2026, comparando com o teclado inline do Telegram antigo - lá cabiam 2 ações lado a lado em vez de empilhadas). Cada botão vira uma coluna: ícone em cima, texto embaixo, centralizado. */ .botoes-inline.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .botoes-inline.grade-2 .botao-inline { flex-direction: column; align-items: flex-start; text-align: left; gap: 8px; } .botoes-inline.grade-2 .botao-inline .seta { display: none; } .botao-inline.destaque { background: var(--acento); border-color: var(--acento); color: white; font-weight: 600; } .botao-inline.destaque .emblema-acao { background: rgba(255, 255, 255, 0.22); } .botao-inline.destaque .seta { color: rgba(255, 255, 255, 0.8); } .botao-inline { display: flex; align-items: center; gap: 12px; background: var(--superficie); border: 1px solid var(--borda); color: var(--texto-principal); font-family: inherit; font-size: 15px; font-weight: 500; padding: 10px 12px; border-radius: 14px; text-align: left; text-decoration: none; box-shadow: var(--sombra); } .botao-inline:active { background: var(--acento-fraco); } .botao-inline .rotulo { flex: 1; min-width: 0; } .botao-inline .seta { color: var(--texto-secundario); font-size: 16px; flex-shrink: 0; } /* Emblema redondo colorido de cada ação (ícone único por tipo, herdado visualmente do Telegram antigo). Círculo pequeno, emoji grande dentro - pedido do Max, 02/09/2026, "o fundo pode ficar um pouco menor e o ícone maior". */ .emblema-acao { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1; flex-shrink: 0; background: var(--acento-fraco); } .emblema-acao.cor-azul { background: var(--emblema-azul); } .emblema-acao.cor-verde { background: var(--emblema-verde); } .emblema-acao.cor-roxo { background: var(--emblema-roxo); } .emblema-acao.cor-laranja { background: var(--emblema-laranja); } .emblema-acao.cor-vermelho { background: var(--emblema-vermelho); } .emblema-acao.cor-ciano { background: var(--emblema-ciano); } .lista-rolavel { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; } /* Barra de atalhos rápidos (pedido do Max, 02/09/2026: trazer de volta a barra inferior da 1a versão, agora convivendo com a barra de digitar em vez de substituí-la). Reaproveita .botao-barra, que já existia desde o protótipo original. Quando existe (só no ciclo_quente), fica dentro de ".rodape-chat" junto com a barra de digitar, e as duas grudam fixas embaixo da tela como uma peça só. */ .rodape-chat { position: sticky; bottom: 0; z-index: 5; } .rodape-chat > * { position: static; } .barra-rapida { display: flex; justify-content: center; gap: 4px; padding: 8px 10px 0; background: var(--superficie); border-top: 1px solid var(--borda); } .barra-rapida .botao-barra { flex: 1; } /* Barra de ações contextuais (pedido do Max, 06/09/2026: no Telegram antigo, o botão certo pro momento certo - "Concluir", "Gerar documento", "Anotar planilha" - ficava sempre visível perto da digitação, nunca preso lá em cima na conversa rolando pra fora de vista). Populada por JS conforme o estado (coletando/pronto/ documento gerado); "hidden" quando não há ação pendente. */ .barra-contextual { display: flex; gap: 8px; padding: 10px 12px 0; background: var(--superficie); border-top: 1px solid var(--borda); overflow-x: auto; } .barra-contextual[hidden] { display: none; } /* Mesmo estilo visual do `.botao-barra` original (pedido do Max, 06/09/2026: rótulo em cinza neutro, ícone colorido por si só - não texto azul tipo link). */ .barra-contextual .botao-contextual { flex: 1; min-width: 84px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; padding: 8px 4px; border-radius: 12px; color: var(--texto-secundario); font-family: inherit; font-size: 11px; font-weight: 500; white-space: nowrap; } .barra-contextual .botao-contextual .icone-contextual { font-size: 20px; } .barra-contextual .botao-contextual:active { background: var(--acento-fraco); } .barra-digitar { position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--borda); } html[data-tema="escuro"] .barra-digitar { background: rgba(28, 28, 30, 0.9); } .botao-clipe { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--acento-fraco); color: var(--acento); font-size: 18px; flex-shrink: 0; } .campo-mensagem { flex: 1; border-radius: 20px; border: 1px solid var(--borda); background: var(--superficie); padding: 10px 16px; font-size: 15px; font-family: inherit; color: var(--texto-principal); outline: none; resize: none; max-height: 100px; } .campo-mensagem::placeholder { color: var(--texto-secundario); } .botao-enviar { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--acento); color: white; font-size: 16px; flex-shrink: 0; } /* Tela de login/cadastro (06/09/2026, pedido do Max: cada usuário cadastrado tem sua janela de conversa protegida por senha) - injetada via JS (tema.js) sobre QUALQUER página que carregue este arquivo, cobrindo a tela inteira até confirmar sessão válida. */ .tela-login-overlay { position: fixed; inset: 0; z-index: 999; background: var(--fundo); display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; } .cartao-login { width: 100%; max-width: 380px; background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); padding: 28px 24px; } .cartao-login .logo-login { width: 56px; height: 56px; border-radius: 16px; display: block; margin: 0 auto 12px; } .cartao-login h1 { font-size: 19px; font-weight: 700; text-align: center; margin: 0 0 4px; color: var(--texto-principal); } .cartao-login .subtitulo-login { font-size: 13px; color: var(--texto-secundario); text-align: center; margin: 0 0 18px; } .aviso-legal-login { background: var(--acento-fraco); border-radius: 12px; padding: 12px 14px; font-size: 12px; line-height: 1.5; color: var(--texto-secundario); margin-bottom: 18px; } .abas-login { display: flex; background: var(--fundo); border-radius: 12px; padding: 3px; margin-bottom: 18px; } .aba-login { flex: 1; border: none; background: none; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--texto-secundario); padding: 8px; border-radius: 9px; cursor: pointer; } .aba-login.ativa { background: var(--superficie); color: var(--acento); box-shadow: var(--sombra); } .formulario-login { display: none; flex-direction: column; gap: 10px; } .formulario-login.ativo { display: flex; } .campo-login-rotulo { font-size: 12px; font-weight: 600; color: var(--texto-secundario); margin-bottom: -4px; } .formulario-login input { border-radius: 12px; border: 1px solid var(--borda); background: var(--fundo); padding: 11px 14px; font-size: 15px; font-family: inherit; color: var(--texto-principal); outline: none; } .formulario-login input:focus { border-color: var(--acento); } .botao-login { margin-top: 8px; border: none; border-radius: 12px; background: var(--acento); color: white; font-family: inherit; font-size: 15px; font-weight: 600; padding: 12px; cursor: pointer; } .botao-login:disabled { opacity: 0.6; } .mensagem-login { font-size: 13px; margin-top: 12px; text-align: center; min-height: 16px; } .mensagem-login.erro { color: #d92d20; } .mensagem-login.aviso { color: #b54708; } .mensagem-login.ok { color: #12805c; } /* Painel simples de aprovação (só aparece pro admin) */ .botao-pendentes { position: fixed; top: 10px; right: 10px; z-index: 998; background: var(--acento); color: white; border: none; border-radius: 20px; padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 600; box-shadow: var(--sombra); cursor: pointer; } .lista-pendentes-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--borda); } .lista-pendentes-item .info-pendente { min-width: 0; } .lista-pendentes-item .nome-pendente { font-weight: 600; font-size: 14px; color: var(--texto-principal); } .lista-pendentes-item .detalhe-pendente { font-size: 12px; color: var(--texto-secundario); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lista-pendentes-item .acoes-pendente { display: flex; gap: 6px; flex-shrink: 0; } .lista-pendentes-item button { border: none; border-radius: 8px; padding: 6px 10px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .lista-pendentes-item .aprovar { background: var(--acento-fraco); color: var(--acento); } .lista-pendentes-item .recusar { background: #ffe9e8; color: #d92d20; }