// W3C DTCG 格式 (Design Token Community Group Standard)
{
  "brand": {
    "clay": {
      "$value": "hsl(14.8 63.1% 59.6%)",
      "$type": "color",
      "$description": "Claude 品牌主色，暖珊瑚色调"
    }
  },
  "font": {
    "claude-response": {
      "$value": "\"Anthropic Serif\", Georgia, serif",
      "$type": "fontFamily",
      "$description": "AI 回复专用字体：衬线体提升长文可读性"
    },
    "user-message": {
      "$value": "\"Anthropic Sans\", system-ui, sans-serif",
      "$type": "fontFamily"
    }
  },
  "bg": {
    "000": { "$value": "hsl(0 0% 100%)", "$type": "color" },
    "100": { "$value": "hsl(60 14% 97%)", "$type": "color" },
    "200": { "$value": "hsl(60 11% 95%)", "$type": "color" }
  }
}

/* ChatGPT Interactive Token 体系（极完整，每个状态独立 Token）*/
:root {
  /* Primary 按钮的全状态 Token */
  --interactive-bg-primary-default:  #0d0d0d;       /* 默认：近黑 */
  --interactive-bg-primary-hover:    #0d0d0dcc;     /* Hover：80% 透明 */
  --interactive-bg-primary-press:    #0d0d0de5;     /* Press：90% 透明 */
  --interactive-bg-primary-inactive: #0d0d0d;       /* Disabled */

  /* Secondary 按钮 */
  --interactive-bg-secondary-default: #0d0d0d00;   /* 透明 */
  --interactive-bg-secondary-hover:   #0d0d0d05;   /* 极浅灰背景 */
  --interactive-bg-secondary-press:   #0d0d0d0d;   /* 浅灰按下 */

  /* Accent (蓝色) 按钮 */
  --interactive-bg-accent-default: #e5f3ff;        /* 浅蓝背景 */
  --interactive-bg-accent-hover:   #cce6ff;        /* 中蓝 Hover */
  --interactive-bg-accent-press:   #99ceff;        /* 深蓝 Press */

  /* Danger 按钮 */
  --interactive-bg-danger-primary-default: #e02e2a;
  --interactive-bg-danger-primary-hover:   #ba2623;
  --interactive-bg-danger-primary-press:   #fa423e;

  /* Focus Ring */
  --interactive-focus-ring-primary:   #0d0d0d29;
  --interactive-focus-ring-secondary: #0d0d0d1f;
  --interactive-focus-ring-danger:    #e02e2a;
  --interactive-border-focus:         #0d0d0d;
}

/* ChatGPT Typography Token（真实提取，完整字阶）*/
:root {
  /* 字体族 */
  --font-sans: "-apple-system-body", "ui-sans-serif", "-apple-system", "system-ui",
               "Segoe UI", "Helvetica", "Apple Color Emoji", "Arial", "sans-serif";
  --font-mono: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "monospace";

  /* 字号阶梯（含行高比例）*/
  --text-xs:   .75rem;  --text-xs--line-height:   calc(1/.75);       /* 12px */
  --text-sm:   .875rem; --text-sm--line-height:   calc(1.25/.875);   /* 14px */
  --text-base: 1rem;    --text-base--line-height: calc(1.5/1);       /* 16px */
  --text-lg:   1.125rem;--text-lg--line-height:   calc(1.75/1.125); /* 18px */
  --text-xl:   1.25rem; --text-xl--line-height:   calc(1.75/1.25);  /* 20px */
  --text-2xl:  1.5rem;  --text-2xl--line-height:  calc(2/1.5);      /* 24px */
  --text-3xl:  1.875rem;--text-3xl--line-height:  calc(2.25/1.875);
  --text-4xl:  2.25rem; --text-4xl--line-height:  calc(2.5/2.25);
  --text-6xl:  3.75rem; --text-6xl--line-height:  1;

  /* 语义化字阶 */
  --text-body-regular:               1rem;     --text-body-regular--font-weight:               400;
  --text-body-emphasized:            1rem;     --text-body-emphasized--font-weight:            600;
  --text-body-small-regular:         .875rem; --text-body-small-regular--font-weight:         400;
  --text-caption-regular:            .75rem;  --text-caption-regular--font-weight:            400;
  --text-heading-2:                  1.5rem;  --text-heading-2--font-weight:                  600;
  --text-heading-app:                1.75rem; --text-heading-app--font-weight:                500;
  --text-monospace:                  .9375rem;--text-monospace--font-weight:                  400;

  /* 字重阶梯 */
  --font-weight-thin:       100;
  --font-weight-light:      300;
  --font-weight-normal:     400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;
  --font-weight-black:      900;
}

/* Web 模拟 Apple Dynamic Color 策略 */
:root {
  /* 语义色定义（Light Mode）*/
  --label:                    #000000;
  --secondary-label:          rgba(60,60,67,.6);
  --tertiary-label:           rgba(60,60,67,.3);
  --system-background:        #ffffff;
  --secondary-system-background: #f2f2f7;
  --system-blue:              #007AFF;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* 相同名称，不同值——无需改动任何组件代码 */
    --label:                    #ffffff;
    --secondary-label:          rgba(235,235,245,.6);
    --tertiary-label:           rgba(235,235,245,.3);
    --system-background:        #000000;
    --secondary-system-background: #1c1c1e;
    --system-blue:              #0A84FF; /* 暗色下蓝色略亮 */
  }
}

