.mail-action { max-width: 880px; }
.mail-action [hidden] { display: none !important; }
.mail-action > .willchange { display: none; }
.mail-action .mail-action-selection, .mail-action .mail-action-options { border: 0; border-bottom: 1px solid var(--line); padding: 0; margin: 0 0 16px; }
.mail-action summary { min-height: 44px; box-sizing: border-box; padding: 12px 0; cursor: pointer; color: var(--muted); }
.mail-action summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mail-action #out { margin-top: 12px; }
.mail-action #out .mail-action-review h2 { font-size: 22px; line-height: 1.35; margin: 0 0 18px; overflow-wrap: anywhere; text-transform: none; letter-spacing: normal; }
.mail-action-review { max-width: 76ch; }
.mail-action-addresses { display: grid; gap: 8px; margin: 0 0 24px; font-size: 14px; }
.mail-action-addresses > div { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: 12px; }
.mail-action-addresses dt { color: var(--muted); }
.mail-action-addresses dd { margin: 0; overflow-wrap: anywhere; }
.mail-action-message { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; font-size: 16px; padding: 20px 0; border-block: 1px solid var(--line); margin-bottom: 20px; }
.mail-action .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mail-action button, .mail-action input, .mail-action select { min-height: 44px; }
.mail-action #go { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.mail-action-status:empty { display: none; }
.mail-action-review-options { margin: 0 0 16px; }
.mail-action-review-options > .mail-action-selection { margin: 0; padding-inline: 12px; }
.mail-action-review-options > #go { margin: 8px 0 12px; }
.mail-reader { max-width: 880px; }
.mail-reader > .next { margin-bottom: 20px; }
.mail-reader[data-mail-reader-state="draft"] > .next {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface);
}
.mail-reader[data-mail-reader-state="draft"] > .next h2 { margin: 0; }
.mail-reader[data-mail-reader-state="draft"] > .next .nextnote { flex-basis: 100%; margin: 0; }
.mail-reader > .next h2 { text-transform: none; letter-spacing: normal; }
.mail-reader-details { border-top: 1px solid var(--line); margin-top: 12px; }
.mail-reader-details > summary { cursor: pointer; min-height: 44px; box-sizing: border-box; padding: 12px 0; }
.mail-reader-details > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mail-reader-details > .allactions { margin-top: 12px; }
.mail-reader .mail-action-addresses { margin-bottom: 16px; }
.mail-reader .mail-action-message { margin-bottom: 12px; }
.mail-action-review .pending { border-left: 3px solid var(--focus); padding: 18px; background: var(--surface); }
.mail-action-review .ok, .mail-action-review .err { padding: 18px; }
.mail-action-review .ok h2, .mail-action-review .err h2, .mail-action-review .pending h2 { font-size: 20px; }
.mailbox-check { padding: 8px 0; }
.mailbox-check button { width: 100%; min-height: 44px; }
@media(max-width: 600px) {
  .mail-action #out .mail-action-review h2 { font-size: 20px; }
  .mail-action-message { padding: 16px 0; }
  .mail-action .actions button { flex: 1 1 auto; }
}