/* ══════════════════════════════════════════════════════════════════
   应用样式。**所有色值/字号/间距都走 var(--token)**，本文件不得出现 hex。

   组件按 design-md 语料 `designs/claude/DESIGN.md` 的规格实现：
   凡语料里定义过的（button-primary / text-input / badge-pill /
   feature-card / category-tab / top-nav …），一律照抄其 padding、高度、
   圆角、字体 token。

   语料未覆盖、本项目自行扩展的组件，在注释里逐条标了「【扩展】」。
   ══════════════════════════════════════════════════════════════════ */

/* ── 基础 ────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  /* 语料硬约束：画布永远是奶油底，不用纯白 */
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 16px;          /* body-md */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }        /* text-link */
a:hover { text-decoration: underline; }

/* 语料：「不要给悬停加语料里没定义的样式」—— 但键盘可达性不能牺牲。
   focus-visible 只在键盘操作时出现，不影响鼠标用户的观感。 */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── 排版 ────────────────────────────────────────────────────────── */

.display-md {                                   /* 36px / 400 / -0.5px */
  font-family: var(--font-serif);
  font-size: 36px; font-weight: 400; line-height: 1.15;
  letter-spacing: var(--tracking-display);
  color: var(--ink); margin: 0;
}
.display-sm {                                   /* 28px / 400 / -0.3px */
  font-family: var(--font-serif);
  font-size: 28px; font-weight: 400; line-height: 1.2;
  letter-spacing: var(--tracking-display);
  color: var(--ink); margin: 0;
}
.title-lg { font-size: 22px; font-weight: 500; line-height: 1.3; color: var(--ink); margin: 0; }
.title-md { font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--ink); margin: 0; }
.title-sm { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--ink); margin: 0; }
.body-md  { font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--body); margin: 0; }
.body-sm  { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--body); margin: 0; }
.caption  { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--muted); margin: 0; }
.caption-uppercase {                             /* 12px / 500 / 1.5px 字距 */
  font-size: 12px; font-weight: 500; line-height: 1.4;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 0;
}
.text-muted  { color: var(--muted); }
.text-soft   { color: var(--muted-soft); }

/* ── 按钮 ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-xs);
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500; line-height: 1;
  padding: 12px 20px; height: 40px;              /* 语料 button-* 规格 */
  border-radius: var(--rounded-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .12s ease;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary {                                   /* 珊瑚色 —— 只用于主 CTA */
  background: var(--primary); color: var(--on-primary);
}
.btn-primary:hover:not(:disabled) { background: var(--primary-active); text-decoration: none; }
.btn-primary:disabled { background: var(--primary-disabled); color: var(--muted); cursor: not-allowed; }

.btn-secondary {                                 /* 奶油底 + 细描边 */
  background: var(--canvas); color: var(--ink); border-color: var(--hairline);
}
.btn-secondary:hover:not(:disabled) { text-decoration: none; background: var(--surface-card); }
.btn-secondary:disabled { color: var(--muted-soft); cursor: not-allowed; }

.btn-sm { height: 32px; padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }

.btn-icon {                                      /* 语料 button-icon-circular */
  width: 36px; height: 36px; padding: 0;
  border-radius: var(--rounded-pill);
  background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline);
}
.btn-icon:hover { background: var(--surface-card); }
.btn-icon svg { width: 18px; height: 18px; }

.btn-ghost { background: transparent; color: var(--ink); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-card); }

/* ── 输入 ────────────────────────────────────────────────────────── */

.input, .textarea, .select {
  width: 100%;
  font-family: var(--font-sans); font-size: 16px; line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-md);
  padding: 10px 14px; height: 40px;
}
.textarea { height: auto; min-height: 96px; resize: vertical; line-height: 1.55; }
.input::placeholder, .textarea::placeholder { color: var(--muted-soft); }
/* 语料 text-input-focused：边框转珊瑚 + 3px 珊瑚 15% 外环 */
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.15);
}

.field { display: flex; flex-direction: column; gap: var(--sp-xs); margin-bottom: var(--sp-md); }
.field > label { font-size: 13px; font-weight: 500; color: var(--muted); }

/* ── 顶部导航 ────────────────────────────────────────────────────── */

.topnav {
  height: 64px;                                   /* 语料 top-nav 规格 */
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; gap: var(--sp-lg);
  padding: 0 var(--sp-lg);
  position: sticky; top: 0; z-index: 20;
}
.topnav__brand {
  display: flex; align-items: center; gap: var(--sp-xs);
  font-family: var(--font-serif); font-size: 20px; color: var(--ink);
  letter-spacing: var(--tracking-display); white-space: nowrap;
}
.topnav__brand svg { width: 20px; height: 20px; color: var(--ink); }
.topnav__links { display: flex; gap: var(--sp-xxs); flex: 1; }
.topnav__link {
  font-size: 14px; font-weight: 500; color: var(--muted);
  padding: 8px 14px; border-radius: var(--rounded-md);
}
.topnav__link:hover { background: var(--surface-card); text-decoration: none; }
.topnav__link.is-active { background: var(--surface-card); color: var(--ink); }
.topnav__right { display: flex; align-items: center; gap: var(--sp-sm); margin-left: auto; }
.topnav__user { display: flex; align-items: center; gap: var(--sp-xs); font-size: 14px; color: var(--ink); }

