<template>
  <view class="floral-container">
    <!-- 夜空装饰背景 -->
    <view class="night-sky-decoration">
      <view class="star star-1"></view>
      <view class="star star-2"></view>
      <view class="star star-3"></view>
      <view class="star star-4"></view>
      <view class="star star-5"></view>
      <view class="star star-6"></view>
      <view class="star star-7"></view>
      <view class="star star-8"></view>
    </view>

    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="navbar-content">
        <view class="navbar-stars">
          <view class="navbar-star star-left"></view>
          <view class="navbar-star star-right"></view>
        </view>
        <view class="navbar-title">剧情角色</view>
      </view>
    </view>

    <!-- 可滚动的两列卡片区 -->
    <!-- 下拉刷新已禁用 -->
    <scroll-view
      class="scroll-container"
      :style="{ marginTop: navBarHeight + 'px' }"
      scroll-y="true"
      :show-scrollbar="false"
      :refresher-enabled="false"
    >
      <view class="two-column-grid">
        <view class="column column-left">
          <block v-for="(item, idx) in leftColumnItems" :key="item ? item.id : idx">
            <view class="floral-grid-card" v-if="item">
              <view class="cover-container">
                <image class="cover" :src="getResourceUrl(item.cover)" mode="aspectFill" />
                <!-- 🔴 新增：未读消息红点 -->
                <view class="unread-badge" v-if="unreadCounts[item.roleId] > 0">
                  {{ unreadCounts[item.roleId] }}
                </view>
              </view>
              <view class="floral-tag">{{ item.tag }}</view>
              <view class="content-area">
                <view class="title">{{ item.title }}</view>
                <view class="card-bottom">
                  <button
                    v-if="userStore.isLoggedIn"
                    class="floral-btn use-btn"
                    @click="showDetail(item)"
                    @longpress="() => handleLongPress(item)"
                  >
                    🔍 查看详情
                  </button>
                  <button
                    v-else
                    class="floral-btn outline use-btn login-required"
                    @click="showLoginTip"
                  >
                    🔐 查看详情
                  </button>
                </view>
              </view>
            </view>
          </block>
        </view>

        <view class="column column-right">
          <block v-for="(item, idx) in rightColumnItems" :key="item ? item.id : idx">
            <view class="floral-grid-card" v-if="item">
              <view class="cover-container">
                <image class="cover" :src="getResourceUrl(item.cover)" mode="aspectFill" />
                <!-- 🔴 新增：未读消息红点 -->
                <view class="unread-badge" v-if="unreadCounts[item.roleId] > 0">
                  {{ unreadCounts[item.roleId] }}
                </view>
              </view>
              <view class="floral-tag">{{ item.tag }}</view>
              <view class="content-area">
                <view class="title">{{ item.title }}</view>
                <view class="card-bottom">
                  <button
                    v-if="userStore.isLoggedIn"
                    class="floral-btn use-btn"
                    @click="showDetail(item)"
                    @longpress="() => handleLongPress(item)"
                  >
                    🔍 查看详情
                  </button>
                  <button
                    v-else
                    class="floral-btn outline use-btn login-required"
                    @click="showLoginTip"
                  >
                    🔐 查看详情
                  </button>
                </view>
              </view>
            </view>
          </block>
        </view>
      </view>

      <view class="bottom-spacing"></view>
    </scroll-view>

    <!-- 登录提示弹窗 -->
    <view class="floral-modal" v-if="showLoginModal">
      <view class="floral-modal-content">
        <view class="modal-title">💝 温馨提示</view>
        <view class="modal-text">请先登录后再开始您的创意之旅</view>
        <view class="modal-btns">
          <button class="floral-btn outline modal-btn cancel" @click="showLoginModal = false">稍后再说</button>
          <button class="floral-btn modal-btn confirm" @click="goToLogin">🌸 去登录</button>
        </view>
      </view>
    </view>

    <!-- 角色详情弹窗 -->
    <view class="detail-modal" v-if="showDetailModal" @click="closeDetail">
      <view class="detail-modal-content" @click.stop>
        <view class="detail-cover-container">
          <image
            class="detail-cover"
            :src="getResourceUrl(selectedItem?.cover)"
            mode="aspectFill"
            :class="{'cover-zoomed': showDetailModal}"
          />
        </view>

        <view class="detail-info" :class="{'info-visible': showDetailModal}">
          <view class="detail-tag">{{ selectedItem?.tag }}</view>
          <view class="detail-title">{{ selectedItem?.title }}</view>
          <scroll-view class="detail-description" scroll-y="true">
            <view class="description-text">
              {{ selectedItem?.title }} - 这是一个充满魅力的角色，拥有独特的个性和丰富的故事背景。在这里，您可以与这个角色进行深入的对话，体验不同的情感交流。
            </view>
          </scroll-view>
          <view class="detail-actions">
            <button class="floral-btn outline detail-btn cancel" @click="closeDetail">取消</button>
            <button class="floral-btn detail-btn confirm" @click="useFromDetail">✨ 去使用</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useUserStore } from '@/stores/user.js';
