.top-right-contacts{
  position: fixed;
  top: 20px;        /* 右上角定位 */
  right: 20px;
  display: flex;
  flex-direction: column;   /* 纵向排列 */
  gap: 12px;
  z-index: 9999;   /* 悬浮在所有页面内容之上 */
  pointer-events: auto;
  background: transparent;  /* 自身无背景，不遮挡页面 */
}

.contact-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #111;
  width: 72px;
  font-family: system-ui, -apple-system, "Helvetica Neue", Arial;
}

/* 1. 调整图标容器（白框）的大小或边距 */
.icon-box{
  width: 54px !important;       /* 将原先的 72px 缩小并统一外框尺寸 */
  height: 54px !important;      /* 统一外框高度 */
  aspect-ratio: 1 / 1;
  padding: 0 !important;        /* 清除内边距，让图标充满白框 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffffcc;         /* 半透明白色方块 */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  backdrop-filter: blur(4px);     /* 背景模糊，使方块看起来悬浮 */
  border: 1px solid rgba(0,0,0,0.04);
  overflow: hidden;             /* 超出部分隐藏，防止图标溢出 */
}

/* 2. 修复内部 SVG 的大小限制并让其填满 */
.icon-box svg{
  width: 100% !important;
  height: 100% !important;
  stroke: currentColor;
  fill: none;
}

/* 3. 让内部图片按比例填满白框 */
.icon-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;          /* 保证图片按比例完整填充 */
}

.contact-item:hover .icon-box,
.contact-item:focus .icon-box{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
  background: #fff;
}

.contact-label{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1;
  user-select: none;
  color: #222;
}

@media (max-width: 520px){
  .top-right-contacts{
    top: 14px;
    right: 14px;
    gap: 10px;
  }
  .contact-item{ width: 56px; }
  .icon-box{ width: 56px !important; height: 56px !important; border-radius: 8px; }
  .contact-label{ font-size: 11px; }
}