num/client/pages/chart/index.vue

<template>
  <view class="page-chart">
    <!-- Top operation bar -->
    <view class="top-bar">
      <view class="spacer"></view>
      <view v-if="userStore.isVip" class="export-btn" @click="exportPdf">
        导出PDF
      </view>
    </view>

    <!-- 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-2.1: Share bar -->
     <view class="share-bar">
       <button class="share-btn" :disabled="shareGenerating" @click="onShareTap">
         {{ shareGenerating ? '生成中...' : '📸 分享命盘' }}
       </button>
       <text v-if="!userStore.isVipActive" class="share-quota">
         今日剩余 {{ shareRemaining }} 次
       </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">
          <!-- System messages: centered italic text, no bubble -->
          <view v-if="msg.senderType === 'system'" class="msg-system" @longpress.stop="onLongPressMsg(msg)">
            <text>{{ msg.content }}</text>
          </view>
          <!-- Practitioner messages: green bubble with label -->
          <view v-else-if="msg.senderType === 'practitioner'" class="msg-row practitioner" @longpress.stop="onLongPressMsg(msg)">
            <view class="msg-practitioner-label">👤 能量师</view>
            <view class="msg-bubble msg-practitioner-bubble">
              <text>{{ msg.content }}</text>
            </view>
          </view>
          <!-- Default (AI/User): existing rendering -->
          <view v-else class="msg-row" :class="msg.role">
            <view class="msg-bubble">
              <text>{{ msg.content }}</text>
            </view>
          </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>

     <!-- US-9.4: Proposal card for negotiating state -->
     <view v-if="planRequest && planRequest.status === 'negotiating'" class="proposal-section">
       <view class="proposal-title">📋 人工方案</view>
       <view class="proposal-card">
         <view class="proposal-price">¥{{ planRequest.price }}</view>

         <view v-if="proposalMessage" class="proposal-message">
           <text class="proposal-msg-label">能量师留言:</text>
           <text class="proposal-msg-content">{{ proposalMessage }}</text>
         </view>

         <view v-if="logs.length > 0" class="negotiation-history">
           <view class="history-title">协商历史</view>
           <view class="history-timeline">
             <view v-for="(log, idx) in logs" :key="log.id" class="history-item" :class="log.action">
               <view class="timeline-dot" :class="log.action"></view>
               <view class="timeline-line" v-if="idx < logs.length - 1"></view>
               <view class="timeline-content">
                 <text v-if="log.action === 'proposal'">能量师提交方案: ¥{{ log.newPrice }}</text>
                 <text v-else-if="log.action === 'counter' && log.operatorId === currentUserId">您还价: ¥{{ log.newPrice }}</text>
                 <text v-else-if="log.action === 'counter'">能量师还价: ¥{{ log.newPrice }}</text>
                 <text v-else-if="log.action === 'accept'">✓ 已接受方案</text>
                 <text v-else>{{ log.action }}</text>
               </view>
             </view>
           </view>
         </view>

         <view class="proposal-actions">
           <button class="proposal-btn btn-accept" :disabled="acceptingOffer" @click="acceptOffer">接受方案</button>
           <button class="proposal-btn btn-counter" @click="showCounterInput = !showCounterInput">还价</button>
           <button class="proposal-btn btn-reject" :disabled="rejecting" @click="rejectOffer">拒绝</button>
         </view>

         <view v-if="showCounterInput" class="counter-input-wrap">
           <view class="counter-input-row">
             <input class="counter-input" v-model="counterPrice" type="number" placeholder="输入您的报价..." />
             <button class="counter-submit" :disabled="countering || !counterPrice" @click="submitCounter">提交还价</button>
           </view>
           <text class="counter-hint">双方最多协商5轮</text>
         </view>
       </view>
     </view>

