/* ==========================================================================
   components.css · 15 个组件（规格见 02-design-tokens.md §3）
   通用规则：
   - 无阴影（除浮层）；层次来自 1px hairline + #FAFAFA/#FFFFFF 微差
   - 无渐变、无玻璃拟态、无 emoji
   - 图标线性 1.5px / 16–18px / currentColor
   - 过渡只允许 opacity/transform/background-color/border-color/box-shadow
   ========================================================================== */

/* 通用可点卡片交互（§7.3） */
.clickable {
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color  var(--dur-fast) var(--ease-out);
}
.clickable:hover  { background: var(--color-bg-subtle); border-color: var(--color-gray-6); }
.clickable:active { background: var(--color-fill-active); }
.clickable:focus-visible { box-shadow: var(--ring-focus); }
@media (hover: none) {
  .clickable:hover { background: var(--color-surface); }
}

/* 通用卡片：本项目 80% 模块都是这个形状 */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
}

/* ==========================================================================
   1. 口令门卡片（§3.1）
   ========================================================================== */
.gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  background: var(--color-bg);   /* 纯 #FAFAFA，禁止渐变/插画 */
}

.gate-card {
  width: 400px;
  max-width: calc(100vw - 40px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: var(--space-32);
  animation: panel-in var(--dur-panel) var(--ease-out) both;
}

.gate-avatar {
  width: 56px; height: 56px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-avatar-border);
  object-fit: cover;
  object-position: 50% 18%;   /* 证件照为竖幅，裁切时保住脸部 */
  margin-bottom: var(--space-16);
}

.gate-wordmark {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
}

.gate-tagline {
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-list);
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
}

.gate-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-24) 0;
  border: 0;
}

/* v1.9.0：口令页欢迎语 —— 访客第一眼看到的招呼，放在「访问口令」标签上方 */
.gate-welcome {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  line-height: 1.6;
  color: var(--color-accent);
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-tint-hover);
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-16);
  margin-bottom: var(--space-16);
  text-align: center;
  letter-spacing: 0.01em;
}

.field-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  line-height: var(--lh-snug);
}

.gate-foot {
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  color: var(--color-text-tertiary-aa);
  margin-top: var(--space-16);
  text-align: center;
  line-height: var(--lh-list);
}

/* ICP 备案号（备案通过后按境内要求置于页面底部，链到工信部备案查询） */
.site-icp {
  flex: none;                       /* 位于 app-shell 底部，不参与对话区滚动 */
  text-align: center;
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  color: var(--color-text-tertiary-aa);
  padding: 6px var(--space-16);
  background: var(--color-surface);
}

.icp-link {
  color: inherit;
  text-decoration: none;
}

.icp-link:hover,
.icp-link:focus-visible {
  text-decoration: underline;
  color: var(--color-text-secondary);
}

/* 错误提示条（§3.1） */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  background: var(--color-danger-tint);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--color-danger-on-tint);   /* 6.24:1 ✅ */
  margin-top: var(--space-12);
  animation: fade-up 180ms var(--ease-out) both;
}
.alert .icon { margin-top: 2px; color: var(--color-danger); }
.alert[hidden] { display: none !important; }

/* ==========================================================================
   2. 输入框（§3.2）
   ========================================================================== */
.input {
  width: 100%;
  min-height: var(--composer-h-min);
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);       /* 16px 防 iOS 缩放 */
  line-height: var(--lh-list);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--color-text-placeholder); }
.input:hover { border-color: var(--color-gray-6); }
.input:focus {
  outline: none;
  border-color: var(--color-accent);          /* accent 白名单 ①焦点环 */
  box-shadow: var(--ring-focus);
}
.input:disabled {
  background: var(--color-bg-subtle);
  color: var(--color-text-disabled);
  border-color: var(--color-border-strong);
}
.input.is-error { border-color: var(--color-danger); }
.input.is-error:focus { box-shadow: var(--ring-error); }

/* ==========================================================================
   3. 主按钮（§3.3）
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: 40px;
  padding: 0 20px;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn:disabled { cursor: not-allowed; }

.btn-primary {
  background: var(--color-accent);            /* accent 白名单 ②发送按钮 */
  color: var(--color-text-on-accent);         /* 5.68:1 ✅ */
}
.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.btn-primary:active:not(:disabled) { background: var(--color-accent-active); }
.btn-primary:focus-visible { box-shadow: var(--ring-focus-strong); }
.btn-primary:disabled {
  background: var(--color-bg-subtle);
  color: var(--color-text-disabled);
}

