/* =========================
   WRAPPER
========================= */
.profile-dropdown {
  position: relative;
  display: inline-block;
  z-index: 9999;
}


/* =========================
   PROFILE BUTTON
========================= */
.profile-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);

  padding: var(--space-3xs) var(--space-md);
  border: none;
  border-radius: var(--radius-md);

  cursor: pointer;

  background: var(--gradient-purple-pink);
  color: var(--text-primary);

  font-weight: bold;
  transition: var(--transition-default);

  box-shadow: var(--glow-secondary);
}

.ddb1 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);

  padding: var(--space-3xs) var(--space-md);
  border: none;
  border-radius: var(--radius-md);

  cursor: pointer;

  background: transparent;
  color: var(--text-primary);

  font-weight: bold;
  transition: var(--transition-default);
}

.ddb1:hover {
  transform: translateY(var(--hover-lift));
}

.profile-btn:hover {
  box-shadow: var(--glow-primary);
  transform: translateY(var(--hover-lift));
}


/* =========================
   PROFILE IMAGE / FALLBACK
========================= */
.profile-img,
.profile-fallback {
  width: 34px;
  height: 34px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}

.profile-img {
  object-fit: cover;
  border: var(--space-4xs) solid var(--border-primary);
}

.profile-fallback {
  background: var(--gradient-purple-blue);
  font-size: 15px;
  font-weight: bold;
  color: var(--text-primary);

  border: var(--space-4xs) solid var(--border-primary);
}


/* =========================
   NAME
========================= */
.profile-name {
  font-size: var(--text-fs-sm);
  white-space: nowrap;
  color: var(--text-primary);
}


/* =========================
   DROPDOWN MENU
========================= */
.dropdown-menu {
  position: absolute;
  top: 115%;
  right: 0;

  width: 240px;

  background: var(--bg-secondary);
  backdrop-filter: var(--blur-glass);

  border-radius: var(--radius-lg);
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);

  transition: var(--transition-default);

  box-shadow: var(--glow-secondary);
  border: 1px solid var(--border-subtle);

  z-index: 9999;
}

.dropdown-menu.active {
  opacity: 1;
  z-index: 9999;
  visibility: visible;
  transform: translateY(0);
}


/* =========================
   DROPDOWN HEADER
========================= */
.dropdown-header {
  padding: var(--space-md);
  font-size: var(--text-fs-sm);

  color: var(--text-muted);
  background: var(--bg-glass);
}


/* =========================
   DIVIDER
========================= */
.dropdown-divider {
  height: 1px;
  background: var(--border-subtle);
}


/* =========================
   GUEST STATES
========================= */
.profile-fallback.guest {
  background: var(--color-bg-steel);
  color: var(--text-primary);
}

.profile-btn.guest, .ddb1.guest {
  cursor: default;
  box-shadow: none;
}


/* =========================
   GUEST MENU
========================= */
#guestMenu {
  position: absolute;
  top: 115%;
  right: 0;

  width: 220px;

  background: var(--bg-secondary);
  backdrop-filter: var(--blur-glass);

  border-radius: var(--radius-lg);

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);

  transition: var(--transition-default);

  z-index: 999;
}

#guestMenu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}