<!-- US-9.5: Pending payment — show pay button -->
      <view v-if="planRequest && planRequest.status === 'pending_payment' && planOrder" class="proposal-section">
        <view class="proposal-title">📋 方案已确认</view>
        <view class="proposal-card pending-payment-card">
          <view class="proposal-price">¥{{ planRequest.price }}</view>
          <text class="payment-hint">请在24小时内完成支付</text>
          <button class="payment-btn" @click="goPay">去支付 ¥{{ planRequest.price }}</button>
        </view>
      </view>

      <!-- US-9.5: Paid — show delivery -->
      <view v-else-if="planRequest && planRequest.status === 'paid'" class="proposal-section">
        <view class="proposal-card paid-card">
          <view v-if="deliveryData && deliveryData.length > 0" class="delivery-content">
            <view class="delivery-title">📋 方案交付</view>
            <view v-for="d in deliveryData" :key="d.id" class="delivery-item">
              <view class="delivery-header">
                <text class="delivery-type">{{ d.deliveryType === 'text' ? '文字方案' : d.deliveryType === 'file' ? '文件方案' : '综合方案' }}</text>
                <text class="delivery-time">{{ d.createdAt?.slice(0, 10) }}</text>
              </view>
              <text v-if="d.textContent" class="delivery-text">{{ d.textContent }}</text>
            </view>
          </view>
          <view v-else class="paid-waiting">
            <text class="paid-waiting-text">方案已确认，等待能量师交付...</text>
          </view>
        </view>
      </view>

      <!-- EPIC 9: Apply for practitioner plan -->
     <view class="plan-apply-bar">
       <button class="plan-apply-btn" @click="goPlanApply">
         💼 申请人工深度方案
       </button>
     </view>
   </view>

   <!-- Share canvas (hidden off-screen) -->
   <ChartShareCanvas
     ref="shareCanvas"
     :chart="store.currentChart || {}"
     :name="store.currentName"
     :birthday="store.currentBirthYear && store.currentBirthMonth && store.currentBirthDay ?
       `${store.currentBirthYear}-${String(store.currentBirthMonth).padStart(2,'0')}-${String(store.currentBirthDay).padStart(2,'0')}` : ''"
     @ready="onCanvasReady"
   />
 </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, onUnmounted } from 'vue'
import { useChartStore } from '@/stores/chart'
import { useUserStore } from '@/stores/user'
import TriangleChart from '@/components/TriangleChart.vue'
import ChartShareCanvas from '@/components/ChartShareCanvas.vue'
import { chartApi, chatApi, consultationApi, profileApi, annotationApi, exportApi, interventionApi, planApi, proposalApi, deliveryApi, payApi } 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 usedAcademic = ref(0)
const maxAcademic = ref(0)

// US-9.3: Intervention state
const hasActiveIntervention = ref(false)
const activeInterventionId = ref(null)

// US-9.4: Plan proposal state
const planRequest = ref(null)
const logs = ref([])
const counterPrice = ref(null)
const showCounterInput = ref(false)
const acceptingOffer = ref(false)
const countering = ref(false)
const rejecting = ref(false)

// US-9.5: Payment and delivery state
const planOrder = ref(null)
const deliveryData = ref([])

// Share canvas ref
const shareCanvas = ref(null)
const shareGenerating = ref(false)

// 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({})
// US-2.1: Share state (shareGenerating declared above with shareCanvas)

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

const shareRemaining = computed(() => {
  if (userStore.isVipActive) return -1
  const limit = userStore.shareLimit || 1
  const count = userStore.shareCount || 0
  return limit > 0 ? Math.max(0, limit - count) : 0
})

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

// US-9.4: Computed proposal message from logs
const proposalMessage = computed(() => {
  const proposalLog = logs.value.find(l => l.action === 'proposal')
  return proposalLog?.message || ''
})

// US-9.4: Current user ID for comparison in negotiation history
const currentUserId = computed(() => userStore.user?.id || userStore.userId || '')

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
      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()
    }

    // US-9.4: Load plan request for this chart
    loadPlanRequest()

    // 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,
        senderType: m.senderType || null,
        interventionId: m.interventionId || null
      }))
    } 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,
          senderType: m.senderType || null,
          interventionId: m.interventionId || null
        }))
        const userMsgCount = history.filter(m => m.role === 'user').length
        usedChats.value = Math.max(usedChats.value, userMsgCount)
      } catch (e) {
        // fallback to generic greeting
      }
    }

    // US-9.3: Check intervention status from loaded messages
    checkInterventionStatus(messages.value)

    // 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-9.3: Check if intervention is active from message history
