/* --- override.css v2 (mobile-first overlap fix) --- */

/* Post button: always on top & above safe-area */
.post-button{
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483647; /* extremely high to beat most stacking contexts */
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0); /* create its own stacking context for reliability */
}

/* While the event is active, create a generous bottom safe area for content */
.event-active .main{
  padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
}

/* Small screens: shift and slightly scale the event button to avoid the post button area */
@media (max-width: 480px){
  .event-button{
    transform: translateY(-24px) scale(0.9);
    bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }
}

/* Overlay click behavior:
   - Container doesn't intercept clicks by default
   - Foreground content still interactive
*/
.event-overlay{
  pointer-events: none;
}
.event-overlay .overlay-content,
.event-overlay [role="dialog"],
.event-overlay [data-overlay-content]{
  pointer-events: auto;
}

/* Optional: raise z-index if your overlay content must stay above normal UI, but keep post-button clickable */
.event-overlay,
.event-overlay .overlay-content{
  z-index: 9998; /* post-button is higher at 2147483647 */
}