/* 跨平台衬线栈：iOS Songti SC / Android 思源宋 / Windows STSong */
:root {
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
}

/* ═══════════════════════════════════════
   沉浸叙事风（五男主全员 · 主题色变量化）
   立绘背景 + 毛玻璃气泡 + 头像呼吸 + 日记书信体
   独立于 theme-otome.css，可整体摘除
   ═══════════════════════════════════════ */

/* ── 首页：秦彻海报卡 ── */
.landing .char-card.poster-card {
  width: 190px;
  height: 280px;
  padding: 0;
  background-image: var(--poster-bg, none);
  background-color: rgba(34, 34, 46, 0.9);
  background-position: center 18%;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  display: block;
  border: 1px solid rgba(212, 168, 83, 0.25);
}
.landing .char-card.poster-card .poster-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 48px 14px 14px;
  background: linear-gradient(transparent, rgba(10, 10, 16, 0.88));
  color: #f0e8dc;
  font-size: 16px;
  letter-spacing: 4px;
  text-align: center;
}
.landing .char-card.poster-card:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: rgba(212, 168, 83, 0.65);
  box-shadow:
    0 0 30px rgba(212, 168, 83, 0.25),
    0 16px 40px rgba(0, 0, 0, 0.45);
}

/* ── 全角色主题变量：--tc 代表色 / --btn-* 发送按钮渐变 / --user-bubble 用户气泡 ──
   金（212,168,83）是档案色，全角色共用；代表色只属于"此刻"
   前世变体（qinche-*）跟现世同色 */
body[data-char^="qinche"] {
  --tc: 168, 60, 60;            /* 秦彻 · 暗红 */
  --btn-1: #6e262c; --btn-2: #521d22;
  --btn-h1: #7e2d34; --btn-h2: #5f2126;
  --user-bubble: rgba(74, 34, 38, 0.55);
}
body[data-char^="lishen"] {
  --tc: 110, 160, 215;          /* 黎深 · 蓝 */
  --btn-1: #2e4a6e; --btn-2: #21354f;
  --btn-h1: #36567e; --btn-h2: #283f5c;
  --user-bubble: rgba(36, 54, 78, 0.55);
}
body[data-char^="shenxinghui"] {
  --tc: 155, 125, 210;          /* 沈星回 · 星紫 */
  --btn-1: #4a3a72; --btn-2: #372a54;
  --btn-h1: #564483; --btn-h2: #403162;
  --user-bubble: rgba(50, 40, 76, 0.55);
}
body[data-char^="qiyu"] {
  --tc: 225, 120, 100;          /* 祁煜 · 珊瑚红 */
  --btn-1: #a04a3a; --btn-2: #7d3a2d;
  --btn-h1: #b25544; --btn-h2: #8d4233;
  --user-bubble: rgba(82, 46, 40, 0.55);
}
body[data-char^="xiayizhou"] {
  --tc: 220, 140, 60;           /* 夏以昼 · 橙 */
  --btn-1: #9c5f24; --btn-2: #7a4a1d;
  --btn-h1: #b06c2b; --btn-h2: #8a5522;
  --user-bubble: rgba(84, 56, 32, 0.55);
}
body[data-char^="zhuozhou"] {
  --tc: 100, 140, 168;          /* 筑舟 · 雾青偏蓝（清晨五点的海；105,150,155 深化后偏绿被笑，10-12 拉回蓝灰） */
  --btn-1: #2a4254; --btn-2: #1f3242;
  --btn-h1: #334e62; --btn-h2: #263b4c;
  --user-bubble: rgba(38, 54, 66, 0.55);
}
/* 世界之外四男主（10-18 发财定色） */
body[data-char^="gushiye"] {
  --tc: 156, 152, 162;          /* 顾时夜 · 墨黑（深色底上提亮的墨，纯黑会隐身） */
  --btn-1: #26242c; --btn-2: #1b1a20;
  --btn-h1: #312f38; --btn-h2: #221f28;
  --user-bubble: rgba(28, 27, 34, 0.55);
}
body[data-char^="yiyu"] {
  --tc: 202, 64, 60;            /* 易遇 · 红（比秦彻的暗红更正更亮） */
  --btn-1: #7d2320; --btn-2: #5e1a18;
  --btn-h1: #8f2a26; --btn-h2: #6b1e1b;
  --user-bubble: rgba(74, 26, 24, 0.55);
}
body[data-char^="xiaxiaoyin"] {
  --tc: 198, 182, 214;          /* 夏萧因 · 灰白紫（10-18 她调：不往蓝走，往灰白走——银月袍子上的那点紫） */
  --btn-1: #4d4468; --btn-2: #3a3350;
  --btn-h1: #595073; --btn-h2: #443d5c;
  --user-bubble: rgba(58, 52, 76, 0.55);
}
body[data-char^="baiyuan"] {
  --tc: 206, 150, 84;           /* 柏源 · 暖金偏蜜棕（避开档案金 212,168,83） */
  --btn-1: #8a5f28; --btn-2: #6b4a1f;
  --btn-h1: #9c6c2f; --btn-h2: #7a5524;
  --user-bubble: rgba(88, 62, 30, 0.55);
}

