/*
---
generated_by: GLM-5.3 (ZCode agent, Reflect experience v2 Task 7)
date: 2026-09-14
core_logic: Reflect 聊天空间视觉换装（V4b）——#page-reflect 内部：对话列（弃桌面浮起白卡，回归居中纸面阅读列）、问候区（衬线标题 + rust 圆点记号）、starter 纸药丸（mono 触控外扩 ≥44px）、历史气泡（精灵=纸底细边左下收角 / 用户=苔绿实底右下收角，对齐+边缘形态+底色三重可区分）、S4–S7 系统墙纸卡化、composer 纸卡（输入框+发送键命中区 ≥44px，rust 留给发送 hover）、内联错误行陶锈化、S8 骨架纸色静止化（禁 infinite 脉冲）、#tips-marquee 纸面覆盖。行为零变化：全部 id、data-* 属性、事件接线、流式滚动契约原样，仅类名与样式换装；令牌一律取 styles/tokens.css，不在本档覆写。
test_record: node --check app.js 绿；Playwright 2 lang(en/zh-CN) × 2 viewport(390×844/1280×900) × #/reflect 空态+诚实失败态矩阵截图（docs/reflect/ui-shots/v2-reflect/）+ DOM 断言（scrollWidth≤clientWidth、composer 输入框/发送键命中区 ≥44px、禁串零命中、内部 CRM 词汇零命中）+ #/ #/cards 回归对比无塌陷（2026-09-14，详见 task-7-report）。
recent_changes:
  - 2026-09-14: 初版——对话列/问候/starter/气泡/系统墙/composer/错误行/骨架/tips 条纸感换装。
  - 2026-10-07: v3.4（PR-E）——删 emptySub 导语与 reflect-greet-sub/-promise/-source 三规则；
    空态新增 172px 圆形版画 .reflect-pond（home-pond+内圈线框）；reflectSourceNote 下移星盘页
    （chart.css .chart-source-note）；#tips-marquee 纸面覆盖块随跑马灯整链删除；塔罗芯片
    .reflect-chip-icon 小牌形图标。
---
*/

/* ================= 对话列容器（原 flex+Tailwind 浮起白卡；弃白卡，透明纸面居中列） ================= */
.reflect-chat {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .reflect-chat {
    margin-top: var(--reflect-space-24);
    margin-bottom: var(--reflect-space-24);
  }
}

/* ================= 对话滚动区（原 px-4 py-3；流式 scrollTop 直写，不加 smooth） ================= */
.reflect-chat-scroll {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  padding: var(--reflect-space-16);
  padding-top: var(--reflect-space-12);
}

/* ================= S8 骨架（原 animate-pulse 无限脉冲 → 纸色静止条，GC 禁 infinite） =================
   2026-10-07 ▲13 拍板补丁：GC「禁 infinite」=禁快速脉冲/漂浮；允许「周期长（H3 ≥4.5s 档族，
   R1/S1/Y2 按规格点名单）、离视口即停、只动 transform/opacity」的环境动效（见文末 PR-G 段）。 */
.reflect-skeleton {
  padding-top: var(--reflect-space-24);
}
.reflect-skeleton-line {
  height: 16px;
  border-radius: var(--reflect-radius-sm);
  background: var(--reflect-paper-deep);
}
.reflect-skeleton-line:first-child { width: 74%; }
.reflect-skeleton-line + .reflect-skeleton-line {
  width: 52%;
  margin-top: var(--reflect-space-12);
}

/* ================= S0 问候区（衬线标题 + 静止 rust 圆点记号；一次性入场 280ms） ================= */
.reflect-greet {
  display: flex; /* hidden 显隐由 head 内 #empty-state[hidden] !important 规则兜住 */
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 12vh;
  animation: reflect-greet-in .28s var(--reflect-ease) both;
}
@keyframes reflect-greet-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.reflect-greet-title {
  margin: 0;
  font-family: var(--reflect-serif);
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--reflect-ink);
}
/* rust 圆点记号：与五键底栏当前态同语言（静止，无脉冲） */
.reflect-greet-title::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 0 auto var(--reflect-space-16);
  border: 1px solid var(--reflect-rust);
  border-radius: 50%;
  background: var(--reflect-rust);
  transform: scale(.78);
}
/* v3.4（PR-E）空态插画位 R1：172px 圆形版画 home-pond（水面=映照）——圆形 + 内圈线框，
   沿用 you-tree 圆形角图的做法；纯装饰随空态整体显隐，不占身份与控制项空间 */
