num/client/pages/chart/index.vue

<template>
  <view class="page-chart">
    <!-- Triangle chart -->
    <view class="chart-section">
      <TriangleChart
        :chartData="store.currentChart"
        :birthYear="store.currentBirthYear"
        :birthMonth="store.currentBirthMonth"
        :birthDay="store.currentBirthDay"
        :recordId="store.currentRecordId"
        :annotations="annotations"
        :tags="allTags"
        @annotation-add="onAnnotationAdd"
        @annotation-delete="onAnnotationDelete"
        @tag-create="onTagCreate"
      />
    </view>

    <!-- Menu button (regenerate + share info) -->
    <view class="menu-bar">
      <text class="menu-btn" @click="showMenu">···</text>
    </view>

    <!-- US-3.1: AI Interpretation section -->
    <view class="interpret-bar">
      <button class="interpret-btn" :disabled="interpreting" @click="fetchInterpret">
        {{ interpreting ? '解读生成中...' : '🔮 查看AI解读' }}
      </button>
    </view>

    <!-- US-3.1: Interpretation panel -->
    <view v-if="interpretData" id="interpret-section" class="interpret-panel">
      <view
        v-for="(section, key) in interpretData"
        :key="key"
        class="interpret-card"
        :class="{ expanded: interpretExpanded[key] }"
        @click="toggleInterpretSection(key)"
      >
        <view class="interpret-card-header">
          <text class="interpret-num-badge">{{ section.number }}</text>
          <text class="interpret-card-title">{{ section.title }}</text>
          <text class="interpret-toggle">{{ interpretExpanded[key] ? '▾' : '▸' }}</text>
        </view>
        <view v-show="interpretExpanded[key]" class="interpret-card-body">
          <text class="interpret-content">{{ section.content }}</text>
        </view>
      </view>
      <!-- Disclaimer -->
      <view class="interpret-disclaimer">
        <text class="disclaimer-text">本解读由AI生成，仅供参考</text>
      </view>
    </view>

    <!-- Loading skeleton -->
    <view v-if="interpreting" class="interpret-skeleton">
      <view v-for="n in 4" :key="n" class="skeleton-card">
        <view class="skeleton-header"></view>
        <view v-if="n === 1" class="skeleton-body">
          <view class="skeleton-line"></view>
          <view class="skeleton-line short"></view>
          <view class="skeleton-line"></view>
        </view>
      </view>
    </view>

    <!-- US-9.1: Academic orientation button -->
    <view class="academic-bar">
      <button class="academic-btn" :disabled="academicLoading" @click="fetchAcademicOrientation">
        {{ academicLoading ? '分析生成中...' : '🎓 学业方向分析' }}
      </button>
      <text v-if="!userStore.isVipActive && maxAcademic > 0" class="academic-quota">
        今日 {{ usedAcademic }}/{{ maxAcademic }} 次
      </text>
    </view>

    <!-- US-9.1: Academic orientation panel -->
    <view v-if="academicData" id="academic-section" class="academic-panel">
      <view class="academic-section-title">🎯 学业方向深度分析</view>
      <view
        v-for="(section, key) in academicData"
        :key="key"
        class="academic-card"
        :class="{ expanded: academicExpanded[key], talent: key==='talentTendency', direction: key==='suitableDirection', learning: key==='learningStyle', parenting: key==='parentingAdvice', periods: key==='keyPeriods' }"
        @click="toggleAcademicSection(key)"
      >
        <view class="academic-card-header">
          <text class="academic-card-title">{{ section.title }}</text>
          <text class="academic-toggle">{{ academicExpanded[key] ? '▾' : '▸' }}</text>
        </view>
        <view v-show="academicExpanded[key]" class="academic-card-body">
          <text class="academic-content">{{ section.content }}</text>
          <view v-if="section.matchPercentages" class="match-bars">
            <view v-for="(pct, dir) in section.matchPercentages" :key="dir" class="match-row">
              <text class="match-label">{{ dir }}</text>
              <view class="match-track">
                <view class="match-fill" :style="{ width: pct + '%' }" :class="'pct-' + pct"></view>
              </view>
              <text class="match-value">{{ pct }}%</text>
            </view>
          </view>
        </view>
      </view>
      <view class="academic-disclaimer">
        <text class="disclaimer-text">💡 以上分析由AI生成，如需人工深度方案，可申请能量师出方案</text>
      </view>
    </view>

    <!-- US-9.1: Loading skeleton -->
    <view v-if="academicLoading" class="academic-skeleton">
      <view v-for="n in 3" :key="n" class="skeleton-card">
        <view class="skeleton-header"></view>
        <view v-if="n === 1" class="skeleton-body">
          <view class="skeleton-line"></view><view class="skeleton-line short"></view><view class="skeleton-line"></view>
        </view>
      </view>
    </view>

    <!-- US-9.1: Academic quota exceeded upgrade card -->
    <view v-if="quotaAcademicExceeded && !academicData && !academicLoading" class="academic-upgrade-card">
      <text class="academic-upgrade-title">🎓 学业方向分析</text>
      <text class="academic-upgrade-desc">今日学业分析次数已用完，开通会员享无限次</text>
      <button class="academic-upgrade-btn" @click="goSubscribeC">开通会员 ¥131/年</button>
    </view>

    <!-- AI Chat -->
    <view class="chat-section">
      <view class="section-title">
        <text class="title-icon">◈</text>
        AI 解读
        <text v-if="!userStore.isVipActive && maxChats > 0" class="quota-badge">
          今日 {{ usedChats }}/{{ maxChats }} 轮
        </text>
        <text v-if="userStore.isVipActive" class="quota-badge vip">无限次</text>
      </view>

      <scroll-view class="chat-box" scroll-y :scroll-top="scrollTop">
        <view v-for="(msg, idx) in messages" :key="idx" class="msg-row" :class="msg.role">
          <view class="msg-bubble">
            <text>{{ msg.content }}</text>
          </view>
        </view>
      </scroll-view>

      <!-- Quota exceeded prompt for non-VIP -->
      <view v-if="quotaExceeded" class="upgrade-prompt">
        <text class="upgrade-text">今日 AI 解读次数已用完</text>
        <text class="upgrade-desc">选择适合的会员方案，解锁无限次解读</text>
        <view class="upgrade-actions">
          <button class="upgrade-btn secondary" @click="goSubscribeC">C端会员 ¥131/年</button>
          <button class="upgrade-btn" @click="goSubscribe">能量师 ¥1,314/年</button>
        </view>
      </view>

      <!-- Share hint (non-intrusive) -->
      <view v-if="shareRemaining > 0 && !userStore.isVipActive" class="share-hint">
        <text class="share-hint-text">分享好友可解锁更多次数 · 今日剩余 {{ shareRemaining }} 次</text>
      </view>

      <!-- Input area — always visible, shows upgrade prompt on 4th click -->
      <view class="input-bar">
        <input
          class="chat-input"
          v-model="chatInput"
          :placeholder="quotaExceeded ? '今日次数已用完，点击发送开通会员' : '输入您的问题...'"
          @confirm="sendQuestion(chatInput)"
          :disabled="loading"
        />
        <button class="send-btn" @click="sendQuestion(chatInput)" :disabled="loading">
          {{ loading ? '···' : '发送' }}
        </button>
      </view>

      <!-- US-6.6: Subscription card for free users / 已开通 badge for paid -->
      <view v-if="userStore.isLoggedIn" class="subscribe-section">
        <!-- Annual paid user — always show badge -->
        <view v-if="userStore.vipType === 'annual'" class="vip-badge-bar">
          <text class="vip-badge-text">✅ 已开通AI解读</text>
          <text class="vip-badge-expiry" v-if="userStore.vipEndTime">有效期至 {{ userStore.vipEndTime.slice(0, 10) }}</text>
          <text class="vip-poster-link" @click="goPoster">📱 生成推广海报</text>
        </view>
        <!-- Practitioner paid user — always show badge -->
        <view v-else-if="userStore.vipType === 'practitioner'" class="vip-badge-bar pro">
          <text class="vip-badge-text">✅ 已开通能量师</text>
          <text class="vip-badge-expiry" v-if="userStore.vipEndTime">有效期至 {{ userStore.vipEndTime.slice(0, 10) }}</text>
        </view>
        <!-- Free user — subscription card only when quota exceeded -->
        <view v-else-if="quotaExceeded" class="subscribe-card">
          <text class="subscribe-title">🔮 AI解读会员</text>
          <text class="subscribe-desc">¥131/年 · 无限AI解读 · 个性化报告 · 推广赚佣金</text>
          <view class="subscribe-actions">
            <button class="subscribe-btn" @click="goSubscribeC">立即开通 ¥131</button>
            <text class="subscribe-link" @click="goSubscribe">了解能量师专业版</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// Page lifecycle hooks (needed for WeChat share)
