/* ==========================================================================
   实验室：展览 + 横向滑动（单一 owner）
   --------------------------------------------------------------------------
   这一屏由三段组成，全部从这里取样式，别处不再出现第二套：

     1. .lab-rail          横向展览轨道（scroll-snap，可滑动/可键盘）
     2. .app-card.lab-exhibit  单个展位（预览演示 + 文案）
     3. .lab-pill           Apple 同款毛玻璃胶囊（进度条 + 圆点 + 播放键）

   胶囊的模糊/底色/圆角全部走 static/style.css :root 里的 --pill-* 令牌，
   数值来自 apple.com/apple-homeview 的实测（见令牌处注释）。
   本文件不新增 !important：需要压过旧规则的场合靠「删掉旧 owner」解决。
   ========================================================================== */

/* ---------------------------------------------------------------- 轨道 */
body[data-page-kind="home"] .apps-section {
  padding: 88px 0 72px;
}

.lab-rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* 左右各留一屏边距，让首尾展位也能滚到正中（Apple 的展台也是这个逻辑）。 */
  padding: 6px max(24px, calc((100% - 1080px) / 2)) 18px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.lab-rail::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------- 展位 */
body[data-page-kind="home"] .app-card.lab-exhibit {
  position: relative;
  flex: 0 0 auto;
  width: min(560px, 78vw);
  scroll-snap-align: center;
  display: block;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: calc(var(--visual-cardRadius, 20) * 1px);
  box-shadow: 0 14px 38px rgba(9,7,18,.28);
  transition: border-color .28s ease, transform .28s cubic-bezier(.32,.72,0,1),
              box-shadow .28s ease;
}
body[data-page-kind="home"] .app-card.lab-exhibit:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.18);
}
/* 当前展位只提高一点对比度，不做四周发光（设计规范禁止交互态光晕）。 */
body[data-page-kind="home"] .app-card.lab-exhibit.is-active {
  border-color: rgba(231,251,176,.34);
}

/* ---------------------------------------------------------------- 预览屏 */
.lab-preview {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(155,120,170,.34), rgba(0,0,0,0) 62%),
    radial-gradient(120% 90% at 100% 100%, rgba(237,154,163,.26), rgba(0,0,0,0) 60%),
    #2b2140;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* 预览屏里的小 UI 统一用这套缩放：内容按 100% 宽排，窄展位自动等比缩。 */
.lab-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 18px 20px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.86);
}

/* 出场动画：非当前展位**保持可见的静态画面**（滑过去是「停住的截图」），
   只有当前展位重播一次级联出场。曾经把静止态写成 opacity:0，结果没轮到
   的展位就是一块空白 —— 看起来像坏了。 */
.lab-exhibit.is-active .lab-screen [data-lab-step] {
  animation: lab-step-in .5s cubic-bezier(.32,.72,0,1) both;
  animation-delay: calc(var(--lab-i, 0) * .16s);
}
@keyframes lab-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* --- 通用零件 --- */
.lab-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lab-bubble {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}
.lab-bubble.is-me {
  align-self: flex-end;
  background: rgba(231,251,176,.16);
  border-color: rgba(231,251,176,.26);
}
.lab-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  background: rgba(231,251,176,.18);
  color: #e7fbb0;
  border: 1px solid rgba(231,251,176,.28);
}
/* 录音文件条：波形上方的元信息行 */
.lab-meta {
  font-size: 11.5px;
  letter-spacing: .2px;
  opacity: .68;
}
/* AI 回复里的三条要点 */
.lab-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 13px;
  font-size: 12.5px;
  opacity: .86;
}
.lab-list span { position: relative; }
.lab-list span::before {
  content: "";
  position: absolute;
  left: -12px;
  top: .52em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(231,251,176,.72);
}
.lab-caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 3px;
  vertical-align: -2px;
  background: currentColor;
  border-radius: 2px;
}
.lab-exhibit.is-active .lab-caret { animation: lab-caret 1s steps(2, start) infinite; }
@keyframes lab-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* --- 1. 转录助手：波形 + 逐行转写 + 导出 --- */
.lab-wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 46px;
  padding: 0 2px;
}
.lab-wave i {
  flex: 1 1 auto;
  min-width: 2px;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffd27f, #ff9fc9);
  transform: scaleY(.22);
  transform-origin: 50% 100%;
}
.lab-exhibit.is-active .lab-wave i {
  animation: lab-wave 1.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--lab-i, 0) * -.07s);
}
@keyframes lab-wave {
  from { transform: scaleY(.22); }
  to   { transform: scaleY(1); }
}
.lab-transcript { display: flex; flex-direction: column; gap: 7px; }
.lab-transcript span {
  display: block;
  height: 9px;
  border-radius: 5px;
  background: rgba(255,255,255,.16);
}
.lab-transcript span:nth-child(1) { width: 92%; }
.lab-transcript span:nth-child(2) { width: 78%; }
.lab-transcript span:nth-child(3) { width: 86%; }
.lab-transcript span:nth-child(4) { width: 54%; }
.lab-exhibit.is-active .lab-transcript span {
  background: linear-gradient(90deg, rgba(255,255,255,.20), rgba(231,251,176,.30));
  background-size: 220% 100%;
  animation: lab-stream 2.2s linear infinite;
}
@keyframes lab-stream {
  from { background-position: 120% 0; }
  to   { background-position: -60% 0; }
}

