<template>
  <view class="native-danmu-container">
    <!-- 弹幕显示区域 -->
    <view
      class="danmu-display-area"
      :style="{ height: containerHeight + 'rpx' }"
    >
      <!-- 弹幕轨道 -->
      <view
        v-for="(track, trackIndex) in tracks"
        :key="trackIndex"
        class="danmu-track"
        :style="{ top: trackIndex * trackHeight + 'rpx', height: trackHeight + 'rpx' }"
      >
        <!-- 轨道中的弹幕 -->
      <view
        v-for="danmu in track.danmus"
        :key="danmu.id"
        class="danmu-item"
        :id="'danmu-' + danmu.id"
        :style="getDanmuStyle(danmu, trackIndex)"
        @tap="handleDanmuClick(danmu)"
      >
          <!-- 弹幕内容 -->
          <view class="danmu-content">
            <!-- 头像 -->
            <view class="danmu-avatar-container">
              <image
                :src="danmu.data.avatar"
                class="danmu-avatar"
                mode="aspectFill"
              />
            </view>

            <!-- 信息区域 -->
            <view class="danmu-info">
              <!-- 标题行 -->
              <view class="danmu-title-row">
                <text class="family-name">{{ danmu.data.familyName }}</text>
              </view>

              <!-- 介绍 -->
              <text class="family-intro">{{ danmu.data.familyIntro }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
import Taro from '@tarojs/taro'
// 导入接口
import { getStepLeaderboardAPI } from '@/api/points'
// 默认头像
const defaultAvatar = 'https://cdn.ipadbiz.cn/lls_prog/images/%E5%85%A8%E5%AE%B6%E7%A6%8F3_%E5%89%AF%E6%9C%AC.jpg?imageMogr2/strip/quality/60'

// Props
const props = defineProps({
  // 弹幕容器高度
  containerHeight: {
    type: Number,
    default: 400
  },
  // 是否显示控制面板
  showControls: {
    type: Boolean,
    default: true
  },
  // 自定义弹幕数据
  customComments: {
    type: Array,
    default: () => []
  },
  // 弹幕速度 (rpx/s)
  danmuSpeed: {
    type: Number,
    default: 200  // 提高默认速度，让弹幕移动更流畅
  },
  // 轨道数量
  trackCount: {
    type: Number,
    default: 6  // 适当减少轨道数量，确保有足够间距
  }
})

// Emits
const emit = defineEmits(['danmu-click', 'danmu-hover'])

// 响应式数据
const isPlaying = ref(false)
const danmuId = ref(0)
const trackHeight = ref(110) // 适配最多3行文字显示，确保弹幕之间有足够间距
const animationTimers = ref(new Map()) // 存储动画定时器
// 统一移动相关常量，避免魔法数不一致
const CONTAINER_WIDTH = 750
const DANMU_WIDTH = 350
const EXTRA_DISTANCE = 120 // 额外移动距离，确保完全移出视图
// 关闭边缘淡出，保持在视图内始终不改变透明度
const FADE_DURATION = 0
const SYSTEM_INFO = Taro.getSystemInfoSync()
const WINDOW_WIDTH = SYSTEM_INFO.windowWidth

// px 转 rpx
const toRpx = (px) => (px * CONTAINER_WIDTH) / WINDOW_WIDTH
// 获取弹幕宽度 - 增强版，提供更安全的默认值
const getDanmuWidth = (danmu) => {
  if (danmu.widthRpx && danmu.widthRpx > 0) {
    return danmu.widthRpx
  }
  // 如果没有测量到宽度，使用更保守的默认值
  // 根据内容长度动态估算，避免过短导致重叠
  const contentLength = danmu.data?.familyName?.length || 0
  const estimatedWidth = Math.max(DANMU_WIDTH, contentLength * 30 + 100) // 每字符约30rpx + 100rpx边距
  return Math.min(estimatedWidth, DANMU_WIDTH * 2) // 最大不超过2倍默认宽度
}
// 重新计算时长，保证速度一致
const recalculateDuration = (danmu) => {
  const width = getDanmuWidth(danmu)
  const totalDistance = CONTAINER_WIDTH + width + EXTRA_DISTANCE
  danmu.duration = (totalDistance / (props.danmuSpeed * 0.6)) * 1000
}
// 测量弹幕真实宽度（px），存为 rpx - 增强版，支持重试和更保守的默认值
const measureDanmuWidth = (danmu, retryCount = 0) => new Promise((resolve) => {
  const maxRetries = 3
  const retryDelay = 50 // 50ms 重试间隔
  
  try {
    const selector = `#danmu-${danmu.id} .danmu-content`
    Taro.createSelectorQuery().select(selector).boundingClientRect(rect => {
      if (rect && rect.width && rect.width > 0) {
        danmu.widthRpx = toRpx(rect.width)
        resolve(getDanmuWidth(danmu))
      } else if (retryCount < maxRetries) {
        // 测量失败，延迟重试
        setTimeout(() => {
          measureDanmuWidth(danmu, retryCount + 1).then(resolve)
        }, retryDelay)
      } else {
        // 重试失败，使用更保守的默认宽度（比实际内容更大）
        danmu.widthRpx = DANMU_WIDTH * 1.5 // 使用1.5倍默认宽度作为安全值
        resolve(getDanmuWidth(danmu))
      }
    }).exec()
  } catch (e) {
    if (retryCount < maxRetries) {
      setTimeout(() => {
        measureDanmuWidth(danmu, retryCount + 1).then(resolve)
      }, retryDelay)
    } else {
      danmu.widthRpx = DANMU_WIDTH * 1.5
      resolve(getDanmuWidth(danmu))
    }
  }
})

// 轨道系统
const tracks = reactive(
  Array.from({ length: props.trackCount }, (_, index) => ({
    id: index,
    danmus: [],
    lastDanmuTime: 0
  }))
)

// 弹幕数据 - 从API获取
const familyDanmus = ref([])

// 获取弹幕数据
const fetchDanmuData = async () => {
  try {
    const { code, data } = await getStepLeaderboardAPI({ type: 'institution' })
    if (code && data?.bullet_families) {
      familyDanmus.value = data.bullet_families.map(family => ({
        id: family.id,
        familyName: family.name,
        familyIntro: family.note,
        avatar: family.avatar_url || defaultAvatar
      }))
      // 重置弹幕索引，确保从头开始遍历新数据
      resetDanmuIndex()
    }
  } catch (error) {
    console.error('获取弹幕数据失败:', error)
  }
}

// 获取弹幕样式
const getDanmuStyle = (danmu, trackIndex) => {
  // 计算垂直位置，确保每个轨道有明确的垂直间距
  const topPosition = trackIndex * (trackHeight.value + 15) // 轨道间增加15rpx间距，适配3行文字

  return {
    transform: `translateX(${danmu.x}rpx)`,
    transition: danmu.isMoving ? 'transform ' + (danmu.remainingDuration ?? danmu.duration) + 'ms linear' : 'none',
    opacity: danmu.opacity || 1,
    // 明确设置垂直位置
    position: 'absolute',
    left: 0,
    top: `${topPosition}rpx`,
    zIndex: 10,
    // 添加硬件加速
    willChange: 'transform'
  }
}

// 检查轨道中是否有足够空间放置新弹幕
// options.ignoreTime: 跳过时间间隔限制，用于同轨跟随插入，保证无缝
const checkTrackSpace = (track, danmuWidth = DANMU_WIDTH, options = {}) => {
  const now = Date.now()
  const ignoreTime = options.ignoreTime === true

  // 如果轨道为空，可以直接放置
  if (track.danmus.length === 0) {
    return true
  }

  // 清理已经完全移出屏幕的弹幕
  track.danmus = track.danmus.filter(danmu => {
    const elapsedTime = now - danmu.startTime
    const existingWidth = getDanmuWidth(danmu)
    const totalDistance = CONTAINER_WIDTH + existingWidth + EXTRA_DISTANCE
    const moveDistance = (elapsedTime / danmu.duration) * totalDistance
    const currentX = CONTAINER_WIDTH - moveDistance

    // 如果弹幕已经完全移出屏幕左侧，则移除
    return currentX > -existingWidth
  })

  // 重新检查轨道是否为空
  if (track.danmus.length === 0) {
    return true
  }

  // 检查所有弹幕的位置，确保新弹幕不会与任何现有弹幕重叠
  for (const existingDanmu of track.danmus) {
    const elapsedTime = now - existingDanmu.startTime
    const existingWidth = getDanmuWidth(existingDanmu)
    const totalDistance = CONTAINER_WIDTH + existingWidth + EXTRA_DISTANCE
    const moveDistance = Math.min((elapsedTime / existingDanmu.duration) * totalDistance, totalDistance)
    const existingDanmuX = CONTAINER_WIDTH - moveDistance

    // 计算弹幕的右边界位置
    const existingDanmuRightEdge = existingDanmuX + existingWidth

    // 如果现有弹幕的右边界还在屏幕内或刚出屏幕，则需要更严格的间距检查
    const safeDistance = danmuWidth * 0.8 // 增加到80%的弹幕宽度作为安全距离
    if (existingDanmuRightEdge > (CONTAINER_WIDTH - safeDistance)) {
      return false
    }
  }

  // 检查最后一个弹幕的时间间隔 - 更严格的时间控制
  const timeSinceLastDanmu = now - track.lastDanmuTime
  const minTimeInterval = 2500 // 增加到2.5秒，确保足够的时间间隔（正常模式）

  return ignoreTime ? true : timeSinceLastDanmu >= minTimeInterval
}

// 找到可用的轨道 - 随机选择而非按顺序
const findAvailableTrack = () => {
  // 过滤出有足够空间的轨道
  const availableTracks = tracks.filter(track => checkTrackSpace(track))

  // 如果没有可用轨道，返回null
  if (availableTracks.length === 0) {
    return null
  }

  // 从可用轨道中随机选择一个
  const randomIndex = Math.floor(Math.random() * availableTracks.length)
  return availableTracks[randomIndex]
}

// 创建弹幕对象
const createDanmu = (data) => {
  const id = `danmu_${danmuId.value++}`
  const containerWidth = CONTAINER_WIDTH // 小程序默认宽度
  const danmuWidth = DANMU_WIDTH // 弹幕宽度
  const extraDistance = EXTRA_DISTANCE // 额外移动距离，确保完全消失

  return {
    id,
    data,
    x: containerWidth, // 从右侧开始
    isMoving: false,
    opacity: 1,
    duration: ((containerWidth + danmuWidth + extraDistance) / (props.danmuSpeed * 0.6)) * 1000, // 减慢速度，让弹幕在屏幕上停留更久
    startTime: Date.now()
  }
}

// 添加弹幕到轨道
const addDanmuToTrack = (danmu, targetTrack = null, options = {}) => {
  const track = targetTrack || findAvailableTrack()
  if (!track) return false

  // 更严格的最终检查 - 确保轨道真的有足够空间
  if (!checkTrackSpace(track, DANMU_WIDTH, options)) {
    return false
  }

  track.danmus.push(danmu)
  track.lastDanmuTime = Date.now()

  // 启动弹幕动画 - 确保宽度测量完成后再开始
  nextTick(async () => {
    // 等待宽度测量完成，确保获得准确宽度
    await measureDanmuWidth(danmu)
    recalculateDuration(danmu)
    
    // 重置起始时间，保证时长重新计算后动画正确
    danmu.startTime = Date.now()
    
    // 再次等待一个 tick，确保 DOM 完全更新
    await nextTick()
    startDanmuAnimation(danmu, track)
  })

  return true
}

// 启动弹幕动画
const startDanmuAnimation = (danmu, track) => {
  if (!isPlaying.value) return

  // 清除之前的定时器（如果存在）
  if (animationTimers.value.has(danmu.id)) {
    clearTimeout(animationTimers.value.get(danmu.id))
    animationTimers.value.delete(danmu.id)
  }

  // 设置动画 - 从右侧移动到左侧屏幕外
  danmu.isMoving = true

  // 计算当前弹幕应该在的位置（基于已经运行的时间）
  const now = Date.now()
  const elapsedTime = now - danmu.startTime
  const width = getDanmuWidth(danmu)
  const totalDistance = CONTAINER_WIDTH + width + EXTRA_DISTANCE // 总移动距离

  // 如果弹幕已经运行超过预定时间，直接重置
  if (elapsedTime >= danmu.duration) {
    resetDanmuForLoop(danmu, track)
    return
  }

  const currentProgress = elapsedTime / danmu.duration
  const currentPosition = CONTAINER_WIDTH - (currentProgress * totalDistance)

  // 设置当前位置
  danmu.x = currentPosition

  // 使用 nextTick 确保 DOM 更新后再启动动画
  nextTick(() => {
    // 移动到左侧屏幕外，确保弹幕完全消失
    danmu.x = -(width + EXTRA_DISTANCE)
  })

  // 计算剩余动画时间
  const remainingTime = danmu.duration - elapsedTime
  danmu.remainingDuration = remainingTime

  // 在本弹幕进入一定进度后，尝试在同一轨道追加下一条，保证无缝滚动
  const followProgress = 0.08 // 更早跟随，缩小间隙
  const followDelay = Math.max(200, danmu.duration * followProgress)
  setTimeout(() => {
    if (!isPlaying.value) return
    // 仅当轨道有空间时在同轨追加下一条弹幕
    if (checkTrackSpace(track, DANMU_WIDTH, { ignoreTime: true })) {
      const nextData = getNextUnusedDanmu()
      if (nextData) {
        const nextDanmu = createDanmu(nextData)
        addDanmuToTrack(nextDanmu, track, { ignoreTime: true })
      }
    }
  }, followDelay)

  // 监听动画结束事件，实现循环
  const timer = setTimeout(() => {
    // 动画结束后，重置弹幕位置到右侧，开始新的循环（复用元素）
    resetDanmuForLoop(danmu, track)
  }, remainingTime)

  animationTimers.value.set(danmu.id, timer)
}

// 重置弹幕位置实现循环 - 增强持续性
const resetDanmuForLoop = (danmu, track) => {
  if (!isPlaying.value) return

  // 停止当前动画并复位到右侧，复用元素，避免删除/新增造成的空档
  danmu.isMoving = false
  danmu.opacity = 1

  // 切换下一条数据，确保持续循环
  const nextData = getNextUnusedDanmu()
  if (nextData) {
    danmu.data = nextData
  } else {
    // 如果没有数据，重新获取弹幕数据
    console.log('弹幕数据不足，尝试重新获取')
    fetchDanmuData().then(() => {
      const retryData = getNextUnusedDanmu()
      if (retryData) {
        danmu.data = retryData
      }
    })
    return
  }

  // 复位到右侧并重新计时
  danmu.startTime = Date.now()
  danmu.x = CONTAINER_WIDTH
  track.lastDanmuTime = Date.now()

  // 重新启动动画（无缝继续）
  nextTick(async () => {
    // 重新测量宽度，确保准确性
    await measureDanmuWidth(danmu)
    recalculateDuration(danmu)
    danmu.startTime = Date.now()
    startDanmuAnimation(danmu, track)
  })
}

// 从轨道移除弹幕
const removeDanmuFromTrack = (danmu, track) => {
  const index = track.danmus.findIndex(d => d.id === danmu.id)
  if (index > -1) {
    track.danmus.splice(index, 1)
  }
}

// 发送弹幕
const sendDanmu = (data) => {
  if (!isPlaying.value) return

  const danmu = createDanmu(data)
  addDanmuToTrack(danmu)
}

// 初始化满屏弹幕显示
// 弹幕索引管理
let currentDanmuIndex = 0
let usedDanmuIds = new Set() // 记录已使用的弹幕ID
let isFirstRound = true // 标记是否是第一轮遍历

// 重置弹幕索引和去重记录
const resetDanmuIndex = () => {
  currentDanmuIndex = 0
  usedDanmuIds.clear()
  isFirstRound = true
}

// 获取下一个弹幕数据 - 优化循环逻辑
const getNextUnusedDanmu = () => {
  if (!familyDanmus.value || familyDanmus.value.length === 0) {
    return null
  }

  // 如果是第一轮且还有未使用的弹幕
  if (isFirstRound && usedDanmuIds.size < familyDanmus.value.length) {
    // 查找下一个未使用的弹幕
    while (currentDanmuIndex < familyDanmus.value.length) {
      const danmuData = familyDanmus.value[currentDanmuIndex]
      const danmuId = danmuData.id

      if (!usedDanmuIds.has(danmuId)) {
        usedDanmuIds.add(danmuId)
        currentDanmuIndex++
        return danmuData
      }
      currentDanmuIndex++
    }

    // 第一轮遍历完成，开始无限循环
    isFirstRound = false
    currentDanmuIndex = 0
    usedDanmuIds.clear()
    console.log('弹幕第一轮完成，开始无限循环')
  }

  // 无限循环模式 - 确保永远有弹幕
  const danmuData = familyDanmus.value[currentDanmuIndex % familyDanmus.value.length]
  currentDanmuIndex = (currentDanmuIndex + 1) % familyDanmus.value.length
  return danmuData
}

// 发送顺序弹幕
const sendSequentialDanmu = () => {
  // 获取下一个未使用的弹幕数据
  const danmuData = getNextUnusedDanmu()

  if (danmuData) {
    sendDanmu(danmuData)
  }
}

// 自动发送弹幕 - 增强持续性
let autoSendTimer = null
const startAutoSend = () => {
  if (autoSendTimer) return

  const sendNext = () => {
    if (isPlaying.value) {
      // 智能发送弹幕，避免过度拥挤
      const availableTrackCount = tracks.filter(track => checkTrackSpace(track)).length

      // 只有当有足够可用轨道时才发送弹幕
      if (availableTrackCount > 0) {
        sendSequentialDanmu()
      }
    }

    // 动态调整发送间隔，根据可用轨道数量
    const availableTrackCount = tracks.filter(track => checkTrackSpace(track)).length
    const baseInterval = 800 // 减少基础间隔到0.8秒，让弹幕更密集
    const intervalMultiplier = Math.max(1, (6 - availableTrackCount) * 0.2) // 减少间隔倍数
    const dynamicInterval = baseInterval * intervalMultiplier + Math.random() * 300

    // 确保持续循环，即使暂时没有可用轨道也要继续尝试
    if (isPlaying.value) {
      autoSendTimer = setTimeout(sendNext, dynamicInterval)
    }
  }

  // 立即发送第一条弹幕，不等待
  sendNext()
}

// 预加载弹幕，让弹幕在组件显示前就开始滚动
const preloadDanmus = () => {
  if (!isPlaying.value) return

  // 立即发送多条弹幕到不同轨道，模拟已经在滚动的状态
  const preloadCount = Math.min(tracks.length, familyDanmus.value.length)

  for (let i = 0; i < preloadCount; i++) {
    // 为每个轨道发送一条弹幕，并设置不同的延迟
    setTimeout(() => {
      if (isPlaying.value) {
        sendSequentialDanmu()
      }
    }, i * 200) // 每条弹幕间隔200ms发送
  }
}

const stopAutoSend = () => {
  if (autoSendTimer) {
    clearTimeout(autoSendTimer)
    autoSendTimer = null
  }
}

// 暂停/播放弹幕
const toggleDanmu = () => {
  isPlaying.value = !isPlaying.value

  if (isPlaying.value) {
    // 恢复播放时，重新启动所有弹幕的动画
    tracks.forEach(track => {
      track.danmus.forEach(danmu => {
        if (!danmu.isMoving) {
          startDanmuAnimation(danmu, track)
        }
      })
    })
    startAutoSend()
  } else {
    // 暂停时，停止自动发送但保持弹幕在当前位置
    stopAutoSend()
  }
}

// 清空所有弹幕
const clearDanmu = () => {
  // 清除所有动画定时器
  animationTimers.value.forEach(timer => clearTimeout(timer))
  animationTimers.value.clear()

  // 清空所有轨道的弹幕
  tracks.forEach(track => {
    track.danmus = []
    track.lastDanmuTime = 0
  })
}

// 处理弹幕点击
const handleDanmuClick = (danmu) => {
  emit('danmu-click', danmu.data)

  // Taro.showToast({
  //   title: `点击了${danmu.data.familyName}`,
  //   icon: 'none',
  //   duration: 2000
  // })
}

// 暴露方法给父组件
defineExpose({
  toggleDanmu,
  clearDanmu,
  sendCustomDanmu: sendDanmu
})

// 生命周期
onMounted(async () => {
  // 首先获取弹幕数据
  await fetchDanmuData()

  // 自动开始播放
  isPlaying.value = true

  // 使用nextTick确保DOM完全渲染后立即开始弹幕滚动
  nextTick(() => {
    // 先预加载弹幕，让多条弹幕快速出现
    preloadDanmus()

    // 然后启动自动发送，维持持续滚动
    setTimeout(() => {
      startAutoSend()
    }, 1000) // 1秒后开始正常的自动发送节奏
  })
})

onUnmounted(() => {
  stopAutoSend()
  clearDanmu()
})
</script>

<style >
.native-danmu-container {
  width: 100%;
  position: relative;
}

.danmu-display-area {
  width: 100%;
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  /* border-radius: 20rpx; */
  position: relative;
  overflow: hidden;
  /* box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1); */
}

.danmu-track {
  position: absolute;
  width: 100%;
  left: 0;
  pointer-events: none;
}


.danmu-content {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 30rpx;
  padding: 16rpx 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12rpx);
  border: 2rpx solid rgba(255, 255, 255, 0.4);
  max-width: 400rpx;
  min-width: 350rpx;
  margin: 8rpx 0;
  transition: all 0.3s ease;
}