function checkInterventionStatus(messages) {
  let active = false
  let lastId = null
  for (const msg of messages) {
    if (msg.senderType === 'system') {
      if (msg.content && msg.content.includes('能量师') && msg.content.includes('进入')) {
        active = true
        lastId = msg.interventionId
      }
      if (msg.content && (msg.content.includes('退出') || msg.content.includes('结束'))) {
        active = false
      }
    }
  }
  hasActiveIntervention.value = active
  activeInterventionId.value = lastId
}

// US-9.3: Long-press handler for practitioner / entry system messages
function onLongPressMsg(msg) {
  // Only show action if intervention is active
  if (!hasActiveIntervention.value) return
  // Only on practitioner messages or entry system messages
  if (msg.senderType === 'practitioner' || (msg.senderType === 'system' && msg.content && msg.content.includes('能量师'))) {
    uni.showActionSheet({
      itemList: ['结束能量师介入'],
      success: async (res) => {
        if (res.tapIndex === 0) {
          await endIntervention()
        }
      }
    })
  }
}

// US-9.3: End intervention by user's request
async function endIntervention() {
  uni.showLoading({ title: '处理中...' })
  try {
    await interventionApi.endByUser(activeInterventionId.value)
    uni.hideLoading()
    uni.showToast({ title: '已结束能量师介入', icon: 'success' })
    hasActiveIntervention.value = false
    activeInterventionId.value = null
  } catch (e) {
    uni.hideLoading()
    uni.showToast({ title: e.message || '操作失败', icon: 'none' })
  }
}

// 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 */ }
    }
  })
}

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' })
}

// EPIC 9: Navigate to plan apply page
function goPlanApply() {
  if (!userStore.isLoggedIn) {
    uni.navigateTo({ url: '/pages/login/index' })
    return
  }
  if (!store.currentRecordId) {
    uni.showToast({ title: '暂无命盘数据', icon: 'none' })
    return
  }
  uni.navigateTo({ url: `/pages/plan/apply?chartRecordId=${store.currentRecordId}` })
}

// US-2.1: Share chart image
async function onShareTap() {
  if (shareGenerating.value) return

  // Check quota for non-VIP
  if (!userStore.isVipActive && shareRemaining.value <= 0) {
    uni.showToast({ title: '今日分享次数已用完', icon: 'none' })
    return
  }

  // Show action sheet
  uni.showActionSheet({
    itemList: ['保存到相册', '分享给微信好友', '分享到朋友圈'],
    success: async (res) => {
      await performShare(res.tapIndex)
    },
    fail: (err) => {
      if (err.errMsg && err.errMsg.includes('cancel')) return
      uni.showToast({ title: '操作取消', icon: 'none' })
    }
  })
}

async function performShare(actionIndex) {
  shareGenerating.value = true
  try {
    // Consume quota if not VIP
    if (!userStore.isVipActive) {
      try {
        await profileApi.trackShare()
        // Optimistically update local store
        userStore.shareCount++
      } catch (e) {
        uni.showToast({ title: '分享次数不足', icon: 'none' })
        shareGenerating.value = false
        return
      }
    }

    // Generate image via canvas
    if (!shareCanvas.value) throw new Error('Canvas未就绪')
    const filePath = await shareCanvas.value.generate()

    if (actionIndex === 0) {
      // Save to album
      await uni.saveImageToPhotosAlbum({ filePath })
      uni.showToast({ title: '已保存到相册', icon: 'success' })
    } else {
      // Share via WeChat
      const scene = actionIndex === 1 ? 'WXSceneSession' : 'WXSceneTimeline'
      const title = store.currentChart?.O
        ? `我的命盘主性格数字是${store.currentChart.O}，快来测测你的！`
        : '数字能量命盘分析'
      await uni.share({
        provider: 'weixin',
        scene,
        type: 'image',
        imageUrl: filePath,
        title
      })
    }
  } catch (e) {
    uni.showToast({ title: e.message || '分享失败', icon: 'none' })
  } finally {
    shareGenerating.value = false
  }
}

