/* === 07-utilities.css (原 user.css L1794-L2501,Section 11+11.5+12 工具类 + 体验增强 + 动画) === */

/* === Section 11 工具类 (原 L1794-L2316) === */

/* ========================================
   11. 工具类（.hidden, .toast, .image-viewer）
   ======================================== */

/* 模板内联样式迁移 */
.checkbox-sm { width: 16px; height: 16px; }
.iframe-fill { flex: 1; border: none; width: 100%; }
.hint-dim { color: var(--text-dim); font-size: 13px; }
.takeover-reason { color: var(--accent-orange); font-size: 12px; margin-bottom: 6px; }
.mr-8 { margin-right: 8px; }
.hint-sub { font-size: 12px; opacity: 0.6; }
.text-error-inline { color: var(--accent-red); }
.hint-sm { font-size: 12px; margin-top: 8px; }
.btn-upload-label { text-align: center; cursor: pointer; }

/* 附件预览 — P264 方向 B + B.1 打磨
   - 方向 B:从 .input-bar 独立子块 移入 .input-container 顶部,共享圆角边框背景
   - B.1 打磨:align-items: center 让图片/文件徽章视觉中线对齐 */
.input-container > .image-preview {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center;
  padding: 4px 4px 8px;
  border-bottom: none;
}
.image-preview.hidden { display: none; }
.preview-thumb {
  position: relative; width: 56px; height: 56px; border-radius: 12px;
  overflow: hidden; border: 1px solid var(--border-glass);
  background: var(--bg-card);
  flex-shrink: 0;
}
.preview-thumb.is-new { animation: previewIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes previewIn {
  from { opacity: 0; transform: translateY(10px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.preview-thumb.file-tag {
  width: auto; height: 56px; padding: 0 14px 0 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-main);
  background: var(--bg-code); border-radius: 12px;
}
.preview-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.preview-thumb .remove-btn {
  position: absolute; top: 4px; right: 4px; width: 18px; height: 18px;
  background: var(--shadow-overlay);
  color: var(--text-on-color); border-radius: 50%; border: 1px solid var(--bg-active);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer; transition: all 0.2s;
}
.preview-thumb .remove-btn:hover { background: var(--error-color); transform: scale(1.02); }
.file-tag .remove-btn { position: static; margin-left: 4px; background: transparent; }
/* 选中即上传:上传中压暗 + 底部细进度条;失败显示重试 */
.preview-thumb.is-uploading img, .preview-thumb.is-uploading > span { opacity: 0.55; }
.preview-thumb .upload-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--shadow-overlay);
}
.preview-thumb .upload-bar i {
  display: block; height: 100%; width: 0;
  background: var(--text-bright); transition: width 0.2s linear;
}
.preview-thumb.is-failed { border-color: var(--error-border-strong); }
.preview-thumb .upload-retry {
  position: absolute; inset: 0; border: 0; padding: 0;
  background: var(--shadow-overlay); color: var(--text-on-color);
  font-size: 12px; cursor: pointer;
}
.preview-thumb.file-tag .upload-retry { border-radius: inherit; }
.preview-thumb .remove-btn { z-index: 1; }
.preview-thumb.file-tag .remove-btn { position: relative; }
/* 用户上传图网格:固定列数,图片宽度自适应铺满
   ≤2 张 → 2 列,≥3 张 → 3 列;高度走 aspect-ratio 自动 */
.user-img-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin-bottom: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.user-img-grid[data-img-count="1"] {
  grid-template-columns: minmax(0, 1fr);
  max-width: 240px;
}
.user-img-grid[data-img-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.user-img-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--bg-active);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: zoom-in;
  display: block;
  min-width: 0;
}
@media (min-width: 768px) {
  .user-img-grid { max-width: 560px; }
}
.user-img-grid img:hover { transform: scale(1.03); border-color: var(--success-border); }
.user-file-tags {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; justify-content: flex-end;
}
.file-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; background: var(--bg-subtle);
  border: 1px solid var(--border-glass);
  border-radius: 8px; font-size: 12px; color: var(--text-secondary);
  transition: all 0.2s; cursor: pointer;
}
.file-badge::before {
  content: ''; width: 6px; height: 6px;
  /* P414 复核补漏:删 0 0 8px glow */
  background: var(--success-color); border-radius: 50%;
}
.file-badge:hover { background: var(--border-glass); color: var(--text-main); border-color: var(--border-light); }

