@keyframes loading-dot{0%,80%,to{box-shadow:0 1em 0 -.5em}40%{box-shadow:0 1em 0 0}}@keyframes submit-show{to{bottom:20px}}body{background-color:#d7e6fa;line-height:1.6}#chat{padding-bottom:100px}#chat>header{background-color:#3ca0fa;padding:10px;position:fixed;top:0;right:0;left:0;z-index:10}#chat>header h1{margin-right:50px;font-size:1.8rem;line-height:1.2;color:#fff}#chat>header h1 small{margin-top:.2em;font-size:1.4rem;display:block}#chat>header nav{margin:auto 0;width:42px;height:42px;position:absolute;top:0;right:10px;bottom:0}#chat>header nav a{height:100%;white-space:nowrap;text-indent:100%;overflow:hidden;position:relative;display:block}#chat>header nav a:after,#chat>header nav a:before{content:"";background-color:#fff;margin:auto;width:32px;height:3px;position:absolute;top:0;right:0;bottom:0;left:0;display:block;transition:transform .25s}#chat>header nav a:before{box-shadow:0 -10px 0 0 #fff}#chat>header nav a:after{box-shadow:0 10px 0 0 #fff}#chat>header nav a.active:after,#chat>header nav a.active:before{box-shadow:none}#chat>header nav a.active:before{transform:rotate(-45deg)}#chat>header nav a.active:after{transform:rotate(45deg)}#chat #menu{background-color:hsla(0,0%,100%,.75);position:fixed;top:0;right:0;bottom:0;left:0;z-index:9}#chat #menu .content{background-color:#f5faff;border-left:10px solid #3ca0fa;margin-left:auto;padding:70px 10px 20px;width:90%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;transition:transform .25s}#chat #menu .content h2{border-left:5px solid #333;margin-top:30px;margin-bottom:20px;padding-left:10px;font-size:1.6rem;line-height:1.5}#chat #menu .content dl{line-height:1.5}#chat #menu .content dl dt{border-bottom:1px solid #837460;margin-top:1em;padding-bottom:.25em}#chat #menu .content dl dt:first-child{margin-top:0}#chat #menu .content dl dd{margin-top:.5em}#chat #menu .content dl+dl{margin-top:30px}#chat #menu .content>a{background-color:#cd4b64;border-radius:8px;margin:20px auto 0;padding:15px 10px;max-width:320px;line-height:1.1;text-decoration:none;text-align:center;color:#fff;display:block;box-sizing:border-box}#chat #menu .content>a:hover{background-color:#d87386}#chat #menu.v-enter-active,#chat #menu.v-leave-active{transition:opacity .25s}#chat #menu.v-enter{opacity:0}#chat #menu.v-enter .content{transform:translateX(100%)}#chat #menu.v-leave-to{opacity:0}#chat #menu.v-leave-to .content{transform:translateX(100%)}#chat main{margin-top:80px;padding:0 10px}#chat main>figure{margin:0 auto;max-width:500px}#chat main form>ol>li{margin-top:15px;display:flex;align-items:flex-end}#chat main form>ol>li .body{border-radius:8px;padding:10px;position:relative}#chat main form>ol>li .body:before{content:"";border-style:solid;width:0;height:0;position:absolute;bottom:0;display:block}#chat main form>ol>li .body p{margin-top:1em}#chat main form>ol>li .body p b{color:#cd4b64}#chat main form>ol>li .body p.error{font-size:inherit;line-height:inherit}#chat main form>ol>li .body :first-child{margin-top:0!important}#chat main form>ol>li .body.grow{flex-grow:1}#chat main form>ol>li.operator .photo{flex-shrink:0;flex-basis:40px}#chat main form>ol>li.operator .body{background-color:#fff;margin-left:10px}#chat main form>ol>li.operator .body:before{border-color:transparent transparent #fff transparent;border-width:0 0 20px 20px;left:-10px}#chat main form>ol>li.operator .body .loading,#chat main form>ol>li.operator .body .loading:after,#chat main form>ol>li.operator .body .loading:before{border-radius:50%;width:1em;height:1em;animation-fill-mode:both;animation:loading-dot 1.8s ease-in-out infinite}#chat main form>ol>li.operator .body .loading{margin:-5px auto 15px;font-size:10px;text-indent:-100%;color:#999;position:relative;transform:translateZ(0);animation-delay:-.16s}#chat main form>ol>li.operator .body .loading:after,#chat main form>ol>li.operator .body .loading:before{content:"";position:absolute;top:0}#chat main form>ol>li.operator .body .loading:before{left:-2.25em;animation-delay:-.32s}#chat main form>ol>li.operator .body .loading:after{left:2.25em}#chat main form>ol>li.operator .body.grow{max-width:400px}#chat main form>ol>li.user{justify-content:flex-end}#chat main form>ol>li.user .body{background-color:#fffacd;margin-right:10px}#chat main form>ol>li.user .body:before{border-color:transparent transparent transparent #fffacd;border-width:20px 0 0 20px;right:-10px}#chat main form>ol>li.user .body input{font-size:1.6rem}#chat main form>ol>li.user .body dl{line-height:1.5}#chat main form>ol>li.user .body dl dt{margin-top:10px}#chat main form>ol>li.user .body button{background-color:#ff822d;margin-top:20px;width:80%;min-width:inherit;font-size:2rem}#chat main form>ol>li.user .body button:hover{background-color:#ffa060}#chat main form #btn-submit{background-color:#3ca0fa;padding:10px;position:fixed;right:0;bottom:0;left:0;z-index:8;transform:translateY(100%);transition:transform .25s}#chat main form #btn-submit button{background-color:#ffe14b;width:100%;min-width:inherit;font-size:2rem;color:#3ca0fa}#chat main form #btn-submit button:hover{background-color:#ffea7e}#chat main form #btn-submit.active{transform:translateY(0)}@media (min-width:640px){body{font-size:1.6rem}#chat{padding-bottom:120px}#chat #menu .content{border-left-width:20px;padding-right:20px;padding-left:20px;max-width:600px}#chat main{margin-right:auto;margin-left:auto;max-width:800px;box-sizing:border-box}#chat main form>ol>li{margin-top:20px}#chat main form>ol>li .body{padding:15px;max-width:640px;box-sizing:border-box}#chat main form>ol>li.operator .photo{flex-basis:50px}#chat main form>ol>li.operator .body{margin-left:15px}#chat main form>ol>li.operator .body:before{left:-15px}#chat main form>ol>li.user .body{margin-right:15px}#chat main form>ol>li.user .body:before{right:-15px}#chat main form>ol>li.user .body button{max-width:400px;font-size:2.2rem}#chat main form #btn-submit{padding:15px}#chat main form #btn-submit button{max-width:640px;font-size:2.4rem}}