/*
 * Private messages (Phase 5): the inbox, a conversation, a new message, blocking and Contact Us,
 * plus the unread count in the top bar and the login box, and "Send message" under a forum post's
 * author.
 *
 * Built from the forum pages' pieces, like forums.css: forum-table colours (#121210 rows, #0f0f0d
 * headers, #363224 rules), the post editor, medbuttons, the avatar frame, gold links and muted
 * text. A conversation is a list of chat rows (David, 2026-10-11): a small avatar, the name and
 * time on one line, the message under it, like the 2018 news box's comments with more room.
 * Every selector is scoped to a class the 2018 homepage never uses (tests/unit/pages-css.test.js
 * checks), so nothing here can move a pixel of it.
 */

/* The unread count after "Messages" (top bar, login box): " (2)", nothing at 0 */
.message-count {
  font-weight: bold;
}

/* The inbox */
.inbox-main .avatar {
  float: left;
  margin: 1px 10px 0 0;
}

.inbox-text {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.inbox-title {
  font-weight: bold;
}

.inbox-table .is-unread .inbox-title {
  color: #fff8c9;
}

.inbox-table .is-unread .inbox-title:hover {
  color: #fff;
}

.inbox-preview {
  margin-top: 2px;
  font-size: 12px;
  color: #b8b19c;
}

.inbox-preview em {
  color: #858176;
}

/* A conversation */
.conversation-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 14px;
}

.conversation-who {
  flex: 1 1 240px;
  min-width: 0;
}

.conversation-heading {
  margin-bottom: 3px;
}

.conversation-guest {
  margin-top: 4px;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.conversation-actions {
  margin-left: auto;
  font-size: 12px;
}

.conversation-more {
  margin: 0 0 10px;
  font-size: 12px;
}

.message-list {
  border: 1px solid #363224;
  border-bottom: 0;
  background-color: #121210;
}

.message {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #363224;
}

/* Its own size, not the row's height */
.message .avatar {
  flex: none;
  align-self: flex-start;
}

.message-main {
  flex: 1 1 auto;
  min-width: 0;
}

.message-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
  font-size: 11px;
  color: #858176;
}

.message-meta .element_username {
  font-size: 12px;
  font-weight: bold;
}

.message-meta .badge-new {
  vertical-align: 0;
}

.message-actions {
  margin-left: auto;
  font-size: 12px;
}

.message-body {
  overflow-wrap: anywhere;
}

.message-body > :last-child {
  margin-bottom: 0;
}

/* Messages that were new when the page opened */
.message.is-new {
  background-color: #161512;
}

.message-removed {
  font-size: 12px;
  font-style: italic;
  color: #858176;
}

.message-visitor {
  color: #858176;
}

.message-send-status {
  align-self: center;
  font-size: 12px;
  color: #b8b19c;
}

/* Contact Us: a roomier form than Settings' */
.contact-form {
  max-width: 640px;
}

/* "Send message" under a forum post's author */
.post-author-message {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
}

/*
 * Phones (below 768px; the one breakpoint, DECISIONS 84). Each conversation in the inbox is a strip
 * like the Members list's: the avatar on the left, the name (or subject), the last message, then
 * the time; the whole strip opens it. In a conversation the rows keep their shape, with bigger
 * text and finger-size links, and the reply box is shorter than a post's.
 */
@media (max-width: 767.98px) {
  /* The inbox */
  .inbox-table,
  .inbox-table tbody,
  .inbox-table tr,
  .inbox-table td {
    display: block;
  }

  .inbox-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .inbox-table tr {
    position: relative;
    min-height: 34px;
    padding: 10px 10px 11px 56px;
    border-bottom: 1px solid #363224;
    background-color: #121210;
  }

  .inbox-table td {
    padding: 0;
    border: 0;
    background: none;
    min-width: 0;
  }

  .inbox-table .inbox-main .avatar {
    position: absolute;
    top: 11px;
    left: 10px;
    float: none;
    margin: 0;
  }

  .inbox-text {
    overflow: visible;
  }

  .inbox-title {
    font-size: 15px;
    line-height: 1.35;
  }

  /* The whole strip opens the conversation. */
  .inbox-title::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .inbox-subtitle {
    font-size: 12px;
  }

  .inbox-preview {
    margin-top: 3px;
    font-size: 13px;
  }

  .inbox-table td.number {
    display: none;
  }

  .inbox-table td.forum-last {
    width: auto;
    min-width: 0;
    margin-top: 3px;
    font-size: 12px;
    color: #858176;
  }

  /* A conversation */
  .conversation-head {
    gap: 8px 10px;
    margin-bottom: 12px;
  }

  .conversation-heading {
    font-size: 17px;
  }

  .conversation-who .forum-meta,
  .conversation-guest {
    font-size: 12px;
  }

  .conversation-who .forum-meta a,
  .conversation-actions a,
  .conversation-actions .link-button {
    display: inline-block;
    padding: 12px 0;
    font-size: 14px;
  }

  .conversation-who .forum-meta a {
    margin: -12px 0;
  }

  .conversation-more a {
    display: inline-block;
    padding: 12px 0;
    font-size: 14px;
  }

  .message {
    padding: 10px;
  }

  .message-meta {
    font-size: 12px;
  }

  .message-meta .element_username {
    font-size: 14px;
  }

  .message-actions a {
    display: inline-block;
    margin: -12px -8px -12px 0;
    padding: 12px 8px;
    font-size: 13px;
    line-height: 20px;
  }

  .message-body {
    font-size: 14px;
  }

  .conversation-reply .editor .input-textarea textarea {
    min-height: 96px;
  }

  .message-send-status {
    flex-basis: 100%;
    font-size: 13px;
  }

  .message-send-status:empty {
    display: none;
  }

  .contact-form {
    max-width: none;
  }

  /* In the author strip above a post: on the right, finger-size. */
  .post-author-message {
    float: right;
    margin: -10px -4px -10px 8px;
    padding: 12px 4px;
    font-size: 13px;
    line-height: 20px;
  }
}