/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

/* ============================================
 * 设计 Token 全局变量（基于 design-tokens.json）
 * ============================================ */
page {
  /* 颜色 */
  --color-primary: #0052d9;
  --color-primary-light: #ecf2fe;
  --color-success: #00a870;
  --color-warning: #ed7b2f;
  --color-error: #e34d59;
  --color-gray-1: #f3f3f3;
  --color-gray-2: #eeeeee;
  --color-gray-3: #e7e7e7;
  --color-gray-4: #dcdcdc;
  --color-gray-5: #c5c5c5;
  --color-gray-6: #a6a6a6;
  --color-gray-7: #8b8b8b;
  --color-gray-8: #777777;
  --color-gray-9: #5e5e5e;
  --color-gray-10: #4b4b4b;
  --color-gray-11: #393939;
  --color-gray-12: #2c2c2c;
  --color-gray-13: #242424;

  /* 字号 */
  --font-xs: 24rpx;
  --font-sm: 28rpx;
  --font-base: 32rpx;
  --font-lg: 36rpx;
  --font-xl: 40rpx;
  --font-2xl: 48rpx;

  /* 圆角 */
  --radius-sm: 8rpx;
  --radius-md: 16rpx;
  --radius-lg: 24rpx;
  --radius-xl: 32rpx;

  /* 阴影 */
  --shadow-lg: 0 8rpx 32rpx rgba(0,0,0,0.06);
  --shadow-xl: 0 16rpx 48rpx rgba(0,0,0,0.08);

  /* 间距基准 */
  --spacing-base: 8rpx;

  /* TDesign 主题覆盖 */
  --td-brand-color: #0052d9;
  --td-brand-color-light: #ecf2fe;
  --td-success-color: #00a870;
  --td-warning-color: #ed7b2f;
  --td-error-color: #e34d59;

  /* 页面默认样式 */
  background-color: var(--color-gray-1);
  font-size: var(--font-base);
  color: var(--color-gray-13);
  /* Emoji 字体回退链：确保真机（Android/iOS）能正确渲染 Emoji
   * 不设置此项时，部分 Android 机型渲染引擎会断开 Emoji 字体回退，导致显示方块或空白
   * PingFang SC / Helvetica 负责汉字和拉丁字符，后两项负责 Emoji */
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", Helvetica,
               "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

/* ============================================
 * 通用工具类
 * ============================================ */

/* 安全区适配 */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}
.safe-area-top {
  padding-top: env(safe-area-inset-top);
}

/* 文本省略 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flex 布局 */
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-1 {
  flex: 1;
}

/* ============================================
 * VI 设计系统 - 完整颜色常量库
 * 基于 docs/miniprogram-dev/VI-DESIGN-SYSTEM.md v1.0
 * ============================================ */