.btn-block { display: flex; width: 100%; }

/* ==========================================================================
   4. 次级按钮（§3.4）
   ========================================================================== */
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-bg-subtle);
  border-color: var(--color-gray-6);
}
.btn-secondary:active:not(:disabled) { background: var(--color-fill-active); }
.btn-secondary:focus-visible { box-shadow: var(--ring-focus); }
.btn-secondary:disabled {
  background: var(--color-surface);
  color: var(--color-text-disabled);
  border-color: var(--color-border);
}

/* 小号变体（重试 / 工具条） */
.btn-sm {
  height: 32px;
  padding: 0 var(--space-12);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

/* 安静的文字按钮（对话工具条） */
.btn-quiet {
  height: 32px;
  padding: 0 var(--space-8);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}
.btn-quiet:hover:not(:disabled) { background: var(--color-fill-hover); color: var(--color-text-primary); }
.btn-quiet:active:not(:disabled) { background: var(--color-fill-active); }
.btn-quiet:focus-visible { box-shadow: var(--ring-focus); }
.btn-quiet:disabled { color: var(--color-text-disabled); }

/* ==========================================================================
   5. 图标按钮（§3.5）
   ========================================================================== */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--color-fill-hover); color: var(--color-text-primary); }
.icon-btn:active { background: var(--color-fill-active); }
.icon-btn:focus-visible { box-shadow: var(--ring-focus); }
.icon-btn.is-selected {
  background: var(--color-accent-tint);
  color: var(--color-accent-on-tint);         /* 7.03:1 ✅ */
}
.icon-btn:disabled { color: var(--color-text-disabled); background: transparent; pointer-events: none; }

/* 内嵌小号变体（消息 hover 操作行，桌面） */
.icon-btn-xs { width: 28px; height: 28px; }

/* ==========================================================================
   6/7. 消息气泡（§3.6 用户 / §3.7 AI）
   ========================================================================== */
/* 注意：这里刻意【不用 gap】。
   flex gap 会与子项 margin-top 相加导致间距翻倍（24+24=48px），
   且 gap 无法针对 .msg--cont（同一人连续消息）单独覆盖。
   因此间距统一由 margin-top 承担，规格 §4.5：切换 20px / 连续 8px。 */
.msg-list {
  display: flex;
  flex-direction: column;
}
.msg-list:empty { display: none; }

.msg { display: flex; flex-direction: column; }
.msg + .msg { margin-top: var(--space-20); }        /* 角色切换 20px */
.msg--cont + .msg { margin-top: var(--space-8); }   /* 同一人连续 8px */

.msg--user { align-items: flex-end; }
.msg--ai   { align-items: flex-start; }

.bubble {
  max-width: var(--bubble-max);
  border-radius: var(--radius-lg);
  box-shadow: none;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 用户气泡：灰底，不用 accent（保持 accent ≤5%） */
.bubble--user {
  background: var(--color-fill-hover);
  border: none;
  padding: 10px 14px;
  font-size: var(--text-msg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  margin-left: auto;
  animation: fade-up var(--dur-base) var(--ease-out) both;
}

/* AI 气泡：白底 + hairline + 左侧 2px accent 竖线（accent 白名单 ④） */
.bubble--ai {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-16) var(--space-20);
  padding-left: 18px;
  font-size: var(--text-msg);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  animation: fade-up var(--dur-base) var(--ease-out) both;
}
.bubble--ai::before {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 2px;
  background: var(--color-accent);
  border-radius: 1px;
}

.bubble--ai.is-error { color: var(--color-danger); }

/* 时间戳 */
.msg-time {
  font-size: var(--text-2xs);
  font-weight: var(--fw-regular);
  color: var(--color-text-tertiary-aa);
  margin-top: var(--space-4);
  padding: 0 var(--space-4);
}

/* 消息操作行：桌面 hover 显示，移动常驻 */
.msg-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  max-width: var(--bubble-max);
}
@media (hover: hover) {
  .msg-actions { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
  .msg--ai:hover .msg-actions,
  .msg--ai:focus-within .msg-actions { opacity: 1; }
}

/* 来源标签（§3.7） */
.source-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-accent-tint);
  color: var(--color-accent-on-tint);       /* 7.03:1 ✅ · accent 白名单 ⑤选中态 */
  border: none;
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  font-family: inherit;
  cursor: default;          /* 来源仅为标识，不再可点击跳转 */
  transition: background-color var(--dur-fast) var(--ease-out);
}
.source-tag:hover { background: var(--color-accent-tint); }
.source-tag:focus-visible { box-shadow: var(--ring-focus); }
.source-tag .icon { stroke-width: 1.5; }

