/* ============================================================
 * 大婚仪式模拟器样式
 * 类名与 js/wedding-ceremony.js 中 DOM 严格对应
 * ============================================================ */

/* 婚礼页面容器（嵌入 sub-page，铺满父容器） */
.wc-stage-host {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fceceb 0%, #f7f3eb 50%, #f3e9e7 100%);
}

/* 包裹层：以前是 fixed modal，现在改为相对父容器铺满 */
.wc-modal {
  position: absolute; inset: 0;
  background: transparent;
  display: none;
  justify-content: center; align-items: center;
  z-index: 1;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.wc-modal[style*="flex"] { display: flex; }
.wc-modal[data-embed="page"] { display: flex; }

/* 舞台壳：铺满 sub-page，去掉手机外框 */
.wc-phone {
  width: 100%; height: 100%;
  max-height: none;
  background: linear-gradient(135deg, #fceceb 0%, #f7f3eb 50%, #f3e9e7 100%);
  border-radius: 0;
  position: relative;
  overflow: hidden;
  box-shadow: none;
  color: #544341;
  display: flex; flex-direction: column;
}

.wc-master-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: #0b0d18;
  z-index: 1;
  transition: background-image 0.5s ease;
}

#wc-canvas {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 999;
  width: 100%; height: 100%;
}

/* 关闭按钮 */
.wc-close {
  position: absolute; top: 14px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #a62424;
  font-size: 22px; line-height: 28px; text-align: center;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  user-select: none;
}
.wc-close:hover { background: #fff; }

/* ============================================================
 * 转场幕布 v2 — 取代旧的"纯色 + 一行字"过场
 * 三种风格各自独立 DOM 子元素 + 关键帧动画
 * ============================================================ */
.wc-curtain {
  position: absolute; inset: 0;
  z-index: 200; pointer-events: none; opacity: 0;
  display: flex; justify-content: center; align-items: center;
  overflow: hidden;
}
.wc-curtain.wc-chinese-anim,
.wc-curtain.wc-western-anim,
.wc-curtain.wc-modern-anim {
  animation: wcCurtainFade 1.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes wcCurtainFade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 通用标题容器 */
.wc-curtain-title {
  position: relative;
  z-index: 5;
  display: flex; flex-direction: column; align-items: center;
  user-select: none;
  text-align: center;
}

/* ===================== 古风：双开红绸 + 烫金字 + 樱花 ===================== */
.wc-chinese-anim {
  background:
    radial-gradient(ellipse at center, #c2272d 0%, #7a1212 60%, #3a0808 100%);
}
.wc-chinese-anim::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,210,150,0.05) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(255,210,150,0.04) 0 2px, transparent 2px 18px);
  pointer-events: none;
}