/* ── 底栏 · 输入区域（P183 Part 2 — 金色 focus 光晕 + 金色发送按钮）── */
.input-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  /* P217: max() 而非 calc(+) — Safari 中 env() 为 0 时走 24px,
     PWA 全屏时走 home indicator 高度(~34px),避免两者叠加导致输入框离底边过远 */
  padding: 20px 24px; padding-bottom: max(24px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent 0%, var(--bg-base) 60%);
  max-width: 100vw; z-index: 60;
  pointer-events: none;
}
.input-bar > * { pointer-events: auto; }
.input-container {
  /* P264 方向 B:column 布局 — 顶部是附件预览区(可选),底部是输入行 */
  display: flex; flex-direction: column; align-items: stretch;
  max-width: 840px; margin: 0 auto;
  background: var(--bg-layer-1);
  border: 1px solid var(--border-light);
  border-radius: 24px;
  padding: 8px;
  transition: all var(--transit-normal);
  box-shadow: var(--shadow-ambient);
}
.input-container > .input-row {
  display: flex; align-items: flex-end; gap: 0;
}
.input-container:focus-within {
  border-color: var(--brand-border);
  background: var(--bg-surface);
  /* P413 扁平化:focus ring 保留(功能反馈),去 shadow-ambient 第二层装饰 */
  box-shadow: 0 0 0 2px var(--brand-bg);
}
.input-container.drag-over {
  border-color: var(--brand-border);
  background: var(--brand-bg-light);
  box-shadow: 0 0 0 3px var(--brand-border);
}
.input-container.drag-over * { pointer-events: none; }
.upload-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  color: var(--text-muted); cursor: pointer;
  border-radius: 50%;
  transition: all var(--transit-fast);
}
.upload-btn:hover { color: var(--text-bright); background: var(--bg-hover); }
.upload-btn:active svg { transform: scale(0.9); }
.upload-btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform var(--transit-fast); }
.input-wrapper { flex: 1; padding: 0 8px; display: flex; align-items: center; }

/* @ 提及助手 dropdown — fixed 定位，避免被 input-bar overflow:hidden 裁剪 */
.mention-dropdown {
  position: fixed;
  max-height: 220px; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: 14px;
  /* P413 扁平化:2 层(浮层柔影 + 1px 描边线)→ 单层柔影,边框靠真 border:1px */
  box-shadow: var(--shadow-ambient);
  z-index: 200;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mention-dropdown::-webkit-scrollbar { width: 4px; }
.mention-dropdown::-webkit-scrollbar-thumb { background: var(--bg-active); border-radius: 2px; }
.mention-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; cursor: pointer;
  transition: background 0.15s;
}
.mention-item:hover, .mention-item.active {
  background: var(--border-glass);
}
.mention-item:first-child { border-radius: 14px 14px 0 0; }
.mention-item:last-child { border-radius: 0 0 14px 14px; }
.mention-item:only-child { border-radius: 14px; }
.mention-name { color: var(--text-main); font-size: 14px; font-weight: 500; }
.mention-desc { color: var(--text-dim); font-size: 12px; flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) {
  .mention-dropdown { border-radius: 12px 12px 0 0; left: 0 !important; right: 0 !important; width: 100vw !important; max-height: 40vh; }
  .mention-item { padding: 13px 18px; }
  .mention-name { font-size: 15px; }
  .mention-desc { font-size: 13px; }
}
.input-bar textarea {
  width: 100%; background: transparent; border: none; color: var(--text-bright);
  font-size: 15px; padding: 10px 0; line-height: 1.5;
  max-height: 160px; min-height: 24px; outline: none; resize: none;
  font-family: inherit; display: block;
  -webkit-appearance: none; appearance: none; overflow-y: auto;
  scrollbar-width: none;
}
.input-bar textarea::-webkit-scrollbar { display: none; }
.input-bar textarea::placeholder { color: var(--text-dim); font-weight: 400; }

