/* ========================================================== ESTILOS DO WIDGET DE ATENDIMENTO (CHATBOT) -------------------------------------------------------- OBS: o reset global (*) e o estilo de do arquivo original foram removidos aqui de propósito, para não sobrescrever a fonte/cores do restante do site. A classe .logo também foi renomeada para .chat-logo, pois .logo já é usada pelo cabeçalho/rodapé do site. ========================================================== */ /* ========================================================== BOTÃO FLUTUANTE "ATENDIMENTO" (mantido no código para o atendimento.js funcionar, mas fica sempre oculto — quem abre o chat são os botões "Fale Conosco" do site) ========================================================== */ .chat-button { position: fixed; right: 25px; bottom: 25px; border: none; background: #0057a8; color: #ffffff; padding: 15px 22px; border-radius: 30px; font-size: 16px; font-weight: 500; cursor: pointer; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.22); align-items: center; justify-content: center; gap: 8px; z-index: 9999; transition: transform 0.2s ease, background 0.2s ease; /* sempre oculto: quem abre o chat são os botões do site */ display: none !important; } .icone-chat { font-size: 18px; } /* ========================================================== JANELA DO CHATBOT ========================================================== */ .chatbot { position: fixed; right: 25px; bottom: 25px; width: 400px; max-width: calc(100vw - 30px); height: 600px; background: #ffffff; border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); overflow: hidden; /* MUITO IMPORTANTE: O chatbot começa escondido. */ display: none !important; flex-direction: column; z-index: 10000; } /* ========================================================== CHATBOT ABERTO ========================================================== */ .chatbot.aberto { display: flex !important; } /* ========================================================== CABEÇALHO ========================================================== */ .chat-header { background: #0057a8; color: #ffffff; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } /* ========================================================== INFORMAÇÕES DA EMPRESA ========================================================== */ .empresa { display: flex; align-items: center; gap: 12px; } .chat-logo { width: 46px; height: 46px; border-radius: 50%; background: #f58220; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 23px; font-weight: bold; flex-shrink: 0; } .chat-logo-img { width: 24px; height: 24px; object-fit: contain; /* o ícone original é laranja; deixamos branco para contrastar com o círculo */ filter: brightness(0) invert(1); } .empresa-info strong { display: block; font-size: 16px; } .empresa-info small { display: block; margin-top: 4px; opacity: 0.85; font-size: 13px; } /* ========================================================== BOTÃO X ========================================================== */ .fechar { border: none; background: transparent; color: #ffffff; font-size: 32px; line-height: 1; cursor: pointer; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; } .fechar:hover { opacity: 0.75; } /* ========================================================== ÁREA DAS MENSAGENS ========================================================== */ .chat-messages { flex: 1; padding: 18px; overflow-y: auto; background: #f5f7fa; } /* ========================================================== MENSAGEM DO BOT ========================================================== */ .bot-message { background: #ffffff; color: #222222; padding: 13px 15px; border-radius: 14px; margin-bottom: 12px; line-height: 1.45; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } /* ========================================================== MENSAGEM DO USUÁRIO ========================================================== */ .user-message { background: #0057a8; color: #ffffff; padding: 11px 14px; border-radius: 14px; margin: 9px 0 12px auto; max-width: 85%; width: fit-content; line-height: 1.45; } /* ========================================================== ÁREA DOS BOTÕES ========================================================== */ .opcoes { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; } /* ========================================================== BOTÕES DO CHAT ========================================================== */ .opcoes button { background: #ffffff; color: #222222; border: 1px solid #d9dfe6; padding: 13px; border-radius: 10px; text-align: left; font-size: 14px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .opcoes button:hover { border-color: #0057a8; background: #eef6ff; } /* ========================================================== CAMPOS DE TEXTO ========================================================== */ .opcoes input, .opcoes textarea { width: 100%; padding: 13px; border: 1px solid #cfd6df; border-radius: 10px; font-size: 14px; font-family: Arial, Helvetica, sans-serif; outline: none; } .opcoes input:focus, .opcoes textarea:focus { border-color: #0057a8; } .opcoes textarea { resize: vertical; min-height: 100px; } /* ========================================================== BOTÃO LARANJA ========================================================== */ .btn-laranja { background: #f58220 !important; color: #ffffff !important; border: none !important; text-align: center !important; font-weight: bold; } .btn-laranja:hover { background: #d96d0d !important; } /* ========================================================== BOTÃO WHATSAPP ========================================================== */ .btn-whatsapp { background: #25d366 !important; color: #ffffff !important; border: none !important; text-align: center !important; font-weight: bold; } /* ========================================================== BARRA DE ROLAGEM ========================================================== */ .chat-messages::-webkit-scrollbar { width: 6px; } .chat-messages::-webkit-scrollbar-thumb { background: #c8cdd3; border-radius: 10px; } /* ========================================================== CELULAR ========================================================== */ @media (max-width: 500px) { .chatbot { right: 10px; bottom: 10px; width: calc(100vw - 20px); height: 80vh; border-radius: 16px; } }