/* MailboxModal — full-screen list of developer messages with a pinned
   "Feedback?" footer the list scrolls behind. Overlay size/position comes
   from .modal-fullscreen (modals.css); this file owns the inside-content
   shape only. Built by features/mailbox.js. */

/* The body wrapper. The fullscreen .modal-body already owns the scroll
   (flex:1 + overflow-y:auto); .mailbox-modal just fills it. The pinned
   feedback footer is a SIBLING of .modal-body inside .modal-container
   (appended after it), so it isn't part of this scroll context. */
.mailbox-modal {
  min-height: 100%;
}

/* Loading / empty states — centered, muted, body-tier type. */
.mailbox-loading,
.mailbox-empty {
  margin: 2rem 0;
  text-align: center;
  font-family: var(--font-family-2);
  font-size: 1rem;
  color: var(--font-color-2);
}

/* ===== Message list ===== */
.mailbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* One message per row — a tappable card. Cream surface + soft shadow,
   matching the carded affordances elsewhere (badge icon tile, etc.). The
   unread dot pins to the left; the subject + meta stack to its right. */
.mailbox-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  /* Flat filled tile — same vocabulary as the main-menu era cards: a
     background fill, no drop shadow / lift. Hover changes the FILL (below)
     rather than offsetting the card. */
  background: var(--background-color-3);
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease-out;
}
.mailbox-item:hover,
.mailbox-item:focus {
  outline: none;
  /* Darker fill on hover — matches the era cards' .era-card:hover. */
  background: var(--background-color-2);
}

/* Unread dot — a small danger-red disc at the row's left edge, vertically
   centered. Removed in place when the message is opened (refreshRow). */
.mailbox-unread-dot {
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--font-color-danger);
}

.mailbox-item-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Per-row delete button — READ rows only (rendered by rowInnerHTML when the
   message has been read). The flexible .mailbox-item-text above pushes it to
   the right edge of the card. Icon sizing comes from the shared
   .trash-trigger-icon rule in modals.css, matching Past Dynasties. The
   negative margin enlarges the tap target without nudging the row layout. */
.mailbox-trash {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  margin: -0.4rem -0.4rem -0.4rem 0;
  border-radius: 6px;
  transition: background 120ms ease-out;
}
.mailbox-trash:hover,
.mailbox-trash:focus {
  outline: none;
  background: var(--background-color-1);
}

/* Subject line — the headline of the row. Read rows render it at normal
   weight; unread rows bold it (see .mailbox-item-unread below). */
.mailbox-item-subject {
  font-family: var(--font-family-2);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--font-color-1);
  /* One line, ellipsized — subjects are authored short, but guard long
     ones from wrapping the row to two lines. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sender · date line under the subject. Muted, smaller, but kept at the
   1rem readability floor per CLAUDE.md (this is read-for-comprehension
   metadata, not a chrome caption). */
.mailbox-item-meta {
  margin-top: 0.15rem;
  font-family: var(--font-family-3);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--font-color-2);
}

/* Unread treatment — bold subject so unread mail reads as "new" at a
   glance, paired with the red dot. */
.mailbox-item-unread .mailbox-item-subject {
  font-weight: 700;
}

/* ===== Pinned feedback footer =====
   A SIBLING of .modal-body inside the flex-column .modal-container,
   appended AFTER the body so it pins to the bottom while the list scrolls
   behind it. A hairline top divider + cream wash mark it off from the
   scrolling list above. flex:0 0 auto so it takes its natural height and
   the .modal-body sibling keeps the remaining space (flex:1 1 auto). */
.mailbox-feedback {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 0 0;
  margin-top: 0.5rem;
  border-top: 1px solid #c8b890;
  text-align: center;
}
.mailbox-feedback-prompt {
  margin: 0;
  font-family: var(--font-family-3);
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--font-color-2);
  max-width: 22rem;
}
/* Action row — [Take Survey] · or · [Email Us]. The two buttons flank a
   small lowercase "or" so they read as alternatives. The row wraps on
   narrow widths (the "or" + buttons reflow) rather than overflowing. */
.mailbox-feedback-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
}
.mailbox-feedback-or {
  flex: 0 0 auto;
  font-family: var(--font-family-3);
  font-size: 1rem;
  color: var(--font-color-2);
}
.mailbox-survey-btn,
.mailbox-feedback-btn {
  flex: 0 1 auto;
  min-width: 9rem;
}

/* ===== Message-detail sub-modal =====
   Opened stacked over the list (stack:true). A small centered modal: the
   subject is the modal title (rendered by openModal), so this wrapper
   holds the sender·date meta line + the prose body. */
.mailbox-detail-meta {
  margin: 0 0 0.85rem;
  font-family: var(--font-family-3);
  font-size: 1rem;
  color: var(--font-color-2);
  text-align: center;
}
.mailbox-detail-body {
  font-family: var(--font-family-2);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--font-color-1);
}
.mailbox-detail-body p {
  margin: 0 0 1rem;
}
.mailbox-detail-body p:last-child {
  margin-bottom: 0;
}