<template>
  <div class="ai-app-sidebar">
    <!-- 导航菜单 -->
    <nav class="sidebar-nav">
      <!-- 主导航区域 -->
      <div class="nav-section">
        <div class="nav-item" v-for="item in navItems" :key="item.key" :class="{ 'active': activeNav === item.key }"
          @click="handleNavClick(item.key)">
          <div class="nav-icon">
            <slot :name="`${item.key}-icon`">
              <!-- 默认图标占位 -->
              <div class="icon-placeholder"></div>
            </slot>
          </div>
          <span class="nav-text">{{ item.label }}</span>

        </div>
      </div>

      <!-- 工具分类 -->
      <div class="nav-section tools-section" v-if="toolCategories.length > 0">
        <div class="section-title">工具</div>
        <div class="nav-item" v-for="tool in toolCategories" :key="tool.key"
          :class="{ 'active': activeNav === tool.key }" @click="handleNavClick(tool.key)">
          <div class="nav-icon">
            <slot :name="`${tool.key}-icon`">
              <!-- 默认图标占位 -->
              <div class="icon-placeholder"></div>
            </slot>
          </div>
          <span class="nav-text">{{ tool.label }}</span>

          <span v-if="tool.badge" class="nav-badge">{{ tool.badge }}</span>
        </div>
      </div>
    </nav>

    <!-- 推广邀请卡片 -->
    <div class="invite-section">
      <div class="invite-card" @click="handleInviteClick">
        <div class="invite-header">
          <div class="invite-icon">
            <slot name="invite-icon">
              <!-- 礼物图标 -->
              <svg viewBox="0 0 37.1211 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="28" fill="none" class="gift-icon">
                <defs>
                  <clipPath id="clipPath_0">
                    <rect width="30.719872" height="30.719872" x="0.000000" y="1.280273" fill="rgb(255,255,255)" />
                  </clipPath>
                  <linearGradient id="paint_linear_0" x1="15.3690157" x2="15.3690157" y1="3.84350586" y2="28.163393" gradientUnits="userSpaceOnUse">
                    <stop stop-color="rgb(90,224,255)" offset="0" stop-opacity="1" />
                    <stop stop-color="rgb(28,177,255)" offset="1" stop-opacity="1" />
                  </linearGradient>
                  <linearGradient id="paint_linear_1" x1="31.3588867" x2="31.3588867" y1="-2.74472371e-16" y2="8.9649477" gradientUnits="userSpaceOnUse">
                    <stop stop-color="rgb(90,224,255)" offset="0" stop-opacity="1" />
                    <stop stop-color="rgb(28,177,255)" offset="1" stop-opacity="1" />
                  </linearGradient>
                  <linearGradient id="paint_linear_2" x1="35.2012405" x2="35.2012405" y1="8.96044922" y2="12.8025694" gradientUnits="userSpaceOnUse">
                    <stop stop-color="rgb(90,224,255)" offset="0" stop-opacity="1" />
                    <stop stop-color="rgb(28,177,255)" offset="1" stop-opacity="1" />
                  </linearGradient>
                </defs>
                <g>
                  <g clip-path="url(#clipPath_0)">
                    <rect width="30.719872" height="30.719872" x="0.000000" y="1.280273" fill="rgb(255,255,255)" fill-opacity="0" />
                    <path d="M19.209 3.84351C22.0366 3.84351 24.329 6.1358 24.329 8.96348C24.329 9.89664 24.0793 10.7715 23.6432 11.5249L29.449 11.5235L29.449 14.0835L26.889 14.0835L26.889 26.8834C26.889 27.5903 26.3159 28.1634 25.609 28.1634L5.12905 28.1634C4.42213 28.1634 3.84905 27.5903 3.84905 26.8834L3.84905 14.0835L1.28906 14.0835L1.28906 11.5235L7.09482 11.5249C6.65869 10.7715 6.40904 9.89664 6.40904 8.96348C6.40904 6.1358 8.70133 3.84351 11.529 3.84351C13.0589 3.84351 14.4321 4.51449 15.3702 5.57823C16.306 4.51449 17.6792 3.84351 19.209 3.84351ZM16.649 14.0835L14.089 14.0835L14.089 26.8834L16.649 26.8834L16.649 14.0835ZM11.529 6.4035C10.1152 6.4035 8.96903 7.54964 8.96903 8.96348C8.96903 10.3131 10.0134 11.4187 11.338 11.5164L11.529 11.5235L14.089 11.5235L14.089 8.96348C14.089 7.68138 13.1466 6.61942 11.9166 6.43264L11.7201 6.41051L11.529 6.4035ZM19.209 6.4035C17.8594 6.4035 16.7537 7.44782 16.6561 8.77243L16.649 8.96348L16.649 11.5235L19.209 11.5235C20.5585 11.5235 21.6642 10.4792 21.762 9.15454L21.769 8.96348C21.769 7.54964 20.6229 6.4035 19.209 6.4035Z" fill="url(#paint_linear_0)" fill-rule="nonzero" />
                  </g>
                  <!-- 大星星 -->
                  <path class="star-large" d="M31.8864 0.357686C31.6887 -0.119234 31.0297 -0.119223 30.832 0.357686L30.5487 1.04241C30.065 2.21041 29.1621 3.14308 28.0275 3.64786L27.2235 4.00553C26.764 4.21028 26.764 4.87922 27.2235 5.08402L28.0745 5.46247C29.1808 5.95449 30.0673 6.85415 30.5596 7.9837L30.8364 8.61702C31.0384 9.08092 31.6799 9.08092 31.882 8.61702L32.1588 7.9837C32.6511 6.85416 33.5377 5.95449 34.6439 5.46247L35.4938 5.08402C35.9539 4.87941 35.9539 4.21014 35.4938 4.00553L34.6909 3.64786C33.5562 3.14308 32.6534 2.21041 32.1697 1.04241L31.8864 0.357686Z" fill="url(#paint_linear_1)" fill-rule="evenodd" />
                  <!-- 小星星 -->
                  <path class="star-small" d="M35.4273 9.11374C35.3426 8.90935 35.0602 8.90935 34.9754 9.11374L34.854 9.4072C34.6467 9.90777 34.2598 10.3075 33.7735 10.5238L33.4289 10.6771C33.232 10.7649 33.232 11.0515 33.4289 11.1393L33.7937 11.3015C34.2678 11.5124 34.6477 11.8979 34.8587 12.382L34.9773 12.6535C35.0639 12.8523 35.3388 12.8523 35.4254 12.6535L35.5441 12.382C35.755 11.8979 36.135 11.5124 36.6091 11.3015L36.9733 11.1393C37.1705 11.0516 37.1705 10.7648 36.9733 10.6771L36.6293 10.5238C36.1429 10.3075 35.756 9.90777 35.5487 9.4072L35.4273 9.11374Z" fill="url(#paint_linear_2)" fill-rule="evenodd" />
                </g>
              </svg>
            </slot>
          </div>
          <div class="invite-text">
            <div class="invite-title">邀请好友，得积分</div>
            <div class="invite-subtitle">邀请好友得积分</div>
          </div>
        </div>
      </div>

      <!-- 社交图标按钮 - 独立在卡片外 -->
      <div class="social-icons">
        <button 
          ref="wechatBtn"
          class="social-btn wechat-btn" 
          @mouseenter="handleWechatEnter"
          @mouseleave="handleWechatLeave"
        >
          <slot name="wechat-icon">
            <!-- 微信图标占位 -->
            <img src="../../assets/AI_APP/USER_AI/1.svg" alt="">
          </slot>
          <span class="wechat-label">微信群</span>
        </button>
        <button class="social-btn circle-btn">
          <slot name="xiaohongshu-icon">
            <!-- 视频号占位 -->
            <svg t="1762424643262" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2569" width="200" height="200"><path d="M169.728 169.856c75.968-22.784 167.168 65.472 312.064 302.08 16.256 26.496 30.208 48.256 30.976 48.256 0.768 0 15.424-23.04 32.576-51.072 144.064-236.416 235.328-323.2 312.832-297.792 49.28 16.128 70.016 63.68 69.824 159.808-0.384 187.072-90.24 480.192-163.648 533.568-60.48 43.904-150.784-11.392-234.88-143.872-8.384-13.248-16-24.064-16.96-24.064-0.96 0-8.32 10.752-16.512 23.872-44.352 71.744-98.752 127.36-145.408 148.608-22.656 10.368-62.08 11.776-78.72 2.816-45.376-24.32-96.384-130.112-135.936-281.792-63.232-242.304-50.944-394.88 33.792-420.416z m635.072 96.384c-48.128 37.376-110.144 120.64-200.96 269.824l-42.88 70.4 14.72 26.24c36.864 66.112 79.424 121.664 113.856 148.544 23.296 18.24 30.976 14.4 51.328-25.664 64-125.824 118.528-383.68 100.736-476.352-5.376-27.904-13.76-30.848-36.8-12.992zM191.36 258.304c-17.216 16.96-12.736 126.912 9.6 236.736 26.88 132.48 83.456 286.656 108.352 295.296 24.192 8.384 90.816-67.776 143.104-163.648l11.456-20.992-36.736-60.288C328.96 384.128 264.768 297.856 217.6 263.68c-14.464-10.496-19.776-11.52-26.112-5.312z" fill="#FFFFFF" fill-opacity=".8" p-id="2570"></path></svg>
          </slot>
        </button>
        <button class="social-btn circle-btn">
          <slot name="xiaohongshu-icon">
            <!-- 小红书图标占位 -->
<svg t="1762424596965" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1568" width="200" height="200"><path d="M19.242667 401.066667h68.053333s-7.936 113.962667-10.026667 133.973333c-2.090667 20.053333-9.6 73.898667-39.253333 108.117333L3.370667 567.594667c0 0.042667 7.936-7.509333 15.872-166.528zM133.461333 310.656h68.437334v315.008s-13.909333 49.536-52.309334 48.981333h-36.736l-29.866666-59.349333h44.074666c4.736 0 4.608-6.528 4.608-4.778667 0.042667 3.882667 1.792-299.861333 1.792-299.861333zM476.288 307.84l-34.517333 77.909333s-6.101333 15.573333 3.882666 16.128c10.026667 0.554667 57.301333 0 57.301334 0l-47.872 107.392s-4.992 13.909333 4.437333 13.909334h35.626667l-23.722667 55.637333h-78.08s-33.962667-4.992-20.053333-35.626667 34.517333-79.018667 34.517333-79.018666l-35.072 0.554666s-31.701333-6.698667-16.128-38.954666c15.573333-32.298667 54.528-117.973333 54.528-117.973334h65.152zM247.552 400.256H314.88s8.917333 162.773333 16 163.370667l-34.389333 77.610666s-31.701333-23.936-40.064-120.490666c-6.869333-79.701333-8.874667-120.490667-8.874667-120.490667zM362.752 600.576s2.218667 6.101333 27.818667 6.101333h77.909333l-31.146667 67.328H354.389333s-24.192 0.554667-23.509333-7.253333l31.872-66.176zM679.424 333.44v67.370667h-42.325333v205.909333h65.706666v67.328h-225.408l29.482667-66.773333h57.898667l1.109333-207.018667-40.618667-0.554667-1.664-66.261333z" fill="#ffffff" p-id="1569"></path><path d="M1024 615.04v-94.592c0-56.192-59.648-58.453333-59.648-58.453333h-17.237333V399.658667c0.554667-57.301333-68.992-66.218667-68.992-66.218667h-42.837334v-26.154667h-66.773333l1.109333 26.154667h-47.317333v66.218667h45.653333v62.890666H698.88v67.328l68.992 0.554667v143.573333h67.328V529.92h107.392c14.464 0 15.573333 14.464 15.573333 14.464s3.626667 39.381333 2.645334 56.192c-0.981333 16.682667-13.226667 15.573333-13.226667 15.573333h-55.637333l26.709333 57.898667h50.645333c59.050667 0 54.698667-59.008 54.698667-59.008z m-142.592-209.493333v55.637333H834.133333V400.512h40.362667c7.808 0 6.912 5.034667 6.912 5.034667z" fill="#ffffff" p-id="1570"></path><path d="M992 398.549333H960v-32c0-17.578667 14.421333-32 32-32 17.621333 0 32 14.421333 32 32s-14.378667 32-32 32z" fill="#ffffff" p-id="1571"></path></svg>
          </slot>
        </button>
        <button class="social-btn circle-btn">
          <slot name="douyin-icon">
            <!-- 抖音图标占位 -->
            <svg t="1762424695306" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3578" width="200" height="200"><path d="M937.4 423.9c-84 0-165.7-27.3-232.9-77.8v352.3c0 179.9-138.6 325.6-309.6 325.6S85.3 878.3 85.3 698.4c0-179.9 138.6-325.6 309.6-325.6 17.1 0 33.7 1.5 49.9 4.3v186.6c-15.5-6.1-32-9.2-48.6-9.2-76.3 0-138.2 65-138.2 145.3 0 80.2 61.9 145.3 138.2 145.3 76.2 0 138.1-65.1 138.1-145.3V0H707c0 134.5 103.7 243.5 231.6 243.5v180.3l-1.2 0.1" fill="#ffffff" p-id="3579"></path></svg>
          </slot>
        </button>
      </div>
    </div>

    <!-- 微信群二维码弹出层 - 使用 Teleport 避免被遮盖 -->
    <Teleport to="body">
      <transition name="qr-fade">
        <div 
          v-if="showWechatQR" 
          class="wechat-qr-popup" 
          :style="qrPopupStyle"
          @mouseenter="showWechatQR = true"
          @mouseleave="showWechatQR = false"
          @click.stop
        >
          <div v-if="loadingQR" class="qr-loading">加载中...</div>
          <div v-else-if="wechatQRCodes.length > 0" class="qr-content">
            <div 
              v-for="qrCode in wechatQRCodes" 
              :key="qrCode.id" 
              class="qr-item"
            >
              <div class="qr-image-wrapper">
                <img 
                  :src="qrCode.qrCodeUrl" 
                  :alt="qrCode.description"
                  class="qr-image"
                />
              </div>
              <p class="qr-desc">扫码即刻加入1818AI官方社群，获得技术支持</p>
            </div>
          </div>
          <div v-else class="qr-empty">暂无微信群二维码</div>
        </div>
      </transition>
    </Teleport>
  </div>
</template>

<script>
import { getWechatQRList } from '../../api/user'

export default {
  name: 'AIApplicationSidebar',
  props: {
    activeNav: {
      type: String,
      default: 'home'
    }
  },
  data() {
    return {
      // 主导航项
      navItems: [
        { key: 'home-feed', label: '灵感空间' },
        { key: 'home', label: '个人主页' },
        { key: 'subscription', label: '会员订阅', dot: true },
        { key: 'works', label: '我的作品' }
      ],
      // 工具分类
      toolCategories: [
        { key: 'create', label: '视频创作' },
        { key: 'image-create', label: '图片创作' }
      ],
      // 微信群二维码相关
      showWechatQR: false,
      wechatQRCodes: [],
      loadingQR: false,
      qrPopupStyle: {}
    }
  },
  mounted() {
    this.fetchWechatQRCodes()
  },
  methods: {
    handleNavClick(key) {
      this.$emit('nav-change', key)
    },
    // 点击邀请卡片
    handleInviteClick() {
      this.$emit('invite-click')
    },
    // 微信按钮鼠标移入
    handleWechatEnter() {
      this.showWechatQR = true
      this.$nextTick(() => {
        this.updateQRPopupPosition()
      })
    },
    // 微信按钮鼠标移出
    handleWechatLeave() {
      // 延迟隐藏，给用户时间移动到弹窗上
      setTimeout(() => {
        if (!this.showWechatQR) return
        this.showWechatQR = false
      }, 100)
    },
    // 更新二维码弹窗位置
    updateQRPopupPosition() {
      if (!this.$refs.wechatBtn) return
      
      const btn = this.$refs.wechatBtn
      const rect = btn.getBoundingClientRect()
      
      // 计算弹窗位置（按钮上方居中）
      const left = rect.left + rect.width / 2
      const bottom = window.innerHeight - rect.top + 12 // 距离按钮12px
      
      // 确保不超出屏幕边界
      const maxWidth = 200 // 最大宽度
      const padding = 20 // 屏幕边距
      
      let finalLeft = left
      
      // 防止左侧超出
      if (left - maxWidth / 2 < padding) {
        finalLeft = maxWidth / 2 + padding
      }
      
      // 防止右侧超出
      if (left + maxWidth / 2 > window.innerWidth - padding) {
        finalLeft = window.innerWidth - maxWidth / 2 - padding
      }
      
      this.qrPopupStyle = {
        left: `${finalLeft}px`,
        bottom: `${bottom}px`,
        transform: 'translateX(-50%)'
      }
    },
    // 获取微信群二维码
    async fetchWechatQRCodes() {
      try {
        this.loadingQR = true
        const response = await getWechatQRList()
        if (response && response.code === 200 && response.data) {
          this.wechatQRCodes = response.data.qrCodes || []
        }
      } catch (error) {
        console.error('获取微信群二维码失败:', error)
        this.wechatQRCodes = []
      } finally {
        this.loadingQR = false
      }
    }
  }
}
</script>

<style scoped>
.ai-app-sidebar {
  width: 230px;
  height: 100vh;
  background-color: #151515;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: 0;
  padding-left: 0;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  height: 100%;
}

.nav-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.tools-section {
  margin-top: 0;
}

.section-title {
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 21px;
  color: white;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  margin-bottom: 0;
  text-align: left;
}

.nav-item {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  gap: 16px;
  justify-content: flex-start;
  text-align: left;
  color: white;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.nav-item.active {
  background-color: rgba(26, 195, 255, 0.1);
}

.nav-item.active .nav-icon,
.nav-item.active .nav-text {
  color: white;
}

.nav-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #94A3B8;
  transition: color 0.3s ease;
}

.icon-placeholder {
  width: 20px;
  height: 20px;
  background-color: #64748B;
  border-radius: 4px;
  opacity: 0.6;
}

.nav-text {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #94A3B8;
  line-height: 1.2;
  text-align: left;
  flex-shrink: 0;
  transition: color 0.3s ease;
}



.nav-badge {
  position: relative;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0%;
  text-align: left;
  padding: 2px 8px;
  margin-left: 8px;
  flex-shrink: 0;
  border-radius: 4px;
  background: rgba(62, 163, 255, 0.2);
  background-image: linear-gradient(90.00deg, rgba(90, 224, 255, 1), rgba(0, 155, 255, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(62, 163, 255, 0.2);
  border-radius: 4px;
  z-index: -1;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .ai-app-sidebar {
    width: 200px;
  }

  .nav-text {
    font-size: 18px;
  }

  .section-title {
    font-size: 12px;
    height: 40px;
    text-align: left;
  }

  .nav-item {
    height: 40px;
    padding: 0 20px;
    gap: 12px;
    text-align: left;
  }

  .nav-icon {
    width: 20px;
    height: 20px;
  }

  .icon-placeholder {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 768px) {
  .ai-app-sidebar {
    width: 180px;
  }

  .nav-text {
    font-size: 16px;
  }

  .section-title {
    font-size: 13px;
    height: 36px;
  }

  .nav-item {
    height: 36px;
    padding: 0 16px;
    gap: 10px;
  }

  .nav-icon {
    width: 18px;
    height: 18px;
  }

  .icon-placeholder {
    width: 16px;
    height: 16px;
  }

  .nav-badge {
    font-size: 10px;
    padding: 1px 6px;
  }
}

@media (max-width: 480px) {
  .ai-app-sidebar {
    width: 160px;
  }

  .nav-text {
    font-size: 14px;
  }

  .section-title {
    font-size: 12px;
    height: 32px;
  }

  .nav-item {
    height: 32px;
    padding: 0 12px;
    gap: 8px;
  }

  .nav-icon {
    width: 16px;
    height: 16px;
  }

  .icon-placeholder {
    width: 14px;
    height: 14px;
  }

  .nav-badge {
    font-size: 9px;
    padding: 1px 4px;
  }
}

/* 推广邀请区域 */
.invite-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 16px 16px;
}

/* 推广邀请卡片 */
.invite-card {
  padding: 12px 16px;
  background: rgba(96, 207, 255, 0.16);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  animation: card-pulse 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

/* 卡片呼吸动画 */
@keyframes card-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(96, 207, 255, 0.2);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(96, 207, 255, 0.4);
  }
}

/* 卡片背景光晕动画 */
.invite-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(90, 224, 255, 0.1),
    transparent
  );
  animation: card-shine 4s linear infinite;
  pointer-events: none;
}

@keyframes card-shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* 悬停效果增强 */
.invite-card:hover {
  transform: scale(1.05) translateY(-2px);
  background: rgba(96, 207, 255, 0.22);
  border-color: rgba(90, 224, 255, 0.4);
  box-shadow: 0 12px 32px rgba(96, 207, 255, 0.5);
  animation: none; /* 悬停时停止呼吸动画 */
}

/* 点击效果 */
.invite-card:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

.invite-header {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1; /* 确保内容在光晕之上 */
}

.invite-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #3B82F6;
}

/* 礼物图标动画 */
.gift-icon {
  display: block;
  animation: icon-float 3s ease-in-out infinite;
}

/* 图标浮动动画 */
@keyframes icon-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* 大星星动画 - 旋转 + 闪烁 */
.gift-icon .star-large {
  animation: star-rotate 3s ease-in-out infinite, star-twinkle 2s ease-in-out infinite;
  transform-origin: 31.86px 4.48px; /* 星星中心点 */
}

/* 小星星动画 - 旋转 + 闪烁（延迟） */
.gift-icon .star-small {
  animation: star-rotate 2.5s ease-in-out infinite 0.5s, star-twinkle 1.8s ease-in-out infinite 0.3s;
  transform-origin: 35.2px 10.88px; /* 星星中心点 */
}

/* 旋转动画 */
@keyframes star-rotate {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-15deg) scale(1.1);
  }
  50% {
    transform: rotate(0deg) scale(1);
  }
  75% {
    transform: rotate(15deg) scale(1.1);
  }
}

/* 闪烁动画 */
@keyframes star-twinkle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.invite-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.invite-title {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #5AE0FF;
  line-height: 1.4;
  animation: text-glow 2s ease-in-out infinite;
}

/* 文字发光动画 */
@keyframes text-glow {
  0%, 100% {
    text-shadow: 0 0 5px rgba(90, 224, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 15px rgba(90, 224, 255, 0.8), 
                 0 0 25px rgba(90, 224, 255, 0.4);
  }
}

.invite-subtitle {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.3;
}

/* 社交图标按钮 - 独立在卡片外 */
.social-icons {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  padding: 0 4px;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.social-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* 微信按钮 - 矩形带文字 */
.wechat-btn {
  width: 74px;
  height: 34px;
  border-radius: 17px;
  background: rgba(7, 193, 96, 0.15);
  border-color: rgba(7, 193, 96, 0.4);
  padding: 0 10px;
  position: relative;
}

.wechat-btn:hover {
  background: rgba(7, 193, 96, 0.25);
  border-color: rgba(7, 193, 96, 0.5);
}

.wechat-btn svg,
.wechat-btn img {
  width: 18px;
  height: 18px;
  color: #07C160;
  flex-shrink: 0;
}

.wechat-label {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #07C160;
  line-height: 1;
  white-space: nowrap;
}

/* 微信群二维码弹出层 */
.wechat-qr-popup {
  position: fixed;
  background: rgba(30, 41, 59, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px;
  width: auto;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  z-index: 10000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  /* 隐藏滚动条但保持滚动功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* 隐藏滚动条 - Webkit浏览器 */
.wechat-qr-popup::-webkit-scrollbar {
  display: none;
}

/* 箭头指示器 - 指向下方 */
.wechat-qr-popup::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: rgba(30, 41, 59, 0.95);
}

.qr-loading,
.qr-empty {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 12px 8px;
  white-space: nowrap;
}

.qr-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.qr-image-wrapper {
  width: auto;
  height: auto;
  min-width: 100px;
  min-height: 100px;
  max-width: 200px;
  max-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 6px;
}

.qr-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-width: 80px;
  min-height: 80px;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

.qr-desc {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  line-height: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  max-width: 140px;
  word-wrap: break-word;
}

/* 过渡动画 - 从下向上淡入 */
.qr-fade-enter-active,
.qr-fade-leave-active {
  transition: all 0.2s ease;
}

.qr-fade-enter-from {
  opacity: 0;
}

.qr-fade-leave-to {
  opacity: 0;
}

/* 其他按钮 - 圆形只有图标 */
.circle-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.circle-btn svg {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.6);
}

/* 滚动条样式 */
.ai-app-sidebar::-webkit-scrollbar {
  width: 4px;
}

.ai-app-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.ai-app-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.ai-app-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 响应式适配 - 推广区域 */
@media (max-width: 1200px) {
  .invite-section {
    padding: 0 12px 12px 12px;
    gap: 10px;
  }

  .invite-card {
    padding: 10px 14px;
  }

  .invite-title {
    font-size: 13px;
  }

  .invite-subtitle {
    font-size: 11px;
  }

  .social-icons {
    gap: 6px;
  }

  .wechat-btn {
    width: 68px;
    height: 32px;
    border-radius: 16px;
    padding: 0 8px;
  }

  .wechat-btn svg {
    width: 16px;
    height: 16px;
  }

  .wechat-label {
    font-size: 11px;
  }

  .circle-btn {
    width: 32px;
    height: 32px;
  }

  .circle-btn svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 768px) {
  .invite-section {
    padding: 0 10px 10px 10px;
    gap: 8px;
  }

  .invite-card {
    padding: 8px 12px;
  }

  .invite-icon {
    width: 28px;
    height: 28px;
  }

  .invite-title {
    font-size: 12px;
  }

  .invite-subtitle {
    font-size: 10px;
  }

  .social-icons {
    gap: 6px;
  }

  .wechat-btn {
    width: 64px;
    height: 30px;
    border-radius: 15px;
    padding: 0 8px;
  }

  .wechat-btn svg {
    width: 14px;
    height: 14px;
  }

  .wechat-label {
    font-size: 10px;
  }

  .circle-btn {
    width: 30px;
    height: 30px;
  }

  .circle-btn svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 480px) {
  .invite-section {
    padding: 0 8px 8px 8px;
    gap: 6px;
  }

  .invite-card {
    padding: 6px 10px;
  }

  .invite-icon {
    width: 24px;
    height: 24px;
  }

  .invite-title {
    font-size: 11px;
  }

  .invite-subtitle {
    font-size: 9px;
  }

  .social-icons {
    gap: 4px;
  }

  .wechat-btn {
    width: 58px;
    height: 28px;
    border-radius: 14px;
    padding: 0 6px;
  }

  .wechat-btn svg {
    width: 12px;
    height: 12px;
  }

  .wechat-label {
    font-size: 9px;
  }

  .circle-btn {
    width: 28px;
    height: 28px;
  }

  .circle-btn svg {
    width: 12px;
    height: 12px;
  }
}
</style>
