* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; }
#app { display: flex; height: 100vh; }
.sidebar { width: 300px; background: #f0f2f5; padding: 20px; overflow-y: auto; }
.conversation { padding: 10px; cursor: pointer; border-bottom: 1px solid #ddd; }
.conversation:hover { background: #e4e6eb; }
.chat { flex: 1; display: flex; flex-direction: column; }
#messages { flex: 1; padding: 20px; overflow-y: auto; }
.message { padding: 10px; margin: 5px 0; background: white; border-radius: 10px; }
.input-area { padding: 20px; background: white; border-top: 1px solid #ddd; display: flex; }
.input-area input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 20px; }
.input-area button { margin-left: 10px; padding: 10px 20px; background: #0084ff; color: white; border: none; border-radius: 20px; cursor: pointer; }
.badge { background: red; color: white; padding: 2px 6px; border-radius: 10px; font-size: 12px; float: right; }
.time { font-size: 11px; color: #999; float: right; }