.chat-sidebar{position:fixed;opacity:0;z-index:600;bottom:0;right:0;width:100%;height:100%;background-color:#eceff1;transform:translate3d(0,100%,0);transition:.2s transform,.2s opacity}@media only all and (min-width:640px){.chat-sidebar{width:40%;min-width:500px;box-shadow:0 0 20px rgba(0,0,0,.5),0 0 0 100vw rgba(0,0,0,.3)}}@media only all and (min-width:640px) and (min-height:700px){.chat-sidebar{height:80%}}.chat-sidebar--visible{opacity:1;transform:translate3d(0,0,0)}.chat-wrapper{display:flex;flex-flow:column;position:relative;box-sizing:border-box;width:100%;height:100%;max-width:800px;margin:0 auto}.chat-header{flex:0 0 auto;padding:.5em 1em;background-color:#009dc8;position:relative}.chat-header h3{color:#fff;margin:0}.chat-header__close{display:block;position:absolute;z-index:10;top:-.25em;right:0;width:1.75em;height:1.75em;text-align:center;line-height:1.75em;font-size:2em;color:rgba(255,255,255,.5);cursor:pointer;border-radius:50%;background:#009dc8;transition:.2s color,.2s box-shadow}
.chat-header__close::before{content:"\D7"}.chat-header__close:hover{color:#fff;box-shadow:0 0 10px -3px #222}.msg-list{flex:1 1 auto;box-sizing:border-box;overflow:auto;width:100%;height:calc(100vh - 4.5em);padding:1em}.msg{font:1em/1.4 Roboto;display:flex;flex-flow:row wrap-reverse}.msg--me{flex-flow:row-reverse wrap-reverse}.msg__box{position:relative;flex:0 0 auto;max-width:70%;background-color:#fff;border-radius:.5em;padding:.4em .75em;font-size:.9em;margin:.25em 0;box-shadow:1px 1px 2px -1px rgba(0,0,0,.5)}.msg--me .msg__box{background-color:#c9e4fb}.msg--bot .msg__box::before{content:"";display:block;position:absolute;width:0;height:0;border:.8em solid transparent;border-top-color:#fff;left:-.8em}.msg__avatar{width:42px;flex:0 0 auto;margin-right:1.5em}.msg__avatar img{width:100%;height:auto}.msg__time{flex:0 0 auto;align-self:center;font-size:.8em;opacity:.3;margin:.5em 0 .5em 1.5em;white-space:nowrap}
.msg--me .msg__time{margin:.5em 1.5em .5em 0}.msg--bot+.msg--bot .msg__avatar img{opacity:0}.msg--bot+.msg--bot .msg__box::before{border:0}.msg--bot+.msg--me,.msg--me+.msg--bot{margin-top:.75em}.msg p{margin:.25em 0}.chat-input{flex:0 0 auto;box-sizing:border-box;width:100%;padding:.2em 1em .2em 1em}.chat-input input{box-sizing:border-box;width:100%;padding:.5em}.chat-input .someone-is-typing{font:.8em/1.4 Roboto,sans-serif;height:1.4em;padding:.2em 0}.chat-input .someone-is-typing[data-username]{color:rgba(0,0,0,.5)}.chat-input .someone-is-typing[data-username]::before{content:attr(data-username);font-weight:bold}.chat-input .someone-is-typing[data-username]::after{content:" is aan het typen..."}@media(max-width:480px){.msg__box{max-width:80%}.msg__avatar{display:none}}.msg-list::-webkit-scrollbar{height:16px;overflow:visible;width:16px}.msg-list::-webkit-scrollbar-button{height:0;width:0}.msg-list::-webkit-scrollbar-track{background-clip:padding-box;border:solid transparent;border-width:0 0 0 4px}
.msg-list::-webkit-scrollbar-track:horizontal{border-width:4px 0 0}.msg-list::-webkit-scrollbar-track:hover{background-color:rgba(0,0,0,.05);box-shadow:inset 1px 0 0 rgba(0,0,0,.1)}.msg-list::-webkit-scrollbar-track:horizontal:hover{box-shadow:inset 0 1px 0 rgba(0,0,0,.1)}.msg-list::-webkit-scrollbar-track:active{background-color:rgba(0,0,0,.05);box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07)}.msg-list::-webkit-scrollbar-track:horizontal:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.07)}.msg-list::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);background-clip:padding-box;border:solid transparent;border-width:1px 1px 1px 6px;min-height:28px;padding:100px 0 0;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07)}.msg-list::-webkit-scrollbar-thumb:horizontal{border-width:6px 1px 1px;padding:0 0 0 100px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.07)}.msg-list::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.4);box-shadow:inset 1px 1px 1px rgba(0,0,0,.25)}
.msg-list::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,0.5);box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35)}.msg-list{scrollbar-base-color:#ddd;scrollbar-track-color:#fff;scrollbar-arrow-color:#ddd;scrollbar-shadow-color:#ccc}