/* ==================== PC端悬浮球样式 ==================== */
@media (min-width: 768px) {
  /* 悬浮球容器 */
  .audition-float-ball {
    position: fixed;
    right: 0.08rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
  }

  /* 悬浮球项目 */
  .audition-float-ball .float-item {
    position: relative;
    width: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .audition-float-ball .float-item img {
    width: 100%;
    display: block;
  }

  /* 默认图片和激活图片切换 */
  .audition-float-ball .float-item .default-img {
    display: block;
  }

  .audition-float-ball .float-item .active-img {
    display: none;
  }

  .audition-float-ball .float-item:hover .default-img {
    display: none;
  }

  .audition-float-ball .float-item:hover .active-img {
    display: block;
  }

  /* 预约试听项悬停效果 */
  .audition-float-ball .audition-item:hover {
    transform: scale(1.05);
  }

  /* 电话提示框 */
  .audition-float-ball .phone-tooltip {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%) scale(0.8);
    background: #fff;
    border-radius: 0.08rem;
    padding: 0.15rem 0.2rem;
    box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    transform-origin: right center;
  }

  .audition-float-ball .phone-tooltip::after {
    content: '';
    position: absolute;
    right: -0.08rem;
    top: 50%;
    transform: translateY(-50%);
    border-width: 0.06rem 0 0.06rem 0.08rem;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
  }

  .audition-float-ball .phone-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
  }

  .audition-float-ball .phone-tooltip .tooltip-label {
    display: block;
    font-size: 0.14rem;
    color: #666;
    margin-bottom: 0.05rem;
  }

  .audition-float-ball .phone-tooltip .tooltip-number {
    display: block;
    font-size: 0.2rem;
    color: #333;
    font-weight: 600;
  }

  /* 返回顶部项 */
  .audition-float-ball .back-to-top-item {
    position: absolute;
    top: 100%;
    left: 0;
  }

  .audition-float-ball .back-to-top-item:hover {
    transform: translateY(-0.05rem);
  }
}

/* 移动端隐藏PC悬浮球 */
@media (max-width: 767px) {
  .audition-float-ball {
    display: none !important;
  }

  /* ==================== 移动端悬浮球样式 ==================== */
  .mobile-float-ball {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  /* 展开状态 */
  .mobile-float-ball.expanded .float-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    animation: slideInRight 0.3s ease;
  }

  .mobile-float-ball.expanded .appointment-btn {
    width: 0.9rem;
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .mobile-float-ball.expanded .appointment-btn:active {
    transform: scale(0.95);
  }

  .mobile-float-ball.expanded .appointment-btn img {
    width: 100%;
    display: block;
  }

  .mobile-float-ball.expanded .phone-btn {
    width: 0.9rem;
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .mobile-float-ball.expanded .phone-btn:active {
    transform: scale(0.95);
  }

  .mobile-float-ball.expanded .phone-btn img {
    width: 100%;
    display: block;
  }

  /* 收起按钮 */
  .mobile-float-ball .collapse-btn {
    width: 0.9rem;
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .mobile-float-ball .collapse-btn:active {
    transform: scale(0.95);
  }

  .mobile-float-ball .collapse-btn img {
    width: 100%;
    display: block;
  }

  /* 展开状态显示收起按钮 */
  .mobile-float-ball.expanded .collapse-btn {
    display: block;
  }

  /* 收起状态的小图标 */
  .mobile-float-ball .collapsed-icon {
    width: 1.08rem;
    cursor: pointer;
    transition: transform 0.2s ease;
    animation: slideInRight 0.3s ease;
  }

  .mobile-float-ball .collapsed-icon:active {
    transform: scale(0.95);
  }

  .mobile-float-ball .collapsed-icon img {
    width: 100%;
    display: block;
    object-fit: cover;
  }

  /* 展开状态隐藏收起图标 */
  .mobile-float-ball.expanded .collapsed-icon {
    display: none;
  }

  /* 收起状态隐藏内容 */
  .mobile-float-ball.collapsed .float-content {
    display: none;
  }

  /* 收起状态隐藏收起按钮 */
  .mobile-float-ball.collapsed .collapse-btn {
    display: none;
  }

  /* 收起状态显示收起图标 */
  .mobile-float-ball.collapsed .collapsed-icon {
    display: block;
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(0.3rem);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}