/* VelChat mobile profile report menu fix
   Keeps desktop untouched. The profile cover itself stays clipped inside its image wrapper,
   but the three-dot dropdown can now render above the profile header on phones. */
@media (max-width: 767px) {
  body.velchat-profile-menu-open .page-margin.profile.wo_user_profile,
  body.velchat-profile-menu-open .wo_user_profile .tag_cover_bg,
  body.velchat-profile-menu-open .wo_user_profile .profile-container,
  body.velchat-profile-menu-open .wo_user_profile .profile-container.tag_cover_bg,
  body.velchat-profile-menu-open .wo_user_profile .profile-container.tag_cover_bg > .container,
  body.velchat-profile-menu-open .wo_user_profile .tag_cover_bg .card.hovercard,
  body.velchat-profile-menu-open .wo_user_profile .cardheader.user-cover,
  body.velchat-profile-menu-open .page-margin.profile.wo_user_profile .profile-container.tag_cover_bg .card.hovercard .cardheader.user-cover {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  body.velchat-profile-menu-open .wo_user_profile .profile-container.tag_cover_bg,
  body.velchat-profile-menu-open .wo_user_profile .tag_cover_bg .card.hovercard,
  body.velchat-profile-menu-open .wo_user_profile .cardheader.user-cover {
    position: relative !important;
    z-index: 25000 !important;
  }

  /* The cover image must still stay inside the cover area. Only the dropdown is allowed to overflow. */
  body.velchat-profile-menu-open .wo_user_profile .cardheader.user-cover .tag_usr_prof_covr,
  body.velchat-profile-menu-open .wo_user_profile .cardheader.user-cover .user-cover-reposition-container,
  body.velchat-profile-menu-open .wo_user_profile .cardheader.user-cover .user-cover-reposition-w,
  body.velchat-profile-menu-open .wo_user_profile .cardheader.user-cover .user-reposition-container {
    overflow: hidden !important;
  }

  body .wo_user_profile .cardheader.user-cover .tag_user_prof_opts,
  body .wo_user_profile .tag_user_prof_opts.open,
  body .wo_user_profile .tag_user_prof_opts.show {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 25020 !important;
  }

  body .wo_user_profile .tag_user_prof_opts.open > .dropdown-menu,
  body .wo_user_profile .tag_user_prof_opts.show > .dropdown-menu,
  body .wo_user_profile .tag_user_prof_opts > .dropdown-menu.show {
    display: block !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    min-width: min(320px, calc(100vw - 36px)) !important;
    max-width: calc(100vw - 36px) !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 25030 !important;
    pointer-events: auto !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
  }

  body.velchat-profile-menu-open .wo_user_profile .tag_page_name_hdr,
  body.velchat-profile-menu-open .wo_user_profile .tag_profile_nav,
  body.velchat-profile-menu-open .wo_user_profile .wow_content:not(.cardheader) {
    position: relative !important;
    z-index: 1 !important;
  }

  body.velchat-profile-menu-open .dropdown-backdrop {
    z-index: 24990 !important;
  }

  #report-user-modal,
  #report_profile {
    z-index: 26060 !important;
  }

  #report-user-modal .modal-dialog,
  #report_profile .modal-dialog {
    margin: max(14px, env(safe-area-inset-top)) 12px 12px !important;
    max-width: calc(100vw - 24px) !important;
  }

  body.modal-open .modal-backdrop {
    z-index: 26050 !important;
  }
}