/* 右侧浮动菜单容器的核心样式 */
.right-floating-menu {
  position: fixed; /* 固定定位：使菜单不随页面滚动而移动 */
  right: 20px; /* 距离浏览器右侧边缘20px */
  top: 50%; /* 顶部与浏览器视口50%高度对齐 */
  transform: translateY(-50%); /* 垂直方向上移自身高度的50%，实现完全垂直居中 */
  z-index: 1000; /* 层级设置为1000，确保菜单显示在其他元素上方 */
  width: 80px; /* 菜单容器宽度为80px，适配内部图标和文字 */
  transition: width 0.3s ease; /* 当容器宽度变化时，添加0.3秒的平滑过渡效果 */
}

/* 浮动菜单项的基础样式设置 */
.menu-xuanfucaiidan {
  display: block; /* 块级元素：使每个菜单项独占一行 */
  width: 100%; /* 宽度占满父容器（.right-floating-menu） */
  padding: 12px 0; /* 上下内边距12px，左右0，控制菜单项的高度和内部间距 */
  margin-bottom: 8px; /* 下方外边距8px，使菜单项之间保持间隔 */
  background-color: #fff; /* 背景色为白色，增强与页面的区分度 */
  color: #333; /* 文字颜色为深灰色，保证可读性 */
  text-align: center; /* 内容（图标和文字）水平居中对齐 */
  border-radius: 10px; /* 10px圆角，使菜单项边角更圆润，视觉更友好 */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 轻微阴影效果，增强立体感，阴影透明度0.1 */
  cursor: pointer; /* 鼠标悬停时显示手型指针，提示该元素可点击 */
  transition: /* 定义过渡动画：当以下属性变化时触发平滑过渡 */
    transform 0.3s ease, /* 变形（位移/缩放）变化时，过渡时长0.3秒，缓动函数ease */
    background-color 0.2s; /* 背景色变化时，过渡时长0.2秒 */
}

/* 浮动菜单项的鼠标悬停状态样式 */
.menu-xuanfucaiidan:hover {
  transform: translateX(-5px) scale(1.05); /* 向左移动5px并放大1.05倍，增强交互反馈 */
  background-color: #f0f7ff; /* 背景色变为浅蓝白色，与默认状态区分 */
}

/* 响应式布局：针对移动设备（手机）的样式调整 */
@media (max-width: 767px) and (pointer: coarse) {
  .right-floating-menu {
    display: none; /* 手机设备隐藏右侧浮动菜单 */
  }
}

/* 定义图标抖动动画的关键帧（更大幅度） */
@keyframes shake {
  0%, 100% { transform: translateX(0); } /* 动画开始和结束时，图标不偏移 */
  10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); } /* 这些时间点，图标向左偏移8px（幅度增大） */
  20%, 40%, 60%, 80% { transform: translateX(8px); } /* 这些时间点，图标向右偏移8px（幅度增大） */
}

/* 菜单项内部图标的样式设置（包含抖动动画） */
.menu-xuanfucaiidan i {
  display: block; /* 块级元素：使图标独占一行，与文字分离 */
  font-size: 28px; /* 图标字体大小28px，控制视觉大小 */
  width: 100%; /* 宽度占满父容器 */
  max-width: 40px; /* 最大宽度限制为40px，避免过度拉伸 */
  margin: 0 auto 8px; /* 水平居中，与文字保持8px间距 */
  text-align: center; /* 图标自身内容居中 */
  /* 图标加载时的抖动动画设置 */
  animation: shake 0.8s ease-in-out; /* 应用shake动画，时长0.8秒 */
  animation-iteration-count: 1; /* 动画只执行1次 */
}