#app { grid-template-columns: 1fr; grid-template-rows: 56px 1fr; }

#sidebar {
  position: fixed; top: 0; left: -260px; width: 260px; height: 100dvh;
  z-index: 100; transition: left 0.25s ease-out;
  padding-top: calc(env(safe-area-inset-top) + 12px);
}
#sidebar.open { left: 0; box-shadow: 0 0 20px rgba(0,0,0,0.2); }

#topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px;
  padding-top: env(safe-area-inset-top);
  height: calc(56px + env(safe-area-inset-top));
  background: #fff; border-bottom: 1px solid #ddd;
  position: sticky; top: 0; z-index: 50;
}
#topbar button { min-width: 44px; min-height: 44px; font-size: 20px; }
#topbar h1 { flex: 1; font-size: 17px; }

/* 画面切替 */
#list-pane, #detail-pane { display: none; }
#app[data-screen="list"] #list-pane { display: block; }
#app[data-screen="detail"] #detail-pane { display: block; }

#mail-list li { padding: 12px; min-height: 64px; }
#mail-list .from { flex: 0 0 100px; }
#mail-list .date { flex: 0 0 64px; font-size: 11px; }

#fab {
  display: flex; position: fixed; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  background: #0078d4; color: #fff; font-size: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  align-items: center; justify-content: center;
  z-index: 40;
}