<template>
  <div class="assistant-page" :class="pageThemeClass">
    <section class="assistant-hero">
      <div class="hero-main">
        <div class="hero-label">
          <span class="signal-dot"></span>
          RunForge AI Console
        </div>
        <h1>小妍助理</h1>
        <p>
          集中查看账号状态、次数余额，快速处理日常事务
        </p>
        <div class="hero-actions">
          <a-button type="primary" @click="openChat">
            <template #icon><icon-message /></template>
            开始对话
          </a-button>
        </div>
      </div>

      <div class="membership-card">
        <div class="membership-card__top">
          <span class="membership-chip">{{ isVip ? 'VIP ONLINE' : 'STANDARD' }}</span>
          <a-tag :color="isVip ? 'gold' : 'arcoblue'">{{ isVip ? '权益生效' : '普通用户' }}</a-tag>
        </div>
        <strong>{{ vipTitle }}</strong>
        <p>{{ vipDescription }}</p>
        <div class="membership-card__actions">
          <a-button v-if="isVip" type="primary" @click="openBindingModal">
            <template #icon><icon-scan /></template>
            {{ weixin?.bound ? '管理微信' : '绑定微信' }}
          </a-button>
          <a-button v-else type="primary" @click="$router.push('/store/goodsList')">
            <template #icon><icon-thunderbolt /></template>
            开通 VIP
          </a-button>
        </div>
      </div>
    </section>

    <section class="metric-grid">
      <article v-for="item in metrics" :key="item.label" class="metric-card">
        <div class="metric-card__icon" :class="`metric-card__icon--${item.tone}`">
          <component :is="item.icon" />
        </div>
        <div class="metric-card__body">
          <span>{{ item.label }}</span>
          <strong>{{ item.value }}</strong>
          <p>{{ item.hint }}</p>
        </div>
      </article>
    </section>

    <section class="content-grid">
      <article class="panel panel--wide">
        <div class="panel-head">
          <div>
            <h2>乐跑账号状态</h2>
            <p>{{ semesterLabel }} · 登录状态概览</p>
          </div>
          <a-button size="small" @click="$router.push('/lepao/accountList')">
            <template #icon><icon-arrow-right /></template>
            账号列表
          </a-button>
        </div>
        <div class="chart-shell">
          <Chart :options="accountChartOptions" height="220px" />
        </div>
      </article>

      <article class="panel quota-panel">
        <div class="panel-head">
          <div>
            <h2>聊天额度余量</h2>
            <p>今日可用额度</p>
          </div>
        </div>
        <div class="quota-list">
          <div v-for="item in quotaItems" :key="item.label" class="quota-item">
            <div class="quota-item__top">
              <span>{{ item.label }}</span>
              <strong>{{ item.text }}</strong>
            </div>
            <a-progress :percent="item.progress" :show-text="false" :color="item.color" />
            <p>{{ item.hint }}</p>
          </div>
        </div>
        <div class="quota-summary">
          <span>额度策略</span>
          <strong>{{ isVip ? 'VIP 专属额度' : '基础网页额度' }}</strong>
          <p>{{ quotaSummaryText }}</p>
        </div>
      </article>

      <article class="panel weixin-panel">
        <div class="panel-head">
          <div>
            <h2>微信接入</h2>
            <span class="vip-mini-badge">VIP</span>
            <p>{{ weixinStatusText }}</p>
          </div>
          <a-tag :color="weixinTagColor">{{ weixinTagText }}</a-tag>
        </div>
        <div class="weixin-status-card">
          <div class="weixin-status-card__icon"><icon-wechat /></div>
          <div>
            <strong>{{ weixinTitle }}</strong>
            <span>{{ weixinDescription }}</span>
          </div>
        </div>
        <div class="weixin-detail-grid">
          <div class="weixin-detail">
            <span>最近消息</span>
            <strong>{{ lastActiveText }}</strong>
          </div>
          <div class="weixin-detail">
            <span>登录保持</span>
            <strong>{{ keepAliveText }}</strong>
          </div>
        </div>
        <a-button class="weixin-action" type="primary" :disabled="!isVip" @click="openBindingModal">
          <template #icon><icon-scan /></template>
          {{ weixin?.bound ? '查看绑定' : '绑定微信' }}
        </a-button>
      </article>

      <article class="panel panel--wide">
        <div class="panel-head">
          <div>
            <h2>次数变动趋势</h2>
            <p>近 14 天乐跑次数变化</p>
          </div>
        </div>
        <div class="chart-shell">
          <Chart :options="ledgerChartOptions" height="220px" />
        </div>
      </article>

      <article class="panel panel--full ability-panel">
        <div class="panel-head">
          <div>
            <h2>快捷事项</h2>
            <p>选择常用场景，快速进入咨询</p>
          </div>
        </div>
        <div class="ability-grid">
          <button
            v-for="item in abilities"
            :key="item.title"
            type="button"
            class="ability-button"
            @click="openAbility(item)"
          >
            <span class="ability-button__icon"><component :is="item.icon" /></span>
            <span>
              <strong>{{ item.title }}</strong>
              <small>{{ item.desc }}</small>
            </span>
            <icon-arrow-right />
          </button>
        </div>
      </article>
    </section>

    <WeixinBindingModal ref="bindingModalRef" @updated="handleBindingUpdated" />
  </div>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import { eventBus } from '@/utils/eventBus'
