.app{background-color:hsla(0,5%,53%,.274);display:grid;grid-template-columns:20% 55% 25%;height:100vh;overflow:hidden}.canvasContainer{background:linear-gradient(145deg,#cacaca,#f0f0f0);border-radius:20px;box-shadow:21px 21px 43px #5a5a5a,-21px -21px 43px #fff;height:90vh;margin-right:3rem;margin-top:5vh;position:relative}.menu{color:#800031;cursor:pointer;display:none;left:2rem;position:absolute;top:2rem;z-index:2}.chatArea{border-left:1px solid hsla(0,0%,50%,.301);border-right:1px solid hsla(0,0%,50%,.363);box-sizing:border-box;display:grid;grid-template-rows:80% 5% 15%;height:90vh;margin:2rem;position:relative}.chatInput{align-items:center;display:flex;gap:3px;padding:1rem;position:relative}.actions{display:flex;gap:1rem;justify-content:center}.actions button{border:1px solid #800031;border-radius:20px;color:#800031}.actions button:hover{background-color:#800031;color:#cacaca}.mic,.send{color:#800031;cursor:pointer}.textAreaContainer{bottom:-2rem;display:flex;height:4rem;justify-content:center;padding:0;width:100%}.chat{grid-gap:3px;-ms-overflow-style:none;display:grid;gap:3px;grid-template-columns:auto;height:100%;overflow-y:scroll;scrollbar-width:none;width:100%}.chat::-webkit-scrollbar,textarea::-webkit-scrollbar{display:none}.sent{background-color:#800031;border-radius:20px 20px 0 20px;justify-self:right;margin-right:4px;text-align:right}.received,.sent{color:#fff;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;max-width:50%;padding:1rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.received{background-color:#c07d9a;border-radius:20px 20px 20px 0;justify-self:left;margin-left:4px}.characterContainer h1{color:#800031;font-size:2rem;margin-left:auto;margin-right:auto;margin-top:2rem;text-align:center;width:90%}.characterSwitch{align-items:center;display:flex;flex-direction:column;gap:15px}.characterSwitch button{background-color:initial;border:none;color:#c07d9a;font-size:2rem;outline:none}.characterSwitch button:hover{color:#800031}.logout{margin-top:3rem}.activeCharacter{color:#800031!important}.dot{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:load;animation-name:load;-webkit-animation-timing-function:cubic-bezier(.36,.35,.43,.46);animation-timing-function:cubic-bezier(.36,.35,.43,.46);background-color:#fff;border-radius:50%;display:block;height:4px;margin:2px;width:4px}.dotContainer{align-items:center;background-color:#c07d9a;border-radius:20%;display:flex;height:1rem;justify-content:center;margin-left:1rem;margin-top:3px;padding:4px;width:2rem}@-webkit-keyframes load{0%{-webkit-transform:translateY(0);transform:translateY(0)}25%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}75%{-webkit-transform:translateY(2px);transform:translateY(2px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes load{0%{-webkit-transform:translateY(0);transform:translateY(0)}25%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}75%{-webkit-transform:translateY(2px);transform:translateY(2px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}.two{-webkit-animation-delay:.3s;animation-delay:.3s}.three{-webkit-animation-delay:.5s;animation-delay:.5s}.svgContainer{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:listen;animation-name:listen;height:2rem;width:2rem}@-webkit-keyframes listen{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.5);transform:scale(1.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes listen{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.5);transform:scale(1.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@media screen and (max-width:650px){.app{grid-template-columns:auto;grid-template-rows:40% 50%}.characterContainer{background-color:#cecdcd;height:100vh;overflow:hidden;position:fixed;transition:all .3s;width:0;z-index:3}.menuOpen{width:300px}.canvasContainer{grid-row:1;height:100%;margin:1rem}.chatArea{height:100%}.menu{display:block}}
/*# sourceMappingURL=main.6ae1147d.css.map*/