@import "https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&display=swap";*{box-sizing:border-box;outline:none;margin:0;padding:0;font-family:Outfit,sans-serif}html{font-size:50%}.container{background-color:#131927;place-items:center;width:100%;height:100vh;display:grid}@media (width<=500px){html{font-size:40%}}.chat-app{width:100%;height:100vh;display:flex}.chat-list{background-color:#0d111a;flex-direction:column;row-gap:1rem;width:30%;height:100%;padding:1rem;display:flex}.close-list{visibility:hidden}.chat-list-header{color:#7b8ebc;justify-content:space-between;align-items:center;width:100%;padding:2rem 1rem;display:flex}.chat-list-header h2{text-transform:uppercase;font-family:"Exo 2",sans-serif;font-size:2rem}.chat-list-header i{cursor:pointer;font-size:2.5rem}.chat-list-item{background-color:#131927;border-radius:.5rem;justify-content:space-between;align-items:center;width:100%;height:6rem;padding:.5rem 1rem;display:flex;box-shadow:0 .5rem .5rem #0000001a}.chat-list-item.active{background:linear-gradient(135deg,#f42f5f,#8e25bf)}.chat-list-item h4{color:#ddd;font-size:1.6rem;font-weight:300}.chat-list-item.active h4{color:#fff}.chat-list-item i{color:#f42f5f;cursor:pointer;font-size:2.5rem}.chat-window{flex-direction:column;width:70%;height:100%;display:flex;position:relative}.chat-title{background-color:#0d111a;justify-content:space-between;align-items:center;width:100%;min-height:8rem;padding-right:2rem;display:flex}.chat-title h3{text-transform:uppercase;color:#fff;font-family:"Exo 2",sans-serif;font-size:2rem}.arrow{color:#7b8ebc;cursor:pointer;font-size:4rem;transform:rotate(180deg)}.chat{flex-direction:column;flex-grow:1;row-gap:4rem;width:100%;padding:1rem;display:flex;overflow-y:auto}.chat::-webkit-scrollbar{display:none}.prompt,.response{color:#fff;max-width:80%;padding:2rem;font-size:1.6rem;box-shadow:0 1rem 3rem #0000001a}.prompt{text-align:right;background:linear-gradient(135deg,#f42f5f,#8e25bf);border-radius:3rem 0 3rem 3rem;align-self:flex-end}.response{text-align:left;background:linear-gradient(135deg,#fe8d5c,#fe4d57);border-radius:0 3rem 3rem;align-self:flex-start}.prompt span,.response span{margin-top:.5rem;font-family:"Exo 2",sans-serif;font-size:1.4rem;display:block}.typing{color:#7b8ebc;margin-top:auto;margin-bottom:-3rem;font-family:"Exo 2",sans-serif;font-size:1.6rem}.msg-form{background-color:#161c2c;align-items:center;width:100%;min-height:10rem;padding-right:5rem;display:flex;box-shadow:0 -.2rem .5rem #0000001a}.msg-form i{color:#7b8ebc;cursor:pointer;font-size:2.5rem}.emoji{justify-content:center;width:10rem;display:flex}.msg-input{color:#7b8ebc;background-color:#0000;border:none;flex-grow:1;height:100%;font-size:1.8rem}.msg-input::placeholder{color:#7b8ebc;font-size:1.8rem;font-weight:300}.msg-input:focus::placeholder{opacity:0}.emoji-picker-container{z-index:1000;border-radius:1rem;position:absolute;bottom:11rem;left:2rem;overflow:hidden;box-shadow:0 1rem 3rem #0006}@media (width<=900px){.chat-app{flex-direction:column}.chat-list{width:40%;height:100%;position:fixed;top:0;left:0;transform:translate(-100%)}.chat-list.show{z-index:1000;transform:translate(0)}.chat-window{width:100%}.chat-title h3{padding-left:5rem}.chat-title i.bx-menu{color:#fff;cursor:pointer;padding-left:1rem;font-size:3rem;display:block;position:absolute}.close-list{visibility:visible}}@media (width<=500px){.chat-list{width:60%}.emoji-picker-container{left:1rem}.close-list{visibility:visible}}.start-page{place-items:center;width:100%;height:100%;display:grid}.start-page-btn{color:#eee;text-transform:uppercase;letter-spacing:.1rem;text-shadow:0 1rem 2rem #0003;cursor:pointer;background:linear-gradient(135deg,#f42f5f,#8e25bf);border:none;border-radius:1rem;width:35rem;height:15rem;font-family:"Exo 2",sans-serif;font-size:7rem;font-weight:700;transition:transform .1s;box-shadow:0 2rem 5rem #0003}.start-page-btn:active{transform:scale(.98)}