// SwiftUI Button Styles
struct PrimaryButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(.horizontal, 20)
            .padding(.vertical, 12)
            .background(
                configuration.isPressed
                    ? Color.blue.opacity(0.8)  // Press 状态
                    : Color.blue               // Default: systemBlue
            )
            .foregroundColor(.white)
            .cornerRadius(12)
            .scaleEffect(configuration.isPressed ? 0.97 : 1.0)
            .animation(.spring(response: 0.3, dampingFraction: 0.7), value: configuration.isPressed)
    }
}

// iOS 15+ 推荐写法
Button("Continue", action: {})
    .buttonStyle(.borderedProminent)  // 自动使用 tint 色
    .controlSize(.large)

// Streaming 文字渲染核心逻辑（基于 SSE / ReadableStream）
async function streamResponse(prompt, container) {
  const cursor = container.querySelector('.streaming-cursor');
  let buffer = '';

  // 使用 fetch + ReadableStream 接收流式数据
  const response = await fetch('/api/stream', {
    method: 'POST',
    body: JSON.stringify({ prompt })
  });

  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    // 解析 SSE 格式: "data: {token}\n\n"
    const chunk = decoder.decode(value);
    const lines = chunk.split('\n');
    for (const line of lines) {
      if (line.startsWith('data: ')) {
        const token = JSON.parse(line.slice(6)).text;
        buffer += token;
        // 直接追加文本，不 re-render 整体（性能关键）
        container.insertBefore(
          document.createTextNode(token), cursor
        );
        // 自动滚动到最新内容
        container.scrollIntoView({ block: 'end', behavior: 'smooth' });
      }
    }
  }
  // 完成：隐藏光标，触发 Markdown 渲染
  cursor.classList.add('done');
  renderMarkdown(container, buffer);
}

/* Claude vs ChatGPT Streaming 渲染策略对比 */

/*
  ┌─────────────────────┬─────────────────────────────┬─────────────────────────────┐
  │ 维度                 │ Claude                       │ ChatGPT                     │
  ├─────────────────────┼─────────────────────────────┼─────────────────────────────┤
  │ 字体                 │ Anthropic Serif（衬线）       │ 系统字体（无衬线）             │
  │ Markdown 时机        │ 流式逐渐渲染标题/列表          │ 完成后统一渲染                 │
  │ 代码块处理            │ 流式显示原始文本，完成后高亮   │ 相同策略                      │
  │ 停止按钮             │ ■ Stop generating             │ ■ Stop（全圆按钮）             │
  │ 消息追加             │ createTextNode 插入光标前     │ innerHTML 或类似策略           │
  │ 动效                 │ 无额外动效，纯文字流入         │ 文字淡入（极轻微）             │
  └─────────────────────┴─────────────────────────────┴─────────────────────────────┘
*/

/* ChatGPT 专用：Stop 按钮在 Streaming 时替换 Send 按钮 */
.send-btn[data-streaming="true"] {
  background: var(--interactive-bg-primary-default);
  /* 内部图标从 ↑ 切换为 ■ */
}

/* 方案二：CSS Class（支持手动切换，ChatGPT 策略）*/
:root {
  --bg-primary:   #ffffff;
  --text-primary: #0d0d0d;
  /* ...其他 Light Token */
}
/* html.dark 时覆盖 Token */
html.dark {
  --bg-primary:   #212121;
  --text-primary: #ececec;
  /* ...其他 Dark Token */
}

/* JavaScript 切换逻辑 */
/*
function toggleDark() {
  document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme',
    document.documentElement.classList.contains('dark') ? 'dark' : 'light'
  );
}
// 页面加载时恢复偏好
const saved = localStorage.getItem('theme');
if (saved === 'dark' || (!saved && matchMedia('(prefers-color-scheme:dark)').matches)) {
  document.documentElement.classList.add('dark');
}
*/

/* 方案三：混合方案（推荐）= Class 覆盖 + Media 兜底 */
:root {
  /* Light tokens... */
  --bg-primary: #fff;
  --text-primary: #0d0d0d;
}
/* 手动选择亮色（强制覆盖系统偏好）*/
html[data-theme="light"] {
  --bg-primary: #fff;
  --text-primary: #0d0d0d;
}
/* 手动选择暗色 */
html[data-theme="dark"] {
  --bg-primary: #212121;
  --text-primary: #ececec;
}
/* 未手动设置时跟随系统（兜底）*/
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg-primary: #212121;
    --text-primary: #ececec;
  }
}
/* HSL 版本（Claude 策略：保持色相）*/
html[data-theme="dark"] {
  --bg-100: hsl(60 3% 10%);   /* Light: hsl(60,14%,97%) → Dark: 同色相，L:97→10 */
  --text-100: hsl(0 0% 93%);  /* Light: hsl(0,0%,7%) → Dark: L:7→93（翻转）*/
}