export default {
  onShareAppMessage() {
    const pages = getCurrentPages()
    const page = pages[pages.length - 1]
    const recordId = page?.options?.recordId || ''
    const store = this.$scope?.store
    const title = store?.currentChart?.O
      ? `我的命盘主性格数字是${store.currentChart.O}，快来测测你的！`
      : '数字能量命盘分析'
    return {
      title,
      path: `/pages/chart/index?recordId=${recordId}`,
      imageUrl: '/static/share-card.png'
    }
  },
  onShareTimeline() {
    const pages = getCurrentPages()
    const page = pages[pages.length - 1]
    const recordId = page?.options?.recordId || ''
    return {
      title: '数字能量命盘分析',
      query: `recordId=${recordId}`,
      imageUrl: '/static/share-card.png'
    }
  }
}
</script>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useChartStore } from '@/stores/chart'
import { useUserStore } from '@/stores/user'
import TriangleChart from '@/components/TriangleChart.vue'
import { chartApi, chatApi, consultationApi, profileApi, annotationApi, exportApi } from '@/utils/api'

const store = useChartStore()
const userStore = useUserStore()
const chatInput = ref('')
const scrollTop = ref(0)
const messages = ref([])
const loading = ref(false)
const usedChats = ref(0)
const maxChats = ref(0)
  const shareCount = ref(0)
  const shareLimit = ref(0)
  const usedAcademic = ref(0)
  const maxAcademic = ref(0)