/* 双开红绸 */
.wc-silk {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background:
    linear-gradient(180deg, #d4282e 0%, #a01818 50%, #6b0d0d 100%);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
}
.wc-silk::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,205,150,0.08) 0 1px, transparent 1px 6px);
}
.wc-silk-l {
  left: 0;
  border-right: 2px solid rgba(255, 200, 130, 0.55);
  animation: wcSilkOpenL 1.6s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
.wc-silk-r {
  right: 0;
  border-left: 2px solid rgba(255, 200, 130, 0.55);
  animation: wcSilkOpenR 1.6s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
@keyframes wcSilkOpenL {
  0%, 30% { transform: translateX(0); }
  100%    { transform: translateX(-105%); }
}
@keyframes wcSilkOpenR {
  0%, 30% { transform: translateX(0); }
  100%    { transform: translateX(105%); }
}

/* 古风标题 — 烫金字渐变 + 字符逐个浮现 */
.wc-chinese-anim .wc-curtain-title {
  flex-direction: row;
  font-family: 'KaiTi', 'STKaiti', 'STSong', 'SimSun', serif;
  font-size: 30px;
  letter-spacing: 4px;
  font-weight: 700;
  color: transparent;
  background: linear-gradient(180deg, #ffe9aa 0%, #ffc764 40%, #b87b1d 80%, #ffd989 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(255, 200, 110, 0.5));
}
.wc-chinese-anim .wc-curtain-title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: wcCharIn 0.5s ease forwards;
}
.wc-chinese-anim .wc-dot { margin: 0 8px; }
.wc-chinese-anim .wc-curtain-title span:nth-child(1)  { animation-delay: 0.55s; }
.wc-chinese-anim .wc-curtain-title span:nth-child(2)  { animation-delay: 0.65s; }
.wc-chinese-anim .wc-curtain-title span:nth-child(3)  { animation-delay: 0.75s; }
.wc-chinese-anim .wc-curtain-title span:nth-child(4)  { animation-delay: 0.85s; }
.wc-chinese-anim .wc-curtain-title span:nth-child(5)  { animation-delay: 0.95s; }
.wc-chinese-anim .wc-curtain-title span:nth-child(6)  { animation-delay: 1.05s; }
.wc-chinese-anim .wc-curtain-title span:nth-child(7)  { animation-delay: 1.15s; }
.wc-chinese-anim .wc-curtain-title span:nth-child(8)  { animation-delay: 1.25s; }
.wc-chinese-anim .wc-curtain-title span:nth-child(9)  { animation-delay: 1.35s; }
@keyframes wcCharIn {
  to { opacity: 1; transform: translateY(0); }
}

/* 樱花瓣飘落 */
.wc-petals { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.wc-petal {
  position: absolute;
  width: 14px; height: 14px;
  background: radial-gradient(ellipse at 50% 30%, #fff0f3 0%, #ffc4cf 50%, #f78fa6 100%);
  border-radius: 50% 0 50% 50%;
  opacity: 0;
  animation: wcPetalFall 1.7s ease-in forwards;
}
.wc-petal:nth-child(1) { left:  10%; animation-delay: 0.3s; }
.wc-petal:nth-child(2) { left:  25%; animation-delay: 0.5s; }
.wc-petal:nth-child(3) { left:  45%; animation-delay: 0.4s; }
.wc-petal:nth-child(4) { left:  60%; animation-delay: 0.7s; }
.wc-petal:nth-child(5) { left:  75%; animation-delay: 0.55s; }
.wc-petal:nth-child(6) { left:  88%; animation-delay: 0.65s; }
@keyframes wcPetalFall {
  0%   { opacity: 0; transform: translateY(-15%) rotate(0deg); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(120vh) rotate(540deg); }
}

/* ===================== 西幻：教堂光束 + 玫瑰爆开 + 衬线烫银金字 ===================== */
.wc-western-anim {
  background:
    radial-gradient(ellipse at 50% 35%, #fbf1de 0%, #d8c2a6 60%, #8e7460 100%);
}
.wc-western-anim::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,240,0.8) 0%, rgba(255,255,240,0) 55%);
  pointer-events: none;
}

/* 光束 */
.wc-light-beams {
  position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: screen;
}
.wc-light-beams span {
  position: absolute;
  top: -20%;
  width: 60px;
  height: 140%;
  background: linear-gradient(180deg, rgba(255,250,230,0) 0%, rgba(255,245,210,0.65) 40%, rgba(255,250,230,0) 100%);
  filter: blur(8px);
  transform-origin: top center;
  opacity: 0;
  animation: wcBeamSweep 1.5s ease-out forwards;
}
.wc-light-beams span:nth-child(1) { left: 18%; transform: rotate(12deg);  animation-delay: 0.0s;  }
.wc-light-beams span:nth-child(2) { left: 38%; transform: rotate(-8deg);  animation-delay: 0.15s; width: 80px; }
.wc-light-beams span:nth-child(3) { left: 58%; transform: rotate(15deg);  animation-delay: 0.3s; }
.wc-light-beams span:nth-child(4) { left: 78%; transform: rotate(-12deg); animation-delay: 0.2s;  width: 50px; }
@keyframes wcBeamSweep {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0.85; }
}

/* 玫瑰爆开（中央向四周散） */
.wc-rose-burst {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  z-index: 4;
}
.wc-rose-burst span {
  position: absolute;
  left: 0; top: 0;
  width: 14px; height: 18px;
  margin-left: -7px; margin-top: -9px;
  background: radial-gradient(ellipse at 50% 35%, #ffeef0 0%, #f5b8c2 45%, #c75a6f 100%);
  border-radius: 60% 60% 60% 60% / 100% 100% 50% 50%;
  opacity: 0;
  animation: wcRosePop 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.wc-rose-burst span:nth-child(1) { --x: -120px; --y: -90px;  --r: -40deg; animation-delay: 0.45s; }
.wc-rose-burst span:nth-child(2) { --x:  120px; --y: -90px;  --r:  35deg; animation-delay: 0.50s; }
.wc-rose-burst span:nth-child(3) { --x: -150px; --y:  20px;  --r: -20deg; animation-delay: 0.55s; }
.wc-rose-burst span:nth-child(4) { --x:  150px; --y:  20px;  --r:  25deg; animation-delay: 0.60s; }
.wc-rose-burst span:nth-child(5) { --x:  -80px; --y:  130px; --r:  60deg; animation-delay: 0.50s; }
.wc-rose-burst span:nth-child(6) { --x:   80px; --y:  130px; --r: -55deg; animation-delay: 0.55s; }
.wc-rose-burst span:nth-child(7) { --x:    0px; --y: -160px; --r:  10deg; animation-delay: 0.65s; }
.wc-rose-burst span:nth-child(8) { --x:    0px; --y:  170px; --r: -10deg; animation-delay: 0.60s; }
@keyframes wcRosePop {
  0%   { opacity: 0; transform: translate(0,0) rotate(0) scale(0.4); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
}

/* 西幻标题 */
.wc-western-anim .wc-curtain-title {
  font-family: 'Cormorant Garamond', 'Cinzel', 'Georgia', serif;
  font-size: 36px;
  letter-spacing: 8px;
  font-weight: 600;
  color: transparent;
  background: linear-gradient(180deg, #fff7e8 0%, #d8b078 45%, #8a6431 90%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 10px rgba(120, 80, 30, 0.35));
  animation: wcTitleFade 1.2s ease-out 0.4s both;
}
.wc-western-anim .wc-curtain-title em {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 14px;
  letter-spacing: 8px;
  font-family: 'KaiTi', 'STKaiti', serif;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #6e4d22;
  filter: none;
  text-shadow: 0 1px 4px rgba(255,255,255,0.5);
}
@keyframes wcTitleFade {
  0%   { opacity: 0; letter-spacing: 16px; transform: scale(1.06); }
  60%  { opacity: 1; letter-spacing: 8px;  transform: scale(1); }
  100% { opacity: 1; }
}

/* ===================== 现代/科幻：极光 + 扫描线 + HUD + RGB 故障字 ===================== */
.wc-modern-anim {
  background: radial-gradient(ellipse at 50% 50%, #14143a 0%, #0a0a1f 60%, #050511 100%);
  color: #e6e9ff;
}
.wc-aurora {
  position: absolute; inset: -20%;
  background:
    conic-gradient(from 0deg at 50% 50%,
      rgba(70, 200, 255, 0)   0%,
      rgba(120, 80, 255, 0.45) 20%,
      rgba(70, 200, 255, 0)   40%,
      rgba(255, 100, 200, 0.35) 60%,
      rgba(70, 200, 255, 0)   80%,
      rgba(120, 80, 255, 0.45) 100%);
  filter: blur(40px);
  opacity: 0;
  animation: wcAurora 1.6s ease-out forwards;
}
@keyframes wcAurora {
  0%   { opacity: 0; transform: rotate(0deg); }
  35%  { opacity: 0.95; }
  100% { opacity: 0.7; transform: rotate(45deg); }
}

.wc-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(170, 220, 255, 0.08) 0 1px, transparent 1px 4px);
  pointer-events: none;
  opacity: 0;
  animation: wcScan 1.5s linear forwards;
}
@keyframes wcScan {
  0%   { opacity: 0; background-position: 0 -120px; }
  20%  { opacity: 0.7; }
  100% { opacity: 0.5; background-position: 0 0; }
}

.wc-hud-corner {
  position: absolute;
  width: 36px; height: 36px;
  border: 2px solid #8ed6ff;
  box-shadow: 0 0 10px rgba(140, 210, 255, 0.65);
  opacity: 0;
  animation: wcHudIn 0.8s ease-out 0.3s forwards;
}
.wc-hud-tl { top: 24px;    left: 24px;  border-right: 0; border-bottom: 0; }
.wc-hud-tr { top: 24px;    right: 24px; border-left: 0;  border-bottom: 0; }
.wc-hud-bl { bottom: 24px; left: 24px;  border-right: 0; border-top: 0; }
.wc-hud-br { bottom: 24px; right: 24px; border-left: 0;  border-top: 0; }
@keyframes wcHudIn {
  0%   { opacity: 0; transform: scale(1.6); }
  100% { opacity: 1; transform: scale(1); }
}

.wc-modern-anim .wc-curtain-title {
  font-family: 'Orbitron', 'Eurostile', 'Helvetica Neue', sans-serif;
  font-weight: 700;
}
.wc-glitch-text {
  position: relative;
  display: inline-block;
  font-size: 22px;
  letter-spacing: 8px;
  color: #f5f8ff;
  text-shadow: 0 0 14px rgba(140, 210, 255, 0.55);
  animation: wcGlitchIn 1.0s ease-out 0.3s both;
}
.wc-glitch-text::before,
.wc-glitch-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  pointer-events: none;
}
.wc-glitch-text::before {
  color: #ff3aa0;
  transform: translate(-2px, 0);
  mix-blend-mode: screen;
  animation: wcGlitchR 0.6s steps(2) infinite alternate;
}
.wc-glitch-text::after {
  color: #3af0ff;
  transform: translate(2px, 0);
  mix-blend-mode: screen;
  animation: wcGlitchB 0.55s steps(2) infinite alternate;
}
@keyframes wcGlitchIn {
  0%   { opacity: 0; letter-spacing: 18px; transform: scaleY(0.6); }
  60%  { opacity: 1; letter-spacing: 8px;  transform: scaleY(1); }
  100% { opacity: 1; }
}
@keyframes wcGlitchR {
  0%   { transform: translate(-2px, 0); }
  100% { transform: translate(-3px, 1px); }
}
@keyframes wcGlitchB {
  0%   { transform: translate(2px, 0); }
  100% { transform: translate(3px, -1px); }
}
.wc-modern-anim .wc-curtain-title em {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: 14px;
  letter-spacing: 6px;
  color: #b9c8ff;
  font-family: 'KaiTi', 'STKaiti', serif;
  text-shadow: 0 0 10px rgba(140, 210, 255, 0.5);
  animation: wcCharIn 0.6s ease 0.9s both;
}

/* 筹备面板：半透明，让背景图透出来 */
.wc-setup {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 15, 30, 0.28) 0%, rgba(15, 15, 30, 0.42) 100%);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  z-index: 100;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 20px 18px;
  box-sizing: border-box;
  overflow-y: auto;
}

.wc-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 24px;
  padding: 18px 16px;
  box-sizing: border-box;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column;
  gap: 14px;
}