.source-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

/* Markdown 正文（§3.7） */
.md { font-size: var(--text-msg); line-height: var(--lh-body); }
.md > *:first-child { margin-top: 0; }
.md > *:last-child { margin-bottom: 0; }
.md p { margin: 0 0 var(--space-8); }
.md p:last-child { margin-bottom: 0; }
.md strong { font-weight: var(--fw-semibold); color: inherit; }  /* 关键数据加粗不改色 */
.md ul, .md ol { margin: var(--space-8) 0 0; padding-left: 18px; }
.md li { font-size: var(--text-base); line-height: var(--lh-list); margin-bottom: 6px; }
.md li::marker { color: var(--color-gray-7); }
.md li:last-child { margin-bottom: 0; }
.md a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.md code {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1px 5px;
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
}
.md pre {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-12) var(--space-16);
  overflow-x: auto;
  margin: var(--space-8) 0 0;
}
.md pre code { background: none; border: none; padding: 0; font-size: var(--text-sm); }
.md h1, .md h2, .md h3, .md h4 {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  margin: var(--space-12) 0 var(--space-4);
}
.md blockquote {
  margin: var(--space-8) 0 0;
  padding-left: var(--space-12);
  border-left: 2px solid var(--color-border);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   8. 快捷问题卡片（§3.8）
   ========================================================================== */
.empty-state {
  margin: auto 0;                   /* 空态垂直居中于可视区 */
  padding: var(--space-32) 0 var(--space-24);
  animation: fade-up var(--dur-base) var(--ease-out) both;
}
.empty-state[hidden] { display: none !important; }

.empty-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
}

.empty-lead {
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-24);
  max-width: 60ch;
}

.q-group + .q-group { margin-top: var(--space-16); }
.q-group-label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-tertiary-aa);
  letter-spacing: var(--tracking-normal);   /* 中文，禁止全大写 + 宽字距 */
  margin-bottom: var(--space-8);
  line-height: var(--lh-snug);
}

.question-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12);
}

.question-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-height: 88px;
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  font-family: inherit;
  color: var(--color-text-primary);
  animation: fade-up var(--dur-base) var(--ease-out) both;
}
.question-card:hover { background: var(--color-bg-subtle); border-color: var(--color-gray-6); }
.question-card:active { background: var(--color-fill-active); }
.question-card:focus-visible { box-shadow: var(--ring-focus); outline-offset: 2px; }
.question-card.is-asked {
  background: var(--color-accent-tint);
  border-color: var(--color-accent-border);
  color: var(--color-accent-on-tint);
}
.question-card.is-asked .q-text { color: var(--color-accent-on-tint); }

/* 分类标签只出现在 .q-group-label 上（组内不再重复），避免同一分类出现 3 次 */
.q-text {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-list);
  color: var(--color-text-primary);
}

/* ==========================================================================
   9. Chip（§3.9）
   ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 32px;
  padding: 0 var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.chip:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-gray-6);
  color: var(--color-text-primary);
}
.chip:active { background: var(--color-fill-active); }
.chip:focus-visible { box-shadow: var(--ring-focus); }
.chip:disabled {
  color: var(--color-text-disabled);
  border-color: var(--color-border);
  background: var(--color-surface);
  cursor: not-allowed;
}

/* follow-up chip：比基础 chip 更轻 */
.chip-follow {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  height: 32px;
  white-space: normal;
  text-align: left;
}
.chip-follow .chip-arrow { color: var(--color-gray-7); font-size: var(--text-xs); }
.chip-follow:hover {
  border-color: var(--color-accent-border);
  background: var(--color-accent-tint);
  color: var(--color-accent-on-tint);
}
.chip-follow:hover .chip-arrow { color: var(--color-accent-on-tint); }

