*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#1a2a38,#2c3e50,#34495e,#2c3e50,#1a2a38);background-size:400% 400%;animation:gradientBG 15s ease infinite;height:100vh;overflow:hidden;color:#fff}.messenger-container{display:flex;height:100vh;max-width:1200px;margin:20px auto;background:linear-gradient(145deg,#1e1e1efa,#2d2d32f2,#1e1e1efa);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;height:calc(100vh - 40px);overflow:hidden;box-shadow:0 20px 40px #0000004d}.sidebar{width:300px;background:linear-gradient(180deg,#1c1c1efa,#232326f2,#1c1c1efa);border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;border-radius:20px 0 0 20px}.sidebar-header{padding:20px;background:linear-gradient(135deg,#3a3a3c,#5856d6,#48484a);background-size:200% 200%;animation:headerGradient 8s ease infinite;color:#fff;border-radius:20px 0 0}.sidebar-header h2{font-size:22px;font-weight:600;margin-bottom:10px}.search-box{background:#ffffff26;border:none;border-radius:20px;padding:12px 20px;color:#fff;width:100%;font-size:16px}.search-box::placeholder{color:#ffffffb3}.chat-list{flex:1;overflow-y:auto}.chat-item{display:flex;align-items:center;padding:15px 20px;cursor:pointer;transition:all .3s ease;border-bottom:1px solid rgba(255,255,255,.05);color:#fff}.chat-item:hover{background:#48484a4d}.chat-item.active{background:linear-gradient(135deg,#007aff,#5856d6);color:#fff}.chat-item.active .chat-last-message{color:#fffc}.avatar{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#ff6b6b,#ff8e53);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;margin-right:15px;font-size:18px}.chat-info{flex:1}.chat-name{font-weight:600;font-size:16px;margin-bottom:4px;color:#fff}.chat-last-message{font-size:14px;color:#8e8e93;opacity:.8}.chat-time{font-size:12px;color:#8e8e93}.unread-badge{margin-left:5px;background:#007aff;color:#fff;border-radius:50%;padding:2px 6px;font-size:11px}.chat-item.active .unread-badge{color:#fff;background:#ffffff4d}.chat-area{flex:1;display:flex;flex-direction:column;background:linear-gradient(180deg,#1c1c1e,#2a2a2e 30%,#1c1c1e 70%,#2a2a2e)}.chat-undefined-text{color:#8e8e93;font-size:16px;text-align:center;margin-top:20px}.chat-header{padding:20px;background:linear-gradient(135deg,#3a3a3c,#5856d6,#48484a);background-size:200% 200%;animation:headerGradient 8s ease infinite;color:#fff;display:flex;align-items:center;justify-content:space-between}.chat-header-info{display:flex;align-items:center}.chat-header-info .avatar{margin-right:15px;width:40px;height:40px;font-size:16px}.chat-title{font-size:18px;font-weight:600;margin-bottom:2px;color:#fff}.chat-status{font-size:14px;opacity:.8;color:#fff}.chat-actions{display:flex;gap:15px}.chat-actions button{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:8px;border-radius:50%;transition:all .3s ease}.chat-actions button:hover{background:#fff3}.messages-container{flex:1;overflow-y:scroll;padding:20px 20px 0;scroll-behavior:smooth;background:linear-gradient(180deg,#000,#1a1a1a,#000);background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><rect width="60" height="60" fill="transparent"/><circle cx="30" cy="30" r="0.8" fill="%23333333" opacity="0.3"/></svg>')}.message{display:flex;margin-bottom:15px;align-items:flex-end}.message.sent{justify-content:flex-end}.message-bubble{max-width:70%;padding:12px 16px;border-radius:20px;position:relative;word-wrap:break-word}.message.received .message-bubble{background:#2c2c2e;color:#fff;border-bottom-left-radius:6px;box-shadow:0 2px 8px #0000004d}.message.sent .message-bubble{background:linear-gradient(135deg,#007aff,#5856d6);color:#fff;border-bottom-right-radius:6px}.message-time{font-size:11px;opacity:.6;margin-top:4px;text-align:right;color:inherit}.input-area{padding:20px;background:#2c2c2e;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:15px}.input-container{flex:1;display:flex;align-items:center;background:#1c1c1e;border-radius:25px;padding:8px 16px}.message-input{flex:1;border:none;background:none;outline:none;padding:8px;font-size:16px;resize:none;max-height:100px;color:#fff}.message-input::placeholder{color:#8e8e93}.input-actions{display:flex;gap:10px}.input-actions button{background:none;border:none;color:#007aff;font-size:20px;cursor:pointer;padding:8px;border-radius:50%;transition:all .3s ease}.input-actions button:hover{background:#007aff1a}.send-button{background:linear-gradient(135deg,#007aff,#5856d6);color:#fff;border:none;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .3s ease}.send-button:hover{transform:scale(1.1)}@media (max-width: 768px){.messenger-container{margin:0;border-radius:0;height:100vh}.sidebar{display:none}.sidebar.mobile-open{display:flex;position:absolute;z-index:1000;width:280px;height:100%;border-radius:0}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.message{animation:fadeInUp .3s ease}.chat-list::-webkit-scrollbar,.messages-container::-webkit-scrollbar{width:6px}.chat-list::-webkit-scrollbar-track,.messages-container::-webkit-scrollbar-track{background:transparent}.chat-list::-webkit-scrollbar-thumb,.messages-container::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.chat-list::-webkit-scrollbar-thumb:hover,.messages-container::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.auth-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100%;background:linear-gradient(135deg,#1a2a38,#2c3e50,#34495e,#2c3e50,#1a2a38);background-size:400% 400%;animation:gradientBG 15s ease infinite}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.auth-card{width:100%;max-width:450px;background:linear-gradient(145deg,#1e1e1efa,#2d2d32f2,#1e1e1efa);border-radius:20px;box-shadow:0 20px 40px #0000004d;overflow:hidden;color:#fff;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:all .3s ease}.auth-header{background:linear-gradient(135deg,#3a3a3c,#5856d6,#48484a);background-size:200% 200%;animation:headerGradient 8s ease infinite;padding:30px 20px;text-align:center;border-radius:20px 20px 0 0}@keyframes headerGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.auth-logo{font-size:50px;color:#fff;margin-bottom:10px}.auth-brand{font-size:28px;font-weight:600;color:#fff;margin:0}.auth-form{padding:30px 40px}.auth-title{margin-bottom:25px;font-size:24px;font-weight:600;text-align:center;color:#fff}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-size:14px;color:#fffc}.auth-input{width:100%;padding:12px 15px;background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#fff;font-size:16px;transition:all .3s ease;outline:none}.auth-input:focus{border-color:#5856d6;box-shadow:0 0 0 2px #5856d64d}.auth-button{width:100%;padding:14px;margin-top:20px;background:linear-gradient(135deg,#007aff,#5856d6);border:none;border-radius:10px;color:#fff;font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .3s ease}.auth-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0000004d}.auth-button:active{transform:translateY(0)}.form-footer{margin-top:25px;text-align:center;font-size:14px;color:#ffffffb3}.form-link{color:#007aff;text-decoration:none;font-weight:500;transition:all .3s ease}.form-link:hover{color:#5856d6;text-decoration:underline}.auth-form{animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 500px){.auth-card{width:95%;margin:0 10px}.auth-form{padding:20px}}@media (max-width: 360px){.auth-header{padding:20px 15px}.auth-logo{font-size:40px}.auth-brand{font-size:22px}.auth-form{padding:15px}.auth-button{padding:12px;font-size:14px}}