:root{--body-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);--msger-bg: #fff;--border: 2px solid #ddd;--left-msg-bg: #ececec;--left-msg-sys-bg: #ececec;--right-msg-bg: #114a32;--logo: url(/logo.png);--logoX: 10px;--logoY: 10px;--logoWidth: 50px;--logoHeight: 50px;--submitButton: url(/mic.png);--submitButtonHeld: url(/mic_hold.png);--volumeButton: url(/speaker_on.png);--attract-mode: url()}html{box-sizing:border-box;height:100%}*,*:before,*:after{margin:0;padding:0;box-sizing:inherit}body{display:inline;justify-content:center;align-items:center;height:100vh;background-image:var(--body-bg);font-family:Helvetica,sans-serif;overflow:hidden}canvas{display:flex;width:100%;align-items:center;justify-content:center}.msger{display:flex;flex-flow:column wrap;justify-content:space-between;width:100%;height:calc(100dvh - 160px)}.msger-chat{flex:1;overflow-y:auto;padding:5px;margin-top:2px}.msger-chat::-webkit-scrollbar{width:6px}.msger-chat::-webkit-scrollbar-track{background:#ddd}.msger-chat::-webkit-scrollbar-thumb{background:#bdbdbd}.msg{display:flex;align-items:flex-end;margin-bottom:10px}.msg:last-of-type{margin:0}.msg-img{width:50px;height:50px;margin-right:10px;background:#ddd;background-repeat:no-repeat;background-position:center;background-size:cover;border-radius:50%}.msg-bubble{max-width:70%;padding:10px;border-radius:15px;background:var(--left-msg-bg)}.msg-bubble-sys{max-width:70%;padding:10px;border-radius:15px;background:var(--left-msg-sys-bg)}.msg-text-sys{color:gray;font-style:italic;max-width:340px}.msg-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.msg-info-name{margin-right:10px;font-weight:700}.msg-info-time{font-size:.85em}.left-msg .msg-bubble{border-bottom-left-radius:0}.right-msg{flex-direction:row-reverse}.right-msg .msg-bubble{background:var(--right-msg-bg);color:#fff;border-bottom-right-radius:0;max-width:70%}.right-msg .msg-img{margin:0 0 0 10px}.msger-inputarea{display:flex;padding:5px;border-top:var(--border);background:#eee;align-items:center}.msger-inputarea *{padding:10px;border:none;border-radius:3px;font-size:1em}.msger-input{flex:1;background:#ddd;resize:none;font-family:Helvetica,sans-serif;overflow:hidden;height:70%}.msger-start-speaking{flex:1;width:100%;text-align:right;font-weight:700;color:#114a32;margin-top:20px;margin-bottom:20px}.msger-send-btn{margin:auto 10px;display:block;width:80px;height:80px;background:#fff0 var(--submitButton);background-position:0px 0px;background-repeat:no-repeat;background-size:100% 100%;cursor:pointer}.msger-send-btn:active{margin-left:10px;margin-right:10px;width:80px;height:80px;background:#fff0 var(--submitButtonHeld);background-position:0px 0px;background-repeat:no-repeat;background-size:100% 100%}.msger-chat{background-color:#fcfcfe}.logo{position:absolute;right:var(--logoX);top:var(--logoY);width:var(--logoWidth);height:var(--logoHeight);background:var(--logo);background-position:0px 0px;background-repeat:no-repeat;background-size:100% 100%}.volume-btn{position:absolute;left:10px;top:10px;width:60px;height:60px;background:var(--volumeButton);background-position:0px 0px;background-repeat:no-repeat;background-size:100% 100%;cursor:pointer}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.typing-anim{display:inline-flex;background:#f1f1f1;padding:13px 10px;border-radius:50px;margin:40px auto}.typing-anim .dot{height:10px;width:10px;background:#6c757d;opacity:.7;border-radius:50%;margin:0 3px;animation:animateDots 1.8s var(--delay) ease-in-out infinite}@keyframes animateDots{28%{opacity:.4}44%{opacity:.2}}.center_div{position:relative;justify-content:center;align-items:center}.wave{position:absolute;width:.1rem;height:3rem;background-color:var(--right-msg-bg);margin:0 .1rem;border-radius:1rem;animation:waves 1.2s linear infinite}@keyframes waves{0%{transform:scale(0)}50%{transform:scale(1)}to{transform:scale(0)}}.wave:nth-child(2){animation-delay:-.1s}.wave:nth-child(3){animation-delay:-.2s}.wave:nth-child(7){animation-delay:-.6s}.wave:nth-child(8){animation-delay:-.7s}.wave:nth-child(9){animation-delay:-.8s}.wave:nth-child(10){animation-delay:-.9s}.wave:nth-child(4){animation-delay:-.3s}.wave:nth-child(5){animation-delay:-.4s}.wave:nth-child(6){animation-delay:-.5s}#attractScreen{background-image:var(--attract-mode);height:100%;background-position:center;background-repeat:no-repeat;background-size:cover}.micPermissionPopup{padding:20px;background:#ddd;position:absolute;top:25%;left:5%;width:90%;height:auto;border-radius:25px;color:#000;text-align:center;font-size:medium}.micPermissionScreen{position:absolute;top:0;background:#000c;width:100%;height:100%}.listenButtonInfo{position:absolute;right:5px;bottom:85px;width:95px;height:70px;text-align:center;font-size:1em;background-image:url(/mic_arrow.png);background-size:100% 100%;color:#fff;animation:listenButtonInfo 5s ease infinite}@keyframes listenButtonInfo{0%,20%,50%,65%,95%,to{transform:translateY(0)}70%{transform:translateY(-6px)}75%{transform:translateY(0)}80%{transform:translateY(-6px)}85%{transform:translateY(0)}90%{transform:translateY(-6px)}}.suggestionList{display:flex}.suggestion{max-width:33svw;padding:5px;margin:5px;border-radius:15px;background:var(--right-msg-bg);min-width:100px;color:#fff;text-align:center;cursor:pointer;font-size:.8em}.starpal-promo{font-size:18px;margin:10px;text-align:right}