// US-2.2: Export PDF (paid users only)
async function exportPdf() {
  if (!store.currentRecordId) {
    uni.showToast({ title: '暂无命盘记录', icon: 'none' })
    return
  }
  uni.showLoading({ title: '生成中...' })
  try {
    const filePath = await exportApi.pdf(store.currentRecordId)
    uni.hideLoading()
    // Open PDF document
    uni.openDocument({
      filePath,
      success: () => {
        uni.showToast({ title: 'PDF 已生成', icon: 'success' })
      },
      fail: () => {
        uni.showToast({ title: '打开文件失败', icon: 'none' })
      }
    })
  } catch (e) {
    uni.hideLoading()
    uni.showToast({ title: e.message || '导出失败', icon: 'none' })
  }
  }

  // === 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' })
  }
}

// US-9.4: Load plan request for current chart
async function loadPlanRequest() {
  if (!store.currentRecordId) return
  try {
    const requests = await planApi.myRequests()
    const match = requests.find(r => r.chartRecordId === store.currentRecordId && (r.status === 'negotiating' || r.status === 'pending_payment' || r.status === 'paid'))
    if (match) {
      planRequest.value = match
      const logList = await proposalApi.logs(match.id)
      logs.value = logList || []
      // US-9.5: Load delivery data when status is paid
      if (match.status === 'paid') {
        try {
          const deliveries = await deliveryApi.list(match.id)
          deliveryData.value = deliveries || []
        } catch (e) { /* best-effort */ }
      }
    }
  } catch (e) {
    // No plan request found — that's fine
  }
}

// US-9.4: Accept offer
async function acceptOffer() {
  uni.showModal({
    title: '接受方案',
    content: `确定以 ¥${planRequest.value.price} 接受此方案吗？`,
    success: async (res) => {
      if (!res.confirm) return
      acceptingOffer.value = true
      try {
        const result = await proposalApi.accept({ requestId: planRequest.value.id })
        planRequest.value = result.planRequest
        planOrder.value = result.order
        const logList = await proposalApi.logs(planRequest.value.id)
        logs.value = logList || []
        uni.showToast({ title: '已接受方案，请完成支付', icon: 'success' })
      } catch (e) {
        uni.showToast({ title: e.message || '操作失败', icon: 'none' })
      } finally {
        acceptingOffer.value = false
      }
    }
  })
}

// US-9.5: Navigate to payment page
function goPay() {
  if (!planOrder.value || !planRequest.value) return
  uni.navigateTo({
    url: `/pages/payment/index?product=practitioner_plan&totalFee=${planRequest.value.price}&outTradeNo=${planOrder.value.outTradeNo}`
  })
}

// US-9.4: Reject offer
async function rejectOffer() {
  uni.showModal({
    title: '拒绝方案',
    content: '确定拒绝此方案吗？',
    success: async (res) => {
      if (!res.confirm) return
      rejecting.value = true
      try {
        await proposalApi.reject({ requestId: planRequest.value.id })
        planRequest.value.status = 'rejected'
        uni.showToast({ title: '已拒绝', icon: 'success' })
      } catch (e) {
        uni.showToast({ title: e.message || '操作失败', icon: 'none' })
      } finally {
        rejecting.value = false
      }
    }
  })
}

// US-9.4: Submit counter-offer
async function submitCounter() {
  const price = Number(counterPrice.value)
  if (!price || price <= 0) {
    uni.showToast({ title: '请输入有效价格', icon: 'none' })
    return
  }
  countering.value = true
  try {
    await proposalApi.counter({ requestId: planRequest.value.id, newPrice: price })
    const logList = await proposalApi.logs(planRequest.value.id)
    logs.value = logList || []
    showCounterInput.value = false
    counterPrice.value = null
    uni.showToast({ title: '已提交还价', icon: 'success' })
  } catch (e) {
    uni.showToast({ title: e.message || '还价失败', icon: 'none' })
  } finally {
    countering.value = false
  }
}
</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%);
}

/* Top operation bar */
.top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0,0,0,0.15);
}
.spacer {
  flex: 1;
}
.export-btn {
  font-size: 13px;
  color: #fbbf24;
  padding: 6px 12px;
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: 8px;
}