import { getAIChatAssistantDashboard } from '@/api/aiChat'
import WeixinBindingModal from './WeixinBindingModal.vue'

const loading = ref(false)
const dashboard = ref(null)
const bindingModalRef = ref(null)
let timer = null

const user = computed(() => dashboard.value?.user || {})
const account = computed(() => dashboard.value?.account || {})
const quota = computed(() => dashboard.value?.quota || {})
const weixin = computed(() => dashboard.value?.weixin || null)
const ledgerTrend = computed(() => dashboard.value?.ledger_trend || [])
const isVip = computed(() => Boolean(user.value.vip || quota.value.vip))
const pageThemeClass = computed(() => (isVip.value ? 'assistant-page--vip' : 'assistant-page--standard'))

const theme = computed(() => isVip.value
  ? {
      primary: '#c58a2a',
      secondary: '#0f9f7a',
      chartText: '#667085',
      splitLine: '#eef2f6',
      soft: '#fff7e8',
      line: 'rgba(197, 138, 42, 0.22)',
      autoColor: '#c58a2a'
    }
  : {
      primary: '#2563eb',
      secondary: '#0ea5a8',
      chartText: '#667085',
      splitLine: '#eef2f6',
      soft: '#eef6ff',
      line: 'rgba(37, 99, 235, 0.22)',
      autoColor: '#0ea5a8'
    })

const formatDate = (time) => {
  if (!time) return ''
  return new Date(Number(time)).toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
}

const semesterLabel = computed(() => {
  const semester = dashboard.value?.semester || {}
  if (!semester.start || !semester.end) return '当前学期'
  return `${formatDate(semester.start)} - ${formatDate(semester.end)}`
})

const vipTitle = computed(() => {
  if (!isVip.value) return '基础服务'
  const expire = Number(user.value.vip_expire_time || quota.value.vip_expire_time || 0)
  return expire > 0 ? `VIP 至 ${formatDate(expire)}` : '永久 VIP'
})

const vipDescription = computed(() => {
  if (isVip.value) return '已启用微信助手、微信通知与专属对话额度'
  return '支持网页对话 - 开通 VIP 后可启用微信助手与专属额度'
})

