/* THROWAWAY PROTOTYPE · 团团灵动形象原型 · 演示页样式（演示页负责）
   视觉全部用阳光玻璃变量（../2026-10-12-团团连贯原型/vendor/tokens.css，亮暗两套）；对话面板沿用同目录 css/panel.css 的 .tt-pn。
   这里只放演示页自己的东西：顶部演示控制条、「试试看」清单、模拟首页，以及对 .tt-pn 的定位与少量改写。
   几何：--demo-h 是控制条占的高度（收起后为 0，由 stage.js 按实测高度写回）；清单展开时首页内容整体右移，让出左下角，清单不压字。 */

:root {
  --demo-h: 44px;
  --try-w: 296px;
  --try-gap: 20px;
  --demo-ink: #1F1E1A;
  --demo-text: #F3F1EA;
  --demo-dim: rgb(243 241 234 / .64);
  --seat-top: #F6F1E4;
  --seat-bottom: #EDE5D1;
  --seat-cushion: rgb(201 143 0 / .16);
}
html[data-theme="dark"] {
  --demo-ink: #24231F;
  --seat-top: #2B2923;
  --seat-bottom: #22201B;
  --seat-cushion: rgb(254 186 10 / .10);
}

body { padding-top: var(--demo-h); padding-bottom: 0; transition: padding-top var(--m-smooth-t) var(--m-spring-smooth); }
.topbar { top: var(--demo-h); }

/* ═══════════ 演示控制条 ═══════════ */
.demo {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--b-z-bar);
  color: var(--demo-text); background: var(--demo-ink);
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / .07), 0 6px 20px -12px rgb(0 0 0 / .5);
  font: 500 12px/1 var(--b-font-sans);
  transition: transform var(--m-smooth-t) var(--m-spring-smooth);
}
html.is-demo-folded .demo { transform: translateY(-100%); }
.demo :focus-visible { outline: 2px solid var(--b-primary); outline-offset: 1px; box-shadow: none; }
.demo-in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; padding: 8px 10px 8px 14px; }
.demo-combo { display: flex; flex: none; align-items: center; gap: 8px; margin-right: 4px; white-space: nowrap; }
.demo-mark { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #242421; background: var(--b-primary); }
.demo-mark.is-stub { color: #242421; background: #F29B6B; cursor: help; }
.demo-combo b { font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--demo-text); }
.demo-controls { display: flex; flex: none; align-items: center; gap: 6px; }
.seg { display: inline-flex; padding: 2px; border-radius: 9px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); }
.seg button { height: 24px; padding: 0 8px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--demo-dim); white-space: nowrap;
  transition: background-color var(--m-snappy-t) var(--m-spring-snappy), color var(--m-snappy-t) var(--m-spring-snappy); }
.seg button:hover { color: var(--demo-text); }
.seg button[aria-pressed="true"] { font-weight: 600; color: #242421; background: #F2EFE6; box-shadow: 0 1px 2px rgb(0 0 0 / .35); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 0 8px; border-radius: 9px; font-size: 12px; color: var(--demo-dim); white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1);
  transition: background-color var(--m-snappy-t) var(--m-spring-snappy), color var(--m-snappy-t) var(--m-spring-snappy), box-shadow var(--m-snappy-t) var(--m-spring-snappy); }
.chip::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(243 241 234 / .45); }
.chip:hover { color: var(--demo-text); background: rgb(255 255 255 / .05); }
.chip[aria-pressed="true"] { color: var(--demo-text); background: rgb(254 186 10 / .13); box-shadow: inset 0 0 0 1px rgb(254 186 10 / .42); }
.chip[aria-pressed="true"]::before { background: var(--b-primary); box-shadow: 0 0 6px rgb(254 186 10 / .7); }
.demo-sep { flex: none; width: 1px; height: 20px; background: rgb(255 255 255 / .12); }
.demo-acts { display: flex; flex: none; align-items: center; gap: 1px; }
.demo-acts button { height: 28px; padding: 0 7px; border-radius: 8px; font-size: 12px; color: rgb(243 241 234 / .84); white-space: nowrap;
  transition: background-color var(--m-snappy-t) var(--m-spring-snappy), color var(--m-snappy-t) var(--m-spring-snappy); }
