.mail-accounts { margin-bottom: 20px; flex-wrap: wrap; }
.mail-heading { margin-bottom: 20px; }
.mail-empty { padding: 24px; }
.mail-empty p { margin-top: 8px; line-height: 1.5; }
.mail-accounts .btn { overflow-wrap: anywhere; min-width: 0; white-space: normal; }
#mail-view > .card-head { flex-wrap: wrap; gap: 12px; }
#mail-view > .card-head > div { min-width: 0; overflow-wrap: anywhere; }
.mail-settings { margin-top: 24px; padding: 20px; }
.mail-settings summary { cursor: pointer; font-weight: 600; }
.mail-settings form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mail-settings input { min-width: 0; max-width: 100%; }
.mail-list { display: grid; }
.mail-row { display: flex; gap: 16px; justify-content: space-between; align-items: start; border: 0; border-bottom: 1px solid var(--line, #dce4ea); padding: 18px; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; min-width: 0; }
.mail-row:hover { background: var(--bg, #f4f8fb); }
.mail-row > span { display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.mail-row small { display: block; }
.mail-message { padding: 22px; overflow-wrap: anywhere; }
.mail-message .card-head { flex-wrap: wrap; }
.mail-message dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.mail-message dd { margin: 0; min-width: 0; }
.mail-body { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.65; }
@media (max-width: 700px) { .mail-row { flex-direction: column; } .mail-row > span:last-child { display: flex; gap: 12px; flex-wrap: wrap; } }
.mail-tools, .mail-folders { display: flex; flex-wrap: wrap; gap: 8px; }
.mail-folders { margin: 16px 0; }
.mail-folders [aria-pressed=true] { background: var(--blue, #153170); color: white; }
.mail-compose { padding: 22px; }
.mail-compose fieldset { display: grid; gap: 10px; border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.mail-compose input, .mail-compose textarea, .mail-move select { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; }
.mail-compose textarea { resize: vertical; }
.mail-compose ul { overflow-wrap: anywhere; padding-left: 20px; }
.mail-compose p { overflow-wrap: anywhere; line-height: 1.5; }
.mail-move { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mail-move select { flex: 1 1 160px; }
#mail-view :is(button,input,textarea,select,summary):focus-visible { outline: 3px solid var(--blue, #153170); outline-offset: 3px; }
#mail-view button { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 700px) { .mail-compose, .mail-message { padding: 16px; } .mail-tools { width: 100%; } }