.signup-body{width:100%;min-height:100vh;background-color:var(--primary-bg);color:var(--text-color);display:flex;justify-content:center;align-items:center}.signup-form-section{width:50%;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:40px}.signup-design-section{width:65%;min-height:100vh;background-color:var(--secondary-bg);border-radius:8rem 0 0 8rem;display:flex;justify-content:center;align-items:center}.signup-form{width:300px}.signup-form-section .goToLogin{display:flex;justify-content:center;padding:5px}.signup-form-section .goToLogin .loginLink{color:var(--accent-color);text-decoration:none}@media (max-width: 1024px){.signup-body{flex-direction:column}.signup-form-section{width:100%;min-height:100vh;padding:30px}.signup-form{min-width:50%}.signup-design-section{display:none}}.signin-body{width:100%;min-height:100vh;background-color:var(--primary-bg);color:var(--text-color);display:flex;justify-content:center;align-items:center}.signin-form-section{width:50%;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:40px}.signin-design-section{width:65%;min-height:100vh;background-color:var(--secondary-bg);border-radius:8rem 0 0 8rem;display:flex;justify-content:center;align-items:center}.signin-form{width:300px}.form-title{text-align:center;margin-bottom:20px;font-size:32px;font-weight:600;color:var(--text-color)}.form-input{margin:12px 0;width:100%}.form-input input{width:100%;height:45px;background:var(--form-bg);border:2px solid var(--border-color);border-radius:.5rem;font-size:16px;padding:0 12px;color:var(--text-color);transition:all .3s ease-in-out}.form-input input:hover,.form-input input:focus{border-color:var(--accent-color);box-shadow:0 0 5px #e67e2280;outline:none}.signin-form-section .goToRegister{display:flex;justify-content:center;padding:5px}.signin-form-section .goToRegister .registerLink{color:var(--accent-color);text-decoration:none}.submit-button{width:100%;display:flex;justify-content:center;align-items:center;margin-top:20px}.submit-button button{font-size:18px;font-weight:500;color:#fff;background-color:var(--accent-color);border:none;padding:10px 20px;outline:none;border-radius:8px;transition:all .3s ease-in-out;cursor:pointer;box-shadow:0 3px 8px #e67e224d}.submit-button button:hover{background-color:var(--accent-hover);transform:translateY(-2px);box-shadow:0 4px 10px #d3540080}@media (max-width: 1024px){.signin-body{flex-direction:column}.signin-form-section{width:100%;min-height:100vh;padding:30px}.signin-form{min-width:50%}.signin-design-section{display:none}}@media (max-width: 600px){.form-title{font-size:28px}.form-input input{font-size:14px;height:40px}.submit-button button{font-size:16px;padding:8px 16px}}:root{--primary-bg: #282C35;--secondary-bg: #1C1E24;--form-bg: #3E444A;--primary-border-color: #5A5F66;--secondary-border-color: #32353a;--accent-color: #E67E22;--accent-hover: #D35400;--text-color: #F8F9FA}.avatar-body{width:100vw;min-height:100vh;background-color:var(--primary-bg);display:flex;justify-content:center;align-items:center}.avatar-form{margin:0 20px;width:400px;background-color:var(--form-bg);border-radius:1rem;border:1px solid var(--primary-border-color);display:flex;justify-content:center;align-items:center}.avatar-sections{width:90%}.avatar-title{width:100%;text-align:center;color:var(--text-color);margin-top:20px}.avatar-top-section{width:100%;height:200px;display:flex;justify-content:center;align-items:center}.avatar-top-section img{width:110px;border-radius:50%}.avatar-bottom-section{width:100%;height:200px;display:flex;flex-wrap:wrap;justify-content:space-evenly;align-items:center;margin-bottom:20px;overflow:scroll}.avatar-bottom-section img{width:75px;border-radius:50%;margin:10px}.avatar-bottom-section img:hover{border:3px var(--secondary-border-color) solid;scale:1.2;transition-delay:.2;cursor:pointer}.avatar-next-button{width:100%;display:flex;justify-content:center;align-items:center}.avatar-next-button button{font-size:20px;background-color:var(--accent-color);color:var(--text-color);border-radius:.5rem;border-style:none;outline:none;padding:8px 15px;margin:10px}.avatar-next-button button:hover{background-color:var(--accent-hover);transform:translateY(-3px);transition:.2s ease-out}:root{--primary-bg: #282C35;--secondary-bg: #1C1E24;--form-bg: #3E444A;--border-color: #5A5F66;--accent-color: #E67E22;--accent-hover: #D35400;--text-color: #F8F9FA}*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}.chat-container{width:100%;height:75px;display:flex;justify-content:left;align-items:center;background-color:var(--form-bg);padding-left:25px;padding-top:10px}.chat-container:hover{background-color:var(--border-color);cursor:pointer}.chat-container .user-avatar img{width:50px;border-radius:50%}.chat-container .user-name{padding-left:10px;font-size:20px;color:var(--text-color)}@media screen and (max-width: 768px){.chat-container{height:60px;padding-left:15px}.chat-container .user-avatar img{width:40px}.chat-container .user-name{font-size:18px}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--secondary-bg)}::-webkit-scrollbar-thumb{background-color:var(--chat-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background-color:var(--chat-color)}*{scrollbar-width:thin;scrollbar-color:var(--chat-color) var(--secondary-bg)}*{margin:0;padding:0;font-family:Poppins,sans-serif}.chat-body{width:100%;height:100vh;display:flex;background-color:var(--secondary-bg);position:relative}.sidebar-toggle{display:none;font-size:30px;color:var(--text-color);position:absolute;top:20px;left:20px;cursor:pointer;z-index:100}.chat-sidebar{width:30%;background-color:var(--primary-bg);padding:20px;overflow-y:auto;transition:transform .3s ease-in-out;overflow:scroll}.sidebar-header{display:flex;justify-content:space-between;align-items:center;background-color:var(--title-bg);padding:10px 20px}.sidebar-title{color:var(--text-color);font-size:20px}.setting-icon{font-size:24px;color:var(--text-color);cursor:pointer}.sidebar-footer{display:flex;justify-content:center;margin-top:20px}.chat-add-contact{font-size:40px;color:var(--chat-color);cursor:pointer}.chat-panel{width:70%;background-color:var(--title-bg);display:flex;flex-direction:column}.chat-title{display:flex;align-items:center;padding:20px;color:var(--text-color)}.chat-title .user-avatar{width:40px;height:40px;margin-right:10px;border-radius:50%}.chat-area{flex:1;background-color:var(--border-color);margin:0 20px;border:8px solid var(--primary-bg);overflow-y:auto;padding:10px}.message-area-right,.message-area-left{display:flex;justify-content:flex-end;padding:5px 0;color:var(--primary-bg);font-size:16px}.message-area-left{justify-content:flex-start}.message-area-right p,.message-area-left p{max-width:60%;background-color:var(--chat-color);padding:10px;border-radius:1rem}.message-area-right p{border-radius:1rem 0 1rem 1rem}.message-area-left p{border-radius:0 1rem 1rem}.chat-box{display:flex;padding:10px 20px;align-items:center}.chat-box input{flex:1;padding:15px;font-size:16px;border:none;outline:none;border-radius:8px}.chat-box input:hover{border:2px solid var(--accent-color)}.send-button{font-size:30px;color:var(--text-color);margin-left:15px;cursor:pointer}.send-button:hover{scale:1.2}.select-contact-message{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.select-contact-message p{color:var(--text-color);font-size:25px;font-weight:bolder}@media screen and (max-width: 768px){.chat-title{padding:20px 20px 20px 70px}.sidebar-title{padding-left:25%}.chat-sidebar{position:absolute;top:0;left:0;height:100vh;width:70%;z-index:90;background-color:var(--primary-bg);transform:translate(-100%)}.chat-sidebar.open{transform:translate(0)}.sidebar-toggle{display:block}.chat-panel{width:100%}}.add-contact-page{background-color:var(--primary-bg);height:100vh;display:flex;justify-content:center;align-items:center;padding:16px}.add-contact-form{background:linear-gradient(145deg,var(--form-bg),var(--secondary-bg));border:1px solid var(--border-color);border-radius:16px;padding:32px;width:100%;max-width:400px;box-shadow:0 10px 25px #0006;display:flex;flex-direction:column;gap:20px;transition:transform .3s ease}.add-contact-form:hover{transform:translateY(-2px)}.add-contact-form h2{color:var(--text-color);font-size:1.8rem;font-weight:600;text-align:center;margin-bottom:10px}.add-contact-form input{padding:12px 14px;background-color:var(--secondary-bg);border:1px solid var(--border-color);border-radius:10px;color:var(--text-color);font-size:1rem;transition:border-color .2s ease}.add-contact-form input:focus{outline:none;border-color:var(--accent-color)}.add-contact-form button{padding:12px;border:none;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .25s ease,transform .2s ease}.add-contact-form button[type=button]{background-color:var(--accent-color);color:var(--text-color)}.add-contact-form button[type=button]:hover{background-color:var(--accent-hover);transform:translateY(-1px)}.cancel-button{background-color:transparent;color:var(--chat-color);border:1px solid var(--border-color);margin-top:-8px}.cancel-button:hover{background-color:var(--secondary-bg);transform:translateY(-1px)}:root{--primary-bg: #282C35;--secondary-bg: #1C1E24;--title-bg: #1e2028;--form-bg: #3E444A;--border-color: #5A5F66;--accent-color: #E67E22;--accent-hover: #D35400;--text-color: #F8F9FA;--chat-color: #c1c5c9}.profile-page{background-color:var(--primary-bg);height:100vh;display:flex;justify-content:center;align-items:center}.profile-card{background-color:var(--form-bg);padding:40px 30px;border-radius:14px;width:320px;box-shadow:0 8px 20px #00000080;text-align:center}.profile-card h2{color:var(--text-color);margin-bottom:30px;font-size:1.5rem}.profile-avatar{width:100px;height:100px;border-radius:50%;border:2px solid var(--border-color);margin-bottom:20px}.profile-card button{width:100%;padding:12px;margin-top:12px;border-radius:8px;font-weight:700;cursor:pointer;transition:background-color .2s ease;font-size:1rem}.logout-btn{background-color:transparent;color:var(--text-color);border:1px solid var(--border-color)}.logout-btn:hover{background-color:var(--secondary-bg)}.back-btn{background-color:var(--border-color);color:var(--text-color);border:none}.back-btn:hover{background-color:var(--title-bg)}