#mailbox-menu-open, #mailbox-menu-close, .mailbox-menu-backdrop { display: none; }

@media (max-width: 780px) {
  .app-shell { grid-template-rows: minmax(0, 1fr); }
  #mailbox-menu-open, #mailbox-menu-close { display: inline-grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; font-size: 22px; }
  .topbar .crumb { flex: 1; min-width: 0; }
  .topbar .crumb b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .top-actions { flex-shrink: 0; }
  #logout-mobile { display: none; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    width: min(340px, calc(100vw - 44px)); height: 100dvh;
    box-sizing: border-box; padding: max(20px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
    background: var(--paper, #f5f5f0); border-right: 1px solid var(--line);
    visibility: hidden; transform: translateX(-100%); pointer-events: none;
  }
  #mailbox-menu-close { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 10px; }
  .sidebar .wordmark { padding: 0 48px 24px 4px; font-size: 22px; }
  .sidebar .compose-open { min-height: 44px; margin: 0 2px 18px; padding: 10px 12px; font-size: 14px; }
  .sidebar .nav-label { display: block; }
  .sidebar .mailbox-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .sidebar .domain-mailboxes { display: block; }
  .sidebar .domain-heading { min-height: 44px; padding: 10px 6px; }
  .sidebar .mailbox-button { min-height: 44px; padding: 10px 13px; }
  .sidebar .add-domain { min-height: 44px; margin-top: 10px; }
  .sidebar .sidebar-bottom { display: flex; margin-top: 14px; }
  .mailbox-menu-open .sidebar { visibility: visible; transform: none; pointer-events: auto; }
  .mailbox-menu-open .mailbox-menu-backdrop { display: block; position: fixed; inset: 0; z-index: 50; background: rgb(24 24 24 / 40%); touch-action: none; }
}