.followups {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-12);
  max-width: var(--bubble-max);
}
.followups-label {
  width: 100%;
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-tertiary-aa);
  margin-bottom: calc(var(--space-4) * -1);
}
/* 无追问时的引导（P1-1 方案 3）：比追问更轻，不抢回答的视觉重心 */
.followups--hint { align-items: center; }
.followups-hint-text {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary-aa);
  line-height: 1.5;
  flex: 1 1 200px;
  min-width: 0;
}

/* 输入框上方 chips 行（§3.2 / C3） */
.chips-row {
  display: flex;
  gap: var(--space-8);
  overflow-x: auto;
  padding: 0 var(--space-16) var(--space-8);
  scrollbar-width: none;
}
.chips-row::-webkit-scrollbar { display: none; }
.chips-row[hidden] { display: none !important; }

/* ==========================================================================
   10. Tab 导航（§3.10）
   ========================================================================== */
/* Tab 外层容器 */
.tabs-wrap { padding: var(--space-12) var(--space-16) 0; }

/* 变体 A · 桌面侧栏 pill */
.resume-tabs {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
}
.tab {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 var(--space-12);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.tab:hover { background: var(--color-surface); color: var(--color-text-primary); }
.tab:focus-visible { box-shadow: var(--ring-focus); }
.tab.is-active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
}

/* 变体 B · 移动顶部下划线（由 responsive.css 切换到此形态） */
.resume-tabs--underline {
  gap: 0;
  padding: 0 var(--space-4);
  background: transparent;
  border-radius: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.resume-tabs--underline::-webkit-scrollbar { display: none; }
.resume-tabs--underline .tab {
  height: 44px;
  min-width: 64px;
  padding: 0 var(--space-12);
  border-radius: 0;
  color: var(--color-text-tertiary-aa);
  position: relative;
}
.resume-tabs--underline .tab.is-active {
  background: transparent;
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
}
.resume-tabs--underline .tab.is-active::after {
  content: '';
  position: absolute;
  left: var(--space-12); right: var(--space-12); bottom: 0;
  height: 2px;
  background: var(--color-accent);          /* accent 白名单 ⑤选中态 */
  border-radius: 1px;
}

/* ==========================================================================
   11. 简历时间线项（§3.11）
   ========================================================================== */
.panel-section[hidden] { display: none !important; }
.panel-section { animation: fade-up var(--dur-base) var(--ease-out) both; }

.section-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-12);
  line-height: var(--lh-snug);
}

.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item {
  position: relative;
  padding-left: var(--space-24);
  padding-bottom: var(--space-24);
  scroll-margin-top: var(--space-16);
}
.tl-item::before {
  content: '';
  position: absolute;
  left: 5px; top: 14px; bottom: 0;
  width: 1px;
  background: var(--color-border);
}
.tl-item:last-child::before { display: none; }
.tl-item::after {
  content: '';
  position: absolute;
  left: 1px; top: 6px;
  width: 9px; height: 9px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1.5px solid var(--color-gray-7);
}
.tl-item.is-highlight::after {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.tl-company {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
}
.tl-role {
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-list);
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.tl-time {
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  color: var(--color-text-tertiary-aa);   /* 4.83:1 ✅ */
  margin-top: 2px;
}
.tl-points {
  margin: var(--space-8) 0 0;
  padding-left: var(--space-16);
}
.tl-points li {
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-list);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.tl-points li::marker { color: var(--color-gray-7); }
.tl-points li:last-child { margin-bottom: 0; }

/* 联动高亮（来源标签跳转，2s 后淡出） */
.is-flash {
  background: var(--color-accent-tint);
  border-radius: var(--radius-sm);
  padding: var(--space-8) var(--space-12) !important;
  margin-left: calc(var(--space-12) * -1);
  transition: background-color var(--dur-base) var(--ease-out);
}

/* 项目卡 */
.project {
  padding-bottom: var(--space-20);
  margin-bottom: var(--space-20);
  border-bottom: 1px solid var(--color-border);
}
.project:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.project-name {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
.project-meta {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary-aa);
  margin-top: 2px;
}
.project-block { margin-top: var(--space-8); }
.project-block-label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-tertiary-aa);
  margin-bottom: var(--space-4);
}
.project-block p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--lh-list);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   12. 技能标签（§3.12）
   ========================================================================== */