.demo-acts button:hover { color: #fff; background: rgb(255 255 255 / .08); }
.demo-acts button:active { background: rgb(255 255 255 / .14); }
.demo-acts button.is-fired { color: var(--b-primary); }
.demo-fold { display: grid; flex: none; place-items: center; width: 28px; height: 28px; margin-left: auto; border-radius: 8px; color: var(--demo-dim); }
.demo-fold:hover { color: var(--demo-text); background: rgb(255 255 255 / .08); }
.demo-fold svg, .demo-tab svg { width: 16px; height: 16px; stroke-width: 1.8; }
/* 收起后只剩一枚挂在顶边的小标签，写着当前组合 */
.demo-tab {
  position: absolute; top: 100%; left: 50%; translate: -50% -6px;
  display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px 0 6px; border-radius: 0 0 12px 12px;
  font: 500 12px/1 var(--b-font-sans); color: rgb(243 241 234 / .88); background: var(--demo-ink); white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgb(0 0 0 / .5); opacity: 0; pointer-events: none;
  transition: opacity var(--m-snappy-t) var(--m-ease-out), translate var(--m-smooth-t) var(--m-spring-smooth);
}
.demo-tab:hover { color: var(--demo-text); }
.demo-tab-mark { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #242421; background: var(--b-primary); }
html.is-demo-folded .demo-tab { opacity: 1; pointer-events: auto; translate: -50% 0; }

/* ═══════════ 模拟产品页 ═══════════ */
.night-clock { display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-right: var(--b-sp-1); padding: 0 10px 0 9px; border-radius: var(--b-radius-pill);
  font-size: var(--b-fs-13); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--b-text-2); background: var(--b-neutral-tint);
  animation: m-rise var(--m-smooth-t) var(--m-spring-smooth) both; }
.night-clock svg { width: 14px; height: 14px; stroke-width: 1.8; }
.user-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: var(--b-fs-13); font-weight: 600; color: var(--b-text-1);
  background: var(--b-bg-inset); box-shadow: inset 0 0 0 1px var(--b-line); }

/* 清单展开时，首页内容的左边让到清单右侧；收起后回到居中容器 */
.home { padding: 28px max(var(--b-margin), (100% - var(--b-container)) / 2) 120px; transition: padding-left var(--m-smooth-t) var(--m-spring-smooth); }
html.is-try-open .home { padding-left: max(var(--try-w) + var(--try-gap) + 28px, (100% - var(--b-container)) / 2); }
.home:focus { outline: none; }
.home-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--b-sp-6); }
.home-hello { min-width: 0; }
.home-title { margin-top: 4px; font-size: var(--b-fs-28); font-weight: 700; line-height: var(--b-lh-title); letter-spacing: var(--b-ls-title); }
.home-sub { margin-top: 6px; font-size: var(--b-fs-15); line-height: 1.6; color: var(--b-text-2); text-wrap: pretty; }
.home-facts { display: flex; flex: none; padding: 10px 4px; border-radius: var(--b-radius-inner); background: var(--b-bg-inset); }
.home-facts > div { padding: 0 18px; }
.home-facts > div + div { box-shadow: inset 1px 0 0 var(--b-line-strong); }
.home-facts dt { font-size: var(--b-fs-12); line-height: 1.4; color: var(--b-text-3); white-space: nowrap; }
.home-facts dd { margin-top: 2px; font-size: var(--b-fs-13); color: var(--b-text-3); white-space: nowrap; }
.home-facts dd b { font-size: var(--b-fs-20); font-weight: 700; color: var(--b-text-1); }