const metrics = computed(() => [
  {
    label: '剩余乐跑次数',
    value: Number(user.value.lepao_count || 0),
    hint: '可用于乐跑任务',
    icon: 'icon-thunderbolt',
    tone: 'green'
  },
  {
    label: '总账号数',
    value: Number(account.value.total || 0),
    hint: '本学期更新',
    icon: 'icon-user-group',
    tone: 'blue'
  },
  {
    label: '需登录账号',
    value: Number(account.value.need_login || 0),
    hint: '建议尽快处理',
    icon: 'icon-exclamation-circle',
    tone: 'orange'
  },
  {
    label: '账号正常率',
    value: `${Number(account.value.normal_percent || 0)}%`,
    hint: `${Number(account.value.normal || 0)} 个正常`,
    icon: 'icon-check-circle',
    tone: 'purple'
  }
])

const toProgress = (percent) => Math.max(0, Math.min(1, Number(percent || 0) / 100))
const quotaItems = computed(() => {
  const build = (label, item, color) => {
    const configured = Boolean(item?.configured)
    const percent = Number(item?.percent || 0)
    return {
      label,
      text: configured ? `${percent}%` : '未配置',
      progress: toProgress(percent),
      color
    }
  }
  return [
    build('网页对话', quota.value.web, theme.value.primary),
    build('微信对话', quota.value.wechat, theme.value.secondary)
  ]
})
const quotaSummaryText = computed(() => {
  if (isVip.value) return '网页与微信额度独立统计，VIP可享受更多额度'
  return '当前可使用网页对话额度，开通 VIP 后可启用微信专属额度'
})

const weixinTagText = computed(() => ({ 0: '待扫码', 1: '已绑定', 2: '已解绑', 3: '已过期' }[weixin.value?.state] || '未绑定'))
const weixinTagColor = computed(() => ({ 0: 'orange', 1: 'green', 2: 'gray', 3: 'red' }[weixin.value?.state] || 'gray'))
const weixinStatusText = computed(() => {
  if (!isVip.value) return '绑定微信仅限 VIP 用户'
  if (weixin.value?.bound) return '微信助手已连接'
  if (weixin.value?.state === 0) return '等待扫码确认'
  if (weixin.value?.state === 3) return '登录已过期，请重新扫码'
  return '扫码后即可在微信中使用'
})
const weixinTitle = computed(() => {
  if (!isVip.value) return 'VIP 专属接入'
  if (weixin.value?.bound) return '微信通道运行中'
  return '绑定微信账号'
})
const weixinDescription = computed(() => {
  if (!isVip.value) return '开通 VIP 后可使用微信对话与乐跑通知。'
  if (weixin.value?.bound) return '可在微信中随时随地处理事务'
  return '在弹窗中扫码完成授权。'
})
const keepAliveText = computed(() => (weixin.value?.bound ? '24 小时内消息' : '绑定后生效'))
const lastActiveText = computed(() => {
  const time = Number(weixin.value?.last_user_message_time || 0)
  if (!time) return '暂无记录'
  return new Date(time).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false })
})

const accountChartOptions = computed(() => ({
  color: ['#10b981', '#f59e0b'],
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  grid: { left: 18, right: 12, top: 26, bottom: 18, containLabel: true },
  xAxis: {
    type: 'category',
    data: ['正常', '需登录'],
    axisTick: { show: false },
    axisLine: { lineStyle: { color: theme.value.splitLine } },
    axisLabel: { color: theme.value.chartText }
  },
  yAxis: {
    type: 'value',
    minInterval: 1,
    splitLine: { lineStyle: { color: theme.value.splitLine } },
    axisLabel: { color: theme.value.chartText }
  },
  series: [{
    type: 'bar',
    barWidth: 42,
    data: [
      { value: Number(account.value.normal || 0), itemStyle: { color: '#10b981' } },
      { value: Number(account.value.need_login || 0), itemStyle: { color: '#f59e0b' } }
    ],
    itemStyle: { borderRadius: [8, 8, 0, 0] }
  }]
}))

