/* ===== AI伴侣定制 · 新流程：平行宇宙选角（定格初见 + 微表情雕刻）=====
   设计令牌对齐 styles.base.css：--purple:#A855F7 / --lavender:#FAF7FF / --lavender-border:#E8DFF9
   不引入新主色；深紫仅作标题强调。遵循微信 webview 弹窗铁律：DOM 在 #phoneFrame 内 + classList.add('active') 双保险。 */

.ai-meet-overlay { z-index: 1200; }
.ai-meet-overlay.is-flying { pointer-events: none; }
.meet-card {
  width: 100%; max-width: 400px; height: 86vh; max-height: 760px;
  background: var(--lavender); border-radius: 28px; overflow: hidden;
  position: relative; display: flex; flex-direction: column;
  padding: 0; box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
/* 合规常驻标注（微信环境必须，从 Step1 就带上） */
.meet-compliance {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 50; background: rgba(75,0,130,.72); color: #fff;
  font-size: 10px; padding: 4px 12px; border-radius: 20px;
  letter-spacing: .5px; backdrop-filter: blur(4px); white-space: nowrap;
}
.meet-stage { flex: 1; display: none; flex-direction: column; position: relative; padding: 52px 18px 20px; }
.meet-stage.active { display: flex; }

/* 通用头部 */
.meet-header { text-align: center; flex-shrink: 0; }
.meet-step { font-size: 12px; color: var(--purple); font-weight: 700; letter-spacing: .5px; }
.meet-h2 { font-size: 18px; color: var(--purple-deep, #4B0082); margin-top: 4px; font-weight: 700; }

/* ===== Stage 1: 选角 ===== */
.meet-cast-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 20px; overflow-y: auto; padding: 2px;
}
.meet-cast-card {
  background: #fff; border-radius: 18px; padding: 10px; cursor: pointer;
  border: 2px solid transparent; transition: all .25s; position: relative;
  box-shadow: 0 4px 14px rgba(168,85,247,.08);
}
.meet-cast-card:active { transform: scale(.97); }
.meet-cast-card.selected { border-color: var(--purple); box-shadow: 0 6px 20px rgba(168,85,247,.25); }
.meet-cast-card img { width: 100%; height: 128px; object-fit: cover; border-radius: 12px; background: #f0f0f5; }
.meet-cast-card .label { text-align: center; font-size: 13px; color: var(--ink-900, #1A1A26); margin-top: 8px; font-weight: 600; }
.meet-cast-card .ai-tag { position: absolute; top: 14px; right: 14px; background: var(--purple); color: #fff; font-size: 9px; padding: 2px 7px; border-radius: 10px; }

/* ===== Stage 2: 定格初见 ===== */
.meet-stage-meet { background: var(--meet-bg, #e8f0ff); transition: background .5s; }
.meet-portrait-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.meet-particles { position: absolute; inset: 0; overflow: hidden; opacity: .5; pointer-events: none; }
.meet-particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(168,85,247,.4); animation: meetFloat 6s infinite ease-in-out; }
@keyframes meetFloat { 0%,100% { transform: translateY(0) translateX(0); opacity: .3; } 50% { transform: translateY(-30px) translateX(10px); opacity: .8; } }
.meet-portrait-wrap { position: relative; width: 250px; height: 310px; display: flex; align-items: center; justify-content: center; }
.meet-portrait {
  width: 100%; height: 100%; object-fit: cover; border-radius: 20px;
  filter: blur(12px) brightness(.92);
  clip-path: circle(36% at 50% 44%);
  transition: filter .7s cubic-bezier(.4,0,.2,1), clip-path .7s cubic-bezier(.4,0,.2,1);
}
.meet-portrait.locked { filter: blur(0) brightness(1) !important; clip-path: circle(150% at 50% 50%) !important; }
.meet-portrait-ring { position: absolute; inset: 0; border-radius: 20px; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(168,85,247,.3); transition: opacity .5s; }
.meet-portrait-wrap.locked .meet-portrait-ring { opacity: 0; }

.meet-hint { text-align: center; font-size: 11px; color: #888; margin: 6px 0 8px; min-height: 14px; }
.meet-capsules { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 0 4px; }
.meet-capsule {
  font-size: 12px; padding: 8px 13px; border-radius: 20px; cursor: pointer;
  background: #fff; color: var(--ink-900, #1A1A26); border: 1.5px solid var(--lavender-border);
  transition: all .2s; user-select: none;
}
.meet-capsule:active { transform: scale(.95); }
.meet-capsule.active { background: var(--purple); color: #fff; border-color: var(--purple); box-shadow: 0 3px 12px rgba(168,85,247,.4); }
.meet-lock-btn {
  margin: 10px 0 4px; padding: 14px; border-radius: 16px; border: none; width: 100%;
  background: linear-gradient(135deg, var(--purple), var(--purple-deep, #4B0082));
  color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
  transition: all .2s; box-shadow: 0 6px 18px rgba(168,85,247,.35);
}
.meet-lock-btn:active { transform: scale(.98); }
.meet-lock-btn:disabled { opacity: .5; }

/* ===== Stage 3: 微表情雕刻 ===== */
.meet-stage-sculpt { background: #fff; }
.meet-sculpt-photo {
  width: 170px; height: 210px; object-fit: cover; border-radius: 16px; margin: 4px auto 18px;
  display: block; box-shadow: 0 6px 20px rgba(0,0,0,.12); transition: filter .15s;
}
.meet-slider-group { margin-bottom: 20px; }
.meet-slider-label { display: flex; justify-content: space-between; font-size: 12px; color: #666; margin-bottom: 8px; }
.meet-slider-label b { color: var(--purple-deep, #4B0082); }
.meet-stage-sculpt input[type=range] {
  width: 100%; -webkit-appearance: none; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--lavender-border), var(--purple)); outline: none;
}
.meet-stage-sculpt input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid var(--purple); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.meet-voice-btn {
  width: 100%; padding: 12px; border-radius: 14px; border: 1.5px solid var(--lavender-border);
  background: var(--lavender); color: var(--purple-deep, #4B0082); font-size: 14px; cursor: pointer; margin-top: 4px;
}
.meet-next-btn {
  width: 100%; margin-top: 14px; padding: 14px; border-radius: 16px; border: none;
  background: linear-gradient(135deg, var(--purple), var(--purple-deep, #4B0082)); color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(168,85,247,.35);
}
.meet-back-link { text-align: center; font-size: 12px; color: #aaa; margin-top: 12px; cursor: pointer; }

/* ===== Stage 4: 平行宇宙剧场 · 三张人生剧本卡（3D Cover Flow）===== */
.meet-stage-scripts { background: linear-gradient(160deg, #1a0f2e 0%, #2a1a4a 55%, #160c28 100%); overflow: hidden; padding: 0 12px 8px; }
/* Stage 4 三剧本页：顶部合规提示已移到底部，这里 padding-top 只需给返回按钮留空间 */
.meet-stage-scripts.active { padding-top: 0; }
/* 流动紫蓝光带（轻微缓慢浮动，不抢人像焦点）*/
.meet-aurora { position: absolute; inset: -20%; z-index: 0; pointer-events: none; overflow: hidden; }
.meet-aurora::before, .meet-aurora::after { content: ''; position: absolute; width: 62%; height: 62%; border-radius: 50%; filter: blur(60px); opacity: .5; }
.meet-aurora::before { top: 4%; left: -12%; background: radial-gradient(circle, rgba(168,85,247,.55), transparent 70%); animation: auroraFloat 14s ease-in-out infinite; }
.meet-aurora::after { bottom: 2%; right: -16%; background: radial-gradient(circle, rgba(80,140,240,.42), transparent 70%); animation: auroraFloat 18s ease-in-out infinite reverse; }
@keyframes auroraFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(7%, 5%); } }
.meet-stage-scripts.is-charging .meet-aurora::before, .meet-stage-scripts.is-charging .meet-aurora::after { animation-duration: .55s; }
/* 全屏场景背景（视差 + 径向光晕）*/
.meet-script-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.meet-script-bg {
  position: absolute; inset: -8% -8% -8% -8%; /* 留出视差位移空间 */
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: scale(1.14); transition: transform .45s cubic-bezier(.4,0,.2,1), background-image .45s ease;
  filter: brightness(.5) saturate(1.1);
}
.meet-script-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(168,85,247,.38), transparent 68%);
  transition: background .45s ease;
}
/* 顶部分页点：3 个独立圆点，选中实心，两侧空心，无连线 */
.meet-script-card .msc-dots {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; gap: 6px; pointer-events: none;
}
.meet-script-card .msc-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: transparent; border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: all .25s ease;
}
.meet-script-card .msc-dot.active {
  background: #fff; border-color: #fff;
  box-shadow: 0 0 6px rgba(255,255,255,.55);
}
.meet-script-card .msc-dots { opacity: .9; }
.meet-script-card.is-center .msc-dots { opacity: 1; }
.meet-script-card.is-left .msc-dots,
.meet-script-card.is-right .msc-dots { opacity: .5; transform: translateX(-50%) scale(.9); }
.meet-script-back {
  position: absolute; top: 12px; left: 12px; z-index: 25; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.32); color: #fff; border: none; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
/* 紧凑头部：平行宇宙剧场 / TA 的三种人生剧本 */
.meet-scripts-head { position: relative; z-index: 6; flex-shrink: 0; text-align: center; padding-top: 2px; margin-bottom: 4px; }
.meet-scripts-title { font-size: 16px; color: #fff; font-weight: 700; letter-spacing: .5px; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.meet-scripts-sub { font-size: 14px; color: rgba(255,255,255,.92); margin-top: 4px; letter-spacing: .8px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
/* 3D 轮播舞台 */
.meet-script-flow {
  position: relative; flex: 1; min-height: 0; z-index: 5;
  perspective: 1200px; transform-style: preserve-3d; touch-action: pan-y; cursor: grab;
  display: flex; align-items: center; justify-content: center;
}
.meet-script-flow:active { cursor: grabbing; }
/* 卡片：铺满舞台、人像占上部、底部放文字 */
.meet-script-card {
  position: absolute; left: 50%; top: 56%; width: 52%; aspect-ratio: 3 / 4.25;
  border-radius: 20px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.5);
  transform: translate(-50%,-50%); transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .45s ease, filter .45s ease, border-color .3s ease;
  backface-visibility: hidden; will-change: transform; background: #1a1428;
  border: 3px solid transparent;
}
/* 选中态：白边 + 紫色光晕脉冲 + 微微上浮（沿用八步设计语言）*/
.meet-script-card.is-center {
  width: 74%; border-color: #fff;
  animation: scriptCardPulse 2.6s ease-in-out infinite;
}
@keyframes scriptCardPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(255,255,255,.92), 0 0 26px 5px rgba(168,85,247,.5), 0 0 52px 10px rgba(168,85,247,.26); }
  50% { box-shadow: 0 0 0 3px #fff, 0 0 38px 9px rgba(168,85,247,.82), 0 0 72px 16px rgba(168,85,247,.42); }
}
/* 未选中左右卡：缩放 + 高斯模糊 + 压暗 */
.meet-script-card.is-left, .meet-script-card.is-right { filter: blur(2px) brightness(.62); }
.meet-script-card .msc-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.meet-script-card .msc-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: auto;
  background: #000;
}
/* 居中大播放按钮，提示卡片可点击全屏有声播放 */
.meet-script-card .msc-play-hint {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff;
  border: 2px solid rgba(255,255,255,.75);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; padding-left: 4px;
  box-shadow: 0 0 22px rgba(168,85,247,.55);
  z-index: 3; pointer-events: none; opacity: .92;
  transition: opacity .25s ease, transform .25s ease;
}
.meet-script-card.is-left .msc-play-hint,
.meet-script-card.is-right .msc-play-hint { opacity: .55; transform: translate(-50%, -50%) scale(.86); }
/* 全屏播放器顶部标题 */
.meet-script-video-lightbox .meet-script-video-title {
  position: absolute; top: 0; left: 0; right: 0; z-index: 11;
  padding: 16px 50px 14px 16px;
  font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,.7), transparent);
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 视频轻量全屏弹窗 */
.meet-script-video-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  animation: msVLbIn .28s ease forwards;
}
@keyframes msVLbIn { from { opacity: 0; } to { opacity: 1; } }
.meet-script-video-lightbox video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}
.meet-script-video-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 12px));
  right: max(12px, env(safe-area-inset-right, 12px));
  z-index: 10;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff; border: 1px solid rgba(255,255,255,.22);
  font-size: 20px; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.meet-script-video-hint {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom, 24px));
  left: 50%; transform: translateX(-50%);
  z-index: 10;
  font-size: 12px; color: rgba(255,255,255,.7);
  background: rgba(0,0,0,.35); padding: 6px 14px; border-radius: 20px;
  pointer-events: none; white-space: nowrap;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* 伴侣白底照 multiply 合成即"去背"叠到场景（上部人像，往上拉长）*/
.meet-script-card .msc-face {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 92%; height: 60%; object-fit: cover; object-position: center 8%;
  mix-blend-mode: multiply; opacity: .96; pointer-events: none; border-radius: 14px 14px 0 0;
}
.meet-script-card .msc-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,5,16,0) 42%, rgba(8,5,16,.82) 78%, rgba(8,5,16,.95) 100%);
}
/* 底部内容：标题 → 名字·年龄 → 居中标签 → slogan → 梗概小框（点击展开）*/
.meet-script-card .msc-bottom { position: absolute; left: 10px; right: 10px; bottom: 16px; z-index: 4; }
.meet-script-card .msc-title { color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .4px; line-height: 1.25; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.meet-script-card .msc-name-age { color: rgba(255,255,255,.95); font-size: 12px; font-weight: 600; margin-top: 3px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.meet-script-card .msc-tags { display: flex; gap: 5px; justify-content: center; margin: 6px 0 4px; flex-wrap: wrap; }
.meet-script-card .msc-tag {
  font-size: 9.5px; font-style: normal; padding: 3px 8px; border-radius: 10px; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, rgba(168,85,247,.92), rgba(75,0,130,.92)); border: 0.5px solid rgba(255,255,255,.3);
}
.meet-script-card .msc-slogan { color: rgba(255,255,255,.82); font-size: 11px; line-height: 1.45; margin-bottom: 6px; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.meet-script-card .msc-story-box {
  position: relative; height: 68px; overflow: hidden; background: rgba(255,255,255,.92);
  border-radius: 11px; padding: 8px 11px; box-shadow: 0 4px 14px rgba(0,0,0,.3); cursor: pointer;
}
.meet-script-card .msc-story-inner {
  color: #3a3348; font-size: 10.5px; line-height: 1.5; white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.meet-script-card .msc-story-hint {
  position: absolute; right: 6px; bottom: 5px;
  background: rgba(168,85,247,.92); color: #fff;
  font-size: 10px; font-weight: 700; padding: 5px 10px;
  border-radius: 12px; box-shadow: 0 3px 10px rgba(0,0,0,.25);
  pointer-events: none; letter-spacing: .3px;
}
.meet-script-card .msc-story-hint::after { content: ''; position: absolute; top: -6px; right: 10px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid rgba(168,85,247,.92); }
/* 双按钮分层：主按钮紫渐变发光 / 次要浅灰描边 */
.meet-script-actions { position: relative; z-index: 6; display: flex; flex-direction: column; gap: 8px; padding: 54px 6px 2px; flex-shrink: 0; }
.meet-script-confirm {
  width: 100%; padding: 13px; border-radius: 16px; border: none;
  background: linear-gradient(135deg, #8B5CF6, #4B0082); color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 22px rgba(168,85,247,.55), inset 0 0 0 1px rgba(255,255,255,.15);
}
.meet-script-confirm:active { transform: scale(.98); }
.meet-script-skip {
  width: 100%; padding: 9px; border-radius: 14px; border: 1px solid rgba(255,255,255,.22);
  background: transparent; color: rgba(255,255,255,.5); font-size: 12px; cursor: pointer;
}
/* 底部警示语 + 水印同一行（浅色、常驻可见）*/
.meet-script-footer { position: relative; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px 2px; flex-shrink: 0; }
.meet-script-footer .meet-script-compliance { position: static; text-align: left; font-size: 9px; color: rgba(255,255,255,.52); letter-spacing: .3px; }
.meet-script-footer .xindongai-watermark { position: static; font-size: 9px; padding: 3px 9px; }
/* 选完剧本：卡片向右上卷起飞走，UI 同步淡出 */
.meet-stage-scripts.is-flying { pointer-events: none; }
.meet-stage-scripts.is-flying .meet-scripts-head,
.meet-stage-scripts.is-flying .meet-script-actions,
.meet-stage-scripts.is-flying .meet-script-footer,
.meet-stage-scripts.is-flying .meet-script-card:not(.is-fly-away) { transition: opacity .35s ease; opacity: 0 !important; }
.meet-script-card.is-fly-away {
  pointer-events: none; z-index: 100 !important;
  animation: mscFlyAway 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes mscFlyAway {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(40%, -120%) scale(0.2) rotate(18deg); opacity: 0; }
}
/* 沉浸式故事阅读器：全屏浮层，大字号可读可滚动 */
.meet-story-reader { position: absolute; inset: 0; z-index: 1400; display: none; flex-direction: column; background: linear-gradient(160deg, #1a0f2e 0%, #2a1a4a 60%, #160c28 100%); }
.meet-story-reader.active { display: flex; }
.meet-story-reader .msr-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px; flex-shrink: 0; }
.meet-story-reader .msr-title { color: #fff; font-size: 20px; font-weight: 800; letter-spacing: .5px; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.meet-story-reader .msr-close { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 15px; cursor: pointer; flex-shrink: 0; }
.meet-story-reader .msr-meta { padding: 0 18px; color: rgba(184,148,230,.95); font-size: 12px; flex-shrink: 0; }
.meet-story-reader .msr-slogan { padding: 8px 18px 14px; color: rgba(255,255,255,.85); font-size: 13.5px; line-height: 1.6; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.meet-story-reader .msr-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 18px 30px; color: rgba(255,255,255,.92); font-size: 15.5px; line-height: 1.95; white-space: pre-line; }

/* =====================================================================
   Stage 5: 羁绊档案（详情页）— 沉浸式视觉头 + 悬浮信息卡
   ===================================================================== */
.bond-archive {
  position: absolute; inset: 0; z-index: 1300; display: none;
  background: #f3eefb; overflow-y: auto; -webkit-overflow-scrolling: touch;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.bond-archive.active { display: block; }
/* 左右低透明度氛围光影（呼应雨夜 / 粉紫科技感） */
.bond-ambient { position: fixed; top: 0; bottom: 0; width: 60px; z-index: 1; pointer-events: none; }
.bond-ambient-l { left: 0; background: linear-gradient(90deg, rgba(168,85,247,.16), transparent); }
.bond-ambient-r { right: 0; background: linear-gradient(270deg, rgba(199,83,126,.15), transparent); }
/* 顶部主视觉：AI 短剧视频（未播放时保持大占位 + 电影海报氛围） */
.bond-hero { position: relative; width: 100%; height: 45vh; min-height: 280px; max-height: 460px; background: #1a1428; overflow: hidden; cursor: pointer; }
.bond-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #1a1428; }
/* 封面（暂停态）：清晰图，保留轻微色彩优化 */
.bond-hero-cover { position: absolute; inset: 0; background-size: cover; background-position: center top; z-index: 1; pointer-events: none; filter: brightness(.95) saturate(1.05); transform: scale(1); }
/* 紫色柔光蒙版：降低亮度、突出白字、统一粉紫氛围 */
.bond-hero-tint { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(168,85,247,.30), transparent 62%),
    linear-gradient(180deg, rgba(38,18,66,.34), rgba(20,12,38,.16) 46%, rgba(20,12,38,.52));
  mix-blend-mode: multiply; }
/* 标题区暗化，保证白字可读 */
.bond-hero-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 2; background: linear-gradient(to top, rgba(20,12,38,.86), rgba(20,12,38,.28) 55%, transparent); pointer-events: none; }
/* 底部渐隐到页面浅紫底色，消除生硬切割 */
.bond-hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 14%; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, #f3eefb 0%, rgba(243,238,251,.7) 24%, transparent 62%); }
/* 透明点击守卫：拦截整个 hero 区域点击，避免 video poster 或背景图触发微信图片预览 */
.bond-hero-guard { position: absolute; inset: 0; z-index: 5; pointer-events: auto; background: transparent; }
.bond-archive.video-fs-mode .bond-hero-guard { display: none; }
.bond-video-toggle {
  position: absolute; right: 22px; bottom: 14px; z-index: 7; width: 52px; height: 52px; border-radius: 50%;
  border: none; background: rgba(20,12,38,.55); color: #fff; font-size: 21px; cursor: pointer;
  backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; pointer-events: auto;
  box-shadow: 0 0 14px rgba(168,85,247,.55); animation: bondPlayBreath 2.4s ease-in-out infinite;
}
@keyframes bondPlayBreath {
  0%,100% { box-shadow: 0 0 0 0 rgba(168,85,247,0), 0 0 14px rgba(168,85,247,.55); }
  50% { box-shadow: 0 0 0 12px rgba(168,85,247,0), 0 0 28px rgba(168,85,247,.9); }
}
.bond-video-fs-close {
  display: none; position: fixed; right: 16px; bottom: 28px; z-index: 2001;
  padding: 10px 18px; border-radius: 22px; border: none; background: rgba(255,255,255,.92);
  color: #1a1428; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.35);
  align-items: center; gap: 6px; backdrop-filter: blur(6px); pointer-events: auto;
}
.bond-archive.video-fs-mode .bond-video-fs-close { display: flex; }
/* 全屏播放静音/取消静音切换 */
.bond-video-mute {
  display: none; position: fixed; right: 16px; bottom: 84px; z-index: 2001;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.92); color: #1a1428; font-size: 18px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); align-items: center; justify-content: center;
  backdrop-filter: blur(6px); pointer-events: auto;
}
.bond-archive.video-fs-mode .bond-video-mute { display: flex; }
.bond-archive.video-fs-mode .bond-hero-video {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2000;
  object-fit: contain; background: #000; border-radius: 0;
}
/* 合规标签：黑色磨砂圆角（与首页按钮材质统一），前置醒目 */
.bond-compliance {
  position: absolute; left: 54px; top: 16px; z-index: 8; font-size: 11px; color: #fff;
  background: rgba(0,0,0,.5); padding: 5px 12px; border-radius: 16px; letter-spacing: .4px;
  white-space: nowrap; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); pointer-events: none;
}
.bond-hero-caption { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 6; text-align: center; padding: 0 16px; pointer-events: none; }
.bond-hero-name { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: 1px; text-shadow: 0 0 22px rgba(199,83,126,.85), 0 0 10px rgba(168,85,247,.7), 0 2px 12px rgba(0,0,0,.6); }
.bond-hero-role { font-size: 13px; color: rgba(228,220,255,.92); margin-top: 6px; letter-spacing: .3px; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.bond-back {
  position: absolute; top: 12px; left: 12px; z-index: 8; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(0,0,0,.32); color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px);
}
/* 视频下方：性格标签栏 */
.bond-meta { position: relative; z-index: 3; padding: 14px 16px 4px; }
.bond-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.bond-tag {
  font-size: 13px; padding: 6px 14px; border-radius: 16px; color: #6a4fb0;
  background: linear-gradient(135deg, rgba(168,85,247,.16), rgba(199,83,126,.14));
  border: 1px solid #7c3aed; transition: transform .2s ease;
}
.bond-tag:active { transform: scale(1.06); }
/* 悬浮信息卡：磨砂白卡 */
.bond-card {
  position: relative; z-index: 3; margin: 10px 12px 30px; padding: 22px 18px 28px;
  background: rgba(255,255,255,.86); backdrop-filter: blur(8px); border-radius: 24px;
  box-shadow: 0 10px 30px rgba(75,0,130,.12);
  border: 2px solid rgba(124,58,237,.45);
}
.bond-detail { font-size: 15px; line-height: 1.85; color: #4a4a5a; }
/* 第一层：人物档案折叠模块（磨砂玻璃 + 两栏） */
.bd-archive { border: 1px solid rgba(168,85,247,.15); border-radius: 18px; background: #ffffff; box-shadow: 0 12px 24px rgba(168,85,247,.10); margin-bottom: 16px; overflow: hidden; transition: box-shadow .25s ease, border-color .25s ease; }
.bd-archive.open { box-shadow: 0 14px 30px rgba(168,85,247,.16); border-color: rgba(168,85,247,.24); }
.bd-archive-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; cursor: pointer; user-select: none; transition: background .2s ease; border-radius: 18px; }
.bd-archive-head:active { background: rgba(168,85,247,.1); }
.bd-archive-title-wrap { display: flex; flex-direction: column; gap: 3px; }
.bd-archive-title { display: inline-block; font-size: 18px; font-weight: 700; color: #7c3aed; background: rgba(168,85,247,.08); border: 1px solid rgba(168,85,247,.14); padding: 4px 12px; border-radius: 999px; }
.bd-archive-sub { font-size: 12px; color: #a99fc0; font-weight: 400; line-height: 1.4; }
.bd-archive-toggle { color: #7c3aed; transition: transform .25s ease; font-size: 22px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.bd-archive.open .bd-archive-toggle { transform: rotate(180deg); }
.bd-archive-body { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.bd-archive.open .bd-archive-body { max-height: 1400px; }
.bd-arch-row { display: flex; gap: 12px; padding: 8px 16px; font-size: 15px; line-height: 1.75; }
.bd-arch-row span { flex: 0 0 70px; color: #a99fc0; }
.bd-arch-row b { flex: 1; color: #4a3f63; font-weight: 600; }
/* 人物关系谱：独立折叠下拉，与档案框对齐等宽 */
.bd-rel-wrap { margin: 4px 0 14px; background: #ffffff; border: 1px solid rgba(168,85,247,.28); border-radius: 16px; padding: 2px 10px 10px; box-shadow: 0 10px 22px rgba(168,85,247,.10); }
.bd-rel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; cursor: pointer; user-select: none; transition: background .2s ease; border-radius: 14px; }
.bd-rel-head:active { background: rgba(168,85,247,.08); }
.bd-rel-title-wrap { display: flex; flex-direction: column; gap: 3px; }
.bd-rel-title { font-size: 15px; font-weight: 700; color: #7c3aed; display: flex; align-items: center; gap: 7px; background: rgba(168,85,247,.08); border: 1px solid rgba(168,85,247,.14); padding: 4px 12px; border-radius: 999px; width: fit-content; }
.bd-rel-lock { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: #9a6b00; background: linear-gradient(135deg, rgba(255,215,0,.22), rgba(255,180,0,.14)); border: 1px solid rgba(214,168,0,.45); padding: 2px 8px; border-radius: 12px; white-space: nowrap; }
.bd-rel-sub { font-size: 12px; color: #a99fc0; font-weight: 400; line-height: 1.4; }
.bd-rel-toggle { transition: transform .25s ease; color: #7c3aed; font-size: 22px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.bd-rel-wrap.open .bd-rel-toggle { transform: rotate(180deg); }
.bd-rel-body { position: relative; max-height: 0; overflow: hidden; transition: max-height .45s ease; padding-left: 12px; }
.bd-rel-wrap.open .bd-rel-body { max-height: 1200px; padding-top: 8px; padding-bottom: 8px; }
.bd-rel-body::before { content: ''; position: absolute; left: 17px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(168,85,247,.55), rgba(199,83,126,.32)); }
.bd-rel-node { display: flex; align-items: flex-start; gap: 10px; padding: 7px 4px; font-size: 14px; line-height: 1.65; position: relative; }
.bd-rel-dot { flex: 0 0 11px; width: 11px; height: 11px; margin-top: 5px; border-radius: 50%; background: #A855F7; box-shadow: 0 0 0 3px rgba(168,85,247,.18); position: relative; z-index: 1; }
.bd-rel-dot.you { background: #c7537e; box-shadow: 0 0 0 3px rgba(199,83,126,.22); }
.bd-rel-node.center .bd-rel-role { color: #7c3aed; font-weight: 700; }
.bd-rel-role { flex: 0 0 92px; color: #7a5cc0; font-weight: 600; }
.bd-rel-desc { flex: 1; color: #6b6478; }
/* 第二层入口：长流程中段的“进聊天室”快速行动点 */
.bd-chat-entry { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 2px 0 18px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(168,85,247,.10), rgba(199,83,126,.08)); border: 1px dashed rgba(168,85,247,.35); }
.bd-chat-entry-text { font-size: 13px; color: #7a5cc0; letter-spacing: .5px; }
.bd-chat-entry-btn { width: 100%; padding: 12px; border: none; border-radius: 14px; background: linear-gradient(135deg, #BFA6FF 0%, #8B5CF6 100%); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(139,92,246,.35); transition: transform .12s ease, filter .2s ease, box-shadow .2s ease; }
.bd-chat-entry-btn:active { transform: scale(.98); filter: brightness(1.08); box-shadow: 0 2px 10px rgba(139,92,246,.45); }
/* 第二层：三幕分章节标题 */
.bd-story-head { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: #7c3aed; margin: 8px 0 16px; }
.bd-story-bar { width: 4px; height: 18px; border-radius: 3px; background: linear-gradient(180deg, #c7537e, #A855F7); }
/* 每一幕：回归轻盈的沉浸式叙事，不要卡片竖线 */
.bd-act { margin-bottom: 18px; }
/* 场记标题栏：紫黑渐变磨砂 + 胶片图标闪烁 + 解锁标签 */
.bd-act-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #fff; padding: 12px 15px; border-radius: 13px; background: linear-gradient(135deg, #2a1840, #5b2a8c); box-shadow: 0 5px 16px rgba(91,42,140,.4); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.08); }
.bd-act-film { font-size: 16px; animation: bdFilmFlicker 2.4s ease-in-out infinite; }
@keyframes bdFilmFlicker { 0%,100% { opacity: 1; filter: drop-shadow(0 0 5px rgba(199,83,126,.75)); } 50% { opacity: .5; filter: drop-shadow(0 0 1px rgba(199,83,126,.3)); } }
.bd-act-title-text { flex: 1; }
.bd-act-tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
.bd-act-tag.unlocked { color: #2f8f5b; background: rgba(47,143,91,.14); border: 1px solid rgba(47,143,91,.4); }
.bd-act-tag.paid { color: #9a6b00; background: linear-gradient(135deg, rgba(255,215,0,.22), rgba(255,180,0,.14)); border: 1px solid rgba(214,168,0,.45); }
.bd-act-scene { font-size: 13.5px; color: #a89fc0; margin: 10px 2px 13px; letter-spacing: .2px; }
.bd-act-lines { display: flex; flex-direction: column; gap: 10px; }
/* ===== 翻页小说阅读器：占比小于全屏的协调外框 + 容器内翻页 ===== */
.bd-reader {
  position: relative; margin: 8px 0 4px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(160deg, rgba(42,26,74,.96), rgba(22,12,40,.97));
  border: 1px solid rgba(168,85,247,.34);
  box-shadow: 0 14px 38px rgba(18,8,38,.5), inset 0 0 0 1px rgba(255,255,255,.05);
}
.bd-reader-viewport { position: relative; height: 56vh; max-height: 560px; overflow: hidden; }
.bd-reader-page {
  position: absolute; inset: 0; padding: 18px 18px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(100%); opacity: 0; visibility: hidden;
  transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .4s ease;
  display: flex; flex-direction: column; gap: 10px;
}
.bd-reader-page::-webkit-scrollbar { width: 0; }
.bd-reader-nav { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 0 6px; }
.bd-reader-arrow {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(199,160,240,.4);
  background: rgba(255,255,255,.06); color: #E6D6FF; font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s ease, transform .12s ease;
}
.bd-reader-arrow:active { transform: scale(.9); background: rgba(168,85,247,.3); }
.bd-reader-dots { display: flex; align-items: center; gap: 8px; }
.bd-reader-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(199,160,240,.3); transition: all .25s ease; }
.bd-reader-dot.active { width: 22px; border-radius: 5px; background: linear-gradient(90deg, #c7537e, #A855F7); }
.bd-reader-hint { text-align: center; font-size: 11.5px; color: rgba(199,160,240,.6); letter-spacing: .5px; padding: 0 0 12px; }
/* 分幕胶片进度条（滑动到对应幕自动点亮紫色） */
.bd-act-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; }
.bd-act-divider::before, .bd-act-divider::after { content: ''; flex: 1; height: 3px; border-radius: 3px; background: rgba(168,85,247,.16); transition: background .5s ease; }
.bd-act-divider.lit::before, .bd-act-divider.lit::after { background: linear-gradient(90deg, rgba(199,83,126,.5), #A855F7); }
.bd-film-strip { display: flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 8px; background: #2a1840; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.bd-film-strip i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background .4s ease, box-shadow .4s ease; }
.bd-act-divider.lit .bd-film-strip i { background: #d9b3ff; box-shadow: 0 0 6px rgba(199,83,126,.85); }
/* 长段旁白：独立浅紫半透磨砂文本卡 */
.bd-narr { font-size: 16px; line-height: 1.95; color: #6f6589; background: rgba(168,85,247,.1); border-left: 3px solid rgba(168,85,247,.4); padding: 12px 15px; border-radius: 4px 12px 12px 4px; backdrop-filter: blur(3px); }
/* 对话气泡：主角淡紫 / 你粉紫渐变白字 / 配角浅灰细边框 */
.bd-line { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.bd-line.me { align-items: flex-end; }
.bd-who { font-size: 13px; font-weight: 600; padding-left: 2px; }
.bd-who.main { color: #A855F7; }
.bd-who.support { color: #9a93ac; }
.bd-bubble { max-width: 86%; background: #F7F5FF; border: 1px solid rgba(168,85,247,.18); border-radius: 14px 14px 14px 4px; padding: 12px 16px; font-size: 16px; line-height: 1.9; color: #4a3f63; }
.bd-line.support .bd-bubble { background: #f5f3f9; border: 1px solid #ddd6ea; color: #6b6478; }
.bd-line.me .bd-bubble { background: linear-gradient(135deg, #c7537e, #A855F7); color: #fff; border: none; border-radius: 14px 14px 4px 14px; }
.bd-action { display: block; font-size: 13px; font-style: italic; color: #a99fc0; margin-bottom: 4px; }
/* 第三层：专属结尾（粉紫渐变磨砂 + 星光 + 3D爱心） */
.bd-ending { position: relative; margin-top: 14px; padding: 22px 18px 18px; border-radius: 20px; background: linear-gradient(160deg, rgba(199,83,126,.22), rgba(168,85,247,.24)); border: 1px solid rgba(199,83,126,.32); overflow: hidden; backdrop-filter: blur(4px); box-shadow: 0 16px 34px rgba(199,83,126,.14), 0 8px 22px rgba(168,85,247,.12); }
.bd-ending::before { content: ''; position: absolute; inset: 0; background:
   radial-gradient(2px 2px at 18% 22%, rgba(255,255,255,.9), transparent 60%),
   radial-gradient(2px 2px at 72% 30%, rgba(255,255,255,.75), transparent 60%),
   radial-gradient(1.5px 1.5px at 40% 68%, rgba(255,255,255,.7), transparent 60%),
   radial-gradient(2px 2px at 88% 72%, rgba(255,255,255,.8), transparent 60%),
   radial-gradient(1.5px 1.5px at 58% 88%, rgba(255,255,255,.6), transparent 60%);
  animation: bdStarTwinkle 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes bdStarTwinkle { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.bd-ending::after { content: ''; position: absolute; top: -40%; left: -10%; width: 55%; height: 180%; background: radial-gradient(circle, rgba(255,255,255,.4), transparent 60%); filter: blur(6px); animation: bdStarGlow 4s ease-in-out infinite; pointer-events: none; }
@keyframes bdStarGlow { 0%,100% { transform: translateX(0); opacity: .45; } 50% { transform: translateX(150%); opacity: .9; } }
.bd-ending-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; position: relative; }
.bd-heart { position: relative; width: 28px; height: 25px; transform: rotate(-45deg); animation: bdHeartBeat 1.5s ease-in-out infinite; }
.bd-heart::before, .bd-heart::after { content: ''; position: absolute; width: 28px; height: 25px; border-radius: 28px 28px 0 0; background: linear-gradient(135deg, #ff8fb8, #c7537e); }
.bd-heart::before { left: 14px; top: 0; transform: rotate(45deg); transform-origin: 0 100%; }
.bd-heart::after { left: 0; top: 14px; transform: rotate(-45deg); transform-origin: 100% 0; }
@keyframes bdHeartBeat { 0%,100% { transform: rotate(-45deg) scale(1); } 15% { transform: rotate(-45deg) scale(1.18); } 30% { transform: rotate(-45deg) scale(1); } 45% { transform: rotate(-45deg) scale(1.12); } }
.bd-ending-label { font-size: 16px; font-weight: 700; color: #8a2e63; position: relative; }
.bd-ending-text { font-size: 17.5px; line-height: 2.1; color: #4a3f63; font-weight: 500; position: relative; margin-top: 4px; }
.bd-ending-note { font-size: 11.5px; color: #9a6b8e; line-height: 1.6; text-align: center; margin-top: 12px; position: relative; }
/* 听 TA 心声（动态声波） */
.bond-voice {
  position: relative; display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 15px 22px;
  border-radius: 22px; background: rgba(168,85,247,.07);
  color: #7c3aed; font-size: 16px; font-weight: 700; cursor: pointer;
  border: 1.5px solid rgba(168,85,247,.3); user-select: none; overflow: hidden;
  box-shadow: 0 4px 16px rgba(168,85,247,.22), inset 0 0 0 1px rgba(255,255,255,.4);
}
.bond-voice::before {
  content: ''; position: absolute; inset: -2px; border-radius: 22px; padding: 1.5px;
  background: conic-gradient(from 0deg, rgba(168,85,247,0), rgba(168,85,247,.6), rgba(199,83,126,.5), rgba(168,85,247,0));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; animation: bondVoiceRing 4s linear infinite; pointer-events: none;
}
@keyframes bondVoiceRing { to { transform: rotate(360deg); } }
.bond-voice:active { transform: scale(.97); }
.bond-voice.playing { background: linear-gradient(135deg, rgba(199,83,126,.28), rgba(168,85,247,.28)); }
.bond-voice-ico { font-size: 20px; }
.bond-voice-label { white-space: nowrap; }
.bond-voice-wave { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; margin-left: 2px; }
.bond-voice-wave i { display: block; width: 3px; height: 6px; border-radius: 2px; background: #A855F7; animation: bondWave 1s ease-in-out infinite; }
.bond-voice-wave i:nth-child(2) { animation-delay: .15s; }
.bond-voice-wave i:nth-child(3) { animation-delay: .3s; }
.bond-voice-wave i:nth-child(4) { animation-delay: .45s; }
.bond-voice-wave i:nth-child(5) { animation-delay: .6s; }
.bond-voice.playing .bond-voice-wave i { background: #c7537e; }
@keyframes bondWave { 0%,100% { height: 6px; } 50% { height: 18px; } }
.bond-voice-text {
  margin-top: 0; font-size: 15px; color: #555; line-height: 1.75; background: #faf7ff;
  border-radius: 14px; padding: 0 14px; max-height: 0; overflow: hidden;
  transition: max-height .3s ease, padding .3s ease, margin-top .3s ease;
}
.bond-voice-text.show { margin-top: 10px; padding: 12px 14px; max-height: 220px; }
.bond-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.bond-btn { padding: 15px; border-radius: 16px; border: none; font-size: 16px; font-weight: 700; cursor: pointer; }
.bond-btn.primary { background: linear-gradient(135deg, #c7537e, #A855F7); color: #fff; box-shadow: 0 6px 22px rgba(168,85,247,.5), 0 0 0 0 rgba(168,85,247,.55); animation: bondBtnBreath 2.4s ease-in-out infinite; }
@keyframes bondBtnBreath { 0%,100% { box-shadow: 0 6px 22px rgba(168,85,247,.5), 0 0 0 0 rgba(168,85,247,.55); } 50% { box-shadow: 0 8px 34px rgba(168,85,247,.75), 0 0 0 10px rgba(168,85,247,0); } }
.bond-btn.primary:active { transform: scale(.98); }
.bond-btn.ghost { background: #fff; color: #7c3aed; border: 1.5px solid rgba(168,85,247,.3); }
.bond-btn.ghost.lock { background: #f3f1f7; color: #b3a9c4; border: 1.5px dashed #d8d0e6; cursor: not-allowed; }
/* —— 底部交互栏沉浸升级（听TA心声 / 主按钮 / 改写命运） —— */
.bond-voice-tag { font-style: normal; font-size: 10px; font-weight: 700; color: #A855F7; background: rgba(168,85,247,.16); border-radius: 8px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.bond-voice-state { font-size: 11.5px; color: #c7537e; font-weight: 600; margin-left: auto; white-space: nowrap; opacity: 0; transition: opacity .25s ease; }
.bond-voice.playing .bond-voice-state { opacity: 1; }
.bond-voice.playing { animation: bondVoicePlaying 1.5s ease-in-out infinite; box-shadow: 0 4px 22px rgba(199,83,126,.35), inset 0 0 0 1px rgba(255,255,255,.5); }
@keyframes bondVoicePlaying { 0%,100% { transform: scale(1); } 50% { transform: scale(1.018); } }
.bond-voice-note { margin-top: 10px; font-size: 12px; color: #9a6b00; background: linear-gradient(135deg, rgba(255,215,0,.14), rgba(255,180,0,.08)); border: 1px solid rgba(214,168,0,.4); border-radius: 12px; padding: 8px 12px; text-align: center; }
.bond-primary-wrap { display: flex; flex-direction: column; gap: 6px; }
.bond-btn.primary { position: relative; overflow: hidden; padding: 17px 15px; animation: bondBtnBreath 2.4s ease-in-out infinite, bondBtnFloat 3s ease-in-out infinite; }
.bond-btn.primary::before { content: ''; position: absolute; top: 0; left: -60%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: bondBtnSweep 2.8s ease-in-out infinite; pointer-events: none; }
@keyframes bondBtnSweep { 0% { left: -60%; } 60%,100% { left: 130%; } }
@keyframes bondBtnFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.bond-btn-guide { font-size: 11.5px; color: #9a8fc0; text-align: center; line-height: 1.5; }
.bond-btn.ghost.lock { background: rgba(168,85,247,.06); color: #8b7aa8; border: 1.5px solid rgba(168,85,247,.28); box-shadow: none; animation: none; }
.bond-rewrite-note { font-size: 11.5px; color: #b8aec8; text-align: center; line-height: 1.5; margin-top: -2px; }
.bond-compliance-foot { margin-top: 16px; font-size: 11px; color: #b0a6c4; text-align: center; line-height: 1.6; padding: 0 6px; }
/* —— 顶部收藏/分享浮动按钮（#48） —— */
.bond-fabs { position: absolute; top: 16px; right: 16px; z-index: 6; display: flex; gap: 10px; }
.bond-fab { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(20,12,38,.5); backdrop-filter: blur(6px); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.3); transition: transform .15s ease, background .2s ease; }
.bond-fab:active { transform: scale(.9); }
.bond-fab.collected { background: linear-gradient(135deg, #c7537e, #A855F7); color: #fff; border-color: transparent; }
/* —— TA 专属细节横向滑动卡（#48） —— */
.bd-detail-sec { margin-top: 18px; }
.bd-detail-sec-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: #3a2a5e; margin-bottom: 12px; background: rgba(168,85,247,.07); border: 1px solid rgba(168,85,247,.14); padding: 8px 12px; border-radius: 999px; }
.bd-detail-sec-bar { width: 4px; height: 15px; border-radius: 3px; background: linear-gradient(180deg, #c7537e, #A855F7); }
.bd-detail-cards { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.bd-detail-cards::-webkit-scrollbar { display: none; }
.bd-detail-card { flex: 0 0 auto; width: 132px; background: #ffffff; border: 1px solid rgba(168,85,247,.16); border-radius: 16px; padding: 14px 14px 16px; box-shadow: 0 10px 22px rgba(168,85,247,.10); display: flex; flex-direction: column; gap: 6px; }
.bd-detail-ico { font-size: 22px; }
.bd-detail-label { font-size: 12px; color: #9a8fc0; font-weight: 600; }
.bd-detail-val { font-size: 13.5px; color: #3a2a5e; font-weight: 700; line-height: 1.5; }
/* —— 底部阅读进度条（#48） —— */
.bond-progress { position: sticky; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(168,85,247,.14); z-index: 8; }
.bond-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #A855F7, #c7537e); transition: width .15s ease; box-shadow: 0 0 8px rgba(199,83,126,.6); }
/* —— 付费解锁引导条（#49） —— */
.bd-unlock-bar { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(255,215,0,.14), rgba(255,180,0,.08)); border: 1px solid rgba(214,168,0,.45); box-shadow: 0 6px 18px rgba(214,168,0,.16); }
.bd-unlock-ico { font-size: 22px; }
.bd-unlock-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.bd-unlock-txt b { font-size: 13.5px; color: #7a5700; }
.bd-unlock-txt span { font-size: 11.5px; color: #9a6b00; line-height: 1.5; }
.bd-unlock-btn { flex: 0 0 auto; border: none; border-radius: 14px; padding: 10px 16px; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #c7537e, #A855F7); box-shadow: 0 4px 14px rgba(199,83,126,.4); cursor: pointer; }
.bd-unlock-btn:active { transform: scale(.96); }
.bond-archive.bond-read-end .bd-unlock-bar { animation: bondUnlockPulse 1.6s ease-in-out infinite; }
@keyframes bondUnlockPulse { 0%,100% { box-shadow: 0 6px 18px rgba(214,168,0,.16); } 50% { box-shadow: 0 6px 26px rgba(214,168,0,.42); } }
/* 滚动渐显：幅度更大的"跳出"感 */
.reveal { opacity: 0; transform: translateY(28px) scale(0.96); transition: opacity .55s ease-out, transform .55s cubic-bezier(.175,.885,.32,1.275); }
.reveal.in { opacity: 1; transform: translateY(0) scale(1); }

/* =====================================================================
   Stage 6: 试爱聊天室 — 模糊变暗背景 + 双轨输入
   ===================================================================== */
.trial-chat { position: absolute; inset: 0; z-index: 1400; display: none; background: #1a1428; overflow: hidden; }
.trial-chat.active { display: block; }
.trial-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.42) blur(3px); transform: scale(1.1); }
.trial-blur { position: absolute; inset: 0; background: rgba(26,20,40,.55); }
/* 安卓 backdrop-filter 降级：深色遮罩已具备兜底变暗效果 */
@supports (backdrop-filter: blur(1px)) {
  .trial-blur { backdrop-filter: blur(7px); background: rgba(26,20,40,.45); }
}
.trial-nav {
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(84px + env(safe-area-inset-top, 0px)); z-index: 99999;
  display: flex; align-items: center; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 0; gap: 10px;
  background: #1a1428;
  border-bottom: 1px solid rgba(168,85,247,.35);
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.trial-nav-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.trial-back { font-size: 28px; color: #fff; cursor: pointer; line-height: 1; width: 26px; text-align: center; flex-shrink: 0; transition: transform .15s ease; font-weight: 700; text-shadow: 0 0 6px rgba(0,0,0,.5); -webkit-text-stroke: 0.5px rgba(0,0,0,.2); }
.trial-back:active { transform: scale(1.25); }
.trial-nav-center { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; }
.trial-nav-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(255,255,255,.5); flex-shrink: 0; display: none; }
.trial-nav-meta { min-width: 0; }
.trial-nav-name { font-size: 16.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trial-nav-sub { font-size: 12.5px; color: rgba(255,255,255,.78); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trial-nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.trial-confirm-btn {
  font-size: 15px; font-weight: 700; color: #fff; border: none; cursor: pointer;
  padding: 10px 18px; border-radius: 18px; white-space: nowrap;
  background: linear-gradient(135deg, #A855F7, #7c3aed);
  animation: trialConfirmBreath 2.4s ease-in-out infinite;
}
.trial-confirm-btn.confirmed,
.trial-confirm-btn:disabled {
  background: rgba(255,255,255,.16);
  color: rgba(255,255,255,.55);
  cursor: not-allowed;
  animation: none;
  box-shadow: none;
}
@keyframes trialConfirmBreath {
  0%,100% { box-shadow: 0 2px 10px rgba(124,58,237,.4), 0 0 0 0 rgba(168,85,247,0); }
  50% { box-shadow: 0 2px 14px rgba(168,85,247,.6), 0 0 0 6px rgba(168,85,247,0); }
}
.trial-confirm-btn:active:not(:disabled) { transform: scale(.96); }
.trial-msgs { position: absolute; top: calc(84px + env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: calc(156px + env(safe-area-inset-bottom, 0px)); z-index: 4; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.trial-msg-row { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; }
.trial-msg-row.user { justify-content: flex-end; }
.trial-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.trial-avatar.ai { background: linear-gradient(135deg, var(--purple), var(--purple-deep, #4B0082)); color: #fff; }
.trial-avatar.user { background: #fff; color: var(--purple-deep, #4B0082); }
.trial-avatar.user img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.trial-bubble { max-width: 76%; padding: 11px 15px; border-radius: 16px; font-size: 15px; line-height: 1.65; white-space: pre-line; word-break: break-word; }
.trial-msg-row.ai .trial-bubble { background: rgba(255,255,255,.94); color: #2a2440; border-bottom-left-radius: 4px; }
.trial-msg-row.user .trial-bubble { background: linear-gradient(135deg, var(--purple), var(--purple-deep, #4B0082)); color: #fff; border-bottom-right-radius: 4px; }
/* 括号动作描写：粉色斜体（对齐 AI伴侣聊天「圈头像顶部齐平」设计语言） */
.trial-action { color: #FF7EB3; font-style: italic; }
/* 旁白：独立居中粉色叙述条 */
.trial-msg-row.narr { justify-content: center; }
.trial-narr { max-width: 86%; padding: 9px 14px; border-radius: 12px; font-size: 13px; line-height: 1.7; text-align: center; color: #FF9ECB; background: rgba(255,158,203,.1); border: 1px solid rgba(255,158,203,.22); }
/* 底部快捷区：圆形发光场记板按钮 + 右侧 3 个分类快捷入口 */
.trial-quick-zone { position: absolute; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; z-index: 5; display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 8px 12px; }
.trial-phrase-fab {
  flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid rgba(217,184,255,.75);
  background: radial-gradient(circle at 35% 30%, #8b4fe0, #4B0082);
  color: #fff; font-size: 25px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px rgba(168,85,247,.18), 0 0 16px rgba(168,85,247,.55);
  animation: phraseFabGlow 2.6s ease-in-out infinite;
  transition: transform .12s ease;
}
.trial-phrase-fab:active { transform: scale(.9); }
@keyframes phraseFabGlow {
  0%,100% { box-shadow: 0 0 0 4px rgba(168,85,247,.18), 0 0 14px rgba(168,85,247,.45); }
  50% { box-shadow: 0 0 0 7px rgba(168,85,247,.3), 0 0 28px rgba(168,85,247,.85); }
}
.trial-quick-caps { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; flex: 1; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.trial-quick-cap {
  flex-shrink: 0; font-size: 13.5px; padding: 8px 13px; border-radius: 16px; white-space: nowrap;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.trial-quick-cap:active { background: var(--purple); transform: scale(.96); }
.trial-input-bar { position: absolute; bottom: 0; left: 0; right: 0; height: calc(56px + env(safe-area-inset-bottom, 0px)); z-index: 6; display: flex; align-items: center; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(26,20,40,.94); }
.trial-input-bar input {
  flex: 1; height: 42px; border-radius: 21px; border: none; padding: 0 16px; font-size: 15.5px;
  background: rgba(255,255,255,.12); color: #fff; outline: none;
}
.trial-input-bar input::placeholder { color: rgba(255,255,255,.5); }
.trial-send { height: 40px; padding: 0 18px; border-radius: 20px; border: none; background: linear-gradient(135deg, var(--purple), var(--purple-deep, #4B0082)); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 72px; }
.trial-send:active { transform: scale(.96); }
/* 场记板按钮（剧本台词库入口）已改为底部圆形发光 FAB（.trial-phrase-fab） */

/* 台词面板遮罩 + 侧边面板 */
.tp-mask { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; display: none; }
.tp-mask.show { display: block; }
.trial-phrase-panel { position: fixed; top: 0; bottom: 0; left: 0; width: 84%; max-width: 340px; z-index: 41; background: rgba(26,20,40,.94); backdrop-filter: blur(14px); border-right: 1px solid rgba(168,85,247,.3); box-shadow: 4px 0 24px rgba(0,0,0,.45); transform: translateX(-106%); transition: transform .28s ease; display: flex; flex-direction: column; }
.trial-phrase-panel.show { transform: translateX(0); }
.tp-head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 10px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.tp-head-info { flex: 1; min-width: 0; }
.tp-title { font-size: 15.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-sub { font-size: 12.5px; color: rgba(201,160,240,.85); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-tabs { display: flex; gap: 6px; }
.tp-tab { font-size: 12px; color: rgba(255,255,255,.6); padding: 4px 9px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); cursor: pointer; white-space: nowrap; }
.tp-tab.active { color: #fff; background: linear-gradient(135deg, #A855F7, #7c3aed); border-color: transparent; }
.tp-close { font-size: 22px; color: rgba(255,255,255,.6); cursor: pointer; line-height: 1; padding: 0 2px; }
.tp-close:active { color: #fff; }
.tp-body { flex: 1; overflow-y: auto; padding: 12px 12px 18px; }
.tp-group { margin-bottom: 16px; }
.tp-group-title { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: #D9B8FF; margin-bottom: 8px; }
.tp-group-title .film { font-size: 14px; }
.tp-group-sub { font-size: 12.5px; color: rgba(201,160,240,.7); margin-left: 6px; font-weight: 400; }
.tp-card { background: rgba(255,255,255,.06); border: 1px solid rgba(168,85,247,.3); border-radius: 12px; padding: 11px 14px; font-size: 14.5px; line-height: 1.65; color: #F0E9FF; margin-bottom: 8px; cursor: pointer; transition: transform .14s ease, background .2s, box-shadow .2s, border-color .2s; }
.tp-card:active { transform: scale(.97); }
/* 分层边框：4 类女生情绪，颜色各异 + 悬浮微动效 */
.tp-card-empath { border: 1px solid rgba(168,85,247,.5); }
.tp-card-empath:active { background: rgba(168,85,247,.18); }
.tp-card-ambig { border: 1px solid rgba(255,150,200,.55); background: rgba(255,170,210,.07); }
.tp-card-ambig:active { background: rgba(255,150,200,.18); }
.tp-card-scene { border: 1px solid rgba(255,140,190,.6); background: rgba(255,180,210,.08); }
.tp-card-scene:active { background: rgba(255,140,190,.2); }
.tp-card-confess { border: 1px solid rgba(150,140,255,.6); background: rgba(150,140,255,.09); box-shadow: 0 0 12px rgba(140,130,255,.22); }
.tp-card-confess:active { background: rgba(150,140,255,.2); }
.tp-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(168,85,247,.28); border-color: rgba(168,85,247,.7); }
.tp-card .lock { color: #FFD56B; font-size: 11px; margin-left: 4px; }
/* 引导发送的「那一句」：金色脉冲圈 + 提示标 */
.tp-card-suggest {
  position: relative;
  border-color: #FFD56B !important;
  background: rgba(255,213,107,.12) !important;
  animation: tpCardPulse 1.1s ease-in-out infinite;
}
.tp-card-suggest::after {
  content: '👆 点这句发送';
  position: absolute; top: -11px; right: 10px; z-index: 2;
  font-size: 11px; font-weight: 700; color: #2a2440; white-space: nowrap;
  background: linear-gradient(135deg, #FFE08A, #FFC94A);
  border-radius: 10px; padding: 2px 8px; box-shadow: 0 2px 8px rgba(255,201,74,.5);
}
@keyframes tpCardPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(255,213,107,.35), 0 0 12px rgba(255,213,107,.5); }
  50% { box-shadow: 0 0 0 6px rgba(255,213,107,.55), 0 0 24px rgba(255,213,107,.9); }
}
.tp-foot { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.tp-foot-btn { flex: 1; font-size: 13px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 8px 4px; cursor: pointer; }
.tp-foot-btn:active { background: rgba(168,85,247,.2); }
/* 首次引导弹窗 */
.tp-guide { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 30px; background: rgba(0,0,0,.55); }
.tp-guide.show { display: flex; }
.tp-guide-box { background: #fff; border-radius: 18px; padding: 24px 22px; text-align: center; max-width: 280px; box-shadow: 0 12px 40px rgba(0,0,0,.4); animation: tpGuideIn .3s ease; }
@keyframes tpGuideIn { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tp-guide-title { font-size: 18px; font-weight: 800; color: #A855F7; margin-bottom: 10px; }
.tp-guide-body { font-size: 14px; color: #555; line-height: 1.7; margin-bottom: 18px; }
.tp-guide-btn { background: linear-gradient(135deg, #A855F7, #7c3aed); color: #fff; border: none; border-radius: 20px; padding: 10px 28px; font-size: 14px; font-weight: 600; cursor: pointer; }
/* 试爱完结横幅 */
.trial-end-banner {
  position: absolute; top: 76px; left: 0; right: 0; z-index: 5; transform: translateY(-130%);
  background: linear-gradient(135deg, var(--purple), var(--purple-deep, #4B0082)); color: #fff;
  text-align: center; padding: 13px; font-size: 15px; font-weight: 700; letter-spacing: .5px;
  box-shadow: 0 6px 20px rgba(75,0,130,.4); transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.trial-end-banner.show { transform: translateY(0); }
/* 契约签订弹窗：深色磨砂、低饱和紫调浪漫、轻量星光仪式感 */
.trial-contract { position: fixed; inset: 0; z-index: 999999; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(10,8,18,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.trial-contract.active { display: flex; }
/* 满屏 bulingbuling 星光：弹窗打开时全屏闪烁约 1s */
.trial-contract-sparkles {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  opacity: 1; transition: opacity .45s ease;
}
.trial-contract-sparkles i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px 2px rgba(255,255,255,.85), 0 0 14px 4px rgba(199,125,255,.55);
  animation: tcsSparkle .9s ease-in-out infinite;
}
.trial-contract-sparkles i:nth-child(3n) { background: #E8C6FF; box-shadow: 0 0 8px 2px rgba(232,198,255,.9), 0 0 16px 5px rgba(168,85,247,.5); width: 4px; height: 4px; }
.trial-contract-sparkles i:nth-child(5n) { background: #FFD6F5; width: 5px; height: 5px; box-shadow: 0 0 10px 3px rgba(255,214,245,.9), 0 0 20px 6px rgba(212,83,126,.45); }
@keyframes tcsSparkle {
  0%,100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
}
.trial-contract-box {
  position: relative; max-width: 340px; width: 100%; text-align: center;
  background: rgba(30,26,44,.92);
  border: 1px solid rgba(199,170,255,.22);
  border-radius: 12px;
  padding: 28px 22px 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  opacity: 0; transform: scale(.86) translateY(18px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.22,.68,.43,1.15);
}
.trial-contract-box.show { opacity: 1; transform: scale(1) translateY(0); }

/* 顶部仪式区：金色同心结 + 淡紫星光 */
.trial-contract-ritual { position: relative; width: 64px; height: 40px; margin: 0 auto 14px; }
.trial-contract-knot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 36px; height: 36px; line-height: 34px; border-radius: 50%;
  font-size: 20px; font-weight: 300; color: #E8C66C;
  border: 1.5px solid rgba(232,198,108,.55);
  background: radial-gradient(circle at 30% 30%, rgba(232,198,108,.18), transparent 60%);
  text-align: center;
}
.trial-contract-stars { position: absolute; inset: 0; pointer-events: none; }
.trial-contract-stars i {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(199,170,255,.85);
  box-shadow: 0 0 8px 1px rgba(199,170,255,.55);
  opacity: .35;
}
.trial-contract-stars i:first-child { left: 2px; top: 6px; }
.trial-contract-stars i:last-child { right: 4px; top: 18px; }
.trial-contract-box.show .trial-contract-stars i { animation: bondStarFlash 1.2s ease-out both; }
.trial-contract-box.show .trial-contract-stars i:last-child { animation-delay: .25s; }
@keyframes bondStarFlash {
  0% { opacity: .35; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.7); box-shadow: 0 0 14px 3px rgba(199,170,255,.85); }
  100% { opacity: .5; transform: scale(1.1); }
}

.trial-contract-title { font-size: 20px; font-weight: 800; color: #D9B8FF; margin-bottom: 16px; letter-spacing: .5px; }
.trial-contract-body { text-align: left; margin-bottom: 16px; }
.trial-contract-body .tcb-main { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.88); margin: 0 0 10px; }
.trial-contract-body .tcb-main b { color: #E8C6FF; font-weight: 700; }
.trial-contract-body .tcb-sub { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.58); margin: 0 0 10px; }
.trial-contract-body .tcb-note { font-size: 11px; line-height: 1.5; color: rgba(255,255,255,.35); margin: 0; }

/* 紫金渐变分割线 */
.trial-contract-divider { height: 1px; margin: 0 0 18px; background: linear-gradient(90deg, transparent, rgba(199,170,255,.55), rgba(232,198,108,.55), transparent); opacity: .7; }

.trial-contract-actions { display: flex; gap: 12px; }
.trial-btn { flex: 1; padding: 13px 8px; border-radius: 14px; font-size: 14px; font-weight: 700; border: none; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease; }
.trial-btn:active { transform: scale(.97); }
.trial-btn.primary {
  position: relative; color: #fff;
  background: linear-gradient(135deg, #B76CFD 0%, #7c3aed 100%);
  box-shadow: 0 0 0 0 rgba(183,108,253,.45), 0 6px 18px rgba(90,40,190,.45);
  animation: bondBtnGlow 2.4s ease-in-out infinite;
}
@keyframes bondBtnGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(183,108,253,.35), 0 6px 18px rgba(90,40,190,.4); }
  50% { box-shadow: 0 0 16px 3px rgba(183,108,253,.45), 0 6px 22px rgba(90,40,190,.5); }
}
.trial-btn.ghost { background: transparent; color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.22); }

/* 羁绊缔结成功仪式提示 */
#bondSuccessToast {
  position: fixed; inset: 0; z-index: 9999999; display: none; align-items: center; justify-content: center; pointer-events: none;
}
#bondSuccessToast.show { display: flex; animation: bstFadeIn .35s ease both; }
@keyframes bstFadeIn { from { opacity: 0; } to { opacity: 1; } }
.bst-inner {
  background: rgba(20,16,32,.92); border: 1px solid rgba(232,198,108,.35); border-radius: 18px;
  padding: 26px 34px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.5);
  animation: bstScaleIn .4s cubic-bezier(.22,.68,.43,1.15) both;
}
@keyframes bstScaleIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
.bst-knot { width: 46px; height: 46px; line-height: 44px; margin: 0 auto 12px; border-radius: 50%; font-size: 26px; color: #E8C66C; border: 1.5px solid rgba(232,198,108,.5); background: radial-gradient(circle at 30% 30%, rgba(232,198,108,.2), transparent 65%); }
.bst-text { font-size: 16px; font-weight: 700; color: #F3E9FF; letter-spacing: .5px; }
/* 聊天室 AI 列表项：未确立关系时显示「确定关系」入口；确立后整项置灰 */
.chatroom-item { position: relative; }
.chatroom-confirm-btn {
  flex-shrink: 0; align-self: center; margin-left: 8px;
  font-size: 11.5px; font-weight: 700; color: #fff; cursor: pointer;
  padding: 6px 12px; border-radius: 14px; white-space: nowrap;
  background: linear-gradient(135deg, #A855F7, #7c3aed);
  box-shadow: 0 2px 10px rgba(124,58,237,.4);
}
.chatroom-confirm-btn:active { transform: scale(.96); }
.chatroom-confirmed-label {
  font-size: 11px; color: #999; white-space: nowrap; margin-top: 6px;
}
.chatroom-item.companion { opacity: .62; filter: grayscale(.25); }
.chatroom-item.companion .chatroom-confirm-btn { display: none; }

/* 进入剧本世界的引导画卷（淡蒙层 + 卷轴展开） */
.trial-intro-mask {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center; padding: 26px;
  background: rgba(12,8,22,.55);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.trial-intro-mask.show { opacity: 1; visibility: visible; }
.trial-intro-scroll {
  position: relative; max-width: 340px; width: 100%;
  background: linear-gradient(160deg, #2a2140, #1b1430);
  border: 1px solid rgba(168,85,247,.45);
  border-radius: 14px; padding: 30px 22px 22px; text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(217,184,255,.15) inset;
  transform: scaleX(.18); opacity: 0; transform-origin: center;
  transition: transform .6s cubic-bezier(.22,.9,.3,1) .08s, opacity .5s ease .08s;
}
.trial-intro-mask.show .trial-intro-scroll { transform: scaleX(1); opacity: 1; }
/* 卷轴上下轴杆 */
.trial-intro-scroll::before, .trial-intro-scroll::after {
  content: ''; position: absolute; left: -7px; right: -7px; height: 9px;
  background: linear-gradient(90deg, #5a3a96, #A855F7, #5a3a96);
  border-radius: 7px; box-shadow: 0 2px 7px rgba(0,0,0,.45);
}
.trial-intro-scroll::before { top: -5px; }
.trial-intro-scroll::after { bottom: -5px; }
.ti-badge { display: inline-block; font-size: 12px; font-weight: 700; color: #fff; padding: 4px 12px; border-radius: 14px; background: rgba(168,85,247,.32); border: 1px solid rgba(217,184,255,.4); margin-bottom: 12px; }
.ti-title { font-size: 22px; font-weight: 800; color: #fff; line-height: 1.4; letter-spacing: .5px; text-shadow: 0 2px 12px rgba(168,85,247,.5); }
.ti-lead { font-size: 14px; color: #FFD56B; font-weight: 700; margin-top: 8px; }
.ti-desc { font-size: 13px; color: rgba(255,255,255,.8); line-height: 1.7; margin: 10px 4px 14px; }
.ti-list { display: flex; flex-direction: column; gap: 9px; text-align: left; margin: 0 2px; }
.ti-item { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.9); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px 10px; }
.ti-item b { color: #D9B8FF; font-weight: 700; flex-shrink: 0; }
.ti-dot { color: #FFD56B; font-weight: 800; flex-shrink: 0; }
.ti-tap { margin-top: 16px; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #A855F7, #7c3aed); border-radius: 18px; padding: 9px 0; box-shadow: 0 4px 14px rgba(124,58,237,.45); animation: tiTapBreath 1.8s ease-in-out infinite; }
@keyframes tiTapBreath { 0%,100% { box-shadow: 0 2px 10px rgba(124,58,237,.4); } 50% { box-shadow: 0 4px 20px rgba(168,85,247,.75); } }

/* =================================================================
   AI嘉宾详情页深色玻璃主题覆盖（v20260721_0015）
   用 .bond-archive 前缀提升优先级，完整覆盖原浅色方案
   ================================================================= */

/* 页面底色：深紫黑渐变 */
.bond-archive {
  background: linear-gradient(180deg, #160f24 0%, #1a1428 38%, #231636 100%);
}
/* hero 到内容过渡：融进深色 */
.bond-hero-fade {
  background: linear-gradient(to top, #1a1428 0%, rgba(26,20,40,.85) 30%, transparent 72%);
}

/* 标签：深色玻璃 */
.bond-archive .bond-tag,
.bond-tag {
  color: #e3ccff;
  background: rgba(168,85,247,.18);
  border: 1px solid rgba(168,85,247,.45);
}

/* 悬浮信息卡：深色玻璃 */
.bond-archive .bond-card,
.bond-card {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.08);
  border: 1px solid rgba(168,85,247,.32);
}
.bond-archive .bond-detail,
.bond-detail {
  color: rgba(255,255,255,.82);
}

/* 人物档案：深色玻璃 */
.bond-archive .bd-archive,
.bd-archive {
  background: rgba(30,22,50,.72);
  border: 1px solid rgba(168,85,247,.22);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.bond-archive .bd-archive.open,
.bd-archive.open {
  border-color: rgba(168,85,247,.4);
  box-shadow: 0 14px 34px rgba(0,0,0,.3);
}
.bond-archive .bd-archive-head:active,
.bd-archive-head:active { background: rgba(168,85,247,.12); }
.bond-archive .bd-archive-title,
.bd-archive-title {
  color: #e3ccff;
  background: rgba(168,85,247,.14);
  border: 1px solid rgba(168,85,247,.28);
}
.bond-archive .bd-archive-sub,
.bd-archive-sub { color: rgba(255,255,255,.55); }
.bond-archive .bd-archive-toggle,
.bd-archive-toggle { color: #d9b3ff; }
.bond-archive .bd-arch-row span,
.bd-arch-row span { color: rgba(255,255,255,.55); }
.bond-archive .bd-arch-row b,
.bd-arch-row b { color: rgba(255,255,255,.92); }

/* 人物关系谱：深色玻璃 */
.bond-archive .bd-rel-wrap,
.bd-rel-wrap {
  background: rgba(30,22,50,.72);
  border: 1px solid rgba(168,85,247,.28);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.bond-archive .bd-rel-head:active,
.bd-rel-head:active { background: rgba(168,85,247,.1); }
.bond-archive .bd-rel-title,
.bd-rel-title {
  color: #e3ccff;
  background: rgba(168,85,247,.14);
  border: 1px solid rgba(168,85,247,.28);
}
.bond-archive .bd-rel-sub,
.bd-rel-sub { color: rgba(255,255,255,.55); }
.bond-archive .bd-rel-toggle,
.bd-rel-toggle { color: #d9b3ff; }
.bond-archive .bd-rel-node.center .bd-rel-role,
.bd-rel-node.center .bd-rel-role { color: #d9b3ff; }
.bond-archive .bd-rel-role,
.bd-rel-role { color: #d9b3ff; }
.bond-archive .bd-rel-desc,
.bd-rel-desc { color: rgba(255,255,255,.75); }

/* 桌面端：试爱聊天室以 fixed 覆盖整个视口，避免手机壳内 absolute 被父级 padding/圆角裁出白边 */
@media (min-width: 421px) {
  .trial-chat {
    position: fixed;
    top: 0; left: 50%; transform: translateX(-50%);
    width: min(90vw, 390px);
    height: 100vh; height: 100dvh;
    border-radius: 0;
    z-index: 1500;
  }
}

/* 聊天入口 */
.bond-archive .bd-chat-entry,
.bd-chat-entry {
  background: rgba(168,85,247,.12);
  border: 1px dashed rgba(168,85,247,.45);
}
.bond-archive .bd-chat-entry-text,
.bd-chat-entry-text { color: rgba(255,255,255,.75); }

/* 三幕标题 */
.bond-archive .bd-story-head,
.bd-story-head { color: #d9b3ff; }

/* 旁白 */
.bond-archive .bd-narr,
.bd-narr {
  color: rgba(255,255,255,.78);
  background: rgba(168,85,247,.12);
  border-left: 3px solid rgba(168,85,247,.5);
}

/* 对话气泡 */
.bond-archive .bd-who.main,
.bd-who.main { color: #d9b3ff; }
.bond-archive .bd-who.support,
.bd-who.support { color: rgba(255,255,255,.55); }
.bond-archive .bd-bubble,
.bd-bubble {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(168,85,247,.28);
  color: rgba(255,255,255,.88);
}
.bond-archive .bd-line.support .bd-bubble,
.bd-line.support .bd-bubble {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.72);
}
.bond-archive .bd-action,
.bd-action { color: rgba(255,255,255,.55); }

/* 专属结局 */
.bond-archive .bd-ending,
.bd-ending {
  background: linear-gradient(160deg, rgba(199,83,126,.18), rgba(168,85,247,.22));
  border: 1px solid rgba(199,83,126,.35);
  box-shadow: 0 16px 34px rgba(0,0,0,.24), 0 8px 22px rgba(168,85,247,.12);
}
.bond-archive .bd-ending-label,
.bd-ending-label { color: #ffd6e6; }
.bond-archive .bd-ending-text,
.bd-ending-text { color: rgba(255,255,255,.88); }
.bond-archive .bd-ending-note,
.bd-ending-note { color: rgba(255,255,255,.58); }

/* 听TA心声：深色玻璃 */
.bond-archive .bond-voice,
.bond-voice {
  background: rgba(168,85,247,.12);
  color: #d9b3ff;
  border: 1.5px solid rgba(168,85,247,.38);
  box-shadow: 0 4px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.08);
}
.bond-archive .bond-voice.playing,
.bond-voice.playing { background: linear-gradient(135deg, rgba(199,83,126,.28), rgba(168,85,247,.28)); }
.bond-archive .bond-voice-wave i,
.bond-voice-wave i { background: #d9b3ff; }
.bond-archive .bond-voice.playing .bond-voice-wave i,
.bond-voice.playing .bond-voice-wave i { background: #ff9ecb; }
.bond-archive .bond-voice-tag,
.bond-voice-tag { color: #d9b3ff; background: rgba(168,85,247,.2); }
.bond-archive .bond-voice-state,
.bond-voice-state { color: #ff9ecb; }
.bond-archive .bond-voice-text,
.bond-voice-text {
  color: rgba(255,255,255,.82);
  background: rgba(30,22,50,.72);
}

/* 底部按钮 */
.bond-archive .bond-btn.ghost,
.bond-btn.ghost {
  background: rgba(255,255,255,.08);
  color: #d9b3ff;
  border: 1.5px solid rgba(168,85,247,.38);
}
.bond-archive .bond-btn.ghost.lock,
.bond-btn.ghost.lock {
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.45);
  border: 1.5px dashed rgba(255,255,255,.18);
}
.bond-archive .bond-btn-guide,
.bond-btn-guide { color: rgba(255,255,255,.55); }
.bond-archive .bond-rewrite-note,
.bond-rewrite-note { color: rgba(255,255,255,.55); }
.bond-archive .bond-compliance-foot,
.bond-compliance-foot { color: rgba(255,255,255,.55); }

/* 删除黄色语音解锁条 */
.bond-voice-note { display: none !important; }