// Annotation / Tag state (US-7.1 / US-7.2)
const annotations = ref([])
const allTags = ref([])

// US-3.1: AI interpretation state
const interpretData = ref(null)
const interpreting = ref(false)
  const interpretExpanded = ref({})

  // US-9.1: Academic orientation state
  const academicData = ref(null)
  const academicLoading = ref(false)
  const academicExpanded = ref({})

const quotaExceeded = computed(() => {
  if (userStore.isVipActive) return false
  return maxChats.value > 0 && usedChats.value >= maxChats.value
})

  const shareRemaining = computed(() => {
    if (userStore.isVipActive) return -1
    if (shareLimit.value <= 0) return 0
    return Math.max(0, shareLimit.value - shareCount.value)
  })

  const quotaAcademicExceeded = computed(() => {
    if (userStore.isVipActive) return false
    return maxAcademic.value > 0 && usedAcademic.value >= maxAcademic.value
  })

onMounted(async () => {
  try {
    await userStore.fetchQuota()
  } catch (e) { /* ignore */ }

  // URL shareability — load from recordId if no store state (US-1.1 §14)
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const recordId = currentPage?.options?.recordId
  if (!store.currentChart && recordId) {
    try {
      await store.loadChart(Number(recordId))
    } catch (e) {
      // fall through to "no data" message
    }
  }

  if (store.currentChart) {
      maxChats.value = userStore.maxChats || 3
      usedChats.value = userStore.usedChats || 0
      shareCount.value = userStore.shareCount || 0
      shareLimit.value = userStore.shareLimit || 1
      usedAcademic.value = userStore.usedAcademic || 0
      maxAcademic.value = userStore.maxAcademic || 1

    // Load annotations and tags for this record (US-7.1/7.2)
    if (store.currentRecordId) {
      loadAnnotations()
    }

    // Use consultationMessages from store (set during startConsultation) if available
    if (store.consultationMessages && store.consultationMessages.length > 0) {
      messages.value = store.consultationMessages.map(m => ({
        role: m.role === 'ai' ? 'ai' : 'user',
        content: m.content
      }))
    } else if (store.currentRecordId) {
      try {
        const history = await chatApi.history(store.currentRecordId)
        messages.value = history.map(m => ({
          role: m.role === 'ai' ? 'ai' : 'user',
          content: m.content
        }))
        const userMsgCount = history.filter(m => m.role === 'user').length
        usedChats.value = Math.max(usedChats.value, userMsgCount)
      } catch (e) {
        // fallback to generic greeting
      }
    }

    // Ensure at least a greeting message if still empty
    if (messages.value.length === 0) {
      messages.value = [{
        role: 'ai',
        content: `已为您生成命盘。主性格数字为${store.currentChart.O}。请点击下方问题或输入您想了解的内容。`
      }]
    }
  } else {
    messages.value = [{
      role: 'ai',
      content: '暂无命盘数据，请先返回首页输入出生信息。'
    }]
  }
})

