.woot-widget-bubble {
  bottom: 80px !important;
  height: 40px !important;
  width: 128px !important;
  border-radius: 4px !important;
  background-image: url("./online_customer_service_normal.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

.woot-widget-bubble svg {
  display: none !important;
}

.woot--close::before {
  left: 25px !important;
  top: 14px !important;
}

.woot--close::after {
  top: 0 !important;
  left: 0px !important;
  display: block !important;
  height: 40px !important;
  margin: 0px !important;
  width: 128px !important;
  background-image: url("./online_customer_service_close.png") !important;
  transform: none !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
}

.woot-widget-holder,
.woot-widget-bubble,
.woot-elements--right {
  right: 60px !important;
}

.woot-widget-holder.woot-elements--right {
  right: 60px !important;
}

/* 气泡拖拽支持:禁止触摸滚动手势抢走指针、禁止长按呼出菜单;拖拽中关闭过渡 */
.woot-widget-bubble {
  touch-action: none !important;
  -webkit-touch-callout: none !important;
}

.woot-widget-bubble.cw-dragging {
  transition: none !important;
}

@media screen and (max-width: 768px) {
  .woot-widget-holder {
    bottom: 0 !important;
    height: 66.66667vh !important;
    top: auto !important;
  }

  .woot-widget-holder.woot-elements--right {
    right: 0 !important;
  }

  .woot-widget-bubble {
    display: block !important;
    height: 50px !important;
    margin: 0px !important;
    width: 50px !important;
    background: url("./chat.png") no-repeat center !important;
    background-size: contain !important;
    bottom: 100px !important;
    border-radius: 50% !important;
  }

  .woot-widget-bubble svg {
    display: none !important;
  }

  .woot--close {
    width: 30px !important;
    height: 30px !important;
    top: 10px !important;
    right: 10px !important;
  }

  .woot--close::before,
  .woot--close::after {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 16px !important;
    height: 2px !important;
    display: block !important;
    background: #666 !important;
  }

  .woot--close::after {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  .woot--close::before {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }
}