.home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: var(--b-sp-6); }
.home-card.card { padding: 22px 22px 14px; min-width: 0; }
.hc-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--b-sp-3); margin-bottom: 6px; }
.hc-title { font-size: var(--b-fs-17); font-weight: 700; line-height: 1.3; letter-spacing: var(--b-ls-title); }
.hc-meta { flex: none; font-size: var(--b-fs-12); color: var(--b-text-3); }
.acts li, .projs li, .msgs li { padding: 11px 0; box-shadow: inset 0 1px 0 var(--b-line); }
.acts li:first-child, .projs li:first-child, .msgs li:first-child { box-shadow: none; }
.acts li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--b-sp-3); align-items: start; }
.acts .idx { position: static; width: 24px; height: 24px; margin-top: 1px; }
.acts .idx-n { font-size: var(--b-fs-12); }
.acts .idx-ck { width: 13px; height: 13px; color: #fff; }
.acts b, .projs b { display: block; font-size: 14px; font-weight: 600; line-height: 1.45; text-wrap: pretty; }
.acts small, .projs small, .msgs small { display: block; margin-top: 2px; font-size: var(--b-fs-12); line-height: 1.45; color: var(--b-text-3); }
.acts .is-done b { color: var(--b-text-3); text-decoration: line-through; text-decoration-color: var(--b-line-strong); }
.pj-top { display: flex; align-items: center; justify-content: space-between; gap: var(--b-sp-2); }
.pj-top .tag { flex: none; height: 22px; }
.pj-bar { height: 4px; margin: 10px 0 7px; border-radius: 2px; background: var(--b-line); overflow: hidden; }
.pj-bar i { display: block; width: calc(var(--p) * 100%); height: 100%; border-radius: inherit; background: var(--b-text-1); }
.msgs li { position: relative; padding-left: 16px; }
.msgs li::before { content: ""; position: absolute; left: 1px; top: 19px; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--b-line-strong); }
.msgs li.is-unread::before { background: var(--b-text-1); box-shadow: none; }
.msgs p { font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.msgs li.is-new { animation: tt-msg-in var(--m-smooth-t) var(--m-spring-smooth) both; }
.msgs li.is-new p { animation: tt-flash 1.6s var(--m-ease-out) both; }
@keyframes tt-msg-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes tt-flash { 0%, 30% { background: var(--b-primary-tint); box-shadow: 0 0 0 4px var(--b-primary-tint); } 100% { background: transparent; box-shadow: 0 0 0 4px transparent; } }

/* ═══════════ 团团对话面板（.tt-pn 的定位与改写） ═══════════ */
.tt-stage-pn { right: 32px; bottom: 28px; width: var(--b-panel-w); height: min(var(--b-panel-h), calc(100vh - var(--demo-h) - var(--b-topbar-h) - 40px)); transform-origin: 100% 100%; }
.tt-stage-pn.is-in { animation: tt-pn-in 340ms var(--m-spring-smooth) both; }
.tt-stage-pn.is-out { animation: tt-pn-out 220ms var(--m-ease-out) both; }
@keyframes tt-pn-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tt-pn-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.97); } }
.tt-stage-pn .tt-pn-head { padding: 8px 4px 10px 8px; }
/* 座位：44px、圆角、裁切；空着时是一块带软垫的小凹位，团团跳进来只露头和肩 */
.tt-seat { position: relative; flex: none; width: var(--b-mascot-panel); height: var(--b-mascot-panel); border-radius: 14px; overflow: hidden; isolation: isolate;
  background: radial-gradient(72% 30% at 50% 100%, var(--seat-cushion) 0 96%, transparent 100%), linear-gradient(180deg, var(--seat-top), var(--seat-bottom));
  box-shadow: inset 0 0 0 1px var(--b-line), inset 0 2px 5px rgb(70 50 0 / .08); }
html[data-theme="dark"] .tt-seat { box-shadow: inset 0 0 0 1px var(--b-line), inset 0 2px 6px rgb(0 0 0 / .4); }
.tt-stage-pn .tt-pn-idrow strong { font-size: var(--b-fs-15); }
.tt-stage-pn .tt-pn-status { display: flex; align-items: center; gap: 6px; }
.tt-stage-pn .tt-pn-status[data-busy]::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--b-accent); animation: tt-pulse 1.2s ease-in-out infinite; }
@keyframes tt-pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: none; } }

