@import"https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;color:#0b0a0a}img{height:100%;object-fit:cover}.app,img{width:100%}.app{height:400px;margin:0 auto}.chatbot{width:100%;min-height:100vh;background-color:#fff;color:#fff;position:relative}.chatbot ::-webkit-scrollbar{width:0}.chatbot-head{padding:10px;display:flex;align-items:center;gap:10px;background-color:#0b0a0a;justify-content:center;position:-webkit-sticky;position:sticky;top:0}.chatbot-head .img{width:300px;height:80px;overflow:hidden}.chatbot-head .info h4{font-size:20px;text-transform:capitalize;color:#0b0a0a}.chatbot-footer{width:100%;padding:10px;display:flex;align-items:center;justify-content:space-between;gap:30px}.chatbot-footer .form{width:100%;max-width:600px;min-height:50px;margin:auto auto 0;border:1px solid #e5e7eb;border-radius:6px;display:flex;flex-direction:column;justify-content:center}.chatbot-footer .form .img{padding-left:40px}.chatbot-footer .form .img img{width:70px;height:70px;object-fit:contain;border-radius:4px}.chatbot-footer .form form{width:100%;height:100%;position:relative;background-color:rgba(0,0,0,0);display:flex;justify-content:space-between;align-items:center}.chatbot-footer .form form label{width:100px;color:#0b0a0a;margin-left:10px;cursor:pointer}.chatbot-footer .form form input,.chatbot-footer .form form textarea{width:100%;padding:10px 20px;background-color:rgba(0,0,0,0);border:none;outline:none;font-size:16px;color:#0b0a0a}.chatbot-footer .form form input[type=file],.chatbot-footer .form form textarea[type=file]{display:none}.chatbot-footer .form form input::placeholder,.chatbot-footer .form form textarea::placeholder{color:#7a7a7a}.chatbot-footer .form form button{background-color:rgba(0,0,0,0);border:none;font-size:24px;margin-right:20px;display:flex;align-items:center;justify-content:center;color:#0b0a0a;transition:.3s;cursor:pointer}.chatbot-footer .form form button:hover{opacity:1}.chatbot-footer .buttons{width:20%;display:flex;align-items:center;justify-content:flex-end;gap:5px}.chatbot-footer .buttons button{background-color:rgba(0,0,0,0);border:none;color:#7a7a7a;font-size:22px;display:flex;align-items:center;justify-content:center;transition:.3s}.chatbot-footer .buttons button:hover{color:#fff}.chatbot-footer .buttons button.active{color:#f3f4f6}.chatbot-footer .color{z-index:100;background-color:#f3f4f6;padding:10px;position:absolute;bottom:0;border-radius:10px}.chatbot-footer .color .info{display:flex;padding-bottom:10px;justify-content:space-between}.chatbot-footer .color span{display:block}.chatbot-body{display:flex;flex-direction:column;justify-content:flex-end;min-height:100%}.chatbot-body-wrp{overflow-y:auto;width:100%;max-width:750px;margin:auto;min-height:calc(100vh - 150px)}@media screen and (max-width:500px){.chatbot-body-wrp{min-height:calc(100vh - 200px)}}.chatbot-body-item{display:flex;align-items:flex-end;justify-content:flex-start;gap:3px;padding:10px}.chatbot-body-item .img{width:20px!important;height:20px;border-radius:50%;background-color:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:20px;font-size:800;overflow:hidden}.chatbot-body-item .info{max-width:calc(100% - 50px)}.chatbot-body-item .info img{width:300px;height:200px;object-fit:contain;object-position:right}.chatbot-body-item p{padding:20px;background-color:#f3f4f6;border-radius:5px;color:#0b0a0a;font-size:16px}.chatbot-body-item .audio{display:flex;gap:10px;align-items:center;justify-content:center}.chatbot-body-item .audio .range{width:100px;height:4px;background-color:#fff;border-radius:4px;position:relative}.chatbot-body-item .audio .range span{position:absolute;left:0;top:0;height:100%;background-color:#f3f4f6;border-radius:40px}.chatbot-body-item .audio button{background-color:rgba(0,0,0,0);border:1px solid #fff;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-size:16px}.chatbot-body-item .audio button.pdd{padding-left:4px}.chatbot-body-item.user{justify-content:flex-end}.chatbot-body-item.user .img{order:1}.chatbot-body-item.user p{background-color:#f3f4f6}.chatbot-body .chat-bubble{background-color:#f3f4f6;padding:15px 10px;border-radius:5px;display:inline-block;width:100px;margin-left:30px}.chatbot-body .typing{align-items:center;display:flex;height:17px}.chatbot-body .typing .dot{animation:mercuryTypingAnimation 1.8s ease-in-out infinite;background-color:#fff;border-radius:50%;height:7px;margin-right:4px;vertical-align:middle;width:7px;display:inline-block}.chatbot-body .typing .dot:first-child{animation-delay:.2s}.chatbot-body .typing .dot:nth-child(2){animation-delay:.3s}.chatbot-body .typing .dot:nth-child(3){animation-delay:.4s}.chatbot-body .typing .dot:last-child{margin-right:0}@keyframes mercuryTypingAnimation{0%{transform:translateY(0);background-color:#6cad96}28%{transform:translateY(-7px);background-color:#9ecab9}44%{transform:translateY(0);background-color:#b5d9cb}}.chatbot-impr{max-width:550px;width:100%;margin:20px auto;height:80vh;display:flex;flex-direction:column;justify-content:center;padding:10px}.chatbot-impr-body{background-color:#f3f4f6;padding:20px;border-top-right-radius:12px;border-top-left-radius:12px}.chatbot-impr-body .top{display:flex;align-items:center;gap:10px}.chatbot-impr-body .top img{width:30px}.chatbot-impr-body h2,.chatbot-impr-body p{color:#0b0a0a;font-size:14px;padding-top:15px}.chatbot-impr-body h2{font-size:18px;padding-top:0}.chatbot-impr-bottom{padding:20px;border-bottom-right-radius:12px;border-bottom-left-radius:12px;box-shadow:0 2px 20px -4px rgba(229,231,235,.75);-webkit-box-shadow:0 2px 20px -4px rgba(229,231,235,.75);-moz-box-shadow:0 2px 20px -4px rgba(229,231,235,.75)}.chatbot-impr-bottom button{border:none;background-color:#2f395d;color:#fff;padding:10px 15px;border-radius:4px;display:flex;gap:5px;align-items:center}.protected{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}