.wc-title {
  color: #544341;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  font-family: 'KaiTi', 'STKaiti', serif;
  text-align: center;
}

.wc-section { display: flex; flex-direction: column; gap: 6px; }

.wc-hint {
  font-size: 11px;
  color: #a89694;
  letter-spacing: 0.5px;
  font-weight: bold;
  text-transform: uppercase;
}

/* 风格卡片 */
.wc-style-list { display: flex; flex-direction: column; gap: 6px; }
.wc-style-card {
  padding: 10px 14px;
  border: 1px solid #f0e6e4;
  border-radius: 12px;
  background: #fdfbfa;
  cursor: pointer;
  transition: all 0.2s ease;
}
.wc-style-card.selected {
  background: rgba(166, 36, 36, 0.04);
  border-color: #a62424;
  box-shadow: 0 4px 12px rgba(166, 36, 36, 0.06);
}
.wc-style-card h4 { margin: 0 0 2px; font-size: 13px; color: #544341; font-weight: bold; }
.wc-style-card p  { margin: 0; font-size: 11px; color: #9c8c8a; }

/* 双列输入/选择 */
.wc-row2 { display: flex; gap: 10px; }
.wc-input {
  flex: 1;
  /* 关键：让 flex item 能正确收缩，避免 input 默认宽度撑出父容器导致出框 */
  min-width: 0;
  width: 100%;
  padding: 10px;
  border: 1px solid #f0e6e4;
  border-radius: 12px;
  background: #fdfbfa;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  color: #544341;
  text-align: center;
}
.wc-input:focus { border-color: #a62424; background: #fff; }

.wc-role-card {
  flex: 1;
  text-align: center;
  padding: 11px 0;
  border: 1px solid #f0e6e4;
  border-radius: 12px;
  background: #fdfbfa;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  color: #544341;
}
.wc-role-card.selected {
  background: #a62424;
  color: #fff;
  border-color: #a62424;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(166, 36, 36, 0.15);
}

/* 上传区 */
.wc-upload-zone {
  background: #fdfbfa;
  border: 1px dashed #eadecc;
  border-radius: 16px;
  padding: 10px;
  text-align: center;
}
.wc-upload-row { display: flex; gap: 12px; justify-content: center; }
.wc-file-label {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid #eadecc;
  color: #544341;
  border-radius: 20px;
  font-size: 11px;
  cursor: pointer;
  font-weight: 500;
}
.wc-upload-status {
  font-size: 11px;
  color: #7aa382;
  margin-top: 6px;
  display: none;
  font-weight: bold;
}

/* 启动按钮 - 喜庆红渐变 */
.wc-start-btn {
  width: 80%;
  margin-top: 12px;
  padding: 12px;
  background: linear-gradient(135deg, #c2272d 0%, #a62424 100%);
  color: #fff;
  border: none;
  border-radius: 26px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 2px;
  box-shadow: 0 6px 18px rgba(166, 36, 36, 0.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wc-start-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(166, 36, 36, 0.45); }
.wc-start-btn:active { transform: translateY(0); }

/* 婚礼舞台 */
.wc-scene {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  z-index: 50;
}
.wc-scene.active { display: flex; }

.wc-scene-header {
  padding: 16px 20px;
  text-align: center;
  color: #544341;
  font-size: 14px;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  font-family: 'KaiTi', 'STKaiti', serif;
  font-weight: bold;
  z-index: 10;
}

.wc-chat {
  flex: 1;
  padding: 20px 16px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 5;
}

.wc-msg-npc {
  align-self: center;
  background: rgba(255, 255, 255, 0.95);
  border-left: 4px solid #a62424;
  color: #544341;
  padding: 11px 15px;
  border-radius: 8px 16px 16px 8px;
  max-width: 88%;
  font-size: 13px;
  box-shadow: 0 4px 15px rgba(84, 67, 65, 0.04);
  line-height: 1.5;
}

.wc-msg-ai-guide {
  align-self: center;
  width: 92%;
  background: #fffdf9;
  border: 1px dashed #e2be98;
  color: #7c685c;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.6;
  box-sizing: border-box;
}
.wc-guide-tag {
  display: inline-block;
  padding: 2px 6px;
  background: #eadecc;
  color: #544341;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 6px;
}

.wc-msg-user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(252, 236, 235, 0.95), rgba(251, 220, 219, 0.95));
  border: 1px solid rgba(251, 203, 201, 0.5);
  color: #544341;
  padding: 12px 16px;
  border-radius: 16px 16px 4px 16px;
  max-width: 85%;
  font-size: 13.5px;
}

/* AI 伴侣气泡（左侧）- 用户回复后由模型生成、贴合人设的剧本反应 */
.wc-msg-char {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 190, 152, 0.55);
  color: #4a3a36;
  padding: 12px 16px;
  border-radius: 16px 16px 16px 4px;
  max-width: 85%;
  font-size: 13.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  box-shadow: 0 4px 16px rgba(166, 36, 36, 0.08);
  animation: wcCharFadeIn 0.35s ease;
}
@keyframes wcCharFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* AI 正在输入：三个跳动的小点 */
.wc-msg-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  min-height: 16px;
}
.wc-msg-typing span {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #c8a98a;
  animation: wcTypingDot 1.1s infinite ease-in-out both;
}
.wc-msg-typing span:nth-child(1) { animation-delay: -0.32s; }
.wc-msg-typing span:nth-child(2) { animation-delay: -0.16s; }
@keyframes wcTypingDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.wc-footer {
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  z-index: 10;
}
.wc-input-row { display: flex; gap: 8px; align-items: center; }
.wc-chat-input {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  border: 1px solid #f0e6e4;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  outline: none;
}
.wc-chat-input:focus { border-color: #a62424; background: #fff; }

/* 圆形磨砂按钮（发送 / 下一步通用） */
.wc-round-btn {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: #a62424;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(166, 36, 36, 0.12);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.wc-round-btn:hover {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 12px rgba(166, 36, 36, 0.2);
}
.wc-round-btn:active { transform: scale(0.94); }
.wc-round-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wc-round-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 兼容旧类名：发送按钮也走圆形磨砂样式 */
.wc-next-btn {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: #a62424;
  cursor: pointer;
  font-size: 0; /* 隐藏旧的 "发送" 文字残留，仅显示 SVG */
  box-shadow: 0 2px 8px rgba(166, 36, 36, 0.12);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.wc-next-btn:hover {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 12px rgba(166, 36, 36, 0.2);
}
.wc-next-btn:active { transform: scale(0.94); }
.wc-next-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
 * 引导卡片层（v3 — 极简纸笺式 / 雅致烫金）
 * 原本是"圆形 + 大块色 + SVG 图章"的强冲击设计，过艳过吵；
 * 现在改成淡米色纸笺 + 双线烫金边 + 雅致衬线标题 + 细签提示，
 * 三种风格只通过点缀颜色（朱砂 / 烫金 / 银蓝）做差异化，
 * 整体高雅简洁。原 .wc-prop-art / SVG 仍保留 DOM，但默认隐藏，
 * 后续要换图直接显示并改 .wc-prop-art img/svg 即可。
 * ============================================================ */
.wc-prop-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(0,0,0,0.32), rgba(0,0,0,0.55));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 60;
  display: none;
  justify-content: center; align-items: center;
  padding: 28px;
  box-sizing: border-box;
}
.wc-prop-overlay.active {
  display: flex;
  animation: wcPropOverlayIn 360ms ease-out both;
}
@keyframes wcPropOverlayIn { from { opacity: 0; } to { opacity: 1; } }

/* 风格主题色变量：默认（中式 - 朱砂烫金） */
.wc-prop-card {
  --wc-paper:    #f8efe1;      /* 纸笺底色：暖米 */
  --wc-paper-2:  #f0e3cc;      /* 纸笺暗色 */
  --wc-ink:      #2a1a14;      /* 主文字（黑墨） */
  --wc-accent:   #a62424;      /* 强调色（朱砂） */
  --wc-gold:     #b89164;      /* 烫金 */
  --wc-gold-soft:#e2c79a;
}
/* 西式：象牙白 + 沉静酒红 + 烫金 */
.wc-prop-card[data-style="western"] {
  --wc-paper:    #fbf5ec;
  --wc-paper-2:  #efe4d3;
  --wc-ink:      #1f1410;
  --wc-accent:   #8a1f2c;
  --wc-gold:     #c79a5b;
  --wc-gold-soft:#e8cea0;
}
/* 现代：冷调银蓝 + 极简墨色 */
.wc-prop-card[data-style="modern"] {
  --wc-paper:    #f5f7fb;
  --wc-paper-2:  #e6ecf4;
  --wc-ink:      #14181f;
  --wc-accent:   #4a5b7a;
  --wc-gold:     #8aa0c0;
  --wc-gold-soft:#c2d0e3;
}

.wc-prop-card {
  position: relative;
  width: 100%;
  max-width: 320px;
  /* 纸笺质感：双层渐变 + 极轻噪点 */
  background:
    linear-gradient(180deg, var(--wc-paper) 0%, var(--wc-paper-2) 100%);
  color: var(--wc-ink);
  border-radius: 4px;
  padding: 44px 28px 36px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 220ms ease, box-shadow 220ms ease;
  animation: wcPropCardIn 520ms cubic-bezier(.22,.9,.3,1.1) both;
}
.wc-prop-card::before,
.wc-prop-card::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  pointer-events: none;
}
/* 外烫金细边 */
.wc-prop-card::before {
  top: 14px; bottom: 14px;
  border: 1px solid var(--wc-gold);
  border-radius: 2px;
  opacity: 0.85;
}
/* 内发丝双线 */
.wc-prop-card::after {
  top: 20px; bottom: 20px;
  left: 20px; right: 20px;
  border: 1px solid var(--wc-gold-soft);
  border-radius: 2px;
  opacity: 0.6;
}
.wc-prop-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 36px 70px -20px rgba(0, 0, 0, 0.6),
    0 10px 28px rgba(0, 0, 0, 0.3);
}
.wc-prop-card:active { transform: scale(0.985); }