/* ── 气泡与卡片 ──────────────────────────────────────────────────── */

/* 【扩展】语料 Known Gaps 明确写了 claude.ai 的聊天气泡不在其范围内。
   下面按既有 token 拼，不发明新色：
   用户气泡用 surface-card，助手气泡用 canvas+描边。
   **助手气泡刻意不用珊瑚色** —— 珊瑚是主 CTA 专用，刷在气泡上就散了。 */
.bubble {
  max-width: 86%;
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--rounded-lg);
  font-size: 15px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.bubble--user { background: var(--surface-card); color: var(--ink); margin-left: auto; }
.bubble--assistant { background: var(--canvas); color: var(--body); border: 1px solid var(--hairline); }
.bubble__meta { font-size: 12px; color: var(--muted-soft); margin-bottom: var(--sp-xxs); }

.msg-row { display: flex; flex-direction: column; margin-bottom: var(--sp-md); }

/* 内容卡（语料 feature-card：surface-card 底 / 12px 圆角 / 32px 内边距）*/
.card {
  background: var(--surface-card);
  border-radius: var(--rounded-lg);
  padding: var(--sp-xl);
}
.card--outline { background: var(--canvas); border: 1px solid var(--hairline); }
.card--dark { background: var(--surface-dark); color: var(--on-dark); }
.card--dark .title-md, .card--dark .title-sm { color: var(--on-dark); }
.card--dark .body-sm, .card--dark .body-md { color: var(--on-dark-soft); }

/* 笔记卡：移动端卡片流用 */
.note-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-lg);
  overflow: hidden;
  display: block;
  color: inherit;
}
.note-card:hover { text-decoration: none; box-shadow: var(--shadow-hover); }
.note-card__cover { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--surface-card); display: block; }
.note-card__body { padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-sm); }
.note-card__title {
  font-family: var(--font-serif); font-size: 20px; font-weight: 400;
  line-height: 1.3; letter-spacing: var(--tracking-display); color: var(--ink);
  margin: 0;
}
.note-card__excerpt {
  font-size: 14px; line-height: 1.55; color: var(--muted);
  margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.note-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--hairline-soft);
  padding-top: var(--sp-sm); margin-top: var(--sp-xxs);
}

/* ── 徽章 ────────────────────────────────────────────────────────── */

.badge {                                          /* 语料 badge-pill */
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-card); color: var(--ink);
  font-size: 13px; font-weight: 500; line-height: 1.4;
  padding: 4px 12px; border-radius: var(--rounded-pill);
}
.badge--coral {                                   /* 语料 badge-coral */
  background: var(--primary); color: var(--on-primary);
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
}
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-soft); flex: none; }
.badge__dot--success { background: var(--success); }
.badge__dot--warning { background: var(--warning); }
.badge__dot--muted   { background: var(--muted-soft); }

/* ── Tab（语料 category-tab）────────────────────────────────────── */

.tabs { display: flex; gap: var(--sp-xxs); }
.tab {
  font-size: 14px; font-weight: 500; color: var(--muted);
  padding: 8px 14px; border-radius: var(--rounded-md); background: transparent;
  border: none; cursor: pointer;
}
.tab.is-active { background: var(--surface-card); color: var(--ink); }

/* ── iPhone 预览机框【扩展】──────────────────────────────────────── */

.phone {
  /* 宽度随视口高度收敛：机框是 9:19.5 的长条，不做约束的话在
     笔记本屏（约 800px 高）上会把下方的操作按钮顶出可视区。
     0.46 ≈ 9/19.5，240px 是按钮行 + 间距的预留。 */
  width: 340px;
  max-width: min(100%, calc((100vh - 240px) * 0.46));
  background: var(--surface-dark);
  border-radius: 40px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(20, 20, 19, 0.18);
}
.phone__screen {
  background: var(--canvas);
  border-radius: 30px;
  overflow: hidden;
  display: flex; flex-direction: column;
  aspect-ratio: 9 / 19.5;
}
.phone__statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--sp-lg) 4px;
  font-size: 12px; font-weight: 500; color: var(--ink);
}
.phone__statusbar svg { width: 44px; height: 12px; }
.phone__scroll { overflow-y: auto; flex: 1; }
.phone__cover { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--surface-card); display: block; }
.phone__content { padding: var(--sp-md) var(--sp-md) var(--sp-xl); }
.phone__title {
  font-family: var(--font-serif); font-size: 22px; font-weight: 400;
  line-height: 1.3; letter-spacing: var(--tracking-display);
  color: var(--ink); margin: 0 0 var(--sp-sm);
}
.phone__text {
  font-size: 15px; line-height: 1.7; color: var(--body);
  white-space: pre-wrap; margin: 0 0 var(--sp-md);
}
.phone__tags { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }

/* ── 工作台骨架（桌面双栏）───────────────────────────────────────── */

.workbench { display: flex; height: calc(100vh - 64px); }
.workbench__chat {
  flex: 1 1 50%; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--canvas);
}
.workbench__preview {
  flex: 1 1 50%; min-width: 0;
  background: var(--surface-soft);            /* 明暗节奏：左奶油 / 右柔色 */
  border-left: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  align-items: center;
  /* `safe center` 而不是裸 center：内容比容器高时，裸 center 会把顶部
     裁掉且滚不到（flexbox 的经典坑）。加 safe 后退化成从顶部开始、
     可以正常滚。 */
  justify-content: safe center;
  gap: var(--sp-md); padding: var(--sp-lg); overflow-y: auto;
}
.chat__scroll { flex: 1; overflow-y: auto; padding: var(--sp-lg); }
/* 输入条常驻底部，不随消息滚动 */
.chat__composer {
  border-top: 1px solid var(--hairline);
  padding: var(--sp-sm) var(--sp-lg) var(--sp-md);
  display: flex; gap: var(--sp-xs); align-items: flex-end;
  background: var(--canvas);
}

/* ── 登录页 ──────────────────────────────────────────────────────── */

.auth {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-lg);
}
.auth__box { width: 100%; max-width: 400px; }
.auth__brand { display: flex; flex-direction: column; align-items: center; gap: var(--sp-xs); margin-bottom: var(--sp-xl); }
.auth__brand svg { width: 36px; height: 36px; color: var(--ink); }
.auth__title {
  font-family: var(--font-serif); font-size: 28px; font-weight: 400;
  letter-spacing: var(--tracking-display); color: var(--ink); margin: 0;
}
.auth__sub { font-size: 14px; color: var(--muted); margin: 0; text-align: center; }
.auth__error {
  background: var(--surface-card); color: var(--error);
  border-radius: var(--rounded-md); padding: var(--sp-sm) var(--sp-md);
  font-size: 14px; margin-bottom: var(--sp-md);
}
.auth__error:empty { display: none; }

/* ── 无主图时的占位 ──────────────────────────────────────────────
   必须定义在 `.note-card__cover` 与 `.phone__cover` **之后**：
   那两条都写了 `display: block`，同优先级下后定义的赢。
   起初把 `display:flex` 写在 `.note-card__cover--empty` 里，
   结果被后面的 `.phone__cover{display:block}` 覆盖 —— 图标不显示，
   但也不报错，看着就像"这块本来就是空的"。 */
.cover-empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-card); color: var(--muted-soft);
}
.cover-empty svg { width: 32px; height: 32px; }

/* ── 工具类 ──────────────────────────────────────────────────────── */

.stack   { display: flex; flex-direction: column; }
.stack-2 { gap: var(--sp-xs); }  .stack-3 { gap: var(--sp-sm); }
.stack-4 { gap: var(--sp-md); }  .stack-5 { gap: var(--sp-lg); }  .stack-6 { gap: var(--sp-xl); }
.row     { display: flex; align-items: center; }  .row-between { justify-content: space-between; }
.row-gap-2 { gap: var(--sp-xs); } .row-gap-3 { gap: var(--sp-sm); } .row-gap-4 { gap: var(--sp-md); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.center { text-align: center; }
.hidden { display: none !important; }
.mt-4 { margin-top: var(--sp-md); } .mt-5 { margin-top: var(--sp-lg); } .mt-6 { margin-top: var(--sp-xl); }

/* ── 移动端 ──────────────────────────────────────────────────────── */

.bottomtabs {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  height: 56px; background: var(--canvas);
  border-top: 1px solid var(--hairline);
  align-items: stretch;
}
.bottomtabs__item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  font-size: 11px; color: var(--muted); background: none; border: none;
  cursor: pointer; text-decoration: none;
}
.bottomtabs__item svg { width: 20px; height: 20px; }
.bottomtabs__item.is-active { color: var(--ink); }
.bottomtabs__item:hover { text-decoration: none; }

.cardgrid { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); padding: var(--sp-md); }

@media (max-width: 900px) {
  /* 桌面双栏在移动端塌成单栏：这是语料的 collapsing 策略（减列不缩卡） */
  .workbench { flex-direction: column; height: auto; }
  .workbench__chat { flex: none; height: calc(100vh - 64px - 56px); }
  .workbench__preview { display: none; }
  .bottomtabs { display: flex; }
  .topnav__links { display: none; }
  .topnav { padding: 0 var(--sp-md); }
  .display-md { font-size: 28px; }
  .cardgrid { padding-bottom: 72px; }
  /* 窄屏上输入条很挤：发送按钮收成纯图标，把宽度让给输入框 */
  .send-label { display: none; }
  .chat__composer { padding-left: var(--sp-md); padding-right: var(--sp-md); }
}

@media (min-width: 901px) {
  .cardgrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}