.skill-group { margin-bottom: var(--space-16); }
.skill-group:last-child { margin-bottom: 0; }
.skill-group-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-tertiary-aa);
  letter-spacing: var(--tracking-normal);
  margin-bottom: var(--space-8);
  line-height: var(--lh-snug);
}
.skill-tags { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.skill-tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  background: var(--color-bg-subtle);
  border: none;                             /* 与 chip 区分：chip 有边、标签无边 */
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-text-secondary);       /* 5.53:1 ✅ */
}
@media (hover: hover) {
  .skill-tag { transition: background-color var(--dur-fast) var(--ease-out); }
  .skill-tag:hover { background: var(--color-fill-hover); }
}

/* ==========================================================================
   13. 数字指标卡（§3.13）
   ========================================================================== */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin: var(--space-16) 0 var(--space-24);
}
.metric {
  background: var(--color-bg-subtle);
  border: none;
  box-shadow: none;
  border-radius: var(--radius-md);
  padding: var(--space-12);
}
.metric-value {
  font-family: var(--font-en);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
}
.metric-unit {
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text-secondary);
  margin-left: 2px;
}
.metric-label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-tertiary-aa);
  margin-top: var(--space-2);
  line-height: var(--lh-snug);
}

/* ==========================================================================
   14. Toast（§3.14）
   ========================================================================== */
.toast-host {
  position: fixed;
  right: var(--space-24);
  bottom: var(--space-24);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: min(360px, calc(100vw - 32px));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);          /* 唯一允许的浮层阴影 */
  padding: var(--space-12) var(--space-16);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-list);
  color: var(--color-text-primary);
  pointer-events: auto;
  animation: fade-up var(--dur-base) var(--ease-out) both;
}
.toast.is-leaving {
  animation: fade-up 180ms var(--ease-out) reverse both;
}
.toast .icon { flex: none; }
.toast--success .icon { color: var(--color-success); }
.toast--warning .icon { color: var(--color-warning); }
.toast--error   .icon { color: var(--color-danger); }
.toast--info    .icon { color: var(--color-text-secondary); }
.toast-text { flex: 1; }
.toast-action {
  background: none;
  border: none;
  padding: 0;
  margin-left: var(--space-12);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  font-family: inherit;
  color: var(--color-accent-on-tint);       /* 7.93:1 on #FFF ✅ */
  white-space: nowrap;
}
.toast-action:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   15. 思考指示器（§3.15）
   ========================================================================== */
.thinking {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  max-width: 200px;
  padding: var(--space-16) var(--space-20);
  padding-left: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
}
.thinking::before {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 2px;
  background: var(--color-accent);
  border-radius: 1px;
}
.thinking-text {
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  color: var(--color-text-tertiary-aa);
  margin-left: var(--space-8);
  line-height: var(--lh-snug);
}

/* 骨架（首屏简历加载，纯色 + 呼吸，无渐变） */
.skeleton-lines { display: flex; flex-direction: column; gap: 10px; }
.skeleton-lines .skeleton { height: 14px; }

/* ==========================================================================
   名片区（B 组模块）
   ========================================================================== */
.brand-card { padding: var(--space-24) var(--space-24) var(--space-16); }
.brand-top { display: flex; gap: var(--space-16); align-items: flex-start; }
.avatar {
  width: var(--avatar-lg); height: var(--avatar-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-avatar-border);
  object-fit: cover;
  object-position: 50% 18%;   /* 证件照为竖幅，裁切时保住脸部 */
  flex: none;
  background: var(--color-bg-subtle);
}
.avatar-sm { width: var(--avatar-sm); height: var(--avatar-sm); border-radius: var(--radius-sm); }

.wordmark {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
}
.wordmark-en {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  color: var(--color-text-tertiary-aa);
  letter-spacing: var(--tracking-normal);
  margin-top: 2px;
}
.tagline {
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-list);
  color: var(--color-text-secondary);
  margin-top: var(--space-8);
}
.brand-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}
.status-dot {
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--color-success);
  flex: none;
}

.brand-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-16);
}
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 32px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.brand-link:hover { background: var(--color-fill-hover); color: var(--color-text-primary); text-decoration: none; }
.brand-link:focus-visible { box-shadow: var(--ring-focus); }