.reflect-pond {
  flex: none;
  width: 172px;
  height: 172px;
  margin: 0 0 var(--reflect-space-16);
  border: 1px solid var(--reflect-ink);
  border-radius: 50%;
  position: relative;
}
.reflect-pond img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.reflect-pond::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--reflect-ink);
  border-radius: 50%;
  pointer-events: none;
}
/* v3.4（PR-E）：emptySub 导语删除（与输入框占位同义重复）；reflect-greet-source 诚实注
   下移星盘页底注（chart.css .chart-source-note）——两条旧规则随之退役移除 */
/* 回指行/出生落键提示：纸片化（覆盖 head 内白卡版；点亮逻辑归 reflect-greeting.js/shell.js 不变） */
.reflect-echo {
  margin: var(--reflect-space-16) 0 0;
  padding: 10px 16px;
  border: 1px solid var(--reflect-hairline);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-paper-wash);
  font-size: 13px;
  line-height: 20px;
  color: var(--reflect-ink-soft);
  text-align: center;
}
.reflect-echo[hidden] { display: none !important; }

/* ================= 历史气泡列（原 gap-3） ================= */
.reflect-log {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-12);
}

/* === 气泡：纸感；用户/精灵靠 对齐+收角形态+底色 三重区分（不只靠颜色） ===
   精灵=纸底细边、左下角收平（贴左）；用户=苔绿实底、右下角收平（贴右）。一次性入场 220ms。 */
.reflect-bubble {
  max-width: 85%;
  padding: 10px 16px;
  font-size: 16px;          /* GC#6：正文手机 ≥16px */
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  animation: reflect-bubble-in .22s var(--reflect-ease) both;
}
@keyframes reflect-bubble-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.reflect-bubble--user {
  align-self: flex-end;
  background: var(--reflect-moss);
  color: var(--reflect-paper-light);
  border-radius: var(--reflect-radius-lg) var(--reflect-radius-lg) var(--reflect-radius-sm) var(--reflect-radius-lg);
}
.reflect-bubble--assistant {
  align-self: flex-start;
  background: var(--reflect-paper-light);
  border: 1px solid var(--reflect-hairline);
  color: var(--reflect-ink);
  border-radius: var(--reflect-radius-lg) var(--reflect-radius-lg) var(--reflect-radius-lg) var(--reflect-radius-sm);
}
/* 流式等待三点（.dotting 动画在 head 内联块，禁 infinite 规则不溯既有；此处只换墨色） */
.reflect-dotting { color: var(--reflect-ink-soft); }

/* ================= S7 内联错误行 + 重试（红 → 陶锈；命中区 ≥44px） ================= */
.reflect-error-row {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: var(--reflect-space-8);
  font-size: 12px;          /* GC#6：辅助文字 ≥12px */
  line-height: 1.5;
  color: var(--reflect-rust);
}
.reflect-retry {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--reflect-space-12);
  border: 0;
  border-radius: var(--reflect-radius-md);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--reflect-rust);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: background .16s var(--reflect-ease);
}
.reflect-retry:hover { background: var(--reflect-rust-wash); }
.reflect-retry:focus-visible {
  outline: 2px solid var(--reflect-rust);
  outline-offset: 1px;
}

