*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{height:100vh;width:100%;background:linear-gradient(135deg,#0f172a,#1e1b4b);display:flex;justify-content:center;align-items:center;color:#f8fafc}.app-wrapper{display:flex;width:95%;max-width:1100px;height:88vh;background:#0f172a66;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:24px;border:1px solid rgba(255,255,255,.05);box-shadow:0 25px 50px -12px #00000080;overflow:hidden}.sidebar{width:320px;background:#ffffff05;border-right:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;flex-shrink:0}.sidebar-header{padding:1.5rem;border-bottom:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center}.sidebar-header h2{color:#f8fafc;font-size:1.2rem;font-weight:700;letter-spacing:.5px}.sidebar-tabs{display:flex;padding:10px 15px;gap:8px;border-bottom:1px solid rgba(255,255,255,.05)}.tab-btn{flex:1;background:transparent;border:none;padding:10px 0;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:1px;cursor:pointer;border-radius:8px;transition:all .2s ease}.tab-btn:hover{color:#a78bfa;background:#ffffff08}.tab-btn.active{color:#fff;background:#8b5cf633}.tab-content{display:none;flex-direction:column;gap:8px}.tab-content.active{display:flex}.icon-btn{background:#8b5cf61a;color:#a78bfa;border:1px solid rgba(139,92,246,.2);width:36px;height:36px;border-radius:12px;font-size:1.2rem;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .3s cubic-bezier(.4,0,.2,1)}.icon-btn:hover{background:#8b5cf6;color:#fff;transform:translateY(-2px);box-shadow:0 1px 3px #8b5cf666}.sidebar-content{flex-grow:1;overflow-y:auto;padding:1.5rem 1rem;display:flex;flex-direction:column;gap:1.5rem}.friend-item{position:relative;display:flex;justify-content:space-between;align-items:center;background:#ffffff08;padding:12px 14px;border-radius:12px;margin-bottom:6px;border:1px solid transparent;transition:all .2s ease}.friend-item:hover{background:#ffffff0f;border:1px solid rgba(255,255,255,.1)}.friend-info{display:flex;align-items:center;gap:12px;cursor:pointer;flex-grow:1}.friend-name{font-size:.95rem;font-weight:500;color:#e2e8f0;transition:color .2s}.friend-info:hover .friend-name{color:#a78bfa}.status-dot{width:10px;height:10px;border-radius:50%}.status-dot.online{background:#10b981}.status-dot.offline{background:#475569}.header-controls{display:flex;align-items:center;background:#0003;border:1px solid rgba(255,255,255,.05);border-radius:100px;padding:6px 6px 6px 18px;gap:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.chat-container{flex-grow:1;display:flex;flex-direction:column;background:transparent}.chat-container header{padding:1.5rem 2rem;border-bottom:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center;background:#0f172a33}.chat-container h1{color:#f8fafc;font-size:1.3rem;font-weight:700}.status-online,.status-offline{display:flex;align-items:center;gap:8px;font-size:.75rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#cbd5e1}.status-online:before{content:"";display:inline-block;width:8px;height:8px;background:#10b981;border-radius:50%}.status-offline:before{content:"";display:inline-block;width:8px;height:8px;background:#475569;border-radius:50%}.header-controls .logout-btn{background:#f43f5e1a;color:#f43f5e;padding:8px 16px;border-radius:100px;font-size:.75rem;font-weight:600;border:none;cursor:pointer;transition:all .2s ease}.header-controls .logout-btn:hover{background:#f43f5e;color:#fff;box-shadow:0 0 5px #f43f5e33}.message-area{flex-grow:1;overflow-y:auto;padding:2rem;display:flex;flex-direction:column;gap:1.2rem}.message{padding:14px 18px;font-size:.95rem;line-height:1.5;max-width:70%;position:relative;box-shadow:0 4px 6px -1px #0000001a}.message.sent{align-self:flex-end;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;border-radius:20px 20px 4px}.message.received{align-self:flex-start;background:#ffffff12;color:#f8fafc;border-radius:20px 20px 20px 4px;border:1px solid rgba(255,255,255,.05)}.message.system{align-self:center;background:transparent;color:#64748b;font-size:.8rem;border:1px solid rgba(255,255,255,.1);border-radius:30px;padding:6px 16px;box-shadow:none}.msg-header{font-size:.75rem;font-weight:600;margin-bottom:6px;opacity:.8}.msg-time{font-weight:400;margin-left:8px;opacity:.6}.input-area{margin:0 2rem 2rem;padding:8px;display:flex;gap:10px;background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:100px;align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.input-area input{flex-grow:1;background:transparent;border:none;padding:12px 20px;color:#f8fafc;font-size:1rem;outline:none}.input-area input::placeholder{color:#64748b}.input-area button{background:#8b5cf6;color:#fff;border:none;padding:12px 24px;border-radius:100px;font-weight:600;cursor:pointer;transition:all .2s ease}.input-area button:hover:not(:disabled){background:#a78bfa;box-shadow:0 0 15px #8b5cf666}.input-area button:disabled{background:#475569;color:#94a3b8;cursor:not-allowed}.container{width:400px;height:580px;position:relative;background:#1e293bb3;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:20px;border-radius:24px;border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 50px -12px #00000080;overflow:hidden}.form-box{width:100%;height:100%;position:relative}.button-box{width:240px;margin:20px auto 40px;position:relative;border-radius:30px;background:#0000004d;border:1px solid rgba(255,255,255,.05)}.toggle-btn{padding:12px 30px;cursor:pointer;background:transparent;border:0;outline:none;position:relative;font-weight:600;color:#94a3b8;z-index:1;transition:color .4s ease}.toggle-btn.active{color:#fff}#btn{top:0;left:0;position:absolute;width:120px;height:100%;background:linear-gradient(135deg,#8b5cf6,#6d28d9);border-radius:30px;transition:.4s cubic-bezier(.4,0,.2,1)}.input-group{top:150px;position:absolute;width:280px;padding:0 30px;transition:.4s cubic-bezier(.4,0,.2,1)}#login{left:60px}#register{left:460px}.input-field{width:100%;padding:12px 0;margin:10px 0;border:none;border-bottom:2px solid rgba(255,255,255,.1);outline:none;background:transparent;color:#f8fafc;transition:border-color .3s}.input-field:focus{border-bottom-color:#8b5cf6}.submit-btn{width:100%;padding:14px;margin-top:25px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);border:0;border-radius:12px;color:#fff;font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s ease}.submit-btn:hover{transform:translateY(-2px)}.dropdown-menu{position:absolute;right:10px;top:40px;background:#1e293b;border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 10px 25px #00000080;width:150px;display:none;flex-direction:column;z-index:100}.dropdown-menu.active{display:flex}.dropdown-item{padding:12px 16px;text-align:left;background:transparent;border:none;font-size:.85rem;font-weight:500;color:#cbd5e1;cursor:pointer;transition:all .2s ease}.dropdown-item:hover{background:#ffffff0d;color:#fff}.dropdown-item.danger:hover{color:#f43f5e;background:#f43f5e1a}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s}.modal-overlay.active{opacity:1;pointer-events:auto}.modal-content{background:#1e293b;border:1px solid rgba(255,255,255,.1);width:90%;max-width:420px;border-radius:16px;transform:translateY(-20px);transition:transform .3s ease}.modal-overlay.active .modal-content{transform:translateY(0)}.modal-header{padding:1.5rem;border-bottom:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between}.modal-header h3{color:#fff}.close-btn{background:transparent;border:none;font-size:1.5rem;color:#94a3b8;cursor:pointer;line-height:1;padding:0 5px;transition:color .2s ease,transform .2s ease}.close-btn:hover{color:#f43f5e;transform:scale(1.1)}.modal-body{padding:1.5rem}.modal-body p{color:#94a3b8}.modal-body input{width:100%;background:#0003;border:1px solid rgba(255,255,255,.1);padding:12px;border-radius:8px;color:#fff}.modal-body input:focus{border-color:#8b5cf6;outline:none}.modal-footer{padding:1.2rem 1.5rem;background:#0003;display:flex;justify-content:flex-end;gap:10px}.btn-secondary{background:#ffffff0d;color:#cbd5e1;padding:10px 20px;border-radius:8px;border:none;cursor:pointer}.btn-secondary:hover{background:#ffffff1a}.btn-primary{background:#8b5cf6;color:#fff;padding:10px 20px;border-radius:8px;border:none;cursor:pointer}.btn-primary:hover{background:#7c3aed}.btn-options{background:transparent;color:#64748b;border:none;cursor:pointer;font-size:1.2rem}.btn-options:hover{color:#fff}.action-buttons{display:flex;gap:8px;align-items:center}.btn-accept{background:#10b9811a;color:#10b981;border:1px solid rgba(16,185,129,.2);border-radius:8px;width:32px;height:32px;cursor:pointer}.btn-accept:hover{background:#10b981;color:#fff}.btn-ignore{background:#f43f5e1a;color:#f43f5e;border:1px solid rgba(244,63,94,.2);border-radius:8px;width:32px;height:32px;cursor:pointer}.btn-ignore:hover{background:#f43f5e;color:#fff}.btn-chat{background:#8b5cf61a;color:#a78bfa;border:1px solid rgba(139,92,246,.2);padding:6px 12px;border-radius:8px;cursor:pointer}.btn-chat:hover{background:#8b5cf6;color:#fff}.logout-btn{background:#ffffff0d;color:#cbd5e1;padding:8px 16px;border-radius:8px;border:none;cursor:pointer}.logout-btn:hover{background:#f43f5e1a;color:#f43f5e}.toast{position:fixed;top:-60px;left:50%;transform:translate(-50%);padding:12px 24px;border-radius:100px;font-weight:600;color:#fff;z-index:2000;transition:top .4s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 25px #0000004d}.toast.success{background:#10b981;top:20px}.toast.error{background:#f43f5e;top:20px}.unread-badge{background:#f43f5e;color:#fff;font-size:.7rem;padding:2px 6px;border-radius:10px;font-weight:700;box-shadow:0 0 3px #f43f5e66}.placeholder-content{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center;color:#94a3b8}.placeholder-content .icon{font-size:4rem;margin-bottom:1rem;opacity:.8;filter:drop-shadow(0 0 5px rgba(139,92,246,.3))}.placeholder-content h2{color:#f8fafc;margin-bottom:.5rem;font-size:1.5rem}#root{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.mobile-back-btn{display:none;background:transparent;border:none;color:#f8fafc;font-size:1.5rem;cursor:pointer;padding-right:15px}.typing-bubble{align-self:flex-start;background:#ffffff0d;color:#94a3b8;border-radius:20px;padding:10px 16px;display:flex;align-items:center;border:1px solid rgba(255,255,255,.05);width:fit-content;animation:fadeIn .3s ease}.typing-dots{display:flex;gap:4px;align-items:center}.typing-dots .dot{width:5px;height:5px;background:#a78bfa;border-radius:50%;animation:typingBounce 1.4s infinite ease-in-out both}.typing-dots .dot:nth-child(1){animation-delay:-.32s}.typing-dots .dot:nth-child(2){animation-delay:-.16s}@keyframes typingBounce{0%,80%,to{transform:scale(0);opacity:.5}40%{transform:scale(1);opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){#root{align-items:flex-start}.app-wrapper{width:100vw;height:100dvh;border-radius:0;border:none;background:#0f172a}.sidebar{width:100%;height:100%;display:flex;border:none}.chat-container{width:100%;height:100%;display:none}.mobile-hidden{display:none!important}.mobile-back-btn{display:block}.app-wrapper.chat-active .sidebar{display:none}.app-wrapper.chat-active .chat-container{display:flex}.input-area{margin:0 1rem 1rem}}