.danmu-avatar-container {
  flex-shrink: 0;
  margin-right: 16rpx;
  position: relative;
}

.danmu-avatar {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  border: 3rpx solid #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
}

.danmu-avatar-container::after {
  content: '';
  position: absolute;
  top: -2rpx;
  left: -2rpx;
  right: -2rpx;
  bottom: -2rpx;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
  z-index: -1;
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.danmu-info {
  flex: 1;
  min-width: 0;
}

.danmu-title-row {
  display: flex;
  align-items: center;
  margin-bottom: 6rpx;
}

.family-name {
  font-weight: 700;
  color: #1a202c;
  font-size: 28rpx;
  margin-right: 12rpx;
  flex-shrink: 0;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}

.member-badge {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  padding: 4rpx 12rpx;
  border-radius: 16rpx;
  font-size: 20rpx;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
}

.family-intro {
  color: #4a5568;
  font-size: 24rpx;
  display: -webkit-box;
  margin-bottom: 6rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  font-weight: 500;
}

.danmu-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.family-motto {
  color: #2d3748;
  font-size: 22rpx;
  font-style: italic;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 12rpx;
  opacity: 0.8;
}

.steps-badge {
  background: linear-gradient(45deg, #48bb78, #38a169);
  color: white;
  padding: 4rpx 12rpx;
  border-radius: 14rpx;
  font-size: 20rpx;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 2rpx 8rpx rgba(72, 187, 120, 0.3);
}

.danmu-controls {
  display: flex;
  justify-content: center;
  gap: 20rpx;
  margin-top: 20rpx;
  padding: 0 20rpx;
}

.control-btn {
  flex: 1;
  max-width: 200rpx;
  height: 60rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
}

/* 弹幕动画效果 */
.danmu-moving {
  transition-timing-function: linear;
  transition-property: transform;
}

/* 弹幕项基础样式 */
.danmu-item {
  position: absolute;
  z-index: 10;
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
}

/* 悬停效果 */
.danmu-item:active .danmu-content {
  transform: scale(0.98);
  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.18);
  transition: all 0.2s ease;
}

.danmu-content:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.16);
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .danmu-content {
    max-width: 300rpx;
    min-width: 240rpx;
    padding: 10rpx 16rpx;
  }

  .danmu-avatar {
    width: 40rpx;
    height: 40rpx;
    margin-right: 12rpx;
  }

  .family-name {
    font-size: 24rpx;
  }

  .family-intro {
    font-size: 20rpx;
  }
}
</style>