@import"https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto&display=swap";*{margin:0;padding:0;box-sizing:border-box}html{font-family:roboto,sans-serif;font-size:16px;--background-color: hsl(227, 72%, 10%);--middleground-color: hsl(241, 53%, 22%);--foreground-color: hsl(231, 27%, 45%);--highlight-color: hsl(242, 30%, 66%);--text-muted: hsl(0, 0%, 85%);--text-sharp: hsl(0, 0%, 95%);--notification-color: hsl(0, 73%, 59%);--large-shadow: 0px 0px 10px 0px black;--small-shadow: 0px 0px 5px 0px black;--background-img-filter: brightness(0) saturate(100%) invert(8%) sepia(17%) saturate(4640%) hue-rotate(205deg) brightness(91%) contrast(105%);--middleground-img-filter: brightness(0) saturate(100%) invert(11%) sepia(19%) saturate(6797%) hue-rotate(228deg) brightness(94%) contrast(103%);--foreground-img-filter: brightness(0) saturate(100%) invert(37%) sepia(17%) saturate(1322%) hue-rotate(194deg) brightness(93%) contrast(88%);--highlight-img-filter: brightness(0) saturate(100%) invert(65%) sepia(15%) saturate(828%) hue-rotate(204deg) brightness(90%) contrast(82%);--text-muted-img-filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(1626%) hue-rotate(237deg) brightness(114%) contrast(70%)}#root{width:100%;min-height:100vh;display:grid;grid-template-rows:min-content 1fr}.errors{list-style:none}header{background-color:var(--background-color);display:flex;justify-content:space-evenly;align-items:center;padding:.5rem 0;position:relative}header>a{text-decoration:none}.banner{display:flex;align-items:center;gap:1rem;position:relative;top:1px}.banner-title{color:var(--text-muted);font-size:1.3rem}header .logo-wrapper{max-width:45px}.logo{width:100%;filter:var(--foreground-img-filter)}header nav button{cursor:pointer;display:flex;align-items:center;background:none;outline:none;border:none;color:var(--text-muted);font-size:1rem}.main-user-username{margin-left:1rem;max-width:8ch;overflow:hidden;text-overflow:ellipsis}header nav button img.default{filter:var(--foreground-img-filter)}header nav button img{width:45px;height:45px;border-radius:50%}.menu-arrow{width:30px;filter:var(--text-muted-img-filter);position:relative}.menu-arrow.rotate{transform:rotate(180deg);top:-1px}.user-menu{position:absolute;background-color:var(--foreground-color);top:90%;right:22%;padding:1rem 1.5rem;display:flex;flex-direction:column;gap:1rem;border-radius:10px;width:max-content;z-index:4}.user-menu a{color:var(--text-muted);text-decoration:none}.user-menu>*:hover{text-decoration:underline}.hidden{display:none}@media only screen and (width <= 400px){.menu-arrow,.main-user-username,.banner-title{display:none}header{padding:.1rem 0}}main.auth-page{background-color:var(--background-color);min-height:100vh;color:var(--text-muted);display:flex;justify-content:center;align-items:center}.auth-modal{background-color:var(--middleground-color);padding:2rem 1.5rem;border-radius:10px;box-shadow:var(--large-shadow);display:flex;flex-direction:column;gap:1.5rem}.auth-modal form{display:flex;flex-direction:column;gap:1.5rem}.auth-modal form>:last-child{display:flex;width:100%;justify-content:center}.auth-modal label{display:block;font-size:clamp(1rem,.5rem + 2vw,1.2rem)}.auth-modal input{outline:none;background-color:var(--background-color);border:3px solid var(--foreground-color);font-size:clamp(1rem,.5rem + 2vw,1.2rem);color:var(--text-muted);border-radius:10px;height:3.5ch;padding:.2rem .5rem}.auth-modal input:focus{background-color:var(--middleground-color);border-color:var(--highlight-color)}.auth-modal button{cursor:pointer;outline:none;border:none;font-size:clamp(1rem,.5rem + 2vw,1.2rem);font-weight:700;color:var(--background-color);padding:.5rem 1rem;background-color:var(--highlight-color);border-radius:10px;will-change:color;transition:all .2s ease-in-out}.auth-modal button:hover,.auth-modal button:focus{color:var(--middleground-color);background-color:var(--foreground-color)}.auth-modal a{display:block;width:fit-content;color:var(--text-muted);margin:0 auto}.auth-banner{display:flex;width:100%;justify-content:space-around;align-items:center}.auth-banner img{width:55px;filter:var(--background-img-filter)}.auth-title{font-size:2rem}.auth-modal .error{max-width:26ch;word-break:break-word;margin:.5rem 0}main.main-page{width:100%;height:100%;display:grid;grid-template-columns:min(280px,100%) 2fr;position:relative}.sidebar{background-color:var(--background-color);display:flex;flex-direction:column;align-items:center;padding:1rem;border-top:1px solid var(--middleground-color);position:relative}.chat-rooms{display:flex;width:100%;flex-direction:column;gap:.2rem;height:100%}.chat-rooms.hidden{display:none}.chat-btn{cursor:pointer;background:none;outline:none;border:none;display:flex;align-items:center;gap:1rem;width:100%;font-size:1rem;color:var(--text-muted);font-weight:700;border-radius:10px;padding:.3rem}.chat-btn:hover,.chat-btn:focus,.chat-btn.active{background-color:var(--middleground-color)}.chat-btn img{width:100%}.global-img{filter:var(--foreground-img-filter)}.main-pane{width:100%;height:100%;position:relative;background-color:var(--middleground-color)}.friends-pane{position:absolute;width:calc(100vw - 100%);height:100%;background-color:var(--middleground-color);left:100%;top:0;z-index:2;display:flex;flex-direction:column;align-items:center;padding:1rem 0}.friends-pane.hidden{display:none}.pane-toggle{display:none;gap:1rem;padding:1rem 0 2rem;margin-bottom:1rem;border-bottom:1px solid var(--middleground-color);width:100%;justify-content:center}.pane-toggle button{cursor:pointer;outline:none;border:none;font-size:1rem;font-weight:700;background-color:var(--middleground-color);padding:.6rem 1.1rem;color:var(--text-muted);border-radius:10px}.pane-toggle button.active{background-color:var(--foreground-color)}.pane-toggle button:not(.active):hover{background-color:var(--highlight-color)}.add-chat-btn-wrapper{display:flex;justify-content:center}.add-chat-btn-wrapper button{cursor:pointer;font-size:1.1rem;font-weight:700;background:none;outline:none;border:none;color:var(--text-muted);padding:.5rem 1rem}.add-chat-btn-wrapper button:hover,.add-chat-btn-wrapper button:focus{text-decoration:underline}.user-chats{display:flex;flex-direction:column;gap:.2rem;height:100%;overflow:auto;scroll-behavior:smooth;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--foreground-color) #00000000}@media only screen and (width <= 600px){.main-pane{position:static}main.main-page{grid-template-columns:1fr min-content}.friends-pane{width:100%;position:relative;left:0;background-color:var(--background-color)}.pane-toggle{display:flex}}.loading-main{background-color:var(--middleground-color);display:flex;justify-content:center;align-items:start;padding-top:15%}.loading-wrapper{display:flex;width:200px;position:relative}.loading{color:var(--middleground-color);font-size:2rem;font-weight:700;position:absolute;left:5%;right:0;width:fit-content;margin:0 auto;top:35%;animation-name:blink;animation-timing-function:linear;animation-duration:3s;animation-iteration-count:infinite}.loading-img{width:100%;filter:var(--background-img-filter)}@keyframes blink{0%{color:var(--foreground-color)}30%{color:var(--foreground-color)}92%{color:var(--middleground-color)}to{color:var(--foreground-color)}}.chat-messages{position:absolute;top:0;left:0%;width:100%;height:100%;background-color:var(--middleground-color);display:grid;grid-template-rows:min-content 1fr max-content;z-index:2}.users-wrapper{flex:1;display:flex;justify-content:center;gap:1rem}.users-wrapper>:last-child{transform:rotateY(180deg)}.exit-wrapper{display:flex;width:100%;justify-content:end;align-items:center;padding:1rem}.exit-wrapper button,.status-modal button{cursor:pointer;background:none;border:none;outline:none;display:flex;font-size:1.1rem;font-weight:700;color:var(--highlight-color);padding:.1rem;--filter: var(--foreground-img-filter) }.exit-wrapper button img{width:30px;height:30px;filter:var(--filter)}.exit-wrapper button:hover{--filter: var(--highlight-img-filter) }textarea#message{width:100%;min-height:3rem;max-height:17.1rem;font-size:1rem;outline:none;background-color:var(--background-color);border:1px solid var(--foreground-color);resize:none;color:var(--text-muted);field-sizing:content;word-break:break-word;padding:.8rem .5rem;border-radius:10px;font-family:roboto;line-height:1.5rem;scrollbar-width:thin;scrollbar-color:var(--foreground-color) #00000000;scrollbar-gutter:stable;scroll-behavior:smooth}textarea#message::placeholder{color:var(--text-muted);opacity:.5}.chat-messages form{margin:1rem;overflow:hidden}.messages{display:flex;flex-direction:column;gap:.5rem;overflow:auto;scrollbar-width:thin;scrollbar-gutter:stable;scrollbar-color:var(--foreground-color) var(--middleground-color);padding:.5rem;align-items:center;scroll-behavior:smooth}.status-modal{position:absolute;top:3%;left:1rem;background-color:var(--foreground-color);width:75%;display:flex;justify-content:space-between;align-items:center;padding:.2rem .2rem .2rem .5rem;color:var(--background-color)}.status-modal.hidden{display:none}.status-modal button{--filter: var(--background-img-filter)}.status-modal button:hover{--filter: var(--middleground-img-filter) }.status-modal button img{width:20px;filter:var(--filter)}@media only screen and (width <= 400px){.messages{padding:.5rem 0}}.msg-card{display:flex;padding:.5rem;color:var(--text-muted);width:min(800px,100%);gap:.5rem;border-radius:10px;align-items:start;font-size:clamp(.9rem,.5rem + 2vw,1rem)}.msg-card:hover,.msg-card:focus{background-color:var(--background-color)}.msg-content{flex:1}.msg-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem}.msg-author{display:flex;align-items:end;gap:.5rem;position:relative;cursor:pointer;--text-underline: none}.msg-author:hover,.msg-author:focus{--text-underline: underline}.msg-profile-wrapper{width:45px;height:45px;border-radius:50%;overflow:hidden;display:flex;cursor:pointer}.msg-profile{width:100%}.msg-profile.default{filter:var(--highlight-img-filter)}.msg-username{font-weight:700;max-width:clamp(6ch,4ch + 20vw,50ch);overflow:hidden;text-overflow:ellipsis;text-decoration:var(--text-underline)}.options-modal{position:absolute;top:0%;left:0;right:0;width:fit-content;margin:0 auto;background-color:var(--highlight-color);padding:1rem;border-radius:10px;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1rem}.options-modal.hidden{display:none}.options-modal button{cursor:pointer;background:none;outline:none;border:none;font-size:1rem;font-weight:700;color:var(--background-color);width:max-content}.options-modal button:hover,.options-modal button:focus{text-decoration:underline}.msg-date{font-size:.8rem;opacity:.8}.msg-text{max-width:100%;word-break:break-word}.msg-edit-btns{display:flex;gap:1rem}.msg-edit-btns button{cursor:pointer;outline:none;border:none;background:none;max-width:20px;--filter: var(--foreground-img-filter) }.msg-edit-btns button img{width:100%;filter:var(--filter)}.msg-edit-btns button:hover,.msg-edit-btns button:focus{--filter: var(--highlight-img-filter) }.msg-text-editing{background-color:var(--background-color);border:1px solid var(--foreground-color);border-radius:10px;padding:.5rem;color:var(--text-muted);font-size:clamp(.9rem,.5rem + 2vw,1rem);font-family:roboto,sans-serif;field-sizing:content;width:100%;word-break:break-word;resize:none;outline:none;max-height:17.1rem;scrollbar-width:thin;scroll-behavior:smooth;scrollbar-gutter:stable;scrollbar-color:var(--foreground-color) #00000000}@media only screen and (width <= 400px){.msg-username{max-width:clamp(6ch,4ch + 8vw,10ch)}}.chat-users-modal{position:absolute;width:min(600px,90%);height:70%;background-color:var(--foreground-color);z-index:1;left:0;right:0;top:10%;margin:0 auto;border-radius:10px;box-shadow:var(--large-shadow)}.chat-users-modal .exit-wrapper button{background-color:var(--middleground-color);border-radius:10px}.chat-users-modal .exit-wrapper button:hover{background-color:var(--background-color)}.chat-users-modal .chat-users{padding:.5rem;height:calc(100% - 92px);scroll-behavior:smooth;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--middleground-color) #00000000;overflow:auto}.chat-users-modal .loading-main{margin-top:.5rem;min-height:calc(100% - 98px)}.chat-users-title{text-align:center;font-weight:700;font-size:1.5rem;color:var(--text-muted);letter-spacing:.02rem}.chat-user{display:flex;align-items:center;gap:.5rem;cursor:pointer;border-radius:10px;padding:.5rem 1rem;background-color:var(--foreground-color);position:relative}.chat-user:hover,.chat-user:focus{background-color:var(--middleground-color)}.chat-user-profile-wrapper{width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;flex-basis:40px;flex-shrink:0}.chat-user-profile-wrapper img{width:100%}.chat-user-profile-wrapper img.default{filter:var(--background-img-filter)}.chat-user-username{color:var(--text-muted);font-weight:700;max-width:clamp(15ch,10ch + 58vw,50ch);overflow:hidden;text-overflow:ellipsis}.friends-modal{position:absolute;width:min(600px,90%);height:70%;background-color:var(--foreground-color);z-index:1;left:0;right:0;top:10%;margin:0 auto;border-radius:10px;box-shadow:var(--large-shadow);z-index:3}.friends-modal .exit-wrapper button{background-color:var(--middleground-color);border-radius:10px}.friends-modal .exit-wrapper button:hover{background-color:var(--background-color)}.friend-cards{padding:.5rem;height:calc(100% - 160px);overflow:auto;scrollbar-width:thin;scroll-behavior:smooth;scrollbar-gutter:stable;scrollbar-color:var(--middleground-color) #00000000}.submit-btn-wrapper{display:flex;justify-content:end;padding:1rem}.submit-btn-wrapper button{cursor:pointer;background-color:var(--middleground-color);font-size:1rem;font-weight:700;padding:.5rem 1rem;border:none;outline:none;border-radius:10px;color:var(--foreground-color)}.submit-btn-wrapper button:hover,.submit-btn-wrapper button:focus{background-color:var(--background-color);color:var(--highlight-color)}.friends-modal .loading-main{height:calc(100% - 132px)}.friends-modal-title{color:var(--text-muted);font-weight:700;font-size:1.5rem;text-align:center;letter-spacing:.02rem}.user-choice-card{display:flex;align-items:center;gap:.5rem;cursor:pointer;border-radius:10px;padding:.5rem 1rem;background-color:var(--foreground-color);position:relative}.user-choice-card:hover,.user-choice-card:focus{background-color:var(--middleground-color)}.choice-card-profile-wrapper{width:40px;height:40px;display:flex;flex-basis:40px;flex-shrink:0;border-radius:50%;overflow:hidden}.choice-card-profile-wrapper img{width:100%}.choice-card-profile-wrapper img.default{filter:var(--background-img-filter)}.choice-card-username{color:var(--text-muted);font-weight:700;max-width:clamp(15ch,6ch + 32vw,50ch);overflow:hidden;text-overflow:ellipsis}.choice-card-info{display:flex;align-items:center;width:100%;justify-content:space-between}.selected{width:30px;height:30px;border:2px solid var(--text-muted);border-radius:10px}.selected.img-active{background-color:var(--middleground-color)}.selected img{width:100%;filter:var(--text-muted-img-filter)}.incoming-requests,.sent-requests,.friends-list{display:flex;flex-direction:column;gap:.5rem;width:min(100%,800px);padding:.5rem}.incoming-para,.sent-para,.friends-para{color:var(--text-muted);font-size:1.1rem;font-weight:700;letter-spacing:.02rem}.status-modal-2{position:absolute;top:3%;left:1rem;background-color:var(--foreground-color);width:75%;display:flex;justify-content:space-between;align-items:center;padding:.2rem .2rem .2rem .5rem;color:var(--background-color)}.status-modal-2.hidden{display:none}.status-modal-2 button{--filter: var(--background-img-filter);display:flex;background:none;outline:none;border:none;cursor:pointer}.status-modal-2 button:hover{--filter: var(--middleground-img-filter) }.status-modal-2 button img{width:20px;filter:var(--filter)}.friend-request{display:flex;justify-content:space-between;align-items:center;width:100%;border-radius:10px;padding:.5rem 1rem;gap:.5rem}.friend-request:hover{background-color:var(--middleground-color)}.request-profile-wrapper{max-width:40px;max-height:40px;display:flex}.request-profile-wrapper img{width:100%}.request-profile-wrapper .default{filter:var(--highlight-img-filter)}.request-user{display:flex;align-items:center;gap:.2rem;color:var(--text-muted)}.request-username{overflow:hidden;text-overflow:ellipsis;font-weight:700;max-width:clamp(10ch,6ch + 30vw,40ch)}.request-options{display:flex;align-items:center;gap:.5rem}.request-options button{cursor:pointer;outline:none;border:none;background:none;width:27px;--filter: var(--foreground-img-filter);display:flex;border-radius:50%;padding:.1rem}.request-options button:hover,.request-options button:focus{--filter: var(--highlight-img-filter);background-color:var(--background-color)}.request-options button img{filter:var(--filter)}@media only screen and (width > 600px){.request-options button:hover,.request-options button:focus{--filter: var(--highlight-img-filter);background-color:var(--middleground-color)}.friend-request:hover{background-color:var(--background-color)}}.friend{display:flex;justify-content:space-between;align-items:center;width:100%;border-radius:10px;padding:.5rem 1rem;gap:.5rem}.friend:hover{background-color:var(--middleground-color)}.friend-profile-wrapper{max-width:40px;max-height:40px;display:flex;border-radius:50%;overflow:hidden}.friend-profile-wrapper img{width:100%}.friend-profile-wrapper .default{filter:var(--highlight-img-filter)}.friend-user{display:flex;align-items:center;gap:.2rem;color:var(--text-muted)}.friend-username{overflow:hidden;text-overflow:ellipsis;font-weight:700;max-width:clamp(10ch,6ch + 30vw,40ch)}.friend-options{display:flex;align-items:center;gap:.5rem}.friend-options button{cursor:pointer;outline:none;border:none;background:none;width:27px;--filter: var(--foreground-img-filter);display:flex;border-radius:50%;padding:.1rem}.friend-options button:hover,.friend-options button:focus{--filter: var(--highlight-img-filter);background-color:var(--background-color)}.friend-options button img{filter:var(--filter)}@media only screen and (width > 600px){.friend-options button:hover,.friend-options button:focus{--filter: var(--highlight-img-filter);background-color:var(--middleground-color)}.friend-request:hover{background-color:var(--background-color)}}.chat-info-wrapper{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 61px)}.chat-btn-options{display:flex;gap:.5rem}.chat-btn-options button{cursor:pointer;width:25px;display:flex;background:none;border:none;outline:none;--filter: var(--foreground-img-filter)}.chat-btn-options button:hover,.chat-btn-options button:focus{--filter: var(--highlight-img-filter)}.chat-btn-options button img{filter:var(--filter)}.chat-btn p{max-width:clamp(15ch,10ch + 21vw,60ch);overflow:hidden;text-overflow:ellipsis}.chat-btn .img-wrapper{position:relative;width:45px;height:45px;display:flex}.chat-btn .img-wrapper img{width:100%;height:100%;border-radius:50%;overflow:hidden}.chat-btn .img-wrapper img.default{filter:var(--foreground-img-filter)}.notification-icon{position:absolute;width:20px;height:20px;border-radius:50%;background-color:var(--notification-color);bottom:0;right:0;display:flex;justify-content:center;align-items:center;box-shadow:var(--small-shadow)}.notification-icon>div{width:10px;height:10px;background-color:var(--text-muted);border-radius:50%}.notification-icon.hidden{display:none}@media only screen and (width > 600px){.chat-btn p{max-width:clamp(10ch,5ch + 8vw,60ch)}}.profile-page{background-color:var(--middleground-color);display:flex;flex-direction:column;align-items:center;gap:3rem;padding:4rem 0}.profile-username{font-size:1.5rem;font-weight:700;color:var(--text-muted)}.profile-info{display:flex;align-items:center;flex-wrap:wrap;width:100%;justify-content:center;gap:6rem}.profile-img-wrapper{width:250px;height:250px;overflow:hidden;border-radius:50%;box-shadow:var(--large-shadow);display:flex}.profile-img-wrapper img{width:100%;height:100%}.profile-img-wrapper img.default{filter:var(--highlight-img-filter)}.profile-page label{display:block}.profile-page input[type=file]{display:none}.profile-img label[for=image]{cursor:pointer;background-color:var(--highlight-color);color:var(--background-color);padding:1rem;font-weight:700;border-radius:10px;box-shadow:var(--large-shadow);outline:none}.profile-img label[for=image]:hover,.profile-img label[for=image]:focus{color:var(--middleground-color);background-color:var(--foreground-color);box-shadow:none}.profile-img{display:flex;flex-direction:column;align-items:center;gap:2rem}.profile-page button{cursor:pointer;font-size:1rem;font-weight:700;background-color:var(--highlight-color);border:none;outline:none;padding:1rem;border-radius:10px;box-shadow:var(--large-shadow)}.profile-page button:hover,.profile-page button:focus{color:var(--middleground-color);background-color:var(--foreground-color);box-shadow:none}.del-options{display:flex;gap:1rem}.profile-info>form{display:flex;flex-direction:column;gap:1.5rem;color:var(--text-muted);font-size:1.5rem;align-items:center}.profile-info>form input{font-size:1.2rem;font-family:roboto,sans-serif;outline:none;padding:.2rem .5rem;border:2px solid var(--foreground-color);border-radius:10px;color:var(--text-muted);background-color:var(--background-color);box-shadow:var(--large-shadow);height:3.5ch}.profile-info>form input:hover,.profile-info>form input:focus{background-color:var(--middleground-color);border-color:var(--highlight-color);box-shadow:none}.profile-info>form label{font-size:1.2rem;margin-bottom:.3rem;margin-left:.2rem}.profile-info .error{font-size:1.1rem}