const ledgerChartOptions = computed(() => ({
  color: [theme.value.primary, theme.value.secondary],
  tooltip: { trigger: 'axis' },
  legend: { top: 0, right: 0, itemWidth: 10, itemHeight: 10, textStyle: { color: theme.value.chartText } },
  grid: { left: 18, right: 12, top: 34, bottom: 18, containLabel: true },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ledgerTrend.value.map(item => item.date),
    axisTick: { show: false },
    axisLine: { lineStyle: { color: theme.value.splitLine } },
    axisLabel: { color: theme.value.chartText }
  },
  yAxis: {
    type: 'value',
    minInterval: 1,
    splitLine: { lineStyle: { color: theme.value.splitLine } },
    axisLabel: { color: theme.value.chartText }
  },
  series: [
    {
      name: '增加',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 6,
      data: ledgerTrend.value.map(item => Number(item.income || 0)),
      areaStyle: { opacity: 0.08 }
    },
    {
      name: '消耗',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 6,
      data: ledgerTrend.value.map(item => Number(item.expense || 0)),
      areaStyle: { opacity: 0.06 }
    }
  ]
}))

const abilities = [
  {
    title: '查询乐跑账号',
    desc: '账号状态、跑区、自动乐跑',
    icon: 'icon-user',
    prompt: '帮我查询当前绑定的乐跑账号，重点看哪些账号需要重新登录。'
  },
  {
    title: '修改乐跑配置',
    desc: '修改跑区、自动乐跑等信息',
    icon: 'icon-edit',
    prompt: '我想修改乐跑账号的配置信息。'
  },
  {
    title: '查询次数明细',
    desc: '次数余额与变动记录',
    icon: 'icon-bar-chart',
    prompt: '帮我查询最近的乐跑次数变动明细。'
  },
  {
    title: '查看订单状态',
    desc: '订单进度与售后状态',
    icon: 'icon-idcard',
    prompt: '帮我查询我的订单列表和当前状态。'
  },
  {
    title: '提交工单',
    desc: '提交问题与处理诉求',
    icon: 'icon-message',
    prompt: '我需要提交一个工单，问题描述是：。'
  },
  {
    title: '电费查询',
    desc: '账单查询与任务设置',
    icon: 'icon-dashboard',
    prompt: '帮我查询电费账单，寝室为：。'
  },
  {
    title: '趣选书书单',
    desc: '查询可选书单',
    icon: 'icon-book',
    prompt: '帮我查询趣选书书单，账号密码为：。'
  },
  {
    title: '商品与权益',
    desc: '商品列表与会员权益',
    icon: 'icon-thunderbolt',
    prompt: '帮我查询当前商品列表。'
  }
]

const openChat = () => eventBus.emit('openAI')
const openAbility = (item) => {
  eventBus.emit('openAI', { newConversation: true, draft: item.prompt })
}
const openBindingModal = () => bindingModalRef.value?.open(weixin.value)
const handleBindingUpdated = (binding) => {
  if (!dashboard.value) return
  dashboard.value.weixin = binding ? {
    state: Number(binding.state),
    bound: Number(binding.state) === 1,
    last_user_message_time: Number(binding.last_user_message_time || 0),
    bind_time: Number(binding.bind_time || 0),
    last_error: binding.last_error || ''
  } : null
}

const refreshDashboard = async () => {
  loading.value = true
  try {
    const res = await getAIChatAssistantDashboard()
    if (!res || res.code !== 0) return Message.warning(res?.msg || '获取助手数据失败')
    dashboard.value = res.data || {}
  } finally {
    loading.value = false
  }
}

