:root{--primary-color: #6366f1;--primary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);--bg-dark: #0f172a;--sidebar-bg: rgba(30, 41, 59, .7);--text-white: #f8fafc;--text-gray: #94a3b8;--bubble-out: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);--bubble-in: rgba(51, 65, 85, .8);--glass: rgba(255, 255, 255, .03);--glass-border: rgba(255, 255, 255, .1)}*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif}body{background:radial-gradient(circle at top right,#1e1b4b,#0f172a);color:var(--text-white);height:100vh;overflow:hidden}#root{height:100%}.app-container{display:flex;height:100vh;width:100vw;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.sidebar{width:380px;background:var(--sidebar-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid var(--glass-border);display:flex;flex-direction:column}.sidebar-header{padding:25px 20px;border-bottom:1px solid var(--glass-border);background:#0003}.sidebar-header h3{font-size:1.5rem;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800;letter-spacing:-.5px}.chat-list{flex:1;overflow-y:auto;padding:10px}.chat-item{padding:15px;display:flex;align-items:center;border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);margin-bottom:5px}.chat-item:hover{background:#ffffff0d;transform:translate(5px)}.chat-item.active{background:var(--primary-gradient);box-shadow:0 4px 15px #6366f166}.chat-area{flex:1;display:flex;flex-direction:column;background:url(https://w0.peakpx.com/wallpaper/508/606/HD-wallpaper-whatsapp-dark-background-patterns-dark-blue-background.jpg);background-size:cover;position:relative}.chat-area:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#0f172ad9;z-index:0}.chat-header{padding:15px 25px;background:#0f172acc;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-bottom:1px solid var(--glass-border);display:flex;align-items:center;z-index:1}.message-list{flex:1;padding:30px;overflow-y:auto;display:flex;flex-direction:column;z-index:1}.message{max-width:65%;padding:12px 18px;border-radius:18px;margin-bottom:15px;position:relative;font-size:.95rem;line-height:1.5;box-shadow:0 4px 10px #0000001a;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.sent{align-self:flex-end;background:var(--bubble-out);border-bottom-right-radius:4px}.message.received{align-self:flex-start;background:var(--bubble-in);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-bottom-left-radius:4px;border:1px solid var(--glass-border)}.message-input-area{padding:25px;background:#0f172ae6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;gap:15px;z-index:1;border-top:1px solid var(--glass-border)}.message-input-area input{flex:1;padding:14px 20px;border-radius:12px;border:1px solid var(--glass-border);background:#ffffff0d;color:#fff;outline:none;transition:all .3s}.message-input-area input:focus{border-color:var(--primary-color);background:#ffffff14;box-shadow:0 0 0 4px #6366f11a}.message-input-area button{background:var(--primary-gradient);border:none;padding:0 25px;border-radius:12px;color:#fff;font-weight:700;cursor:pointer;transition:all .3s}.message-input-area button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #6366f166}.auth-container{display:flex;justify-content:center;align-items:center;height:100vh;background:radial-gradient(circle at center,#1e1b4b,#0f172a)}.auth-card{background:#1e293bb3;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);padding:50px;border-radius:24px;width:450px;text-align:center;border:1px solid var(--glass-border);box-shadow:0 20px 50px #00000080}.auth-card h2{margin-bottom:35px;font-size:2.2rem;font-weight:800;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.auth-card input{width:100%;padding:12px;margin-bottom:15px;border-radius:8px;border:1px solid #313d49;background-color:var(--bg-dark);color:#fff}.auth-card button{width:100%;padding:12px;background-color:var(--primary-color);border:none;border-radius:8px;color:#fff;font-weight:700;cursor:pointer;margin-top:10px}.auth-card p{margin-top:20px;color:var(--text-gray);cursor:pointer}