/* --- 2. 喵酱 AI：对话 + 流式出字 --- */
.lab-chat { display: flex; flex-direction: column; gap: 9px; }
.lab-typing { display: inline-flex; gap: 4px; align-items: center; }
.lab-typing i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.55);
}
.lab-exhibit.is-active .lab-typing i { animation: lab-dot 1.05s ease-in-out infinite; }
.lab-exhibit.is-active .lab-typing i:nth-child(2) { animation-delay: .16s; }
.lab-exhibit.is-active .lab-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes lab-dot {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* --- 3. AI 辩论：正反双方 + 述票 --- */
.lab-debate { display: flex; flex-direction: column; gap: 9px; }
.lab-side {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.lab-side-tag {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #241a37;
  background: #e7fbb0;
}
.lab-side.is-against .lab-side-tag { background: #ff9fc9; }
.lab-side-body { flex: 1 1 auto; min-width: 0; }
.lab-side-name { font-size: 11.5px; font-weight: 700; opacity: .78; margin-bottom: 3px; }
.lab-side-text { font-size: 12.5px; opacity: .92; }
.lab-verdict {
  margin-top: 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,210,127,.14);
  border: 1px solid rgba(255,210,127,.26);
  font-size: 12px;
}

/* --- 4. AI 中转站：密钥 + 用量条 --- */
.lab-key {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.10);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .4px;
}
.lab-key span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 用量柱：柱身比间距窄，靠底部基线收齐，读起来才像图表而不是色块。 */
.lab-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  height: 84px;
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.lab-bars i {
  flex: 0 0 auto;
  width: 18px;
  height: var(--lab-h, 40%);
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, rgba(231,251,176,.88), rgba(231,251,176,.30));
  transform: scaleY(.08);
  transform-origin: 50% 100%;
}
.lab-exhibit.is-active .lab-bars i {
  animation: lab-grow .7s cubic-bezier(.32,.72,0,1) forwards;
  animation-delay: calc(var(--lab-i, 0) * .1s + .2s);
}
@keyframes lab-grow {
  from { transform: scaleY(.08); }
  to   { transform: scaleY(1); }
}
.lab-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  opacity: .6;
}
/* 计时器展位：阶段标签跟着表盘居中，而不是被 flex 推到角落。 */
.lab-timer + .lab-row { justify-content: center; }

/* --- 5. 辩论计时器：大字计时 + 赛制阶段 --- */
.lab-timer {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.lab-timer-clock {
  font-family: var(--font-mono);
  font-size: 46px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #e7fbb0;
  font-variant-numeric: tabular-nums;
}
.lab-timer-phase { font-size: 13px; opacity: .82; }
.lab-timer-track {
  width: min(300px, 70%);
  margin-top: 4px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  overflow: hidden;
}
.lab-timer-track i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd27f, #ff9fc9);
  transform-origin: 0 50%;
  transform: scaleX(1);
}
.lab-exhibit.is-active .lab-timer-track i { animation: lab-count 6s linear infinite; }
@keyframes lab-count {
  from { transform: scaleX(1); }
  to   { transform: scaleX(.1); }
}