/* 发送按钮 — 独立发送语义(P417:不复用全局 CTA,避免影响新建/保存/确认) */
#btn-send {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--send-bg);
  color: var(--send-text);
  border: none; cursor: pointer;
  transition: all var(--transit-normal);
}
#btn-send:hover {
  background: var(--send-bg-hover);
  transform: scale(1.02);
}
#btn-send:active { transform: scale(0.95); }
#btn-send:disabled {
  background: var(--bg-layer-1); color: var(--text-dim);
  cursor: not-allowed; transform: none;
}
#btn-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; }

/* ── AI 地点卡片（P242 升级 — 照片 + 评分 + 电话 + 按钮 + 来源徽章）── */
.place-scroll {
  display: flex; gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}
.place-scroll::-webkit-scrollbar { height: 4px; }
.place-scroll::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 2px; }

.place-card {
  position: relative;
  flex: 0 0 260px;
  scroll-snap-align: start;
  background: var(--bg-layer-1);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: background var(--transit-fast), border-color var(--transit-fast), transform var(--transit-fast);
}
.place-card:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-light);
  transform: translateY(-1px);
}
.place-source {
  position: absolute; top: 8px; right: 8px;
  padding: 2px 8px;
  font-size: 10px; font-weight: 600;
  border-radius: 999px;
  z-index: 2;
  letter-spacing: 0.3px;
}
.place-source.src-google { color: #4285F4; background: rgba(255, 255, 255, 0.92); }
.place-source.src-amap { color: #00A0E8; background: rgba(255, 255, 255, 0.92); }

.place-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-hover);
  overflow: hidden;
}
.place-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.place-photo-empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--text-muted); opacity: 0.4;
}

.place-body {
  padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.place-name {
  font-size: 15px; font-weight: 600;
  color: var(--text-bright);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.place-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 12px;
  align-items: center;
}
.place-rating {
  font-weight: 500;
  color: var(--warning-color);
  display: inline-flex; align-items: center; gap: 3px;
}
.place-rating em { color: var(--text-muted); font-style: normal; font-weight: 400; }
.place-open { color: var(--success-color); font-weight: 500; }
.place-closed { color: var(--error-color); font-weight: 500; }
.place-addr {
  font-size: 12px;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  min-height: 2.8em;    /* 固定 2 行高度，保证多卡片按钮对齐 */
}
.place-phone {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.place-actions {
  margin-top: 6px;
  display: flex; gap: 8px;
}
.place-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 12px; font-weight: 500;
  text-align: center;
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--transit-fast), color var(--transit-fast);
  cursor: pointer;
  border: 1px solid var(--border-glass);
  color: var(--text-bright);
  background: var(--bg-hover);
}
.place-btn:hover { background: var(--bg-surface-hover); border-color: var(--border-light); }
.place-btn.primary {
  background: var(--bg-cta-primary);
  color: var(--text-on-color);
  border-color: transparent;
}
.place-btn.primary:hover { background: var(--bg-cta-primary-hover); }

@media (max-width: 768px) {
  .place-card {
    flex-basis: min(260px, calc(100vw - 64px));
  }
  .place-scroll {
    padding-bottom: 10px;
  }
}

