:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;--background-light: #f0f4f8;--box-bg-light: #ffffff;--text-light: rgba(58, 58, 77, .445);--text-box-light: rgba(209, 209, 209, .5);--text-hover-light: #3a3a4d;--border-light: #aaa9a9cb;--placeholder-light: rgba(110, 101, 101, .377);--border-focus-light: #4946462c;--btn-text-light: #ffffff;--btn-background-light: #4A90E2;--btn-hover-light: #357ABD;--input-focus-light: #3b82f6;--input-background-light: #f0f4f84f;--input-hover-light: #f0f4f8c7;--error-color-light: #ff4747;--bubble-sent-light: #4a90e2b5;--bubble-received-light: #b1b1b1cf;--background-dark: #121212;--box-bg-dark: #1e1e1e;--text-dark: #e0e0e0;--text-box-dark: rgba(143, 143, 143, .5);--text-hover-dark: #ffffff;--border-dark: #333333;--placeholder-dark: rgba(200, 200, 200, .5);--border-focus-dark: rgba(255, 255, 255, .2);--btn-background-dark: #6ae17c4a;--btn-hover-dark: #3ed5437a;--btn-text-dark: #ffffff;--input-focus-dark: #4a4a4a;--input-background-dark: #222222;--input-hover-dark: #2e2e2e;--error-color-dark: #ff4747;--bubble-sent-dark: #6fbf73a3;--bubble-received-dark: #2C2C2C;--background: var(--background-light);--box-bg: var(--box-bg-light);--text-color: var(--text-light);--text-box-color: var(--text-box-light);--text-hover-color: var(--text-hover-light);--border-color: var(--border-light);--placeholder-color: var(--placeholder-light);--border-focus-color: var(--border-focus-light);--btn-background: var(--btn-background-light);--btn-text: var(--btn-text-light);--btn-hover: var(--btn-hover-light);--input-focus: var(--input-focus-light);--input-background: var(--input-background-light);--input-hover: var(--input-hover-light);--error-color: var(--error-color-light);--bubble-sent: var(--bubble-sent-light);--bubble-received: var(--bubble-received-light);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme=dark]{--background: var(--background-dark);--box-bg: var(--box-bg-dark);--text-color: var(--text-dark);--text-box-color: var(--text-box-dark);--text-hover-color: var(--text-hover-dark);--border-color: var(--border-dark);--placeholder-color: var(--placeholder-dark);--border-focus-color: var(--border-focus-dark);--btn-background: var(--btn-background-dark);--btn-text: var(--btn-text-dark);--btn-hover: var(--btn-hover-dark);--input-focus: var(--input-focus-dark);--input-background: var(--input-background-dark);--input-hover: var(--input-hover-dark);--error-color: var(--error-color-dark);--bubble-sent: var(--bubble-sent-dark);--bubble-received: var(--bubble-received-dark)}body{margin:0;background-color:var(--background);color:var(--text-color)}.box{background-color:var(--box-bg);padding:20px;border-radius:8px;box-shadow:0 4px 8px #0000001a}button{background-color:var(--btn-background);color:var(--btn-text);border:1px solid rgba(255,255,255,.2);padding:10px 15px;border-radius:5px;cursor:pointer;transition:background-color .4s ease}button:hover{background-color:var(--btn-hover)}.error-message{color:var(--error-color);font-size:.9rem;margin-top:10px;display:flex;align-items:center;justify-content:center}.error-message:before{content:"⚠️";margin-right:8px}.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.popup-content{background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 4px 6px #0000001a;text-align:center;max-width:300px;width:100%}.popup-content p{margin:0 0 15px;font-size:16px;color:#333}.progress-bar{width:100%;height:5px;background-color:#e0e0e0;border-radius:5px;overflow:hidden}.progress{height:100%;background-color:#3498db;transition:width .1s linear}.signin-container{display:flex;justify-content:center;align-items:center;height:100vh;background-color:var(--background);transition:background-color .4s ease}.signin-box{background-color:var(--box-bg);padding:30px;border-radius:10px;box-shadow:0 4px 10px #0000001a;width:100%;max-width:350px;text-align:center;transition:background-color .4s ease}.signin-box h2{margin-bottom:20px;color:var(--text-color);font-size:24px;transition:.3s ease}.signin-box label{color:var(--text-color);display:flex;justify-content:start;transition:.3s ease}.signin-box input{width:92%;padding:12px;margin:8px 0;border:1px solid var(--border-color);background-color:var(--input-background);color:var(--text-color);border-radius:5px;outline:none;transition:border .3s ease;cursor:pointer;transition:background-color .4s ease}.signin-box input::placeholder{color:var(--placeholder-color)}.signin-box input:focus{border:1px solid var(--input-focus);box-shadow:0 0 5px var(--input-focus)}.signin-box button{width:100%;padding:12px;margin-top:10px;border:none;background-color:#4a90e2;color:#fff;font-size:16px;font-weight:700;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.signin-box button:hover{background-color:#3a7bd5}.signin-links{margin-top:15px}.signin-links a{color:var(--text-color);text-decoration:none;font-size:14px;margin-top:5px;transition:color .3s ease}.signin-links a:hover{color:#4a90e2}@media(max-width:480px){.signin-box{padding:20px;max-width:90%}}.signup-container{display:flex;justify-content:center;align-items:center;height:100vh;background-color:var(--background);transition:background-color .4s ease}.signup-box{background-color:var(--box-bg);padding:30px;border-radius:10px;box-shadow:0 4px 10px #0000001a;width:100%;max-width:350px;text-align:center;transition:background-color .4s ease}.signup-box h2{margin-bottom:20px;color:var(--text-color);font-size:24px;transition:.3s ease}.signup-box label{color:var(--text-color);display:flex;justify-content:start;transition:.3s ease}.signup-box input{width:92%;padding:12px;margin:8px 0;border:1px solid var(--border-color);background-color:var(--input-background);color:var(--text-color);border-radius:5px;outline:none;transition:border .3s ease;cursor:pointer;transition:background-color .4s ease}.signup-box input::placeholder{color:var(--placeholder-color)}.signup-box input:focus{border:1px solid var(--input-focus);box-shadow:0 0 5px var(--input-focus)}.signup-box button{width:100%;padding:12px;margin-top:10px;border:none;background-color:#4a90e2;color:#fff;font-size:16px;font-weight:700;border-radius:5px;cursor:pointer;transition:background-color .4s ease}.signup-box button:hover{background-color:#3a7bd5}.signup-links{margin-top:15px}.signup-links a{color:var(--text-color);text-decoration:none;font-size:14px;margin-top:5px;transition:color .3s ease}.signup-links a:hover{color:#4a90e2}.password-input{position:relative;display:flex;align-items:center}.password-input input{width:100%;padding-right:40px}.toggle-password{width:30px!important;background-color:transparent!important;position:absolute;right:10px;margin-top:0!important;outline:none}@media(max-width:480px){.signup-box{padding:20px;max-width:90%}}.theme-toggle{position:fixed;top:2.4%;right:15%;z-index:1000}@media(max-width:768px){.theme-toggle{top:0;right:9%}}.theme-toggle input[type=checkbox]{display:none}.theme-toggle label{display:flex;align-items:center;justify-content:space-between;width:55px;height:28px;background-color:var(--box-bg);border-radius:50px;cursor:pointer;position:relative;transition:background-color .3s ease,box-shadow .3s ease;box-shadow:0 2px 5px #0003}@media(max-width:480px){.theme-toggle label{top:0;right:9%}}.theme-toggle label:hover{box-shadow:0 3px 8px #0000004d}.theme-toggle .icon{position:absolute;top:62%;transform:translateY(-50%) rotate(0);transition:transform .5s ease,opacity .5s ease}.theme-toggle .icon.sun{left:3px;opacity:1;color:#f59e0b}.theme-toggle .icon.moon{right:24px;opacity:0;color:#7074b9}.theme-toggle input[type=checkbox]:checked+label{background-color:var(--box-bg)}.theme-toggle input[type=checkbox]:checked+label .icon.sun{opacity:0;transform:translateY(-50%) translate(20px) rotateX(360deg)}.theme-toggle input[type=checkbox]:checked+label .icon.moon{opacity:1;transform:translateY(-50%) translate(20px) rotateX(-360deg)}.sidebar{width:190px;height:100vh;background-color:var(--box-bg);padding:20px;position:fixed;top:0;left:0;transition:transform .3s ease-in-out;box-shadow:3px 80px 5px #0000001a;transition:background-color .4s ease}.menu-toggle{display:none;position:absolute;top:15px;left:15px;background:none;border:none;font-size:24px;color:var(--text-color);cursor:pointer}.sidebar ul{list-style:none;padding:0}.sidebar ul li{margin:20px 0}.sidebar ul li a{text-decoration:none;color:var(--text-color);font-size:18px;display:block}.sidebar ul li a:hover{color:var(--text-hover-color)}.sidebar .logout{margin-top:auto;color:red;cursor:pointer}.sidebar-logo{width:100px;height:auto;display:block;margin:10px auto 80px}@media(max-width:768px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.menu-toggle{display:block}.sidebar-logo{display:none}}.navbar{background-color:var(--box-bg);padding:20px 10px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 6px 5px #0000001a;width:100%;transition:background-color .4s ease}.menu-button{display:none;background:none;border:none;font-size:24px;color:var(--text-color);cursor:pointer}.navbar h1{color:var(--text-color);margin:0 0 0 70px}.navbar-links{margin-right:40px}.navbar-links a{color:var(--text-color);text-decoration:none;margin-left:15px}.navbar-links a:hover{color:var(--text-hover-color)}.navbar .logout{margin-top:auto;color:red;cursor:pointer}@media(max-width:768px){.navbar h1{color:var(--text-color);margin:20}.menu-button{display:block}.navbar-links{display:none;flex-direction:column;position:absolute;top:60px;right:20px;background-color:var(--box-bg);padding:10px;border-radius:5px}.navbar-links.open{display:flex}}.footer{background-color:var(--box-bg);color:var(--text-color);box-shadow:0 2px 5px #0000001a;text-align:center;padding:0 10px;position:relative;bottom:0;width:100%;transition:background-color .4s ease}@media(max-width:768px){.footer{font-size:14px}}.dashboard-layout{display:flex}.dashboard-main-content{margin-left:230px;width:calc(100% - 250px);min-height:100vh;display:flex;flex-direction:column}.dashboard-content{border-radius:20px;flex-grow:1;padding:20px;margin:20px;width:calc(100% - 58px);background-color:var(--box-bg);box-shadow:-4px 5px 10px #0000001a;transition:background-color .4s ease}@media(max-width:768px){.dashboard-main-content{margin-left:0;width:calc(100% - 15px)}}.friends-invite-layout{background-color:var(--box-bg);padding:30px;border-radius:10px;box-shadow:0 4px 10px #0000001a;width:100%;max-width:350px;margin-bottom:20px;transition:background-color .4s ease}.friends-invite-layout input{max-width:320px;padding:12px;margin:8px 10px;border:1px solid var(--border-color);background-color:var(--input-background);color:var(--text-color);border-radius:5px;outline:none;transition:border .3s ease;cursor:pointer;transition:background-color .4s ease}.friends-invite-layout input::placeholder{color:var(--placeholder-color)}.friends-invite-layout input:focus{border:1px solid var(--input-focus);box-shadow:0 0 5px var(--input-focus)}.friends-invite-layout input:hover{background-color:var(--input-hover)}.input-group{display:flex;align-items:center}@media(max-width:768px){.friends-invite-layout{width:90%;max-width:none;padding:20px}.friends-invite-layout input,.friends-invite-layout button{max-width:none}}@media(max-width:480px){.friends-invite-layout{padding:15px}.friends-invite-layout input,.friends-invite-layout button{font-size:14px;padding:10px}}.friends-list-pending-layout{background-color:var(--box-bg);padding:20px;border-radius:10px;box-shadow:0 4px 10px #0000001a;width:100%;max-width:600px;text-align:center;margin-bottom:20px;transition:background-color .4s ease}.friends-list-pending-layout h2{font-size:22px;color:var(--text-color);margin-bottom:15px}.friends-list-pending-list{display:flex;flex-direction:column;gap:10px;align-items:center}.friends-list-pending-item{display:flex;align-items:center;justify-content:space-between;background-color:var(--secondary-bg);padding:12px;border-radius:8px;box-shadow:0 2px 5px #0000001a;transition:transform .2s ease}.friends-list-pending-item:hover{transform:scale(1.02)}.friends-list-pending-icon{font-size:28px;color:var(--icon-color);margin-right:10px}.friends-list-pending-email{font-size:16px;color:var(--text-color);flex-grow:1;text-align:left}.friends-list-pending-actions{display:flex;gap:8px}.friends-list-pending-accept-button{background-color:#27ae60;border:none;color:#fff;padding:8px 12px;border-radius:5px;cursor:pointer;display:flex;align-items:center;transition:background-color .3s ease}.friends-list-pending-accept-button:hover{background-color:#219150}.friends-list-pending-decline-button{background-color:#e74c3c;border:none;color:#fff;padding:8px 12px;border-radius:5px;cursor:pointer;display:flex;align-items:center;transition:background-color .3s ease}.friends-list-pending-decline-button:hover{background-color:#c0392b}.friends-list-pending-accept-button svg,.friends-list-pending-decline-button svg{margin-left:5px}.no-friends-list-pending{color:var(--text-muted);font-size:16px;padding:15px}@media(max-width:768px){.friends-list-pending-layout{width:90%;max-width:none;padding:15px}.friends-list-pending-item{flex-direction:column;align-items:center;text-align:center;padding:10px}.friends-list-pending-email{font-size:14px;margin-bottom:8px}.friends-list-pending-actions{width:100%;justify-content:center}.friends-list-pending-accept-button,.friends-list-pending-decline-button{width:48%;justify-content:center;padding:10px}}@media(max-width:480px){.friends-list-pending-layout{padding:10px}.friends-list-pending-email{font-size:13px}.friends-list-pending-accept-button,.friends-list-pending-decline-button{width:100%;font-size:14px}}.friends-list-layout{background-color:var(--box-bg);padding:20px;border-radius:10px;box-shadow:0 4px 10px #0000001a;width:100%;max-width:600px;text-align:center;transition:background-color .4s ease}.friends-list{display:flex;flex-direction:column;gap:10px;align-items:center}.friends-list-layout h2{font-size:22px;color:var(--text-color);margin-bottom:15px}.friends-list-layout ul{list-style:none;padding:0;margin:0}.friend-list-item{display:flex;align-items:center;justify-content:space-between;background-color:var(--secondary-bg);padding:12px;border-radius:8px;margin-bottom:10px;box-shadow:0 2px 5px #0000001a;transition:transform .2s ease}.friend-list-item:hover{transform:scale(1.02)}.friend-list-info{display:flex;align-items:center}.friend-list-icon{font-size:28px;color:var(--icon-color);margin-right:10px}.friend-list-email{font-size:16px;color:var(--text-color)}.friend-list-remove-button{background-color:#e74c3c;border:none;color:#fff;padding:8px 12px;border-radius:5px;cursor:pointer;display:flex;align-items:center;transition:background-color .3s ease}.friend-list-remove-button:hover{background-color:#c0392b}.friend-list-remove-button svg{margin-left:5px}.error-message{color:red;font-size:14px;margin-top:10px}.no-friend-list{color:var(--text-muted);font-size:16px;padding:15px}@media(max-width:768px){.friends-list-layout{width:90%;max-width:none;padding:15px}.friend-list-item{flex-direction:column;align-items:center;text-align:center;padding:10px}.friend-list-info{flex-direction:column}.friend-list-icon{font-size:24px;margin-bottom:5px}.friend-list-email{font-size:14px}.friend-list-remove-button{width:100%;justify-content:center;padding:10px}}@media(max-width:480px){.friends-list-layout{padding:10px}.friend-list-email{font-size:13px}.friend-list-remove-button{font-size:14px}}.friends-layout{display:flex}.friends-main-content{margin-left:230px;width:calc(100% - 250px);min-height:100vh;display:flex;flex-direction:column}.friends-content{border-radius:20px;flex-grow:1;padding:20px;margin:20px;width:calc(100% - 58px);background-color:var(--box-bg);box-shadow:-4px 5px 10px #0000001a;transition:background-color .4s ease}@media(max-width:768px){.friends-main-content{margin-left:0;width:calc(100% - 15px)}}.settings-layout{display:flex}.settings-main-content{margin-left:230px;width:calc(100% - 250px);min-height:100vh;display:flex;flex-direction:column}.settings-content{border-radius:20px;flex-grow:1;padding:20px;margin:20px;width:calc(100% - 58px);background-color:var(--box-bg);box-shadow:-4px 5px 10px #0000001a;transition:background-color .4s ease}@media(max-width:768px){.settings-main-content{margin-left:0;width:calc(100% - 15px)}}.profile-layout{display:flex}.profile-main-content{margin-left:230px;width:calc(100% - 250px);min-height:100vh;display:flex;flex-direction:column}.profile-content{border-radius:20px;flex-grow:1;padding:20px;margin:20px;width:calc(100% - 58px);background-color:var(--box-bg);box-shadow:-4px 5px 10px #0000001a;transition:background-color .4s ease}@media(max-width:768px){.profile-main-content{margin-left:0;width:calc(100% - 15px)}}.video-local,.video-remote{width:300px;height:200px;border-radius:8px;margin:10px;background:#000;object-fit:cover}.incoming-call-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;align-items:center;justify-content:center;z-index:999}.incoming-call-modal{background:#fff;padding:2rem;border-radius:12px;text-align:center;max-width:300px;box-shadow:0 0 20px #0003}.incoming-call-buttons{margin-top:1rem;display:flex;justify-content:space-around}.incoming-call-buttons button{padding:.5rem 1rem;border:none;border-radius:8px;font-weight:700;cursor:pointer}button.accept{background:#4caf50;color:#fff}button.reject{background:#f44336;color:#fff}.messages-view{overflow-y:auto;max-height:calc(100% - 35px);flex-grow:1;background-color:var(--box-bg);padding:20px 20px 0;border-radius:10px;box-shadow:0 4px 6px #0000001a;scrollbar-width:none;transition:background-color .4s ease;border:1px solid var(--border-color);display:flex;flex-direction:column;height:100%}.messages-view h2{font-size:1.5rem;margin-top:0}.messages-view h2{position:sticky;background:var(--box-bg);border-bottom:1px solid #ccc;gap:10px;transition:background-color .4s ease;margin:0}.message-history{flex-grow:1;overflow-y:auto;padding:10px;scrollbar-width:none}.message-history::-webkit-scrollbar{display:none}.sent{justify-content:flex-end;text-align:end;margin-left:auto;width:fit-content;max-width:60%}.bubble{margin-bottom:10px;padding:10px 15px;border-radius:16px;font-size:14px;line-height:1.4;word-wrap:break-word}.sent .bubble{background-color:var(--bubble-sent);color:#fff;border-bottom-right-radius:2px}.received .bubble{background-color:var(--bubble-received);color:#fff;border-bottom-left-radius:2px}.received{justify-content:flex-start;text-align:start;width:fit-content;max-width:60%}textarea{width:98%;padding:10px;border-radius:5px;border:1px solid #ccc;resize:none;background-color:var(--text-box);color:var(--text-color)}.message-input-container{position:sticky;bottom:0;background:var(--box-bg);padding:10px;border-top:1px solid #ccc;display:flex;gap:10px;transition:background-color .4s ease;margin-top:20px}@media(max-width:768px){.messages-view{width:96%;padding-top:0}.messages-view h2{display:none}}@media(max-width:480px){.messages-view{width:86%;padding-top:0}.messages-view h2{display:none}}.messages-header{display:flex;align-items:center;justify-content:space-between;background-color:var(--box-bg);padding-bottom:10px;border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:1}.video-call-button{background-color:var(--text-box);color:var(--text-color);border:1px solid var(--border-color);padding:6px 10px;border-radius:8px;cursor:pointer;font-size:1.2rem;transition:background-color .3s,color .3s}.video-call-button:hover{background-color:var(--bubble-received);color:#fff}.video-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:999}.video-content{background-color:var(--box-bg);color:var(--text-color);padding:20px;border-radius:12px;border:1px solid var(--border-color);box-shadow:0 8px 20px #0003;max-width:90%;width:500px;max-height:80%;overflow:auto}.video-content button{margin-top:20px;background-color:var(--bubble-sent);color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer}.history-conversation{max-height:calc(50.5% - 37px);min-height:calc(50.5% - 37px);overflow-y:auto;width:250px;background-color:var(--box-bg);padding:0 15px 15px;border-radius:10px;box-shadow:0 4px 6px #0000001a;scrollbar-width:none;transition:background-color .4s ease;border:1px solid var(--border-color)}.history-conversation h2{font-size:1.5rem;top:0;margin-top:0;padding-top:0;position:sticky;background:var(--box-bg);border-bottom:1px solid #ccc;gap:10px;transition:background-color .4s ease}.history-conversation ul{list-style:none;padding:0}.history-conversation li{padding:10px;margin-bottom:10px;border-radius:5px;cursor:pointer;transition:background-color .2s ease}.history-conversation li:hover{background-color:#96969645}@media(max-width:768px){.history-conversation{width:97%;margin-bottom:20px;padding:0;max-height:100%}.history-conversation h2{font-size:1rem;text-align:center}}@media(max-width:480px){.history-conversation{width:90%;margin-bottom:20px;padding:0;max-height:100%}.history-conversation h2{font-size:1rem;text-align:center}}.online-friends{max-height:calc(50.5% - 37px);min-height:calc(50.5% - 37px);overflow-y:auto;width:250px;background-color:var(--box-bg);padding:0 15px 15px;border-radius:10px;box-shadow:0 4px 6px #0000001a;margin-bottom:20px;scrollbar-width:none;transition:background-color .4s ease;border:1px solid var(--border-color)}.online-friends h2{font-size:1.5rem;top:0;margin-top:0;padding-top:0;position:sticky;background:var(--box-bg);border-bottom:1px solid #ccc;gap:10px;transition:background-color .4s ease}.online-friends ul{list-style:none;padding:0}.online-friends li{padding:10px;margin-bottom:10px;border-radius:5px;cursor:pointer;transition:background-color .2s ease}.online-friends li:hover{background-color:#96969645}@media(max-width:768px){.online-friends{width:97%;margin-bottom:20px;padding:0;max-height:100%}.online-friends h2{font-size:1rem;text-align:center}}@media(max-width:480px){.online-friends{width:90%;margin-bottom:20px;padding:0;max-height:100%}.online-friends h2{font-size:1rem;text-align:center}}.message-layout{display:flex;flex-direction:row;height:100vh}.message-main-content{margin-left:230px;width:calc(100% - 250px);min-height:100vh;display:flex;flex-direction:column}.message-content{overflow-y:auto;border-radius:20px;flex-grow:1;padding:20px;margin:20px;width:calc(100% - 58px);background-color:var(--box-bg);box-shadow:-4px 5px 10px #0000001a;display:flex;flex-direction:row;gap:20px;scrollbar-width:none;transition:background-color .4s ease}.right-column{overflow-y:auto;scrollbar-width:none}.left-column{height:100%}.-webkit-scrollbar{display:none}@media(max-width:768px){.message-layout{flex-direction:column}.message-main-content{margin-left:0;width:calc(100% - 15px)}.message-content{flex-direction:column}.left-column{height:35%;display:flex;gap:15px}}