/* سبک پایه برای چت دوطرفه */
:root {
  --bg: #f5f7fa;
  --card: #fff;
  --me: #0b93f6;
  --me-text: #fff;
  --them: #e9eef7;
  --them-text: #333;
  --border: #e6e6e6;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: Arial, sans-serif; background: var(--bg); direction: rtl; }

.chat-app { display:flex; flex-direction:column; max-width: 1100px; margin: 0 auto; min-height: 100vh; }
.chat-header { display:flex; justify-content: space-between; align-items: center; padding: 12px 16px; background:#fff; border-bottom:1px solid var(--border); position: sticky; top:0; z-index:10; }
.logout-btn { text-decoration:none; color:#fff; background:#e74c3c; padding:8px 12px; border-radius:6px; }

.chat-body { display:flex; flex: 1; min-height: 70vh; }
.sidebar { width: 260px; min-width: 220px; padding: 16px; border-right:1px solid var(--border); background:#fff; }
.sidebar h4 { margin:0 0 6px; }
#users-list { list-style:none; padding:0; margin:0; }
#users-list li { margin:6px 0; }
#users-list a { text-decoration:none; color:#333; }

.chat-panel { flex:1; display:flex; flex-direction:column; padding: 0; background:#f2f3f7; }
.chat-title { padding:14px 16px; background:#fff; border-bottom:1px solid var(--border); }
.messages { flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:8px; background:#f2f3f7; }
.bubble { max-width: 70%; padding:10px 12px; border-radius:12px; line-height:1.4; }
.bubble.me { align-self:flex-end; background: var(--me); color: var(--me-text); border-top-right-radius:0; }
.bubble.them { align-self:flex-start; background: var(--them); color: var(--them-text); border-top-left-radius:0; }

.input-area { display:flex; padding:8px; gap:8px; background:#fff; border-top:1px solid var(--border); }
#message-input { flex:1; padding:12px; border:1px solid var(--border); border-radius:8px; }
#send-btn { padding:12px 16px; border:none; border-radius:8px; background:#5a9bd5; color:#fff; cursor:pointer; }

@media (max-width: 800px) {
  .chat-body { flex-direction:column; }
  .sidebar { width:100%; border-right:none; border-bottom:1px solid var(--border); display:none; }
  .chat-panel { width:100%; }
}