/*
 * ABDD Messages — Stage 4.5-B navigation corrections
 * ABDD-STAGE-4-5-B-CSS
 * ABDD-STAGE-4-5-B-CLICK-LAYER
 *
 * Product contract
 * ----------------
 * Desktop portal navigation contains exactly four primary destinations:
 * Home / Groupes / Calendrier / Messages.
 *
 * Matrix-native utilities stay functional. Quick Settings, Threads and the
 * account menu are visually grouped at the far right in that order so Threads
 * occupies the same visual slot as Notifications in ABDD Community.
 *
 * This layer also removes the temporary logo hover treatment, normalizes the
 * account/avatar ring, and keeps the ABDD-owned navigation hit area above any
 * transparent Element SpacePanel layer.
 */

@media (min-width: 1181px) {
  /* Four user-approved portal destinations, centered as one compact group.
     Explicit stacking/pointer ownership prevents an invisible Element layer
     from receiving clicks that visually belong to these ABDD anchors. */
  body.abdd-messages .abdd-portal-navigation {
    position: relative !important;
    z-index: 1010 !important;
    max-width: 520px !important;
    pointer-events: auto !important;
    isolation: isolate !important;
  }

  body.abdd-messages .abdd-portal-nav-link {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  /* Let the anchor own the complete hit target. SVG/text descendants should
     never become competing pointer targets inside Element's React shell. */
  body.abdd-messages .abdd-portal-nav-link > *,
  body.abdd-messages .abdd-portal-nav-link svg,
  body.abdd-messages .abdd-portal-nav-link svg * {
    pointer-events: none !important;
  }

  /* The canonical monogram must not jump, tint or grow on hover. Keep the
     keyboard focus outline from earlier stages, but freeze the logo itself. */
  body.abdd-messages .abdd-global-brand:hover,
  body.abdd-messages .abdd-global-brand:focus-visible {
    background: transparent !important;
  }

  body.abdd-messages .abdd-global-brand-mark,
  body.abdd-messages .abdd-global-brand:hover .abdd-global-brand-mark,
  body.abdd-messages .abdd-global-brand:focus-visible .abdd-global-brand-mark {
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: none !important;
  }

  body.abdd-messages .abdd-global-brand-logo,
  body.abdd-messages .abdd-global-brand:hover .abdd-global-brand-logo,
  body.abdd-messages .abdd-global-brand:focus-visible .abdd-global-brand-logo {
    transform: none !important;
  }

  /*
   * Element v1.12.26 does not render Threads as a direct sibling of every
   * other utility. Grid placement on the SpacePanel therefore cannot reliably
   * position it. Anchor the three native utilities to the 56px desktop header
   * instead. No DOM re-parenting is performed, which keeps React ownership and
   * the original Element event handlers intact.
   *
   * Visual order, left -> right:
   *   Quick Settings | Threads | Account
   */
  body.abdd-messages .abdd-global-nav .mx_QuickSettingsButton,
  body.abdd-messages .abdd-global-nav .abdd-nav-settings {
    position: fixed !important;
    top: 8px !important;
    right: 108px !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 1005 !important;
  }

  body.abdd-messages .abdd-global-nav .mx_ThreadsActivityCentreButton,
  body.abdd-messages .abdd-global-nav .abdd-nav-threads {
    position: fixed !important;
    top: 8px !important;
    right: 58px !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 1006 !important;
  }

  body.abdd-messages .abdd-global-nav .mx_UserMenu,
  body.abdd-messages .abdd-global-nav .abdd-nav-user {
    position: fixed !important;
    top: 8px !important;
    right: 8px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(207, 168, 95, 0.82) !important;
    border-radius: 999px !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    z-index: 1007 !important;
  }

  /* Remove the nested ring/offset that made the gold circle look eccentric. */
  body.abdd-messages .abdd-global-nav .mx_UserMenu > button,
  body.abdd-messages .abdd-global-nav .mx_UserMenu > .mx_AccessibleButton {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.abdd-messages .abdd-global-nav .mx_UserMenu .mx_BaseAvatar,
  body.abdd-messages .abdd-global-nav .mx_UserMenu img {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
    display: block !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }
}