/* Final drawer recovery and avatar-switch choreography. */

@media (min-width: 1061px) {
  /* The compact collapse button deliberately lives outside the 74px rail.
     Keeping every ancestor visible prevents the rail from clipping it. */
  html body.sidebar-collapsed { --drawer-width: 154px; }
  html body.sidebar-collapsed .product-sidebar,
  html body.sidebar-collapsed .product-side-panel,
  html body.sidebar-collapsed .support-side-panel {
    overflow: visible !important;
  }

  html body.sidebar-collapsed .product-sidebar {
    position: relative !important;
    z-index: 2100 !important;
    align-items: center !important;
    gap: 12px !important;
  }

  html body.sidebar-collapsed .sidebar-brand-row {
    position: relative !important;
    width: 244px !important;
    height: 70px !important;
    min-height: 70px !important;
    flex: 0 0 70px !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  html body.sidebar-collapsed #sidebarCollapse,
  html body.sidebar-collapsed #sidebarCollapse:hover,
  html body.sidebar-collapsed #sidebarCollapse:focus-visible,
  html body.sidebar-collapsed #sidebarCollapse.liquid-control,
  html body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-active,
  html body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-entering,
  html body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-exiting {
    position: absolute !important;
    top: 50% !important;
    left: 98px !important;
    display: grid !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #151518 !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 12px 30px rgba(25,32,48,.12) !important;
    pointer-events: auto !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  html body.sidebar-collapsed #sidebarCollapse:hover,
  html body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-active {
    color: #fff !important;
    background: var(--accent) !important;
    box-shadow: 0 14px 30px rgba(6,93,253,.24) !important;
  }
  html body.sidebar-collapsed #sidebarCollapse:active { transform: translateY(-50%) scale(.92) !important; }
  html body.sidebar-collapsed #sidebarCollapse.is-morphing { transform: translateY(-50%) scale(0) !important; }
  html body.sidebar-collapsed #sidebarCollapse .collapse-glyph { opacity: 1 !important; }

  html body.sidebar-collapsed .product-side-panel {
    width: 64px !important;
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    grid-template-rows: 90px 42px 90px !important;
    padding: 6px !important;
    place-items: center !important;
  }

  html body.sidebar-collapsed .sidebar-legal {
    display: grid !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: auto auto 0 !important;
    padding: 0 !important;
    place-items: center !important;
    overflow: visible !important;
  }
  html body.sidebar-collapsed .sidebar-legal-toggle,
  html body.sidebar-collapsed #sidebarLegalToggle {
    display: grid !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    place-items: center !important;
    border-radius: 50% !important;
  }
  html body.sidebar-collapsed .sidebar-legal-menu {
    z-index: 30 !important;
  }

  #profileModal .profile-cover-card.is-avatar-switching .profile-cover::before {
    background:
      radial-gradient(circle at 13% 52%, rgba(255,255,255,.84) 0 2px, transparent 2.5px 14px, rgba(255,255,255,.42) 14.5px 16px, transparent 16.5px 29px),
      linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--profile-next-cover-color) 86%, white) 44%, transparent 100%) !important;
    animation-duration: 820ms !important;
  }
}

@media (max-width: 760px) {
  #mobileProfileContent .m-profile-hero.is-avatar-switching .m-profile-cover::before {
    display: block !important;
    z-index: 3 !important;
    background:
      radial-gradient(circle at 13% 52%, rgba(255,255,255,.84) 0 2px, transparent 2.5px 14px, rgba(255,255,255,.42) 14.5px 16px, transparent 16.5px 29px),
      linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--profile-next-cover-color) 86%, white) 44%, transparent 100%) !important;
    animation-duration: 820ms !important;
  }
}

@keyframes profile-avatar-colour-sweep {
  0% { opacity: 0; transform: translateX(-86%) skewX(-10deg); }
  12% { opacity: .98; }
  74% { opacity: .6; }
  100% { opacity: 0; transform: translateX(86%) skewX(7deg); }
}