react-gemini-ai-bot/dist/Chatbot.css

This project provides a React component for integrating a chatbot powered by Gemini AI.

#chatbot-toggler{position:fixed;display:flex;justify-content:center;align-items:center;bottom:30px;right:35px;border:none;width:50px;height:50px;border-radius:50%;background-color:#6e59c6;font-size:large;color:white;cursor:pointer}.chatbot-popup{position:fixed;opacity:0;pointer-events:none;bottom:90px;right:35px;width:420px;transform:scale(0.2);background-color:white;border-radius:15px 15px 0px 0px;box-shadow:0 0 128px 0 rgba(0, 0, 0, 0.1),0 32px 64px -48px rgba(0, 0, 0, 0.5);transition:all .2 ease;overflow:hidden}.show-chatbot .chatbot-popup{opacity:1;transform:scale(1);pointer-events:auto}.chatbot-popup .chat-header{display:flex;justify-content:space-between;align-items:center;padding:15px 22px;background-color:#6e59c6}.chat-header .header-info{display:flex;gap:10px;align-items:center}.header-info img{padding:6px 7px 8px 7px;flex-shrink:0;background-color:#fff;border-radius:50%}.header-info .logo-text{color:#fff;font-size:2rem;font-weight:600}.chat-header button{width:40px;height:40px;border:none;outline:none;display:flex;justify-content:center;align-items:center;font-size:1.3rem;padding-top:2px;margin-right:-10px;cursor:pointer;border-radius:50%;color:rgb(215, 250, 223);background:none;transition:.2s ease}.chat-header button:hover{background:#503ca1}.chat-body{display:flex;flex-direction:column;gap:20px;height:33vh;overflow-y:auto;padding:5%;margin-bottom:82px;scrollbar-width:thin;scrollbar-color:#b3a2f8 transparent}.chat-body .message{display:flex;gap:11px;align-items:center}.chat-body .message.error .message-text{color:red}.chat-body .bot-message img{padding:6px 7px 8px 7px;flex-shrink:0;margin-bottom:2px;align-self:flex-end;background-color:#927edf;border-radius:50%}.chat-body .message .message-text{padding:12px 16px;max-width:75%;word-wrap:break-word;white-space:pre-line;font-size:.95rem}.chat-body .bot-message .message-text{background-color:#e1dbfc;border-radius:13px 13px 13px 3px}.chat-body .user-message{flex-direction:column;align-items:flex-end}.chat-body .user-message .message-text{color:white;background-color:#927edf;border-radius:13px 13px 3px 13px}.chat-footer{position:absolute;bottom:0;width:90%;background-color:white;padding:15px 22px 20px}.chat-footer .chat-form{display:flex;align-items:center;background:#fff;border-radius:32px;outline:1px solid rgb(233, 231, 231);box-shadow:0 0 8px rgb(218, 217, 217)}.chat-footer .chat-form:focus-within{outline:2px solid #725ad3}.chat-footer .message-input{border:none;outline:none;background:none;width:100%;height:47px;padding:0 17px;font-size:.95rem}.chat-form button{display:none;width:35px;height:35px;color:white;flex-shrink:0;border:none;outline:none;color:white;background-color:#725ad3;border-radius:50%;margin-right:6px}.chat-form button:hover{background-color:#553bbd;cursor:pointer}.chat-form .message-input:valid~button{display:flex;justify-content:center;align-items:center}