:root{--mf-primary-2:#20b07d}

/* ==========================================
   1. PC 端现代 SaaS 风 (右下角圆角方块)
   ========================================== */
.mf-float-contact {
  position: fixed;
  right: 30px;
  bottom: 40px; /* 核心改变：从垂直居中移到右下角！完全不挡内容 */
  z-index: 998;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* 方块之间的呼吸间距 */
  
  /* 滑动显示动画：从下方轻盈浮现 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* JS 触发后的显示状态 */
.mf-float-contact.mf-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 隐藏那根多余的分割线（方块堆叠不需要分割线） */
.mf-divider { display: none; }

/* 内部按钮：现代圆角方块 */
a.mf-float-item, a.mf-float-item:link, a.mf-float-item:visited {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 12px; /* Apple 级别的高级圆角方块 */
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06); /* 极柔和的弥散阴影 */
  border: 1px solid rgba(0,0,0,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #64748b; /* 高级灰图标 */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  -webkit-tap-highlight-color: transparent;
  outline: 0 !important;
}

.mf-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.mf-svg-icon { width: 22px; height: 22px; display: block; color: currentColor; transition: transform 0.3s ease; }

/* 主推按钮 Inquiry：全场焦点 */
a.mf-float-item.inquiry, a.mf-float-item.inquiry:link, a.mf-float-item.inquiry:visited {
  background: var(--mf-primary-2);
  color: #fff;
  box-shadow: 0 6px 18px rgba(32,176,125,0.35);
  border: none;
}

/* 极简深色 Tooltip 提示框 */
.mf-float-item .mf-label {
  position: absolute;
  right: 58px; /* 浮在方块左侧 */
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #1e293b;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.mf-float-item .mf-label::after {
  content: ''; position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
  border-width: 5px 0 5px 5px; border-style: solid; border-color: transparent transparent transparent #1e293b;
}

/* ==========================================
   2. 交互状态 (干净的高级反馈)
   ========================================== */
@media (hover: hover) {
  /* 悬浮时方块轻微上浮，阴影加深 */
  .mf-float-item:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.12); }
  
  /* 只有图标亮起，不搞花里胡哨的背景色块 */
  a.mf-float-item.wechat:hover { color: #1fc15f; }
  a.mf-float-item.email:hover { color: #3b82f6; }
  a.mf-float-item.whatsapp:hover { color: #25d366; }
  a.mf-float-item.telegram:hover { color: #2aa7e8; }
  a.mf-float-item.back-to-top:hover { color: #0f172a; }
  
  /* Inquiry 悬浮加深 */
  a.mf-float-item.inquiry:hover { background: #178a64; box-shadow: 0 8px 24px rgba(32,176,125,0.4); }
  
  /* 显示提示框 */
  .mf-float-item:hover .mf-label { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
}

/* 防卡色补丁 */
a.mf-float-item.wechat:active, a.mf-float-item.wechat:focus { background: transparent; color: #1fc15f; }
a.mf-float-item.email:active, a.mf-float-item.email:focus { background: transparent; color: #3b82f6; }
a.mf-float-item.whatsapp:active, a.mf-float-item.whatsapp:focus { background: transparent; color: #25d366; }
a.mf-float-item.telegram:active, a.mf-float-item.telegram:focus { background: transparent; color: #2aa7e8; }
.mf-float-item:focus:not(:focus-visible), .mf-mobile-item:focus:not(:focus-visible) { outline: 0 !important; transform: none !important; }

/* ==========================================
   2. 移动端原生 App 沉浸式底部 (保持不变)
   ========================================== */
.mf-mobile-contact {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 998;
  background: rgba(255,255,255,.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 0; box-shadow: 0 -4px 20px rgba(0,0,0,.05); border: none; border-top: 1px solid rgba(0,0,0,.06);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 4px; grid-template-columns: repeat(5, 1fr); align-items: stretch;
}
a.mf-mobile-item, a.mf-mobile-item:active, a.mf-mobile-item:focus, a.mf-mobile-item:hover, a.mf-mobile-item:link, a.mf-mobile-item:visited {
  min-height: 50px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-decoration: none; color: #64748b; background: transparent; gap: 4px; transition: all .2s ease; padding: 6px 2px;
  -webkit-tap-highlight-color: transparent; outline: 0 !important; -webkit-appearance: none; appearance: none;
}
.mf-mobile-label { font-size: 11px; line-height: 1; font-weight: 500; color: #94a3b8; }
a.mf-mobile-item.inquiry, a.mf-mobile-item.inquiry:active, a.mf-mobile-item.inquiry:focus, a.mf-mobile-item.inquiry:hover, a.mf-mobile-item.inquiry:link, a.mf-mobile-item.inquiry:visited {
  background: var(--mf-primary-2); color: #fff; box-shadow: 0 4px 12px rgba(32,176,125,.25);
}
.mf-mobile-item.inquiry .mf-mobile-label { color: #fff; }
@media (hover: none) {
  a.mf-mobile-item:active { background: rgba(0,0,0,.04); transform: scale(.95); }
  a.mf-mobile-item.inquiry:active { background: #178a64; }
}
@media (max-width: 768px) {
  .mf-float-contact { display: none !important; }
  .mf-mobile-contact { display: grid; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
}