.xy-clientarea-service-float {
  position: fixed;
  z-index: 980;
  box-sizing: border-box;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

.xy-clientarea-service-float *,
.xy-clientarea-service-float *::before,
.xy-clientarea-service-float *::after {
  box-sizing: border-box;
}

.xy-clientarea-service-float button {
  margin: 0;
  font: inherit;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.xy-clientarea-service-float .xy-service-dock-item[hidden],
.xy-clientarea-service-float .xy-clientarea-mobile-service-entry[hidden] {
  display: none !important;
}

.xy-clientarea-service-float .xy-service-dock-icon-top {
  --xy-service-dock-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4.5 19.2 12l-1.6 1.5-4.5-4.7V20h-2.2V8.8l-4.5 4.7L4.8 12 12 4.5Z'/%3E%3C/svg%3E");
}

.xy-clientarea-mobile-service-entry {
  display: none;
}

@media (min-width: 768px) {
  .xy-clientarea-service-float .xy-service-dock {
    margin: 0;
  }
}

@media (max-width: 767px) {
  html body .xy-clientarea-service-float {
    top: auto !important;
    right: 14px !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    left: auto !important;
    width: auto !important;
    transform: none !important;
  }

  .xy-clientarea-service-float .xy-service-dock {
    display: none !important;
  }

  .xy-clientarea-service-float .xy-clientarea-mobile-service-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    padding: 4px 3px 5px;
    gap: 1px;
    color: #26364f;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #dceafd;
    border-radius: 14px;
    box-shadow: 0 7px 20px rgba(83, 136, 197, 0.22);
  }

  .xy-clientarea-service-float .xy-clientarea-mobile-service-entry:active {
    background: #f3f8ff;
    transform: translateY(1px);
  }

  .xy-clientarea-mobile-service-icon {
    display: block;
    width: 30px;
    height: 30px;
    background: #fff0da url("/web/xiaoyue/assets/img/service/dock-service-center-v1443.png") center / 39px 39px no-repeat;
    border-radius: 50%;
  }

  .xy-clientarea-mobile-service-text {
    display: block;
    max-width: 52px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}