/* ── AI 导航卡片（P242 新增）── */
.direction-card {
  margin: 8px 0;
  padding: 14px 16px;
  background: var(--bg-layer-1);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 420px;
}
.direction-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.direction-mode { font-size: 22px; line-height: 1; }
.direction-stats {
  flex: 1;
  font-size: 14px;
  color: var(--text-bright);
}
.direction-stats b {
  font-size: 17px; font-weight: 600;
  color: var(--text-bright);
  margin-right: 2px;
}
.direction-head .place-source { position: static; }
.direction-dest {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.direction-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 2px;
}
.dir-btn {
  flex: 1 1 auto;
  min-width: 110px;
  padding: 8px 14px;
  font-size: 12px; font-weight: 500;
  text-align: center;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--border-glass);
  color: var(--text-bright);
  background: var(--bg-hover);
  transition: background var(--transit-fast);
}
.dir-btn:hover { background: var(--bg-surface-hover); border-color: var(--border-light); }
.dir-btn.primary {
  background: var(--bg-cta-primary);
  color: var(--text-on-color);
  border-color: transparent;
}
.dir-btn.primary:hover { background: var(--bg-cta-primary-hover); }

.error-text { color: var(--error-color); margin-top: 8px; }

/* ── 错误气泡（P183 Part 2 — 暗底对比优化红）── */
.error-bubble {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin: 12px 0;
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: 12px;
  color: var(--error-text);
  font-size: 14px; line-height: 1.5;
  max-width: 100%;
  animation: fadeIn 0.3s ease-out both;
}
.error-icon {
  display: flex; align-items: center;
  flex-shrink: 0;
  color: var(--error-text);
}
.error-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn-retry {
  margin-left: auto;
  padding: 6px 12px;
  min-height: 32px;
  background: var(--error-bg-strong);
  border: none;
  color: var(--error-text);
  cursor: pointer;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
  transition: background var(--transit-fast), transform var(--transit-fast);
}
.btn-retry:hover { background: var(--error-border-strong); }
.btn-retry:active { transform: scale(0.95); }
.btn-retry svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── AI 图片画廊:正文没放的工具图片。单张按原比例完整显示;
   两张起两列 4:3 格子(裁边,点开看原图),单数时第一张通栏 ── */
.ai-image-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 720px;
}
.ai-image-gallery.is-single { grid-template-columns: minmax(0, 1fr); }
.ai-image-frame {
  display: block;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-layer-1);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color var(--transit-normal), opacity var(--transit-normal);
}
.ai-image-frame:hover { border-color: var(--border-light); }
.ai-image-frame:active { opacity: 0.86; }
.ai-image-frame.is-lead { grid-column: 1 / -1; }
.ai-image-gallery .ai-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  border-radius: 0;
  margin: 0;
}
.ai-image-gallery.is-single .ai-image-frame { aspect-ratio: auto; border-radius: var(--radius-md); }
.ai-image-gallery.is-single .ai-img { height: auto; }

/* Toast — 轻盈反馈条:磨砂底 + 品牌色细边,只给反馈感不抢注意力(P602 重做)。
   旧版是实心彩色块(默认 info=青色,非品牌),改为磨砂浮层 + 左侧色边区分语义。 */
.toast {
  position: fixed; bottom: calc(80px + env(safe-area-inset-bottom));
  left: 20px; right: 20px; z-index: 9999;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
  border-left: 3px solid var(--brand-primary);
  background: color-mix(in srgb, var(--bg-floating) 90%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  color: var(--text-main);
  font-size: 14px; line-height: 1.45;
  text-align: left;
  box-shadow: var(--shadow-ambient);
  animation: slideUp .3s ease;
}
/* 语义只用左侧色边区分,正文保持磨砂浅底(不再是整块实心色) */
.toast.success { border-left-color: var(--success-color); }
.toast.error { border-left-color: var(--error-color); }
.toast.info { border-left-color: var(--brand-primary); }


/* === Section 11.5 P182 Phase A 体验增强 (原 L2317-L2490) === */

/* ========================================
   11.5 P182 Phase A — 体验增强
   （抬头 / 工具小视窗附加 / 空状态 / hover 操作 / 回到最新 / 顶栏模型）
   视觉以功能为先，设计细节留给后续 XHTML 协作
   ======================================== */

/* ── 空状态激活版（P183 Part 2 重新设计）── */
.empty-state-active {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 64px 24px;
  max-width: 640px; margin: auto;
  animation: fadeIn 0.4s ease-out both;
}
.empty-state-avatar {
  width: 64px; height: 64px;
  border-radius: 20px;
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-primary);
  margin-bottom: 24px;
}
.empty-state-avatar svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.empty-state-name {
  font-size: 24px; font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}
