/*
 * Wagtail Userbar Responsive Override Patch (Enhanced)
 * Fixes visibility and z-index issues on mobile devices.
 * Targets both class and element tag for Wagtail 7.x compatibility.
 */

wagtail-userbar,
.wagtail-userbar {
  z-index: 99999 !important;

  /* Extremely high z-index */
  display: block !important;
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  min-width: 50px !important;

  /* Ensure it has size */
  min-height: 50px !important;
  background-color: transparent !important;

  /* Avoid blocking if transparent */
}

/*
 * Ensure the trigger button is visible and clickable.
 * Wagtail 7.1+ uses a shadow DOM or specific structure, but if we can target the trigger:
 */
.wagtail-userbar-trigger {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 50px !important;
  height: 50px !important;
  align-items: center;
  justify-content: center;
  background-color: #333 !important;

  /* Default dark background */
  border-radius: 50% !important;
  box-shadow: 0 2px 5px rgb(0 0 0 / 20%) !important;
}

/* Ensure SVG is visible */
.wagtail-userbar-trigger svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  fill: #fff !important;
}