import { roleAPI, getResourceUrl } from '@/utils/api.js';
// 🔴 新增：导入未读消息管理模块
import {
  getAllUnreadCounts,
  generateTestMessages,
  clearUnreadMessages,
  autoGenerateMessagesForRandomRoles
} from '@/utils/unreadMessages.js';

const userStore = useUserStore();
const showLoginModal = ref(false);

// 详情弹窗相关
const showDetailModal = ref(false);
const selectedItem = ref(null);

// 下拉刷新相关
const refresherTriggered = ref(false);

// 状态栏高度适配
const statusBarHeight = ref(0);
const navBarHeight = ref(0);

// 🔴 新增：未读消息数量统计
const unreadCounts = ref({});

// 🔴 新增：是否首次加载标记
const isFirstLoad = ref(true);

// 获取系统状态栏高度
const getSystemInfo = () => {
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight || 0;
  // 导航栏总高度 = 状态栏高度 + 导航栏内容高度（44px）
  navBarHeight.value = statusBarHeight.value + 44;
  console.log('状态栏高度:', statusBarHeight.value, '导航栏总高度:', navBarHeight.value);
};

// 数据：剧情列表（使用API请求获取真实数据）
const dramaList = ref([]);

/* ====== 以下为假数据（已注释，保留作为参考） ======
const dramaList = ref([
  {
    id: 1,
    roleId: 1,
    cover: '/static/characters/xiaozhi.png',
    avatar: '/static/characters/xiaozhi.png',
    tag: '浪漫',
    title: '小智AI助手',
    roleName: '小智AI助手',
    roleDesc: '你好！我是小智，你的专属AI助手。我可以帮你解答问题、提供建议、陪你聊天。',
    greeting: '你好！我是小智，很高兴认识你！',
    modelId: 'gpt-3.5-turbo',
    templateId: 'template-1',
    ttsId: 'tts-1',
    sttId: 'stt-1',
    temperature: 0.7,
    topP: 0.9
  },
  {
    id: 2,
    roleId: 2,
    cover: '/static/characters/sakura.png',
    avatar: '/static/characters/sakura.png',
    tag: '优雅',
    title: '元气少女小樱',
    roleName: '元气少女小樱',
    roleDesc: '嘿！我是小樱，超级喜欢和大家聊天的元气少女！每天都充满活力。',
    greeting: '你好！我是小樱，很高兴认识你！',
    modelId: 'gpt-3.5-turbo',
    templateId: 'template-2',
    ttsId: 'tts-2',
    sttId: 'stt-1',
    temperature: 0.8,
    topP: 0.9
  },
  {
    id: 3,
    roleId: 3,
    cover: '/static/characters/lina.png',
    avatar: '/static/characters/lina.png',
    tag: '活泼',
    title: '温柔大姐姐琳娜',
    roleName: '温柔大姐姐琳娜',
    roleDesc: '你好呀，我是琳娜。如果你需要倾诉或者想要一些温暖的陪伴，随时都可以找我。',
    greeting: '你好！我是琳娜，很高兴认识你！',
    modelId: 'gpt-3.5-turbo',
    templateId: 'template-3',
    ttsId: 'tts-3',
    sttId: 'stt-1',
    temperature: 0.7,
    topP: 0.9
  },
  {
    id: 4,
    roleId: 4,
    cover: '/static/characters/allen.png',
    avatar: '/static/characters/allen.png',
    tag: '深情',
    title: '知识博士艾伦',
    roleName: '知识博士艾伦',
    roleDesc: '大家好，我是艾伦博士。拥有丰富的知识储备，擅长科学、历史、文学等各个领域。',
    greeting: '你好！我是艾伦博士，很高兴认识你！',
    modelId: 'gpt-3.5-turbo',
    templateId: 'template-4',
    ttsId: 'tts-4',
    sttId: 'stt-1',
    temperature: 0.6,
    topP: 0.9
  },
  {
    id: 5,
    roleId: 5,
    cover: '/static/characters/ajie.png',
    avatar: '/static/characters/ajie.png',
    tag: '温暖',
    title: '搞笑达人阿杰',
    roleName: '搞笑达人阿杰',
    roleDesc: '哈喽！我是阿杰，专业逗乐20年！生活已经够累了，让我用段子和笑话给你的一天增添点乐趣吧。',
    greeting: '你好！我是阿杰，很高兴认识你！',
    modelId: 'gpt-3.5-turbo',
    templateId: 'template-5',
    ttsId: 'tts-5',
    sttId: 'stt-1',
    temperature: 0.9,
    topP: 0.95
  },
  {
    id: 6,
    roleId: 6,
    cover: '/static/characters/mike.png',
    avatar: '/static/characters/mike.png',
    tag: '梦幻',
    title: '运动教练米克',
    roleName: '运动教练米克',
    roleDesc: '嘿！我是米克，你的私人运动教练。想要保持健康、塑造好身材吗？',
    greeting: '你好！我是米克，很高兴认识你！',
    modelId: 'gpt-3.5-turbo',
    templateId: 'template-6',
    ttsId: 'tts-6',
    sttId: 'stt-1',
    temperature: 0.7,
    topP: 0.9
  },
  {
    id: 7,
    roleId: 7,
    cover: '/static/characters/lily.png',
    avatar: '/static/characters/lily.png',
    tag: '治愈',
    title: '心理咨询师莉莉',
    roleName: '心理咨询师莉莉',
    roleDesc: '你好，我是莉莉。作为一名心理咨询师，我擅长倾听和理解你的内心世界。',
    greeting: '你好！我是莉莉，很高兴认识你！',
    modelId: 'gpt-3.5-turbo',
    templateId: 'template-7',
    ttsId: 'tts-7',
    sttId: 'stt-1',
    temperature: 0.7,
    topP: 0.9
  },
  {
    id: 8,
    roleId: 8,
    cover: '/static/characters/meimei.png',
    avatar: '/static/characters/meimei.png',
    tag: '青春',
    title: '美食家小美',
    roleName: '美食家小美',
    roleDesc: '嗨！我是小美，一个热爱美食的吃货！从家常菜到高级料理，从中餐到西餐，我都很在行哦。',
    greeting: '你好！我是小美，很高兴认识你！',
    modelId: 'gpt-3.5-turbo',
    templateId: 'template-8',
    ttsId: 'tts-8',
    sttId: 'stt-1',
    temperature: 0.8,
    topP: 0.9
  },
  {
    id: 9,
    roleId: 9,
    cover: '/static/characters/andy.png',
    avatar: '/static/characters/andy.png',
    tag: '浪漫',
    title: '旅行达人安迪',
    roleName: '旅行达人安迪',
    roleDesc: '你好！我是安迪，走遍世界各地的旅行达人。我可以为你推荐最美的风景。',
    greeting: '你好！我是安迪，很高兴认识你！',
    modelId: 'gpt-3.5-turbo',
    templateId: 'template-9',
    ttsId: 'tts-9',
    sttId: 'stt-1',
    temperature: 0.7,
    topP: 0.9
  },
  {
    id: 10,
    roleId: 10,
    cover: '/static/characters/code.png',
    avatar: '/static/characters/code.png',
    tag: '优雅',
    title: '程序员小码',
    roleName: '程序员小码',
    roleDesc: 'Hello World！我是小码，一名资深程序员。擅长各种编程语言和技术栈。',
    greeting: 'Hello！我是小码，很高兴认识你！',
    modelId: 'gpt-3.5-turbo',
    templateId: 'template-10',
    ttsId: 'tts-10',
    sttId: 'stt-1',
    temperature: 0.6,
    topP: 0.9
  }
]);
====== 假数据结束 ====== */

