/* The boss's Inbox (public/js/mail-ui.js). One scrolling column that works the same on a phone. */
.mail { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 10px; padding: 12px; background: #d6c49c; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .25); }
.mail-head { display: flex; flex-direction: column; gap: 8px; }
.mail-address { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--white); border-radius: 10px; padding: 9px 11px; }
.mail-address b { font: 700 16px/1.2 var(--mono); overflow-wrap: anywhere; flex: 1; min-width: 0; }
.mail-address svg { width: 20px; height: 20px; flex: none; }
.mail-banner { margin: 0; padding: 9px 11px; border-radius: 10px; background: var(--sun); color: var(--ink); font-size: 15px; line-height: 1.35; }
.mail-banner.bad { background: var(--tomato); color: #fff; }
.mail-bar { gap: 8px; align-items: center; }
.mail-folders { display: flex; gap: 6px; flex-wrap: wrap; }
.mail-folders .chip.on { background: var(--ink); color: var(--sun); }
.mail-list { display: flex; flex-direction: column; gap: 8px; }
.mail-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; text-align: left; border: 0; border-radius: 10px; padding: 10px 12px; background: var(--white); color: var(--ink); font: 500 15px/1.3 var(--sans); cursor: pointer; min-height: 56px; }
.mail-row:hover { filter: brightness(1.03); }
.mail-row.unread .mail-who, .mail-row.unread .mail-subject { font-weight: 800; }
.mail-who { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-when { color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.mail-subject { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-snippet { grid-column: 1 / -1; color: var(--ink-3); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); flex: none; }
.mail-tag { background: var(--paper-2); border-radius: 6px; padding: 1px 6px; font: 700 12px var(--cond); text-transform: uppercase; }
.mail-row.out.failed .mail-snippet, .mail-row.out.bounced .mail-snippet, .mail-row.out.complained .mail-snippet { color: var(--tomato-d); }
.mail-thread-subject { font: 400 18px/1.2 var(--display); overflow-wrap: anywhere; flex: 1; min-width: 0; }
.mail-msg { background: var(--white); border-radius: 10px; padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; }
.mail-msg.out { background: #f3f7f1; border-left: 4px solid var(--teal); }
.mail-msg header b { font-size: 15px; overflow-wrap: anywhere; min-width: 0; }
.mail-msg header small { color: var(--ink-3); white-space: nowrap; }
.mail-flags { margin: 0; font: 700 13px/1.3 var(--cond); color: var(--ink-2); }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.45; margin: 0; }
.mail-preview { max-height: 14em; overflow-y: auto; background: var(--paper-2); border-radius: 8px; padding: 8px; }
.mail-frame { width: 100%; min-height: 320px; height: 52vh; border: 2px solid var(--line); border-radius: 8px; background: #fff; }
.mail-files { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.mail-files svg { width: 18px; height: 18px; }
.mail-files a { overflow-wrap: anywhere; }
.mail-reply, .mail-compose, .mail-settings { display: flex; flex-direction: column; gap: 8px; background: var(--white); border-radius: 10px; padding: 11px 12px; }
.mail-reply textarea, .mail-compose textarea { resize: vertical; min-height: 7em; }
.mail-compose label, .mail-settings label { font: 700 14px var(--cond); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.mail-picks { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.mail-pick { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 9px; background: var(--paper-2); font: 700 15px var(--mono); overflow-wrap: anywhere; cursor: pointer; }
.mail-pick input { width: 20px; height: 20px; flex: none; }
.mail-trust { gap: 8px; font-size: 15px; }
.mail-approve-subject { font-weight: 800; }
.mail-domains { display: flex; flex-direction: column; gap: 8px; }
.mail-domain { background: var(--white); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; border-left: 4px solid var(--sun); }
.mail-domain.verified { border-left-color: var(--teal); }
.mail-domain.failed, .mail-domain.conflict { border-left-color: var(--tomato); }
.mail-domain-top { align-items: center; gap: 8px; flex-wrap: wrap; }
.mail-domain-name { display: flex; align-items: center; gap: 6px; font: 700 16px/1.2 var(--mono); min-width: 0; overflow-wrap: anywhere; }
.mail-domain-name svg { width: 18px; height: 18px; flex: none; }
.mail-domain-pill { font: 700 13px var(--cond); text-transform: uppercase; letter-spacing: .03em; background: var(--paper-2); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.mail-domain.verified .mail-domain-pill { background: var(--teal); color: #fff; }
.mail-domain-line { margin: 0; font-size: 15px; line-height: 1.4; }
.mail-dns-list { display: flex; flex-direction: column; gap: 6px; }
.mail-dns { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; background: var(--paper-2); border-radius: 8px; padding: 7px 9px; }
.mail-dns-kind { font: 700 13px var(--cond); text-transform: uppercase; white-space: nowrap; }
.mail-dns-name { font: 700 14px var(--mono); overflow-wrap: anywhere; min-width: 0; }
.mail-dns-ok { color: var(--teal); font-weight: 700; }
.mail-dns-value { grid-column: 1 / -1; font: 13px/1.35 var(--mono); overflow-wrap: anywhere; min-width: 0; }
.mail-domain-from { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.mail-domain-from select { flex: 1; min-width: 0; max-width: 100%; }
.mail-domain-actions { gap: 8px; flex-wrap: wrap; }
.mail-domain-add { align-self: flex-start; }
@media (max-width: 760px) {
  .mail-domain-actions .btn.small, .mail-domain-add { min-height: 40px; }
  .mail { padding: 9px; gap: 8px; }
  .mail-frame { height: 46vh; min-height: 260px; }
  .mail-bar .btn.small { min-height: 40px; }
  .mail-row { min-height: 60px; }
}