/* 右侧悬浮栏容器：固定定位 + 垂直居中 */
.float-sidebar {
  position: fixed;
  right: 20px;          /* 距离右侧间距，可调整 */
  top: 50%;             /* 垂直居中基准 */
  transform: translateY(-50%); /* 精确垂直居中 */
  display: flex;
  flex-direction: column;
  gap: 10px;            /* 图标之间的间距 */
  z-index: 9999;        /* 确保层级最高 */
}

/* 单个图标容器：圆形 + 悬停渐变 */
.float-item {
  width: 48px;
  height: 48px;
  background-color: #ccc; /* 图标默认背景色 */
  border-radius: 50%;      /* 圆形效果 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;         /* 鼠标手势 */
  position: relative;      /* 用于子元素绝对定位 */
  transition: background-color 0.3s ease;
}

/* 图标 SVG 样式：白色填充 */
.float-icon svg {
  width: 24px;
  height: 24px;
  fill: #fff; /* 图标颜色 */
}

/* 电话提示框：色背景 + 悬停淡入 */
.phone-tooltip {
  position: absolute;
  right: 100%;          /* 向左侧展开 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  background-color: rgb(210,21,26); /* 背景，匹配设计 */
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  margin-right: 10px;   /* 与图标间距 */
  white-space: nowrap;  /* 禁止换行 */
  opacity: 0;           /* 初始隐藏 */
  visibility: hidden;
  transition: all 0.3s ease;
}
.phone-item:hover {
  background-color: rgb(210,21,26); /* 悬停时背景变 */
}
.phone-item:hover .phone-tooltip {
  opacity: 5;
  visibility: visible; /* 显示提示框 */
}

/* 信息图标：跳转链接 + 悬停加深 */
.message-item {
  text-decoration: none; /* 清除链接下划线 */
}
.message-item:hover {
  background-color: rgb(210,21,26); /* 悬停背景加深 */
}
/* 信息提示框：黑色背景 + 白色文字 */
.tooltip-message {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(210,21,26,1); /* 半透明黑色背景 */
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  margin-right: 10px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  font-size: 14px;
  z-index: 10; /* 确保显示在最上层 */
}
.message-item:hover .tooltip-message {
  opacity: 1;
  visibility: visible;
}

/* 二维码提示框：白色背景 + 阴影 */
.qr-tooltip {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff; /* 白色背景 */
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* 阴影增强层次 */
  margin-right: 10px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.qr-tooltip img {
  width: 120px; /* 二维码尺寸，可调整 */
  display: block;
}
.qr-item:hover {
  background-color: rgb(210,21,26); /* 悬停背景加深 */
}
.qr-item:hover .qr-tooltip {
  opacity: 1;
  visibility: visible;
}

/* 回到顶部：悬停加深 */
.top-item:hover {
  background-color: rgb(210,21,26);
}

/* 响应式优化（手机端适配） */
@media (max-width: 768px) {
  .float-sidebar {
    right: 10px; /* 缩小右侧间距 */
  }
  .float-item {
    width: 40px;
    height: 40px;
  }
  .float-icon svg {
    width: 20px;
    height: 20px;
  }
  .phone-tooltip {
    padding: 6px 10px;
    font-size: 12px;
  }
  .qr-tooltip img {
    width: 100px;
  }
}