/* Mac navigation belongs in the sidebar; phone actions stay at the bottom. */
html[data-navigation-platform] #app > #drafts-page { scroll-padding-block: var(--items-toolbar-height,16px) 12px; }
html[data-navigation-platform="mac"] #app {
  --sidebar: 204px;
  grid-template: calc(56px + var(--safe-top)) minmax(0,1fr) / var(--sidebar) minmax(0,1fr);
}
html[data-navigation-platform="mac"] #app > #mobile-nav { display: none !important; }
html[data-navigation-platform="mac"] #app > #primary-navigation {
  display: flex !important; position: static; inset: auto; grid-area: 2 / 1;
  width: auto; max-height: none; min-height: 0; overflow-y: auto;
  padding: 12px; box-shadow: none; border-right: 1px solid var(--line-soft);
}
html[data-navigation-platform="mac"] #primary-navigation .top-action:not([hidden]) { display: flex !important; }
html[data-navigation-platform="mac"] #primary-navigation .top-action span { display: inline; }
html[data-navigation-platform="mac"] #primary-navigation .top-action { min-height: 44px; height: auto; }
html[data-navigation-platform="mac"] #app > :not(.topbar):not(nav):not(#sidebar-backdrop) { grid-area: 2 / 2; min-width: 0; }
html[data-navigation-platform="mac"] #sidebar-close,
html[data-navigation-platform="mac"] #sidebar-backdrop { display: none !important; }
html[data-navigation-platform="phone"] #app {
  --mobile-nav-height: calc(72px + var(--safe-bottom));
  grid-template: calc(56px + var(--safe-top)) minmax(0,1fr) var(--mobile-nav-height) / minmax(0,1fr);
}
html[data-navigation-platform="phone"] #app > :not(.topbar):not(nav):not(#sidebar-backdrop) { grid-area: 2 / 1; min-width: 0; }
html[data-navigation-platform="phone"] #app > #mobile-nav {
  display: grid !important; grid-area: 3 / 1; grid-template-columns: repeat(9,minmax(44px,1fr));
  justify-content: center; align-items: start; gap: 0;
  padding: 7px calc(8px + var(--safe-right)) calc(7px + var(--safe-bottom)) calc(8px + var(--safe-left));
  background: var(--navigation-surface); border-top: 1px solid var(--line-soft); z-index: 45;
}
html[data-navigation-platform="phone"] #app > #mobile-nav button:not([hidden]) {
  position: relative; display: flex !important; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  min-width: 44px; height: 56px; padding: 6px 2px; border: 0; border-radius: 12px;
  color: var(--muted-2); background: transparent;
}
html[data-navigation-platform="phone"] #app > #mobile-nav button.active { color: var(--blue); background: var(--accent-surface); }
html[data-navigation-platform="phone"] #app > #mobile-nav button > svg { width: 24px; height: 24px; }
html[data-navigation-platform="phone"] #app > #mobile-nav button > strong { font-size: 11px; line-height: 14px; font-weight: 550; }
html[data-navigation-platform="phone"] #app > #mobile-nav button > i { position: absolute; top: 0; left: calc(50% + 5px); min-width: 17px; padding: 1px 4px; font-size: 9px; font-style: normal; line-height: 13px; background: var(--panel-3); color: var(--text); border-radius: 5px; }
html[data-navigation-platform="phone"] #app > #primary-navigation {
  display: none; position: fixed; inset: var(--safe-top) auto var(--safe-bottom) 0;
  width: min(300px,calc(100vw - 44px)); max-height: 100dvh; overflow-y: auto; z-index: 120;
  padding: 10px 12px; border-right: 1px solid var(--line); box-shadow: 16px 0 64px #0006;
}
html[data-navigation-platform="phone"] body.app-navigation-open #app > #primary-navigation { display: flex; }
html[data-navigation-platform="phone"] #sidebar-close { display: inline-flex; align-self: flex-end; min-height: 44px; }
html[data-navigation-platform="phone"] body.app-navigation-open #sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 110; border: 0; border-radius: 0; background: #0007; }
html[data-navigation-platform="phone"] #sidebar-backdrop[hidden] { display: none !important; }
html[data-navigation-platform="phone"] body.keyboard-open #app { grid-template-rows: calc(56px + var(--safe-top)) minmax(0,1fr) 0; }
html[data-navigation-platform="phone"] body.keyboard-open #app > #mobile-nav { visibility: hidden; padding: 0; }
@media(max-width:600px) {
  html[data-navigation-platform="phone"] #app { --mobile-nav-height: calc(132px + var(--safe-bottom)); }
  html[data-navigation-platform="phone"] #app > #mobile-nav { grid-template-columns: repeat(5,minmax(44px,1fr)); grid-auto-rows: 56px; gap: 4px 0; }
}
@media(max-width:1000px) {
  html[data-navigation-platform="mac"] #app { --sidebar: 172px; }
}
@media(max-width:500px) {
  html[data-navigation-platform="mac"] #app { --sidebar: 60px; }
  html[data-navigation-platform="mac"] #app > #primary-navigation { padding: 6px; }
  html[data-navigation-platform="mac"] #primary-navigation .top-action { justify-content: center; padding-inline: 4px; }
  html[data-navigation-platform="mac"] #primary-navigation .top-action span,
  html[data-navigation-platform="mac"] #primary-navigation .navigation-caption { display: none; }
}
@media(max-height:500px) and (min-width:601px) {
  html[data-navigation-platform="phone"] #app { --mobile-nav-height: calc(64px + var(--safe-bottom)); }
  html[data-navigation-platform="phone"] #app > #mobile-nav { padding-block: 3px calc(3px + var(--safe-bottom)); }
  html[data-navigation-platform="phone"] #draft-detail-dialog.viewport-editor .draft-detail-header { padding-block: 4px; gap: 4px; }
  html[data-navigation-platform="phone"] #draft-detail-dialog.viewport-editor .item-recall-tabs { margin-block: 2px; padding: 2px; }
  html[data-navigation-platform="phone"] #draft-detail-dialog.viewport-editor .item-recall-tabs button { min-height: 32px; padding-block: 4px; }
  html[data-navigation-platform="phone"] #draft-detail-dialog.viewport-editor .draft-review-fields { margin-block: 4px; }
  html[data-navigation-platform="phone"] #draft-detail-dialog.viewport-editor .draft-detail-actions { padding-block: 4px; }
}