@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@200;400&display=swap");:root{--foreground-rgb:0,0,0;--background-start-rgb:214,219,220;--background-end-rgb:255,255,255}*{box-sizing:border-box;font-family:Barlow,sans-serif;font-size:1.15rem}@media (prefers-color-scheme:dark){:root{--foreground-rgb:255,255,255;--background-start-rgb:0,0,0;--background-end-rgb:0,0,0}}body{height:100vh;background:#98d1f4;background:linear-gradient(212deg,#98d1f4,#a2a2d4)}.chat ::-webkit-scrollbar{width:7px;height:90%}nav{height:75px;padding:1rem 3rem;display:flex;gap:1.5rem}nav a{font-size:1.3rem;font-weight:700;color:#fff;letter-spacing:1px;cursor:pointer;position:relative;text-decoration:none}nav a:after{content:"";z-index:-1;position:absolute;left:0;top:0;height:100%;width:0;background-color:rgba(58,141,218,.332);transition:width .1s ease-in-out}nav a:hover:after{width:100%}.chat ::-webkit-scrollbar-track{background-color:#f0f0f0;border-radius:7px}.chat ::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:7px}#centeredContainer{margin:0 auto;max-width:900px;width:80%}.chat{position:relative}.settingBox{position:absolute;left:105%;top:0;display:flex;gap:5px}.toggle label{font-size:16px}.optionList>*{margin-block:3px}.optionList span{font-size:16px}.optionList{transform-origin:top center;transform:scaleY(0);transition:transform .1s ease-in-out;position:absolute;inset:0;top:105%;width:150px}.settings .optionList{left:0;right:auto}.dropdownList.expanded .optionList{transform:scaleY(1)}.dropdownToggle{margin-bottom:5px;position:relative}.toggleSlider{width:40px;height:20px;border-radius:10px;background-color:#e2e2e2;position:relative}.toggleSlider:after{width:20px;height:20px;background-color:#fff}.toggleSlider:after,.toggleSlider:before{content:"";border-radius:10px;transition:transform .1s;position:absolute;inset:0}.toggleSlider:before{width:0;background-color:#00ef38}.toggleSlider.on:after{transform:translateX(100%)}.toggleSlider.on:before{width:100%}.styledContainer{display:flex;align-items:center;width:100%;background-color:#e9e9e982;border-radius:5px;justify-content:space-between;padding:.5rem 1rem;transition:background-color .15s,transform .15s;cursor:pointer;font-size:inherit}.styledContainer:hover{background-color:#dcdcdc82;transform:scale(1.03)}.chatArea{display:flex;justify-content:center;align-items:center;background-color:#fff;border-radius:1rem;height:60vh;padding:2rem;box-shadow:0 5px 15px rgba(0,0,0,.25)}.chatDisplay{height:95%;margin:auto;overflow-y:scroll;width:95%;padding-right:.5rem}.userInputField textarea{outline:none;border:none;width:100%;resize:none;padding:1rem;height:20vh;border-radius:10px;margin-top:1rem;box-shadow:0 5px 15px rgba(0,0,0,.25)}.userInputField textarea:focus{box-shadow:0 5px 15px rgba(0,0,0,.25),inset 0 0 10px rgba(0,0,5,.3)}.message{padding:1rem}.message[sender=assistant]{background-color:#f0f0f0}.message:not(:last-child){border-bottom:1px solid #d9d9d9}.message .senderLabel{text-transform:capitalize}.message .messageText{font-size:18px;margin:10px auto}#flagIcon{width:30px;overflow-y:hidden;border-radius:50%}.optionBar{margin-top:1rem;display:flex;gap:1rem}.styledButton{padding:.25rem 1rem;border-radius:.7rem;border:none;color:#fff;background-color:#5f5fda;box-shadow:0 3px 8px rgba(0,0,0,.24);cursor:pointer}.styledButton:hover{background-color:#4a4acd}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1;animation:fadeIn .5s ease-out forwards}.big-red-button{background:#db4137;padding:.25rem 1rem;border-radius:.7rem;border:none;color:#fff;width:20vw;height:10vh;box-shadow:0 3px 8px rgba(0,0,0,.24);cursor:pointer}.popup{background-color:#fff;padding:20px;border-radius:10px;width:75vw;box-shadow:0 0 10px rgba(0,0,0,.3);color:#fff;background:#98d1f4;background:linear-gradient(212deg,#98d1f4,#a2a2d4);animation:slideIn .5s ease-out forwards;animation-timing-function:ease-in-out}@keyframes slideIn{0%{transform:translateY(300px);opacity:0}to{transform:translateY(0);opacity:1}}.tempMsg .messageText{position:relative}.tempMsg .messageText:after{content:"";position:absolute;inset:0;height:100%;width:3rem;transform-origin:right;background-color:#fff;animation:talking 2s infinite forwards}@keyframes talking{0%{transform:scaleX(100%)}to{transform:scaleX(0)}}@media only screen and (max-width:1310px){.languageDropdown{left:0;top:-8%;width:100%;display:flex;overflow-x:scroll;overflow-y:hidden}.languageDropdown .styledContainer{margin:0}.chat{margin-top:3rem}.currentOption{margin-right:1rem;width:3rem}.optionList{width:100%;display:flex;gap:10px}}