body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}#app{height:100%;width:100%;max-width:400px;max-height:600px;margin:auto;box-shadow:0 0 4px rgba(0,0,0,.25);border:4px solid #efefef}@media screen and (max-width:400px){#app{padding:0;max-height:none;max-width:none;box-shadow:none;border:none}}@media screen and (max-height:600px){#app{padding:0;max-height:none;max-width:600px;box-shadow:none;border:none}}body,html{height:100%}body{box-sizing:border-box;font-family:Arial,Helvetica,sans-serif;line-height:1.25;margin:0}*,:after,:before{box-sizing:inherit}button,input,select,textarea{font-family:inherit;outline-width:0}.chat{height:100%;width:100%;position:relative;background-color:#fff}.chat:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:url(/static/img/background.d6bf3c2.jpg);opacity:.3}.chat>.chat_form,.chat>.chat_messages{padding:1rem}.chat>.chat_messages{overflow-y:auto;padding-bottom:0;height:calc(100% - 85px)}.chat-messages{height:100%;position:relative}.chat-messages>.chat-messages_empty{position:absolute;top:50%;left:0;right:0;text-align:center;font-weight:700}.messages-enter-active,.messages-leave-active{-webkit-transition:all .5s;transition:all .5s}.messages-enter,.messages-leave-to{opacity:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.chat-message{padding:.5rem;margin-bottom:1rem;position:relative;background-color:#fff;border-radius:.5rem;box-shadow:0 0 .4rem rgba(0,0,0,.25);font-size:.9rem;line-height:1.2rem}.chat-message>.chat-message_user{margin-bottom:.5rem;font-weight:700;color:#2881b9}.is-me.chat-message>.chat-message_user{color:red}.chat-message>.chat-message_text{word-wrap:break-word}.chat-message>.chat-message_time{padding:.5rem;position:absolute;top:0;right:0;color:gray}.chat-message>.chat-message_error{text-align:right;color:red;font-size:.75rem}.chat-message:after,.chat-message:before{content:" ";position:absolute;width:0;height:0;top:1.5rem;border:1rem solid #fff;border-color:#fff transparent transparent}.chat-message:before{border-top-color:gray}.chat-message.is-server{margin-left:2rem}.chat-message.is-server:after,.chat-message.is-server:before{left:-1rem}.chat-message.is-server:before{margin-left:-1px}.chat-message.is-me{margin-right:2rem}.chat-message.is-me:after,.chat-message.is-me:before{right:-1rem}.chat-message.is-me:before{margin-right:-1px}.chat-form{position:absolute;left:0;right:0;bottom:0;padding:1rem;background-color:rgba(0,0,0,.25)}.chat-form>.chat-form_icon-pen{margin:.55rem;position:absolute;right:1rem;height:1.2rem;color:#d3d3d3;opacity:.6}@media screen and (min-width:400px){.chat-form>.chat-form_icon-pen{display:none;opacity:0}}.chat-form>.chat-form_message{position:relative;margin-top:-12px;font-size:.8rem;color:#fff;line-height:1rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chat-form>.chat-form_button,.chat-form>.chat-form_input{display:inline-block;margin:0;padding:.5rem;font-size:1rem;line-height:1.25rem;border:1px solid #69b1de;box-shadow:0 0 .25rem rgba(0,0,0,.25)}.chat-form>.chat-form_input{width:calc(100% - 8rem);color:gray;border-right:none;-webkit-transition:.5s;transition:.5s}@media screen and (max-width:400px){.chat-form>.chat-form_input{width:calc(100% - 3rem)}}.chat-form>.chat-form_button{width:8rem;border-left:none;background-color:#2881b9;color:#fff;border-color:#2881b9;-webkit-transition:.5s;transition:.5s}@media screen and (max-width:400px){.chat-form>.chat-form_button{text-indent:-100rem;width:3rem}}.chat-form>.chat-form_button:disabled{background-color:#69b1de;border-color:#69b1de}.chat-form>.chat-form_button:not([disabled]){cursor:pointer}