@keyframes wcPropCardIn {
  0%   { opacity: 0; transform: translateY(18px) scale(.96); }
  100% { opacity: 1; transform: translateY(0)    scale(1);  }
}

/* 顶部小印章 / 章序号 */
.wc-prop-card .wc-prop-stamp {
  position: relative;
  z-index: 1;
  font-family: 'KaiTi', 'STKaiti', '楷体', serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--wc-accent);
  padding: 4px 12px;
  border: 1px solid var(--wc-accent);
  border-radius: 2px;
  margin-bottom: 22px;
  text-transform: uppercase;
  opacity: 0.92;
}

/* 主标题 — 雅致衬线大字 */
.wc-prop-card .wc-prop-title {
  position: relative;
  z-index: 1;
  font-family: 'KaiTi', 'STKaiti', '楷体', 'Noto Serif SC', serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-indent: 0.28em;       /* 抵消首字偏移，整体居中 */
  color: var(--wc-ink);
  margin: 0 0 14px;
  text-align: center;
  line-height: 1.35;
}

/* 主副标题之间的分隔线（中央菱形小点 + 双侧细线） */
.wc-prop-card .wc-prop-divider {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 70%;
  margin: 6px 0 16px;
  color: var(--wc-gold);
}
.wc-prop-card .wc-prop-divider::before,
.wc-prop-card .wc-prop-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wc-gold), transparent);
  opacity: 0.7;
}
.wc-prop-card .wc-prop-divider span {
  width: 6px; height: 6px;
  background: var(--wc-gold);
  transform: rotate(45deg);
  display: inline-block;
}

/* 副标题 — 含蓄小字 */
.wc-prop-card .wc-prop-subtitle {
  position: relative;
  z-index: 1;
  font-family: 'KaiTi', 'STKaiti', '楷体', 'Noto Serif SC', serif;
  font-size: 14px;
  letter-spacing: 0.12em;
  line-height: 1.85;
  color: rgba(42, 26, 20, 0.78);
  text-align: center;
  white-space: pre-line;
  margin: 0 0 26px;
  max-width: 240px;
}
.wc-prop-card[data-style="modern"] .wc-prop-subtitle,
.wc-prop-card[data-style="western"] .wc-prop-subtitle {
  color: rgba(31, 20, 16, 0.72);
}
.wc-prop-card[data-style="modern"] .wc-prop-subtitle {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  letter-spacing: 0.18em;
}

/* 兼容历史 hint 字段：保留，但样式与 subtitle 一致 */
.wc-prop-card .wc-prop-hint {
  position: relative;
  z-index: 1;
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--wc-accent);
  margin-top: 6px;
  padding: 6px 14px 4px;
  border-top: 1px solid var(--wc-gold-soft);
  text-align: center;
}
.wc-prop-card .wc-prop-hint::before { content: "—  "; opacity: 0.6; }
.wc-prop-card .wc-prop-hint::after  { content: "  —"; opacity: 0.6; }

/* 旧版圆形 SVG 图标：默认隐藏；如未来要替换图片，
   只需在卡片上加 .has-art 即可重新显示并适配纸笺风格。*/
.wc-prop-art {
  display: none;
  width: 88px; height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--wc-gold);
  background: var(--wc-paper);
  margin-bottom: 14px;
  box-shadow: inset 0 0 0 3px var(--wc-paper);
}
.wc-prop-card.has-art .wc-prop-art { display: flex; justify-content: center; align-items: center; }
.wc-prop-art svg,
.wc-prop-art img { width: 100%; height: 100%; object-fit: cover; }

/* 入口按钮（marriedSettings 内） */
.wc-launch-btn {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 14px;
  background: linear-gradient(135deg, #d4a373, #c69465);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(212, 163, 115, 0.3);
}

/* ================================================================
 * 浪漫关系页面 — 三个紧凑按钮统一样式
 * 用 !important 覆盖通用 .save-btn 的尺寸/边距
 * ================================================================ */
.romantic-mini-btn {
  display: inline-block !important;
  width: auto !important;
  min-width: 140px;
  padding: 8px 22px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 18px !important;
  letter-spacing: 0.5px;
  line-height: 1.4 !important;
  box-shadow: 0 4px 10px rgba(240, 184, 200, 0.25);
}

.romantic-mini-btn--danger {
  background: #ff6b78 !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(255, 107, 120, 0.25) !important;
}

/* 旧版 "进入下一仪式环节" 全宽按钮 — 已废弃，
 * 新版做成 .wc-round-btn 圆形磨砂图标按钮，放在输入栏发送旁边。
 * 保留下面的 .wc-proceed-btn 兼容定义，仅控制初始隐藏。 */
.wc-proceed-btn { display: none; }

/* ============================================================
 * 婚礼重温只读视图（已办过婚礼后，再点入口直接进重温）
 * 风格：奶白纸笺 + 烫金细签，避免引擎/动画开销
 * ============================================================ */
.wc-replay {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  background: linear-gradient(180deg, #fff8f1 0%, #fdeee0 100%);
  color: #463128;
  z-index: 5;
  overflow: hidden;
}
.wc-rp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(180, 130, 80, 0.18);
  background: rgba(255, 248, 240, 0.85);
  backdrop-filter: blur(6px);
}
.wc-rp-back,
.wc-rp-redo {
  border: 1px solid rgba(180, 130, 80, 0.35);
  background: rgba(255, 255, 255, 0.6);
  color: #6b4a2b;
  border-radius: 14px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.wc-rp-back { padding: 4px 12px; font-size: 18px; line-height: 1; }
.wc-rp-back:hover,
.wc-rp-redo:hover { background: rgba(255, 233, 210, 0.9); }
.wc-rp-title {
  flex: 1;
  text-align: center;
  font-size: 15px;
  letter-spacing: 1px;
  color: #6b4a2b;
  font-weight: 600;
}
.wc-rp-meta {
  text-align: center;
  padding: 8px 14px;
  font-size: 12px;
  color: #8a6a4a;
  letter-spacing: 0.5px;
  border-bottom: 1px dashed rgba(180, 130, 80, 0.2);
}
.wc-rp-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 24px;
  -webkit-overflow-scrolling: touch;
}
.wc-rp-body::-webkit-scrollbar { width: 4px; }
.wc-rp-body::-webkit-scrollbar-thumb { background: rgba(180, 130, 80, 0.3); border-radius: 2px; }
.wc-rp-chapter {
  margin-bottom: 18px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(180, 130, 80, 0.18);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(180, 130, 80, 0.06);
}
.wc-rp-chapter h3 {
  margin: 0 0 6px;
  font-size: 14px;
  color: #8a5a2b;
  letter-spacing: 1px;
  font-weight: 600;
}
.wc-rp-sub {
  margin: 0 0 10px;
  font-size: 12px;
  color: #a07a52;
  line-height: 1.6;
  font-style: italic;
}
.wc-rp-npc {
  margin: 0 0 10px;
  padding: 8px 10px;
  font-size: 12px;
  color: #6b4a2b;
  background: rgba(248, 224, 196, 0.45);
  border-left: 2px solid #c89868;
  border-radius: 4px;
  line-height: 1.6;
}
.wc-rp-user,
.wc-rp-char {
  margin: 6px 0;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.65;
  border-radius: 6px;
}
.wc-rp-user {
  background: rgba(255, 215, 200, 0.35);
  text-align: right;
}
.wc-rp-char {
  background: rgba(245, 232, 215, 0.6);
}
.wc-rp-who {
  display: inline-block;
  font-size: 11px;
  color: #8a5a2b;
  letter-spacing: 0.5px;
  margin-right: 6px;
  font-weight: 600;
}
.wc-rp-text { color: #463128; white-space: pre-wrap; }
.wc-rp-empty {
  text-align: center;
  padding: 30px;
  color: #a07a52;
  font-size: 13px;
}