.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f0f2f5}.login-card{background:#fff;border-radius:12px;padding:40px;width:360px;box-shadow:0 2px 16px #00000014}.login-card h1{font-size:24px;font-weight:700;color:#1a1a1a;margin-bottom:28px;text-align:center}.field{margin-bottom:16px}.field label{display:block;font-size:13px;font-weight:500;color:#555;margin-bottom:6px}.field input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:15px;outline:none;transition:border-color .15s}.field input:focus{border-color:#4f80ff}.login-error{color:#e53e3e;font-size:13px;margin-bottom:12px}.login-card button[type=submit]{width:100%;padding:11px;background:#4f80ff;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;margin-top:8px;transition:background .15s}.login-card button[type=submit]:hover:not(:disabled){background:#3a6ee8}.login-card button[type=submit]:disabled{opacity:.6;cursor:not-allowed}.sidebar{width:280px;background:#1e1e2e;color:#fff;display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid rgba(255,255,255,.07)}.user-info{display:flex;align-items:center;gap:10px}.avatar{width:34px;height:34px;border-radius:50%;background:#4f80ff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.username-label{font-size:14px;font-weight:500}.logout-btn{background:none;border:none;color:#fff6;font-size:18px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:color .15s,background .15s}.logout-btn:hover{color:#fff;background:#ffffff14}.sidebar-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px}.chats-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#fff6}.new-chat-btn{background:#4f80ff;color:#fff;border:none;border-radius:6px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}.new-chat-btn:hover{background:#3a6ee8}.chat-list{list-style:none;flex:1;overflow-y:auto;padding:6px 8px}.no-chats{text-align:center;padding:32px 16px;font-size:13px;color:#ffffff40}.chat-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .1s}.chat-item:hover{background:#ffffff0f}.chat-item.active{background:#4f80ff2e}.chat-avatar{width:40px;height:40px;border-radius:50%;background:#ffffff1a;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;flex-shrink:0}.chat-meta{display:flex;flex-direction:column;min-width:0;gap:2px}.chat-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-recipient{font-size:12px;color:#ffffff59;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-view{display:flex;flex-direction:column;height:100%;background:#fff}.chat-header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #eee;flex-shrink:0}.chat-header-avatar{width:40px;height:40px;border-radius:50%;background:#e8edff;color:#4f80ff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex-shrink:0}.chat-header-name{font-size:15px;font-weight:600;color:#1a1a1a}.chat-header-sub{font-size:12px;color:#9a9a9a;margin-top:1px}.messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:6px;background:#f7f8fc}.no-messages{text-align:center;color:#b8b8b8;font-size:14px;margin-top:60px}.message{display:flex;flex-direction:column;max-width:65%;gap:3px}.message.sent{align-self:flex-end;align-items:flex-end}.message.received{align-self:flex-start;align-items:flex-start}.bubble{padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.45;word-break:break-word}.message.sent .bubble{background:#4f80ff;color:#fff;border-bottom-right-radius:4px}.message.received .bubble{background:#fff;color:#1a1a1a;border-bottom-left-radius:4px;box-shadow:0 1px 2px #0000000f}.meta{font-size:11px;color:#b8b8b8;padding:0 4px}.send-error{color:#e53e3e;font-size:13px;padding:6px 20px 0;flex-shrink:0}.message-form{display:flex;gap:10px;padding:14px 20px;border-top:1px solid #eee;background:#fff;flex-shrink:0}.message-form input{flex:1;padding:10px 16px;border:1px solid #e0e0e0;border-radius:22px;font-size:14px;outline:none;transition:border-color .15s;background:#f7f8fc}.message-form input:focus{border-color:#4f80ff;background:#fff}.message-form button{padding:10px 22px;background:#4f80ff;color:#fff;border:none;border-radius:22px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s;flex-shrink:0}.message-form button:hover:not(:disabled){background:#3a6ee8}.message-form button:disabled{opacity:.45;cursor:not-allowed}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:#fff;border-radius:12px;padding:28px;width:360px;box-shadow:0 8px 32px #00000029}.modal h3{font-size:18px;font-weight:700;color:#1a1a1a;margin-bottom:20px}.modal-field{margin-bottom:16px}.modal-field label{display:block;font-size:13px;font-weight:500;color:#555;margin-bottom:6px}.modal-field label span{color:#b0b0b0;font-weight:400}.modal-field input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:14px;outline:none;transition:border-color .15s}.modal-field input:focus{border-color:#4f80ff}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px}.modal-actions button{padding:9px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s;border:none}.cancel-btn{background:none!important;border:1px solid #ddd!important;color:#555}.cancel-btn:hover{background:#f5f5f5!important}.modal-actions button[type=submit]{background:#4f80ff;color:#fff}.modal-actions button[type=submit]:hover:not(:disabled){background:#3a6ee8}.modal-actions button[type=submit]:disabled{opacity:.5;cursor:not-allowed}.app{display:flex;height:100vh}.main{flex:1;display:flex;flex-direction:column;overflow:hidden}.empty-state{flex:1;display:flex;align-items:center;justify-content:center;color:#9a9a9a;font-size:15px;background:#f7f8fc}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;height:100vh;overflow:hidden}#root{height:100vh}