// US-3.1: Fetch AI structured interpretation
async function fetchInterpret() {
  if (!store.currentRecordId) {
    uni.showToast({ title: '暂无命盘数据', icon: 'none' })
    return
  }
  // If already loaded, just scroll to it
  if (interpretData.value) {
    scrollToInterpret()
    return
  }
  interpreting.value = true
  try {
    const data = await chartApi.interpret(store.currentRecordId)
    interpretData.value = data
    // Auto-expand the main character section
    interpretExpanded.value = { mainCharacter: true }
    uni.showToast({ title: '解读已生成', icon: 'success' })
    scrollToInterpret()
  } catch (e) {
    uni.showToast({ title: e.message || '解读生成失败', icon: 'none' })
  } finally {
    interpreting.value = false
  }
}

function scrollToInterpret() {
  // Scroll to the interpret section after rendering
  uni.createSelectorQuery().select('#interpret-section').boundingClientRect(res => {
    if (res) {
      uni.pageScrollTo({ scrollTop: res.top - 20, duration: 300 })
    }
  }).exec()
}

function toggleInterpretSection(key) {
  interpretExpanded.value[key] = !interpretExpanded.value[key]
}

// US-9.1: Fetch academic orientation
async function fetchAcademicOrientation() {
  if (!store.currentRecordId) {
    uni.showToast({ title: '暂无命盘数据', icon: 'none' })
    return
  }
  if (academicData.value) {
    scrollToAcademic()
    return
  }
  if (quotaAcademicExceeded.value) {
    uni.showToast({ title: '今日学业分析次数已用完', icon: 'none' })
    return
  }
  academicLoading.value = true
  try {
    const data = await chartApi.academicOrientation(store.currentRecordId)
    academicData.value = data
    academicExpanded.value = { talentTendency: true }
    usedAcademic.value++
    userStore.usedAcademic = usedAcademic.value
    uni.showToast({ title: '分析已生成', icon: 'success' })
    scrollToAcademic()
  } catch (e) {
    if (e.code === 1008) {
      usedAcademic.value = maxAcademic.value
      userStore.usedAcademic = maxAcademic.value
    }
    uni.showToast({ title: e.message || '分析生成失败', icon: 'none' })
  } finally {
    academicLoading.value = false
  }
}

function scrollToAcademic() {
  uni.createSelectorQuery().select('#academic-section').boundingClientRect(res => {
    if (res) uni.pageScrollTo({ scrollTop: res.top - 20, duration: 300 })
  }).exec()
}

