@layer layout {
/* ── User popup menu ───────────────────────────────────── */
.user-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 10px;
  right: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 -4px 24px oklch(var(--shadow-color) / 0.10), 0 8px 24px oklch(var(--shadow-color) / 0.08);
  z-index: 200;
  overflow: hidden;
  display: none;
  animation: menuUp 0.18s cubic-bezier(.22,.68,0,1.1) both;
}
.user-menu--open { display: block; }

@keyframes menuUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.user-menu-header {
  padding: 12px 14px 10px;
}
.user-menu-name { font-size: 13px; font-weight: 600; color: var(--text); }
.user-menu-email { font-size: 11px; color: var(--faint); margin-top: 1px; }

.user-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast);
  text-decoration: none;
}
.user-menu-item:hover { background: var(--bg); }
.user-menu-item--danger { color: var(--danger-fg); }
.user-menu-item--danger:hover { background: var(--danger-bg); }

.user-menu-icon {
  font-size: 12px;
  color: var(--faint);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.user-menu-item--danger .user-menu-icon { color: oklch(60% 0.1 8); }
}