/* --- 1. 任务分类配色（4 种） --- */
page {
  /* 高优先召回 */
  --task-high-priority-border: #dc2626;
  --task-high-priority-from: #b91c1c;
  --task-high-priority-to: #dc2626;

  /* 优先召回 */
  --task-priority-recall-border: #f97316;
  --task-priority-recall-from: #ea580c;
  --task-priority-recall-to: #f97316;

  /* 客户回访 */
  --task-callback-border: #14b8a6;
  --task-callback-from: #0d9488;
  --task-callback-to: #14b8a6;

  /* 关系构建 */
  --task-relationship-border: #f472b6;
  --task-relationship-from: #ec4899;
  --task-relationship-to: #f472b6;

  /* --- 2. 客户标签配色（6 种） --- */
  /* 客户基础 */
  --tag-basic-text: #0052d9;
  --tag-basic-bg: #ecf2fe;
  --tag-basic-border: #bfdbfe;

  /* 消费习惯 */
  --tag-consume-text: #00a870;
  --tag-consume-bg: #e6f7f0;
  --tag-consume-border: #a7f3d0;

  /* 玩法偏好 */
  --tag-hobby-text: #ed7b2f;
  --tag-hobby-bg: #fff3e6;
  --tag-hobby-border: #fed7aa;

  /* 促销偏好 */
  --tag-promo-text: #d4a017;
  --tag-promo-bg: #fffbeb;
  --tag-promo-border: #fef3c7;

  /* 社交关系 */
  --tag-social-text: #764ba2;
  --tag-social-bg: #f3e8ff;
  --tag-social-border: #e9d5ff;

  /* 重要反馈 */
  --tag-feedback-text: #e34d59;
  --tag-feedback-bg: #ffe6e8;
  --tag-feedback-border: #fecdd3;

  /* --- 3. 关系等级配色（4 种） --- */
  /* 很好 (💖) */
  --rel-excellent-from: #e91e63;
  --rel-excellent-to: #f472b6;
  --rel-excellent-shadow: rgba(233,30,99,0.30);

  /* 良好 (🧡) */
  --rel-good-from: #ea580c;
  --rel-good-to: #fb923c;
  --rel-good-shadow: rgba(234,88,12,0.30);

  /* 一般 (💛) */
  --rel-normal-from: #eab308;
  --rel-normal-to: #fbbf24;
  --rel-normal-shadow: rgba(234,179,8,0.30);

  /* 待发展 (💙) */
  --rel-poor-from: #64748b;
  --rel-poor-to: #94a3b8;
  --rel-poor-shadow: rgba(100,116,139,0.30);

  /* --- 4. 置顶/放弃状态 --- */
  /* 置顶 */
  --status-pinned-glow: #f59e0b;
  --status-pinned-shadow-light: rgba(245, 158, 11, 0.12);
  --status-pinned-shadow-glow: rgba(245, 158, 11, 0.08);

  /* 放弃 */
  --status-abandoned-border: #d1d5db;
  --status-abandoned-text: #9ca3af;
  --status-abandoned-opacity: 0.55;

  /* --- 5. 助教等级配色（4 级 + 星级） --- */
  /* 初级 */
  --coach-junior-text: #0052d9;
  --coach-junior-bg: #ecf2fe;
  --coach-junior-border: #bfdbfe;

  /* 中级 */
  --coach-middle-text: #ed7b2f;
  --coach-middle-bg: #fff3e6;
  --coach-middle-border: #fed7aa;

  /* 高级 */
  --coach-senior-text: #e91e63;
  --coach-senior-bg: #ffe6e8;
  --coach-senior-border: #fecdd3;

  /* 星级 */
  --coach-star-text: #fbbf24;
  --coach-star-bg: #fffef0;
  --coach-star-border: #fef3c7;

  /* --- 颜色变体（用于透明度和阴影） --- */
  /* 错误色变体 */
  --color-error-light: #ffe6e8;
  --color-error-lighter: #fff5f5;
  --color-error-shadow: rgba(227, 77, 89, 0.3);
  --color-error-shadow-light: rgba(227, 77, 89, 0.18);
  --color-error-shadow-lighter: rgba(227, 77, 89, 0.06);
  --color-error-shadow-minimal: rgba(227, 77, 89, 0.1);
  --color-error-shadow-micro: rgba(227, 77, 89, 0.03);

  /* 警告色变体 */
  --color-warning-light: #fff3e6;
  --color-warning-shadow: rgba(237, 123, 47, 0.3);
  --color-warning-shadow-light: rgba(237, 123, 47, 0.18);
  --color-warning-shadow-lighter: rgba(237, 123, 47, 0.06);
  --color-warning-shadow-minimal: rgba(237, 123, 47, 0.1);
  --color-warning-shadow-micro: rgba(237, 123, 47, 0.03);

  /* 主色变体 */
  --color-primary-shadow: rgba(0, 82, 217, 0.3);
  --color-primary-shadow-light: rgba(0, 82, 217, 0.18);
  --color-primary-shadow-lighter: rgba(0, 82, 217, 0.06);
  --color-primary-shadow-minimal: rgba(0, 82, 217, 0.1);
  --color-primary-shadow-micro: rgba(0, 82, 217, 0.03);

  /* 成功色变体 */
  --color-success-shadow-minimal: rgba(0, 168, 112, 0.1);

  /* 白色和透明 */
  --color-white: #ffffff;
  --color-white-overlay-light: rgba(255, 255, 255, 0.95);
  --color-white-overlay-lighter: rgba(255, 255, 255, 0.2);
  --color-white-overlay-minimal: rgba(255, 255, 255, 0.1);

  /* 新增：简化的颜色别名（用于页面样式） */
  --bg-primary: var(--color-gray-1);
  --bg-secondary: var(--color-white);
  --bg-tertiary: var(--color-gray-1);
  --text-primary: var(--color-gray-13);
  --text-secondary: var(--color-gray-7);
  --text-tertiary: var(--color-gray-6);
  --text-disabled: var(--color-gray-5);
  --border-light: var(--color-gray-2);
  --shadow-xs: 0 2rpx 8rpx rgba(0,0,0,0.03);
  --shadow-sm: 0 8rpx 28rpx rgba(0,0,0,0.06);

  /* 状态色的数值变体 */
  --error-300: #fda4af;
  --error-400: #f87171;
  --error-500: var(--color-error);
  --warning-300: #fcd34d;
  --warning-500: var(--color-warning);
  --warning-600: #ed7b2f;
  --success-500: var(--color-success);

  /* 主色的数值变体和装饰点 */
  --primary-500: #3b82f6;
  --primary-dot-cyan: #22d3ee;
  --primary-dot-cyan-shadow: rgba(34, 211, 238, 0.4);
  --primary-dot-blue: #93c5fd;
  --primary-dot-blue-shadow: rgba(147, 197, 253, 0.4);
  --primary-shadow-minimal: rgba(0, 82, 217, 0.1);
}