.panel-divider { height: 1px; background: var(--color-border); border: 0; margin: 0; }

.brand-actions { padding: var(--space-16) var(--space-24) var(--space-24); }
.brand-actions .btn { font-size: var(--text-sm); }

/* 简历内容区 */
.panel-content { padding: var(--space-16) var(--space-24) var(--space-48); }
.panel-content .panel-section + .panel-section { margin-top: var(--space-24); }

/* 基本信息 / 联系方式 */
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li {
  display: flex;
  gap: var(--space-12);
  font-size: var(--text-sm);
  line-height: var(--lh-list);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
}
.info-list li:last-child { border-bottom: none; }
.info-key {
  flex: none;
  width: 56px;
  color: var(--color-text-tertiary-aa);
}
.info-val { color: var(--color-text-primary); }
.info-val.is-muted { color: var(--color-text-secondary); }

.summary-text {
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  margin: 0;
}

.edu-item { padding-bottom: var(--space-16); margin-bottom: var(--space-16); border-bottom: 1px solid var(--color-border); }
.edu-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.edu-school { font-size: var(--text-base); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.edu-major { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 2px; line-height: var(--lh-list); }
.edu-time { font-size: var(--text-xs); color: var(--color-text-tertiary-aa); margin-top: 2px; }

/* ==========================================================================
   对话工具条 + 输入区
   ========================================================================== */
.chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: var(--z-base);
}
.chat-toolbar[hidden] { display: none !important; }

.composer-wrap {
  flex: none;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-12);
}
.composer-shell {
  width: 100%;
  max-width: var(--chat-max);
  margin: 0 auto;
  padding: 0 var(--space-16);
}
.composer {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.composer:hover { border-color: var(--color-gray-6); }
.composer.is-focused {
  border-color: var(--color-accent);
  box-shadow: var(--ring-focus);
}
.composer-textarea {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-md);          /* 16px 防 iOS 缩放 */
  line-height: var(--lh-list);
  color: var(--color-text-primary);
  resize: none;
  padding: 10px 0;
  max-height: 140px;
  overflow-y: auto;
}
.composer-textarea::placeholder { color: var(--color-text-placeholder); }
.composer-textarea:focus { outline: none; }
.composer-textarea:disabled { color: var(--color-text-disabled); }

.send-btn {
  width: 40px; height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.send-btn:hover:not(:disabled) { background: var(--color-accent-hover); }
.send-btn:active:not(:disabled) { background: var(--color-accent-active); transform: scale(.98); }
.send-btn:focus-visible { box-shadow: var(--ring-focus-strong); }
.send-btn:disabled {
  background: var(--color-bg-subtle);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.composer-hint {
  font-size: var(--text-2xs);
  font-weight: var(--fw-regular);
  color: var(--color-text-tertiary-aa);
  text-align: right;
  margin: var(--space-4) 0 0;
  min-height: 14px;
  line-height: var(--lh-snug);
}
.composer-bottom { padding-bottom: calc(var(--space-12) + var(--safe-bottom)); }

/* ==========================================================================
   移动顶部条 / 面板头部（≤1023 显示）
   ========================================================================== */
.topbar {
  flex: none;
  display: none;                    /* ≥1024 隐藏 */
  align-items: center;
  gap: var(--space-8);
  height: var(--header-h-mobile);
  padding: 0 var(--space-8);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-top: var(--safe-top);
  box-sizing: content-box;
}
.topbar-resume-btn {
  display: none;
  gap: var(--space-8);
  padding: 0 var(--space-12);
  width: auto;
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
}
.topbar-card {
  display: none;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: var(--space-8);
  height: 100%;
  padding: 0 var(--space-4);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  font-family: inherit;
}
.topbar-card:active { background: var(--color-fill-hover); }
.topbar-card:focus-visible { box-shadow: var(--ring-focus); }
.topbar-text { display: flex; flex-direction: column; min-width: 0; }
.topbar-name {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
}
.topbar-role {
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  color: var(--color-text-tertiary-aa);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bottom Sheet 把手 / 关闭按钮（仅 ≤767 显示） */
.panel-handle {
  display: none;
  width: 100%;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  align-items: center;
  justify-content: center;
}
.panel-handle::before {
  content: '';
  display: block;
  width: 36px; height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-gray-6);
}
.panel-close { display: none; }