/* ============================================================
   MESSAGES — direct messages between readers
   Loads AFTER styles.css + discover.css + community.css + clubs.css
   (reuses .chat-msg / .chat-bubble / .chat-bar from clubs.css)
   ============================================================ */

.dm-wrap { max-width: 1240px; margin: 0 auto; padding: 28px 40px 40px; }

.dm-head-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.dm-title { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1; }
.dm-sub { font-family: var(--font-ui); font-size: 12px; color: var(--seafoam-dim); letter-spacing: 0.04em; }

.dm-shell {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px;
  align-items: stretch;
  height: calc(100vh - 220px); min-height: 480px;
}
@media (max-width: 900px) { .dm-shell { grid-template-columns: 1fr; height: auto; } }

/* ----- conversation list ----- */
.dm-list {
  background: var(--tide); border: 1px solid var(--fog);
  border-radius: var(--r-md); overflow: hidden;
  display: flex; flex-direction: column;
}
.dm-search {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 14px 10px; padding: 10px 14px;
  background: var(--fog-soft); border: 1px solid var(--fog);
  border-radius: var(--r-pill);
}
.dm-search svg { width: 15px; height: 15px; color: var(--seafoam-dim); flex: none; }
.dm-search input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  font-family: var(--font-ui); font-size: 13px; color: var(--parchment);
}
.dm-search input::placeholder { color: var(--seafoam-dim); }
.dm-convos { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.dm-convos::-webkit-scrollbar { width: 8px; }
.dm-convos::-webkit-scrollbar-thumb { background: var(--fog); border-radius: 4px; }

.dm-convo {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: transparent; border: none; border-radius: var(--r-sm);
  padding: 12px 12px; cursor: pointer; text-align: left;
  transition: background .15s;
}
.dm-convo:hover { background: var(--fog-soft); }
.dm-convo[aria-selected="true"] { background: rgba(116,189,178,0.1); }
.dm-cv-meta { flex: 1; min-width: 0; }
.dm-cv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dm-cv-name { font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; color: var(--parchment); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-cv-time { flex: none; font-family: var(--font-ui); font-size: 10.5px; color: var(--seafoam-dim); }
.dm-cv-snippet {
  font-family: var(--font-body); font-size: 13.5px; color: var(--seafoam-dim);
  margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-convo.unread .dm-cv-snippet { color: var(--parchment); }
.dm-unread-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }

/* ----- thread pane ----- */
.dm-thread {
  background: var(--tide); border: 1px solid var(--fog);
  border-radius: var(--r-md); overflow: hidden;
  display: flex; flex-direction: column;
}
.dm-thread-head {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 20px; border-bottom: 1px solid var(--fog);
}
.dm-th-meta { flex: 1; min-width: 0; }
.dm-th-name { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--parchment); display: flex; align-items: center; gap: 8px; }
.dm-th-handle { font-family: var(--font-ui); font-size: 11.5px; color: var(--seafoam-dim); margin-top: 2px; }
.dm-th-profile {
  flex: none; font-family: var(--font-ui); font-size: 11.5px; font-weight: 600;
  color: var(--seaglass); text-decoration: none; letter-spacing: 0.04em;
}
.dm-th-profile:hover { color: var(--parchment); }

.dm-thread .chat-scroll { flex: 1; height: auto; }

.dm-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--seafoam-dim); padding: 40px;
}
.dm-empty .glyph { font-size: 34px; }
.dm-empty .t { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--parchment); margin-top: 14px; }
.dm-empty .s { font-family: var(--font-body); font-style: italic; font-size: 15px; max-width: 38ch; margin-top: 7px; line-height: 1.6; }

/* ----- new message ----- */
.dm-head-actions { display: flex; align-items: center; gap: 16px; }
.dm-new-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--abyss); background: var(--seaglass); border: none; cursor: pointer;
  padding: 9px 18px; border-radius: var(--r-pill); transition: filter .15s;
}
.dm-new-btn:hover { filter: brightness(1.1); }
.dm-new-btn svg { width: 14px; height: 14px; }

.dm-modal-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(3,7,8,0.72); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.dm-modal {
  width: 430px; max-width: 100%; max-height: 72vh;
  background: var(--tide); border: 1px solid var(--fog); border-radius: var(--r-md);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.51);
}
.dm-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.dm-modal-head h2 { font-family: var(--font-display); font-size: 24px; font-weight: 600; white-space: nowrap; line-height: 1.1; }
.dm-modal-close {
  background: transparent; border: none; color: var(--seafoam-dim); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 6px; border-radius: 50%;
}
.dm-modal-close:hover { color: var(--parchment); }
.dm-modal-sub { font-family: var(--font-body); font-size: 13.5px; color: var(--seafoam-dim); padding: 8px 20px 0; line-height: 1.5; }
.dm-people { flex: 1; overflow-y: auto; padding: 6px 12px 14px; }
.dm-people::-webkit-scrollbar { width: 8px; }
.dm-people::-webkit-scrollbar-thumb { background: var(--fog); border-radius: 4px; }
.dm-person {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: transparent; border: none; border-radius: var(--r-sm);
  padding: 10px 10px; cursor: pointer; text-align: left; transition: background .15s;
}
.dm-person:hover { background: var(--fog-soft); }
.dm-ps-meta { flex: 1; min-width: 0; }
.dm-ps-name { font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; color: var(--parchment); }
.dm-ps-handle { font-family: var(--font-ui); font-size: 11.5px; color: var(--seafoam-dim); margin-top: 2px; }
.dm-rel {
  flex: none; font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--seaglass); border: 1px solid rgba(116,189,178,0.4);
  padding: 4px 9px; border-radius: var(--r-pill);
}
.dm-rel.mutual { color: var(--amber); border-color: rgba(217,164,65,0.4); }
.dm-person.blocked { opacity: 0.42; cursor: not-allowed; }
.dm-person.blocked:hover { background: transparent; }
.dm-rel.blocked { color: var(--seafoam-dim); border-color: var(--fog); }
.dm-people-empty { font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--seafoam-dim); text-align: center; padding: 26px 16px; }

/* ----- spoiler-tagged messages ----- */
.chat-spoiler-btn {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--fog); color: var(--seafoam-dim);
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.chat-spoiler-btn svg { width: 16px; height: 16px; }
.chat-spoiler-btn:hover { color: var(--parchment); }
.chat-spoiler-btn.on { color: var(--amber); border-color: var(--amber); background: rgba(217,164,65,0.12); }
.spoiler-tag {
  display: inline-block; font-family: var(--font-ui); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber);
  margin-bottom: 4px;
}
.chat-text.is-spoiler.veiled { filter: blur(7px); cursor: pointer; user-select: none; }