/* Only the mail section uses a viewport-sized workspace. */
body:has(#appView:not(.hidden) #section-mail.active) { overflow: hidden; }
#appView:has(#section-mail.active) { height: 100vh; height: 100dvh; min-height: 0; }
.main:has(#section-mail.active) { height: 100%; min-height: 0; padding: 0 12px 12px; display: flex; flex-direction: column; overflow: hidden; }
.main:has(#section-mail.active) > .topbar { display: none; }
#section-mail.active { display: flex; flex: 1; min-height: 0; }
.mail-frame-shell { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.mail-workspace-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 4px; }
.mail-workspace-title, .mail-workspace-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mail-workspace-title > svg { width: 22px; height: 22px; stroke: #82aaff; fill: none; stroke-width: 1.6; }
.mail-workspace-title h2 { font-size: 20px; line-height: 1.2; margin: 0; font-weight: 650; }
.mail-account { color: #bcc8da; font-size: 14px; border-left: 1px solid #2a3340; padding-left: 12px; white-space: nowrap; }
.mail-load-state { color: #a8b5c8; font-size: 12px; margin-right: 4px; white-space: nowrap; }
.mail-load-state[data-state="ready"] { color: #88d9b1; }
.mail-load-state[data-state="ready"]::before { content: ''; display: inline-block; width: 6px; height: 6px; background: #50c68a; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.mail-load-state[data-state="error"] { color: #ff9e9e; }
.mail-tool { height: 36px; min-width: 36px; padding: 7px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #d4deec; background: #111720; border: 1px solid #29323f; border-radius: 8px; cursor: pointer; font: inherit; font-size: 12px; text-decoration: none; white-space: nowrap; }
.mail-tool:hover { background: #1b2638; border-color: #40516b; }
.mail-tool[aria-pressed="true"] { color: #adc7ff; background: #192c4c; border-color: #4369a6; }
.mail-tool svg, .mail-more-menu svg { height: 18px; width: 18px; flex: 0 0 18px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mail-tool:focus-visible, .mail-more-menu a:focus-visible { outline: 2px solid #82aaff; outline-offset: 3px; }
.mail-more { position: relative; }
.mail-more summary { list-style: none; }
.mail-more summary::-webkit-details-marker { display: none; }
.mail-more-menu { position: absolute; right: 0; top: 43px; z-index: 80; width: 275px; padding: 6px; border: 1px solid #344053; border-radius: 10px; background: #151c27; box-shadow: 0 12px 35px #0006; }
.mail-more-menu a { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-radius: 6px; color: #e0e8f5; font-size: 13px; text-decoration: none; }
.mail-more-menu a:hover { background: #22304a; }
.mail-frame-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; border: 1px solid #2a3444; border-radius: 10px; background: #111720; }
#mailFrame { width: 100%; height: 100%; display: block; border: 0; background: #111720; }
.mail-load-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: #111720; color: #e2e9f3; }
.mail-load-error[hidden] { display: none; }
.mail-load-error strong { font-size: 20px; }
.mail-load-error p { margin: 0; max-width: 420px; color: #aab7ca; }
.mail-load-error a { color: #9dbfff; }
@media (min-width: 781px) {
  #appView.mail-focus:has(#section-mail.active) { grid-template-columns: minmax(0, 1fr); }
  #appView.mail-focus:has(#section-mail.active) > .sidebar { display: none; }
}
.mail-frame-shell:fullscreen { padding: 0 12px 12px; background: #08090b; height: 100%; }
.mail-workspace-bar { min-height: 64px; gap: 12px; flex-wrap: wrap; padding: 10px 4px; }
.mail-workspace-title { flex: 1 1 auto; }
.mail-workspace-title h2 { font-size: 20px; letter-spacing: -.02em; }
.mail-account { font-size: 12px; color: var(--muted, #8f98a8); }
.mail-primary-actions { display: flex; align-items: center; gap: 6px; }
.mail-workspace-actions { gap: 6px; }
.mail-tool { border-color: var(--line, #252a34); background: var(--panel, #111318); border-radius: 9px; }
.mail-compose-tool { padding: 0 14px; color: #fff; border-color: #2b66dd; background: linear-gradient(135deg, #2b66dd, #204fb4); font-weight: 600; }
.mail-compose-tool:hover { background: #2b66dd; border-color: #4986ed; }
.mail-tool:disabled, .mail-more-menu button:disabled { cursor: default; opacity: .45; }
.mail-more-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 10px; border: 0; border-radius: 6px; background: transparent; color: #e0e8f5; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.mail-more-menu button:not(:disabled):hover { background: #22304a; }
.mail-more-menu button:focus-visible { outline: 2px solid #82aaff; outline-offset: -2px; }
.mail-more-menu a { border-top: 1px solid #2a3340; margin-top: 4px; }
.mail-frame-stage { border-color: var(--line, #252a34); border-radius: 14px; background: var(--panel, #111318); }
@media (max-width: 1200px) { .mail-load-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
@media (max-width: 1050px) {
  .mail-load-state { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
  .mail-focus-tool span { display: none; }
}
@media (max-width: 780px) {
  #appView:has(#section-mail.active) { display: flex; flex-direction: column; }
  #appView:has(#section-mail.active) > .sidebar { flex: 0 0 auto; }
  #appView:has(#section-mail.active) > .main { flex: 1; padding: 0 6px 6px; }
  .mail-workspace-bar { min-height: 54px; gap: 6px; padding: 6px 2px; }
  .mail-workspace-title { gap: 7px; }
  .mail-workspace-title > svg, .mail-load-state, .mail-focus-tool { display: none; }
  .mail-workspace-title h2 { font-size: 17px; }
  .mail-account { font-size: 12px; padding-left: 8px; }
  .mail-workspace-actions { gap: 5px; }
  .mail-workspace-title { flex: 1; }
  .mail-account { display: none; }
  .mail-folders-tool { display: none; }
  .mail-compose-tool { padding: 7px; }
  .mail-compose-tool span { display: none; }
  .mail-frame-stage { border-radius: 7px; }
  .mail-frame-shell:fullscreen { padding: 0 6px 6px; }
}