/* ============================================================
   预览版 Beta —— 从按钮发散的水波转场 + 独立落地页
   ------------------------------------------------------------
   这是一个盖在首页之上的整屏覆盖层（不是新页面）：
   只有留在同一个文档里，「水波从按钮那个点发散出去」才成立 ——
   跳页面会把动画的起点位置丢掉。

   z-index 取 250：压过普通的浮层（--z-overlay 200），
   但低于弹窗（--z-modal 300）—— 提交后要弹出 AI 出题的结果弹窗，
   那一个必须在上面。
   ============================================================ */

#betaView {
  position: fixed; inset: 0;
  z-index: 250;
  visibility: hidden;
  pointer-events: none;
  /* ⚠ 关场时推迟隐藏，让退场动画放完。
     必须 ≥ 最长的那条**关场**动画（涟漪 .7s），给到 780ms 留余量。
     注意别按开场那条算 —— 开场涟漪是 1.25s，但关场已经被压到 .7s 了；
     之前按 1.25s 写了 1.35s，结果是水缩完了、文字还在页面上悬着 1 秒多。
     开场方向不受影响（.is-open 里把延迟归零）。 */
  transition: visibility 0s linear 780ms;
  font-family: var(--font-sans);
}
#betaView.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}

/* ------------------------------------------------------------
   水波：三层圆从点击点同时涨开
   ------------------------------------------------------------
   全部用 transform: scale 做 —— 不动 width/height/clip-path，
   这样整段动画交给合成层，不触发布局与重绘，滚动时也不掉帧。

   圆心定位靠「left/top + translate(-50%,-50%)」：
   元素本身是 200vmax 见方，这样正好让圆心落在按钮那个点上。
   ------------------------------------------------------------ */
.beta-flood {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.beta-flood__blob {
  position: absolute;
  left: var(--bx, 50%);
  top: var(--by, 0px);
  /* ⚠ 必须够到**最远的那个角**，否则会露出一块原始页面。
     圆心在按钮上（右上角附近），要到对角约 1540px；而 200vmax 的半径
     只有 100vmax = 1280px —— 实测左下角漏黑。300vmax 给到 150vmax 才稳。
     反正只是个渐变，元素大不影响性能（动画走的是 transform）。 */
  width: 300vmax; height: 300vmax;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  will-change: transform;
}

/* 液态边缘：加 SVG 湍流置换滤镜，涨开时边缘会像水一样抖 */
.beta-flood__blob--liquid {
  background: radial-gradient(circle at 50% 50%,
    rgba(88, 173, 232, .55) 0%,
    rgba(28, 116, 182, .75) 55%,
    rgba(11, 62, 104, .9) 100%);
  filter: url(#betaLiquid);
  /* 基础态 = **关场**：收得快、无延迟，收完就该让位。
     （CSS 过渡取「目标态」的 transition：加 is-open 时用下面那条慢的，
      去掉 is-open 时回到这条快的 —— 正好一个慢进一个快出。） */
  transition: transform .62s cubic-bezier(.5, 0, .75, .25);
}
/* 主体：紧紧跟上，把屏幕填实 */
.beta-flood__blob--core {
  background: linear-gradient(135deg, #0B3E68 0%, #12558C 42%, #2C7FBF 100%);
  transition: transform .58s cubic-bezier(.5, 0, .75, .25);   /* 关场 */
}
/* 涟漪：稍微超出主体一圈，散开即淡出，做出"水波扩散"的观感 */
.beta-flood__blob--ring {
  background: radial-gradient(circle at 50% 50%,
    transparent 62%,
    rgba(160, 214, 255, .42) 72%,
    rgba(160, 214, 255, .18) 82%,
    transparent 90%);
  transition: transform .7s cubic-bezier(.5, 0, .75, .25);   /* 关场 */
}

/* 开场：慢速 + 错开的延迟，才有"一层层涌上来"的水感 */
#betaView.is-open .beta-flood__blob--liquid {
  transform: translate(-50%, -50%) scale(1);
  transition: transform 1.05s cubic-bezier(.18, .89, .32, 1);
}
#betaView.is-open .beta-flood__blob--core {
  transform: translate(-50%, -50%) scale(1);
  transition: transform .92s cubic-bezier(.22, 1, .36, 1) 60ms;
}
#betaView.is-open .beta-flood__blob--ring {
  transform: translate(-50%, -50%) scale(1.14);
  transition: transform 1.25s cubic-bezier(.16, 1, .3, 1);
}