onMounted(async () => {
  await refreshDashboard()
  timer = setInterval(refreshDashboard, 12000)
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>

<style scoped lang="less">
.assistant-page {
  --assistant-primary: #2563eb;
  --assistant-secondary: #0ea5a8;
  --assistant-accent: #7c3aed;
  --assistant-soft: #eef6ff;
  --assistant-text: #111827;
  --assistant-muted: #667085;
  --assistant-border: rgba(17, 24, 39, 0.08);
  --assistant-surface: rgba(255, 255, 255, 0.88);
  --assistant-surface-strong: rgba(255, 255, 255, 0.96);
  --assistant-card-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
  min-height: 100%;
  padding: 22px;
  color: var(--assistant-text);
  background:
    linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f7fbff 0%, #ffffff 46%, #f4fbf9 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

.assistant-page--vip {
  --assistant-primary: #c58a2a;
  --assistant-secondary: #0f9f7a;
  --assistant-accent: #7857d8;
  --assistant-soft: #fff7e8;
  --assistant-text: #111827;
  --assistant-muted: #667085;
  --assistant-border: rgba(17, 24, 39, 0.08);
  --assistant-surface: rgba(255, 255, 255, 0.9);
  --assistant-surface-strong: rgba(255, 255, 255, 0.96);
  --assistant-card-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
  background:
    linear-gradient(rgba(197, 138, 42, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 159, 122, 0.07) 1px, transparent 1px),
    linear-gradient(135deg, #fffaf1 0%, #ffffff 48%, #f2fbf7 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

.assistant-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: stretch;
}

.hero-main,
.membership-card,
.metric-card,
.panel {
  border: 1px solid var(--assistant-border);
  border-radius: 8px;
  background: var(--assistant-surface);
  box-shadow: var(--assistant-card-shadow);
  backdrop-filter: blur(14px);
}

.hero-main {
  padding: 24px 26px;
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--assistant-primary);
  font-size: 12px;
  font-weight: 800;
}

.signal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--assistant-secondary);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--assistant-secondary) 14%, transparent);
}

.hero-main h1 {
  margin: 10px 0 8px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0;
}

.hero-main p {
  max-width: 720px;
  margin: 0;
  color: var(--assistant-muted);
  font-size: 14px;
  line-height: 1.8;
}

.hero-actions,
.membership-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.membership-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--assistant-primary) 10%, white), var(--assistant-surface-strong));
}

.assistant-page--vip .membership-card {
  border-color: rgba(197, 138, 42, 0.2);
  background:
    linear-gradient(135deg, rgba(255, 247, 232, 0.98), rgba(255, 255, 255, 0.96) 46%, rgba(241, 251, 247, 0.96));
  box-shadow: 0 16px 40px rgba(197, 138, 42, 0.08);
}

.membership-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.membership-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--assistant-primary) 28%, transparent);
  border-radius: 999px;
  color: var(--assistant-primary);
  background: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  font-weight: 800;
}

.assistant-page--vip .membership-chip,
.assistant-page--vip .vip-mini-badge {
  border-color: rgba(197, 138, 42, 0.28);
  color: #8a4b10;
  background: linear-gradient(135deg, #fff7dc, #f6d58a);
  box-shadow: 0 10px 24px rgba(197, 138, 42, 0.1);
}

.membership-card strong {
  display: block;
  margin-top: 20px;
  font-size: 22px;
}

.membership-card p {
  margin: 8px 0 0;
  color: var(--assistant-muted);
  line-height: 1.7;
}

.assistant-page--vip .membership-card strong {
  color: #101828;
}

.assistant-page--vip .membership-card p {
  color: #667085;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.metric-card {
  display: flex;
  gap: 13px;
  align-items: center;
  min-width: 0;
  padding: 15px 17px;
}

.metric-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 8px;
  font-size: 22px;
}