.tt-stage-pn .tt-pn-scroll { padding: 18px 18px 16px 16px; }
.tt-stage-pn .tt-pn-flow { gap: 14px; }
.tt-stage-pn .tt-pn-msg { animation: m-rise var(--m-smooth-t) var(--m-spring-smooth) both; }
.tt-stage-pn .tt-pn-msg.is-tt { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.tt-msg-text { min-width: 0; }
.tt-msg-text p { white-space: pre-wrap; }
.tt-msg-text p + p { margin-top: 6px; }
.tt-pn-msg.is-writing .tt-msg-text p:last-child::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.16em; border-radius: 1px; background: var(--b-text-3); animation: tt-caret 1s steps(1) infinite; }
@keyframes tt-caret { 50% { opacity: 0; } }
.tt-pn-msg .dots { height: 25px; color: var(--b-text-3); }
.tt-pn-msg.is-error .tt-msg-text { color: var(--b-text-1); }
/* 头像：真头像是透明底的画布；退回静态图时裁出脸部，放进一个小圆角框 */
.tt-av { position: relative; width: 24px; height: 24px; margin-top: 2px; }
.tt-av canvas { display: block; width: 24px; height: 24px; }
.tt-av.is-static { border-radius: 8px; overflow: hidden; background: var(--b-bg-inset); box-shadow: inset 0 0 0 1px var(--b-line); }
.tt-av.is-static img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); transform-origin: 50% 24%; transition: transform var(--m-smooth-t) var(--m-spring-smooth), filter var(--m-smooth-t) linear; }
.tt-av.is-static[data-expr="think"] img { transform: scale(1.6) rotate(8deg); filter: saturate(.85); }
.tt-av.is-static[data-expr="happy"] img { transform: scale(1.75); }
.tt-av.is-static[data-expr="puzzled"] img { transform: scale(1.6) rotate(-10deg); }

.tt-stage-pn .tt-pn-composer { align-items: flex-end; padding: 5px 5px 5px 14px; }
.tt-stage-pn .tt-pn-input { height: 32px; min-height: 32px; max-height: 120px; padding: 5px 0; resize: none; overflow-y: auto; }

