:root {
  --paper: #f6f0e3;
  --sage: #cdd1b2;
  --leaf: #6f9457;
  --leaf-deep: #4c7140;
  --ink: #26351f;
  --ink-dim: rgba(38, 53, 31, 0.62);
  --sun: #fff6d2;
  /* 说出来的话用的字体：英文细衬线 + 中文细楷体 */
  --voice-font: "Cormorant Garamond", "LXGW WenKai", "Songti SC", "PingFang SC", Georgia, serif;
  /* --ptint-a/b/c：只叠在人物身上的颜色（由抠像的着色器读取），从脸部中心向外依次过渡，让人物贴近当前花园的光线
     --tint：叠在整个画面上，只用于阴雨天的灰调。两者都是正片叠底，白色等于不改变 */
  --ptint-a: #ffffff; --ptint-b: #ffffff; --ptint-c: #ffffff;
  /* 人物轮廓的边缘光：颜色和强度，跟着天色变 */
  --rim: #fff8e6; --rim-strength: 0.8; --backlight: 0.7; --sparkle: 0.7;
  --tint: #ffffff;
  --garden-base: #f3ecd9;
  --video-light: 1.04;
  --panel: 246, 240, 227;
  --panel-mid: 0.72;
  --panel-end: 0.94;
  --lamp: 0;
  --text-glow: rgba(255, 252, 240, 0.95);
  --tip: var(--leaf-deep);
}
/* 清晨、傍晚和黄昏用晚霞那张花园 */
body[data-phase="dawn"], body[data-phase="golden"], body[data-phase="dusk"] {
  --ptint-a: #ffc4a2; --ptint-b: #ffc4a2; --ptint-c: #ffc4a2;
  --rim: #ffdcae; --rim-strength: 0.95; --backlight: 0.85; --sparkle: 0.9;
  --garden-base: #e9b996;
  --video-light: 1;
  --panel: 248, 214, 188;
  --panel-mid: 0.6;
  --panel-end: 0.9;
}
body[data-phase="dusk"] { --lamp: 0.4; }
body[data-phase="night"] {
  /* 夜里人物周围留一圈暖光，像身边点着一支蜡烛；越往外越接近月色 */
  --ptint-a: #d9c4a4; --ptint-b: #b3a3aa; --ptint-c: #90a1e0;
  --rim: #ffd79a; --rim-strength: 1.15; --backlight: 1; --sparkle: 1;
  /* 烛光照到的范围之外，花园整体暗下去 */
  --tint: radial-gradient(ellipse 52% 68% at 50% 40%, #ffffff 0%, #ece6ea 34%, #b3b5d2 70%, #8f95bc 100%);
  --garden-base: #4d5682;
  --video-light: 1;
  --lamp: 1;
  --panel: 34, 40, 66;
  --panel-mid: 0.32;
  --panel-end: 0.62;
  --ink: #f1ecdc;
  --ink-dim: rgba(241, 236, 220, 0.62);
  --text-glow: rgba(10, 14, 30, 0.9);
  --tip: #c6dba0;
}
/* 阴雨天整体偏灰；夜里已经够暗，不再叠加 */
body[data-weather="cloudy"]:not([data-phase="night"]), body[data-weather="fog"]:not([data-phase="night"]) { --tint: #e3e6ea; }
body[data-weather="rain"]:not([data-phase="night"]), body[data-weather="storm"]:not([data-phase="night"]),
body[data-weather="snow"]:not([data-phase="night"]) { --tint: #cfd6de; }

* { box-sizing: border-box; }
/* 页面钉死：不能双指放大、不能双击放大、不能整页被拖着晃。里面该滚动的地方（设置、往事）照常能滚 */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  position: fixed; inset: 0; width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
}
button, select, input, textarea { font: inherit; color: inherit; }
textarea { resize: vertical; line-height: 1.45; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--leaf-deep); outline-offset: 3px; }

/* ---------- 白天的后花园：阳光、虚化的花木、飘落的花瓣 ---------- */
/* 底色取自视频画面的边缘（左上米白、右侧灰绿），人物边缘才能融进去 */
#garden {
  position: fixed; inset: 0; overflow: hidden;
  background:
    radial-gradient(circle at 10% -5%, rgba(255, 246, 210, 0.95), transparent 46%),
    radial-gradient(ellipse 70% 40% at 50% 108%, rgba(140, 176, 110, 0.55), transparent 70%),
    linear-gradient(105deg, #e6ded1 0%, #c6c4af 46%, #abac93 100%);
}
/* 三张花园照片在最底层，按天色淡入淡出；有照片时不再显示代码画的光斑和光束 */
#garden .photo {
  position: absolute; inset: -5%; background-size: cover; background-position: center;
  filter: blur(3px) saturate(0.9);
  opacity: 0; transition: opacity 3s ease;
  animation: parallax 19s ease-in-out infinite;
}
/* 花园里星星点点的光：在人物身后，各自按不同的节奏明灭 */
#sparkles { position: absolute; inset: 0; opacity: var(--sparkle); transition: opacity 3s ease; }
.sparkle {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--rim) 35%, transparent 70%);
  opacity: 0;
  animation: twinkle var(--time) ease-in-out var(--delay) infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  45% { opacity: var(--peak); transform: scale(1); }
  60% { opacity: calc(var(--peak) * 0.55); transform: scale(0.85); }
  75% { opacity: var(--peak); transform: scale(1.05); }
}
#garden .photo.on { opacity: 0.72; }
#garden.has-photo { background: var(--garden-base); transition: background 3s ease; }
#garden.has-photo #bokeh, #garden.has-photo .sunbeams { display: none; }
.sunbeams {
  position: absolute; inset: -20% -10%;
  background: repeating-linear-gradient(118deg,
    transparent 0 8%, rgba(255, 250, 225, 0.42) 12%, transparent 17%,
    transparent 28%, rgba(255, 250, 225, 0.26) 32%, transparent 38%);
  filter: blur(26px);
  animation: sway 18s ease-in-out infinite alternate;
}
.bokeh {
  position: absolute; border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: float var(--time) ease-in-out var(--delay) infinite alternate;
}
.petal {
  position: absolute; top: -6%;
  border-radius: 80% 0 80% 0;
  opacity: 0;
  animation: fall var(--time) linear var(--delay) infinite;
}
@keyframes sway { to { transform: translateX(3%) rotate(1.5deg); } }
@keyframes float { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); } }
@keyframes fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10%, 85% { opacity: var(--peak); }
  100% { opacity: 0; transform: translate(var(--dx), 112vh) rotate(var(--spin)); }
}