// 列数据拆分
const leftColumnItems = computed(() => dramaList.value.filter((_, index) => index % 2 === 0));
const rightColumnItems = computed(() => dramaList.value.filter((_, index) => index % 2 === 1));

// 🔴 新增：加载未读消息数量
const loadUnreadCounts = () => {
  unreadCounts.value = getAllUnreadCounts();
  console.log('📬 未读消息统计:', unreadCounts.value);
};

// 加载角色列表数据
const loadDramaList = async (isRefresh = false) => {
  try {
    // 如果不是下拉刷新,则显示loading提示
    if (!isRefresh) {
      uni.showLoading({ title: '加载中...' });
    }
    console.log('开始加载角色列表...', isRefresh ? '(下拉刷新)' : '');

    const result = await roleAPI.getRoles();
    console.log('API返回结果:', result);

    if (result.success) {
      // 处理响应数据，兼容多种返回格式
      let roles = [];

      // 尝试从不同的路径提取角色列表数据
      if (result.data && result.data.data && result.data.data.list) {
        // 格式：{ data: { data: { list: [...] } } }
        roles = result.data.data.list;
      } else if (result.data && result.data.list) {
        // 格式：{ data: { list: [...] } }
        roles = result.data.list;
      } else if (Array.isArray(result.data)) {
        // 格式：{ data: [...] }
        roles = result.data;
      } else if (result.data && result.data.data && Array.isArray(result.data.data)) {
        // 格式：{ data: { data: [...] } }
        roles = result.data.data;
      }

      console.log('提取的角色数据:', roles);

      // 映射数据到前端需要的格式
      dramaList.value = roles.map(role => ({
        id: role.roleId,
        roleId: role.roleId,
        cover: role.backgroundImage || role.avatar || '/static/default-avatar.png', // 使用背景图片作为封面，如果没有则使用头像
        avatar: role.avatar || '/static/default-avatar.png',
        backgroundImage: role.backgroundImage || '', // 背景图片字段
        tag: role.tag || '角色',
        title: role.roleName || '未命名角色',
        roleName: role.roleName || '未命名角色',
        roleDesc: role.roleDesc || '',
        greeting: role.greeting || '你好！很高兴认识你！',
        modelId: role.modelId || 'gpt-3.5-turbo',
        modelName: role.modelName || '',
        modelProvider: role.modelProvider || '',
        templateId: role.templateId || role.roleId,
        ttsId: role.ttsId || '',
        ttsProvider: role.ttsProvider || '',
        sttId: role.sttId || '',
        temperature: role.temperature || 0.7,
        topP: role.topP || 0.9,
        voiceName: role.voiceName || '',
        vadEnergyTh: role.vadEnergyTh || 0.01,
        vadSilenceMs: role.vadSilenceMs || 1200,
        vadSilenceTh: role.vadSilenceTh || 0.3,
        vadSpeechTh: role.vadSpeechTh || 0.5
      }));

      console.log('角色列表加载成功，共', dramaList.value.length, '个角色');

      // 如果是下拉刷新,显示成功提示
      if (isRefresh) {
        uni.showToast({
          title: '刷新成功',
          icon: 'success',
          duration: 1500
        });
      }
    } else {
      console.error('获取角色列表失败:', result.error);
      uni.showToast({
        title: isRefresh ? '刷新失败，请重试' : '加载失败，请重试',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('加载角色列表异常:', error);
    uni.showToast({
      title: isRefresh ? '刷新异常，请重试' : '加载异常，请重试',
      icon: 'none'
    });
  } finally {
    if (!isRefresh) {
      uni.hideLoading();
    }
    // 🔴 新增：加载完角色后刷新未读消息数量
    loadUnreadCounts();
  }
};

// 下拉刷新处理
const onRefresh = async () => {
  console.log('触发下拉刷新');
  refresherTriggered.value = true;

  try {
    await loadDramaList(true);
  } finally {
    // 刷新完成后,关闭刷新状态
    setTimeout(() => {
      refresherTriggered.value = false;
    }, 500);
  }
};

// 🔴 新增：自动生成随机角色消息
const autoGenerateRandomMessages = () => {
  console.log('🎲 准备自动生成消息，当前角色数量:', dramaList.value.length);

  if (dramaList.value.length === 0) {
    console.log('⚠️ 角色列表为空，无法生成消息');
    return 0;
  }

  // 随机选择2个角色生成消息
  const count = autoGenerateMessagesForRandomRoles(dramaList.value, 2, 1);

  if (count > 0) {
    console.log(`✨ 已为 ${count} 个随机角色生成主动消息`);
    // 刷新未读消息数量
    loadUnreadCounts();
  } else {
    console.log('⚠️ 未能生成消息');
  }

  return count;
};

onMounted(() => {
  getSystemInfo(); // 获取系统信息
  userStore.init();

  // 调用 API 加载角色列表
  loadDramaList();
  console.log('📱 进入角色列表页面');

// 刷新未读消息数量
loadUnreadCounts();

// 延迟生成消息（等待角色列表加载完成）
setTimeout(() => {
  autoGenerateRandomMessages();
}, 500);
});


// 方法
const handleUse = (item) => {
  if (!item || !item.id) {
    uni.showToast({ title: '角色信息无效', icon: 'none' });
    return;
  }
  uni.showLoading({ title: '正在设置角色...' });

  // 构建完整的角色参数，包括模型和模板信息
  const params = {
    characterId: item.id,
    roleId: item.roleId,
    roleName: item.roleName || item.title,
    roleDesc: item.roleDesc,
    avatar: item.avatar || item.cover,
    greeting: item.greeting,
    modelId: item.modelId || '',        // 模型ID
    templateId: item.templateId || '',  // 模板ID（使用roleId作为templateId）
    ttsId: item.ttsId || '',            // TTS服务ID
    sttId: item.sttId || '',            // STT服务ID
    temperature: item.temperature || '',
    topP: item.topP || ''
  };

  const queryString = Object.keys(params)
    .map(key => `${key}=${encodeURIComponent(params[key] || '')}`)
    .join('&');

  uni.hideLoading();
  uni.navigateTo({ url: `/pages/role-chat/role-chat?${queryString}` });
};

// 🔴 新增：长按角色卡生成测试消息（用于开发测试）
const handleLongPress = (item) => {
  uni.showActionSheet({
    itemList: ['为该角色生成1条消息', '为该角色生成3条消息'],
    success: (res) => {
      const messageCount = res.tapIndex === 0 ? 1 : 3;

      const success = generateTestMessages(item.roleId, item.roleName, messageCount);
      if (success) {
        loadUnreadCounts(); // 刷新未读消息数量
        uni.showToast({
          title: `✅ 已为"${item.roleName}"生成${messageCount}条消息`,
          icon: 'success',
          duration: 2000
        });
      } else {
        uni.showToast({
          title: '❌ 生成失败',
          icon: 'none'
        });
      }
    }
  });
};

const showLoginTip = () => { showLoginModal.value = true; };
const showDetail = (item) => { selectedItem.value = item; showDetailModal.value = true; };
const closeDetail = () => { showDetailModal.value = false; selectedItem.value = null; };
const useFromDetail = () => { if (selectedItem.value) { const v = selectedItem.value; closeDetail(); handleUse(v); } };
const goToLogin = () => { showLoginModal.value = false; uni.switchTab({ url: '/pages/mine/mine' }); };
</script>

<style lang="scss" scoped>
.floral-container {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(180deg, #1a0b2e 0%, #2d1b4e 50%, #1a0b2e 100%);
  position: relative;
  overflow: hidden;
  padding-bottom: 100rpx;
  display: flex;
  flex-direction: column;
}

/* 夜空装饰 */
.night-sky-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.star {
  position: absolute;
  width: 6rpx;
  height: 6rpx;
  background: #f9e076;
  border-radius: 50%;
  animation: twinkle 2s infinite;
  box-shadow: 0 0 10rpx #f9e076;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.star-1 { top: 10%; left: 15%; animation-delay: 0s; }
.star-2 { top: 20%; left: 80%; animation-delay: 0.3s; }
.star-3 { top: 30%; left: 45%; animation-delay: 0.6s; }
.star-4 { top: 50%; left: 25%; animation-delay: 0.9s; }
.star-5 { top: 60%; left: 70%; animation-delay: 1.2s; }
.star-6 { top: 70%; left: 40%; animation-delay: 1.5s; }
.star-7 { top: 15%; left: 60%; animation-delay: 0.4s; }
.star-8 { top: 85%; left: 55%; animation-delay: 1.8s; }

/* 自定义导航栏 */
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(26, 11, 46, 0.95);
  backdrop-filter: blur(20rpx);
  border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
  z-index: 1000;
}

.navbar-content {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30rpx;
  position: relative;
}

.navbar-stars {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.navbar-star {
  position: absolute;
  width: 8rpx;
  height: 8rpx;
  background: #f9e076;
  border-radius: 50%;
  box-shadow: 0 0 15rpx #f9e076;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

.star-left {
  top: 50%;
  left: 30rpx;
  transform: translateY(-50%);
}

.star-right {
  top: 50%;
  right: 30rpx;
  transform: translateY(-50%);
}

.navbar-title {
  color: #f9e076;
  font-weight: bold;
  font-size: 36rpx;
  text-shadow: 0 0 20rpx rgba(249, 224, 118, 0.5);
  z-index: 1;
}

.scroll-container {
  flex: 1;
  min-height: 0;
  padding: 20rpx 16rpx; 
  position: relative;
  box-sizing: border-box; 
  z-index: 1;
}

.two-column-grid {
  display: flex;
  gap: 12rpx;
  width: 100%;
  box-sizing: border-box;  
}

.column {
  width: calc(50% - 8rpx);
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  flex-shrink: 0;
}

.floral-grid-card {
  background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
  border: 2rpx solid rgba(249, 224, 118, 0.2);
  border-radius: 25rpx;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.floral-grid-card:active {
  transform: translateY(-4rpx);
  box-shadow: 0 15rpx 50rpx rgba(249, 224, 118, 0.2);
  border-color: rgba(249, 224, 118, 0.4);
}

.cover-container {
  width: 100%;
  height: 280rpx;
  overflow: hidden;
  position: relative;
}

.cover {
  width: 100%;
  height: 100%;
  display: block;
}

.floral-tag {
  position: absolute;
  top: 12rpx;
  left: 12rpx;
  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
  color: #1a0b2e;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: bold;
  box-shadow: 0 4rpx 12rpx rgba(249, 224, 118, 0.4);
  z-index: 2;
}

.content-area {
  padding: 20rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 28rpx;
  color: #f9e076;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 12rpx;
}

.card-bottom {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

.floral-btn {
  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
  color: #1a0b2e;
  border: none;
  border-radius: 25rpx;
  font-size: 24rpx;
  font-weight: bold;
  padding: 12rpx 24rpx;
  box-shadow: 0 6rpx 16rpx rgba(249, 224, 118, 0.3);
  transition: all 0.3s ease;
}

.floral-btn:active {
  transform: scale(0.95);
  box-shadow: 0 3rpx 8rpx rgba(249, 224, 118, 0.3);
}

.floral-btn.outline {
  background: transparent;
  color: #f9e076;
  border: 2rpx solid #f9e076;
  box-shadow: none;
}

.use-btn {
  font-size: 24rpx;
}

.bottom-spacing {
  height: 40rpx;
}

/* 登录弹窗 */
.floral-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floral-modal-content {
  width: 80vw;
  background: linear-gradient(135deg, rgba(26, 11, 46, 0.98) 0%, rgba(45, 27, 78, 0.98) 100%);
  border: 2rpx solid rgba(249, 224, 118, 0.3);
  border-radius: 30rpx;
  padding: 40rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5);
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #f9e076;
  margin-bottom: 20rpx;
  text-align: center;
}

.modal-text {
  font-size: 26rpx;
  color: rgba(249, 224, 118, 0.8);
  margin-bottom: 30rpx;
  text-align: center;
  line-height: 1.6;
}

.modal-btns {
  display: flex;
  gap: 20rpx;
  justify-content: center;
}

.modal-btn {
  flex: 1;
  padding: 16rpx 32rpx;
}

.cancel {
  background: transparent;
  color: rgba(249, 224, 118, 0.6);
  border: 2rpx solid rgba(249, 224, 118, 0.3);
}

.confirm {
  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
  color: #1a0b2e;
}

/* 详情弹窗 */
.detail-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-modal-content {
  width: 86vw;
  max-height: 80vh;
  background: linear-gradient(135deg, rgba(26, 11, 46, 0.98) 0%, rgba(45, 27, 78, 0.98) 100%);
  border: 2rpx solid rgba(249, 224, 118, 0.3);
  border-radius: 30rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5);
}

.detail-cover-container {
  width: 100%;
  height: 320rpx;
  overflow: hidden;
  position: relative;
}

.detail-cover {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.cover-zoomed {
  transform: scale(1.05);
}

.detail-info {
  padding: 30rpx;
  opacity: 0;
  transform: translateY(20rpx);
  transition: all 0.3s ease 0.1s;
}

.info-visible {
  opacity: 1;
  transform: translateY(0);
}

.detail-tag {
  display: inline-block;
  font-size: 22rpx;
  color: #1a0b2e;
  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
  padding: 6rpx 16rpx;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  font-weight: bold;
}

.detail-title {
  font-size: 34rpx;
  font-weight: 700;
  color: #f9e076;
  margin-bottom: 20rpx;
}

.detail-description {
  max-height: 200rpx;
  margin-bottom: 30rpx;
  overflow-y: auto;
}

.description-text {
  font-size: 26rpx;
  color: rgba(249, 224, 118, 0.8);
  line-height: 1.8;
}

.detail-actions {
  display: flex;
  justify-content: center;
  gap: 20rpx;
}

.detail-btn {
  flex: 1;
  padding: 16rpx 32rpx;
}

/* 🔴 新增：未读消息红点样式 */
.unread-badge {
  position: absolute;
  top: 12rpx;
  right: 12rpx;
  min-width: 36rpx;
  height: 36rpx;
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
  color: #ffffff;
  font-size: 20rpx;
  font-weight: bold;
  border-radius: 18rpx;
  padding: 0 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.6);
  z-index: 10;
  animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.6);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 6rpx 16rpx rgba(255, 77, 79, 0.8);
  }
}
</style>
