:root {
  --base-size: 16px; /* 基准字体大小（默认1rem = 16px） */
}

.float-window {
  position: fixed;
  right: 0;
  bottom: calc(6.21vw - 1.125rem); /* 改为 rem 单位（50px ≈ 3.125rem） */
  z-index: 100;
}

.float-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.float-item {
  width: 4.375rem; /* 70px → 4.375rem */
  height: 4.375rem; /* 70px → 4.375rem */
  background: #4eb9f6;
  margin-bottom: 0.0625rem; /* 1px → 0.0625rem */
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
}

.float-item:hover .icon {
  filter: brightness(100);
}

.icon-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-decoration: none;
}

.float-item .icon-container span {
  font-size: 0.75rem; /* 12px → 0.75rem */
  margin: 0;
}

.icon {
  width: 1.5625rem; /* 25px → 1.5625rem */
  height: 1.5625rem; /* 25px → 1.5625rem */
  object-fit: contain;
  margin-bottom: 0.25rem; /* 4px → 0.25rem */
}

.qr-popup {
  position: absolute;
  right: 3.75rem; /* 60px → 3.75rem */
  top: 50%;
  transform: translateY(-50%) scale(0);
  background: #fff;
  padding: 0.625rem; /* 10px → 0.625rem */
  border-radius: 0.25rem; /* 4px → 0.25rem */
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1); /* 10px → 0.625rem */
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;
  z-index: 200;
}

.icon-container:hover .qr-popup {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}

.qr-code {
  width: 7.5rem; /* 120px → 7.5rem */
  height: 7.5rem; /* 120px → 7.5rem */
  display: block;
}

.online-chat span {
  display: none;
}

.float-item .online-chat span {
  display: inline;
  font-size: 0.75rem; /* 12px → 0.75rem */
  margin-left: 0.3125rem; /* 5px → 0.3125rem */
}

#backToTop {
  display: none;
}

#backToTop.visible {
  display: block;
}









/* 收缩状态样式 */
.float-window.collapsed {
  transform: translateX(100%) translateY(-50%); /* 向右隐藏 */
}

.collapse-btn {
  position: absolute;
  left: -30px;
  color: #ffffff;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 60px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px 0 0 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.collapse-btn:hover {
  background: rgba(0, 0, 0, 0.9);
}

.arrow_btn {
  color: white;
  font-size: 20px;
  transition: transform 0.3s;
}

.float-menu {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(91, 130, 118, 0.1);
  border-radius: 8px 0 0 8px;
}