._sidebar_dnpzs_2{position:fixed;left:0;top:0;width:260px;height:100vh;background-color:#0f172a;color:#fff;padding:20px;display:flex;flex-direction:column}._logo_dnpzs_15{font-size:1.3rem;font-weight:700;margin-bottom:30px}._links_dnpzs_21{display:flex;flex-direction:column;gap:12px}._link_dnpzs_21{color:#cbd5f5;text-decoration:none;padding:10px 12px;border-radius:8px}._active_dnpzs_34{background-color:#1e293b;color:#fff}._logout_dnpzs_39{margin-top:auto;background:#ef4444;border:none;padding:10px;border-radius:8px}.app-content{margin-left:300px;padding:20px}._loginContainer_1mu1s_1{min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:Inter,sans-serif}._card_1mu1s_10{background:#1a4b6bf2;padding:2.5rem;border-radius:16px;box-shadow:0 10px 25px #0003;width:100%;max-width:400px;text-align:center}._title_1mu1s_20{margin-bottom:1.5rem;color:#333;font-size:2rem;font-weight:700;color:#fff}._inputGroup_1mu1s_28{position:relative;margin-bottom:1.2rem}._input_1mu1s_28{width:100%;padding:12px 16px;border:1px solid #ddd;border-radius:8px;font-size:1rem;transition:border-color .3s ease;box-sizing:border-box}._input_1mu1s_28:focus{outline:none;border-color:#764ba2;box-shadow:0 0 0 2px #764ba233}._togglePassword_1mu1s_49{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:#666;cursor:pointer;font-size:.8rem}._button_1mu1s_61{width:100%;padding:12px;background:#764ba2;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,background .3s}._button_1mu1s_61:hover{background:#5a397a;transform:translateY(-1px)}._button_1mu1s_61:disabled{background:#ccc}._linkText_1mu1s_83{margin-top:1.5rem;font-size:.9rem;color:#fff}._link_1mu1s_83{color:#764ba2;text-decoration:none;font-weight:600}._error_1mu1s_95{background:#fee2e2;color:#dc2626;padding:10px;border-radius:6px;margin-top:1rem;font-size:.85rem}.groups-container{display:flex;flex-direction:row;max-width:1300px;width:100%;height:80vh;border:1px solid #ccc;border-radius:8px;overflow:hidden;margin:0 auto 0 100px}.groups-left{width:300px;border-right:1px solid #ccc;overflow-y:auto;background-color:#263a53;padding:10px;color:#fff}.add-group{display:flex;margin-bottom:10px}.add-group input{flex:1;padding:6px;border-radius:8px;border:1px solid #ccc;margin-right:5px}.add-group button{padding:6px 10px;border-radius:8px;border:none;background-color:#128c7e;color:#fff;cursor:pointer}.add-group button:hover{background-color:#075e54}.groups-list p,.group-item{padding:8px;cursor:pointer;border-bottom:1px solid #ddd}.groups-list p:hover,.group-item:hover{background-color:#e0e0e0}.groups-right{flex:1;display:flex;flex-direction:column;padding:5px}.messages-container{flex:1;overflow-y:auto;padding:10px;background-color:#263a53;border-radius:8px;display:flex;flex-direction:column;gap:6px}.message-wrapper{display:flex;flex-direction:column;align-items:flex-start}.message{padding:8px 12px;border-radius:12px;max-width:60%;margin:2px 0}.other-message{background-color:#797878;align-self:flex-start}.friend-item{display:flex;justify-content:space-between;align-items:center;padding:6px;border-bottom:1px solid #ddd}.friend-item button{padding:4px 8px;border:none;border-radius:8px;background-color:#128c7e;color:#fff;cursor:pointer}.friend-item button:hover{background-color:#075e54}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1000}.buttons{display:flex;gap:10px;margin-bottom:10px;justify-content:flex-end}.add{background-color:#128c7e;color:#fff;border:none;padding:6px 11px;border-radius:8px;cursor:pointer;font-size:24px;font-weight:bolder;display:flex;align-items:center;justify-content:center}.add:hover{background-color:#075e54}.leave{background-color:#942c2c;color:#fff;border:none;padding:5px 12px;border-radius:8px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}.leave:hover{background-color:#c00}.modal-content{background:#fff;width:400px;max-height:70vh;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 40px #0003;color:#000}.modal-friends-list{overflow-y:auto;max-height:45vh;border:1px solid #ddd;border-radius:8px}.modal-close{align-self:flex-end;padding:6px 12px;border-radius:8px;border:none;background-color:#ccc;cursor:pointer}.modal-close:hover{background-color:#aaa}.conversations-container{display:flex;flex-direction:row;width:100%;width:1400px;margin-left:100px;height:80vh;border:1px solid #ccc;border-radius:8px;overflow:hidden;overflow-y:auto}.friends-list{width:300px;border-right:1px solid #ccc;overflow-y:auto;background-color:#263a53;color:#fff}.friend-item{padding:10px;cursor:pointer;border-bottom:1px solid #ddd}.friend-item:hover{background-color:#e0e0e0}.chat{color:#fff;align-items:start}.chat-area{flex:1;display:flex;flex-direction:column;padding:10px}.messages-container{flex:1;overflow-y:auto;padding:10px;background-color:#263a53;border-radius:8px;display:flex;flex-direction:column}.message{padding:8px 12px;border-radius:12px;max-width:60%;margin:4px 0}.my-message{background-color:#136fd8;align-self:flex-end}.other-message{background-color:#929292;align-self:flex-start}.input-container{display:flex;margin-top:10px}h2{text-align:center;margin-bottom:10px;color:#333}.message-input{flex:1;padding:8px;border-radius:12px;border:1px solid #ccc;margin-right:8px}.send-button{padding:8px 16px;border:none;border-radius:12px;background-color:#128c7e;color:#fff;cursor:pointer}.send-button:hover{background-color:#075e54}.message-wrapper{display:flex;flex-direction:column;align-items:flex-start;position:relative}.my-message-wrapper{align-items:flex-end}.message-time{font-size:10px;color:#888;margin-top:2px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;background-color:#263a53;padding:20px}.icon-circle{background:#3b82f61a;width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#3b82f6;margin-bottom:20px;border:1px dashed rgba(59,130,246,.4)}.empty-state h2{font-size:1.8rem;margin-bottom:8px}.empty-state p{color:#94a3b8;max-width:300px}.friends-container{display:flex;flex-direction:row;gap:20px;padding:20px;width:1400px;margin:0 auto}.friends-column{flex:1;background-color:#f4f4f4;padding:15px;border-radius:8px;background-color:#23354b;border:1px solid #ccc;height:400px;overflow-y:auto;color:#fff}.friends-column h2{text-align:center;margin-bottom:10px;color:#fff}.friends-column ul{list-style:none;padding:0}.friends-column li{padding:8px 10px;margin-bottom:6px;background-color:#395475;border-radius:8px;border:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;color:#fff}.friends-column li button{padding:4px 8px;border:none;border-radius:6px;background-color:#128c7e;color:#fff;cursor:pointer}.friends-column li button:hover{background-color:#075e54}.change-password-container{max-width:400px;margin:50px auto}.change-password-form{display:flex;flex-direction:column;gap:10px}.change-password-form input{padding:8px}.change-password-form button{padding:10px;cursor:pointer}.error{color:red}.success{color:green}h2{text-align:center;margin-bottom:10px;color:#fff}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547}a:hover{color:#747bff}button{background-color:#f9f9f9}}html,body,#root{margin:0;padding:0;width:100%;height:100%;background-image:url(/photo2.jpg);background-size:cover;background-position:center}*,*:before,*:after{box-sizing:border-box}