/* 水花：几颗小液滴朝随机方向甩出去 */
.beta-drop {
  position: absolute;
  left: var(--bx); top: var(--by);
  width: var(--r, 10px); height: var(--r, 10px);
  margin: calc(var(--r, 10px) / -2) 0 0 calc(var(--r, 10px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #BFE2FF, rgba(146, 202, 248, .5));
  opacity: 0;
  pointer-events: none;
}
#betaView.is-open .beta-drop {
  animation: betaDrop .78s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes betaDrop {
  0%   { opacity: .95; transform: translate(0, 0) scale(.5); }
  70%  { opacity: .5; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.15); }
}

/* ------------------------------------------------------------
   流动的行业名称 —— 铺在中间那一带
   ------------------------------------------------------------ */
.beta-industries {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  gap: clamp(6px, 1.4vh, 18px);
  /* 上下淡出，让文字像从水里浮出来一样 */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
  overflow: hidden;
  padding: clamp(40px, 14vh, 160px) 0;
  /* ⚠ 行业名层是 .beta-stage 的**兄弟**，不是子元素 ——
     它原来完全没有透明度过渡：关场时不跟着淡，一直亮着直到 visibility 到点。
     这就是"流动的专业也有延迟遮挡"的来源。给它补一套和内容层同步的淡入淡出。 */
  opacity: 0;
  transition: opacity .26s var(--ease-standard);
}
#betaView.is-open .beta-industries {
  opacity: 1;
  transition: opacity .55s var(--ease-standard) .34s;
}

.beta-row {
  display: flex;
  gap: clamp(18px, 3vw, 52px);
  white-space: nowrap;
  font-weight: 600;
  font-size: clamp(17px, 2.5vw, 34px);
  letter-spacing: .06em;
  /* 压得比较暗：它是氛围，不是内容 —— 一旦抢过正文，中间那段就读不清了 */
  color: rgba(255, 255, 255, .085);
  will-change: transform;
}
/* 相邻两行错开一点色，避免看起来是一整块 */
.beta-row:nth-child(even) { color: rgba(180, 220, 255, .105); }
.beta-row > span { flex: none; }

@keyframes betaMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* 反向行：从右往左其实也是同一套动画，靠 animation-direction 反过来 */
.beta-row--rev { animation-direction: reverse; }

/* ------------------------------------------------------------
   中央内容
   ------------------------------------------------------------ */
.beta-stage {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(8px, 1.6vh, 20px);
  padding: clamp(24px, 6vh, 72px) var(--space-5);
  text-align: center;
  color: #fff;
  /* ⚠ 必须建层叠上下文，否则下面 ::before 的 z-index: -1
     会一路沉到 .beta-industries 底下 —— 暗影层就白加了，文字被行业名穿透。
     isolation 比 z-index 干净：不用给 stage 自己排层，也不影响它和兄弟元素的关系。 */
  isolation: isolate;
  /* ⚠ 基础态 = **关场**：立刻淡出、不要延迟。
     原来把 `.46s` 的延迟写在这条上，CSS 过渡是双向的 ——
     关场也要干等 460ms 才开始淡出，水都缩回去了大字还挂着，正是"延迟遮挡"。
     现在延迟只写在下面的 .is-open 里。 */
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity .26s var(--ease-standard),
              transform .3s var(--ease-standard);
}
/* 开场：比水波晚一点浮现；这条只在"进入 is-open"时生效 */
#betaView.is-open .beta-stage {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--ease-standard) .46s,
              transform .6s cubic-bezier(.22, 1, .36, 1) .46s;
}

/* 标题底下垫一层柔和的暗影，保证在流动文字上也读得清 */
.beta-stage::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: min(1100px, 130vw);
  height: min(620px, 90vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(6, 40, 68, .62) 0%,
    rgba(6, 40, 68, .38) 45%,
    transparent 72%);
  pointer-events: none;
  z-index: -1;
}

.beta-title {
  margin: 0;
  font-size: clamp(30px, 5.4vw, 62px);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.15;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.beta-sub {
  margin: 0;
  font-size: clamp(15px, 2.1vw, 24px);
  font-weight: 400;
  letter-spacing: .16em;
  color: rgba(226, 242, 255, .92);
}
.beta-desc {
  margin: clamp(2px, .8vh, 10px) 0 0;
  max-width: 42em;
  font-size: clamp(12px, 1.35vw, 15px);
  line-height: 1.85;
  color: rgba(206, 230, 250, .78);
}

/* 标签：说明这是预览版 */
.beta-tag {
  display: inline-flex; align-items: baseline; gap: 5px;
  margin-bottom: clamp(4px, 1vh, 12px);
  padding: 4px 14px;
  border: 1px solid rgba(190, 226, 255, .42);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  color: rgba(214, 236, 255, .95);
  background: rgba(255, 255, 255, .09);
}

/* ------------------------------------------------------------
   输入框 + 生成剧本
   ------------------------------------------------------------ */
.beta-form {
  display: flex; align-items: stretch;
  gap: 10px;
  width: min(680px, 100%);
  margin-top: clamp(12px, 3vh, 34px);
}

.beta-field {
  position: relative;
  flex: 1; min-width: 0;
}
.beta-field input {
  width: 100%; height: 52px;
  padding: 0 var(--space-4);
  font-family: inherit; font-size: var(--text-sm);
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(190, 226, 255, .38);
  border-radius: var(--radius-md);
  outline: none;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.beta-field input::placeholder { color: transparent; }  /* 用下面的 ghost 代替 */
.beta-field input:hover { background: rgba(255, 255, 255, .17); }
.beta-field input:focus {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(214, 238, 255, .85);
  box-shadow: 0 0 0 4px rgba(140, 200, 245, .22);
}

/* 轮换的示例句：贴一层"幽灵文字"盖在输入框上，才能做淡入淡出
   （原生 placeholder 没法加过渡动画） */
.beta-ghost {
  position: absolute;
  left: var(--space-4); right: var(--space-4);
  top: 50%; transform: translateY(-50%);
  font-size: var(--text-sm);
  line-height: 1;          /* 不写的话行高会把文字顶得偏下 */
  color: rgba(214, 236, 255, .6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
  transition: opacity .45s var(--ease-standard);
}
.beta-ghost.is-out { opacity: 0; }
.beta-field.has-value .beta-ghost { opacity: 0; }

.beta-go {
  flex: none;
  height: 52px;
  padding: 0 clamp(18px, 3vw, 30px);
  font-family: inherit; font-size: var(--text-sm); font-weight: 600;
  letter-spacing: .04em;
  color: #0B3E68;
  background: linear-gradient(180deg, #FFFFFF, #D8ECFB);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(4, 30, 54, .34);
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              filter var(--dur-fast) var(--ease-standard);
}
.beta-go:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(4, 30, 54, .42); }
.beta-go:active { transform: translateY(0); }
.beta-go:disabled { filter: grayscale(.35) brightness(.92); cursor: default; transform: none; }

.beta-note {
  min-height: 1.4em;
  margin: 8px 0 0;
  font-size: var(--text-xs);
  color: rgba(200, 226, 248, .8);
}

/* 底部两个动作：浏览所有剧本库（主） / 返回（次） */
.beta-actions {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  margin-top: clamp(10px, 2.4vh, 26px);
}

/* 「浏览所有剧本库」—— 配色与「返回」保持一致（用户 2026-09-22 要求），
   只靠字重和顺序区分主次 */
.beta-more {
  padding: 7px 18px;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(216, 236, 255, .82);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(190, 226, 255, .3);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.beta-more:hover {
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border-color: rgba(190, 226, 255, .3);
}

.beta-close {
  margin-top: 0;               /* 挪进 .beta-actions 后不再需要上边距 */
  padding: 7px 18px;
  font-family: inherit; font-size: var(--text-xs);
  color: rgba(216, 236, 255, .82);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(190, 226, 255, .3);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.beta-close:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* ------------------------------------------------------------
   顶栏按钮：预览版 Beta
   ------------------------------------------------------------ */
.top-actions {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-dropdown);
  display: flex; align-items: center;
  gap: var(--space-2);
}
/* 主题按钮挪进容器后不再自己定位 —— 否则两个都会贴到右边 */
.top-actions .theme-toggle {
  position: static;
  top: auto; right: auto;
}

/* ------------------------------------------------------------
   只有首页显示「预览版」按钮（用户 2026-09-21 明确要求）
   ------------------------------------------------------------
   需求原话：「预览版按钮只存在于主页，出了主页即消失」。
   也就是：剧本库页、对话页都不显示它。

   首页之外的两个视图是 #library / #chat，切换靠 hidden 属性，
   所以用 :has() 从 body 往下判断当前在哪个视图。
   主题按钮**不隐藏** —— 它在 .top-actions 容器里，隐藏的是里面的 .beta-btn。

   （支持情况：Chrome/Edge 105+、Safari 15.4+、Firefox 121+。
     万一浏览器太老认不得 :has()，最坏结果是按钮多显示几个界面，
     不会影响功能。）
   ------------------------------------------------------------ */
body:has(#library:not([hidden])) .beta-btn,
body:has(#chat:not([hidden])) .beta-btn {
  display: none !important;
}

.beta-btn {
  position: relative;
  /* ⚠ 必须和主题按钮一样用 center。
     原来这里是 baseline —— 因为「预览版」和「BETA」是两个不同字号的 flex item，
     基线对齐让整组文字上移，和旁边「跟随系统」的垂直位置错开了。
     现在文字被包进 .beta-btn__text 一个 item，外层 center 就对齐了。 */
  display: inline-flex; align-items: center;
  min-height: 38px;
  padding: 0 var(--space-4);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #12558C, #2C7FBF);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-full);
  box-shadow: 0 2px 10px rgba(18, 85, 140, .35);
  cursor: pointer;
  overflow: hidden;
  /* 保险：contain: paint 让这个元素**总是**成为绝对定位后代的包含块并裁剪它们，
     不依赖 position 是什么。上面那条 `overflow: hidden` 单独是不够的 ——
     一旦 .beta-btn 变成 static，::after 的包含块落到视口，
     而 overflow 只能裁剪「在包含块链上」的后代，此时按钮不在链上，裁不到。
     （这是 2026-09-21 那个「白光铺满整页」的根因，见 styles.css 里 has-global 那段注释。） */
  contain: paint;
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.beta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(18, 85, 140, .45); }
.beta-btn:active { transform: translateY(0); }
/* 内层：基线对齐留在这里做 —— 「BETA」坐在「预览版」的基线上，像个小角标 */
.beta-btn__text {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.beta-btn__text > small {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8;
}
/* 掠光：让按钮自带一点"水"的暗示 */
.beta-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: betaShine 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes betaShine {
  0%, 62%  { transform: translateX(-120%); }
  78%, 100% { transform: translateX(120%); }
}

/* ------------------------------------------------------------
   无障碍 / 降级
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  /* 明确要求减少动效时不做水波，直接切过去 */
  .beta-flood__blob--liquid { filter: none; }
  #betaView.is-open .beta-flood__blob { transition-duration: .01ms; }
  .beta-drop { display: none; }
  .beta-row { animation: none !important; }
  .beta-btn::after { animation: none; }
  .beta-stage { transition-delay: 0s; }
}

@media print {
  #betaView, .top-actions { display: none !important; }
}