function toggleAcademicSection(key) {
  academicExpanded.value[key] = !academicExpanded.value[key]
}

async function sendQuestion(q) {
  if (!q.trim() || loading.value) return
  if (quotaExceeded.value) {
    // Show upgrade prompt instead of sending
    uni.showModal({
      title: '今日解读次数已用完',
      content: '开通 VIP 会员享无限次 AI 解读，或分享好友获取额外次数',
      confirmText: '开通会员',
      cancelText: '分享好友',
      success: (res) => {
        if (res.confirm) {
          goSubscribeC()
        } else {
          triggerShare()
        }
      }
    })
    return
  }

  messages.value.push({ role: 'user', content: q })
  chatInput.value = ''
  loading.value = true

  try {
    if (store.currentRecordId) {
      const res = await chatApi.send({ chartRecordId: store.currentRecordId, query: q })
      messages.value.push({ role: 'ai', content: res.reply })
      usedChats.value++
    } else {
      messages.value.push({
        role: 'ai',
        content: `数字能量分析显示，${q}方面您的能量组合表明有良好的发展潜力，请结合自身情况理性决策。`
      })
    }
  } catch (e) {
    if (e.code === 1008) {
      usedChats.value = maxChats.value
      messages.value.push({
        role: 'ai',
        content: '今日解读次数已用完，开通会员可享无限次解读。'
      })
    } else {
      messages.value.push({
        role: 'ai',
        content: e.message || '解读服务暂时不可用，请稍后再试。'
      })
    }
  }

  loading.value = false
  scrollTop.value = 99999
}

// US-3.3: Regenerate interpretation via action sheet menu
function showMenu() {
  const items = ['🔄 重新生成解读']
  // US-2.2: PDF export for paid users only
  if (userStore.isVipActive) {
    items.push('📄 导出 PDF')
  }
  if (!userStore.isVipActive && shareRemaining.value > 0) {
    items.push('📤 分享给好友')
  }
  items.push('❌ 取消')
  uni.showActionSheet({
    itemList: items,
    success: async (res) => {
      if (res.tapIndex === 0) {
        await confirmRegenerate()
      } else if (res.tapIndex === 1) {
        if (items[1] === '📄 导出 PDF') {
          await exportPdf()
        } else if (items[1] === '📤 分享给好友') {
          await triggerShare()
        }
      } else if (res.tapIndex === 2 && items[2] === '📤 分享给好友') {
        await triggerShare()
      }
    }
  })
}

async function confirmRegenerate() {
  uni.showModal({
    title: '重新生成解读',
    content: '将清除当前对话记录并生成全新的AI解读，确定吗？',
    success: async (confirm) => {
      if (!confirm.confirm) return
      if (!store.currentRecordId) {
        uni.showToast({ title: '暂无命盘数据', icon: 'none' })
        return
      }
      try {
        uni.showLoading({ title: '重新生成中...' })
        const newMessages = await consultationApi.regenerate(store.currentRecordId)
        messages.value = (newMessages || []).map(m => ({
          role: m.role === 'ai' ? 'ai' : 'user',
          content: m.content
        }))
        // Reset chat counters
        usedChats.value = 0
        uni.hideLoading()
        uni.showToast({ title: '解读已重新生成', icon: 'success' })
        scrollTop.value = 99999
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: '重新生成失败，请重试', icon: 'none' })
      }
    }
  })
}

// US-2.1: Track share and update quota
async function triggerShare() {
  uni.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline'],
    success: async () => {
      // Call backend to track share
      try {
        const result = await profileApi.trackShare()
        shareCount.value = result.dailyShareCount || shareCount.value + 1
      } catch (e) { /* best-effort */ }
    }
  })
}

