:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}.authContainer{width:100%;height:100vh;display:flex}.auth-form{width:400px;margin:auto;padding:20px;border:1px solid #ddd;border-radius:8px;box-shadow:0 2px 5px #0000001a}.auth-form h2{text-align:center}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;font-weight:700}.form-group input{width:100%;padding:10px;font-size:16px;border:1px solid #ccc;border-radius:4px}.auth-form button{width:100%;padding:10px;font-size:16px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;margin-top:1rem}.auth-form button.toggle-auth{background-color:#6c757d}.auth-form button:hover{opacity:.9}.error{color:red;font-size:14px;text-align:center}.mainContainer{max-width:1400px;width:100%;height:100%;margin:0 auto}.topNav{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;color:#fff;box-shadow:0 2px 5px #0003;border-radius:8px}.topNav .title{font-size:24px;font-weight:700;margin:0}.topNav .user-info{font-size:1.3rem;font-weight:500;margin-right:15px;color:#fff;text-transform:capitalize}.topNav .logout{padding:8px 15px;font-size:14px;font-weight:700;color:#fff;background-color:#f04f4f;border:none;border-radius:20px;cursor:pointer;transition:all .3s ease}.topNav .logout:hover{background-color:red}.topNav .logout:active{background-color:#d4d4d4;transform:scale(.95)}.container{display:flex;justify-content:center;align-items:start;width:100%;height:100%;margin:1rem 0}.contactListContainer{flex:1;max-width:30%;height:100%;margin:1rem;display:flex;flex-direction:column;width:100%;overflow-y:auto;border:1px solid #ddd;border-radius:8px}.contact-list-header{text-align:center;font-size:1.2rem;font-weight:700;padding:12px 0;color:#fff}.contact-list{list-style:none;padding:0;margin:0;max-height:400px}.contact-list-item{padding:12px 16px;cursor:pointer;transition:background-color .3s ease,transform .2s ease;display:flex;align-items:center;gap:10px}.contact-list-item:hover{background-color:#e0f7fa33}.contact-list-item.selected{color:#fff;background-color:#e0f7fa33}.contact-avatar{width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:1rem;border:1px solid white}.contact-name{font-size:1rem;flex-grow:1;text-transform:capitalize}@media (max-width: 480px){.contact-list-item{font-size:.9rem;padding:10px}.contact-avatar{width:30px;height:30px;font-size:.8rem}}.chatWindowContainer{flex:2;max-width:70%;height:100%;display:flex;margin:1rem;padding:0 1rem 1rem;flex-direction:column;justify-content:end;border:1px solid #ddd;border-radius:8px}.chat-window{width:100%;height:100%;position:relative;overflow:hidden}.chat-top{position:absolute;top:0;width:100%;text-align:start;font-size:2rem;font-weight:700;padding:12px 0;margin:5px 0;color:#fff;display:flex;justify-content:start;align-items:center;gap:1rem;border-bottom:1px solid #ddd}.message-input-container{position:absolute;bottom:0;width:100%}.message-container{height:100%;width:100%;margin:10% 0;overflow-y:auto}.message{margin-top:1rem}.message-container{display:flex;flex-direction:column;gap:10px;padding:15px;border-radius:8px;overflow-y:auto;height:60vh}.message{display:flex;flex-direction:column;max-width:70%;padding:10px 15px;border-radius:12px;font-size:14px;line-height:1.5;word-wrap:break-word;position:relative;transition:transform .2s ease-in-out}.message.sent{align-self:flex-end;background-color:#52a163;color:#fff}.message.received{align-self:flex-start;background-color:#0153aa;color:#fff}.message-content p{margin:5px 0;font-weight:400}.message-content strong{font-size:13px;font-weight:700;margin-bottom:3px;display:block}.timestamp{font-size:11px;color:#fff;margin-top:5px;text-align:right;display:block}.message:hover{transform:scale(1.02);box-shadow:0 2px 6px #0000001a}.message-container{scrollbar-width:thin;scrollbar-color:#888}.message-container::-webkit-scrollbar{width:2px}.message-input{display:flex;align-items:center;flex-wrap:wrap;padding:10px;border-top:1px solid #ddd;width:100%;gap:1rem}.message-input input{flex:1;padding:10px 15px;font-size:16px;border:1px solid #ccc;border-radius:20px;outline:none;transition:all .3s ease}.message-input button{font-size:16px;color:#fff;background-color:#007bff;border:none;padding:10px 20px;border-radius:20px;cursor:pointer;width:100px;transition:all .3s ease}.message-input button:hover{background-color:#0056b3}.message-input button:active{transform:scale(.95)}@media (max-width: 1024px){.topNav .title{font-size:20px}.container{flex-direction:column;justify-content:start;align-items:center;padding:1rem;overflow:hidden}.contactListContainer,.chatWindowContainer{width:100%;max-width:none}.message-container{height:80vh;margin:20% 0}}@media (max-width: 768px){.auth-form{width:100%}.topNav .user-info{font-size:.9rem}}@media (max-width: 480px){.topNav .title{font-size:18px}.message{font-size:12px}}@-webkit-keyframes notyf-fadeinup{0%{opacity:0;transform:translateY(25%)}to{opacity:1;transform:translateY(0)}}@keyframes notyf-fadeinup{0%{opacity:0;transform:translateY(25%)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes notyf-fadeinleft{0%{opacity:0;transform:translate(25%)}to{opacity:1;transform:translate(0)}}@keyframes notyf-fadeinleft{0%{opacity:0;transform:translate(25%)}to{opacity:1;transform:translate(0)}}@-webkit-keyframes notyf-fadeoutright{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(25%)}}@keyframes notyf-fadeoutright{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(25%)}}@-webkit-keyframes notyf-fadeoutdown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(25%)}}@keyframes notyf-fadeoutdown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(25%)}}@-webkit-keyframes ripple{0%{transform:scale(0) translateY(-45%) translate(13%)}to{transform:scale(1) translateY(-45%) translate(13%)}}@keyframes ripple{0%{transform:scale(0) translateY(-45%) translate(13%)}to{transform:scale(1) translateY(-45%) translate(13%)}}.notyf{position:fixed;top:0;left:0;height:100%;width:100%;color:#fff;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;pointer-events:none;box-sizing:border-box;padding:20px}.notyf__icon--error,.notyf__icon--success{height:21px;width:21px;background:#fff;border-radius:50%;display:block;margin:0 auto;position:relative}.notyf__icon--error:after,.notyf__icon--error:before{content:"";background:currentColor;display:block;position:absolute;width:3px;border-radius:3px;left:9px;height:12px;top:5px}.notyf__icon--error:after{transform:rotate(-45deg)}.notyf__icon--error:before{transform:rotate(45deg)}.notyf__icon--success:after,.notyf__icon--success:before{content:"";background:currentColor;display:block;position:absolute;width:3px;border-radius:3px}.notyf__icon--success:after{height:6px;transform:rotate(-45deg);top:9px;left:6px}.notyf__icon--success:before{height:11px;transform:rotate(45deg);top:5px;left:10px}.notyf__toast{display:block;overflow:hidden;pointer-events:auto;-webkit-animation:notyf-fadeinup .3s ease-in forwards;animation:notyf-fadeinup .3s ease-in forwards;box-shadow:0 3px 7px #00000040;position:relative;padding:0 15px;border-radius:2px;max-width:300px;transform:translateY(25%);box-sizing:border-box;flex-shrink:0}.notyf__toast--disappear{transform:translateY(0);-webkit-animation:notyf-fadeoutdown .3s forwards;animation:notyf-fadeoutdown .3s forwards;-webkit-animation-delay:.25s;animation-delay:.25s}.notyf__toast--disappear .notyf__icon,.notyf__toast--disappear .notyf__message{-webkit-animation:notyf-fadeoutdown .3s forwards;animation:notyf-fadeoutdown .3s forwards;opacity:1;transform:translateY(0)}.notyf__toast--disappear .notyf__dismiss{-webkit-animation:notyf-fadeoutright .3s forwards;animation:notyf-fadeoutright .3s forwards;opacity:1;transform:translate(0)}.notyf__toast--disappear .notyf__message{-webkit-animation-delay:.05s;animation-delay:.05s}.notyf__toast--upper{margin-bottom:20px}.notyf__toast--lower{margin-top:20px}.notyf__toast--dismissible .notyf__wrapper{padding-right:30px}.notyf__ripple{height:400px;width:400px;position:absolute;transform-origin:bottom right;right:0;top:0;border-radius:50%;transform:scale(0) translateY(-51%) translate(13%);z-index:5;-webkit-animation:ripple .4s ease-out forwards;animation:ripple .4s ease-out forwards}.notyf__wrapper{display:flex;align-items:center;padding-top:17px;padding-bottom:17px;padding-right:15px;border-radius:3px;position:relative;z-index:10}.notyf__icon{width:22px;text-align:center;font-size:1.3em;opacity:0;-webkit-animation:notyf-fadeinup .3s forwards;animation:notyf-fadeinup .3s forwards;-webkit-animation-delay:.3s;animation-delay:.3s;margin-right:13px}.notyf__dismiss{position:absolute;top:0;right:0;height:100%;width:26px;margin-right:-15px;-webkit-animation:notyf-fadeinleft .3s forwards;animation:notyf-fadeinleft .3s forwards;-webkit-animation-delay:.35s;animation-delay:.35s;opacity:0}.notyf__dismiss-btn{background-color:#00000040;border:none;cursor:pointer;transition:opacity .2s ease,background-color .2s ease;outline:none;opacity:.35;height:100%;width:100%}.notyf__dismiss-btn:after,.notyf__dismiss-btn:before{content:"";background:#fff;height:12px;width:2px;border-radius:3px;position:absolute;left:calc(50% - 1px);top:calc(50% - 5px)}.notyf__dismiss-btn:after{transform:rotate(-45deg)}.notyf__dismiss-btn:before{transform:rotate(45deg)}.notyf__dismiss-btn:hover{opacity:.7;background-color:#00000026}.notyf__dismiss-btn:active{opacity:.8}.notyf__message{vertical-align:middle;position:relative;opacity:0;-webkit-animation:notyf-fadeinup .3s forwards;animation:notyf-fadeinup .3s forwards;-webkit-animation-delay:.25s;animation-delay:.25s;line-height:1.5em}@media only screen and (max-width:480px){.notyf{padding:0}.notyf__ripple{height:600px;width:600px;-webkit-animation-duration:.5s;animation-duration:.5s}.notyf__toast{max-width:none;border-radius:0;box-shadow:0 -2px 7px #00000021;width:100%}.notyf__dismiss{width:56px}}