/* ================= S4–S7 系统墙（原白卡 indigo → 细线纸卡 + 苔绿主键） ================= */
.reflect-wall {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  flex-shrink: 0;
  padding: 0 var(--reflect-space-16) var(--reflect-space-8);
}
.reflect-wall[hidden] { display: none !important; } /* 防作者 display 压过 UA [hidden]（同 shell.css 先例） */
.reflect-wall-card {
  padding: var(--reflect-space-16);
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-lg);
  background: var(--reflect-paper-light);
  box-shadow: var(--reflect-shadow-flat);
}
.reflect-wall-title {
  margin: 0;
  font-family: var(--reflect-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--reflect-ink);
}
.reflect-wall-body {
  margin: var(--reflect-space-4) 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--reflect-ink-soft);
}
.reflect-wall-actions {
  margin-top: var(--reflect-space-12);
  display: flex;
  align-items: center;
  gap: var(--reflect-space-12);
}
.reflect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--reflect-space-8);
  min-height: 44px;
  padding: 0 var(--reflect-space-24);
  border: 0;
  border-radius: var(--reflect-radius-md);
  cursor: pointer;
  background: var(--reflect-moss);
  color: var(--reflect-paper-light);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  transition: background .18s var(--reflect-ease), opacity .18s var(--reflect-ease);
}
.reflect-btn:hover { background: #425847; } /* 深苔绿 hover（shell.css #menu-tier 同族衍生值，非令牌覆写） */
.reflect-btn:disabled { opacity: .55; cursor: default; }
.reflect-btn.is-busy { opacity: .8; } /* goSignIn 点击确认态（原 Tailwind opacity-80 换语义类） */
.reflect-btn:focus-visible {
  outline: 2px solid var(--reflect-rust);
  outline-offset: 2px;
}
.reflect-btn-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--reflect-space-8);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--reflect-ink-soft);
  transition: color .16s var(--reflect-ease);
}
.reflect-btn-ghost:hover { color: var(--reflect-ink); }
.reflect-btn-ghost[hidden] { display: none !important; } /* Not now 链走 hidden 切换 */

/* ================= Composer 纸卡（输入框+发送键命中区 ≥44px；rust 留给发送 hover） ================= */
.reflect-composer {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  flex-shrink: 0;
  padding: var(--reflect-space-8) var(--reflect-space-16);
  padding-bottom: calc(var(--reflect-space-12) + env(safe-area-inset-bottom, 0px));
}
/* US-12 starter 芯片（原 indigo 药丸 → 细线纸药丸；命中区经 ::after 外扩 ≥44px） */
.reflect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--reflect-space-8);
  padding-bottom: var(--reflect-space-8);
}
.reflect-chips[hidden] { display: none !important; } /* 对话开始即收（head 内规则同款兜底） */
.reflect-chip {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 14px;
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-pill);
  background: var(--reflect-paper-wash);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--reflect-ink-soft);
  transition: background .16s var(--reflect-ease), color .16s var(--reflect-ease), border-color .16s var(--reflect-ease);
}
.reflect-chip::after { content: ""; position: absolute; inset: -6px -4px; } /* 32px 视觉 → 44px 命中 */
.reflect-chip:hover {
  background: var(--reflect-moss-wash);
  border-color: var(--reflect-moss);
  color: var(--reflect-ink);
}
.reflect-chip:focus-visible {
  outline: 2px solid var(--reflect-rust);
  outline-offset: 2px;
}
/* 输入行纸卡：textarea 内嵌透明，焦点指示上移到卡框（moss 双环，对纸底 ≥3:1） */
.reflect-input-row {
  display: flex;
  align-items: flex-end;
  gap: var(--reflect-space-8);
  padding: var(--reflect-space-8);
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-lg);
  background: var(--reflect-paper-light);
  box-shadow: var(--reflect-shadow-flat);
  transition: border-color .18s var(--reflect-ease), box-shadow .18s var(--reflect-ease);
}
.reflect-input-row:focus-within {
  border-color: var(--reflect-moss);
  box-shadow: 0 0 0 2px rgba(82, 107, 86, .25);
}
.reflect-input {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 44px;         /* GC#7 命中区 */
  max-height: 128px;        /* 与 app.js 自动长高 Math.min(scrollHeight,128) 同值 */
  padding: 10px 12px;
  border: 0;
  background: transparent;
  resize: none;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--reflect-ink);
}
.reflect-input::placeholder { color: var(--reflect-ink-soft); opacity: .75; }
/* 提高特异性压过 base.css 的 body.reflect-app :focus-visible（(0,2,1)）：textarea 焦点指示
   由 .reflect-input-row:focus-within 的 moss 环承担（对纸底 ≈5.3:1 ≥3:1），避免 rust/moss 双指示 */
