.pulse4 { display: block;width: 60px;height: 60px;border-radius: 50%;background-color: #25D366;cursor: pointer;box-shadow: 0 0 0 rgba(34, 190, 20, 0.4);animation: pulse 2s infinite;transition: all .5s; } .pulse4:hover { background-color: #128c7e;transition: all .5s ease-in-out; } .chatbot-toggler { position: fixed;bottom: 40px;right: 30px;outline: none;border: none;height: 60px;width: 60px;display: flex;cursor: pointer;align-items: center;justify-content: center;border-radius: 50%;background: green;transition: all 0.2s ease;z-index: 9999;} body.show-chatbot .chatbot-toggler {transform: rotate(90deg);} .chatbot-toggler span { color: #fff;position: absolute;z-index: 9999;} .chatbot-toggler span:last-child, body.show-chatbot .chatbot-toggler span:first-child { opacity: 0;} body.show-chatbot .chatbot-toggler span:last-child { opacity: 1;} .chatbot { position: fixed;right: 35px;bottom: 90px;width: 420px;background: #fff;border-radius: 15px;overflow: hidden;opacity: 0;pointer-events: none;transform: scale(0.5);transform-origin: bottom right;box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1), 0 32px 64px -48px rgba(0, 0, 0, 0.5);transition: all 0.1s ease;z-index: 9999;} body.show-chatbot .chatbot { opacity: 1;pointer-events: auto;transform: scale(1);} .chatbot .header22 { padding: 10px 0;position: relative;text-align: center;color: #fff;background: linear-gradient(270deg, #1e0beb, #f8f8f8);box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);} .chatbot .header22 span { position: absolute;right: 15px;top: 50%;display: none;cursor: pointer;transform: translateY(-50%);} .header22 h2 { font-size: 1.4rem;} .chatbot .chatbox { overflow-y: auto;height: 480px;padding: 30px 20px 100px;} .chatbot :where(.chatbox, textarea)::-webkit-scrollbar { width: 6px;} .chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track { background: #fff;border-radius: 25px;} .chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb { background: #ccc;border-radius: 25px;} .chatbox .chat { display: flex;list-style: none;} .chatbox .outgoing { margin: 20px 0;justify-content: flex-end;} .chatbox .incoming span { width: 32px;height: 32px;color: #fff;cursor: default;text-align: center;line-height: 32px;align-self: flex-end;background: limegreen;border-radius: 4px;margin: 0 10px 7px 0;} .chatbox .chat p { white-space: pre-wrap;padding: 12px 16px;border-radius: 10px 10px 0 10px;max-width: 75%;color: #fff;font-size: 0.95rem;background: #724ae8;} .chatbox .incoming p { border-radius: 10px 10px 10px 0;} .chatbox .chat p.error { color: #721c24;background: #f8d7da;} .chatbox .incoming p { color: #000;background: limegreen;} .chatbot .chat-input { display: flex;gap: 5px;position: absolute;bottom: 0;width: 100%;background: #fff;padding: 3px 20px;border-top: 1px solid #ddd;} .chat-input textarea { height: 55px;width: 100%;border: none;outline: none;resize: none;max-height: 180px;padding: 15px 15px 15px 0;font-size: 0.95rem;} .chat-input span { align-self: flex-end;color: #724ae8;cursor: pointer;height: 55px;display: flex;align-items: center;visibility: hidden;font-size: 1.35rem;} .chat-input textarea:valid ~ span { visibility: visible;} @media (max-width: 490px) { .chatbot-toggler { bottom: 105px;right: 10px;z-index: 9999;} .chatbot {right: 0;bottom: 0;height: 100%;border-radius: 0;width: 100%;z-index: 9999;} .chatbot .chatbox {height: 90%;padding: 25px 15px 100px;} .chatbot .chat-input {padding: 5px 15px;} .chatbot .header22 span {display: block;} .chatbot .header22 h2 {font-size: 1.2rem;} .chatbox .chat p {font-size: 0.9rem;} .chat-input textarea { height: 45px;font-size: 0.9rem;} .chat-input span {font-size: 1.2rem;}}