/* ============================================
 * 全局 Toast 加载态（不白屏，fixed 浮层）
 * 用法：<view class="g-toast-loading" wx:if="{{pageState === 'loading'}}">
 * ============================================ */
.g-toast-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  pointer-events: none;
}

.g-toast-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  background: rgba(36, 36, 36, 0.72);
  border-radius: 24rpx;
  padding: 36rpx 52rpx;
  pointer-events: auto;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.18);
}

.g-toast-loading-text {
  font-size: 24rpx;
  color: #ffffff;
  line-height: 32rpx;
}

/* ============================================
 * 头像颜色系统 §8（基于 VI-DESIGN-SYSTEM.md v1.1）
 * 24 种渐变色，统一类名：.avatar-{key}
 * 适用于客户头像、助教头像等所有圆形/圆角方形头像
 * ============================================ */
.avatar-blue     { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.avatar-indigo   { background: linear-gradient(135deg, #818cf8, #4f46e5); }
.avatar-violet   { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.avatar-purple   { background: linear-gradient(135deg, #c084fc, #9333ea); }
.avatar-fuchsia  { background: linear-gradient(135deg, #bd58c8, #7a1486); }
.avatar-pink     { background: linear-gradient(135deg, #d44d96, #b83077); }
.avatar-rose     { background: linear-gradient(135deg, #d05060, #aa1535); }
.avatar-red      { background: linear-gradient(135deg, #c85050, #a81c1c); }
.avatar-orange   { background: linear-gradient(135deg, #cc6e22, #b04208); }
.avatar-amber    { background: linear-gradient(135deg, #fbbf24, #d97706); }
.avatar-yellow   { background: linear-gradient(135deg, #facc15, #ca8a04); }
.avatar-lime     { background: linear-gradient(135deg, #a3e635, #65a30d); }
.avatar-green    { background: linear-gradient(135deg, #4ade80, #16a34a); }
.avatar-emerald  { background: linear-gradient(135deg, #34d399, #059669); }
.avatar-teal     { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
.avatar-cyan     { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.avatar-sky      { background: linear-gradient(135deg, #38bdf8, #0284c7); }
.avatar-slate    { background: linear-gradient(135deg, #94a3b8, #475569); }
.avatar-coral    { background: linear-gradient(135deg, #cc6245, #ad3512); }
.avatar-mint     { background: linear-gradient(135deg, #67e8f9, #0891b2); }
.avatar-lavender { background: linear-gradient(135deg, #c4b5fd, #7c3aed); }
.avatar-gold     { background: linear-gradient(135deg, #fcd34d, #b45309); }
.avatar-crimson  { background: linear-gradient(135deg, #c42844, #750d28); }
.avatar-ocean    { background: linear-gradient(135deg, #38bdf8, #1d4ed8); }

/* ============================================
 * AI 图标配色系统（基于 docs/h5_ui/css/ai-icons.css）
 * 6 种配色 + 2 个系列（inline-icon / title-badge）
 * ============================================ */

/* --- 默认配色（靛色 fallback） --- */
.ai-inline-icon, .ai-title-badge {
  --ai-from: #667eea;
  --ai-to: #a78bfa;
  --ai-from-deep: #4a5fc7;
  --ai-to-deep: #667eea;
}

/* --- 6 种配色类 --- */
.ai-color-red    { --ai-from: #e74c3c; --ai-to: #f39c9c; --ai-from-deep: #c0392b; --ai-to-deep: #e74c3c; }
.ai-color-orange { --ai-from: #e67e22; --ai-to: #f5c77e; --ai-from-deep: #ca6c17; --ai-to-deep: #e67e22; }
.ai-color-yellow { --ai-from: #d4a017; --ai-to: #f7dc6f; --ai-from-deep: #b8860b; --ai-to-deep: #d4a017; }
.ai-color-blue   { --ai-from: #2980b9; --ai-to: #7ec8e3; --ai-from-deep: #1a5276; --ai-to-deep: #2980b9; }
.ai-color-indigo { --ai-from: #667eea; --ai-to: #a78bfa; --ai-from-deep: #4a5fc7; --ai-to-deep: #667eea; }
.ai-color-purple { --ai-from: #764ba2; --ai-to: #c084fc; --ai-from-deep: #5b3080; --ai-to-deep: #764ba2; }

/* --- 1. ai-inline-icon（行首小图标，H5 16px → 28rpx） --- */
.ai-inline-icon {
  display: inline-block;
  width: 30rpx;
  height: 30rpx;
  /* color-mix 不支持，用渐变近似：45% from + white 混合 */
  background: linear-gradient(135deg, var(--ai-from), var(--ai-to));
  opacity: 0.65;
  border-radius: 6rpx;
  margin: 0 6rpx 0 0;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  vertical-align: baseline;
  transform: translateY(0.1em);
}

/* 内部机器人图片 */
.ai-inline-icon .ai-inline-icon-img {
  width: 30rpx;
  height: 30rpx;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: block;
}

/* 微光扫过动画（12s 周期） */
.ai-inline-icon::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,0.18) 45%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.18) 55%,
    transparent 70%
  );
  animation: ai-shimmer 12s ease-in-out infinite;
}

/* --- 2. ai-title-badge（标题行右侧标识） --- */
.ai-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 6rpx;
  padding: 0rpx 18rpx 0rpx 6rpx;
  /* 浅色背景：用低透明度渐变近似 color-mix 8%-10% */
  background: linear-gradient(135deg,
    rgba(102,126,234,0.08),
    rgba(167,139,250,0.10)
  );
  border: 2rpx solid rgba(102,126,234,0.35);
  border-radius: 18rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: var(--ai-from-deep);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  line-height: 1.4;
  animation: ai-pulse 3s ease-in-out infinite;
}

/* 各配色的 badge 背景和边框覆盖 */
.ai-color-red .ai-title-badge,
.ai-title-badge.ai-color-red {
  background: linear-gradient(135deg, rgba(231,76,60,0.08), rgba(243,156,156,0.10));
  border-color: rgba(231,76,60,0.35);
}
.ai-color-orange .ai-title-badge,
.ai-title-badge.ai-color-orange {
  background: linear-gradient(135deg, rgba(230,126,34,0.08), rgba(245,199,126,0.10));
  border-color: rgba(230,126,34,0.35);
}
.ai-color-yellow .ai-title-badge,
.ai-title-badge.ai-color-yellow {
  background: linear-gradient(135deg, rgba(212,160,23,0.08), rgba(247,220,111,0.10));
  border-color: rgba(212,160,23,0.35);
}
.ai-color-blue .ai-title-badge,
.ai-title-badge.ai-color-blue {
  background: linear-gradient(135deg, rgba(41,128,185,0.08), rgba(126,200,227,0.10));
  border-color: rgba(41,128,185,0.35);
}
.ai-color-indigo .ai-title-badge,
.ai-title-badge.ai-color-indigo {
  background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(167,139,250,0.10));
  border-color: rgba(102,126,234,0.35);
}
.ai-color-purple .ai-title-badge,
.ai-title-badge.ai-color-purple {
  background: linear-gradient(135deg, rgba(118,75,162,0.08), rgba(192,132,252,0.10));
  border-color: rgba(118,75,162,0.35);
}

/* badge 内机器人图标容器 */
.ai-title-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42rpx;
  height: 42rpx;
  flex-shrink: 0;
}
.ai-title-badge-icon .ai-title-badge-icon-img {
  height: 36rpx;
}

/* 为 SVG 的 currentColor 设置颜色（描边和眼睛使用） */
.ai-color-red .ai-title-badge-icon    { color: #c0392b; }
.ai-color-orange .ai-title-badge-icon { color: #ca6c17; }
.ai-color-yellow .ai-title-badge-icon { color: #b8860b; }
.ai-color-blue .ai-title-badge-icon   { color: #1a5276; }
.ai-color-indigo .ai-title-badge-icon { color: #4a5fc7; }
.ai-color-purple .ai-title-badge-icon { color: #5b3080; }

/* 高光扫过（14s 周期，复用 ai-shimmer） */
.ai-title-badge::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,0.15) 43%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.15) 57%,
    transparent 70%
  );
  animation: ai-shimmer 14s ease-in-out infinite;
}

/* --- 动画关键帧 --- */
@keyframes ai-shimmer {
  0%, 100% { transform: translateX(-100%) rotate(45deg); }
  50%      { transform: translateX(100%) rotate(45deg); }
}

@keyframes ai-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(102,126,234,0); }
  50%      { box-shadow: 0 0 16rpx 4rpx rgba(102,126,234,0.35); }
}