*,*:before,*:after{box-sizing:border-box}body,html,#app,.app{height:100%}html{margin:0;padding:0}body,main{margin:0;padding:0;width:100%;height:100%;flex:1 1}body{width:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;letter-spacing:.2px;line-height:120%;font-size:16px;font-weight:400;direction:ltr;font-synthesis:none;text-rendering:optimizeLegibility;transition:color .5s,background-color .5s;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:500;line-height:125%}p{font-weight:400;line-height:125%}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}a{font-size:inherit;font-weight:inherit;color:inherit;text-decoration:inherit;background-color:transparent}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:80%;line-height:0;position:relative;vertical-align:baseline}ol,ul{list-style:none;margin:0;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{border:0;padding:0;font-size:inherit;line-height:inherit;color:inherit;text-align:initial}button{background-color:transparent;background-image:none;outline:none}button,[role=button]{cursor:pointer}input:focus,textarea:focus,select:focus{outline:none}input{background-color:transparent}input::placeholder,textarea::placeholder{color:var(--text-3)}textarea{resize:vertical}fieldset{margin:0;padding:0;border:none;outline:none}.h2{font-size:32px;margin-bottom:28px}.h3{font-size:28px;margin-bottom:24px}.h4{font-size:24px;margin-bottom:20px}.h5{font-size:20px;margin-bottom:16px}.h6{font-size:16px;margin-bottom:12px}.subtitle{font-size:16px;margin-bottom:8px}.body,.caption{font-size:12px}.overline{font-size:10px;text-transform:uppercase}.accent{color:#d35400}.capitalize:first-letter{text-transform:uppercase}.layout-wrapper{margin:auto;padding:16px;height:100dvh;width:100%;display:grid;grid-template-rows:1fr max-content;grid-gap:16px;background-color:#fcfcfc}.layout-body{position:relative;display:grid;grid-template-rows:1fr max-content;height:calc(100dvh - 72px)}.layout-footer{position:relative;height:24px}.layout-section{height:100%}.v-enter-active,.v-leave-active{transition:.5s}.v-enter-from,.v-leave-to{opacity:0}.button{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;padding:4px;opacity:.9;transition:.5s;cursor:pointer}.button:focus{outline:none;transition:.5s}.button:hover{opacity:1}.button--shadow:hover{box-shadow:0 2px 5px #00000024,0 2px 10px #0000001a}.button[disabled]{opacity:.5}.control-wrapper{display:flex;justify-content:flex-end}.control-group{display:flex;align-items:center}.control{position:relative;display:flex;align-items:center;justify-content:center;margin-right:4px;width:24px;height:24px;z-index:10000}.control:last-child{margin-right:0}.control--heading{width:auto;flex-wrap:nowrap}.control__heading{margin-right:4px;font-size:16px}.control__tooltip{visibility:collapse;position:absolute;top:-34px;padding:8px 12px;width:max-content;border:1px solid #212121;background-color:#fff;border-radius:4px;opacity:0;font-size:12px;line-height:12px;text-wrap:nowrap;transition:.25s;z-index:10001}.control:hover .control__tooltip{visibility:visible;opacity:1}.input{width:auto;margin:0;resize:none;background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #dde4e6;border-radius:4px;-ms-overflow-style:none;scrollbar-width:none;font-size:12px}.input::-webkit-scrollbar{display:none}.input:after{content:attr(data-value) " ";visibility:hidden;white-space:pre-wrap}.input:focus-within{border:solid 1px #212121}.input::placeholder{opacity:.72}.input--focus{border:solid 1px #212121}.icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:4px}.icon svg{width:100%;height:100%}.image{display:inline-block;width:32px;height:auto;object-fit:contain}.message-list-wrapper{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow-y:hidden}.message-list{height:100%;overflow-y:scroll}.message-list__new-messages{position:absolute;display:block;bottom:0;width:100%;padding:8px 16px;background-color:#fff;border:1px solid #212121;border-radius:8px;text-align:center;cursor:pointer}.message-wrapper{margin-top:8px;font-size:16px}.message{display:grid;grid-template-columns:max-content 1fr;grid-column-gap:12px}.message__avatar{width:28px;height:28px;border-radius:100%;font-size:12px;text-align:center;line-height:28px;background-color:#dde4e6;object-fit:cover}.message__body-wrapper{align-self:center}.message__from{margin-right:12px;font-size:12px;font-weight:500;opacity:.6;cursor:pointer;text-transform:capitalize}.message__body{font-size:12px}.message__smile{display:inline-block;margin:0 4px;vertical-align:middle;width:32px;height:32px}.message-input__typing-wrapper{margin-top:8px;height:12px;font-size:12px}.message-input-wrapper{position:relative;display:flex;width:100%;margin-top:12px}.message-input-wrapper textarea{width:100%;padding:8px 64px 8px 32px}.message-input__control-group{position:absolute;display:flex;bottom:4px;height:24px}.message-input__control-group--left{left:4px}.message-input__control-group--right{right:4px}.message-input__control{height:24px;width:24px}.modal-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:9980;background-color:#fff}.modal{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:8px;border:1px solid #212121;background-color:#fff;box-shadow:0 2px 5px #0000001a,0 2px 10px #00000012;overflow-y:auto;z-index:10000}.modal__body{height:calc(100% - 50px);padding:16px}.modal__controls-wrapper{position:absolute;display:flex;align-items:center;top:8px;right:8px;cursor:pointer;font-weight:700;transition:.5s;z-index:1}.smile-group{margin-bottom:24px}.smile-group__heading:first-letter{text-transform:capitalize}.smile-group__smile-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(24px,1fr));grid-gap:12px}.smile-group__smile{max-width:24px;max-height:24px}.smile{position:relative;width:100%;height:100%}.smile__image{width:100%;max-width:32px;height:auto;object-fit:cover}.online-wrapper{height:100%}.online-group{margin-bottom:16px}.online-group:last-child{margin-bottom:0}.online-group__user{text-transform:capitalize;margin-bottom:4px}.danger{color:#e91e63}.success{color:#16a085}