.chat-container{display:flex;height:100vh;background:#f6f7fb;font-family:Arial,sans-serif}.chat-sidebar{width:300px;background:#fff;border-right:1px solid #e6e6e6;overflow-y:auto;padding:12px}.chat-sidebar h3{margin-bottom:10px;font-size:18px;color:#222}.chat-user{padding:12px;border-radius:10px;cursor:pointer;margin-bottom:8px;transition:.2s}.chat-user:hover{background:#f0f0f0}.chat-user.active{background:#e8f0ff}.chat-user-name{font-weight:700;font-size:14px}.chat-user-last{font-size:12px;color:#777;margin-top:3px}.chat-main{flex:1;display:flex;flex-direction:column;padding:20px}.chat-header{font-size:18px;font-weight:700;margin-bottom:10px;color:#222}.chat-box{flex:1;overflow-y:auto;background:#fff;border-radius:12px;padding:15px;box-shadow:0 2px 10px rgba(0,0,0,.05)}.msg{display:flex;margin-bottom:8px}.msg.me{justify-content:flex-end}.msg.other{justify-content:flex-start}.bubble{max-width:60%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.4}.me .bubble{background:#dff7df;color:#222;border-bottom-right-radius:4px}.other .bubble{background:#f0f0f0;color:#222;border-bottom-left-radius:4px}.chat-input{display:flex;margin-top:10px;gap:10px}.chat-input input{flex:1;padding:12px;border-radius:10px;border:1px solid #ddd;outline:none}.chat-input button{padding:12px 20px;background:#000;color:#fff;border:none;border-radius:10px;cursor:pointer;transition:.2s}.chat-input button:hover{background:#333}