.login-card input{width:100%;padding:12px 15px;margin-bottom:20px;border-radius:10px;border:1px solid #ccc;font-size:1rem;outline:none;transition:.3s}body,html{margin:0;padding:0;font-family:Arial,sans-serif}.messenger-page{display:flex;height:100vh;background:#f0f2f5}.sidebar{width:250px;background:#fff;border-right:1px solid #ddd;display:flex;flex-direction:column}.sidebar h2{text-align:center;padding:20px 0;border-bottom:1px solid #ddd;margin:0}.sidebar ul{list-style:none;padding:0;margin:0;flex:1;overflow-y:auto}.sidebar li{display:flex;align-items:center;padding:12px 20px;cursor:pointer;border-bottom:1px solid #f0f0f0;transition:.2s}.sidebar li:hover{background:#f0f0f0}.sidebar li.active{background:#e6f0ff;font-weight:700}.avatar{width:36px;height:36px;border-radius:50%;margin-right:10px}.chat-area{flex:1;display:flex;flex-direction:column}.chat-header{display:flex;align-items:center;background:#fff;padding:15px 20px;border-bottom:1px solid #ddd;font-weight:700;font-size:1.2rem}.chat-messages{flex:1;padding:15px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.chat-message{max-width:60%;padding:10px 15px;border-radius:20px;box-shadow:0 2px 5px #0000001a;display:inline-block;word-break:break-word}.chat-message.me{background-color:#0084ff;color:#fff;align-self:flex-end;border-bottom-right-radius:0}.chat-message.other{background-color:#e4e6eb;align-self:flex-start;border-bottom-left-radius:0}.chat-file{max-width:150px;max-height:150px;border-radius:10px;display:block;margin-bottom:5px}.chat-input-area{display:flex;padding:10px 20px;border-top:1px solid #ddd;background:#fff;align-items:center}.chat-input-area input[type=text]{flex:1;padding:10px 15px;border-radius:20px;border:1px solid #ccc;outline:none}.chat-input-area input[type=text]:focus{border-color:#0084ff}.chat-input-area .file-upload{margin-left:10px;cursor:pointer;position:relative;display:inline-block;font-size:1.2rem}.chat-input-area .file-upload input[type=file]{display:none}.chat-input-area button{margin-left:10px;padding:10px 20px;border-radius:20px;border:none;background-color:#0084ff;color:#fff;cursor:pointer;font-weight:700}.chat-input-area button:hover{background-color:#006fd6}.login-page{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#6b73ff,#000dff);font-family:Arial,sans-serif}.login-card{background-color:#fff;padding:40px 30px;border-radius:20px;box-shadow:0 15px 40px #0003;width:100%;max-width:400px;text-align:center}.login-card h2{font-size:2rem;color:#333;margin-bottom:30px}.avatar-upload{position:relative;width:100px;height:100px;margin:0 auto 15px}.avatar-upload input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.avatar-preview,.avatar-placeholder{width:100px;height:100px;margin:0 auto 15px;border-radius:50%;object-fit:cover;background-color:#f0f0f0;display:flex;justify-content:center;align-items:center;color:#888;font-size:.9rem;border:2px dashed #ccc}.login-card input[type=text],.login-card input[type=email],.login-card input[type=password]{width:100%;padding:12px 15px;margin-bottom:15px;border-radius:10px;border:1px solid #ccc;font-size:1rem;outline:none;transition:.3s}.login-card input:focus{border-color:#000dff;box-shadow:0 0 5px #000dff80}.login-card button{width:100%;padding:12px 15px;border:none;border-radius:10px;background-color:#000dff;color:#fff;font-size:1rem;cursor:pointer;transition:.3s}.login-card button:hover{background-color:#6b73ff}.login-card p{margin-top:20px;color:#666;font-size:.9rem}.login-card a{color:#000dff;text-decoration:none;font-weight:700}.login-card a:hover{text-decoration:underline}.sidebar-footer{padding-top:1rem;border-top:1px solid #475569}.logout-btn{width:100%;padding:.6rem;border:none;border-radius:8px;background:#ef4444;color:#fff;font-weight:700;cursor:pointer;transition:background .2s}.logout-btn:hover{background:#dc2626}