/* Profile account drawer: opens from the right on authenticated pages. */
body:has(.profile-menu.open) {
  overflow: hidden;
}

body:has(.profile-menu.open)::before {
  display: none;
}

.profile-menu,
.profile-menu.open,
.profile-open .profile-menu {
  position: fixed !important;
  z-index: 1300 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(390px, 92vw) !important;
  height: 100dvh !important;
  max-height: none !important;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 22px 30px !important;
  border: 0 !important;
  border-left: 1px solid #dbe5f2 !important;
  border-radius: 22px 0 0 22px !important;
  box-shadow: -18px 0 48px rgba(18, 42, 78, .2) !important;
  transform: translateX(105%) !important;
  opacity: 1 !important;
  visibility: hidden;
  transition: transform .34s cubic-bezier(.22, .8, .24, 1), visibility 0s linear .34s !important;
  animation: none !important;
}

.profile-menu.open,
.profile-open .profile-menu {
  transform: translateX(0) !important;
  visibility: visible;
  transition-delay: 0s !important;
}

.profile-menu-head {
  min-height: 92px;
  align-items: center !important;
  gap: 13px !important;
  padding: 6px 0 22px !important;
}

.profile-menu-avatar {
  width: 62px !important;
  height: 62px !important;
  flex: 0 0 62px;
  font-size: 22px;
  background: linear-gradient(145deg, #6c7da2, #283d68) !important;
  box-shadow: 0 7px 18px rgba(35, 58, 97, .2);
}

.profile-menu-head > span:nth-child(2) {
  gap: 5px !important;
  font-size: 18px !important;
}

.profile-menu-head small {
  font-size: 13px !important;
}

.profile-menu-head em {
  font-size: 11px !important;
}

.menu-close {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px;
  border-radius: 50%;
  color: transparent !important;
  font-size: 0 !important;
  transition: background .18s ease, transform .18s ease;
}

.menu-close::after {
  content: "×" !important;
  position: static !important;
  display: grid !important;
  place-items: center;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  transform: none !important;
  color: #14294e;
  font: 31px/1 Arial, sans-serif;
}

.menu-close:hover {
  background: #edf4ff;
  transform: rotate(90deg);
}

.profile-usage {
  margin: 0 -22px;
  padding: 17px 22px !important;
  background: #f5f8fd;
  border-bottom: 1px solid #e5ebf3;
  font-size: 13px !important;
}

.profile-menu > a {
  margin: 2px -8px;
  min-height: 48px;
  padding: 12px 14px !important;
  border-radius: 11px !important;
  color: #14294e !important;
  font-size: 15px !important;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.profile-menu > a:hover {
  background: #edf5ff !important;
  color: #0868ed !important;
  transform: translateX(3px);
}

.profile-menu > a span:first-of-type {
  font-weight: 600;
}

.profile-menu .logout {
  margin-top: 15px;
  padding-top: 18px !important;
  border-top: 1px solid #e5ebf3;
}

@keyframes profile-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 520px) {
  .profile-menu,
  .profile-menu.open,
  .profile-open .profile-menu {
    width: min(390px, 94vw) !important;
    border-radius: 18px 0 0 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.profile-menu.open)::before,
  .profile-menu,
  .profile-menu.open,
  .profile-open .profile-menu {
    animation: none !important;
    transition: none !important;
  }
}