/* ═══════════════════════════════════════════════════
   MOH — Chat Styles
   المحادثات الخاصة
   ═══════════════════════════════════════════════════ */

.chat-page { display: flex; height: calc(100vh - var(--navbar-height)); margin-top: var(--navbar-height); }

/* ─── Chat List ─── */
.chat-list { width: 340px; border-left: 1px solid var(--border-light); background: var(--bg-primary); display: flex; flex-direction: column; flex-shrink: 0; }
.chat-list__header { padding: var(--space-4); border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; }
.chat-list__title { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--text-primary); }
.chat-list__search { padding: var(--space-3) var(--space-4); }
.chat-list__search-input { width: 100%; padding: var(--space-2) var(--space-4); background: var(--bg-tertiary); border: none; border-radius: var(--radius-full); font-size: var(--text-sm); color: var(--text-primary); direction: rtl; }
.chat-list__items { flex: 1; overflow-y: auto; }

/* ─── Chat Item ─── */
.chat-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; transition: background var(--transition-fast); border-bottom: 1px solid var(--border-light); text-decoration: none; }
.chat-item:hover { background: var(--bg-tertiary); }
.chat-item--active { background: var(--primary-50); border-right: 3px solid var(--primary-600); }
[data-theme="dark"] .chat-item--active { background: rgba(99, 102, 241, 0.1); }
.chat-item__avatar { position: relative; flex-shrink: 0; }
.chat-item__online { position: absolute; bottom: 0; left: 0; width: 10px; height: 10px; background: var(--success-500); border: 2px solid var(--bg-primary); border-radius: 50%; }
.chat-item__info { flex: 1; min-width: 0; }
.chat-item__name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); display: flex; align-items: center; justify-content: space-between; }
.chat-item__time { font-size: 10px; color: var(--text-tertiary); font-weight: var(--font-normal); }
.chat-item__preview { font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chat-item__unread { background: var(--primary-600); color: #fff; font-size: 10px; font-weight: var(--font-bold); min-width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* ─── Chat Window ─── */
.chat-window { flex: 1; display: flex; flex-direction: column; background: var(--bg-secondary); }
.chat-active { display: flex; flex-direction: column; height: 100%; }
.chat-active.hidden { display: none; }
.chat-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--text-tertiary); padding: var(--space-8); gap: var(--space-3); }
.chat-empty-state.hidden { display: none; }
.chat-empty-state__icon { opacity: 0.4; }
.chat-empty-state h3 { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-secondary); }
.chat-empty-state p { font-size: var(--text-sm); }
.chat-list__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8); text-align: center; color: var(--text-tertiary); gap: var(--space-2); }
.chat-empty { text-align: center; color: var(--text-tertiary); padding: var(--space-8); }
.chat-empty__icon { font-size: 64px; margin-bottom: var(--space-4); opacity: 0.5; }
.chat-empty__text { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-secondary); margin-bottom: var(--space-2); }

/* ─── Chat Header ─── */
.chat-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-primary); border-bottom: 1px solid var(--border-light); flex-shrink: 0; }
.chat-header__info { flex: 1; }
.chat-header__name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); }
.chat-header__status { font-size: var(--text-xs); color: var(--success-500); }
.chat-header__status--offline { color: var(--text-tertiary); }
.chat-header__actions { display: flex; gap: var(--space-1); }

/* ─── Messages Area ─── */
.chat-messages { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }

/* ─── Message Bubble ─── */
.message { display: flex; gap: var(--space-2); max-width: 70%; animation: fadeInUp 0.2s ease; }
.message--sent { align-self: flex-start; flex-direction: row-reverse; }
.message--received { align-self: flex-end; }
.message__bubble { padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl); font-size: var(--text-sm); line-height: var(--leading-relaxed); word-break: break-word; position: relative; }
.message--sent .message__bubble { background: var(--gradient-primary); color: #fff; border-bottom-left-radius: var(--radius-sm); }
.message--received .message__bubble { background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border-light); border-bottom-right-radius: var(--radius-sm); }
.message__time { font-size: 10px; color: var(--text-tertiary); margin-top: 2px; text-align: left; }
.message--sent .message__time { text-align: right; color: rgba(255,255,255,0.7); }
.message__avatar .avatar { width: 28px; height: 28px; font-size: 10px; }

/* Date divider */
.chat-date-divider { text-align: center; padding: var(--space-2) 0; }
.chat-date-divider span { font-size: var(--text-xs); color: var(--text-tertiary); background: var(--bg-secondary); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); }

/* ─── Chat Input ─── */
.chat-input { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--bg-primary); border-top: 1px solid var(--border-light); flex-shrink: 0; }
.chat-input__field { flex: 1; padding: var(--space-3) var(--space-4); background: var(--bg-tertiary); border: 1px solid transparent; border-radius: var(--radius-xl); font-size: var(--text-sm); color: var(--text-primary); resize: none; min-height: 44px; max-height: 120px; direction: rtl; transition: all var(--transition-fast); }
.chat-input__field:focus { background: var(--bg-primary); border-color: var(--primary-300); }
.chat-input__actions { display: flex; gap: var(--space-1); }
.chat-input__btn { width: 44px; height: 44px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast); border: none; background: none; color: var(--text-tertiary); }
.chat-input__btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.chat-input__btn--send { background: var(--gradient-primary); color: #fff; }
.chat-input__btn--send:hover { box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3); }
.chat-input__btn--send:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-input__btn svg { width: 20px; height: 20px; }

/* ─── Mobile ─── */
@media (max-width: 768px) {
  .chat-list { width: 100%; }
  .chat-list--hidden { display: none; }
  .chat-window--hidden { display: none; }
  .chat-header__back { display: flex; }
  .chat-page { height: calc(100vh - var(--navbar-height) - var(--bottom-nav-height)); }
}
@media (min-width: 769px) {
  .chat-header__back { display: none; }
}