.app{display:flex;justify-content:center}.app .mockup{-webkit-user-select:none;user-select:none;width:100vw;max-width:125rem}.app .backdrop{position:fixed;width:100vw;height:100vh;top:0;left:0;background-color:#0000004d;z-index:1;opacity:0;-webkit-user-select:none;user-select:none;visibility:hidden;transition:all .5s ease-out}.app .backdrop--visible{opacity:1;-webkit-user-select:all;user-select:all;visibility:visible}.app .chat-btn{background-image:linear-gradient(#5f0ad3,#2f98e0);height:6.5rem;width:6.5rem;border-radius:100rem;display:grid;align-items:center;justify-items:center;position:fixed;bottom:2.5rem;right:2.5rem;cursor:pointer;box-shadow:0 0 1.8rem #0000004d;transition:all .2s ease-out}.app .chat-btn__icon{width:3rem;transition:all .2s ease-out}.app .chat-btn:hover,.app .chat-btn:hover .chat-btn__icon{transform:scale(1.05) rotate(2deg)}.app .chat-btn:active{opacity:.8;transform:scale(1) rotate(0)}.app .chat-btn:active .chat-btn__icon{transform:scale(1) rotate(0)}.chat{-webkit-user-select:none;user-select:none;opacity:50%;visibility:hidden;z-index:10;position:fixed;right:2rem;bottom:0;width:55rem;background-color:#fefefe;border-top-right-radius:.5rem;border-top-left-radius:.5rem;transform:translateY(80vh);box-shadow:0 0 1.8rem #0000004d;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:grid;grid-template-columns:1fr;grid-template-rows:8rem 55vh max-content;overflow:hidden;padding-bottom:10rem}.chat--visible{transform:translateY(10rem);visibility:visible;opacity:1;-webkit-user-select:auto;user-select:auto}.chat__header{background-color:#750fff;color:#fefefe;padding:2rem;display:flex;align-items:center;font-size:2rem;justify-content:space-between;-webkit-user-select:none;user-select:none}.chat__header img{cursor:pointer}.chat__body{padding:2rem 2rem 5rem;display:flex;flex-direction:column;align-items:stretch;justify-items:start;gap:1rem;overflow:scroll}.chat__body .chat-element{display:grid;grid-template-columns:3.5rem minmax(min-content,1fr) 3.5rem;grid-template-rows:max-content;justify-items:start;gap:1rem;animation:moveIn .5s ease-out;animation-fill-mode:backwards}.chat__body .chat-element p{grid-column:2/3}.chat__body .chat-element--typing{align-items:center;animation-delay:.5s}.chat__body .chat-element--user{justify-items:end}.chat__body .chat-element--user img{order:3}.chat__body .chat-element__pic{width:3.5rem;border-radius:100rem;-webkit-user-select:none;user-select:none}.chat__body .chat-element__message{border-radius:.5rem;padding:1rem;background-color:#f2f2f2}.chat__body .chat-element__message--user{background-color:#750fff;color:#fefefe}.chat__body .chat-element__typing{color:#a6a6a6;-webkit-user-select:none;user-select:none}.chat__footer{padding:2rem;display:grid;align-items:center;background-color:#fefefe}.chat__new-message{display:grid;grid-template-columns:1fr min-content;grid-template-rows:max-content;align-content:stretch;align-items:center;background-color:#f2f2f2;padding:.5rem;border-radius:3rem}.chat__new-message__input{margin:1rem;font-size:1.6rem;border:none;background-color:transparent;outline:none;resize:none;height:2rem;max-height:10rem;font-family:Lato,sans-serif}.chat__new-message__btn{cursor:pointer;background-color:#fefefe;border-radius:100rem;height:4rem;width:4rem;display:flex;justify-content:center;align-items:center;padding-left:.5rem;transition:all .3s ease-out}.chat__new-message__btn__icon{height:2rem;-webkit-user-select:none;user-select:none;transition:all .3s ease-out}.chat__new-message__btn:hover img{transform:translate(.2rem) translateY(-.2rem) rotate(-10deg)}.chat__new-message__btn:active{opacity:50%}.chat__new-message__btn:active img{transform:translate(.4rem) translateY(-.4rem) rotate(-20deg)}.chat__new-message__btn--disabled{cursor:default;opacity:70%}.chat__new-message__btn--disabled img{opacity:60%}.chat__new-message__btn--disabled:hover img{transform:translate(0) rotate(0)}.chat__new-message__btn--disabled:active{opacity:70%}.chat__new-message__btn--disabled:active img{transform:translate(0) rotate(0)}@keyframes moveIn{0%{opacity:0%;transform:translateY(1rem)}to{opacity:100%;transform:translate(0)}}*{margin:0;padding:0;box-sizing:border-box}* ::selection{background-color:#b075ff33}button{background:none;border:none;cursor:pointer;font-family:Lato,sans-serif}html{font-size:62.5%}@media (max-width: 56.25em){html{font-size:50%}}body{font-weight:400;font-size:1.6rem;line-height:1.5;font-family:Lato,sans-serif;color:#0c0c0c;background-color:#fefefe;border-color:#d9d9d9}