.metric-card__icon--green { color: #039855; background: #ecfdf3; }
.metric-card__icon--blue { color: #2563eb; background: #eff6ff; }
.metric-card__icon--orange { color: #d97706; background: #fff7ed; }
.metric-card__icon--purple { color: #7c3aed; background: #f5f3ff; }

.metric-card__body {
  min-width: 0;
}

.metric-card span {
  display: block;
  color: var(--assistant-muted);
  font-size: 12px;
}

.metric-card strong {
  display: block;
  margin-top: 4px;
  font-size: 27px;
  line-height: 1.1;
}

.metric-card p {
  margin: 5px 0 0;
  color: #98a2b3;
  font-size: 12px;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  margin-top: 12px;
}

.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px;
}

.panel--wide {
  grid-column: span 2;
}

.panel--full {
  grid-column: 1 / -1;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.panel-head > div {
  min-width: 0;
}

.panel-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 17px;
  letter-spacing: 0;
}

.vip-mini-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  min-width: 34px;
  margin-left: 8px;
  padding: 0 7px;
  border: 1px solid rgba(213, 168, 78, 0.36);
  border-radius: 999px;
  color: #7a4a0c;
  background: linear-gradient(135deg, #fff7dc, #f3c96b);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  vertical-align: 2px;
}

.panel-head p {
  margin: 5px 0 0;
  color: var(--assistant-muted);
  font-size: 12px;
  line-height: 1.5;
}

.chart-shell {
  flex: 1;
  min-height: 220px;
}

.quota-panel {
  gap: 0;
}

.quota-list {
  display: grid;
  gap: 18px;
  padding-top: 5px;
}

.quota-item__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.quota-item__top span {
  color: #475467;
}

.quota-item__top strong {
  color: var(--assistant-primary);
  font-size: 18px;
}

.quota-item p {
  margin: 7px 0 0;
  color: #98a2b3;
  font-size: 12px;
}

.quota-summary {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--assistant-primary) 14%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--assistant-primary) 7%, white), rgba(255, 255, 255, 0.82));
}

.quota-summary span {
  color: var(--assistant-muted);
  font-size: 12px;
}

.quota-summary strong {
  color: var(--assistant-text);
  font-size: 15px;
}

.quota-summary p {
  margin: 0;
  color: var(--assistant-muted);
  font-size: 12px;
  line-height: 1.6;
}

.weixin-panel {
  justify-content: flex-start;
}

.weixin-status-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--assistant-secondary) 18%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--assistant-secondary) 8%, white);
}

.weixin-status-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #18b566, #0f9f7a);
  font-size: 24px;
}

.weixin-status-card strong {
  display: block;
  font-size: 15px;
}

.weixin-status-card span {
  display: block;
  margin-top: 5px;
  color: var(--assistant-muted);
  line-height: 1.6;
}

.weixin-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.weixin-detail {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.weixin-detail span {
  color: var(--assistant-muted);
  font-size: 12px;
}

.weixin-detail strong {
  overflow: hidden;
  color: var(--assistant-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weixin-action {
  width: 100%;
  margin-top: 18px;
}

.ability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ability-button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  gap: 11px;
  align-items: center;
  width: 100%;
  min-height: 78px;
  padding: 13px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.ability-button:hover {
  border-color: color-mix(in srgb, var(--assistant-primary) 38%, transparent);
  background: #fff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.ability-button__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--assistant-primary), var(--assistant-secondary));
  font-size: 20px;
}

.ability-button strong,
.ability-button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ability-button strong {
  font-size: 14px;
}

.ability-button small {
  margin-top: 4px;
  color: var(--assistant-muted);
  font-size: 12px;
}

.assistant-page :deep(.arco-btn-primary) {
  border-color: transparent;
  background: linear-gradient(135deg, var(--assistant-primary), var(--assistant-secondary));
}


@media (max-width: 1180px) {
  .assistant-hero,
  .content-grid {
    grid-template-columns: 1fr;
  }

  .panel--wide,
  .panel--full {
    grid-column: auto;
  }

  .metric-grid,
  .ability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .assistant-page {
    padding: 12px;
  }

  .hero-main,
  .membership-card,
  .metric-card,
  .panel {
    padding: 15px;
  }

  .hero-main h1 {
    font-size: 25px;
  }

  .hero-main p {
    font-size: 13px;
  }

  .hero-actions .arco-btn,
  .membership-card__actions .arco-btn {
    flex: 1 1 100%;
  }

  .metric-grid,
  .ability-grid {
    grid-template-columns: 1fr;
  }

  .metric-card strong {
    font-size: 24px;
  }

    .weixin-detail-grid {
      grid-template-columns: 1fr;
    }

  .ability-button {
    min-height: 72px;
  }
}
</style>