// US-2.2: Export PDF report
async function exportPdf() {
  if (!store.currentRecordId) {
    uni.showToast({ title: '暂无命盘数据', icon: 'none' })
    return
  }
  uni.showLoading({ title: '正在生成 PDF...' })
  try {
    // The API returns a PDF binary. We use uni.downloadFile to get it as a temp file.
    const token = uni.getStorageSync('token')
    const url = 'http://127.0.0.1:8186/api/export/pdf'
    const downloadRes = await new Promise((resolve, reject) => {
      uni.downloadFile({
        url,
        header: { Authorization: `Bearer ${token}` },
        method: 'POST',
        data: { recordId: store.currentRecordId },
        success: resolve,
        fail: reject
      })
    })
    if (downloadRes.statusCode !== 200) {
      throw new Error('下载失败')
    }
    uni.hideLoading()
    // Open the PDF file
    uni.openDocument({
      filePath: downloadRes.tempFilePath,
      success: () => {
        uni.showToast({ title: 'PDF 已生成', icon: 'success' })
      },
      fail: () => {
        uni.showToast({ title: '打开文件失败', icon: 'none' })
      }
    })
  } catch (e) {
    uni.hideLoading()
    uni.showToast({ title: e.message || '导出失败', icon: 'none' })
  }
}

function goSubscribe() {
  uni.navigateTo({ url: '/pages/subscribe/index' })
}
function goSubscribeC() {
  uni.navigateTo({ url: '/pages/payment/index?product=annual' })
}
function goPoster() {
  uni.navigateTo({ url: '/pages/subscribe/index' })
}

// === Annotation / Tag handlers (US-7.1 / US-7.2) ===

async function loadAnnotations() {
  if (!store.currentRecordId) return
  try {
    const [annoList, tagList] = await Promise.all([
      annotationApi.list(store.currentRecordId),
      annotationApi.listTags(store.currentRecordId)
    ])
    annotations.value = annoList || []
    allTags.value = tagList || []
  } catch (e) { /* best-effort */ }
}

async function onAnnotationAdd(data) {
  try {
    const saved = await annotationApi.add(data)
    // Reload annotations to include the new one with server-generated ID
    if (store.currentRecordId) {
      const annoList = await annotationApi.list(store.currentRecordId)
      annotations.value = annoList || []
    }
    uni.showToast({ title: '批注已保存', icon: 'success' })
  } catch (e) {
    uni.showToast({ title: '保存失败', icon: 'none' })
  }
}

async function onAnnotationDelete(annoId) {
  try {
    await annotationApi.delete(annoId)
    annotations.value = annotations.value.filter(a => a.id !== annoId)
    uni.showToast({ title: '批注已删除', icon: 'success' })
  } catch (e) {
    uni.showToast({ title: '删除失败', icon: 'none' })
  }
}

async function onTagCreate(tagData) {
  try {
    const saved = await annotationApi.addTag({ ...tagData, recordId: store.currentRecordId })
    if (store.currentRecordId) {
      const tagList = await annotationApi.listTags(store.currentRecordId)
      allTags.value = tagList || []
    }
    uni.showToast({ title: '标签已创建', icon: 'success' })
  } catch (e) {
    uni.showToast({ title: '创建失败', icon: 'none' })
  }
}
</script>

<style scoped lang="scss">
.page-chart {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #0c0a1a 0%, #120d28 50%, #0f0c1e 100%);
}

.chart-section {
  flex-shrink: 0;
  margin: 0 14px;
}

/* Menu bar — three-dot button */
.menu-bar {
  display: flex;
  justify-content: flex-end;
  padding: 0 14px;
  margin: -8px 0 0;
}
.menu-btn {
  width: 32px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 2px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}
.menu-btn:active {
  background: rgba(255, 255, 255, 0.08);
}

/* US-3.1: Interpret button bar */
.interpret-bar {
  flex-shrink: 0;
  margin: 0 14px 10px;
}
.interpret-btn {
  width: 100%;
  height: 44px;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  border: none;
  border-radius: 12px;
  line-height: 44px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
}
.interpret-btn[disabled] {
  opacity: 0.5;
}