.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;
}

/* US-9.3: Practitioner message bubble */
.msg-row.practitioner {
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
}
.msg-practitioner-label {
  font-size: 12px;
  color: #10b981;
  margin-bottom: 4px;
  font-weight: 500;
}
.msg-practitioner-bubble {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: rgba(255, 255, 255, 0.85);
}

/* US-9.3: System message — centered italic text */
.msg-system {
  text-align: center;
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  font-size: 12px;
  line-height: 1.6;
}

.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);
}

/* US-9.4: Proposal section */
.proposal-section {
  flex-shrink: 0;
  margin: 0 14px 10px;
}
.proposal-title {
  font-size: 16px;
  font-weight: 700;
  color: #a78bfa;
  margin-bottom: 10px;
  padding-left: 2px;
}
.proposal-card {
  background: rgba(124,58,237,0.06);
  border: 1px solid rgba(124,58,237,0.12);
  border-radius: 14px;
  padding: 16px;
}
.proposal-price {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 12px;
}
.proposal-message {
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.proposal-msg-label {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 4px;
}
.proposal-msg-content {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}
.negotiation-history {
  margin-bottom: 14px;
}
.history-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  margin-bottom: 10px;
}
.history-timeline {
  padding-left: 6px;
}
.history-item {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding-bottom: 6px;
}
.timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
  margin-top: 4px;
  margin-right: 10px;
}
.timeline-dot.accept {
  background: #10b981;
}
.timeline-line {
  position: absolute;
  left: 3px;
  top: 12px;
  width: 2px;
  height: calc(100% - 6px);
  background: rgba(255,255,255,0.08);
}
.timeline-content {
  flex: 1;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}
.proposal-actions {
  display: flex;
  gap: 10px;
}
.proposal-btn {
  flex: 1;
  height: 40px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
}
.proposal-btn.btn-accept {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
}
.proposal-btn.btn-accept[disabled] {
  opacity: 0.5;
}
.proposal-btn.btn-counter {
  background: transparent;
  border: 1px solid #3b82f6;
  color: #3b82f6;
}
.proposal-btn.btn-reject {
  background: transparent;
  border: 1px solid #ef4444;
  color: #ef4444;
}
.proposal-btn.btn-reject[disabled] {
  opacity: 0.5;
}
.counter-input-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.counter-input-row {
  display: flex;
  gap: 8px;
}
.counter-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);
}
.counter-submit {
  height: 42px;
  padding: 0 20px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border: none;
  border-radius: 10px;
  line-height: 42px;
  font-size: 14px;
  font-weight: 500;
}
.counter-submit[disabled] {
  opacity: 0.4;
}
.counter-hint {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  margin-top: 6px;
  text-align: center;
}
.proposal-card.paid-card {
  text-align: center;
  padding: 16px;
}
.paid-text {
  font-size: 14px;
  color: #10b981;
  font-weight: 600;
}

/* EPIC 9: Plan apply button bar */
.plan-apply-bar {
  flex-shrink: 0;
  margin: 10px 14px calc(env(safe-area-inset-bottom) + 16px);
}
.plan-apply-btn {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 14px;
  line-height: 48px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
}
.plan-apply-btn:active {
  opacity: 0.85;
}

/* US-9.5: Pending payment card */
.pending-payment-card {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(124, 58, 237, 0.05));
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}
.pending-payment-card .proposal-price {
  font-size: 28px;
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 8px;
}
.payment-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  display: block;
  margin-bottom: 14px;
}
.payment-btn {
  width: 100%;
  height: 46px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  border-radius: 12px;
  line-height: 46px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

/* US-9.5: Delivery content display */
.delivery-content {
  padding: 0;
}
.delivery-title {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
}
.delivery-item {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}
.delivery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.delivery-type {
  font-size: 13px;
  font-weight: 600;
  color: #10b981;
}
.delivery-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}
.delivery-text {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* US-9.5: Paid waiting state */
.paid-waiting {
  text-align: center;
  padding: 10px 0;
}
.paid-waiting-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
}

</style>