#mail-modal-overlay.mail-overlay {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(7, 9, 15, 0.78);
  display: none;
  inset: 0;
  justify-content: center;
  opacity: 0;
  padding: 18px;
  position: fixed;
  transition: opacity 0.25s ease;
  z-index: 2300;
}

#mail-modal-overlay.mail-overlay.open { opacity: 1; }

#mail-modal-overlay .mail-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.52);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: min(760px, calc(100vh - 36px));
  max-width: 1120px;
  overflow: hidden;
  position: relative;
  width: min(1120px, calc(100vw - 36px));
}

#mail-modal-overlay .mail-modal-head {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 68px;
  padding: 14px 18px;
}

#mail-modal-overlay .mail-modal-head h2 { font-size: 1.05rem; margin: 0; }
#mail-modal-overlay .mail-modal-head p,
#mail-modal-overlay .mail-meta,
#mail-modal-overlay .mail-excerpt,
#mail-modal-overlay .mail-modal-hint { color: var(--muted); font-size: 0.82rem; line-height: 1.6; }
#mail-modal-overlay .mail-modal-head p { margin: 3px 0 0; }

#mail-modal-overlay .mail-modal-actions { align-items: center; display: flex; gap: 8px; }
#mail-modal-overlay .mail-page-btn,
#mail-modal-overlay .mail-modal-close,
#mail-modal-overlay .mail-reward-claim {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  min-height: 34px;
  padding: 7px 10px;
}

#mail-modal-overlay .mail-modal-close { font-size: 1.05rem; min-width: 34px; padding: 0; }
#mail-modal-overlay .mail-page-btn:hover,
#mail-modal-overlay .mail-modal-close:hover,
#mail-modal-overlay .mail-reward-claim:hover { border-color: rgba(77, 184, 176, 0.68); }
#mail-modal-overlay .mail-page-btn:disabled { cursor: not-allowed; opacity: 0.45; }

#mail-modal-overlay .mail-modal-body { display: grid; grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.45fr); min-height: 0; }
#mail-modal-overlay .mail-list-pane { border-right: 1px solid var(--border); min-height: 0; overflow: auto; padding: 14px; }
#mail-modal-overlay .mail-detail-pane { min-height: 0; overflow: auto; padding: 20px; }
#mail-modal-overlay .mail-list-pane > [hidden],
#mail-modal-overlay .mail-detail-pane > [hidden] { display: none !important; }

#mail-modal-overlay .mail-page-list { display: flex; flex-direction: column; gap: 8px; }
#mail-modal-overlay .mail-list-item { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 11px; text-align: left; width: 100%; }
#mail-modal-overlay .mail-list-item:hover,
#mail-modal-overlay .mail-list-item.active { background: rgba(77, 184, 176, 0.09); border-color: rgba(77, 184, 176, 0.52); }
#mail-modal-overlay .mail-list-title { align-items: center; display: flex; font-weight: 700; gap: 7px; min-width: 0; }
#mail-modal-overlay .mail-list-title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mail-modal-overlay .mail-unread-mark { background: #38d6c5; border-radius: 50%; display: inline-block; flex: 0 0 auto; height: 7px; width: 7px; }
#mail-modal-overlay .mail-badge,
#mail-modal-overlay .mail-status-badge { border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 0.68rem; font-weight: 500; margin-left: auto; padding: 2px 6px; white-space: nowrap; }
#mail-modal-overlay .mail-status-badge { border-color: rgba(77, 184, 176, 0.38); color: var(--accent2); }
#mail-modal-overlay .mail-meta { font-size: 0.72rem; }
#mail-modal-overlay .mail-excerpt { display: -webkit-box; font-size: 0.76rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

#mail-modal-overlay .mail-pagination { align-items: center; display: flex; gap: 8px; justify-content: center; padding: 14px 0 2px; }
#mail-modal-overlay .mail-detail-empty,
#mail-modal-overlay .mail-detail-loading { align-items: center; color: var(--muted); display: flex; justify-content: center; min-height: 100%; text-align: center; }
#mail-modal-overlay .mail-detail h2 { font-size: 1.18rem; margin: 0 0 6px; }
#mail-modal-overlay .mail-detail-content,
#mail-modal-overlay .mail-message p { color: var(--text); font-size: 0.92rem; line-height: 1.85; white-space: pre-wrap; }
#mail-modal-overlay .mail-source-text { border-left: 2px solid rgba(77, 184, 176, 0.55); color: var(--muted); font-size: 0.85rem; line-height: 1.7; margin: 15px 0; padding-left: 11px; white-space: pre-wrap; }
#mail-modal-overlay .mail-message { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; }
#mail-modal-overlay .mail-message:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
#mail-modal-overlay .mail-message b { display: block; font-size: 0.78rem; margin-bottom: 6px; }
#mail-modal-overlay .mail-reward { align-items: center; color: #f2d28c; display: inline-flex; font-size: 0.8rem; font-weight: 700; gap: 5px; margin-top: 6px; }
#mail-modal-overlay .mail-reward--claimable { flex-wrap: wrap; gap: 9px; }
#mail-modal-overlay .mail-reward.is-claimed { color: var(--muted); font-weight: 500; }
#mail-modal-overlay .mail-reward-icon { border-radius: 4px; height: 18px; width: 18px; }
#mail-modal-overlay .mail-reply-box { display: flex; gap: 10px; margin-top: 18px; }
#mail-modal-overlay .mail-thread-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
#mail-modal-overlay .mail-delete-btn { border-color: rgba(225, 101, 101, 0.45); color: #ffaaa6; }
#mail-modal-overlay .mail-delete-btn:hover { border-color: rgba(225, 101, 101, 0.82); }
#mail-modal-overlay .mail-reply-box textarea { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); border-radius: 6px; color: var(--text); flex: 1; min-height: 76px; padding: 9px 10px; resize: vertical; }
#mail-modal-overlay .mail-reply-box textarea:focus { border-color: var(--accent2); outline: none; }
#mail-modal-toast { background: rgba(18, 22, 32, 0.98); border: 1px solid var(--border); border-radius: 6px; bottom: 24px; color: var(--text); left: 50%; opacity: 0; padding: 10px 14px; pointer-events: none; position: fixed; transform: translate(-50%, 10px); transition: opacity 0.18s ease, transform 0.18s ease; z-index: 2310; }
#mail-modal-toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 720px) {
  #mail-modal-overlay.mail-overlay { align-items: flex-end; padding: 0; }
  #mail-modal-overlay .mail-modal { border-bottom: 0; border-left: 0; border-radius: 8px 8px 0 0; border-right: 0; height: min(86vh, 760px); width: 100%; }
  #mail-modal-overlay .mail-modal-body { grid-template-columns: 1fr; grid-template-rows: minmax(190px, 0.75fr) minmax(0, 1.25fr); }
  #mail-modal-overlay .mail-list-pane { border-bottom: 1px solid var(--border); border-right: 0; }
  #mail-modal-overlay .mail-detail-pane { padding: 15px; }
  #mail-modal-overlay .mail-reply-box { flex-direction: column; }
}