/* ============================================================
 * 《路灯和月亮》 —— 样式（温馨可爱版）
 * 基调：奶油暖色 + 蜜桃/暖黄/薄荷点缀 + 大圆角 + 夜空开场
 * 说明：全部类名与原版一致，仅替换视觉与排版
 * ============================================================ */

:root {
  --night: #1b2a4a;
  --night-2: #232f52;
  --night-3: #2e3d63;
  --warm: #f08a5d;          /* 蜜桃橙 */
  --warm-dim: #d97a4e;
  --sun: #ffd166;           /* 暖黄 */
  --pink: #ffd6e0;          /* 软粉 */
  --mint: #a5e39a;          /* 薄荷绿（微信绿柔和版） */
  --mint-d: #7cc46f;
  --sky: #bfe3ff;           /* 软蓝 */
  --cream: #fff8ef;         /* 页面奶油底 */
  --cream-2: #ffeeda;       /* 渐变暖杏 */
  --card: #ffffff;
  --ink: #5b4a3f;           /* 暖棕正文 */
  --ink-2: #8a7a6a;         /* 次要暖灰 */
  --paper: #fdf6e8;         /* 纸张 */
  --paper-edge: #eeddbd;
  --wx-bg: #f2efe9;
  --wx-green: #a5e39a;
  --wx-green-d: #7cc46f;
  --wx-blue: #f08a5d;
  --text-dim: #8a7a6a;
  --shadow: 0 6px 24px rgba(180, 130, 80, .12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  color: var(--ink);
  overflow-x: hidden;
}

.hidden { display: none !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(200, 150, 100, .35); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* 物品窗口顶部照片 */
.item-photo {
  text-align: center; margin-bottom: 14px;
  background: #fffdf8; border: 1px solid #f0e2cc; border-radius: 14px; padding: 10px;
}
.item-photo img {
  max-width: 100%; max-height: 260px; border-radius: 10px;
  display: block; margin: 0 auto;
  box-shadow: 0 4px 14px rgba(120, 80, 40, .18);
}
/* 无框变体（明信片：直接显示图片，不加方形框） */
.item-photo.noline { background: none; border: none; padding: 0; }
.item-photo.noline img { border-radius: 0; box-shadow: none; }

/* ============ 开场动画（温馨夜空） ============ */

.intro {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  background: linear-gradient(180deg, #2a3a63 0%, #223053 45%, #1b2a4a 75%, #16213e 100%);
  overflow-y: auto;
  cursor: default;
}

.sky { position: absolute; inset: 0; pointer-events: none; }
.sky::before, .sky::after {
  content: ""; position: absolute; border-radius: 999px;
  background: rgba(255, 240, 220, .14);
}
.sky::before { width: 180px; height: 46px; left: -30px; top: 22%; transform: rotate(-4deg); }
.sky::after { width: 130px; height: 34px; right: -20px; top: 38%; transform: rotate(3deg); }

.moon-big {
  position: absolute; top: 12%; right: 18%;
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fffbe8, #ffe9a8 55%, #ffd66e);
  box-shadow: 0 0 70px 22px rgba(255, 224, 140, .4);
  opacity: 0; animation: moonIn 3s ease forwards .5s;
}
.moon-big::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: linear-gradient(135deg, transparent 46%, rgba(190,150,80,.5) 47%, rgba(190,150,80,.5) 53%, transparent 54%);
}
.moon-big::before {
  content: "◡"; position: absolute; left: 18px; top: 34px;
  font-size: 20px; color: rgba(200,150,60,.45); transform: rotate(-14deg);
}

.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; animation: twinkle 3.2s ease-in-out infinite; opacity: 0; }
.star.s1 { top: 16%; left: 12%; animation-delay: .8s; }
.star.s2 { top: 8%; left: 42%; animation-delay: 1.6s; }
.star.s3 { top: 22%; left: 68%; animation-delay: 2.2s; }
.star.s4 { top: 34%; left: 30%; animation-delay: .4s; }
.star.s5 { top: 12%; left: 84%; animation-delay: 1.2s; }

@keyframes moonIn { to { opacity: 1; } }
@keyframes twinkle { 0%,100% { opacity: .15; } 50% { opacity: .9; } }

.intro-box-wrap { position: relative; z-index: 2; margin-bottom: 26px; }

.intro-box { position: relative; width: 300px; height: 210px; opacity: 0; transform: translateY(30px); animation: boxIn 1.6s ease forwards 1s; }

@keyframes boxIn { to { opacity: 1; transform: translateY(0); } }

.intro-box .box-body {
  position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  background: linear-gradient(180deg, #fdfaf3 0%, #f2ead9 70%, #e6dcc6 100%);
  border-radius: 8px 8px 14px 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 -8px 14px rgba(0,0,0,.06);
}
.intro-box .box-lid {
  position: absolute; left: -6px; right: -6px; top: 8px; height: 46px;
  background: linear-gradient(180deg, #fffdf7 0%, #f4ecdc 100%);
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0,0,0,.3);
  transition: transform 1.4s ease .2s, opacity 1.2s ease .2s;
}
.intro-box.open .box-lid { transform: rotate(-38deg) translateX(-46px) translateY(-58px); opacity: .0; }

.intro-box .box-ribbon {
  position: absolute; left: 50%; top: -6px; width: 26px; height: 150px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #f2b8c0, #e89aa8 40%, #f2b8c0 60%, #dd8fa0);
  border-radius: 6px;
}
.intro-box .box-bow {
  position: absolute; left: 50%; top: 12px; width: 0; height: 0;
  transform: translateX(-50%);
  border-left: 28px solid transparent; border-right: 28px solid transparent;
  border-bottom: 32px solid #e89aa8;
  transition: opacity 1s ease .6s;
}
.intro-box.open .box-bow { opacity: 0; }

.intro-box .box-sticker {
  position: absolute; right: 20px; bottom: 14px;
  width: 56px; height: 56px;
  overflow: hidden;
  transform: rotate(-8deg);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
  cursor: pointer;
  transition: transform .3s ease;
}
.intro-box .box-sticker:hover { transform: rotate(2deg) scale(1.1); }
.intro-box .box-sticker img { width: 100%; height: 100%; object-fit: contain; display: block; }
.intro-box .box-rust { position: absolute; border-radius: 50%; background: radial-gradient(circle, #c9a06a, transparent 70%); opacity: .4; filter: blur(1px); }
.intro-box .box-rust.r1 { width: 26px; height: 18px; left: 18px; bottom: 22px; }
.intro-box .box-rust.r2 { width: 20px; height: 14px; right: 90px; bottom: 8px; transform: rotate(30deg); }

.intro-text {
  position: relative; z-index: 2; min-height: 72px; max-width: 580px;
  padding: 0 24px 92px; text-align: center;
  font-size: 17px; line-height: 2; letter-spacing: .05em;
  color: #ffe9c9; opacity: 0; animation: fadeIn 1.2s ease forwards;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
@keyframes fadeIn { to { opacity: 1; } }

.intro-btn {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 5;
  padding: 13px 44px; border-radius: 999px;
  border: 2px solid #ffd98c;
  background: rgba(255, 214, 140, .18);
  color: #ffe3a8; font-size: 15px; letter-spacing: .22em;
  cursor: pointer; transition: all .3s;
  font-family: inherit;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
.intro-btn:hover:not(:disabled) { background: rgba(255,214,140,.32); box-shadow: 0 6px 26px rgba(255,200,120,.35); transform: translateX(-50%) translateY(-2px); }
.intro-btn:disabled { opacity: .55; cursor: default; color: rgba(255,215,160,.6); }

/* ============ 主界面布局（温馨浅色） ============ */

.game { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 26px;
  background: rgba(255, 253, 248, .88);
  border-bottom: 1px solid rgba(240, 200, 150, .35);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 30;
  box-shadow: 0 2px 14px rgba(200, 140, 80, .08);
}
.topbar-title {
  font-size: 20px; letter-spacing: .2em; color: #e08a52; font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.topbar-title .sep { color: var(--pink); margin: 0 4px; }
.topbar-sub { font-size: 12px; color: var(--ink-2); margin-top: 4px; letter-spacing: .08em; }
.topbar-btn {
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid #ecc79f; background: #fff;
  color: #a86038; font-size: 12px; cursor: pointer; font-family: inherit;
  transition: all .3s;
}
.topbar-btn:hover { border-color: var(--warm); color: var(--warm); background: #fff4e8; }

.layout {
  flex: 1; display: grid;
  grid-template-columns: minmax(760px, 1fr) minmax(420px, 520px);
  gap: 26px; padding: 22px 24px 30px;
  max-width: 1720px; width: 100%; margin: 0 auto;
  align-items: start;
}

/* ============ 物品陈列 ============ */

.shelf {
  background: none; border: none; box-shadow: none; padding: 0;
}
.shelf-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.shelf-title { font-size: 16px; letter-spacing: .14em; color: #d98a50; font-weight: 700; }
.shelf-tip { font-size: 11px; color: var(--ink-2); }

.items-grid {
  position: relative;
  width: 85%;
  aspect-ratio: 1448 / 1086;
  min-height: 300px;
  background: url('../img/box.png') no-repeat center / 100% 100%;
  border-radius: 16px;
}

.item-card {
  position: absolute;
  display: block;
  cursor: pointer; text-align: center;
  transition: transform .25s ease, filter .25s ease;
  z-index: 1;
  transform: rotate(var(--rot, 0deg));
}
.item-card:hover {
  transform: rotate(var(--rot, 0deg)) translateY(-6px) scale(1.06);
  z-index: 5;
}
.item-card.locked { cursor: pointer; }
.item-card .ic { line-height: 0; }
.item-card .pic {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 5px 9px rgba(60, 35, 10, .38));
}
.item-card.locked .pic {
  filter: grayscale(.9) brightness(.72) drop-shadow(0 4px 8px rgba(60, 35, 10, .3));
}
.item-card.locked:hover .pic {
  filter: grayscale(.9) brightness(.74) drop-shadow(0 5px 9px rgba(60, 35, 10, .38));
}

/* 标签：名称+状态常显在物品正下方（各占一行、居中、不超物品宽度→永不横向重叠） */
.item-card .sub { display: none; }
.item-card .nm {
  position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  max-width: 100%; box-sizing: border-box;
  font-size: 9.5px; font-weight: 700; color: #4a3826; letter-spacing: .02em;
  background: rgba(255, 250, 240, .96); border-radius: 6px; padding: 1.5px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  z-index: 3; box-shadow: 0 1px 3px rgba(60, 35, 10, .12);
}
/* 物品状态：不再显示"已打开/密码锁"文字；锁定物品图片灰化+居中锁图标 */
.item-card .st { display: none; }
.item-card .lock-ic {
  position: absolute; left: 50%; top: 34%; transform: translateX(-50%);
  font-size: 22px; line-height: 1; z-index: 4;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
  pointer-events: none;
}
/* 锁定物品图片灰化（状态由锁图标承担） */
.item-card.locked .pic {
  filter: grayscale(.9) brightness(.72) drop-shadow(0 4px 8px rgba(60, 35, 10, .3));
}
.item-card.locked:hover .pic {
  filter: grayscale(.9) brightness(.74) drop-shadow(0 5px 9px rgba(60, 35, 10, .38));
}

/* 散落坐标：盒底区域（铁盒图 45%–92% 为盒底内腔），两带错落，物品宽 ≥ 名称宽（标签不超物品宽） */
/* 上带（6 件大件，12% 宽 ≈ 84px，两行标签 20px 高） */
.item-card[data-id="phone"]    { left: 5%;  top: 42%;  width: 25%; --rot: -6deg; }
.item-card[data-id="diary1"]   { left: 20%; top: 33%;  width: 30%; --rot: 4deg; }
.item-card[data-id="diary2"]   { left: 33%;   top: 40%; width: 30%; --rot: -5deg; }
.item-card[data-id="diary3"]   { left: 48.5%; top: 35%; width: 30%; --rot: -20deg; }
.item-card[data-id="clipping"] { left: 64%;   top: 46%;  width: 25%; --rot: -3deg; }
.item-card[data-id="diag"]     { left: 70%; top: 47%;  width: 35%; --rot: 20deg; }
/* 下带（5 件，小件宽度容纳名称：ticket 10%、bookmark 12%、usb 10%） */
.item-card[data-id="ticket"]   { left: 10%;  top: 71.5%; width: 13%; --rot: 9deg; }
.item-card[data-id="bookmark"] { left: 20%;   top: 69.5%; width: 20%; --rot: -11deg; }
.item-card[data-id="usb"]      { left: 35%; top: 72%;  width: 10%; --rot: -7deg; }
.item-card[data-id="letter"]   { left: 42%; top: 70%;  width: 20%; --rot: 6deg; }
.item-card[data-id="postcard"] { left: 55%; top: 65%; width: 20%; --rot: -4deg; }
.item-card[data-id="musicbox"] { left: 73%; top: 35%; width: 14%; --rot: -7deg; }

/* 月亮贴纸（铁盒盖一角，可揭开） */
.moon-sticker {
  position: absolute; left: 80%; top: 7%; width: 13%;
  cursor: pointer; z-index: 2;
  transform: rotate(9deg);
  transition: transform .3s ease;
  filter: drop-shadow(0 4px 8px rgba(60, 35, 10, .32));
}
.moon-sticker:hover { transform: rotate(3deg) scale(1.15); z-index: 6; }
.moon-sticker img { width: 100%; height: auto; display: block; }

.box-cover-note { display: none; }

/* ============ 手机 ============ */

.phone-wrap {
  display: flex; justify-content: flex-start; min-width: 0;
  padding-top: 70px; padding-left: 0px;
  margin-left: -70px;
}

.phone {
  width: 460px; height: min(680px, calc(100vh - 128px));
  flex-shrink: 0;
  background: #fffdf8; border-radius: 38px;
  border: 3px solid #f5e3cc;
  box-shadow: 0 26px 60px rgba(190, 140, 90, .22), inset 0 0 0 5px #fdf6ea;
  position: sticky; top: 20px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.phone-screen {
  flex: 1; position: relative; overflow: hidden;
  background: var(--wx-bg); color: var(--ink);
  display: flex; flex-direction: column;
}

/* 手机页面层（常驻，切换显隐） */
.page-layer {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  overflow: hidden;
}
.page-layer.desktop { padding: 46px 16px 18px; }
.page-layer.lock-screen { align-items: center; justify-content: center; }
.page-layer.profile-page, .page-layer.moments-page { overflow-y: auto; }

/* 锁屏（可爱夜空） */
.lock-screen {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  background: linear-gradient(180deg, #2e3d63 0%, #263455 55%, #1e2b49 100%);
  position: relative;
}
.lock-screen::before, .lock-screen::after {
  content: ""; position: absolute; border-radius: 999px; background: rgba(255,240,220,.12);
}
.lock-screen::before { width: 110px; height: 28px; left: -16px; top: 18%; }
.lock-screen::after { width: 80px; height: 22px; right: -12px; top: 42%; }
.lock-screen .lock-moon { font-size: 56px; opacity: .95; filter: drop-shadow(0 0 26px rgba(255,210,120,.55)); }
.lock-screen .lock-time { font-size: 58px; font-weight: 300; color: #fff6e8; letter-spacing: .06em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 14px rgba(0,0,0,.3); }
.lock-screen .lock-date { font-size: 13px; color: #c9c2e8; letter-spacing: .18em; }
.lock-pw { display: flex; gap: 8px; margin-top: 4px; }
.lock-pw input {
  width: 170px; padding: 11px 14px; border-radius: 999px;
  border: 2px solid rgba(255, 220, 150, .5); background: rgba(255, 255, 255, .1);
  color: #fff; font-size: 17px; letter-spacing: .3em; text-align: center; outline: none;
  font-family: inherit;
}
.lock-pw input:focus { border-color: #ffd98c; }
.lock-hint { font-size: 12px; color: #b9c0e8; letter-spacing: .1em; }
.lock-hint b { color: #ffd98c; font-weight: normal; }
.lock-err { font-size: 12px; color: #ffb3a8; min-height: 18px; }

/* 桌面（暖色天空） */
.desktop {
  flex: 1; display: flex; flex-direction: column;
  background: linear-gradient(165deg, #ffe9d0 0%, #ffdfc4 55%, #ffd9d0 100%);
  padding: 46px 16px 18px; position: relative;
}
.desktop-wall { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.desktop-wall::after {
  content: ""; position: absolute; right: -30px; top: 8%;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 220, .9), transparent 65%);
  box-shadow: 0 0 40px rgba(255, 240, 180, .6);
}
.desktop-apps { position: relative; display: flex; flex-wrap: wrap; gap: 18px; justify-content: flex-start; }
.app-icon {
  width: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; padding: 6px 2px; border-radius: 14px; transition: background .2s;
}
.app-icon:hover { background: rgba(255, 255, 255, .55); }
.app-icon .ai {
  width: 54px; height: 54px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 27px;
  box-shadow: 0 5px 12px rgba(180, 110, 60, .25);
}
.app-icon .an { font-size: 11.5px; color: #7a5a42; font-weight: 600; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.app-wx .ai { background: linear-gradient(135deg, #b8e8a2, #86cf6e); }
.app-memo .ai { background: linear-gradient(135deg, #ffe08a, #f5b84e); }
.app-album .ai { background: linear-gradient(135deg, #a8d8f8, #6fb4e8); }
.app-blog .ai { background: linear-gradient(135deg, #f0b4d8, #d08ae0); }

/* 微信顶部 */
.wx-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 11px; background: #f7f4ee;
  border-bottom: 1px solid #e8dfd2;
  position: relative; z-index: 5;
  flex-shrink: 0;
}
.wx-head .back { font-size: 20px; cursor: pointer; padding: 0 6px; color: #c07a4e; user-select: none; }
.wx-head .back:hover { opacity: .6; }
.wx-head .title { flex: 1; text-align: center; font-size: 16px; font-weight: 700; letter-spacing: .1em; color: #6b5847; }
.wx-head .avatar-btn {
  width: 34px; height: 34px; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: linear-gradient(160deg, #8fb6e8, #6b8fd0); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(120, 90, 60, .2);
  transition: filter .3s;
}
.wx-head .avatar-btn.gray { filter: grayscale(1); }
.wx-head .avatar-btn svg { width: 26px; height: 26px; }
.wx-head .more { font-size: 18px; color: #c0a080; padding: 0 6px; opacity: .8; }

/* 聊天消息区 */
.chat-body {
  flex: 1; overflow-y: auto; padding: 14px 12px 8px;
  background:
    repeating-linear-gradient(45deg, rgba(200,170,130,.03) 0 2px, transparent 2px 6px),
    var(--wx-bg);
  scroll-behavior: smooth;
}
.msg { display: flex; margin-bottom: 14px; align-items: flex-start; animation: msgIn .35s ease; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.msg .avatar {
  width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(160deg, #8fb6e8, #6b8fd0);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(120, 90, 60, .15);
}
.msg .avatar svg { width: 27px; height: 27px; }
.msg.jl-msg .avatar.gray { filter: grayscale(1); }
.msg .bubble {
  max-width: 74%; margin: 0 10px;
  padding: 10px 14px; border-radius: 14px;
  font-size: 15px; line-height: 1.7; word-break: break-word;
  box-shadow: 0 1px 3px rgba(120, 90, 60, .08);
  white-space: pre-wrap;
}
.msg.jl-msg .bubble { background: #fff; border-top-left-radius: 4px; color: #4a3f34; }
.msg.me-msg { flex-direction: row-reverse; }
.msg.me-msg .bubble { background: var(--wx-green); border-top-right-radius: 4px; color: #3d4a38; }
.msg.me-msg .avatar {
  background: linear-gradient(160deg, #f5a8c0, #e87fa0);
  font-size: 15px; color: #fff;
}
.msg .time { font-size: 10px; color: #b8ad9f; align-self: center; flex-shrink: 0; }

.msg.note-msg { justify-content: center; }
.msg.note-msg .bubble {
  background: rgba(180, 150, 110, .1); color: #8a7a6a; font-size: 12.5px;
  border-radius: 12px; padding: 8px 12px; max-width: 92%;
  border: none; box-shadow: none;
}

.msg.sys-msg { justify-content: center; }
.msg.sys-msg .bubble {
  background: rgba(255, 255, 255, .9); color: #a08a72; font-size: 12px;
  border: 1px dashed #e0cfb8; border-radius: 14px; padding: 7px 14px; max-width: 92%;
  box-shadow: none;
}

.msg.gap-msg { justify-content: center; }
.msg.gap-msg .bubble {
  background: transparent; color: #c0b2a2; font-size: 12px; padding: 4px 6px;
  box-shadow: none;
}

.msg .file-card {
  display: flex; align-items: center; gap: 10px; min-width: 200px;
  padding: 9px 12px; border-radius: 12px;
  background: #fff; border: 1px solid #eee2d2; cursor: pointer;
}
.msg .file-card .fic { font-size: 24px; }
.msg .file-card .fn { font-size: 13px; color: #5b4a3f; line-height: 1.4; }
.msg .file-card .fs { font-size: 10.5px; color: #a59585; }
.msg.me-msg .file-card { background: #e4f5dc; border-color: #c8e6ba; }

.msg .photo-card {
  display: flex; align-items: center; gap: 10px; min-width: 210px;
  padding: 9px 12px; border-radius: 12px;
  background: #fff; border: 1px solid #eee2d2; cursor: pointer;
}
.msg .photo-card .fic { font-size: 26px; }
.msg .photo-card .pn { font-size: 13px; color: #5b4a3f; }
.msg .photo-card .ps { font-size: 10.5px; color: #a59585; }

.msg .link-card {
  display: block; min-width: 240px; max-width: 280px;
  background: #fff; border: 1px solid #eee2d2; border-radius: 12px;
  cursor: pointer; overflow: hidden; text-decoration: none; color: inherit;
}
.msg .link-card .lc-head { padding: 4px 12px; font-size: 10.5px; color: #a59585; border-bottom: 1px solid #f2e8da; }
.msg .link-card .lc-body { padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.msg .link-card .lc-body .fic { font-size: 26px; }
.msg .link-card .lc-body .lt { font-size: 13.5px; color: #4a3f34; font-weight: 600; }
.msg .link-card .lc-body .ls { font-size: 11px; color: #a59585; margin-top: 2px; }

/* 输入区 */
.chat-input-area {
  border-top: 1px solid #e8dfd2; background: #faf7f1;
  padding: 8px 10px 10px; flex-shrink: 0;
}
.input-hint {
  font-size: 12px; color: #b08a62; text-align: center;
  padding: 4px 0 8px; letter-spacing: .05em;
  min-height: 20px;
}
.input-hint b { color: #d98a50; font-weight: normal; }
.input-row { display: flex; gap: 8px; }
.input-row input {
  flex: 1; border: none; border-radius: 999px; padding: 11px 16px;
  font-size: 15px; background: #fff; outline: none; font-family: inherit;
  box-shadow: inset 0 0 0 1px #e8dcc8;
}
.input-row input:focus { box-shadow: inset 0 0 0 2px #f5b88e; }
.input-row .send-btn {
  padding: 0 20px; border: none; border-radius: 999px;
  background: linear-gradient(135deg, #ffd9b8, #ffb98e); color: #8a4a28; font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: filter .2s;
  box-shadow: 0 3px 8px rgba(220, 130, 80, .25);
}
.input-row .send-btn:hover { filter: brightness(1.08); }
.input-row .send-btn:disabled { opacity: .4; cursor: default; }

/* 选项区 */
.opt-area { display: flex; flex-direction: column; gap: 8px; padding: 6px 4px 2px; }
.opt-btn {
  padding: 11px 16px; border-radius: 999px; text-align: center;
  border: 1.5px solid #f0c8a8; background: #fff; color: #7a5a42;
  font-size: 14.5px; cursor: pointer; transition: all .2s;
  font-family: inherit; letter-spacing: .03em;
}
.opt-btn:hover { background: #fff2e6; border-color: #f08a5d; color: #d97a4e; }

/* 操作按钮区（发送录音等） */
.action-area { display: flex; flex-direction: column; gap: 8px; padding: 6px 4px 2px; }
.action-btn {
  padding: 11px 16px; border-radius: 999px; text-align: center;
  border: 1.5px solid #a8d89a; background: #f0f9ec; color: #5c8f4e;
  font-size: 14px; cursor: pointer; font-family: inherit; transition: all .2s;
}
.action-btn:hover { background: #e2f3da; }
.action-btn:disabled { opacity: .5; cursor: default; }
.wait-tip {
  font-size: 12px; color: #a59585; text-align: center;
  padding: 2px 6px 8px; line-height: 1.7;
}

/* 聊天顶部状态（“对方正在输入…”）——位于昵称下方 */
.wx-title-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.wx-head .chat-status {
  font-size: 9px; color: #b09a80; text-align: center; padding: 0; min-height: 12px;
  letter-spacing: .04em; line-height: 1.3;
}
.chat-status.typing { color: #8a7a66; font-style: italic; }
.chat-status.typing::after {
  content: '…'; display: inline-block; margin-left: 1px;
  animation: typingDots 1s steps(3, end) infinite;
}
@keyframes typingDots {
  0% { content: '…'; }
  50% { content: '……'; }
  100% { content: '………'; }
}

.ending-revisit {
  margin: 10px auto; display: block;
  padding: 9px 26px; font-size: 13px; letter-spacing: .12em;
  color: #6b4a2a; background: #fff; border: 1px solid #e8d3b5; border-radius: 18px;
  cursor: pointer; transition: all .2s;
}
.ending-revisit:hover { background: #fff4e4; border-color: #d8b98e; }

.rec-close {
  display: block; margin: 14px auto 4px;
  padding: 7px 22px; font-size: 12px; letter-spacing: .1em;
  color: #5a4633; background: #fff; border: 1px solid #e0d2bd; border-radius: 14px;
  cursor: pointer; transition: all .2s;
}
.rec-close:hover { background: #fdf3e4; border-color: #cfa96f; }


/* 每条消息不再显示时间（以章节时间分隔区分） */
.msg .time { display: none; }

/* 博客/照片/文件卡片与气泡左对齐（与 .bubble 的 margin 一致） */
.msg.jl-msg .link-card, .msg.jl-msg .photo-card, .msg .file-card { margin: 0 10px; }

.memo-page { flex: 1; display: flex; flex-direction: column; background: #fffdf6; }
.memo-head {
  padding: 44px 14px 10px; background: linear-gradient(160deg, #ffe08a, #f5b84e);
  color: #7a5c1e; font-size: 17px; font-weight: 700; letter-spacing: .15em;
  text-align: center; flex-shrink: 0;
}
.memo-search { padding: 10px 12px; background: #fff; border-bottom: 1px solid #f0e6d6; flex-shrink: 0; }
.memo-search input {
  width: 100%; border: none; border-radius: 999px; padding: 10px 16px;
  background: #f7f1e4; font-size: 14px; outline: none; font-family: inherit;
}
.memo-results { flex: 1; overflow-y: auto; padding: 12px; }
.memo-empty { text-align: center; color: #c0ae96; font-size: 13px; padding: 30px 12px; line-height: 2; }
.memo-item {
  background: #fff; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(190, 150, 90, .1); border-left: 4px solid #f5b84e;
}
.memo-item .md { font-size: 12px; color: #c08a2e; margin-bottom: 6px; font-weight: 700; }
.memo-item .mt { font-size: 13.5px; line-height: 1.9; color: #5b4a3f; white-space: pre-wrap; }

/* ============ 相册 ============ */

.album-page { flex: 1; display: flex; flex-direction: column; background: #fff8ee; }
.album-head { padding: 44px 14px 10px; text-align: center; color: #c07a4e; font-size: 16px; font-weight: 700; letter-spacing: .2em; flex-shrink: 0; }
/* 相册照片：图片加载成功显示照片，失败显示文字描述 */
.ph-img { display: none; }
.ph-img.ok {
  display: block; width: 100%; max-height: 220px; object-fit: contain;
  border-radius: 10px; margin-bottom: 8px; box-shadow: 0 3px 10px rgba(120, 80, 40, .15);
  background: #faf6ee;
}
/* 相册弹窗大图 */
.photo-view .ph-view-img { display: none; }
.photo-view .ph-view-img.ok {
  display: block; max-width: 100%; max-height: 46vh; object-fit: contain;
  border-radius: 10px; margin: 0 auto 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
/* 朋友圈照片：同上 */
.mt-img .mi { display: none; }
.mt-img .mi.ok { display: block; width: 100%; border-radius: 10px; margin-bottom: 6px; box-shadow: 0 3px 10px rgba(120, 80, 40, .12); }
.mt-img .mi.ok + .mi-desc { display: none; }
.album-grid { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.photo-item {
  background: #fff; border-radius: 14px; overflow: hidden;
  border: 1px solid #f2e4d2; cursor: pointer; transition: all .25s;
  box-shadow: 0 3px 10px rgba(190, 140, 90, .08);
}
.photo-item:hover { border-color: #f5c9a4; transform: translateY(-2px); }
.photo-item .ph {
  padding: 22px 14px; font-size: 13px; color: #7a6a58; line-height: 1.9; min-height: 70px;
  background: radial-gradient(circle at 70% 30%, rgba(255, 224, 150, .4), transparent 60%);
  white-space: pre-wrap;
}
.photo-item .pc { display: flex; justify-content: space-between; padding: 8px 12px; font-size: 11px; color: #b08a62; border-top: 1px solid #f5e9d8; }
/* 相册列表：只显示图片（描述文字在点击后的弹窗中）——置于 .pc 定义之后以覆盖 */
.photo-item .ph-desc, .photo-item .pc { display: none; }
/* ============ 资料卡 / 朋友圈 ============ */

.profile-page { flex: 1; display: flex; flex-direction: column; background: #f7f2ea; overflow-y: auto; }
.profile-banner {
  height: 150px; background: linear-gradient(160deg, #ffe9d0 0%, #ffd9c0 70%, #ffd0d0 100%);
  position: relative; flex-shrink: 0;
}
.profile-banner::after {
  content: ""; position: absolute; right: 24px; top: 22px;
  width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 220, .95), transparent 65%);
  box-shadow: 0 0 40px rgba(255, 230, 150, .6);
}
.profile-card {
  position: relative; background: #fff; border-radius: 16px; margin: -46px 12px 12px;
  padding: 16px; z-index: 2; box-shadow: 0 6px 20px rgba(180, 130, 80, .15);
}
.profile-avatar {
  position: absolute; top: -40px; left: 16px;
  width: 84px; height: 84px; border-radius: 18px;
  background: linear-gradient(160deg, #8fb6e8, #6b8fd0);
  display: flex; align-items: center; justify-content: center;
  border: 4px solid #fff; box-shadow: 0 4px 12px rgba(120, 90, 60, .25);
}
.profile-avatar svg { width: 56px; height: 56px; }
.profile-name { margin-top: 46px; font-size: 19px; font-weight: 700; color: #4a3f34; }
.profile-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.profile-row { display: flex; font-size: 13.5px; color: #6b5847; }
.profile-row .k { width: 64px; color: #b08a62; flex-shrink: 0; }
.profile-moments-link {
  margin: 4px 12px 14px; background: #fff; border-radius: 14px; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; color: #5b4a3f; cursor: pointer; box-shadow: 0 2px 8px rgba(180, 130, 80, .1);
}
.profile-moments-link:hover { background: #fff7ec; }
.profile-moments-link .arrow { color: #d0b898; }
.profile-sub { margin: 0 12px 10px; font-size: 11px; color: #b0a08e; text-align: right; }

.moments-page { flex: 1; display: flex; flex-direction: column; background: #f7f2ea; overflow-y: auto; }
.moments-head {
  padding: 44px 14px 12px; background: linear-gradient(160deg, #ffd9c0, #ffc4b0);
  color: #8a5a42; font-size: 17px; font-weight: 700; text-align: center; flex-shrink: 0; letter-spacing: .2em;
}
.moment-item { background: #fff; border-radius: 14px; margin: 0 10px 10px; padding: 12px 14px; box-shadow: 0 2px 8px rgba(180, 130, 80, .08); }
.moment-item .mt-date { font-size: 11px; color: #c0ae96; margin-bottom: 6px; }
.moment-item .mt-text { font-size: 14px; color: #4a3f34; line-height: 1.75; }
.moment-item .mt-img {
  margin-top: 8px; border-radius: 12px; padding: 16px 12px;
  background: linear-gradient(150deg, #fff6e6, #ffe9cc);
  font-size: 12px; color: #8a6a48; line-height: 1.75; cursor: zoom-in;
  white-space: pre-wrap;
}
.moment-item .mt-link {
  margin-top: 8px; border-radius: 12px; padding: 12px;
  background: #fff; border: 1px solid #f0dcc0; font-size: 13px; color: #c07a4e;
}

/* ============ 博客（浏览器模态） ============ */

.blog-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #f0e6d6; }
.blog-bar .dot { width: 10px; height: 10px; border-radius: 50%; }
.blog-bar .d1 { background: #ff8a80; } .blog-bar .d2 { background: #ffd166; } .blog-bar .d3 { background: #95d98c; }
.blog-url { flex: 1; margin-left: 8px; background: #f7f2ea; border-radius: 999px; padding: 6px 14px; font-size: 12px; color: #a59585; }
.blog-page { background: #fffdf8; color: #4a3f34; overflow-y: auto; padding: 26px 30px 40px; flex: 1; }
.blog-page .bp-head { font-size: 22px; font-weight: 700; letter-spacing: .08em; margin-bottom: 8px; color: #c07a4e; }
.blog-page .bp-date { font-size: 12px; color: #b0a08e; margin-bottom: 18px; }
.blog-page .bp-body { font-size: 15.5px; line-height: 2.1; color: #5b4a3f; white-space: pre-wrap; }
.blog-page .bp-foot { margin-top: 22px; font-size: 11.5px; color: #c0ae96; }
.blog-page .bp-pw { margin-top: 16px; display: flex; gap: 8px; }
.blog-page .bp-pw input {
  border: 1.5px solid #e8dcc8; border-radius: 999px; padding: 8px 14px; font-size: 14px;
  outline: none; font-family: inherit; width: 150px;
}
.blog-page .bp-pw button {
  border: none; border-radius: 999px; background: #f08a5d; color: #fff;
  padding: 0 18px; cursor: pointer; font-size: 13px; font-family: inherit;
}
.blog-page .bp-pw-err { font-size: 12px; color: #d95d5d; margin-top: 8px; }
.blog-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.blog-list-item {
  border: 1.5px solid #f0e0ca; border-radius: 14px; padding: 14px 16px; cursor: pointer;
  background: #fff; transition: all .2s;
}
.blog-list-item:hover { border-color: #f5b88e; background: #fff8ef; }
.blog-list-item .bl-t { font-size: 15px; font-weight: 700; color: #5b4a3f; }
.blog-list-item .bl-d { font-size: 11.5px; color: #b0a08e; margin-top: 4px; }
.blog-list-item .bl-lock { font-size: 11.5px; color: #d99a3e; margin-top: 4px; }

/* ============ 物品模态 ============ */

.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.modal-back { position: absolute; inset: 0; background: rgba(60, 40, 25, .5); backdrop-filter: blur(3px); }
.modal-panel {
  position: relative; z-index: 2;
  width: min(700px, calc(100vw - 40px)); max-height: calc(100vh - 60px);
  border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(90, 50, 20, .35);
  animation: modalIn .3s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; flex-shrink: 0;
}
.modal-head .mh-title { font-size: 16px; letter-spacing: .1em; font-weight: 700; }
.modal-head .close { cursor: pointer; font-size: 20px; opacity: .7; padding: 0 4px; }
.modal-head .close:hover { opacity: 1; }

.modal-body { overflow-y: auto; padding: 8px 24px 24px; flex: 1; }

/* 纸质感 */
.paper {
  background: var(--paper); color: var(--ink);
  background-image:
    repeating-linear-gradient(0deg, rgba(150,120,70,.05) 0 1px, transparent 1px 30px);
}
.paper .modal-head { color: #8a6a42; border-bottom: 1px solid var(--paper-edge); background: rgba(255,252,244,.7); }
.paper .close:hover { color: #d95d5d; }

.paper-dark { background: #2a2d38; color: #ece6dd; }
.paper-dark .modal-head { border-bottom: 1px solid rgba(255,255,255,.12); color: #ffd9a8; background: rgba(255,255,255,.04); }

.diary-book { padding: 4px 6px; }
.diary-title {
  font-size: 17px; font-weight: 700; margin: 14px 0 4px; color: #b07048;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.diary-title .dt { font-size: 12px; color: #a08a68; font-weight: normal; }
.diary-body { font-size: 14.5px; line-height: 2.05; white-space: pre-wrap; margin-bottom: 10px; }
.diary-cover {
  text-align: center; padding: 30px 10px; font-size: 15px; line-height: 2.2; color: var(--ink);
}
.diary-cover .dc-title { font-size: 19px; font-weight: 700; margin-bottom: 8px; color: #b07048; }
.diary-cover .dc-sub { font-size: 12.5px; color: #9a8466; }
.diary-pw { margin: 18px auto 6px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.diary-pw .pw-hint { font-size: 13px; color: #9a8466; line-height: 1.8; text-align: center; }
.diary-pw .pw-hint b { color: #d95d5d; font-weight: normal; }
.diary-pw .pw-row { display: flex; gap: 8px; }
.diary-pw input {
  border: 1.5px solid #e0cba8; border-radius: 999px; padding: 9px 14px;
  font-size: 16px; width: 190px; outline: none; text-align: center; font-family: inherit;
  background: #fffdf5; color: var(--ink); letter-spacing: .2em;
}
.diary-pw button {
  border: none; border-radius: 999px; padding: 0 20px; cursor: pointer;
  background: #e8a04e; color: #fff; font-size: 13px; font-family: inherit;
}
.diary-pw .pw-err { font-size: 12px; color: #d95d5d; min-height: 16px; }

/* 剪报 */
.clipping { font-size: 14px; line-height: 2; }
.clipping .cl-head { font-size: 12px; color: #a08a68; margin-bottom: 8px; }
.clipping .cl-title { font-size: 21px; font-weight: 700; text-align: center; margin: 6px 0 2px; letter-spacing: .28em; color: #b07048; }
.clipping .cl-author { text-align: center; font-size: 12.5px; color: #a08a68; margin-bottom: 12px; }
.clipping .cl-body { font-size: 14.5px; line-height: 2.1; }
.clipping .cl-note { margin-top: 14px; font-size: 12.5px; color: #9a8466; border-top: 1px dashed #dcc8a4; padding-top: 10px; white-space: pre-wrap; }
.clipping .cl-back {
  margin-top: 16px; padding: 14px; border: 1.5px dashed #d8c09a; border-radius: 12px;
  font-size: 13.5px; line-height: 2; white-space: pre-wrap; background: rgba(255, 253, 248, .7);
}

/* 票根 */
.ticket-front, .ticket-back {
  background: #fff6e4; border: 2px dashed #e0b070; border-radius: 10px;
  padding: 16px; text-align: center; font-size: 13.5px; line-height: 2.1; color: #6b4a28;
}
.ticket-back { margin-top: 12px; text-align: left; font-size: 13px; }
.ticket-back .tb-tiny { margin-top: 12px; font-size: 12px; color: #9a8466; white-space: pre-wrap; }
.ticket-label { text-align: center; font-size: 12px; color: #c09050; margin: 14px 0 6px; letter-spacing: .3em; }

/* 书签照片 */
.bookmark-photo {
  border-radius: 12px; padding: 26px 18px; text-align: center;
  background: linear-gradient(150deg, #ffe9c9, #ffdba8);
  color: #7a5a38; font-size: 14px; line-height: 2; margin-bottom: 14px;
  border: 2px solid #fff; box-shadow: 0 4px 14px rgba(190, 140, 80, .2);
}
.bookmark-photo .bp-leaf { font-size: 42px; display: block; margin-bottom: 10px; filter: drop-shadow(0 4px 8px rgba(200, 120, 40, .3)); }
.bookmark-back {
  background: var(--paper); color: var(--ink); border-radius: 12px; padding: 16px;
  font-size: 13.5px; line-height: 2; white-space: pre-wrap;
}

/* 明信片 */
.postcard-front {
  border-radius: 12px; padding: 18px; text-align: center;
  background: linear-gradient(150deg, #d2e9ff, #a8d0f0);
  color: #33567a; font-size: 13px; line-height: 1.9; margin-bottom: 12px;
  border: 2px solid #fff; box-shadow: 0 4px 12px rgba(120, 160, 200, .2);
}
.postcard-drafts { font-size: 13.5px; line-height: 2; }
.postcard-drafts .pd-item { color: #a08a68; text-decoration: line-through; text-decoration-color: rgba(217, 93, 93, .55); }
.postcard-final {
  margin-top: 14px; font-size: 17px; text-align: center; color: #b07048;
  border-top: 1px dashed #dcc8a4; padding-top: 14px; letter-spacing: .1em;
}
.postcard-addr { margin-top: 10px; font-size: 12.5px; color: #9a8466; }
.postcard-tiny { margin-top: 12px; font-size: 12px; color: #9a8466; white-space: pre-wrap; }

/* U盘（深色柔和） */
.usb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.usb-head .usb-ic { font-size: 34px; }
.usb-head .usb-tag { font-size: 12px; color: #b8b0a4; font-style: italic; }
.rec-item { border: 1px solid rgba(255,255,255,.14); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.rec-item .rec-bar {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  background: rgba(255,255,255,.06); cursor: pointer;
}
.rec-item .rec-bar:hover { background: rgba(255,255,255,.1); }
.rec-item .play-ic { font-size: 20px; width: 26px; text-align: center; color: #ffd98c; }
.rec-item .rec-name { flex: 1; font-size: 13.5px; color: #ece6dd; }
.rec-item .rec-state { font-size: 11px; color: #b8b0a4; }
.rec-item .rec-state.done { color: #a8d89a; }
.rec-item .rec-lock { font-size: 12px; color: #e8b860; }
.rec-item.locked .rec-bar { cursor: default; }
.rec-pw { display: flex; gap: 8px; padding: 0 14px 12px; }
.rec-pw input {
  flex: 1; border: 1.5px solid rgba(255,255,255,.22); border-radius: 999px;
  padding: 9px 14px; background: rgba(255,255,255,.09); color: #fff;
  font-size: 15px; outline: none; font-family: inherit; text-align: center; letter-spacing: .15em;
}
.rec-pw button {
  border: none; border-radius: 999px; padding: 0 18px; background: #d97a4e;
  color: #fff; cursor: pointer; font-family: inherit; font-size: 13px;
}
.rec-pw .pw-err { font-size: 11.5px; color: #ffb3a8; align-self: center; }
.rec-transcript {
  display: none; padding: 4px 16px 16px;
}
.rec-transcript.show { display: block; }
.rec-transcript .rt-line {
  font-size: 13.5px; line-height: 1.95; color: #ece6dd; margin-bottom: 4px;
  animation: msgIn .4s ease;
  min-height: 1.9em;
}
.rec-transcript .rt-line.gray { color: #a8a294; font-size: 12.5px; }
.rec-transcript .rt-cursor { display: inline-block; width: 7px; height: 15px; background: #ffd98c; vertical-align: -2px; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* 信 */
.letter-drafts { font-size: 13.5px; line-height: 2; }
.letter-drafts .ld-item { padding: 8px 0; border-bottom: 1px dashed rgba(170,130,80,.3); }
.letter-drafts .ld-line { text-decoration: line-through; text-decoration-color: rgba(217,93,93,.5); color: #a08a68; }
.letter-drafts .ld-note { font-size: 12px; color: #b0956e; margin-top: 2px; }
.letter-drafts .ld-item.keep .ld-line { text-decoration: none; color: var(--ink); font-weight: 600; }
.letter-final {
  margin-top: 16px; background: #fffdf2; border: 1.5px solid #e8d0a4; border-radius: 12px;
  padding: 20px; font-size: 15px; line-height: 2.15; color: #4a3f34; white-space: pre-wrap;
  box-shadow: 0 3px 12px rgba(180, 130, 70, .1);
}
.letter-tail { margin-top: 12px; font-size: 12px; color: #b0956e; }

/* 诊断书 */
.diag-note {
  background: rgba(255,255,255,.06); border: 1.5px dashed rgba(255,255,255,.2);
  border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.9;
  color: #d8d2c4; white-space: pre-wrap; margin-bottom: 14px;
}
.diag-doc {
  background: #fff; color: #3a3a3a; border-radius: 12px; padding: 20px;
  font-size: 13.5px; line-height: 2; white-space: pre-wrap;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.diag-doc .dd-title { text-align: center; font-weight: 700; font-size: 16px; margin-bottom: 8px; color: #555; }
.diag-doc .dd-sign { color: #777; }
.diag-follow { margin-top: 14px; font-size: 12.5px; line-height: 1.9; color: #c0b8ac; white-space: pre-wrap; }

/* ============ 结局（温馨夜空） ============ */

.ending {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background: linear-gradient(180deg, #2a3a63 0%, #223053 50%, #1b2a4a 80%, #16213e 100%);
  padding: 30px 20px; overflow-y: auto;
  animation: fadeIn 1.5s ease;
}
.ending-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: none; z-index: 1;
}
.ending-bg.ok { display: block; }
.ending-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ending-moon {
  position: absolute; top: 8%; right: 16%;
  width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fffbe8, #ffe9a8 60%, #ffd66e);
  box-shadow: 0 0 60px 18px rgba(255,224,140,.35);
}
.bridge-art {
  position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
  background:
    linear-gradient(180deg, transparent 60%, rgba(140,150,190,.3) 60%, rgba(100,110,160,.4) 100%);
}
.bridge-art::before {
  content: "🌉"; position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-size: 64px; filter: drop-shadow(0 0 14px rgba(255,214,140,.5));
}
.bridge-art::after {
  content: "🌼"; position: absolute; bottom: 30px; left: calc(50% - 40px);
  font-size: 22px;
}
.ending-text {
  position: relative; z-index: 2; max-width: 620px;
  font-size: 15.5px; line-height: 2.4; color: #f5ead6;
  text-align: center; letter-spacing: .06em; white-space: pre-wrap;
  animation: fadeIn 2s ease;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  margin: auto;                     /* 垂直居中 */
  max-height: calc(100vh - 300px);  /* 文字超高时内部滚动，按钮始终可见 */
  overflow-y: auto;
}
.ending-text .em { color: #ffd98c; }
.ending-text .es { font-size: 13px; color: #c4c0da; }
.ending-btns { position: relative; z-index: 2; display: flex; gap: 14px; margin-top: 8px; padding-bottom: 24px; flex-wrap: wrap; justify-content: center; flex-shrink: 0; }

/* 姐姐的便利贴 */
.sticker-note {
  position: relative; width: 300px; margin: 8px auto;
  background: linear-gradient(180deg, #fffbe0 0%, #fff3b8 100%);
  border: 1px solid #ead98e;
  border-radius: 3px;
  transform: rotate(-2deg);
  box-shadow: 0 10px 24px rgba(120, 100, 30, .28);
  padding: 30px 24px 22px;
  font-family: "KaiTi", "STKaiti", "楷体", serif;
}
.sticker-note::before {
  content: ''; position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 92px; height: 26px;
  background: rgba(236, 218, 158, .85);
  border-left: 1px dashed rgba(170, 148, 88, .5);
  border-right: 1px dashed rgba(170, 148, 88, .5);
}
.stn-head {
  font-size: 14px; font-weight: 700; color: #8a6d2a;
  letter-spacing: .2em; text-align: center; margin-bottom: 12px;
}
.stn-body { font-size: 15px; line-height: 2.05; color: #5a4a2a; }
.stn-tail { font-size: 11px; color: #b5a06a; }

/* 完整故事弹窗 */
.story-book { max-height: 68vh; overflow-y: auto; padding: 4px 6px; }
.story-book .sb-chapter {
  font-size: 16px; font-weight: 700; color: #8a5a2a;
  letter-spacing: .12em; margin: 20px 0 10px; text-align: center;
}
.story-book .sb-chapter:first-child { margin-top: 4px; }
.story-book .sb-para {
  font-size: 13.5px; line-height: 2.05; color: #5a4633;
  margin-bottom: 10px; text-indent: 2em;
}
.ending-btn {
  padding: 12px 32px; border-radius: 999px;
  border: 2px solid #ffd98c; background: rgba(255, 217, 140, .14);
  color: #ffe3a8; font-size: 14px; letter-spacing: .15em; cursor: pointer;
  font-family: inherit; transition: all .3s;
}
.ending-btn:hover { background: rgba(255, 217, 140, .3); }

/* 时间线 */
.timeline { font-size: 13.5px; }
.timeline .tl-item { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px dashed rgba(170,130,80,.3); }
.timeline .tl-item:last-child { border-bottom: none; }
.timeline .tl-year { flex-shrink: 0; width: 74px; color: #d95d5d; font-weight: 700; font-size: 13px; padding-top: 2px; }
.timeline .tl-text { color: var(--ink); line-height: 1.9; }

/* 照片查看模态（聊天中的照片） */
.photo-view {
  background: #2a2d38; color: #f0eae0; padding: 20px;
  font-size: 15px; line-height: 2; white-space: pre-wrap; text-align: center;
  font-family: "KaiTi", "STKaiti", serif;
}
.photo-view .pv-cap { font-size: 12px; color: #a8a294; margin-top: 14px; }

/* 路灯 SVG 灯 */
.lamp-svg { display: block; }

/* 响应式 */
@media (max-width: 1020px) {
  .layout { grid-template-columns: 1fr; }
  .shelf { order: 2; }
  .phone-wrap { order: 1; justify-content: center; padding-top: 0; padding-left: 0; }
  .phone { height: min(720px, calc(100vh - 120px)); width: 100%; max-width: 460px; }
}
@media (max-width: 560px) {
  .topbar { padding: 12px 14px; }
  .layout { padding: 12px 10px 20px; }
  .moon-sticker { left: 84%; width: 15%; }
}

/* 自定义指针（放最后以覆盖全部 cursor:pointer）：琥珀圆点（默认）/ 琥珀箭头（可点击） */
html, body {
  cursor: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'><circle%20cx='9'%20cy='9'%20r='6'%20fill='%23e8a33d'%20stroke='%23ffffff'%20stroke-width='2'/></svg>") 9 9, auto;
}
button, .item-card, .item-card.locked, .app-icon, .app-icon .ai, .app-icon .an, .opt-btn, .action-btn, .send-btn, .close, .back, .mh-item, .photo-card, .link-card, .play-ic, .intro-btn, .ending-revisit, .timeline-btn, .reset-btn, .moon-sticker, .avatar-btn, .lock-btn, .blog-post, .tl-item, .rec-item, .rec-bar, .rec-name, .file-card, .back-btn, .wx-head .back, .wx-head .more {
  cursor: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'><path%20d='M6%203%20L6%2017%20L10.5%2014.5%20L12.5%2021%20L16%2019.5%20L14%2013.5%20L18%2013.5%20Z'%20fill='%23e8a33d'%20stroke='%23ffffff'%20stroke-width='1.8'%20stroke-linejoin='round'/></svg>") 6 3, pointer;
}
.ending-revisit-row { padding: 8px 14px 12px; text-align: center; }

/* ---------- 八音盒 ---------- */
.item-card[data-id="musicbox"] .pic {
  border-radius: 50%;
  animation: musicboxSpin 12s linear infinite;
}
.item-card[data-id="musicbox"].paused .pic { animation-play-state: paused; }
@keyframes musicboxSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.musicbox-player { text-align: center; }
.mb-disc {
  width: 150px; height: 150px; margin: 4px auto 12px;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 8px 22px rgba(120, 80, 40, .25);
}
.mb-disc img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: musicboxSpin 10s linear infinite;
}
.mb-disc img.paused { animation-play-state: paused; }
.mb-now { font-size: 15px; color: #5a4633; line-height: 1.6; }
.mb-artist { font-size: 11px; color: #a08a6e; }
.mb-controls { display: flex; justify-content: center; gap: 12px; margin: 14px 0 10px; }
.mb-btn {
  padding: 8px 16px; font-size: 13px; color: #5a4633;
  background: #fff; border: 1px solid #e5d5bc; border-radius: 12px; cursor: pointer;
}
.mb-btn:hover { background: #fdf3e2; }
.mb-play { min-width: 96px; }
.mb-list { max-height: 190px; overflow-y: auto; text-align: left; border-top: 1px solid #f0e4d2; padding-top: 8px; }
.mb-item {
  padding: 7px 10px; font-size: 12.5px; color: #6b5847;
  border-radius: 8px; cursor: pointer; line-height: 1.5;
}
.mb-item:hover { background: #fdf3e2; }
.mb-item.now { background: #fdf3e2; color: #b0703a; font-weight: 700; }
.mb-idx { display: inline-block; width: 20px; color: #c0a888; font-size: 11px; }