/* ---------- 角色画面 ---------- */
#stage { position: fixed; inset: 0; }
#tint {
  position: fixed; inset: 0; pointer-events: none;
  background: var(--tint); mix-blend-mode: multiply;
  transition: background 3s ease;
}
#sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
/* 烛光：中心亮、外圈柔，三层各按自己的节奏明暗和晃动，叠起来就不会显得规律 */
#lamp { position: absolute; inset: 0; opacity: var(--lamp); transition: opacity 3s ease; animation: gutter 11s ease-in-out infinite; }
#lamp i { position: absolute; inset: -6%; transform-origin: 50% 36%; }
#lamp .halo {
  background: radial-gradient(ellipse 50% 64% at 50% 38%, rgba(255, 200, 120, 0.13), rgba(255, 184, 104, 0.08) 46%, rgba(255, 176, 96, 0.03) 76%, transparent 100%);
  animation: sway-flame 5.3s ease-in-out infinite;
}
#lamp .core {
  background: radial-gradient(ellipse 15% 22% at 50% 34%, rgba(255, 238, 196, 0.12), rgba(255, 214, 146, 0.06) 52%, transparent 100%);
  animation: flicker 3.7s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 0.84; transform: scale(1); }
  7% { opacity: 0.96; transform: scale(1.04); }
  13% { opacity: 0.76; transform: scale(0.97); }
  21% { opacity: 1; transform: scale(1.06); }
  29% { opacity: 0.86; transform: scale(1); }
  36% { opacity: 0.93; transform: scale(1.03); }
  44% { opacity: 0.72; transform: scale(0.96); }
  52% { opacity: 0.98; transform: scale(1.05); }
  63% { opacity: 0.82; transform: scale(0.985); }
  71% { opacity: 1; transform: scale(1.07); }
  80% { opacity: 0.8; transform: scale(0.975); }
  90% { opacity: 0.94; transform: scale(1.03); }
}
@keyframes sway-flame {
  0%, 100% { opacity: 0.9; transform: scale(1) translate(0, 0); }
  17% { opacity: 1; transform: scale(1.035) translate(0.5%, -0.3%); }
  34% { opacity: 0.84; transform: scale(0.98) translate(-0.4%, 0.2%); }
  55% { opacity: 0.97; transform: scale(1.045) translate(-0.7%, -0.4%); }
  73% { opacity: 0.86; transform: scale(0.99) translate(0.6%, 0.3%); }
  88% { opacity: 0.95; transform: scale(1.025) translate(0.2%, -0.2%); }
}
/* 偶尔像被风带了一下，暗一瞬又亮回来 */
@keyframes gutter {
  0%, 44%, 49%, 100% { filter: brightness(1); }
  46% { filter: brightness(0.72); }
  47.5% { filter: brightness(1.06); }
  81% { filter: brightness(1); }
  82.5% { filter: brightness(0.84); }
  84% { filter: brightness(1); }
}
#fireflies { position: absolute; inset: 0; opacity: 0; transition: opacity 3s ease; }
body[data-phase="dusk"] #fireflies, body[data-phase="night"] #fireflies { opacity: 1; }
.firefly {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #f3eaa9; box-shadow: 0 0 9px 3px rgba(243, 234, 169, 0.75);
  opacity: 0;
  animation: drift var(--time) ease-in-out var(--delay) infinite;
}
@keyframes drift {
  0% { opacity: 0; transform: translate(0, 0); }
  20%, 70% { opacity: var(--peak); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}
#rain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2.5s ease; }
body[data-weather="rain"] #rain, body[data-weather="storm"] #rain { opacity: 1; }
/* 雨天地面附近起一层薄雾 */
#sky::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 3s ease;
  background: linear-gradient(to top, rgba(226, 232, 240, 0.22), transparent 42%);
}
body[data-weather="rain"] #sky::after, body[data-weather="storm"] #sky::after { opacity: 1; }
/* 下雨时萤火躲起来 */
body[data-weather="rain"] #fireflies, body[data-weather="storm"] #fireflies { opacity: 0 !important; }
/* 下雨、下雪和夜里不飘花瓣 */
#petals { transition: opacity 3s ease; }
body[data-weather="rain"] #petals, body[data-weather="storm"] #petals, body[data-phase="night"] #petals { opacity: 0; }
/* 人物背后的光：在人物和花园之间，只照亮他身后，不会打到脸上 */
#backlight {
  position: fixed; top: 0; bottom: 0; left: 50%;
  width: min(140vw, calc(100dvh * 1.15));
  translate: -50% 0;
  pointer-events: none;
  background: radial-gradient(ellipse 44% 46% at 50% 34%,
    color-mix(in srgb, var(--rim) 62%, transparent) 0%,
    color-mix(in srgb, var(--rim) 34%, transparent) 38%,
    color-mix(in srgb, var(--rim) 10%, transparent) 70%,
    transparent 100%);
  opacity: var(--backlight);
  transform-origin: 50% 36%;
  animation: sway-flame 5.3s ease-in-out infinite;
  transition: opacity 3s ease;
}
#portrait {
  position: fixed; top: 0; bottom: 0; left: 50%;
  width: min(100vw, calc(100dvh * 3 / 4));
  transform: translateX(-50%);
}
/* 镜头的呼吸感：很慢的推近、拉远和轻微漂移；听你说话时再稍稍靠近一点 */
#actor {
  /* 和视频同样的 3:4 比例；窄屏上两侧超出屏幕的部分自然被裁掉 */
  position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 3 / 4; translate: -50% 0;
  transform-origin: 50% 32%;
  animation: camera 19s ease-in-out infinite;
  transition: scale 1.6s ease;
}
body[data-state="listening"] #actor { scale: 1.035; }
@keyframes camera {
  0%, 100% { transform: scale(1.02) translate(0, 0); }
  30% { transform: scale(1.05) translate(-0.5%, 0.4%); }
  62% { transform: scale(1.035) translate(0.6%, -0.2%); }
  82% { transform: scale(1.06) translate(0.1%, 0.5%); }
}
/* 背景跟着反向慢慢移动，产生一点前后层次 */
#bokeh { position: absolute; inset: 0; animation: parallax 19s ease-in-out infinite; }
@keyframes parallax {
  0%, 100% { transform: translate(0, 0) scale(1.02); }
  30% { transform: translate(0.7%, -0.3%) scale(1.02); }
  62% { transform: translate(-0.8%, 0.2%) scale(1.02); }
  82% { transform: translate(-0.1%, -0.4%) scale(1.02); }
}
.companion-poster, .companion-clip, .companion-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  scale: var(--clip-zoom, 1);
  transform-origin: var(--clip-origin, 50% 50%);
  filter: brightness(var(--video-light));
  user-select: none; -webkit-user-drag: none;
}
.companion-clip { opacity: 0; transition: opacity var(--clip-fade, 0.2s) linear; pointer-events: none; }
.companion-clip.on { opacity: 1; }
/* 实时抠像时视频只作为画面来源，本身不显示 */
/* 仍然占着整个画面、只是几乎完全透明：手机浏览器会暂停“看不见”的视频，太小或完全透明都可能被当成看不见 */
.companion-source { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.001; pointer-events: none; }