.empty-state-desc {
  font-size: 14px; color: var(--text-muted);
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 32px;
}
.empty-state-skills {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  align-items: center;
  max-width: 600px;
}
.empty-state-skills-label {
  font-size: 12px; font-weight: 500;
  color: var(--text-dim);
  display: flex; align-items: center; gap: 4px;
  margin-right: 8px;
  letter-spacing: 0.3px;
}
/* 技能胶囊（JS 渲染时可用 .skill-tag 作为子元素） */
.empty-state-skills .skill-tag {
  font-size: 12px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: var(--bg-layer-1);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  transition: all var(--transit-fast);
}
.empty-state-skills .skill-tag:hover {
  background: var(--bg-hover);
  color: var(--text-main);
  border-color: var(--border-glass);
}
.empty-state-hint {
  font-size: 13px; color: var(--text-dim);
  margin-top: 8px;
}

/* ── 消息 hover 操作条(P433:只用户气泡保留,AI 侧改为底部常显 footer 见 05-messages.css)── */
.msg-hover-actions {
  position: absolute;
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  box-shadow: var(--shadow-ambient);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  z-index: 5;
}
.msg-user .msg-hover-actions {
  right: 0;
  /* 贴气泡右下、外溢量 = --space-4(16px)。不变量:必须 ≤ .msg-user 的下边距(--space-5,20px),
     否则会探进下一轮 AI 回复(历史 -42px 正是越界才撞 AI 抬头)。content-visibility 已移除,无需 -42 外露。 */
  bottom: calc(-1 * var(--space-4));
}
/* 有鼠标设备:hover 显形(触屏没有可靠 hover,改走下方 .actions-open,由 message-actions.js 切换) */
@media (hover: hover) {
  .msg-user:hover .msg-hover-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}
/* 触屏设备:点气泡 → .actions-open 显形 */
.msg-user.actions-open .msg-hover-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.msg-action {
  width: 26px; height: 26px;
  border: none; background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.msg-action:hover { background: var(--bg-surface-hover); color: var(--text-bright); }
.msg-action svg { width: 14px; height: 14px; }

/* ── 回到最新 浮动按钮（P183 Part 2 — 居中胶囊 + 金色 hover）── */
.scroll-to-latest {
  position: absolute;
  bottom: calc(var(--chat-input-height, 88px) + 12px);  /* 停在输入栏上方(高度由 ScrollStability 实测);手机另见 11-mobile */
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  min-height: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  color: var(--text-bright);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-ambient);
  transition: opacity var(--transit-slow), transform var(--transit-slow), background var(--transit-normal), border-color var(--transit-normal);
  z-index: 55;
  animation: fadeIn 0.2s ease;
}
.scroll-to-latest svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 2;
}
.scroll-to-latest:hover {
  background: var(--bg-surface-hover);
  border-color: var(--brand-border);
  transform: translateX(-50%) translateY(-2px);
}
.scroll-to-latest.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
}

/* P409:.topbar-title-wrap 样式归 18-topic-switcher.css 单一管控。
   #chat-agent-model 节点保留(chat.js 写入点)但 display:none */


/* === Section 12 动画 @keyframes (原 L2491-L2501) === */

/* ========================================
   12. 动画（@keyframes）
   ======================================== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blink {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.1); }
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }