/* Messages: a conversation list and a chat, in liquid glass. */
.msg-root { color: var(--text); }
.msg-wrap {
  display: grid;
  grid-template-columns: 380px 1fr;
  min-height: 560px;
  height: min(74vh, 700px);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0.09));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.45), 0 20px 50px rgba(8, 3, 24, 0.4);
}
.msg-list-col { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid rgba(255, 255, 255, 0.16); background: rgba(10, 6, 24, 0.25); }
.msg-list-head { padding: 1.1em 1.2em 0.7em; }
.msg-list-head h2 { margin: 0; font-size: 1.3rem; font-weight: 900; }
.msg-list { flex: 1; overflow-y: auto; padding: 0.3em 0.6em 0.8em; }

.msg-row {
  display: flex; align-items: center; gap: 0.75em; width: 100%;
  padding: 0.7em 0.7em; margin-bottom: 0.3em; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 16px;
  color: var(--text); font: inherit; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.msg-row:hover { background: rgba(255, 255, 255, 0.08); }
.msg-row.active { background: rgba(242, 184, 79, 0.14); border-color: rgba(242, 184, 79, 0.5); }
.msg-row.unread .msg-snippet { color: #fff; font-weight: 800; }
.msg-row-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15em; }
.msg-row-top { display: flex; align-items: center; gap: 0.5em; }
.msg-row-top b { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-gm { font-style: normal; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.1em; color: #1a1230; background: var(--gold); border-radius: 999px; padding: 0.1em 0.55em; }
.msg-snippet { font-size: 0.82rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35em; flex: none; }
.msg-time { font-size: 0.72rem; color: var(--text-muted); }
.msg-badge { min-width: 22px; text-align: center; font-size: 0.74rem; font-weight: 900; color: #1a1230; background: #ff9db0; border-radius: 999px; padding: 0.1em 0.5em; box-shadow: 0 0 12px rgba(255, 157, 176, 0.6); }

.msg-avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 1.5rem; background: linear-gradient(135deg, #5b3fb5, #2a1a4d); border: 2px solid rgba(255, 255, 255, 0.25); }
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg-avatar.lg { width: 50px; height: 50px; }

.msg-empty, .msg-thread-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4em; padding: 2.2em 1.4em; text-align: center; color: var(--text-muted); }
.msg-empty strong, .msg-thread-empty strong { color: var(--text); font-size: 1.05rem; }
.msg-thread-empty { height: 100%; }

.msg-thread-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.msg-thread-head { display: flex; align-items: center; gap: 0.8em; padding: 0.9em 1.2em; border-bottom: 1px solid rgba(255, 255, 255, 0.16); background: rgba(10, 6, 24, 0.2); }
.msg-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.msg-who b { font-size: 1.02rem; }
.msg-who span { font-size: 0.78rem; color: var(--text-muted); }
.msg-link { font-size: 0.8rem; font-weight: 800; color: var(--gold); text-decoration: none; border: 1px solid rgba(242, 184, 79, 0.5); border-radius: 999px; padding: 0.3em 0.9em; }
.msg-link:hover { background: var(--gold); color: #1a1230; }
.msg-report { font: inherit; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 0.3em 0.9em; cursor: pointer; }
.msg-report:hover { color: #ff9db0; border-color: #ff9db0; }
.msg-back { display: none; font: inherit; font-weight: 800; color: var(--gold); background: none; border: 0; cursor: pointer; padding: 0.2em 0.4em 0.2em 0; }

.msg-log { flex: 1; overflow-y: auto; padding: 1.1em 1.2em; display: flex; flex-direction: column; gap: 0.6em; }
.msg-bubble { max-width: 78%; padding: 0.65em 0.95em 0.5em; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.2); }
.msg-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.msg-bubble time { display: block; margin-top: 0.25em; font-size: 0.68rem; opacity: 0.7; }
.msg-bubble.theirs { align-self: flex-start; background: rgba(255, 255, 255, 0.1); border-bottom-left-radius: 6px; }
.msg-bubble.mine { align-self: flex-end; background: linear-gradient(135deg, rgba(242, 184, 79, 0.42), rgba(255, 140, 120, 0.3)); border-color: rgba(242, 184, 79, 0.55); border-bottom-right-radius: 6px; }
.msg-bubble.mine time { text-align: right; }

.msg-compose { display: grid; grid-template-columns: 1fr auto; gap: 0.5em 0.7em; align-items: end; padding: 0.9em 1.2em 0.8em; border-top: 1px solid rgba(255, 255, 255, 0.16); background: rgba(10, 6, 24, 0.2); }
.msg-compose textarea, .msg-modal-box textarea {
  width: 100%; font: inherit; color: var(--text); resize: none; padding: 0.7em 0.9em; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(10, 6, 24, 0.45);
}
.msg-compose textarea:focus, .msg-modal-box textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242, 184, 79, 0.2); }
.msg-count { grid-column: 1 / -1; justify-self: end; color: var(--text-muted); font-size: 0.7rem; }

/* the rail buttons that open Messages show a dot when something is unread */
.me-rail-btn .msg-rail-badge { margin-left: auto; min-width: 20px; text-align: center; font-size: 0.7rem; font-weight: 900; color: #1a1230; background: #ff9db0; border-radius: 999px; padding: 0.05em 0.5em; box-shadow: 0 0 12px rgba(255, 157, 176, 0.6); }

/* "Message <name>" window */
body.msg-modal-open { overflow: hidden; }
.msg-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1em; background: rgba(8, 4, 20, 0.72); backdrop-filter: blur(6px); }
.msg-modal-box { width: min(520px, 100%); padding: 1.4em 1.6em 1.5em; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.28); background: linear-gradient(135deg, rgba(60, 40, 110, 0.94), rgba(24, 14, 50, 0.96)); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.4), 0 30px 80px rgba(0, 0, 0, 0.6); color: var(--text); }
.msg-modal-box h3 { margin: 0 0 0.3em; font-size: 1.3rem; font-weight: 900; }
.msg-modal-help { margin: 0 0 1em; font-size: 0.88rem; color: rgba(255, 255, 255, 0.8); }
.msg-modal-status { min-height: 1.2em; margin: 0.5em 0 0; font-size: 0.82rem; font-weight: 700; color: #ff9db0; }
.msg-modal-btns { display: flex; justify-content: flex-end; gap: 0.7em; flex-wrap: wrap; margin-top: 0.8em; }
.msg-modal .gm-pill, .msg-modal-btns .gm-pill { font: inherit; font-weight: 800; font-size: 0.85rem; cursor: pointer; color: var(--text); padding: 0.55em 1.15em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.12); }

@media (max-width: 760px) {
  .msg-wrap { grid-template-columns: 1fr; height: 78vh; }
  .msg-wrap .msg-thread-col { display: none; }
  .msg-wrap.thread-open .msg-list-col { display: none; }
  .msg-wrap.thread-open .msg-thread-col { display: flex; }
  .msg-back { display: inline-block; }
  .msg-bubble { max-width: 90%; }
}