/* ---------- 字幕与麦克风 ---------- */
#dialogue {
  position: absolute; left: 0; right: 0; bottom: 0;
  min-height: 34dvh;
  padding: 36px 22px calc(26px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(var(--panel), var(--panel-mid)) 58%, rgba(var(--panel), var(--panel-end)));
  transition: color 3s ease;
  text-align: center;
}
/* 手机上字幕和按钮贴近屏幕底部，把画面留给人物 */
@media (max-width: 520px) {
  #dialogue { min-height: 0; gap: 6px; padding: 28px 20px calc(14px + env(safe-area-inset-bottom)); }
  #mic { width: 64px; height: 64px; margin-top: 6px; }
  #heard { min-height: 0; }
}
#dialogue p { margin: 0; max-width: 40rem; text-wrap: balance; }
#subtitle {
  font-family: var(--voice-font); font-weight: 300; letter-spacing: 0.02em;
  font-size: clamp(1.18rem, 2.4vw, 1.5rem); line-height: 1.6;
  text-shadow: 0 0 14px var(--text-glow), 0 0 3px var(--text-glow);
}
#subtitle.hidden-subs { display: none; }
#tip { color: var(--tip); font-family: var(--voice-font); font-weight: 300; font-size: 0.98rem; }
#heard { min-height: 1.4em; color: var(--ink-dim); font-family: var(--voice-font); font-weight: 300; font-style: italic; font-size: 1rem; }

/* 麦克风：一片透明的玻璃，图标和细边用当前天色下的文字颜色，白天深、夜里浅 */
#mic {
  position: relative; margin-top: 10px; pointer-events: auto;
  width: 72px; height: 72px; border-radius: 50%;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 20px rgba(0, 0, 0, 0.08);
  display: grid; place-items: center;
  transition: transform 0.15s ease, background 0.4s ease, box-shadow 0.4s ease, color 3s ease, border-color 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}
#mic:active { transform: scale(0.94); }
#mic .icon { grid-area: 1 / 1; display: none; }
#mic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#mic .ring {
  position: absolute; inset: -9px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent); opacity: 0; pointer-events: none;
}

#stage[data-state="idle"] .icon-mic,
#stage[data-state="listening"] .icon-mic { display: block; }
#stage[data-state="thinking"] .icon-dots,
#stage[data-state="speaking"] .icon-wave { display: flex; }

/* 在听你说话时，玻璃亮起来，外面多一圈柔光 */
#stage[data-state="listening"] #mic {
  background: rgba(255, 255, 255, 0.26);
  border-color: color-mix(in srgb, currentColor 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 6px color-mix(in srgb, var(--rim) 22%, transparent), 0 0 26px color-mix(in srgb, var(--rim) 55%, transparent);
}
#stage[data-state="listening"] #mic .ring { animation: pulse 1.8s ease-out infinite; }
@keyframes pulse {
  0% { opacity: 0.8; transform: scale(0.92); }
  100% { opacity: 0; transform: scale(1.45); }
}

.icon-dots, .icon-wave { align-items: center; gap: 5px; height: 30px; }
.icon-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1.2s ease-in-out infinite; }
.icon-dots i:nth-child(2) { animation-delay: 0.2s; }
.icon-dots i:nth-child(3) { animation-delay: 0.4s; }
.icon-wave i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: center; animation: wave 0.9s ease-in-out infinite; }
.icon-wave i:nth-child(1) { animation-delay: -0.6s; }
.icon-wave i:nth-child(2) { animation-delay: -0.3s; }
.icon-wave i:nth-child(4) { animation-delay: -0.45s; }
.icon-wave i:nth-child(5) { animation-delay: -0.15s; }
@keyframes blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes wave { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }

.icon-button {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px;
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 253, 244, 0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: grid; place-items: center; opacity: 0.75; transition: opacity 0.2s;
}
.icon-button:hover { opacity: 1; }
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: var(--leaf-deep); stroke-width: 1.5; stroke-linejoin: round; }

/* 三个小按钮在右上角竖着排成一列：设置、世界书、切换模式 */
.icon-button.second { top: calc(60px + env(safe-area-inset-top)); }
/* 切换对话模式。图标表示当前的模式：声波 = Gemini 实时语音，对话气泡 = 文字模型 + MiniMax */
.icon-button.left { top: calc(108px + env(safe-area-inset-top)); }
.icon-button svg { stroke-linecap: round; }
#toggleMode svg { display: none; }
body[data-engine="live"] #toggleMode .mode-live, body[data-engine="classic"] #toggleMode .mode-classic { display: block; }
#notice.info { background: rgba(251, 248, 239, 0.94); color: #26351f; }

#notice {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  margin: 0; width: max-content; max-width: min(34rem, calc(100vw - 120px));
  padding: 10px 16px; border-radius: 14px;
  background: rgba(150, 58, 40, 0.94); color: #fff; font-size: 0.9rem; line-height: 1.45;
  box-shadow: 0 8px 24px rgba(60, 40, 20, 0.25);
}

/* ---------- 设置 ---------- */
dialog {
  border: 1px solid rgba(76, 113, 64, 0.25); border-radius: 20px; padding: 22px 24px;
  width: min(92vw, 30rem); max-height: 88dvh;
  --ink: #26351f; --ink-dim: rgba(38, 53, 31, 0.62);
  color: var(--ink); background: #fbf8ef;
  box-shadow: 0 24px 60px rgba(60, 70, 40, 0.3);
}
dialog::backdrop { background: rgba(60, 70, 45, 0.3); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog h2 { margin: 0 0 12px; font-size: 1.1rem; font-weight: 600; }
dialog fieldset { border: 0; border-top: 1px solid rgba(38, 53, 31, 0.12); margin: 0; padding: 12px 0; display: grid; gap: 10px; }
dialog fieldset[hidden] { display: none; }
dialog .hint { margin: 0; font-size: 0.8rem; color: var(--ink-dim); line-height: 1.45; }
dialog legend { font-weight: 600; padding-right: 8px; color: var(--leaf-deep); font-size: 0.9rem; }
dialog label { display: grid; gap: 4px; font-size: 0.88rem; color: var(--ink-dim); }
dialog label .row, dialog fieldset > .row { display: flex; gap: 8px; align-items: center; }
dialog fieldset > small { color: var(--leaf-deep); min-height: 1.2em; font-size: 0.82rem; }
dialog select[hidden] { display: none; }
dialog label .row button { flex: none; padding: 7px 14px; }
dialog label small { min-height: 1.2em; color: var(--leaf-deep); }
dialog label[hidden] { display: none; }
dialog .group { display: grid; gap: 10px; }
dialog .group[hidden] { display: none; }
dialog label.check { display: flex; gap: 8px; align-items: flex-start; }
dialog input[type="text"], dialog input[type="url"], dialog input[type="password"], dialog select, dialog textarea {
  border: 1px solid rgba(38, 53, 31, 0.2); background: #fff; color: var(--ink);
  border-radius: 10px; padding: 8px 10px; width: 100%;
}
dialog input[type="range"], dialog input[type="checkbox"] { accent-color: var(--leaf-deep); }
dialog menu { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 0; flex-wrap: wrap; }
dialog .spacer { flex: 1; }
dialog button { border: 1px solid rgba(38, 53, 31, 0.22); background: transparent; border-radius: 999px; padding: 8px 16px; }
dialog button.primary { background: var(--leaf-deep); border-color: var(--leaf-deep); color: #fff; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  #actor, #backlight, .sparkle, #bokeh, #garden .photo, #lamp, #lamp i, .firefly, .sunbeams, .bokeh, .petal, #mic .ring, .icon-dots i, .icon-wave i { animation: none !important; }
  .icon-wave i { transform: scaleY(0.6); }
}

/* ---------- 世界书 ---------- */
#book { width: min(94vw, 56rem); height: min(88dvh, 44rem); padding: 0; overflow: hidden; }
#book[open] { display: flex; flex-direction: column; }
.book-head { display: flex; align-items: center; gap: 8px; padding: 16px 20px 12px; border-bottom: 1px solid rgba(38, 53, 31, 0.12); }
.book-head h2 { margin: 0; }
.book-head .spacer, #bookForm .spacer { flex: 1; }
#bookBack { display: none; }
.book-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 15rem 1fr; }
.book-side { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-right: 1px solid rgba(38, 53, 31, 0.12); min-height: 0; }
#bookList { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
#bookList h3 { margin: 10px 4px 2px; font-size: 0.78rem; font-weight: 600; color: var(--leaf-deep); }
#bookList h3:first-child { margin-top: 0; }
dialog .book-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; border-radius: 10px; border-color: transparent; padding: 8px 10px;
}
.book-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-item small { flex: none; font-size: 0.7rem; color: var(--ink-dim); }
.book-item[aria-current="true"] { background: rgba(76, 113, 64, 0.12); border-color: rgba(76, 113, 64, 0.3); }
.book-side > small, #bookStatus { color: var(--leaf-deep); font-size: 0.8rem; min-height: 1.2em; }
#bookForm { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; overflow-y: auto; }
#bookForm[hidden] { display: none; }
#bookForm textarea { min-height: 9rem; flex: 1; }
.book-mode { display: flex; gap: 18px; flex-wrap: wrap; }
#bookForm menu { margin-top: auto; }
dialog button.danger { color: #9a3a2a; border-color: rgba(154, 58, 42, 0.35); }
/* 窄屏：列表和编辑各占一屏，用“‹ 条目”返回 */
@media (max-width: 640px) {
  .book-body { grid-template-columns: 1fr; }
  .book-side { border-right: 0; }
  #book.editing .book-side { display: none; }
  #book:not(.editing) #bookForm { display: none; }
  #book.editing #bookBack { display: inline-block; }
  #book.editing .book-head h2, #book.editing #bookImport, #book.editing #bookExport { display: none; }
}

/* ---------- 往事：向上滑动翻看说过的话 ---------- */
/* 一层带模糊的暗纱盖在画面上，字是纤细的浅色，带一点微光 */
#past {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(64px + env(safe-area-inset-top)) 24px calc(150px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(16, 22, 24, 0.5), rgba(16, 22, 24, 0.66) 40%, rgba(12, 16, 20, 0.8));
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  opacity: 0; pointer-events: none; transition: opacity 0.55s ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 82%, transparent 100%);
  scrollbar-width: none;
}
#past::-webkit-scrollbar { display: none; }
body.past-open #past { opacity: 1; pointer-events: auto; }
/* 翻开时，当前的字幕让位，只留下麦克风 */
body.past-open #dialogue p { display: none; }
body.past-open #dialogue { background: none; }
body.past-open #mic { color: #f6efdc; }

#pastTabs {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: center; gap: 22px; margin-bottom: 26px;
}
#pastTabs button {
  border: 0; background: none; padding: 4px 2px; color: rgba(250, 244, 226, 0.5);
  font-weight: 200; letter-spacing: 0.3em; font-size: 0.86rem; text-indent: 0.3em;
  border-bottom: 1px solid transparent; transition: color 0.4s ease, border-color 0.4s ease, text-shadow 0.4s ease;
}
#pastTabs button[aria-pressed="true"] {
  color: #fdf6e3; border-color: rgba(255, 236, 190, 0.5); text-shadow: 0 0 12px rgba(255, 236, 190, 0.7);
}

#pastList { display: flex; flex-direction: column; gap: 22px; max-width: 34rem; margin: 0 auto; min-height: 40%; justify-content: flex-end; }
.past-line {
  font-family: var(--voice-font);
  font-weight: 300; letter-spacing: 0.03em; line-height: 1.75;
  opacity: 0; transform: translateY(14px); filter: blur(3px);
  animation: past-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.past-line p { margin: 0; }
.past-line.his { color: #fdf6e3; font-size: 1.2rem; text-shadow: 0 0 16px rgba(255, 236, 190, 0.5), 0 0 3px rgba(255, 236, 190, 0.35); }
.past-line.mine { align-self: flex-end; text-align: right; max-width: 82%; color: rgba(236, 240, 246, 0.6); font-size: 1rem; }
.past-line small { display: block; margin-top: 4px; color: rgba(190, 220, 160, 0.75); font-size: 0.78rem; font-weight: 300; }
.past-line .playable { cursor: pointer; transition: text-shadow 0.4s ease; }
.past-line .playable:hover { text-shadow: 0 0 20px rgba(255, 236, 190, 0.85), 0 0 4px rgba(255, 236, 190, 0.6); }
/* 正在重听的那一句，光一呼一吸 */
.past-line.playing p { animation: past-glow 1.9s ease-in-out infinite; }
.past-empty { text-align: center; color: rgba(250, 244, 226, 0.5); font-weight: 200; letter-spacing: 0.08em; }
@keyframes past-in { to { opacity: 1; transform: none; filter: none; } }
@keyframes past-glow {
  0%, 100% { text-shadow: 0 0 14px rgba(255, 236, 190, 0.5), 0 0 3px rgba(255, 236, 190, 0.35); }
  50% { text-shadow: 0 0 26px rgba(255, 228, 160, 1), 0 0 8px rgba(255, 236, 190, 0.8); }
}

.past-actions { display: flex; gap: 6px; margin-top: 6px; }
.past-actions button {
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none;
  display: grid; place-items: center; color: rgba(250, 244, 226, 0.55);
  transition: color 0.3s ease, filter 0.3s ease, transform 0.2s ease;
}
.past-actions button:hover { color: #fdf6e3; filter: drop-shadow(0 0 6px rgba(255, 236, 190, 0.8)); }
.past-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; }
.past-line.mine .past-actions { justify-content: flex-end; }
/* 删除：平时最淡，移上去才明显；点第一下变红，表示再点一次就删 */
.past-delete { opacity: 0.45; }
.past-line:hover .past-delete, .past-delete:focus-visible { opacity: 1; }
.past-actions .past-delete.armed { opacity: 1; color: #ff9a8a; filter: drop-shadow(0 0 7px rgba(255, 120, 100, 0.9)); animation: armed-shake 0.4s ease; }
.past-line.leaving { animation: past-out 0.45s ease forwards; }
@keyframes past-out { to { opacity: 0; transform: translateX(18px); filter: blur(4px); height: 0; margin-top: -22px; } }
@keyframes armed-shake { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.past-play .glyph-stop { display: none; }
.past-line.playing .glyph-play { display: none; }
.past-line.playing .glyph-stop { display: block; }
.past-line.playing .past-play { color: #ffe9b0; filter: drop-shadow(0 0 6px rgba(255, 228, 160, 0.9)); }
.past-star[aria-pressed="true"] { color: #ffe08a; filter: drop-shadow(0 0 7px rgba(255, 216, 120, 0.95)); }
.past-star[aria-pressed="true"] svg { fill: currentColor; }
.past-star.pop { animation: star-pop 0.55s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes star-pop { 0% { transform: scale(0.6) rotate(-20deg); } 60% { transform: scale(1.35) rotate(8deg); } 100% { transform: none; } }

/* 字幕上方那个很淡的小箭头：点它或向上滑翻开，翻开后变成向下的箭头用来收起 */
.past-handle {
  pointer-events: auto; width: 44px; height: 22px; padding: 0; border: 0; background: none;
  color: var(--ink); opacity: 0.32; display: grid; place-items: center; transition: opacity 0.3s ease;
  animation: handle-drift 3.6s ease-in-out infinite;
}
.past-handle:hover { opacity: 0.8; }
.past-handle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
#closePast { display: none; color: #f6efdc; opacity: 0.6; }
body.past-open #openPast { display: none; }
body.past-open #closePast { display: grid; }
@keyframes handle-drift { 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .past-line { animation: none; opacity: 1; transform: none; filter: none; }
  .past-line.playing p, .past-handle, .past-star.pop, .past-delete.armed { animation: none; }
  .past-line.leaving { animation-duration: 0.01s; }
}

/* 录音时，麦克风外面的光圈跟着你说话的音量变大变小 */
#stage[data-state="listening"] #mic {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 calc(5px + var(--level, 0) * 20px) color-mix(in srgb, var(--rim) 26%, transparent),
    0 0 calc(22px + var(--level, 0) * 30px) color-mix(in srgb, var(--rim) 60%, transparent);
  transition: box-shadow 0.12s linear, background 0.4s ease, border-color 0.4s ease;
}

/* 手机上输入框的字小于 16px 时，iPhone 会在点进去时自动把整页放大，而且不会缩回来 */
@media (pointer: coarse) {
  input[type="text"], input[type="url"], input[type="password"], select, textarea { font-size: 16px !important; }
}
/* 设置和世界书只能上下滚，不能左右滑：内容再长也不许把窗口撑宽 */
dialog { overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; }
dialog fieldset, dialog label, dialog .group, dialog .row, dialog form { min-width: 0; max-width: 100%; }
dialog input, dialog select, dialog textarea { min-width: 0; max-width: 100%; }
dialog label .row > input, dialog label .row > select { flex: 1 1 0; }
#past { overflow-x: hidden; touch-action: pan-y; }

/* 设置右上角的关闭：往下滚的时候它一直停在右上角 */
dialog .dialog-close {
  position: sticky; top: 0; float: right; z-index: 2; margin: -6px -8px 0 8px;
  width: 36px; height: 36px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(251, 248, 239, 0.9); border: 1px solid rgba(38, 53, 31, 0.16); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
dialog .dialog-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
/* 世界书：两栏都不许被里面的长句子撑宽（之前窄屏上右边被截掉一块） */
.book-body { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
.book-side, #bookForm, #bookList { min-width: 0; }
.book-head { flex-wrap: wrap; }
@media (max-width: 640px) { .book-body { grid-template-columns: minmax(0, 1fr); } }

/* 背景音乐的开关：关着的时候音符上多一道斜线，颜色也淡下去 */
.icon-button.fourth { top: calc(156px + env(safe-area-inset-top)); }
#toggleMusic .mute { opacity: 0; transition: opacity 0.2s ease; }
#toggleMusic[aria-pressed="false"] .mute { opacity: 1; }
#toggleMusic[aria-pressed="false"] svg { opacity: 0.5; }