html > body > aside.control-dock {
  position: absolute;
  left: 50%;
  bottom: env(safe-area-inset-bottom);
  z-index: 4;
  width: min(calc(100vw - 1rem), 980px);
  transform: translate(-50%, 0);
  translate: 0 0;
  visibility: visible;
  pointer-events: none;
  transition:
    opacity var(--transition-time-long),
    transform var(--transition-time-long),
    translate var(--transition-time-long),
    visibility 0s;

  > .toolbar-row,
  > .pages {
    pointer-events: auto;
  }

  &.menu-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    pointer-events: none;
    transition:
      opacity var(--transition-time-long),
      transform var(--transition-time-long),
      visibility 0s var(--transition-time-long);

    > .toolbar-row,
    > .pages {
      pointer-events: none;
    }
  }

  &.menu-hidden.has-persistent-settings {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);

    > .pages,
    > .toolbar-row > .vibe-button,
    > .toolbar-row > .toolbar-shell > .garden-controls,
    > .toolbar-row > .toolbar-shell > nav.buttons > button:not(.settings),
    > .toolbar-row > .toolbar-shell > nav.buttons > .export-status {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    > .toolbar-row,
    > .toolbar-row > .toolbar-shell,
    > .toolbar-row > .toolbar-shell > nav.buttons {
      pointer-events: none;
    }

    > .toolbar-row > .toolbar-shell > nav.buttons > button.settings {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }
  }
}