/* 首页、接入指南及文章页共用的联系弹窗与技术支持入口。 */
#contact-dialog {
  width: min(640px, calc(100vw - 32px), calc((100dvh - 32px) * 640 / 993));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  aspect-ratio: 640 / 993;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: white;
  color: #25212b;
  margin: auto;
  text-align: center;
  box-shadow: 0 24px 70px #1f103133;
  font-family: inherit;
}
#contact-dialog::backdrop {
  background: #00000073;
  backdrop-filter: blur(4px);
}
#contact-dialog > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
  border-radius: inherit;
}
.contact-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #ffffffb3;
  border-radius: 50%;
  background: #ffffffd9;
  color: #332d3c;
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.contact-close:hover {
  background: #fff;
}
.contact-close:focus-visible,
.floating-support:focus-visible {
  outline: 3px solid #7652d8;
  outline-offset: 4px;
  border-radius: 50%;
}
.floating-support {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 250;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 62px;
  height: 62px;
  border: 1px solid #ffffff40;
  border-radius: 50%;
  background: #7652e8eb;
  color: #fff;
  box-shadow: 0 10px 28px #49318040;
  backdrop-filter: blur(10px) saturate(120%);
  text-decoration: none;
  transition: transform 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out;
}
.floating-support span {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
}
.floating-support:hover {
  transform: translateY(-2px);
  background: #6840de;
  box-shadow: 0 12px 32px #49318055;
}
@media (min-width: 1024px) {
  #contact-dialog {
    width: min(512px, calc((100vw - 32px) * 0.8), calc((100dvh - 32px) * 512 / 993));
  }
}
@media (max-width: 640px) {
  .floating-support {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 58px;
    height: 58px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .floating-support {
    transition: none;
  }
}
@media print {
  #contact-dialog,
  .floating-support {
    display: none !important;
  }
}