body.reflect-app .reflect-input:focus-visible { outline: none; }
.reflect-send {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;         /* GC#7 命中区 */
  padding: 0 var(--reflect-space-16);
  border: 0;
  border-radius: var(--reflect-radius-md);
  cursor: pointer;
  background: var(--reflect-night);
  color: var(--reflect-paper-light);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: background .18s var(--reflect-ease), opacity .18s var(--reflect-ease);
}
/* v3.4（PR-E）：塔罗芯片小牌形图标（内联 SVG，区分「打开抽牌」与「发一句话」） */
.reflect-chip-icon {
  flex: none;
  width: 13px;
  height: 17px;
  margin-right: 6px;
  color: currentColor;
}
.reflect-send:hover { background: var(--reflect-rust); } /* 关键 CTA hover 才用 rust */
.reflect-send:disabled { opacity: .5; cursor: not-allowed; }
.reflect-send:focus-visible {
  outline: 2px solid var(--reflect-rust);
  outline-offset: 2px;
}

/* #tips-marquee 纸面覆盖块已随 2026-10-07 v3.4（PR-E）跑马灯整链删除（端点+注入+样式三处同批退役） */

/* ================= PR-G 动效（R1 涟漪 / R2 发送编排 / R3 墙卡柔入；motion_spec §2，2026-10-07） =================
   R1：池塘涟漪=环境动效（▲13 点名放行四项之一，周期 4.8s ≥族门槛 4.5s——2026-10-08 R2 审计修自 3.6s；只动 transform/opacity，离视口摘 .m-on 即停）。
   R2：发送编排——问候/芯片 220ms 退场（app.js 挂类）→ 用户气泡右下弹入 300ms snap；
       三点等待 .dotting 既有；回复逐字=后端 SSE 流式本身（非流式整段随既有 bubble-in 淡入，
       ▲修订：逐字不设 24s 长尾——流式即自然节奏）。R3：墙卡每次显现柔入 320ms（纯 :not([hidden]) 触发）。 */
.m-ripples {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  z-index: 4;
  pointer-events: none;
}
.m-ripple {
  position: absolute;
  left: 50%;
  top: 66%;
  width: 120px;
  height: 34px;
  margin: -17px 0 0 -60px;
  border-radius: 50%;
  border: 1.2px solid rgba(248, 245, 237, .75);
  opacity: 0;
  transform: scale(.25);
}
.m-ripples.m-on .m-ripple { animation: m-ripple var(--m-ripple-dur) var(--m-ease-out) infinite; }
.m-ripples.m-on .m-ripple:nth-child(2) { animation-delay: 1.1s; }
@keyframes m-ripple {
  0% { opacity: 0; transform: scale(.25); }
  12% { opacity: .85; }
  100% { opacity: 0; transform: scale(1.25); }
}

.m-greet-out { animation: m-greet-out 220ms var(--m-ease-out) both; }
@keyframes m-greet-out { to { opacity: 0; transform: translateY(-6px); } }
.m-chips-out { animation: m-chips-out 220ms var(--m-ease-out) both; }
@keyframes m-chips-out { to { opacity: 0; transform: translateY(8px); } }
.reflect-bubble--user.m-sent {
  animation: m-sent 300ms var(--m-ease-snap) both;
  transform-origin: 100% 100%;
}
@keyframes m-sent {
  from { opacity: 0; transform: translateY(16px) scale(.94); }
  to { opacity: 1; transform: none; }
}

.reflect-wall:not([hidden]) .reflect-wall-card { animation: m-wall-in 320ms var(--m-ease-out) both; }
@keyframes m-wall-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}