/* ═══════════ 「试试看」清单 ═══════════ */
.try {
  position: fixed; left: var(--try-gap); bottom: var(--try-gap); z-index: 35;
  display: flex; flex-direction: column; width: var(--try-w);
  max-height: calc(100vh - var(--demo-h) - var(--b-topbar-h) - var(--try-gap) * 2);
  border-radius: 16px; background: var(--b-bg-card); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--b-line), inset 0 1px 0 var(--b-card-edge), 0 1px 2px var(--b-card-shadow), 0 18px 40px -18px var(--b-card-shadow-far), 0 8px 16px -10px var(--b-card-shadow-far);
}
html[data-theme="dark"] .try { box-shadow: inset 0 0 0 1px var(--b-line-strong), 0 1px 2px var(--b-card-shadow), 0 18px 40px -18px var(--b-card-shadow-far); }
.try-head { display: flex; flex: none; align-items: center; gap: var(--b-sp-2); width: 100%; padding: 13px 12px 10px 16px; text-align: left; border-radius: 16px 16px 0 0; }
.try-head:focus-visible { outline-offset: -2px; box-shadow: none; }
.try-title { font-size: var(--b-fs-15); font-weight: 700; letter-spacing: var(--b-ls-title); }
.try-count { margin-left: auto; font-size: var(--b-fs-12); color: var(--b-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.try-count b { font-weight: 700; color: var(--b-text-1); }
.try-count.is-all, .try-count.is-all b { color: var(--b-ok); }
.try-count b.is-bump { display: inline-block; animation: m-pop var(--m-bouncy-t) var(--m-spring-bouncy) both; }
.try-chev { width: 16px; height: 16px; color: var(--b-text-3); transition: rotate var(--m-smooth-t) var(--m-spring-smooth); }
.try.is-folded .try-chev { rotate: 180deg; }
.try-meter { flex: none; height: 2px; margin: 0 16px 8px; border-radius: 2px; background: var(--b-line); overflow: hidden; }
.try-meter i { display: block; height: 100%; border-radius: inherit; background: var(--b-ok-fill); transform: scaleX(var(--n, 0)); transform-origin: 0 50%; transition: transform var(--m-smooth-t) var(--m-spring-smooth); }
.try.is-folded .try-meter { margin-bottom: 12px; }
.try-body { display: grid; grid-template-rows: 1fr; min-height: 0; transition: grid-template-rows var(--m-smooth-t) var(--m-spring-smooth); }
.try.is-folded .try-body { grid-template-rows: 0fr; }
.try-body-in { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.try-list { display: grid; padding: 0 8px; }
.try-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 5px 8px; border-radius: 10px; transition: background-color 900ms var(--m-ease-out); }
.try-item b { display: block; font-size: var(--b-fs-13); font-weight: 600; line-height: 18px; color: var(--b-text-1); }
.try-item small { display: block; font-size: var(--b-fs-12); line-height: 17px; color: var(--b-text-3); }
.try-ck { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 0; border-radius: 50%; color: transparent; box-shadow: inset 0 0 0 1.5px var(--b-line-strong); }
.try-ck svg { width: 12px; height: 12px; stroke-width: 2.4; }
.try-item.is-half .try-ck { background: conic-gradient(var(--b-ok-fill) 0 50%, transparent 0); box-shadow: inset 0 0 0 1.5px var(--b-ok-fill); }
.try-item.is-done .try-ck { color: #fff; background: var(--b-ok-fill); box-shadow: none; animation: m-pop var(--m-bouncy-t) var(--m-spring-bouncy) both; }
.try-item.is-done b { color: var(--b-text-2); }
.try-item.is-flash { background: var(--b-ok-tint); transition-duration: 0s; }
.try-now { display: flex; align-items: baseline; gap: 2px; margin: 6px 16px 0; padding: 9px 0 12px; box-shadow: inset 0 1px 0 var(--b-line); font-size: var(--b-fs-12); color: var(--b-text-3); white-space: nowrap; }
.try-now #try-state { font-weight: 600; color: var(--b-text-1); }
.try-kind { margin-left: auto; color: var(--b-text-3); }

/* ═══════════ 减弱动效（演示条开关）：本页自己的过渡与动画全部关掉；团团由 setReducedMotion 自己处理 ═══════════ */
html[data-reduced="1"] .lightfield i,
html[data-reduced="1"] .night-clock,
html[data-reduced="1"] .msgs li.is-new, html[data-reduced="1"] .msgs li.is-new p,
html[data-reduced="1"] .tt-stage-pn.is-in, html[data-reduced="1"] .tt-stage-pn.is-out,
html[data-reduced="1"] .tt-stage-pn .tt-pn-msg, html[data-reduced="1"] .tt-stage-pn .tt-pn-status[data-busy]::before,
html[data-reduced="1"] .tt-pn-msg .dots i, html[data-reduced="1"] .tt-pn-msg.is-writing .tt-msg-text p:last-child::after,
html[data-reduced="1"] .try-item.is-done .try-ck, html[data-reduced="1"] .try-count b.is-bump { animation: none; }
html[data-reduced="1"] body, html[data-reduced="1"] .demo, html[data-reduced="1"] .demo-tab, html[data-reduced="1"] .home,
html[data-reduced="1"] .try-body, html[data-reduced="1"] .try-meter i, html[data-reduced="1"] .try-chev, html[data-reduced="1"] .try-item,
html[data-reduced="1"] .tt-av.is-static img { transition: none; }

/* 1280～1360 宽：控制条收紧间距，仍保持一行（1440 下一行约用 1350px） */
@media (max-width: 1360px) {
  .demo-in { gap: 6px 8px; padding-left: 12px; }
  .demo-controls { gap: 4px; }
  .seg button { padding: 0 6px; }
  .chip { gap: 5px; padding: 0 7px 0 6px; }
  .demo-acts button { padding: 0 5px; }
}

/* ═══════════ 窄屏兜底（演示主要看 1280 以上）：不再右移内容，卡片两列 ═══════════ */
@media (max-width: 1120px) {
  html.is-try-open .home { padding-left: max(var(--b-margin), (100% - var(--b-container)) / 2); }
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hero { flex-wrap: wrap; }
}