/* fp-menu — popover dropdown attached to the user avatar.
   Two anchors today: the sidebar user button (desktop) and the
   mobile avatar button (mobile). Each menu is positioned relative to
   its own anchor — sidebar menu opens UP (sidebar sits at the bottom
   of the viewport on desktop), mobile menu opens DOWN.

   Pattern is the standard "avatar → menu" you see on Google / Slack /
   GitHub / Linear / Notion. Click outside to close. */

/* Wrapper around the avatar that becomes the positioning anchor */
.fp-user-anchor {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

/* Reset for the avatar-as-button so it inherits avatar styles cleanly */
.fp-user-anchor button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  transition: var(--transition-color);
}

@media (hover: hover) and (pointer: fine) {
  .fp-user-anchor button:hover { background: var(--bg-subtle); }
}

/* Sidebar variant: button takes the full footer width */
.fp-sidebar__footer .fp-user-anchor {
  flex: 1;
  display: flex;
}
.fp-sidebar__footer .fp-user-anchor > button {
  width: 100%;
  padding: var(--space-2);
}

/* The popover panel itself */
.fp-menu {
  position: absolute;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  min-width: 200px;
  z-index: var(--z-overlay);
  /* Subtle pop-in */
  animation: fp-menu-in 140ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top right;
}

@keyframes fp-menu-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .fp-menu { animation: none; }
}

/* Mobile menu opens DOWN from a top-right avatar */
.fp-menu--down-right {
  top: calc(100% + 6px);
  right: 0;
}

/* Sidebar menu opens UP from the bottom user button */
.fp-menu--up {
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  transform-origin: bottom center;
}

/* Menu items — same shape for links and buttons */
.fp-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: var(--transition-color);
}

.fp-menu__item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-tertiary);
}

@media (hover: hover) and (pointer: fine) {
  .fp-menu__item:hover { background: var(--bg-subtle); }
  .fp-menu__item:hover svg { color: var(--text-secondary); }
}

.fp-menu__item--danger {
  color: var(--accent-negative);
}

.fp-menu__item--danger svg { color: var(--accent-negative); }

@media (hover: hover) and (pointer: fine) {
  .fp-menu__item--danger:hover {
    background: var(--accent-negative-soft);
  }
}

.fp-menu__divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-1) 0;
}

.fp-menu__label {
  padding: var(--space-2) var(--space-3) 4px;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  font-weight: var(--fw-bold);
}

/* Caret indicator on the user button (subtle "this opens a menu" hint) */
.fp-user-anchor__caret {
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.fp-user-anchor.is-open .fp-user-anchor__caret {
  transform: rotate(180deg);
}