/* ── 聊天页：立绘背景（全角色，含前世变体 qinche-*）── */
body[data-char]::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--char-bg, none);
  background-position: center 25%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.30;
  filter: blur(3px) brightness(0.72);
  z-index: 0;
  pointer-events: none;
}
body[data-char] .app-shell {
  position: relative;
  z-index: 1;
}
body[data-char] .topbar,
body[data-char] .input-area {
  background: rgba(22, 22, 32, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* 毛玻璃气泡：边框/用户气泡随角色代表色（--tc / --user-bubble） */
body[data-char] .msg.assistant {
  background: rgba(28, 28, 40, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--tc), 0.28);
}
body[data-char] .msg.user {
  background: var(--user-bubble);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--tc), 0.15);
}

/* ── 输入区：发送按钮/聚焦态走角色代表色同色系（--btn-* / --tc）── */
body[data-char] .input-area button {
  background: linear-gradient(135deg, var(--btn-1) 0%, var(--btn-2) 100%);
  color: #e8d5d2;
  box-shadow: 0 4px 14px rgba(var(--tc), 0.22);
}
body[data-char] .input-area button:hover {
  background: linear-gradient(135deg, var(--btn-h1) 0%, var(--btn-h2) 100%);
}
body[data-char] .input-area button:disabled {
  background: #3a3a45;
  color: #6a6a78;
  box-shadow: none;
}
body[data-char] .input-area textarea:focus {
  border-color: rgba(var(--tc), 0.55);
}

/* ── 头像呼吸 ── */
@keyframes avatarBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--tc, 168, 60, 60), 0); transform: scale(1); }
  50% { box-shadow: 0 0 16px 3px rgba(var(--tc, 168, 60, 60), 0.38); transform: scale(1.05); }
}
body[data-char] .msg-avatar {
  animation: avatarBreathe 3.2s ease-in-out infinite;
}

/* ── 记忆面板：书信/小说叙事体 ── */
.memory-text {
  font-family: var(--font-serif);
  background: #f4ecdc;
  color: #38301f;
  padding: 24px 26px;
  border-radius: 6px;
  line-height: 2.05;
  font-size: 15px;
  box-shadow:
    inset 0 0 46px rgba(120, 90, 40, 0.10),
    0 2px 12px rgba(0, 0, 0, 0.35);
}
.memory-text h2 { color: #2c2618; border-bottom: 1px solid rgba(90, 70, 30, 0.25); padding-bottom: 6px; }
.memory-text h3 { color: #3a3018; }
.memory-text h4 { color: #4a3d20; }
.memory-text p { margin: 0 0 14px; }
.memory-text strong { color: #201a0e; }
.memory-text hr { border-top: 1px solid rgba(90, 70, 30, 0.25); }

/* ── 首页问候区（Pulse 结构试点）── */
.landing.home {
  justify-content: flex-start;
  padding-top: 9vh;
  gap: 22px;
  min-height: 100vh;
  height: auto;
}
.home-head { text-align: center; }
.home-date {
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 2px;
}
.home-greet {
  font-family: var(--font-serif);
  font-size: 32px;
  letter-spacing: 3px;
  margin-top: 10px;
  font-weight: 600;
  text-shadow: 0 2px 18px rgba(212, 168, 83, 0.22);
}
.home-day {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  letter-spacing: 1px;
}
.home-day b {
  color: var(--accent);
  font-size: 24px;
  font-family: Georgia, "Times New Roman", serif;
  padding: 0 5px;
}

/* Today's Whisper 卡片 */
.whisper-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(560px, 88vw);
  background: rgba(34, 34, 46, 0.9);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 18px;
  text-decoration: none;
  transition: all 0.3s;
}
.whisper-card:hover {
  border-color: rgba(212, 168, 83, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.whisper-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.whisper-text {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.75;
  font-family: var(--font-serif);
}
.whisper-meta {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 1.5px;
  margin-top: 7px;
}

/* ── 首页问候区：手机端适配 ── */
@media (max-width: 600px) {
  .landing.home {
    padding-top: 6vh;
    gap: 18px;
  }
  .home-greet {
    font-size: 26px;
    letter-spacing: 2px;
    /* 手机端没有衬线字体，用细字重+宽字距把黑体调出高级感 */
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-weight: 500;
    letter-spacing: 4px;
  }
  .home-date {
    font-size: 12px;
  }
  .home-day b {
    font-size: 20px;
  }
  .whisper-card {
    width: calc(100vw - 40px);
    padding: 14px;
    gap: 12px;
  }
  .whisper-avatar {
    width: 40px;
    height: 40px;
  }
  .whisper-text {
    font-size: 13px;
  }
  /* 海报卡缩小，跟圆卡混排不打架 */
  .landing .char-card.poster-card {
    width: 140px;
    height: 205px;
  }
  .landing .char-card.poster-card .poster-name {
    font-size: 14px;
    letter-spacing: 2px;
    padding: 36px 10px 12px;
  }
  .landing .chars {
    gap: 12px;
    padding: 0 14px;
  }
}

/* ── 微动效：入场编排 + 呼吸立绘 ── */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 首页依次浮现：日期 → 问候 → 天数 → Whisper → 角色卡 → 提示 */
.home-date { animation: riseIn 0.5s 0.05s both; }
.home-greet { animation: riseIn 0.5s 0.20s both; }
.home-day { animation: riseIn 0.5s 0.35s both; }
.whisper-card { animation: riseIn 0.5s 0.50s both; }
.landing .char-card { animation: riseIn 0.45s both; }
.landing .char-card:nth-child(1) { animation-delay: 0.65s; }
.landing .char-card:nth-child(2) { animation-delay: 0.73s; }
.landing .char-card:nth-child(3) { animation-delay: 0.81s; }
.landing .char-card:nth-child(4) { animation-delay: 0.89s; }
.landing .char-card:nth-child(5) { animation-delay: 0.97s; }
.landing .hint { animation: riseIn 0.5s 1.15s both; }

/* 聊天页立绘背景缓慢呼吸（20 秒一轮，几乎察觉不到但页面是活的） */
@keyframes bgBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
body[data-char]::before {
  animation: bgBreath 20s ease-in-out infinite;
}

/* ── 日历视图（Pulse 结构试点）：cal-* 样式为首页日历与通用日历共用 ── */

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 2px 12px;
}
.cal-title {
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: 1px;
  font-weight: 600;
}
.cal-nav {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: all 0.2s;
}
.cal-nav:hover { color: var(--accent); border-color: var(--accent); }


.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-week {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 0;
}
.cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.cal-day.has {
  cursor: pointer;
  background: var(--surface);
}
.cal-day.has:hover { background: var(--surface-hover); }
.cal-day.today .cal-num { color: var(--accent); font-weight: 700; }
.cal-day.sel {
  outline: 1px solid var(--accent);
  background: var(--accent-dim);
}
.cal-num { line-height: 1.2; }
.cal-marks {
  display: flex;
  gap: 3px;
  height: 8px;
  align-items: center;
  margin-top: 2px;
}
.cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
}
.cal-dot.diary { background: var(--accent); }
.cal-dot.session { background: var(--text-muted); }
/* 聊过没存档的日子：暗灰点（存档的灰点亮一度，区分开）。类名必须避开 .chat（style.css 的聊天页容器） */
.cal-dot.chatday { background: var(--text-muted); opacity: 0.45; }
/* 日历里原地展开的聊天原文（页面夹 transcript）：前两条全文 + 省略号 */
.mini-msg { font-size: 12.5px; color: var(--text-muted); line-height: 1.7; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.mini-msg.u { color: var(--text-secondary); }
.mini-msg:last-child { border-bottom: none; }
.cal-heart {
  color: #e08aa8;
  font-size: 8px;
  font-style: normal;
  line-height: 1;
}

.cal-detail { margin-top: 12px; }
.cal-detail-date {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 2px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  letter-spacing: 1px;
}

/* ── 首页角色卡横滑 ── */
.landing .chars {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  max-width: 100vw;
  width: 100%;
  padding: 6px 16px 14px;
  justify-content: flex-start;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;  /* 手机上这排只管横滑，不抢页面的上下滚 */
  cursor: grab;
}
.landing .chars:active { cursor: grabbing; }
.landing .char-card {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: 170px;
  height: 240px;
  justify-content: center;
}
.landing .char-card.poster-card {
  width: 170px;
  height: 240px;
}

/* ── 首页日历卡 ── */
.home-cal {
  width: min(560px, calc(100vw - 32px));
  background: rgba(34, 34, 46, 0.9);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px 16px 16px;
  margin-bottom: 4px;
  animation: riseIn 0.5s 1.05s both;
}
.home-cal .cal-day {
  font-size: 12px;
  border-radius: 8px;
}

@media (max-width: 600px) {
  .landing .char-card,
  .landing .char-card.poster-card {
    width: 42vw;
    height: 68vw;   /* 390 屏约 164×265：一屏两张半，露出第三张勾引滑动 */
  }
}

/* ── 修复：body 固定 100vh 会把超高内容压扁（首页加日历后卡面被压成薄片）── */
body {
  height: auto;
  min-height: 100vh;
}

/* ── 首页日历：条目原地展开内容 ── */
.cal-entry-content {
  margin: 6px 0 14px;
  animation: riseIn 0.25s both;
}

/* ── 首页日历融入暗色：卡片更轻、内容改"夜信纸" ── */
.home-cal {
  background: rgba(34, 34, 46, 0.82);
  border: 1px solid rgba(212, 168, 83, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* 首页日历里的内容块：与日历卡片同色系（深蓝灰+细金边），衬线字保留书信感 */
.home-cal-detail .memory-text {
  background: rgba(34, 34, 46, 0.82);
  border: 1px solid rgba(212, 168, 83, 0.12);
  border-radius: 18px;
  color: var(--text-secondary);
  box-shadow: none;
}
.home-cal-detail .memory-text h2,
.home-cal-detail .memory-text h3,
.home-cal-detail .memory-text h4 { color: var(--text-primary); }
.home-cal-detail .memory-text strong { color: var(--text-primary); }
.home-cal-detail .memory-text hr { border-top-color: var(--border); }

/* 选中的日子：轻轻弹起 */
.home-cal .cal-day { transition: all 0.22s cubic-bezier(0.34, 1.4, 0.64, 1); }
.home-cal .cal-day.sel {
  outline: none;
  background: var(--accent-dim);
  box-shadow: 0 0 0 1.5px var(--accent);
  transform: scale(1.08);
}
.cal-detail-empty {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 14px 0 4px;
  letter-spacing: 1px;
}

/* ── 首页日历：收拢成周视图的滑动感 ── */
@keyframes calCellIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* 不再逐格淡入——格子半透明时会和下面内容叠影，卷帘本身就够 */

/* 网格高度过渡：收拢/展开像卷帘，无双层残影 */
.home-cal .cal-grid {
  overflow: hidden;
  max-height: 640px;
  transition: max-height 0.32s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.home-cal.collapsed .cal-grid {
  max-height: 86px;
}

/* 收拢态：卡片收紧一点，更像 Pulse */
.home-cal.collapsed {
  padding-top: 6px;
  padding-bottom: 10px;
}
/* 收拢态标题不调暗（保持正常亮度） */
.home-cal.collapsed .cal-title {
  font-size: 13px;
  color: var(--text-primary);
}
/* 选中日数字变亮 */
.home-cal .cal-day.sel .cal-num {
  color: var(--accent);
  font-weight: 700;
}
/* 西文/数字衬线（Pulse 混排法）：中文落黑体，数字英文衬线 */
.home-date,
.whisper-meta,
.cal-title,
.cal-detail-date,
.home-cal .cal-num {
  font-family: Georgia, "Times New Roman", serif;
}

/* 内容区独立于日历卡片之外（日历归日历，内容归内容） */
.home-cal-detail {
  width: min(560px, calc(100vw - 32px));
  min-height: 72px;  /* 空日子切到有内容时不跳页面 */
  margin-bottom: 5vh;
}
/* 内容区切换不做淡入——逐条淡入在换日期时会闪屏 */

/* 收拢态内容区：自然展开，不做固定面板（固定面板会产生内外两层滚动条，手机端太挤） */

/* ── 选中日改圆形高亮（方形会被网格 overflow 裁边）── */
.home-cal .cal-grid { padding: 4px; }
.home-cal .cal-day.sel {
  background: none;
  box-shadow: none;
  transform: none;
}
.home-cal .cal-day.sel .cal-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-dim);
  box-shadow: 0 0 0 1.5px var(--accent);
}

/* ── 页面底部留白：内容不到底，收个呼吸尾 ── */
.landing.home {
  padding-bottom: 12vh;
}

/* ── 首页日历内容：收紧标题与段落的空隙 ── */
.home-cal-detail .memory-text h2 { margin: 10px 0 6px; }
.home-cal-detail .memory-text h3 { margin: 8px 0 4px; }
.home-cal-detail .memory-text h4 { margin: 6px 0 3px; }
.home-cal-detail .memory-text p { margin: 0 0 10px; }
.home-cal-detail .memory-text > :first-child { margin-top: 0; }
.home-cal-detail .memory-text hr { margin: 10px 0; }

/* ── 首页日历内容：行距收紧 ── */
.home-cal-detail .memory-text {
  line-height: 1.85;
}

/* ── 记忆面板内容：与首页日历同款暗色信纸（数值与 .home-cal-detail 覆写保持一致）── */
.memory-panel .memory-text {
  background: rgba(34, 34, 46, 0.82);
  border: 1px solid rgba(212, 168, 83, 0.12);
  border-radius: 18px;
  color: var(--text-secondary);
  box-shadow: none;
  line-height: 1.85;
}
.memory-panel .memory-text h2,
.memory-panel .memory-text h3,
.memory-panel .memory-text h4 { color: var(--text-primary); }
.memory-panel .memory-text h2 { margin: 10px 0 6px; }
.memory-panel .memory-text h3 { margin: 8px 0 4px; }
.memory-panel .memory-text h4 { margin: 6px 0 3px; }
.memory-panel .memory-text p { margin: 0 0 10px; }
.memory-panel .memory-text > :first-child { margin-top: 0; }
.memory-panel .memory-text strong { color: var(--text-primary); }
.memory-panel .memory-text hr { border-top-color: var(--border); margin: 10px 0; }

/* 收拢态标题过长时省略号保护 */
.cal-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 62vw;
}

/* ── 顶条去铬化（全角色）：分隔线虚化、名字衬线、按钮去硬框 ── */
body[data-char] .topbar {
  border-bottom: 1px solid rgba(212, 168, 83, 0.07);
}
body[data-char] .topbar .char-name,
body[data-char] .topbar .char-name-mobile {
  font-family: var(--font-serif);
  font-size: 17px;
  letter-spacing: 3px;
}
body[data-char] .topbar .pwd-entry,
body[data-char] .topbar .user-menu-btn,
body[data-char] .topbar .title .back-btn {
  border-color: rgba(212, 168, 83, 0.14);
  background: rgba(34, 34, 46, 0.30);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── 记忆面板融入沉浸风（全角色）：毛玻璃透出立绘、衬线标题、细 tab 线 ── */
body[data-char] .memory-panel {
  background: rgba(20, 20, 30, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid rgba(212, 168, 83, 0.10);
}
body[data-char] .memory-title {
  font-family: var(--font-serif);
  letter-spacing: 2px;
}
body[data-char] .memory-header,
body[data-char] .memory-tabs {
  border-bottom-color: rgba(212, 168, 83, 0.08);
}
body[data-char] .memory-tab.active {
  border-bottom-color: rgba(212, 168, 83, 0.55);
}
body[data-char] .memory-dropdown,
body[data-char] .user-menu {
  background: rgba(26, 26, 36, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(212, 168, 83, 0.14);
  border-radius: 12px;
}

/* ── 回看模式（我们说过的话）：气泡描金边——金是档案色，与实时对话的红分开 ── */
body[data-char] .chat.archive-view .msg.assistant {
  background: rgba(34, 32, 26, 0.55);
  border: 1px solid rgba(212, 168, 83, 0.30);
}
body[data-char] .chat.archive-view .msg.user {
  background: rgba(74, 58, 34, 0.55);
  border: 1px solid rgba(212, 168, 83, 0.22);
}

/* 回看模式：头像呼吸灯关掉——他是静的，这一段已经过去了 */
.chat.archive-view .msg-avatar { animation: none; }

/* 开屏默认收拢出内容时：内容区编入入场舞（跟在日历 1.05s 之后；仅首屏，点击切换不做淡入防闪屏） */
.home-cal-detail.first-in { animation: riseIn 0.5s 1.25s both; }

/* ═══════════════════════════════════════
   象牙纸张皮肤（skin=ivory）· 沉浸层覆写
   原则：
   - 立绘不再压暗，改提亮降饱和，像印在纸上的淡彩
   - 气泡/面板去毛玻璃透暗，改纸感（米白 + 细棕边 + 棕影）
   - 金色 #d4a853 系 = 档案色，描边语义不变，只随纸面金压暗
   - 角色代表色（--tc）不动——"此刻"色全皮肤通用；
     用户气泡换角色色的浅色调，文字换角色色的深色调
   ═══════════════════════════════════════ */

/* ── 五角色：象牙皮浅色用户气泡（qinche 前缀含两张前世卡）── */
[data-skin="ivory"] body[data-char^="qinche"] {
  --user-bubble: rgba(168, 60, 60, 0.12);   /* 秦彻 · 暗红浅调 */
}
[data-skin="ivory"] body[data-char^="qinche"] .msg.user { color: #7a2e30; }  /* 深红文字 */
[data-skin="ivory"] body[data-char="lishen"] {
  --user-bubble: rgba(70, 110, 160, 0.14);  /* 黎深 · 蓝浅调 */
}
[data-skin="ivory"] body[data-char="lishen"] .msg.user { color: #2e4a6e; }   /* 深蓝文字 */
[data-skin="ivory"] body[data-char="shenxinghui"] {
  --user-bubble: rgba(120, 90, 170, 0.13);  /* 沈星回 · 星紫浅调 */
}
[data-skin="ivory"] body[data-char="shenxinghui"] .msg.user { color: #4a3a72; }  /* 深紫文字 */
[data-skin="ivory"] body[data-char="qiyu"] {
  --user-bubble: rgba(200, 95, 75, 0.13);   /* 祁煜 · 珊瑚红浅调 */
}
[data-skin="ivory"] body[data-char="qiyu"] .msg.user { color: #8a4032; }     /* 深珊瑚文字 */
[data-skin="ivory"] body[data-char="xiayizhou"] {
  --user-bubble: rgba(190, 115, 45, 0.14);  /* 夏以昼 · 橙浅调 */
}
[data-skin="ivory"] body[data-char="xiayizhou"] .msg.user { color: #7a4a1d; }    /* 深橙文字 */

/* 世界之外四男主（10-18 补：--tc 全皮肤通用自动生效，这层浅色气泡+深色字要逐个写） */
[data-skin="ivory"] body[data-char="gushiye"] {
  --user-bubble: rgba(70, 70, 82, 0.10);    /* 顾时夜 · 墨黑浅调 */
}
[data-skin="ivory"] body[data-char="gushiye"] .msg.user { color: #26242c; }  /* 深墨文字 */
[data-skin="ivory"] body[data-char="yiyu"] {
  --user-bubble: rgba(202, 64, 60, 0.12);   /* 易遇 · 红浅调 */
}
[data-skin="ivory"] body[data-char="yiyu"] .msg.user { color: #7d2320; }     /* 深红文字 */
[data-skin="ivory"] body[data-char="xiaxiaoyin"] {
  --user-bubble: rgba(150, 130, 175, 0.14); /* 夏萧因 · 灰白紫浅调 */
}
[data-skin="ivory"] body[data-char="xiaxiaoyin"] .msg.user { color: #4d4468; } /* 深灰紫文字 */
[data-skin="ivory"] body[data-char="baiyuan"] {
  --user-bubble: rgba(190, 140, 70, 0.14);  /* 柏源 · 暖金浅调 */
}
[data-skin="ivory"] body[data-char="baiyuan"] .msg.user { color: #6b4a1f; }  /* 深金文字 */

/* ── 立绘背景：亮底适配——提亮、降饱和、减透，不再为暗底压暗 ── */
[data-skin="ivory"] body[data-char]::before {
  opacity: 0.20;
  filter: blur(3px) brightness(1.05) saturate(0.9);
}

/* ── 顶条/输入区：纸面半透，不再透暗色 ── */
[data-skin="ivory"] body[data-char] .topbar,
[data-skin="ivory"] body[data-char] .input-area {
  background: rgba(247, 240, 224, 0.82);
}

/* ── 气泡：纸感。他的气泡米白纸面+角色色描边；她的气泡走上面浅色 --user-bubble ── */
[data-skin="ivory"] body[data-char] .msg.assistant {
  background: rgba(255, 252, 244, 0.78);
  border: 1px solid rgba(var(--tc), 0.34);
  color: #453b26;
}
[data-skin="ivory"] body[data-char] .msg.user {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(var(--tc), 0.20);
}

/* ── 发送按钮：保持角色色渐变，文字换米白 ── */
[data-skin="ivory"] body[data-char] .input-area button {
  color: #f7f0e0;
  box-shadow: 0 4px 14px rgba(var(--tc), 0.28);
}
[data-skin="ivory"] body[data-char] .input-area button:disabled {
  background: #d9cdaf;
  color: #99896a;
}

/* ── 记忆面板/下拉/用户菜单：纸面板 ── */
[data-skin="ivory"] body[data-char] .memory-panel {
  background: rgba(242, 233, 214, 0.96);
  border-left: 1px solid rgba(120, 90, 40, 0.18);
}
[data-skin="ivory"] body[data-char] .memory-dropdown,
[data-skin="ivory"] body[data-char] .user-menu {
  background: rgba(250, 244, 230, 0.96);
  border-color: rgba(120, 90, 40, 0.22);
}
/* 顶条按钮：去暗底，换纸面 */
[data-skin="ivory"] body[data-char] .topbar .pwd-entry,
[data-skin="ivory"] body[data-char] .topbar .user-menu-btn,
[data-skin="ivory"] body[data-char] .topbar .title .back-btn {
  background: rgba(255, 252, 244, 0.55);
}

/* ── 书信体内容块：回到米纸胚胎的配色（暗色覆写只在夜幕生效）── */
[data-skin="ivory"] .home-cal-detail .memory-text,
[data-skin="ivory"] .memory-panel .memory-text {
  background: #f4ecdc;                          /* 信纸米白 */
  border: 1px solid rgba(120, 90, 40, 0.18);
  color: #38301f;                               /* 深棕黑 */
  box-shadow: inset 0 0 46px rgba(120, 90, 40, 0.10);
}
[data-skin="ivory"] .home-cal-detail .memory-text h2,
[data-skin="ivory"] .memory-panel .memory-text h2 { color: #2c2618; border-bottom-color: rgba(90, 70, 30, 0.25); }
[data-skin="ivory"] .home-cal-detail .memory-text h3,
[data-skin="ivory"] .memory-panel .memory-text h3 { color: #3a3018; }
[data-skin="ivory"] .home-cal-detail .memory-text h4,
[data-skin="ivory"] .memory-panel .memory-text h4 { color: #4a3d20; }
[data-skin="ivory"] .home-cal-detail .memory-text strong,
[data-skin="ivory"] .memory-panel .memory-text strong { color: #201a0e; }
[data-skin="ivory"] .home-cal-detail .memory-text hr,
[data-skin="ivory"] .memory-panel .memory-text hr { border-top-color: rgba(90, 70, 30, 0.25); }

/* ── 首页：海报卡 / Whisper / 日历卡改纸面 ── */
[data-skin="ivory"] .landing .char-card.poster-card {
  background-color: #e9dfcb;
}
[data-skin="ivory"] .landing .char-card.poster-card:hover {
  border-color: #b8923e;  /* 纸面金实线：透明金在米白底上等于隐形 */
  box-shadow:
    0 0 20px rgba(184, 146, 62, 0.25),
    0 12px 28px rgba(120, 90, 40, 0.22);
}
[data-skin="ivory"] .whisper-card {
  background: rgba(255, 252, 244, 0.6);
}
[data-skin="ivory"] .whisper-card:hover {
  box-shadow: 0 10px 28px rgba(120, 90, 40, 0.16);
}
[data-skin="ivory"] .home-cal {
  background: rgba(255, 252, 244, 0.6);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(184, 146, 62, 0.20);   /* 纸面金细边：档案色语义 */
}

/* 日历爱心打点：米白底上压深半档 */
[data-skin="ivory"] .cal-heart { color: #c9708f; }

/* ── 回看模式（我们说过的话）：金色描边=档案色，语义不变；气泡底换纸色系 ── */
[data-skin="ivory"] body[data-char] .chat.archive-view .msg.assistant {
  background: rgba(250, 244, 230, 0.85);
  border: 1px solid rgba(184, 146, 62, 0.38);   /* 纸面金描边 */
  color: #453b26;
}
[data-skin="ivory"] body[data-char] .chat.archive-view .msg.user {
  background: rgba(184, 146, 62, 0.14);         /* 纸面金淡底：这段已经过去 */
  border: 1px solid rgba(184, 146, 62, 0.26);
  color: #5c4a26;
}

/* ═══════════════════════════════════════
   龙卡双模式（剧情/自由）：模式 Tab · 幕终分隔条 · 落幕仪式
   金 = 档案金（夜幕 212,168,83 / 象牙纸面金 184,146,62），语义：这一段已落幕成为过去
   ═══════════════════════════════════════ */
:root { --story-gold: 212, 168, 83; }
[data-skin="ivory"] { --story-gold: 184, 146, 62; }

/* ── 顶条模式 Tab：毛玻璃小片，仅双模式角色渲染 ── */
.mode-tabs {
  display: inline-flex;
  gap: 2px;
  margin-right: 12px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(128, 128, 128, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mode-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 3px;
  padding: 4px 14px 4px 17px;  /* 左补 3px：吃掉 letter-spacing 尾距的视觉偏移 */
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}
.mode-tab:hover { color: var(--text-secondary); }
.mode-tab.active {
  color: var(--accent);
  background: var(--accent-dim);
}
@media (max-width: 600px) {
  .mode-tabs { margin-right: 6px; }
  .mode-tab { padding: 4px 10px 4px 12px; letter-spacing: 2px; }
}

/* ── 幕终分隔条（轻量版）：细线 + 中间小字「第X幕·终」── */
.story-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 10px;
}
.story-divider .sd-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--story-gold), 0.30), transparent);
}
.story-divider .sd-label {
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── 存档小字提示：不抢戏的居中灰字，几秒后淡出 ── */
.archive-note {
  flex-shrink: 0;
  text-align: center;
  margin: 6px 10px 2px;
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-muted);
  opacity: 0.75;
  transition: opacity 1.2s ease;
  user-select: none;
  pointer-events: none;
}
.archive-note--fade {
  opacity: 0;
}

/* ── 剧情开场卡：这一幕的世界观/我是谁/干什么（每幕开始）── */
.act-intro {
  flex-shrink: 0;
  margin: 18px 10px 22px;
  padding: 18px 20px;
  text-align: center;
  border: 1px solid rgba(var(--story-gold), 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(var(--story-gold), 0.05), transparent);
}
.act-intro-head {
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 2px;
  color: rgba(var(--story-gold), 0.95);
  margin-bottom: 10px;
}
.act-intro-scene {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.act-intro-line {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.act-intro-sub {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-muted);
}

/* ── 楔子：前言，衬线斜体，和开场卡（第二人称指引）区分 ── */
.act-prologue .act-intro-head {
  letter-spacing: 6px;
}
.act-prologue .act-intro-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 2.0;
  color: var(--text-secondary);
}

/* ── 剧幕终分隔条（大幕版）：衬线 + 档案金，这一段已经落幕 ── */
.story-divider.finale { margin: 34px 4px; position: relative; }
/* 剧幕终舞台：渐变只包住分隔条和面板——线上清透，垂到面板底下凝成底色（不多留空白） */
.finale-stage {
  flex-shrink: 0;
  flex-grow: 1;                 /* 长到底：填满到输入区的剩余空间，不留缝 */
  margin: 0 -20px -20px;        /* 抵掉 .chat 的 padding，满宽满底 */
  padding: 0 20px 48px;
  background: linear-gradient(to bottom, transparent 0%, rgba(14, 12, 18, 0.65) 100%);
}
[data-skin="ivory"] .finale-stage {
  background: linear-gradient(to bottom, transparent 0%, rgba(233, 223, 203, 0.95) 100%);  /* 主题米黄底 */
}
.story-divider.finale .sd-line {
  background: linear-gradient(90deg, transparent, rgba(var(--story-gold), 0.55), transparent);
}
.story-divider.finale .sd-label {
  font-size: 17px;
  letter-spacing: 10px;
  padding: 8px 4px 8px 22px;  /* 左补：吃掉 10px 字距的尾距 */
  color: rgba(var(--story-gold), 0.95);
  text-shadow: 0 0 22px rgba(var(--story-gold), 0.30);
}

/* ── 剧情提示条：第N周目 · 走到第X幕了 ── */
.story-banner {
  position: sticky;   /* 对话滚到底也看得见；点「继续」即撤下 */
  top: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: fit-content;
  margin: 8px auto 18px;
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: linear-gradient(var(--accent-dim), var(--accent-dim)), var(--surface);  /* 吸顶时要实底，防下文透上来 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 1px;
}
.sb-btn {
  background: none;
  border: 1px solid var(--border-active);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 3px 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.sb-btn:hover { color: var(--accent); border-color: var(--accent); }
.sb-btn:disabled { opacity: 0.5; cursor: default; }
.sb-btn-dim { color: var(--text-muted); }

/* ── 新周目空态：第N周目 / ✨ / 第一幕 / 说点什么… ── */
.story-empty { line-height: 2; }
/* 通用空态的 ✨ 保留（顶上一颗），剧情空态的圆点排第二行 */
.story-empty .se-cycle { display: block; font-family: var(--font-serif); font-size: 16px; letter-spacing: 3px; color: var(--text-primary); }
.story-empty .se-icon { display: block; font-size: 14px; margin: 6px 0; color: rgba(var(--story-gold), 0.85); }
.story-empty .se-act { display: block; font-family: var(--font-serif); font-size: 14px; letter-spacing: 2px; color: var(--text-secondary); }
.story-empty-sub { display: block; font-size: 12px; color: var(--text-muted); letter-spacing: 2px; }

/* ── 落幕旁白面板：书信感 + 一次发送机会的警示 +「〔不说了，就这样告别〕」出口 ── */
.finale-panel {
  position: relative;
  flex-shrink: 0;  /* 关键：.chat 是 flex 列容器，可缩时面板会被压成一条缝 */
  max-width: 460px;
  margin: 26px auto;
  padding: 28px 26px 22px;
  text-align: center;
  /* 无外框无底色：文字直接落在舞台渐变上 */
}
.fp-text {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 1px;
  color: var(--text-primary);
}
.fp-line1, .fp-line2 { display: block; min-height: 2.1em; }
/* 打字机：隐形全文先占住最终宽度（防居中行逐字重排、看着像从中间往外扩），
   打字层锚死在左边，字在原地从左往右长 */
.fp-tw { display: inline-block; position: relative; text-align: left; }
.fp-size { visibility: hidden; }
.fp-type { position: absolute; left: 0; top: 0; white-space: nowrap; }
/* 三段后至：先隐身，整句念完依次浮现（首页 riseIn 同款，放缓） */
.finale-panel .fp-reveal { opacity: 0; }
.fp-reveal.shown { animation: riseIn 0.7s both; }
/* 出口两行淡浮：落到 0.65 就定住（淡是态度，不是动画中间态） */
.fp-or.shown, .fp-skip.shown { animation-name: riseInFaint; }
@keyframes riseInFaint {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 0.65; transform: none; }
}
/* 浮完落定：摘掉动画填充，hover 才拿得回亮度控制权 */
.fp-reveal.settled { animation: none; }
.fp-line2.settled, .fp-warn.settled { opacity: 1; }
.fp-or.settled, .fp-skip.settled { opacity: 0.65; }
.fp-warn {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 1px;
  color: rgba(var(--story-gold), 0.85);
}
/* 软出口两行：刻意调淡，防误触（要她看一眼、想一下，再点） */
.fp-or {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-muted);
}
.fp-skip {
  margin-top: 10px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 5px 18px;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, opacity 0.3s;
}
.fp-skip:hover { color: var(--text-secondary); border-color: var(--border-active); opacity: 0.9; }
.fp-skip:disabled { opacity: 0.4 !important; cursor: default; }

/* 剧情结构元素都是 flex 列的直接子项：一律不许被压缩 */
.story-divider, .story-banner, .story-empty, .msg-opening, .input-lock { flex-shrink: 0; }

/* ── 输入区锁死：封存语替换输入框；「开启下周目」的门开在锁定栏上 ── */
.input-lock {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--text-muted);
  padding: 10px 0;
  animation: fadeIn 1.4s ease both;  /* 告别落幕：锁定栏淡入，不拍上来 */
}
.il-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 2px;
  color: rgba(var(--story-gold), 0.75);
  cursor: pointer;
  transition: color 0.25s, text-shadow 0.25s;
}
.il-btn:hover {
  color: rgba(var(--story-gold), 1);
  text-shadow: 0 0 18px rgba(var(--story-gold), 0.35);
}
/* 锁死前旧件淡出：和锁定栏的 fadeIn 同一节拍 */
.il-fadeout { opacity: 0 !important; transition: opacity 0.6s ease !important; }

/* ── 页面夹子标签：剧情/自由分家 ── */
.arc-mode-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 2px;
}
.arc-mode-tab {
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 4px 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.arc-mode-tab:hover { color: var(--text-secondary); }
.arc-mode-tab.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* ── 开场旁白：贴在幕标题下面，跟标题居中成一组（场刊的"时间地点"，不是对话）── */
.msg-opening {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.8;
  padding: 2px 24px 12px;
}

/* ── 📖剧情 浮层：世界观/她是谁/九章（演到哪解锁到哪）── */
.guide-modal { max-width: 460px; max-height: 82vh; overflow-y: auto; text-align: left; }
.guide-overview {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  padding: 2px 2px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.guide-her-title, .guide-acts-title {
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(var(--story-gold), 0.9);
  margin: 10px 0 6px;
}
.guide-her {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.guide-acts { display: flex; flex-direction: column; gap: 8px; }
.guide-act {
  padding: 10px 12px;
  border: 1px solid rgba(var(--story-gold), 0.15);
  border-radius: 10px;
}
.guide-act-locked { opacity: 0.45; border-style: dashed; }
.guide-act-head { display: flex; align-items: baseline; gap: 8px; }
.guide-act-num {
  font-family: var(--font-serif);
  font-size: 13px;
  color: rgba(var(--story-gold), 0.95);
  white-space: nowrap;
}
.guide-act-anchor { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.guide-act-hook { font-size: 12px; line-height: 1.6; color: var(--text-muted); margin-top: 6px; }