/* Messages module (full-page inbox). Thread-row/composer markup is shared pt- classes (css/portal.css,
 * via js/inbox-shared.js) — this file only styles the page chrome around it. Prefix: msg-. */
.msg-shell { display: flex; flex-direction: column; gap: 4px; }
.msg-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.msg-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.msg-stale-banner {
  border: 1px solid var(--st-blocked);
  background: var(--st-blocked-bg);
  color: var(--st-blocked);
  border-radius: var(--border-radius-md);
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Bottom-right toast for new client messages (distinct from window.APP.toast's plain top toasts —
 * this one carries client/job/preview + a Reply action per the notification contract). */
#msg-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 4000; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.msg-toast {
  min-width: 260px; max-width: 340px;
  background: var(--surface-1);
  border: 1px solid var(--color-border-secondary);
  border-left: 3px solid var(--color-text-warn);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-2);
  padding: 10px 12px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.msg-toast.show { opacity: 1; transform: translateY(0); }
.msg-toast-h { font-size: 12.5px; font-weight: 700; margin-bottom: 2px; }
.msg-toast-body { font-size: 11.5px; color: var(--color-text-secondary); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-toast-actions { display: flex; gap: 6px; }

/* Per-thread stale-alert mute toggle (S-MUTE). Injected into .pt-inbox-row-top by js/messages.js.
   Silences the hourly "N client message(s) waiting over 2h" email for that client/thread. */
.msg-mute-btn {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  padding: 3px 7px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: var(--surface-2);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.msg-mute-btn:hover { background: var(--surface-3); }
.msg-mute-btn:disabled { opacity: 0.5; cursor: default; }
.msg-mute-btn.is-muted {
  border-color: var(--st-blocked);
  background: var(--st-blocked-bg);
  color: var(--st-blocked);
  font-weight: 600;
}