/* ---------------------------------------------------------------- 展位文案 */
body[data-page-kind="home"] .app-card.lab-exhibit .app-info {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px 20px;
}
body[data-page-kind="home"] .app-card.lab-exhibit .app-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(231,251,176,.14);
  color: #e7fbb0;
}
body[data-page-kind="home"] .app-card.lab-exhibit .app-info h3 { font-size: 17px; }
body[data-page-kind="home"] .app-card.lab-exhibit .app-info p { font-size: 13.5px; }
body[data-page-kind="home"] .app-card.lab-exhibit .app-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #1c2115;
  background: #e7fbb0;
}
body[data-page-kind="home"] .app-card.lab-exhibit .lab-index {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: rgba(255,255,255,.62);
}

/* ---------------------------------------------------------------- 胶囊 */
.lab-pillbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}

/* 进度条 + 圆点的胶囊本体（Apple 的 .all-access-pass__background）。 */
.lab-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--pill-height);
  padding: 0 22px;
  border-radius: var(--pill-radius);
  background: var(--pill-scrim);
  border: 1px solid var(--pill-hairline);
  -webkit-backdrop-filter: blur(var(--pill-blur)) saturate(var(--pill-saturate));
  backdrop-filter: blur(var(--pill-blur)) saturate(var(--pill-saturate));
}
.lab-pill-progress {
  position: relative;
  flex: 0 0 auto;
  width: 168px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.20);
  overflow: hidden;
}
.lab-pill-progress i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.lab-pill-progress.is-running i {
  animation: lab-dwell var(--lab-dwell, 6s) linear forwards;
}
.lab-pill-progress.is-paused i { animation-play-state: paused; }
@keyframes lab-dwell {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.lab-pill-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lab-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.42);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.lab-dot:hover { background: rgba(255,255,255,.68); }
.lab-dot.is-active {
  background: rgba(255,255,255,.95);
  transform: scale(1.18);
}
.lab-dot:focus-visible,
.lab-pill-play:focus-visible {
  outline: 2px solid rgba(231,251,176,.75);
  outline-offset: 2px;
}

/* 播放/暂停：Apple 把它做成和胶囊同材质的独立圆形键。 */
.lab-pill-play {
  flex: 0 0 auto;
  width: var(--pill-height);
  height: var(--pill-height);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--pill-hairline-strong);
  background: var(--pill-scrim-raised);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(var(--pill-blur)) saturate(var(--pill-saturate));
  backdrop-filter: blur(var(--pill-blur)) saturate(var(--pill-saturate));
  transition: background-color .2s ease, transform .2s ease;
}
.lab-pill-play:hover { background: rgba(255,255,255,.30); }
.lab-pill-play:active { transform: scale(.96); }
.lab-pill-play i { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 900px) {
  body[data-page-kind="home"] .apps-section { padding: 64px 0 56px; }
  .lab-rail { padding: 4px 20px 14px; gap: 16px; }
  body[data-page-kind="home"] .app-card.lab-exhibit { width: min(460px, 84vw); }
  .lab-screen { padding: 14px 16px; font-size: 12.5px; }
  .lab-timer-clock { font-size: 38px; }
  .lab-pill {
    height: var(--pill-height-sm);
    border-radius: var(--pill-radius-sm);
    padding: 0 16px;
    gap: 12px;
  }
  .lab-pill-progress { width: 108px; }
  .lab-pill-dots { gap: 8px; }
  .lab-pill-play {
    width: var(--pill-height-sm);
    height: var(--pill-height-sm);
  }
  .lab-pill-play i { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-rail { scroll-behavior: auto; }
  .lab-screen [data-lab-step] { animation: none; }
  .lab-exhibit.is-active .lab-screen *,
  .lab-pill-progress.is-running i { animation: none; }
  .lab-pill-progress i { transform: scaleX(1); }
}