#mail-view { padding: 0; }
.mail-page { display: flex; flex-direction: column; min-height: 560px; height: calc(100dvh - 76px); background: #fffefa; }
.mail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid #d3d8dc; }
.mail-toolbar form { display: flex; align-items: center; width: min(480px, 100%); border: 1px solid #bcc8d2; background: #fff; }
.mail-toolbar input { min-width: 0; width: 100%; height: 36px; padding: 0 12px; border: 0; outline-offset: -2px; background: transparent; color: #172438; font: inherit; }
.mail-toolbar form .icon-button { flex: 0 0 36px; height: 36px; border: 0; }
.mail-toolbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.mail-toolbar-actions .primary-action { white-space: nowrap; }
.mail-unread-toggle[aria-pressed="true"] { border-color: #27746e; background: #d9e8e4; color: #154c49; }
.mail-status { padding: 10px 22px; border-bottom: 1px solid #cfdae2; background: #eef6f4; color: #204a47; font-size: 13px; }
.mail-status.is-error { background: #fff0ec; color: #913d2d; }
.mail-status.is-success { background: #eaf6ed; color: #24513b; }
.mail-layout { display: grid; grid-template-columns: minmax(172px, 190px) minmax(280px, 340px) minmax(0, 1fr); flex: 1; min-height: 0; }
.mail-folders, .mail-list-pane, .mail-reader { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mail-folders, .mail-list-pane { border-right: 1px solid #d3d8dc; }
.mail-folders { background: #f7f9f8; }
.mail-pane-heading { display: flex; align-items: center; gap: 8px; flex: none; min-height: 52px; padding: 8px 14px; border-bottom: 1px solid #d3d8dc; }
.mail-pane-heading h2 { min-width: 0; margin: 0; font-size: 14px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.mail-pane-heading > span { margin-left: auto; color: #63717c; font-size: 12px; }
.mail-folder-create { width: 28px; height: 28px; margin-left: auto; border-color: #c6d2dc; font-size: 16px; }
.mail-folder-list, .mail-message-list, .mail-message-detail { min-height: 0; overflow: auto; }
.mail-folder-list { padding: 8px 6px; }
.mail-folder-row { display: flex; align-items: center; padding-left: calc(var(--mail-folder-depth) * 13px); }
.mail-folder-expand { flex: 0 0 20px; width: 20px; height: 30px; padding: 0; border: 0; background: none; color: #536475; font-size: 15px; }
.mail-folder-button { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; min-height: 34px; padding: 5px 9px; border: 0; background: none; text-align: left; font-size: 13px; overflow-wrap: anywhere; }
.mail-folder-button:hover { background: #e8efed; }
.mail-folder-button.is-active { background: #d9e8e4; color: #164b48; font-weight: 800; }
.mail-folder-count { margin-left: auto; color: #516474; font-size: 11px; font-weight: 700; }
.mail-list-pane .mail-pane-heading { padding-inline: 16px; }
.mail-message-list { flex: 1; }
.mail-message-item { display: flex; align-items: stretch; border-bottom: 1px solid #e1e5e7; }
.mail-message-check { flex: none; align-self: center; width: 16px; height: 16px; margin: 0 0 0 12px; accent-color: #27746e; }
.mail-message-row { display: block; flex: 1; min-width: 0; padding: 13px 12px; border: 0; background: #fffefa; text-align: left; color: #233246; }
.mail-bulk-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 8px 12px; border-bottom: 1px solid #d3d8dc; background: #f0f6f4; font-size: 12px; }
.mail-bulk-toolbar[hidden] { display: none; }
.mail-bulk-toolbar label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mail-bulk-toolbar select { min-width: 0; flex: 1; padding: 5px; border: 1px solid #bcc8d2; background: #fff; font: inherit; }
.mail-bulk-toolbar button { min-height: 30px; padding: 5px 9px; }
.mail-message-row:hover { background: #f3f7f8; }
.mail-message-row.is-selected { background: #e7f3f2; box-shadow: inset 3px 0 #287b78; }
.mail-message-row.is-unread { box-shadow: inset 3px 0 #d9b744; }
.mail-message-row.is-unread .mail-message-subject, .mail-message-row.is-unread .mail-message-top strong { font-weight: 800; }
.mail-message-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mail-message-top strong, .mail-message-subject, .mail-message-preview { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-message-top strong { font-size: 13px; font-weight: 600; }
.mail-message-top time { flex: none; color: #6e7983; font-size: 11px; }
.mail-message-subject { margin-top: 5px; font-size: 12px; }
.mail-message-preview { margin-top: 3px; color: #6d7780; font-size: 12px; }
.mail-message-attachment { display: inline-block; margin-top: 6px; color: #556a78; font-size: 11px; }
.mail-empty { margin: 0; padding: 28px 18px; color: #64717e; font-size: 13px; }
.mail-load-more { align-self: center; margin: 10px; }
.mail-reader-heading { justify-content: space-between; }
.mail-reader-actions { display: flex; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.mail-reader-actions button, .mail-move-select { min-height: 30px; padding: 4px 8px; font-size: 11px; }
.mail-outlook-link { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 8px; color: #205e8c; font-size: 11px; font-weight: 700; }
.mail-move-select { max-width: 130px; border: 1px solid #b8c8d6; background: #fff; color: #20324a; }
.mail-message-detail { flex: 1; padding: 24px; }
.mail-message-detail h3 { margin: 0 0 17px; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.mail-reader-meta { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; margin: 0; padding-bottom: 18px; border-bottom: 1px solid #d5dce0; font-size: 12px; }
.mail-reader-meta dt { color: #697989; }
.mail-reader-meta dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.mail-reader-body { margin: 20px 0; color: #233246; font: inherit; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.mail-reader-plain a { color: #17639b; overflow-wrap: anywhere; }
.mail-body-frame { display: block; width: 100%; height: min(66vh, 760px); min-height: 380px; margin: 16px 0; border: 1px solid #d4dde4; background: #fff; }
.mail-image-notice { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 8px 12px; border-left: 3px solid #c29728; background: #fff8e8; color: #584b2b; font-size: 12px; }
.mail-reader-attachments { padding-top: 14px; border-top: 1px solid #d5dce0; }
.mail-reader-attachments h4 { margin: 0 0 8px; font-size: 12px; }
.mail-attachment-button { display: block; max-width: 100%; overflow-wrap: anywhere; margin: 5px 0; padding: 7px 9px; border: 1px solid #b7c8d6; background: #fff; color: #233246; text-align: left; font-size: 12px; }
.mail-attachment-button:disabled { opacity: .55; cursor: not-allowed; }
.mail-mobile-folders, .mail-mobile-back { display: none; }
#mail-view :is(button, input, select, a):focus-visible, .mail-compose-dialog :is(button, input, [contenteditable]):focus-visible { outline: 2px solid #17639b; outline-offset: 2px; }
.mail-compose-file { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.mail-compose-file button { flex-shrink: 0; }
.mail-compose-editor[aria-disabled="true"] { opacity: .7; }
.mail-compose-dialog { width: min(760px, calc(100vw - 32px)); max-height: min(90dvh, 900px); border-color: #243752; border-radius: 4px; box-shadow: 7px 7px 0 #12213a33; }
.mail-compose-form { display: flex; flex-direction: column; max-height: min(90dvh, 900px); }
.mail-compose-header { display: flex; align-items: center; justify-content: space-between; flex: none; padding: 12px 18px; border-bottom: 1px solid #d4dce2; background: #f5f8f8; }
.mail-compose-header h2 { margin: 0; font-size: 16px; }
.mail-compose-fields { display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; padding: 16px 18px; }
.mail-compose-fields label { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: start; gap: 10px; font-size: 12px; font-weight: 700; }
.mail-compose-fields input, .mail-compose-fields textarea { width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid #bcc8d2; border-radius: 2px; background: #fff; color: #182b42; font: 13px/1.5 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", sans-serif; }
.mail-compose-fields input[readonly] { background: #f3f6f7; color: #607083; }
.mail-compose-fields textarea { min-height: 230px; resize: vertical; }
.mail-body-label { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: start; gap: 0 10px; font-size: 12px; font-weight: 700; }
.mail-body-label > span { grid-row: span 2; }
.mail-compose-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 5px; border: 1px solid #bcc8d2; border-bottom: 0; background: #f7f9fa; }
.mail-compose-tools button { min-width: 29px; min-height: 27px; border: 1px solid transparent; background: transparent; color: #23364e; font-size: 12px; }
.mail-compose-tools button:hover, .mail-compose-tools button:focus-visible { border-color: #97aabe; background: #fff; }
.mail-link-entry { display: inline-flex; align-items: center; gap: 3px; flex: 1; min-width: 160px; }
.mail-compose-tools .mail-link-entry input { min-width: 0; height: 27px; padding: 2px 6px; }
.mail-compose-editor { min-height: 220px; padding: 12px; border: 1px solid #bcc8d2; background: #fff; color: #182b42; font: 14px/1.55 Arial, "Apple SD Gothic Neo", sans-serif; font-weight: 400; overflow-wrap: anywhere; outline-offset: -2px; }
.mail-compose-editor:empty::before { content: attr(data-placeholder); color: #83909c; pointer-events: none; }
.mail-compose-editor a { color: #17639b; }
.mail-folder-dialog { width: min(420px, calc(100vw - 32px)); }
.mail-folder-dialog .mail-compose-status { padding: 4px 0; }
.mail-compose-fields input[type=file] { padding: 5px; }
.mail-compose-attachments { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 84px; }
.mail-compose-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 7px; border: 1px solid #c6d0d9; background: #f7f9fa; font-size: 11px; overflow-wrap: anywhere; }
.mail-compose-file .text-button { padding: 0; font-size: 11px; }
.mail-compose-status { min-height: 20px; margin: 0; padding: 0 18px; color: #475f70; font-size: 12px; }
.mail-compose-status.is-error { color: #9a3c2d; }
.mail-compose-status.is-success { color: #276b46; }
.mail-compose-actions { display: flex; justify-content: flex-end; gap: 8px; flex: none; padding: 12px 18px; border-top: 1px solid #d4dce2; }
@media (max-width: 1100px) { .mail-layout { grid-template-columns: 160px minmax(240px, 290px) minmax(0, 1fr); } .mail-reader-heading { align-items: flex-start; flex-direction: column; } .mail-reader-actions { justify-content: flex-start; } }
@media (max-width: 700px) {
  .mail-page { min-height: 420px; height: calc(100dvh - 150px); }
  .mail-toolbar { gap: 8px; padding: 8px 10px; }
  .mail-toolbar { flex-wrap: wrap; }
  .mail-toolbar form { flex-basis: 100%; }
  .mail-toolbar-actions { justify-content: flex-end; width: 100%; }
  .mail-toolbar-actions { gap: 4px; }
  .mail-toolbar-actions .primary-action { padding-inline: 9px; }
  .mail-toolbar form { flex: 1; }
  .mail-unread-toggle { padding-inline: 7px; }
  .mail-layout { display: block; }
  .mail-layout > * { width: 100%; height: 100%; border-right: 0; }
  .mail-layout[data-pane="list"] > :not(.mail-list-pane), .mail-layout[data-pane="detail"] > :not(.mail-reader), .mail-layout[data-pane="folders"] > :not(.mail-folders) { display: none; }
  .mail-mobile-folders, .mail-mobile-back { display: inline-flex; }
  .mail-reader-heading { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .mail-reader-actions { width: 100%; }
  .mail-message-detail { padding: 17px; }
  .mail-message-check { width: 24px; height: 24px; }
  .mail-body-frame { min-height: 320px; height: 60dvh; }
  .mail-compose-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .mail-compose-form { height: 100dvh; max-height: 100dvh; }
  .mail-compose-fields { padding: 14px; }
  .mail-compose-fields label { grid-template-columns: 55px minmax(0, 1fr); gap: 7px; }
  .mail-body-label { grid-template-columns: 55px minmax(0, 1fr); gap: 0 7px; }
  .mail-compose-attachments { padding-left: 62px; }
}