/* Interpretation panel */
.interpret-panel {
  flex-shrink: 0;
  margin: 0 14px 16px;
}
.interpret-card {
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.interpret-card.expanded {
  border-color: rgba(124, 58, 237, 0.25);
  background: rgba(124, 58, 237, 0.08);
}
.interpret-card-header {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  gap: 10px;
}
.interpret-num-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
  flex-shrink: 0;
}
.interpret-card-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.interpret-toggle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
}
.interpret-card-body {
  padding: 0 14px 14px 52px;
}
.interpret-content {
  display: block;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  white-space: pre-wrap;
}

/* Disclaimer */
.interpret-disclaimer {
  text-align: center;
  padding: 6px 0 2px;
}
.disclaimer-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.2);
}

/* Loading skeleton */
.interpret-skeleton {
  flex-shrink: 0;
  margin: 0 14px 16px;
}
.skeleton-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.skeleton-header {
  height: 24px;
  margin: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  width: 60%;
}
.skeleton-body {
  padding: 0 14px 14px;
}
.skeleton-line {
  height: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  margin-bottom: 8px;
}
.skeleton-line.short {
  width: 70%;
}

/* US-9.1: Academic bar */
.academic-bar {
  flex-shrink: 0;
  margin: 0 14px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.academic-btn {
  flex: 1;
  height: 44px;
  background: linear-gradient(135deg, #0891b2, #06b6d4);
  color: #fff;
  border: none;
  border-radius: 12px;
  line-height: 44px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
}
.academic-btn[disabled] { opacity: 0.5; }
.academic-quota {
  font-size: 11px;
  color: #22d3ee;
  background: rgba(34, 211, 238, 0.1);
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid rgba(34, 211, 238, 0.15);
  white-space: nowrap;
}

/* US-9.1: Academic panel */
.academic-panel {
  flex-shrink: 0;
  margin: 0 14px 16px;
}
.academic-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #22d3ee;
  margin-bottom: 12px;
  padding-left: 2px;
}
.academic-card {
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.academic-card.talent { background: rgba(8, 145, 178, 0.06); border: 1px solid rgba(8, 145, 178, 0.12); }
.academic-card.talent.expanded { border-color: rgba(8, 145, 178, 0.25); background: rgba(8, 145, 178, 0.08); }
.academic-card.direction { background: rgba(251, 191, 36, 0.06); border: 1px solid rgba(251, 191, 36, 0.12); }
.academic-card.direction.expanded { border-color: rgba(251, 191, 36, 0.25); background: rgba(251, 191, 36, 0.08); }
.academic-card.learning { background: rgba(52, 211, 153, 0.06); border: 1px solid rgba(52, 211, 153, 0.12); }
.academic-card.learning.expanded { border-color: rgba(52, 211, 153, 0.25); background: rgba(52, 211, 153, 0.08); }
.academic-card.parenting { background: rgba(244, 114, 182, 0.06); border: 1px solid rgba(244, 114, 182, 0.12); }
.academic-card.parenting.expanded { border-color: rgba(244, 114, 182, 0.25); background: rgba(244, 114, 182, 0.08); }
.academic-card.periods { background: rgba(167, 139, 250, 0.06); border: 1px solid rgba(167, 139, 250, 0.12); }
.academic-card.periods.expanded { border-color: rgba(167, 139, 250, 0.25); background: rgba(167, 139, 250, 0.08); }

.academic-card-header {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  gap: 10px;
}
.academic-card-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.academic-toggle {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}
.academic-card-body {
  padding: 0 14px 14px;
}
.academic-content {
  display: block;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  white-space: pre-wrap;
}

/* Match percentage bars */
.match-bars {
  margin-top: 10px;
}
.match-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.match-label {
  width: 32px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  text-align: right;
}
.match-track {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.match-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.match-fill.pct-80, .match-fill.pct-85, .match-fill.pct-90, .match-fill.pct-95 { background: linear-gradient(90deg, #22d3ee, #06b6d4); }
.match-fill.pct-60, .match-fill.pct-65, .match-fill.pct-70, .match-fill.pct-75 { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.match-fill.pct-40, .match-fill.pct-45, .match-fill.pct-50, .match-fill.pct-55 { background: linear-gradient(90deg, #f87171, #ef4444); }
.match-value {
  width: 36px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-align: right;
}

/* Academic disclaimer */
.academic-disclaimer {
  text-align: center;
  padding: 6px 0 2px;
}
.academic-disclaimer .disclaimer-text {
  font-size: 11px;
  color: rgba(255,255,255,0.2);
}

/* Academic loading skeleton */
.academic-skeleton {
  flex-shrink: 0;
  margin: 0 14px 16px;
}

/* Academic quota exceeded upgrade card */
.academic-upgrade-card {
  flex-shrink: 0;
  margin: 0 14px 16px;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.08), rgba(6, 182, 212, 0.05));
  border: 1px solid rgba(8, 145, 178, 0.15);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.academic-upgrade-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #22d3ee;
  margin-bottom: 6px;
}
.academic-upgrade-desc {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 14px;
}
.academic-upgrade-btn {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 40px;
  font-size: 15px;
  font-weight: 600;
}

.chat-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  margin: 0 14px;
}

.section-title {
  font-size: 17px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 12px 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-icon {
  font-size: 14px;
  color: #fbbf24;
  opacity: 0.7;
}

.quota-badge {
  font-size: 11px;
  font-weight: 400;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  padding: 2px 10px;
  border-radius: 10px;
  border: 1px solid rgba(251, 191, 36, 0.15);
}

.quota-badge.vip {
  color: #34d399;
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.15);
}

.chat-box {
  flex: 1;
  height: auto;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
}

.msg-row {
  margin-bottom: 14px;
  display: flex;
}

.msg-row.user {
  justify-content: flex-end;
}

.msg-bubble {
  max-width: 80%;
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.msg-row.user .msg-bubble {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.input-bar {
  display: flex;
  gap: 8px;
}

.chat-input {
  flex: 1;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
}

.send-btn {
  height: 42px;
  padding: 0 24px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
  border-radius: 10px;
  line-height: 42px;
  font-size: 14px;
  font-weight: 500;
}

.send-btn[disabled] {
  opacity: 0.4;
}

/* Share hint */
.share-hint {
  padding: 8px 0;
  text-align: center;
}
.share-hint-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

/* Upgrade prompt */
.upgrade-prompt {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(217, 119, 6, 0.06));
  border: 1px solid rgba(251, 191, 36, 0.12);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  margin-bottom: 12px;
}

.upgrade-text {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #fbbf24;
}

.upgrade-desc {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  margin: 8px 0 16px;
}

.upgrade-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.upgrade-btn {
  flex: 1;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.upgrade-btn.secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

/* US-6.6: Subscribe section */
.subscribe-section {
  margin-top: 10px;
}

.vip-badge-bar {
  background: rgba(52, 211, 153, 0.06);
  border: 1px solid rgba(52, 211, 153, 0.15);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.vip-badge-bar.pro {
  background: rgba(167, 139, 250, 0.06);
  border-color: rgba(167, 139, 250, 0.15);
}
.vip-badge-text {
  font-size: 13px;
  font-weight: 600;
  color: #34d399;
}
.vip-badge-bar.pro .vip-badge-text {
  color: #a78bfa;
}
.vip-badge-expiry {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}
.vip-poster-link {
  font-size: 12px;
  color: #fbbf24;
  margin-left: auto;
}

.subscribe-card {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(217, 119, 6, 0.05));
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.subscribe-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #fbbf24;
  margin-bottom: 6px;
}
.subscribe-desc {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 14px;
  line-height: 1.5;
}
.subscribe-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.subscribe-btn {
  width: 100%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 600;
}
.subscribe-btn:active {
  opacity: 0.85;
}
.subscribe-link {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}
</style>