/* Compose and account settings use the document scrollbar instead of the fixed inbox pane. */
.email-client-mode:has(.mail-compose-page) main,
.email-client-mode:has(.mail-account-page) main {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.email-client-mode:has(.mail-compose-page) #content,
.email-client-mode:has(.mail-account-page) #content {
  height: auto !important;
  min-height: calc(100vh - 146px);
  overflow: visible !important;
  padding-bottom: 90px !important;
}

.email-client-mode:has(.mail-compose-page) .mail-compose-page,
.email-client-mode:has(.mail-account-page) .mail-account-page {
  overflow: visible;
  margin-bottom: 40px;
}

.email-client-mode:has(.mail-compose-page) .mail-compose-editor {
  min-height: 360px;
  max-height: none;
  overflow: visible;
}

.mail-compose-page > header { flex-wrap: wrap; gap: 10px 14px; }
.mail-html-badge { display: inline-flex; align-items: center; min-height: 27px; padding: 0 10px; border: 1px solid #9dcdaa; border-radius: 999px; background: #edf8f0; color: #28743c; font: 700 11px "Segoe UI", sans-serif; }
.mail-html-badge::before { content: "</>"; margin-right: 6px; color: #1d6330; }
.mail-compose-tools { flex-wrap: wrap; min-height: 44px; height: auto !important; padding: 6px 8px !important; gap: 3px !important; background: #f7f9fc; }
.mail-compose-tools button, .mail-compose-tools select { height: 30px; min-width: 32px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #10264b; font: 600 12px "Segoe UI", sans-serif; }
.mail-compose-tools button:hover, .mail-compose-tools select:hover { border-color: #c7d3e2; background: #fff; }
.mail-compose-tools select { width: 92px; padding: 0 7px; }
.mail-tool-divider { width: 1px; height: 22px; margin: 4px 5px; background: #d4dce7; }
.mail-color-tool { position: relative; display: inline-grid !important; place-items: center; width: 32px; height: 30px; margin: 0 !important; border: 1px solid transparent; border-radius: 4px; font: 700 13px "Segoe UI", sans-serif !important; cursor: pointer; }
.mail-color-tool:hover { border-color: #c7d3e2; background: #fff; }
.mail-color-tool input { position: absolute; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.mail-color-tool::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 4px; height: 3px; background: #122447; }
.mail-color-tool.highlight::after { background: #f1c84a; }
.mail-compose-editor { background: #fff; font: 14px/1.55 Arial, sans-serif; color: #17233a; }
.mail-compose-editor:focus { box-shadow: inset 0 0 0 2px #9ebce4; }
.mail-compose-editor h2 { font: 700 22px/1.3 Arial, sans-serif; }
.mail-compose-editor h3 { font: 700 18px/1.35 Arial, sans-serif; }
.mail-compose-editor table { max-width: 100%; border-collapse: collapse; }
.mail-compose-editor img { max-width: 100%; height: auto; }
.mail-original-quote { margin-top: 24px; padding-left: 16px; border-left: 3px solid #bdc8d7; color: #556278; }
.mail-original-html { color: #25324a; }
.mail-format-note { margin: -2px 0 10px; color: #68768b; font-size: 11px; }