body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.modal{opacity:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0006;width:100%;height:100%;animation:.25s forwards fadeIn;position:fixed;top:0;left:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.closeIcon{color:#000;cursor:pointer;padding:.5vw;transition:transform .2s,opacity .2s;position:absolute;top:12px;right:12px}.closeIcon:hover{opacity:.7;transform:rotate(90deg)}.modal-main{opacity:0;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff14;border:1px solid #ffffff1a;border-radius:16px;width:420px;max-width:90%;animation:.25s forwards modalPop;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)scale(.95);box-shadow:0 10px 30px #00000080,inset 0 1px #ffffff0d}@keyframes modalPop{to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.modal-body{flex-direction:column;gap:15px;padding:20px;display:flex}.searchBox{gap:10px;display:flex;position:relative}.searchBox input{flex:1}.searchBox button{padding:10px 12px}.modal-main.chatsearch{width:42vw}.modal-main.chatcreate{justify-content:center;width:45%}.modal-main.chatleave,.modal-main.chatdelete{flex-direction:column;justify-content:center;align-items:center;width:30%;height:auto;display:flex}.display-block{display:block}.display-none{display:none}.search{justify-content:center;align-items:center}.createChat{justify-content:center;gap:10px;width:100%;margin-top:20px;display:flex}.createChatInput{width:400px;margin-right:10px}.searchChat{justify-content:center;align-items:center;display:flex}.searchIcon{color:#000;padding:10px}.searchResult{background:#0f172a;border:1px solid #ffffff1a;border-radius:8px;width:100%;max-height:200px;position:absolute;top:110%;left:0;overflow-y:auto;box-shadow:0 10px 25px #0009}.searchResult::-webkit-scrollbar{display:none}.searchResult .chatItem{color:#000;align-items:center;width:100%;height:50px;display:flex}.chatItem p{cursor:pointer;padding:12px;transition:background .2s}.chatItem:hover{background:#ffffff1a}.modal-footer{justify-content:flex-end;gap:10px;padding:15px 20px;display:flex}.errorText{color:#f87171;font-size:14px}a{text-decoration:none}.modal-main.checkloginsignup{flex-direction:column;justify-content:center;align-items:center;width:30%;height:40%;display:flex;position:relative}.modal-main.accountedit{flex-direction:column;justify-content:center;align-items:center;width:40%;height:60%;display:flex}.modal-main.accountedit.usernamechange{width:40%;height:60%}.modal-main.accountedit.emailchange{width:40%;height:70%}.modal-main.accountdelete{flex-direction:column;justify-content:center;align-items:center;width:30%;height:auto;display:flex}.modalEditRegister{color:#fff;background:#ffffff14;border:1px solid #ffffff26;border-radius:8px;padding:12px;transition:all .2s}.modalEditRegister input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f64d}.modalEditRegister button{border-radius:8px;width:auto;padding:12px;font-weight:600;transition:all .2s}.modalEditRegister .confirmBtn{background:linear-gradient(135deg,#3b82f6,#2563eb)}.modalEditRegister .confirmBtn:hover{transform:translateY(-1px);box-shadow:0 5px 15px #3b82f666}.modalEditRegister .cancelBtn{background:0 0;border:1px solid #fff3}.accountDelete{color:#fff;background-color:#dc2626}.accountDelete:hover{background-color:#b91c1c}.modal-main.errorchat,.modal-main.charlimit{flex-direction:column;justify-content:center;align-items:center;width:30%;height:20%;display:flex}.App{text-align:center;background-color:#020721;justify-content:center;align-items:center;height:100vh;display:flex}.App-logo{pointer-events:none;height:40vmin}@media (prefers-reduced-motion:no-preference){.App-logo{animation:20s linear infinite App-logo-spin}}.App-header{color:#fff;background-color:#282c34;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;font-size:calc(10px + 2vmin);display:flex}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.searchForm{flex-direction:column;align-items:center;margin:auto}.Register{text-align:center;background-color:#051254;border-radius:10px;flex-direction:column;align-items:center;width:30vw;height:500px;margin:auto;padding:2vw 1vw;display:flex}.Register.Signup{height:30vw}.registerInput{width:28vw}.registerInput.password{width:24vw}.loginsignupsection{background-color:#0c215b;border-radius:10px;width:100%;margin:10px;padding:5px}button{color:#fff;background-color:#3b82f6;border-radius:5px;margin:5px;padding:10px 20px;font-size:13px}button:hover{background-color:#2563eb}.eye{object-fit:cover;background-color:#27438e;border-radius:50%}.editAccountButton{margin:1vw;padding:1.5vh 3vw;font-size:15px}.editAccountButton.delete{color:#fff;background-color:#dc2626}.editAccountButton.delete:hover{background-color:#b91c1c}label{color:#fff}input{color:#2f2d52;border:1px solid #acabab;border-radius:10px;outline:none;width:100%;padding:1vw;font-size:18px}input::placeholder{color:#d3d3d3}.containerChat{border:1px solid #27438e;border-radius:10px;width:85vw;height:90vh;display:flex;overflow:hidden}.containerSettings{flex-direction:column;justify-content:center;align-items:center;display:flex}.containerChatEdit,.containerChatDelete{background-color:#0a1650;border:1px solid #fff;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;width:40vw;height:40vh;margin:10px;display:flex}span{font-size:18px;font-weight:500}p{color:#d3d3d3;font-size:14px}.search{border-bottom:1px solid gray}.searchinput{color:#fff;background-color:#0000;outline:none}.searchinput::placeholder{color:#d3d3d3}.sidebar{background-color:#0c215b;flex-direction:column;flex:1;display:flex;position:relative}.usernamebar{color:#f9fafb;background-color:#1f2937;justify-content:space-between;align-items:center;height:4vh;padding:1vh 1vw;font-family:Inter,sans-serif;display:flex}.chatlistcontainer{flex-direction:column;flex:1;min-height:0;display:flex}.chatInfo.chatlist{color:#d3d3d3;background-color:#1e293b;border-bottom:1px solid #334155;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:1vh 1vw;display:flex}.btn.leave.active{color:#fff;background-color:#2563eb}.btn.leave.active:hover{background-color:#1d4ed8}.btn.delete.active{color:#fff;background-color:#dc2626}.btn.delete.active:hover{background-color:#b91c1c}.btn.disabled{color:#6b7280;cursor:not-allowed;opacity:.6;background-color:#1f2937}.btn svg{font-size:14px}.btn.disabled svg{opacity:.5}.chatList{color:#d1d5db;background-color:#111827;flex:1;width:100%;min-height:0;overflow:auto}.userChat{color:#fff;cursor:pointer;align-items:center;gap:10px;padding:20px 100px 20px 30px;display:flex}.userChat:hover{color:#fff;background-color:#374151}.chatImg{object-fit:cover;border-radius:50%;width:50px;height:50px}.chatDisplay{flex-direction:column;flex:2;display:flex}.chatInfo.chatdisplay{color:#f9fafb;background-color:#1f2937;justify-content:space-between;align-items:center;height:60px;padding:1vh 1vw;display:flex}.chatroomname{font-family:Poppins,sans-serif}.messageinput{background-color:#1e293b;justify-content:space-between;align-items:center;height:60px;padding:1vh;display:flex}.messageTextLengthDisplay{color:#94a3b8;background-color:#0f172a;border:1px solid #334155;border-radius:6px;padding:4px 10px;font-size:12px}.messageTextLengthDisplay.warning{color:#f59e0b}.messageTextLengthDisplay.danger{color:#ef4444}.sendMsgInput{margin:2vw;padding:1vh}.sendbutton{color:#fff;border:none;padding:10px 15px}.messages{background-color:#0f172a;flex:1;min-height:0;padding:10px;overflow:auto}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background-color:#94a3b84d;border-radius:10px}::-webkit-scrollbar-thumb:hover{background-color:#94a3b899}.message{gap:20px;display:flex}.message.owner{flex-direction:row-reverse}.message.owner p{color:#fff;background-color:#2563eb;border-radius:10px;max-width:max-content}.message.other p{color:#e5e7eb;background-color:#1e293b;border-radius:10px;max-width:max-content}.messageTraits{color:gray;flex-direction:column;font-weight:300;display:flex}.chatusericon{object-fit:cover;border-radius:50%;width:50px;height:50px}.messageAuthor{color:#fff}.messageText{word-wrap:break-word;flex-direction:column;gap:10px;max-width:30%;display:flex;overflow:hidden}.usertext{background-color:#fff;border-radius:0 10px 10px;max-width:max-content;padding:10px 20px}.dateDisplay{color:#fff;font-size:11px}.loading-overlay{z-index:9999;color:#fff;background:#000c;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.2rem;display:flex;position:fixed;top:0;left:0}.spinner{border:6px solid #f3f3f3;border-top-color:#4caf50;border-radius:50%;width:50px;height:50px;margin-bottom:1rem;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}