// Form actions pinned to the bottom of the viewport while the page scrolls, so
// Next/Save is always in thumb reach. On phones it sits just above the fixed
// bottom nav (56px + safe-area inset, see Layout.jsx); the negative margins
// stretch it across <main>'s gutter.
function StickyActionBar({ children }) {
  return (
    <div className="sticky bottom-[calc(3.5rem+env(safe-area-inset-bottom))] z-10 -mx-4 border-t border-border bg-surface px-4 py-3 md:bottom-0 md:-mx-8 md:px-8">
      <div className="flex items-center justify-end gap-3">{children}</div>
    </div>
  )
}

export default StickyActionBar