/* ── DM / Private Messaging ───────────────────────────── */
.dm-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
}
.dm-modal {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; width: 94vw; max-width: 440px; max-height: 85vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.dm-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.dm-header .dm-back-btn {
  background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 4px;
}
.dm-header .dm-back-btn:hover { color: var(--text); }
.dm-header .dm-title {
  flex: 1; font-size: 16px; font-weight: 600; margin: 0;
}
.dm-header .dm-close {
  background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 4px;
}
.dm-header .dm-close:hover { color: var(--text); }

/* Thread list */
.dm-list { flex: 1; overflow-y: auto; }
.dm-thread-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .15s;
}
.dm-thread-row:hover { background: rgba(124,156,255,.05); }
.dm-av {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface, var(--panel-2, #1e2738));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 14px; font-weight: 600;
  color: var(--muted); overflow: hidden;
}
.dm-av img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.dm-thread-info { flex: 1; min-width: 0; }
.dm-thread-name { font-size: 14px; font-weight: 600; }
.dm-thread-preview {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.dm-thread-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }

/* Messages view */
.dm-messages {
  flex: 1; overflow-y: auto; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.dm-msg {
  max-width: 78%; padding: 10px 14px; border-radius: 16px;
  font-size: 14px; line-height: 1.45; word-wrap: break-word;
}
.dm-msg.sent {
  align-self: flex-end; background: var(--accent); color: var(--bg);
  border-bottom-right-radius: 4px;
}
.dm-msg.received {
  align-self: flex-start;
  background: var(--surface, var(--panel-2, #1e2738));
  color: var(--text); border-bottom-left-radius: 4px;
}
.dm-msg .dm-msg-time { font-size: 10px; opacity: .6; margin-top: 4px; }

/* Input bar */
.dm-input-bar {
  display: flex; gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--border);
}
.dm-input-bar .dm-msg-input {
  flex: 1; background: var(--bg); border: 1px solid var(--border);
  border-radius: 20px; color: var(--text); padding: 10px 16px;
  font-size: 14px; outline: none; font-family: inherit;
}
.dm-input-bar .dm-msg-input:focus { border-color: var(--accent); }
.dm-input-bar .dm-send-btn {
  background: var(--accent); color: var(--bg); border: none;
  border-radius: 50%; width: 38px; height: 38px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dm-input-bar .dm-send-btn:hover { filter: brightness(1.1); }

/* Empty state */
.dm-empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.dm-empty-emoji { font-size: 36px; margin-bottom: 8px; }

/* Start conversation button */
.dm-start-btn {
  background: var(--accent); color: var(--bg); border: none;
  border-radius: 10px; padding: 10px 24px; font-size: 14px;
  font-weight: 700; cursor: pointer; font-family: inherit;
}
.dm-start-btn:hover { filter: brightness(1.1); }

/* Friend picker */
.dm-friend-picker { padding: 8px 16px; flex: 1; overflow-y: auto; }
.dm-friend-row {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; border-radius: 10px; padding: 10px 8px;
  transition: background .15s;
}
.dm-friend-row:hover { background: rgba(124,156,255,.08); }
.dm-friend-name { font-size: 14px; font-weight: 600; }