* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, sans-serif; background: #f5f5f5; }
.container { display: flex; height: 100vh; }
.sidebar { width: 300px; background: #fff; border-right: 1px solid #ddd; overflow-y: auto; }
.sidebar h2 { padding: 15px; border-bottom: 1px solid #eee; }
.conv-item { padding: 10px 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.conv-item:hover { background: #f9f9f9; }
.conv-item.active { background: #e3f2fd; }
.badge { display: inline-block; font-size: 11px; padding: 2px 6px; margin-left: 5px; border-radius: 3px; }
.badge-fb { background: #4267B2; color: white; }
.badge-ig { background: #E4405F; color: white; }
.main { flex: 1; display: flex; flex-direction: column; }
.thread { display: flex; flex-direction: column; height: 100%; background: #fff; }
.thread h3 { padding: 15px; border-bottom: 1px solid #eee; }
#messages { flex: 1; overflow-y: auto; padding: 15px; }
.msg { margin: 10px 0; padding: 10px; border-radius: 8px; max-width: 70%; }
.msg.in { background: #e3f2fd; margin-right: auto; }
.msg.out { background: #c8e6c9; margin-left: auto; }
.reply-box { padding: 15px; border-top: 1px solid #eee; display: flex; gap: 10px; }
.reply-box input { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
.reply-box button { padding: 8px 15px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }