/* ===== 心动模式「他的日记」：整屏沉浸式浮层 =====
   两个状态：
     .diary-stage         生成中 —— 纸色柔光背景 + 四瓣花 + 一行独白（图三）
     .diary-stage.reading 写好了 —— 日记纸页（图一/图二）
   背景是纯 CSS 的柔光渐变（几团模糊色斑），不引图片，也就没有加载等待。 */

.diary-stage {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    background:
        radial-gradient(120% 80% at 12% 0%, rgba(255, 224, 233, 0.78) 0%, rgba(255, 224, 233, 0) 58%),
        radial-gradient(110% 70% at 92% 6%, rgba(236, 230, 255, 0.72) 0%, rgba(236, 230, 255, 0) 55%),
        radial-gradient(120% 80% at 78% 100%, rgba(226, 243, 240, 0.7) 0%, rgba(226, 243, 240, 0) 58%),
        radial-gradient(100% 70% at 6% 96%, rgba(255, 245, 226, 0.72) 0%, rgba(255, 245, 224, 0) 58%),
        linear-gradient(180deg, #fefaf7 0%, #fdfcfe 46%, #f9fafc 100%);
    transition: opacity 0.42s var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}
.diary-stage.open { opacity: 1; }

/* 缓慢漂移的柔光斑：让它"活着"，但不是动效表演 */
.diary-stage::before,
.diary-stage::after {
    content: '';
    position: absolute;
    width: 62vmax;
    height: 62vmax;
    border-radius: 50%;
    filter: blur(46px);
    opacity: 0.55;
    pointer-events: none;
    will-change: transform;
}
.diary-stage::before {
    top: -26vmax; left: -20vmax;
    background: radial-gradient(closest-side, rgba(255, 196, 214, 0.75), rgba(255, 196, 214, 0));
    animation: diaryDrift 26s ease-in-out infinite alternate;
}
.diary-stage::after {
    bottom: -30vmax; right: -24vmax;
    background: radial-gradient(closest-side, rgba(200, 224, 255, 0.7), rgba(200, 224, 255, 0));
    animation: diaryDrift 32s ease-in-out infinite alternate-reverse;
}
@keyframes diaryDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(4vmax, 3vmax, 0) scale(1.12); }
}

/* ---- 顶部按钮：音乐开关（左）+ 关闭（右）---- */
/* 左侧现在是「返回 + 音乐」两个按钮，所以用 gap 而不是 space-between 拆开 */
.diary-topbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-start;
    padding: calc(var(--safe-top, 0px) + 14px) 18px 0;
    flex-shrink: 0;
}
.diary-topbar .diary-iconbtn:last-child { margin-left: auto; }
.diary-iconbtn {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: transparent;
    color: #3f3b46;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.12s var(--ease-out);
}
.diary-iconbtn:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
    .diary-iconbtn:hover { opacity: 1; background: rgba(0, 0, 0, 0.05); }
}
.diary-iconbtn svg { display: block; width: 22px; height: 22px; }
/* 静音时划一道斜线，状态一眼可辨 */
.diary-iconbtn.muted { opacity: 0.4; }
.diary-iconbtn.muted::after {
    content: '';
    position: absolute;
    width: 24px; height: 1.5px;
    background: currentColor;
    transform: rotate(-45deg);
}

/* ---- 生成中：四瓣花 + 一行独白 ---- */
.diary-loading {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 0 12% 12vh;
    text-align: center;
}
.diary-petal {
    width: 54px; height: 54px;
    display: block;
    animation: diarySpin 9s linear infinite, diaryBreathe 4.2s ease-in-out infinite;
    transform-origin: 50% 50%;
}
.diary-petal svg { display: block; width: 100%; height: 100%; }
@keyframes diarySpin { to { transform: rotate(360deg); } }
@keyframes diaryBreathe {
    0%, 100% { opacity: 0.72; }
    50%      { opacity: 1; }
}
.diary-loading-text {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.9;
    color: #5d5766;
    letter-spacing: 0.02em;
    max-width: 15em;
    opacity: 0;
    animation: diaryTextIn 0.9s var(--ease-out) 0.18s forwards;
}
@keyframes diaryTextIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
/* 生成失败：给一句人话 + 重试，不要空转 */
.diary-retry {
    margin-top: 4px;
    padding: 9px 22px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    color: #4a4453;
    font-family: var(--font);
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.12s var(--ease-out), background-color 0.2s ease;
}
.diary-retry:active { transform: scale(0.96); }

/* ---- 写好了：纸页 ---- */
.diary-sheet {
    position: relative;
    z-index: 2;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px 26px calc(var(--safe-bottom, 0px) + 46px);
    opacity: 0;
    transition: opacity 0.4s var(--ease-out);
}
.diary-stage.reading .diary-sheet { opacity: 1; }
.diary-inner { max-width: 620px; margin: 0 auto; }

/* 衬线栈：优先系统自带的 CJK 衬线，没有就退回 serif（比无衬线更像书页） */
.diary-title, .diary-body, .diary-new, .diary-row-title {
    font-family: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", "STSong", "Times New Roman", Georgia, serif;
}
.diary-title {
    margin: 22px 0 0;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: #2f2a36;
}
.diary-meta {
    margin-top: 16px;
    font-family: var(--font);
    font-size: 13.5px;
    color: #6c6673;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.diary-meta .diary-meta-sep { color: #b9b3bd; }
.diary-rule {
    margin: 16px 0 22px;
    height: 0;
    border-top: 1px dashed rgba(0, 0, 0, 0.14);
}
.diary-body {
    font-size: 17.5px;
    line-height: 2.05;
    color: #3a3542;
    letter-spacing: 0.015em;
}
.diary-body p { margin: 0 0 1.05em; }
.diary-body p:last-child { margin-bottom: 0; }
/* 情绪破绽：淡粉底 + 粉下划线，像被笔划过一道 */
.diary-body mark {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 58%, rgba(255, 138, 176, 0.34) 58%);
    color: #b8416d;
    padding: 0 1px;
    border-radius: 2px;
}
.diary-foot {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.diary-byai {
    font-family: var(--font);
    font-size: 12px;
    color: #a9a3af;
    letter-spacing: 0.08em;
}
.diary-again {
    padding: 8px 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    color: #6a6472;
    font-family: var(--font);
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.12s var(--ease-out), background-color 0.2s ease, opacity 0.2s ease;
}
.diary-again:active { transform: scale(0.96); }
.diary-again[disabled] { opacity: 0.5; cursor: default; }

/* 状态切换：生成中 ↔ 纸页 */
.diary-stage .diary-sheet { display: none; }
.diary-stage.reading .diary-sheet { display: block; }
.diary-stage.reading .diary-loading { display: none; }

/* 减少动效：去掉漂移与旋转，只保留淡入（更少更轻，而不是全关） */
@media (prefers-reduced-motion: reduce) {
    .diary-stage::before,
    .diary-stage::after,
    .diary-petal { animation: none !important; }
    .diary-loading-text { animation: none !important; opacity: 1; }
}
@media (max-width: 380px) {
    .diary-sheet { padding-left: 20px; padding-right: 20px; }
    .diary-title { font-size: 24px; }
    .diary-body { font-size: 16px; }
}

/* ===== 目录页：有历史时先看到它 ===== */
.diary-list { display: none; }
.diary-stage.listing .diary-list { display: block; }
.diary-stage.listing .diary-loading,
.diary-stage.listing .diary-sheet { display: none; }
.diary-stage:not(.listing) .diary-list { display: none; }
.diary-list {
    position: relative;
    z-index: 2;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px 22px calc(var(--safe-bottom, 0px) + 40px);
}
.diary-list .diary-inner { max-width: 620px; margin: 0 auto; }
/* 顶部"查看新的日记"：整条填充色（柔粉紫渐变），左侧图标 + 文字 */
.diary-new {
    display: flex; align-items: center; gap: 10px;
    width: 100%; margin: 20px 0 26px; padding: 15px 20px;
    border: none; border-radius: 16px; cursor: pointer;
    background: linear-gradient(135deg, #f2b3c6 0%, #d9a6e2 100%);
    color: #fff;
    font-size: 15.5px; font-weight: 600; letter-spacing: 0.03em;
    box-shadow: 0 10px 26px rgba(206, 132, 168, 0.28);
    transition: transform 0.12s var(--ease-out), box-shadow 0.2s ease;
}
.diary-new:active { transform: scale(0.985); box-shadow: 0 6px 16px rgba(206, 132, 168, 0.24); }
.diary-new svg { width: 18px; height: 18px; flex-shrink: 0; }
.diary-list-title {
    margin: 0 0 10px 4px;
    font-size: 12.5px; color: #9c96a3; letter-spacing: 0.1em;
}
.diary-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 15px 16px; margin-bottom: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
    text-align: left; cursor: pointer;
    transition: transform 0.12s var(--ease-out), background-color 0.18s ease;
}
.diary-row:active { transform: scale(0.985); background: rgba(255, 255, 255, 0.82); }
.diary-row-main { flex: 1; min-width: 0; }
.diary-row-title {
    font-size: 15.5px; font-weight: 600; color: #332e3a;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.diary-row-date { margin-top: 5px; font-size: 12.5px; color: #9c96a3; letter-spacing: 0.02em; }
.diary-row-arrow { color: #c4bec9; flex-shrink: 0; display: flex; }
.diary-row-arrow svg { width: 16px; height: 16px; }
@media (prefers-reduced-transparency: reduce) {
    .diary-row { background: #fff; }
}