/* ============================================================
   css/chat/chat-sleep.css — 哄睡功能样式
   暗夜星空梦幻UI + 播放器 + 歌词滚动 + 统计面板
   遵循 DESIGN-SYSTEM.md：暖米色系变量、多层阴影、衬线花字、动效规范
   ============================================================ */

/* ===== 哄睡面板 Overlay ===== */
#sleep-overlay {
    position: fixed;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    z-index: 2200;
    display: none;
    flex-direction: column;
    padding-top: var(--safe-top);
    overflow: hidden;
    /* 星空背景：多层径向渐变 */
    background:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,245,0.7), transparent),
        radial-gradient(1px 1px at 22% 8%, rgba(255,255,245,0.5), transparent),
        radial-gradient(1.5px 1.5px at 35% 15%, rgba(255,255,245,0.6), transparent),
        radial-gradient(1px 1px at 48% 25%, rgba(255,255,245,0.4), transparent),
        radial-gradient(1px 1px at 60% 10%, rgba(255,255,245,0.55), transparent),
        radial-gradient(1px 1px at 72% 30%, rgba(255,255,245,0.35), transparent),
        radial-gradient(1.5px 1.5px at 85% 18%, rgba(255,255,245,0.5), transparent),
        radial-gradient(1px 1px at 15% 40%, rgba(255,255,245,0.3), transparent),
        radial-gradient(1px 1px at 30% 55%, rgba(255,255,245,0.45), transparent),
        radial-gradient(1px 1px at 55% 45%, rgba(255,255,245,0.35), transparent),
        radial-gradient(1px 1px at 70% 60%, rgba(255,255,245,0.4), transparent),
        radial-gradient(1px 1px at 90% 50%, rgba(255,255,245,0.3), transparent),
        radial-gradient(1px 1px at 8% 70%, rgba(255,255,245,0.25), transparent),
        radial-gradient(1px 1px at 42% 75%, rgba(255,255,245,0.3), transparent),
        radial-gradient(1px 1px at 65% 80%, rgba(255,255,245,0.25), transparent),
        radial-gradient(1px 1px at 80% 72%, rgba(255,255,245,0.2), transparent),
        radial-gradient(1px 1px at 25% 85%, rgba(255,255,245,0.2), transparent),
        radial-gradient(1px 1px at 50% 90%, rgba(255,255,245,0.15), transparent),
        radial-gradient(ellipse at 50% 20%, rgba(180,150,200,0.12), transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(150,140,180,0.08), transparent 50%),
        linear-gradient(180deg, #0D0B14 0%, #151020 50%, #0D1525 100%);
}

#sleep-overlay.open {
    display: flex;
}
#sleep-overlay.open .sleep-panel-inner {
    animation: sleepCurtainReveal 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* 动效注入：帷幕渐开——走入梦境 */
@keyframes sleepCurtainReveal {
    0%   { opacity: 0; transform: translateY(28px); filter: blur(4px); }
    30%  { opacity: 0.3; filter: blur(2px); }
    60%  { opacity: 0.8; transform: translateY(-3px); filter: blur(0); }
    80%  { transform: translateY(1px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* 极光动画层 */
#sleep-overlay::before {
    content: '';
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(180,140,180,0.12), transparent 70%);
    animation: sleepAurora 30s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sleepAurora {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
    50% { transform: translateX(-45%) translateY(-30px); opacity: 0.9; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 动效注入：帷幕渐开——打开面板时黑色帷幕缓缓拉开 */
#sleep-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 100;
    background: radial-gradient(ellipse at 50% 30%, rgba(20,16,30,0.7), #0A0A14);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#sleep-overlay.open::after {
    opacity: 1;
    animation: sleepVeilLift 1.0s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes sleepVeilLift {
    0%   { opacity: 1; }
    50%  { opacity: 0.7; }
    100% { opacity: 0; visibility: hidden; }
}

/* 星空渐现——背景星星随帷幕拉开渐显 */
#sleep-overlay .sleep-panel-inner {
    opacity: 0;
    transition: opacity 0.3s ease 0.15s;
}
#sleep-overlay.open .sleep-panel-inner {
    opacity: 1;
    /* sleepCurtainReveal 在 .open .sleep-panel-inner 上触发 */
}

@media (prefers-reduced-motion: reduce) {
    #sleep-overlay.open::after { animation: none; opacity: 0; }
    #sleep-overlay.open .sleep-panel-inner { animation: fadeIn 0.3s ease both; }
}

/* ===== 睡前面板内部 ===== */
.sleep-panel-inner {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 20px 24px;
    color: #EAE4DE;
    z-index: 1;
    scrollbar-width: none;      /* 隐藏右侧滚动条 */
    -ms-overflow-style: none;
}
.sleep-panel-inner::-webkit-scrollbar { display: none; }

/* 关闭按钮 */
.sleep-close-btn {
    position: absolute;
    top: calc(16px + var(--safe-top));
    right: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,245,0.06);
    border: 1px solid rgba(255,255,245,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}
.sleep-close-btn:hover {
    background: rgba(255,255,245,0.12);
    border-color: rgba(255,255,245,0.2);
}
.sleep-close-btn:active { transform: scale(0.94); }
.sleep-close-btn svg {
    width: 16px; height: 16px;
    stroke: rgba(255,255,245,0.7);
    stroke-width: 1.5;
}

/* ===== Hero区域 ===== */
.sleep-hero {
    text-align: center;
    padding: 28px 0 24px;
    position: relative;
    z-index: 2;
}
/* Hero 光晕替代月亮——更精致的暖光氛围 */
.sleep-hero-glow {
    width: 80px; height: 80px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220,190,160,0.15), rgba(200,170,140,0.06) 40%, transparent 70%);
    box-shadow: 0 0 80px rgba(220,200,160,0.1), 0 0 160px rgba(200,180,140,0.05);
    animation: heroGlowBreath 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes heroGlowBreath {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 1; }
}
.sleep-hero-sub {
    font-family: var(--font-script), 'Great Vibes', cursive;
    font-size: 22px;
    color: var(--gold, #C4A86A);
    opacity: 0.6;
    margin: 0 0 6px;
}
.sleep-hero-title {
    font-family: var(--font-display), 'Playfair Display', serif;
    font-size: 26px;
    font-style: italic;
    font-weight: 400;
    color: #DFD8CD;
    letter-spacing: 0.04em;
    margin: 0 0 8px;
}
.sleep-hero-divider {
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold, #C4A86A), transparent);
    margin: 0 auto;
    opacity: 0.4;
}
/* Hero 光粒 */
.sleep-hero-particle {
    position: absolute;
    top: -10px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255,250,240,0.5);
    pointer-events: none;
    animation: heroParticleFloat 4s ease-in-out infinite;
    filter: blur(0.5px);
}
@keyframes heroParticleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    50% { transform: translateY(-30px) scale(1.8); opacity: 0.7; }
}

/* ===== 配置区域 ===== */
.sleep-section {
    margin-bottom: 20px;
}
.sleep-section-label {
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 13px;
    color: #9A928A;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}
.sleep-section-label .en-deco {
    font-family: var(--font-display), 'Playfair Display', serif;
    font-size: 11px;
    font-style: italic;
    color: var(--gold, #C4A86A);
    opacity: 0.5;
    margin-left: 8px;
}

/* ===== 白噪音卡片（3×3 网格内自动填满格子；禁止残留横排时代的固定宽度，否则窄屏挤压成竖条） ===== */
.sleep-noise-card {
    padding: 14px 8px 10px;
    border-radius: 14px;
    background: rgba(255,255,245,0.04);
    border: 1px solid rgba(255,255,245,0.08);
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.2s ease,
                background 0.2s ease,
                border-color 0.2s ease;
    position: relative;
}
.sleep-noise-card:hover {
    background: rgba(255,255,245,0.07);
    border-color: rgba(255,255,245,0.15);
    transform: translateY(-1px);
}
.sleep-noise-card.selected {
    background: rgba(200,160,160,0.1);
    border-color: rgba(212,184,184,0.35);
    box-shadow: 0 0 12px rgba(200,160,160,0.1);
}
.sleep-noise-card:active { transform: scale(0.96); }

.sleep-noise-icon {
    width: 32px; height: 32px;
    margin: 0 auto 6px;
    opacity: 0.8;
}
.sleep-noise-icon svg {
    width: 100%; height: 100%;
    stroke: rgba(255,255,245,0.8);
    stroke-width: 1.5;
}
.sleep-noise-card.selected .sleep-noise-icon svg {
    stroke: #D4B8B8;
}

.sleep-noise-name {
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 12px;
    color: #9A928A;
}
.sleep-noise-card.selected .sleep-noise-name {
    color: #D4B8B8;
}

/* 白噪音音量滑块（展开）——预留空间+淡入，避免选中时撑高卡片导致 3×3 网格重排闪动 */
.sleep-noise-volume {
    margin-top: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}
.sleep-noise-card.selected .sleep-noise-volume {
    opacity: 1;
    visibility: visible;
}
/* 白噪音音量滑块（展开）——整条 26px 高可点（点按跳值+拖动），视觉轨道仍 3px 细线 */
.sleep-noise-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 26px;
    background: transparent;
    outline: none;
    cursor: pointer;
    touch-action: pan-y;
}
.sleep-noise-slider::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,245,0.15);
}
.sleep-noise-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #D4B8B8;
    border: 2px solid rgba(30,20,24,0.5);
    cursor: pointer;
    box-shadow: 0 0 6px rgba(200,160,160,0.3);
    margin-top: -5.5px; /* (3-14)/2：圆球在 3px 轨道上垂直居中 */
}
.sleep-noise-slider::-moz-range-track {
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,245,0.15);
}
.sleep-noise-slider::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #D4B8B8;
    border: 2px solid rgba(30,20,24,0.5);
    cursor: pointer;
    box-shadow: 0 0 6px rgba(200,160,160,0.3);
}

/* 自定义上传卡片 */
.sleep-noise-card.custom-upload {
    border-style: dashed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 106px;
}
.sleep-noise-card.custom-upload .sleep-noise-icon {
    opacity: 0.5;
}

/* 自定义音频删除按钮（右上角 ×） */
.sleep-noise-del {
    position: absolute;
    top: 6px; right: 6px;
    width: 20px; height: 20px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,245,0.4);
    background: rgba(255,255,245,0.05);
    cursor: pointer;
    opacity: 0.55;
    transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.sleep-noise-del svg { width: 11px; height: 11px; }
.sleep-noise-del:hover { color: #D4B8B8; background: rgba(212,184,184,0.18); opacity: 1; }
.sleep-noise-del:active { transform: scale(0.9); }

/* 哄睡主题确认弹窗（贴合暗色 UI；.show 模式防闪；无 backdrop-filter 避免作用在星空底上闪动） */
.sleep-confirm-overlay {
    position: absolute; inset: 0;
    background: rgba(10,8,16,0.62);
    z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease;
}
.sleep-confirm-overlay.open {
    opacity: 1; pointer-events: auto;
    transition: none;
    animation: sleepConfirmFade 0.18s ease;
}
@keyframes sleepConfirmFade { from { opacity: 0; } to { opacity: 1; } }
.sleep-confirm-panel {
    background: #161120;
    border: 1px solid rgba(212,184,184,0.22);
    border-radius: 18px;
    padding: 24px 22px;
    width: 84%; max-width: 300px;
    text-align: center;
    box-shadow: 0 14px 50px rgba(0,0,0,0.5);
}
/* 面板入场动画只在 .open 时一次性播（防止隐形插入阶段先播、再和 overlay 淡入重演出"闪一下"） */
.sleep-confirm-overlay.open .sleep-confirm-panel {
    animation: sleepConfirmPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sleepConfirmPop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.sleep-confirm-msg {
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 14px; color: #DFD8CD; line-height: 1.7; margin-bottom: 20px;
}
.sleep-confirm-btns { display: flex; gap: 10px; }
.sleep-confirm-btn {
    flex: 1; padding: 11px 0; border-radius: 22px;
    font-size: 14px; cursor: pointer; font-family: var(--font-body), 'Noto Serif SC', serif;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.sleep-confirm-btn.cancel { color: #9A928A; background: rgba(255,255,245,0.06); border: 1px solid rgba(255,255,245,0.12); }
.sleep-confirm-btn.cancel:hover { background: rgba(255,255,245,0.1); }
.sleep-confirm-btn.ok { color: #D4B8B8; background: rgba(212,184,184,0.16); border: 1px solid rgba(212,184,184,0.32); }
.sleep-confirm-btn.ok:hover { background: rgba(212,184,184,0.26); }
.sleep-confirm-btn:active { transform: scale(0.96); }

/* 哄睡专用暗色提示气泡（贴合深夜 UI；柔性浮现，绝不闪白） */
.sleep-ui-toast {
    position: absolute;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    max-width: 78%;
    transform: translateX(-50%) translateY(10px);
    padding: 11px 22px;
    background: rgba(24, 18, 34, 0.95);
    border: 1px solid rgba(212, 184, 184, 0.26);
    border-radius: 22px;
    color: #EDE5D9;
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 13px; line-height: 1.65;
    text-align: center; white-space: normal;
    box-shadow: 0 10px 32px rgba(0,0,0,0.5), 0 0 20px rgba(200,160,160,0.12);
    opacity: 0; pointer-events: none;
    z-index: 150;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.sleep-ui-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== 语种chips ===== */
.sleep-chips-row {
    display: flex;
    gap: 8px;
}
.sleep-chip {
    padding: 8px 18px;
    border-radius: 20px;
    background: rgba(255,255,245,0.04);
    border: 1px solid rgba(255,255,245,0.1);
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 13px;
    color: #9A928A;
    cursor: pointer;
    transition: background 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease;
}
.sleep-chip:hover {
    background: rgba(255,255,245,0.07);
}
.sleep-chip.selected {
    background: rgba(200,160,160,0.15);
    border-color: rgba(212,184,184,0.4);
    color: #D4B8B8;
}

/* ===== 时长调节器 ===== */
.sleep-duration-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.sleep-dur-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,245,0.05);
    border: 1px solid rgba(255,255,245,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #9A928A;
    font-size: 20px;
    user-select: none;
}
.sleep-dur-btn:hover {
    background: rgba(255,255,245,0.1);
    border-color: rgba(255,255,245,0.2);
}
.sleep-dur-btn:active { transform: scale(0.92); }
.sleep-dur-value {
    font-family: var(--font-display), 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 400;
    color: #DFD8CD;
    line-height: 1;
    min-width: 80px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sleep-dur-unit {
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 14px;
    color: #9A928A;
    text-align: center;
    margin-top: 2px;
}

/* ===== 内容类型 ===== */
.sleep-content-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sleep-content-card {
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255,255,245,0.03);
    border: 1px solid rgba(255,255,245,0.06);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
                background 0.2s ease,
                border-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sleep-content-card:hover {
    background: rgba(255,255,245,0.06);
    border-color: rgba(255,255,245,0.12);
}
.sleep-content-card.selected {
    background: rgba(200,160,160,0.08);
    border-color: rgba(212,184,184,0.3);
}
.sleep-content-card:active { transform: scale(0.98); }
.sleep-content-card .cc-icon {
    width: 20px; height: 20px;
    opacity: 0.6;
    flex-shrink: 0;
}
.sleep-content-card.selected .cc-icon { opacity: 0.9; }
.sleep-content-card .cc-label {
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 14px;
    color: #BFB8AE;
}
.sleep-content-card.selected .cc-label { color: #DFD8CD; }

/* 书架选书浮层 */
.sleep-books-list {
    margin-top: 8px;
    max-height: 180px;
    overflow-y: auto;
}
.sleep-book-item {
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,245,0.03);
    border: 1px solid rgba(255,255,245,0.06);
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s ease,
                border-color 0.15s ease,
                color 0.15s ease;
    font-size: 13px;
    color: #9A928A;
}
.sleep-book-item:hover {
    background: rgba(255,255,245,0.06);
}
.sleep-book-item.selected {
    background: rgba(200,160,160,0.08);
    border-color: rgba(212,184,184,0.3);
    color: #D4B8B8;
}

/* ===== 开始按钮（韩系浪漫——纯色玫瑰+多层阴影） ===== */
.sleep-start-btn {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 24px auto 0;
    padding: 14px 0;
    border-radius: 28px;
    border: 1px solid rgba(200,160,160,0.25);
    background: rgba(201,168,168,0.18);
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 16px;
    color: #DFD0D0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    letter-spacing: 0.06em;
    box-shadow: 0 0 24px rgba(200,160,160,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
}
.sleep-start-btn:hover {
    transform: translateY(-2px);
    background: rgba(201,168,168,0.28);
    border-color: rgba(200,160,160,0.45);
    box-shadow: 0 4px 28px rgba(200,160,160,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
}
.sleep-start-btn:active {
    transform: scale(0.96);
    transition: all 0.08s ease;
    background: rgba(190,150,150,0.25);
}
.sleep-start-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* 底部历史入口 */
.sleep-history-link {
    text-align: center;
    margin-top: 20px;
    padding: 12px 0;
}
.sleep-history-link span {
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 13px;
    color: #6A625A;
    cursor: pointer;
    transition: color 0.2s ease;
}
.sleep-history-link span:hover { color: #9A928A; }

/* ===== Loading界面 ===== */
.sleep-loading-view {
    flex: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: 40px 20px;
}
.sleep-loading-view.active { display: flex; }

/* Loading 呼吸光点群——替代原来的大球，更精致 */
.sleep-loading-stars {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
}
.sleep-loading-star {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(220,200,180,0.5);
    animation: loadingStarFloat 3s ease-in-out infinite;
}
.sleep-loading-star:nth-child(1) { animation-delay: 0s; }
.sleep-loading-star:nth-child(2) { animation-delay: 0.4s; }
.sleep-loading-star:nth-child(3) { animation-delay: 0.8s; }
.sleep-loading-star:nth-child(4) { animation-delay: 1.2s; }
.sleep-loading-star:nth-child(5) { animation-delay: 1.6s; }
@keyframes loadingStarFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    50% { transform: translateY(-12px) scale(1.8); opacity: 0.8; }
}

/* 当前步骤状态栏（loading 页顶部，配合状态卡显示「卡在哪一步」） */
.sleep-loading-stagetag {
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 13px; color: #C4A86A; letter-spacing: 0.4px;
    margin-bottom: 14px; text-align: center; min-height: 18px;
}

.sleep-loading-step {
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 14px;
    color: #6A625A;
    margin-bottom: 12px;
    text-align: center;
    transition: all 0.6s ease;
}
.sleep-loading-step.done {
    color: #D4B8B8;
}
.sleep-loading-step.current {
    color: #DFD8CD;
    font-size: 15px;
}

/* Loading 进度条 —— 浪漫文艺感 */
.sleep-loading-progress {
    width: 200px;
    height: 2px;
    background: rgba(230, 220, 210, 0.1);
    border-radius: 1px;
    margin-top: 20px;
    overflow: hidden;
}
.sleep-loading-progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #D4B8B8, #E8D5C8, #C8A8A8);
    border-radius: 1px;
    transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ===== 播放入口（面板→播放过渡） ===== */

/* ===== 面板入场动画系统 ===== */
/* 动效注入：浮动感 — Hero区弹性渐显 */
@keyframes sleepHeroEnter {
    0% { opacity: 0; transform: translateY(18px); }
    60% { opacity: 1; transform: translateY(-3px); }
    80% { transform: translateY(1px); }
    100% { opacity: 1; transform: translateY(0); }
}
/* 动效注入：浮动感 — 区块滑入 + 微弹性 */
@keyframes sleepBlockEnter {
    0% { opacity: 0; transform: translateY(28px); }
    70% { opacity: 1; transform: translateY(-2px); }
    100% { opacity: 1; transform: translateY(0); }
}
/* 动效注入：浮动感 — 卡片渐显 + 微缩放 */
@keyframes sleepCardEnter {
    0% { opacity: 0; transform: scale(0.94); }
    100% { opacity: 1; transform: scale(1); }
}

/* Hero 入场 */
.sleep-hero-animate { animation: sleepHeroEnter 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
/* Section 入场 + stagger */
.sleep-section-animate { animation: sleepBlockEnter 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
/* Card 入场 */
.sleep-card-animate { animation: sleepCardEnter 0.5s ease-out both; }

/* Stagger 延迟 — 区块级 */
.sleep-stagger-0 { animation-delay: 0.08s; }
.sleep-stagger-1 { animation-delay: 0.15s; }
.sleep-stagger-2 { animation-delay: 0.24s; }
.sleep-stagger-3 { animation-delay: 0.33s; }
.sleep-stagger-4 { animation-delay: 0.42s; }
.sleep-stagger-5 { animation-delay: 0.51s; }
/* Stagger 延迟 — 卡片级（白噪音/内容列表内各项） */
.sleep-card-stagger-0 { animation-delay: 0.05s; }
.sleep-card-stagger-1 { animation-delay: 0.11s; }
.sleep-card-stagger-2 { animation-delay: 0.17s; }
.sleep-card-stagger-3 { animation-delay: 0.23s; }
.sleep-card-stagger-4 { animation-delay: 0.29s; }
.sleep-card-stagger-5 { animation-delay: 0.35s; }
.sleep-card-stagger-6 { animation-delay: 0.41s; }
.sleep-card-stagger-7 { animation-delay: 0.47s; }
.sleep-card-stagger-8 { animation-delay: 0.53s; }
.sleep-card-stagger-9 { animation-delay: 0.59s; }

/* 动效注入：空间感 — 面板卡片 hover 微浮 */
.sleep-noise-card,
.sleep-content-card,
.sleep-chip {
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.25s ease,
                background 0.2s ease,
                border-color 0.2s ease;
}
.sleep-noise-card:hover,
.sleep-content-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* 动效注入：浮动感 — 白噪音选中指示呼吸 */
.sleep-noise-card.selected::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    border: 1px solid rgba(212,184,184,0.25);
    animation: selectedCardBreath 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes selectedCardBreath {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}

/* 动效：开始按钮入场 */
@keyframes sleepBtnEnter {
    0% { opacity: 0; transform: translateY(12px) scale(0.96); }
    70% { transform: translateY(-2px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.sleep-btn-animate { animation: sleepBtnEnter 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* reduced motion: 一切入场动画退化为简单fade */
@media (prefers-reduced-motion: reduce) {
    .sleep-hero-animate,
    .sleep-section-animate,
    .sleep-card-animate,
    .sleep-btn-animate {
        animation: fadeIn 0.3s ease both;
    }
    .sleep-hero-glow,
    .sleep-loading-star,
    .sleep-noise-card.selected::before {
        animation: none;
    }
}

/* ===== 全屏播放容器 ===== */
#sleep-session-overlay {
    position: fixed;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    z-index: 5000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    background: #0A0A14;
}
#sleep-session-overlay.open {
    display: flex;
    animation: fadeIn 0.4s ease;
}
/* 播放器内极光 */
#sleep-session-overlay::before {
    content: '';
    position: absolute;
    top: -200px; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 500px;
    background: radial-gradient(ellipse, rgba(180,140,180,0.1), transparent 70%);
    animation: sleepAurora 25s ease-in-out infinite;
    pointer-events: none;
}
/* 播放器星空 */
#sleep-session-overlay::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(1.5px 1.5px at 15% 25%, rgba(255,255,245,0.5), transparent),
        radial-gradient(1px 1px at 35% 15%, rgba(255,255,245,0.4), transparent),
        radial-gradient(1px 1px at 55% 30%, rgba(255,255,245,0.35), transparent),
        radial-gradient(1.5px 1.5px at 75% 20%, rgba(255,255,245,0.45), transparent),
        radial-gradient(1px 1px at 20% 60%, rgba(255,255,245,0.3), transparent),
        radial-gradient(1px 1px at 60% 55%, rgba(255,255,245,0.25), transparent),
        radial-gradient(1px 1px at 80% 65%, rgba(255,255,245,0.3), transparent),
        radial-gradient(1px 1px at 40% 75%, rgba(255,255,245,0.2), transparent),
        radial-gradient(ellipse at 50% 80%, rgba(140,150,180,0.06), transparent 60%);
    pointer-events: none;
}

/* ===== 歌词滚动区（flexbox 自然排列，不再 absolute 重叠） ===== */
.sleep-lyrics-area {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 32px;
    overflow: hidden;
}

.sleep-lyric-line {
    font-family: var(--font-body), 'Noto Serif SC', serif;
    text-align: center;
    line-height: 1.6;
    max-width: 340px;
    transition: all 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sleep-lyric-prev {
    font-size: 13px;
    color: rgba(230,220,210,0.35);
    max-height: 0;
    opacity: 0;
}
.sleep-lyric-current {
    font-size: 17px;
    color: #DFD8CD;
    font-weight: 500;
    text-shadow: 0 0 20px rgba(200,160,160,0.2);
    opacity: 1;
}
.sleep-lyric-next {
    font-size: 13px;
    color: rgba(230,220,210,0.3);
    opacity: 0.7;
}
.sleep-lyric-next2 {
    font-size: 12px;
    color: rgba(230,220,210,0.15);
    opacity: 0.4;
}

/* ===== 播放器控件（底部） ===== */

/* ===== 头像区域（播放界面） ===== */
.sleep-avatar-area {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 0 8px;
}
.sleep-avatar-ring {
    width: 100px; height: 100px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, rgba(200,160,160,0.5), rgba(196,168,106,0.4), rgba(184,168,196,0.5));
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.4s ease-out;
    animation: avatarRingBreath 4s ease-in-out infinite;
}
@keyframes avatarRingBreath {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,160,160,0.3); }
    50% { box-shadow: 0 0 0 12px rgba(200,160,160,0); }
}
.sleep-avatar-ring-inner {
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,250,240,0.06);
}
.sleep-avatar-img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
/* 头像粒子 */
.sleep-avatar-particles {
    position: absolute;
    inset: -20px;
    pointer-events: none;
}
.sleep-particle {
    position: absolute;
    top: 50%;
    border-radius: 50%;
    background: rgba(220,200,180,0.4);
    animation: particleOrbit 4s ease-in-out infinite;
    filter: blur(0.5px);
}
@keyframes particleOrbit {
    0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.3; }
    25% { transform: translateY(-40px) translateX(15px) scale(1.5); opacity: 0.6; }
    50% { transform: translateY(-60px) translateX(0) scale(1); opacity: 0.3; }
    75% { transform: translateY(-25px) translateX(-15px) scale(1.5); opacity: 0.6; }
}

/* ===== 频谱可视化 ===== */
.sleep-visualizer {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 24px;
    padding: 0 40px;
}
.sleep-viz-bar {
    width: 2px;
    min-height: 4px;
    border-radius: 1px;
    background: rgba(212,184,184,0.4);
    transition: height 0.3s ease;
}

/* ===== 底部装饰文字 ===== */
.sleep-whisper-deco {
    position: relative;
    z-index: 3;
    text-align: center;
    font-family: var(--font-display), 'Playfair Display', serif;
    font-size: 10px;
    font-style: italic;
    color: rgba(200,180,160,0.2);
    padding: 4px 0;
    letter-spacing: 0.06em;
}

/* ===== 温柔错误提示 ===== */
.sleep-gentle-error {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 14px;
    color: #D4B8B8;
    opacity: 1;
    transition: opacity 2s ease;
    z-index: 5;
    pointer-events: none;
}

/* ===== Loading 呼吸点 ===== */
.sleep-loading-breath-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(212,184,184,0.6);
    margin-top: 16px;
    animation: breathDot 1.6s ease-in-out infinite;
}
@keyframes breathDot {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.5); }
}

/* Loading 取消按钮 */
.sleep-loading-cancel {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 13px;
    color: rgba(230,220,210,0.25);
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 2;
    padding: 8px 20px;
}
.sleep-loading-cancel:hover { color: rgba(230,220,210,0.6); }

/* Loading 错误提示 */
.sleep-loading-error {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 14px;
    color: #D4B8B8;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
    z-index: 2;
}

/* ===== 播放器控件（底部） ===== */
.sleep-controls {
    position: relative;
    z-index: 10;
    padding: 16px 24px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    transition: opacity 1.5s ease;
}
.sleep-controls.dimmed {
    opacity: 0.25;
}
/* 即使 dimmed，hover 也恢复可见 */
.sleep-controls:hover {
    opacity: 1 !important;
}

.sleep-ctrl-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,245,0.05);
    border: 1px solid rgba(255,255,245,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.sleep-ctrl-btn svg {
    width: 18px; height: 18px;
    stroke: rgba(255,255,245,0.6);
    stroke-width: 1.5;
}
.sleep-ctrl-btn:hover {
    background: rgba(255,255,245,0.1);
    border-color: rgba(255,255,245,0.18);
}
.sleep-ctrl-btn:active { transform: scale(0.92); }

/* 进度线 */
.sleep-progress-line {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    height: 2px;
    background: rgba(255,255,245,0.06);
    z-index: 2;
}
.sleep-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(196,168,106,0.5), rgba(196,168,106,0.15));
    transition: width 0.5s linear;
}

/* ===== 音量弹窗 ===== */
.sleep-volume-pop {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    max-height: 360px;
    overflow-y: auto;
    padding: 20px;
    border-radius: 16px;
    background: rgba(20,15,28,0.92);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,245,0.08);
    z-index: 20;
    display: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.sleep-volume-pop.open { display: block; animation: fadeIn 0.2s ease; }

.sleep-vol-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.sleep-vol-row:last-child { margin-bottom: 0; }
.sleep-vol-row-master {
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,245,0.06);
}
.sleep-vol-label {
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 11px;
    color: #9A928A;
    width: 42px;
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 音量弹窗滑条——同样整条可点可拖，视觉轨道细线 */
.sleep-vol-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 26px;
    background: transparent;
    outline: none;
    cursor: pointer;
    touch-action: pan-y;
}
.sleep-vol-slider::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,245,0.12);
}
.sleep-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #D4B8B8;
    cursor: pointer;
    border: 2px solid rgba(20,15,28,0.7);
    box-shadow: 0 0 8px rgba(200,160,160,0.25);
    margin-top: -6.5px; /* (3-16)/2：圆球在 3px 轨道上垂直居中 */
}
.sleep-vol-slider::-moz-range-track {
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,245,0.12);
}
.sleep-vol-slider::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #D4B8B8;
    cursor: pointer;
    border: 2px solid rgba(20,15,28,0.7);
    box-shadow: 0 0 8px rgba(200,160,160,0.25);
}

/* ===== 退出确认弹层 ===== */
.sleep-exit-confirm {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: rgba(10,10,20,0.85);
    backdrop-filter: blur(8px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}
.sleep-exit-confirm.open { display: flex; animation: fadeIn 0.25s ease; }

.sleep-exit-msg {
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 16px;
    color: #DFD8CD;
    margin-bottom: 8px;
    line-height: 1.5;
}
.sleep-exit-sub {
    font-family: var(--font-display), 'Playfair Display', serif;
    font-size: 12px;
    font-style: italic;
    color: #6A625A;
    margin-bottom: 28px;
}

.sleep-exit-btns {
    display: flex;
    gap: 12px;
}
.sleep-exit-btn {
    padding: 10px 28px;
    border-radius: 22px;
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(255,255,245,0.15);
}
.sleep-exit-btn.cancel {
    background: transparent;
    color: #9A928A;
}
.sleep-exit-btn.confirm {
    background: rgba(200,160,160,0.2);
    border-color: rgba(200,160,160,0.35);
    color: #D4B8B8;
}
.sleep-exit-btn:hover { transform: translateY(-1px); }
.sleep-exit-btn:active { transform: scale(0.95); }

/* ===== CSS暗屏遮罩 ===== */
.sleep-dim-overlay {
    position: absolute;
    inset: 0;
    z-index: 15;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 10s ease;
}
.sleep-dim-overlay.active {
    opacity: 0.94;
    pointer-events: auto;
}

/* ===== 恢复弹窗 ===== */
.sleep-resume-dialog {
    position: absolute;
    inset: 0;
    z-index: 40;
    background: rgba(10,10,20,0.88);
    backdrop-filter: blur(10px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}
.sleep-resume-dialog.open { display: flex; animation: fadeIn 0.3s ease; }
.sleep-resume-title {
    font-family: var(--font-display), 'Playfair Display', serif;
    font-size: 22px;
    font-style: italic;
    color: #DFD8CD;
    margin-bottom: 10px;
}
.sleep-resume-sub {
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 14px;
    color: #9A928A;
    margin-bottom: 28px;
    line-height: 1.5;
}
.sleep-resume-btns {
    display: flex;
    gap: 12px;
}
.sleep-resume-btn {
    padding: 10px 28px;
    border-radius: 22px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(255,255,245,0.12);
}
.sleep-resume-btn.later {
    background: transparent;
    color: #9A928A;
}
.sleep-resume-btn.cont {
    background: rgba(200,160,160,0.18);
    border-color: rgba(200,160,160,0.3);
    color: #D4B8B8;
}

/* ===== 历史面板 ===== */
.sleep-history-view {
    flex: 1;
    display: none;
    flex-direction: column;
    z-index: 1;
    overflow-y: auto;
    padding: 20px;
}
.sleep-history-view.active { display: flex; }

.sleep-history-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.sleep-back-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,245,0.05);
    border: 1px solid rgba(255,255,245,0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sleep-back-btn:hover { background: rgba(255,255,245,0.1); }
.sleep-history-title {
    font-family: var(--font-display), 'Playfair Display', serif;
    font-size: 20px;
    font-style: italic;
    color: #DFD8CD;
}

/* 统计周期切换 */
.sleep-stats-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.sleep-stats-tab {
    padding: 6px 16px;
    border-radius: 16px;
    background: rgba(255,255,245,0.04);
    border: 1px solid rgba(255,255,245,0.08);
    font-size: 12px;
    color: #9A928A;
    cursor: pointer;
    transition: background 0.15s ease,
                border-color 0.15s ease,
                color 0.15s ease;
}
.sleep-stats-tab.selected {
    background: rgba(200,160,160,0.12);
    border-color: rgba(200,160,160,0.3);
    color: #D4B8B8;
}

/* 统计卡片 */
.sleep-stat-card {
    padding: 16px;
    border-radius: 12px;
    background: rgba(255,255,245,0.03);
    border: 1px solid rgba(255,255,245,0.06);
    margin-bottom: 12px;
}
.sleep-stat-value {
    font-family: var(--font-display), 'Playfair Display', serif;
    font-size: 32px;
    color: #DFD8CD;
    margin-bottom: 2px;
}
.sleep-stat-label {
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 12px;
    color: #9A928A;
}
.sleep-stat-sub {
    font-family: var(--font-display), 'Playfair Display', serif;
    font-size: 10px;
    font-style: italic;
    color: var(--gold, #C4A86A);
    opacity: 0.5;
    margin-top: 2px;
}
/* 副文案单行排布（连续 N 天 · 午睡 X 次 · 小憩 X 次），避免两行撑高卡片 */
.sleep-stat-sub-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.sleep-stat-sub-row .sleep-stat-sub { margin-top: 2px; white-space: nowrap; }

/* 统计柱状图 */
.sleep-stat-bars {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 80px;
    padding-top: 8px;
}
.sleep-stat-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.sleep-stat-bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
    background: rgba(200,160,160,0.3);
    transition: height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    min-height: 3px;
}
.sleep-stat-bar-label {
    font-size: 10px;
    color: #6A625A;
}

/* 记录卡片 */
.sleep-record-card-item {
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255,255,245,0.03);
    border: 1px solid rgba(255,255,245,0.06);
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.sleep-record-card-item:hover {
    background: rgba(255,255,245,0.06);
    transform: translateY(-1px);
}
.sleep-rec-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.sleep-rec-date {
    font-family: var(--font-display), 'Playfair Display', serif;
    font-size: 14px;
    font-style: italic;
    color: #DFD8CD;
}
.sleep-rec-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(168,184,160,0.12);
    color: #B8C8B0;
}
.sleep-rec-status.interrupted {
    background: rgba(200,160,160,0.1);
    color: #D4B8B8;
}
.sleep-rec-info {
    font-size: 12px;
    color: #9A928A;
    line-height: 1.5;
}

/* ===== 记录详情弹窗 ===== */
/* ★ 2028-09：**去掉 backdrop-filter**——这一层自己就是滚动容器，滚动容器里套毛玻璃会整层重绘
   （项目的常驻界面铁律之一），甲方看到的"内容挤在一起/糊"有它一份。改纯暗色底，阅读更清楚也不闪。
   底留白给 iOS 安全区，长故事滚到底不会贴住小横条。 */
.sleep-detail-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: rgba(12,12,20,0.94);
    display: none;
    flex-direction: column;
    padding: 24px 24px calc(32px + var(--safe-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.sleep-detail-overlay.open { display: flex; animation: fadeIn 0.25s ease; }
.sleep-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.sleep-detail-title {
    font-family: var(--font-display), 'Playfair Display', serif;
    font-size: 18px;
    font-style: italic;
    color: #DFD8CD;
}
.sleep-detail-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,245,0.06);
    border: 1px solid rgba(255,255,245,0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9A928A;
    transition: all 0.15s ease;
}
.sleep-detail-close:hover { background: rgba(255,255,245,0.12); }
/* 详情页短总结（哄睡叙事摘要：标题+正文） */
.sleep-detail-summary {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(212,184,184,0.08);
    border: 1px solid rgba(212,184,184,0.18);
}
.sleep-detail-summary-title {
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 14px;
    font-weight: 600;
    color: #D4B8B8;
    margin-bottom: 6px;
    line-height: 1.5;
}
.sleep-detail-summary-body {
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 13px;
    color: #A79A8F;
    line-height: 1.8;
}
.sleep-detail-text {
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 14px;
    color: #9A928A;
    line-height: 1.8;
    margin-bottom: 20px;
    white-space: pre-wrap;
}
/* 故事正文一句一段（甲方：晚安日记里内容不换行、全挤在一起） */
.sleep-detail-p {
    margin: 0 0 10px;
    line-height: 1.9;
    text-wrap: pretty;
}
.sleep-detail-p:last-child { margin-bottom: 0; }
/* 外语哄睡双语对照：逐句「外语 + 中文」，回听时高亮当前句。
   不再用 max-height 压成半屏 —— 与中文单段一致，内容随外层 .sleep-detail-overlay 整体滚动。 */
.sleep-detail-bilingual { padding-right: 6px; }
.sleep-detail-pair {
    padding: 10px 12px; border-radius: 12px;
    border: 1px solid transparent; margin-bottom: 8px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.sleep-detail-pair.active { background: rgba(212,184,184,0.12); border-color: rgba(212,184,184,0.32); }
.sleep-detail-pair-foreign { font-size: 14px; color: #6A625A; line-height: 1.7; }
.sleep-detail-pair-cn { font-size: 12px; color: #9A928A; line-height: 1.6; margin-top: 3px; }
.sleep-detail-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.sleep-detail-btn {
    padding: 10px 20px;
    border-radius: 22px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid rgba(255,255,245,0.15);
    background: rgba(255,255,245,0.05);
    color: #9A928A;
    transition: all 0.2s ease;
}
.sleep-detail-btn:hover {
    background: rgba(255,255,245,0.1);
    border-color: rgba(255,255,245,0.25);
}

/* ===== 窄屏适配 ≤370px ===== */
@media (max-width: 370px) {
    .sleep-hero-title { font-size: 24px; }
    .sleep-hero-sub { font-size: 18px; }
    .sleep-dur-value { font-size: 38px; }
    .sleep-lyric-current { font-size: 15px; }
    .sleep-lyric-prev, .sleep-lyric-next { font-size: 12px; }
    .sleep-panel-inner { padding: 14px; }
    .sleep-stat-value { font-size: 26px; }
    .sleep-volume-pop { width: 220px; }
}

/* ===== 聊天泡泡卡 ===== */
.sleep-chat-card {
    max-width: 280px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface, rgba(255,252,249,0.82));
    border: 1px solid var(--border, rgba(180,170,155,0.22));
    box-shadow: var(--shadow-xs), var(--shadow-sm);
}
.sleep-chat-card-header {
    padding: 14px 16px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(196,168,106,0.15);
}
.sleep-chat-card-title {
    font-family: var(--font-display), 'Playfair Display', serif;
    font-size: 16px;
    font-style: italic;
    color: var(--text-primary, #1E1C1A);
    margin: 0;
}
[data-theme-mode="dark"] .sleep-chat-card-title { color: #E8E0D8; }
.sleep-chat-card-body {
    padding: 12px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary, #8A8278);
    line-height: 1.5;
}
.sleep-chat-card-footer {
    padding: 10px 16px 14px;
    text-align: center;
}
.sleep-chat-card-link {
    display: inline-block;
    padding: 7px 22px;
    border-radius: 18px;
    background: var(--rose-light, rgba(201,168,168,0.12));
    border: 1px solid rgba(201,168,168,0.2);
    font-size: 13px;
    color: var(--rose, #C9A8A8);
    cursor: pointer;
    transition: all 0.2s ease;
}
.sleep-chat-card-link:hover {
    background: rgba(201,168,168,0.2);
    transform: translateY(-1px);
}

/* ===== 泡泡卡样式（韩系法式花艺） ===== */
.sleep-chat-card {
    background: var(--surface, rgba(255,252,249,0.82));
    border-radius: 14px;
    padding: 20px 18px;
    box-shadow: var(--shadow-xs), var(--shadow-sm);
    text-align: center;
    position: relative;
    overflow: hidden;
    max-width: 280px;
    margin: 0 auto;
    border: 1px solid var(--border, rgba(180,170,155,0.2));
    animation: inviteCardEnter 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* 顶部金色装饰线 */
.sleep-chat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold, #C4A86A), transparent);
    opacity: 0.3;
}
/* 底部柔光 */
.sleep-chat-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 36px;
    background: linear-gradient(0deg, var(--rose-light, rgba(201,168,168,0.06)), transparent);
    pointer-events: none;
}

[data-theme-mode="dark"] .sleep-chat-card {
    background: var(--surface, rgba(30,26,24,0.88));
    border-color: rgba(212,184,150,0.1);
    box-shadow: 0 2px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,245,0.03);
}

.sleep-card-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold, #C4A86A), transparent);
    margin: 12px 0;
    opacity: 0.5;
}

.sleep-card-title-en {
    font-family: var(--font-script, 'Great Vibes', cursive);
    font-size: 22px;
    color: var(--gold, #C4A86A);
    opacity: 0.7;
}

.sleep-card-title {
    font-family: var(--font-display, 'Playfair Display', 'Georgia', serif);
    font-size: 17px;
    color: var(--rose, #C9A8A8);
    margin-top: 4px;
    font-style: italic;
}

.sleep-card-status {
    display: inline-block;
    font-family: var(--font-body, 'Noto Serif SC', serif);
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 10px;
    margin-top: 8px;
}
.sleep-card-status.done {
    color: var(--sage, #A8B8A0);
    background: rgba(168,184,160,0.12);
}
.sleep-card-status.partial {
    color: var(--rose, #C9A8A8);
    background: rgba(201,168,168,0.12);
}
.sleep-card-status.missed {
    color: var(--lavender, #B8A8C4);
    background: rgba(184,168,196,0.12);
}

.sleep-card-summary {
    font-family: var(--font-body, 'Noto Serif SC', serif);
    font-size: 13px;
    color: var(--text-secondary, #8A8278);
    margin: 10px 0;
    line-height: 1.6;
}

.sleep-card-meta {
    font-family: var(--font-body, 'Noto Serif SC', serif);
    font-size: 11px;
    color: var(--text-muted, #BFB8AE);
    margin: 8px 0;
    line-height: 1.5;
}

.sleep-card-link {
    display: inline-block;
    font-family: var(--font-body, 'Noto Serif SC', serif);
    font-size: 12px;
    color: var(--rose, #C9A8A8);
    cursor: pointer;
    padding: 6px 18px;
    border-radius: 14px;
    border: 1px solid rgba(201,168,168,0.25);
    margin-top: 8px;
    transition: all 0.2s ease;
}
.sleep-card-link:hover { background: rgba(201,168,168,0.12); transform: translateY(-1px); }
.sleep-card-link:active { transform: scale(0.95); }

/* ===== 播放界面Flexbox布局增强 ===== */
#sleep-session-overlay {
    /* 基础布局：配合原有 display:none→.open display:flex */
    align-items: center;
    justify-content: flex-start;
    padding: 40px 20px 24px;
}
.sleep-avatar-area {
    margin-bottom: 16px;
    flex-shrink: 0;
}
.sleep-lyrics-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: calc(100vh - 400px);
    min-height: 120px;
    overflow: hidden;
}
.sleep-whisper-deco {
    flex-shrink: 0;
    margin: 8px 0;
}
.sleep-controls {
    flex-shrink: 0;
    margin-top: auto;
    width: 100%;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    position: relative;
}

/* ===== 时间进度条 ===== */
.sleep-time-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0 8px;
    width: 100%;
    max-width: 320px;
}
.sleep-time-current, .sleep-time-total {
    font-family: var(--font-body, 'Noto Serif SC', serif);
    font-size: 11px;
    color: rgba(230,220,210,0.5);
    min-width: 28px;
}
.sleep-time-total { text-align: right; }
.sleep-time-progress {
    flex: 1;
    height: 2px;
    background: rgba(200,168,168,0.12);
    border-radius: 1px;
    position: relative;
}
.sleep-time-progress-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: var(--rose, #D4B8B8);
    border-radius: 1px;
    transition: width 0.3s ease;
    width: 0%;
}

/* ===== 时间调节器 ===== */
.sleep-time-adjuster {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    justify-content: center;
}
.sleep-time-btn {
    padding: 3px 10px;
    border-radius: 14px;
    border: 1px solid rgba(200,168,168,0.2);
    color: rgba(200,168,168,0.7);
    font-family: var(--font-body);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
}
.sleep-time-btn:hover { background: rgba(200,168,168,0.1); color: #D4B8B8; }
.sleep-time-btn:active { transform: scale(0.95); }

/* ===== 退出确认弹窗增强 ===== */
.sleep-exit-btn.save {
    background: rgba(168,184,160,0.18);
    border-color: rgba(168,184,160,0.35);
    color: #A8B8A0;
}
.sleep-exit-btn.discard {
    background: transparent;
    color: #6A625A;
    border-color: rgba(255,255,245,0.08);
}

/* ===== 纯白噪音模式开关（韩系浪漫pill） ===== */
.sleep-mode-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255,255,245,0.025);
    border-radius: 14px;
    border: 1px solid rgba(200,168,168,0.08);
}
.sleep-mode-label {
    font-family: var(--font-body, 'Noto Serif SC', serif);
    font-size: 14px;
    color: #EAE4DE;
    letter-spacing: 0.03em;
}
.sleep-mode-hint {
    font-family: var(--font-body, 'Noto Serif SC', serif);
    font-size: 10px;
    color: rgba(180,160,160,0.5);
    margin-top: 1px;
    display: block;
    font-style: italic;
}
.sleep-mode-toggle {
    width: 48px;
    height: 28px;
    border-radius: 14px;
    background: rgba(255,255,245,0.06);
    border: 1px solid rgba(255,255,245,0.08);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}
.sleep-mode-toggle:hover {
    border-color: rgba(200,168,168,0.25);
}
.sleep-mode-toggle.active {
    background: rgba(201,168,168,0.2);
    border-color: rgba(201,168,168,0.35);
    box-shadow: 0 0 12px rgba(200,160,160,0.1);
}
.sleep-mode-toggle-knob {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,252,248,0.9);
    position: absolute;
    top: 2px;
    left: 2px;
    transition: all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.sleep-mode-toggle.active .sleep-mode-toggle-knob {
    left: 22px;
    background: #D4B8B8;
    box-shadow: 0 1px 6px rgba(200,150,150,0.25);
}

/* ===== Loading退出按钮 ===== */
.sleep-loading-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: 100%;
}
.sleep-loading-btn {
    padding: 10px 28px;
    border-radius: 22px;
    font-family: var(--font-body, 'Noto Serif SC', serif);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-width: 200px;
}
.sleep-loading-btn.primary {
    background: rgba(200,160,160,0.2);
    border: 1px solid rgba(200,160,160,0.35);
    color: #D4B8B8;
}
.sleep-loading-btn.secondary {
    background: transparent;
    border: 1px solid rgba(255,255,245,0.12);
    color: #9A928A;
}
.sleep-loading-btn.danger {
    background: transparent;
    border: none;
    color: #6A625A;
    font-size: 12px;
    padding: 8px;
}
.sleep-loading-btn:hover { transform: translateY(-1px); }
.sleep-loading-btn:active { transform: scale(0.95); }
.sleep-loading-btn.primary:hover { background: rgba(200,160,160,0.28); }
.sleep-loading-btn.secondary:hover { border-color: rgba(255,255,245,0.25); }
.sleep-loading-btn.danger:hover { color: #8A8278; }
.sleep-loading-btn.danger.confirming {
    color: #D48888;
    font-size: 13px;
    animation: sleepCancelPulse 0.8s ease-in-out infinite;
}
@keyframes sleepCancelPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.sleep-loading-btn.subtle {
    background: transparent;
    border: none;
    color: rgba(230,220,210,0.25);
    font-size: 12px;
    padding: 8px 20px;
    min-width: auto;
}
.sleep-loading-btn.subtle:hover { color: rgba(230,220,210,0.55); }

/* ===== 播放界面退出按钮定位 ===== */
.sleep-ctrl-btn.exit-corner {
    position: absolute;
    top: 12px;
    right: 16px;
    opacity: 0.3;
}
.sleep-ctrl-btn.exit-corner:hover { opacity: 0.7; }

/* ===== 详情页音频播放器 ===== */
.sleep-detail-player {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(255,255,245,0.03);
    border-radius: 12px;
    border: 1px solid rgba(255,255,245,0.06);
}
.sleep-detail-time-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body, 'Noto Serif SC', serif);
    font-size: 11px;
    color: #6A625A;
    margin-bottom: 10px;
}
.sleep-detail-progress {
    position: relative;
    height: 4px;
    background: rgba(200,168,168,0.12);
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 12px;
    /* 增大点击区域 */
    padding: 8px 0;
    background-clip: content-box;
}
.sleep-detail-progress-fill {
    position: absolute;
    left: 0; top: 8px;
    height: 4px;
    background: var(--rose, #D4B8B8);
    border-radius: 2px;
    pointer-events: none;
    min-width: 4px;
}
.sleep-detail-progress-knob {
    position: absolute;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #D4B8B8;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    pointer-events: none;
    transform: translateX(-50%);
    transition: left 0.1s linear;
}
.sleep-detail-play-ctrl {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.sleep-detail-pause-btn,
.sleep-detail-stop-btn {
    padding: 5px 14px;
    border-radius: 14px;
    font-family: var(--font-body);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    border: 1px solid rgba(255,255,245,0.12);
    color: #9A928A;
}
.sleep-detail-pause-btn:hover,
.sleep-detail-stop-btn:hover {
    border-color: rgba(255,255,245,0.25);
    color: #D4B8B8;
}
.sleep-detail-pause-btn:active,
.sleep-detail-stop-btn:active {
    transform: scale(0.95);
}

/* ============================================================
   新增UI：失败弹窗 / 暂离卡片 / 3×3网格 / BGM栏 / 自定义音频
   ============================================================ */

/* ----- 失败弹窗 ----- */
.sleep-failure-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10,8,16,0.92);
    display: flex; align-items: center; justify-content: center;
    z-index: 2400;
    opacity: 0; transition: opacity 0.35s cubic-bezier(0.22,0.61,0.36,1);
}
.sleep-failure-overlay.open { opacity: 1; }
.sleep-failure-card {
    text-align: center; padding: 32px 24px; max-width: 300px;
    background: rgba(20,16,30,0.95); border-radius: 20px;
    border: 1px solid rgba(212,184,150,0.12);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    animation: sleepCardIn 0.5s cubic-bezier(0.22,0.61,0.36,1) both;
}
@keyframes sleepCardIn { from { opacity:0; transform: translateY(20px) scale(0.95); } to { opacity:1; transform: translateY(0) scale(1); } }
.sleep-failure-icon { width: 48px; height: 48px; margin: 0 auto 16px; color: #D4B8B8; }
.sleep-failure-title { font-size: 17px; color: #DFD8CD; margin-bottom: 8px; font-family: var(--font-body); }
.sleep-failure-msg { font-size: 13px; color: #9A928A; margin-bottom: 24px; line-height: 1.6; }
.sleep-failure-btns { display: flex; gap: 10px; justify-content: center; }
.sleep-failure-btn {
    padding: 10px 24px; border-radius: 22px; font-size: 13px; cursor: pointer;
    transition: all 0.2s ease; font-family: var(--font-body);
}
.sleep-failure-btn.primary { background: rgba(212,184,184,0.2); color: #D4B8B8; border: 1px solid rgba(212,184,184,0.3); }
.sleep-failure-btn.primary:hover { background: rgba(212,184,184,0.3); }
.sleep-failure-btn.secondary { color: #9A928A; border: 1px solid rgba(255,255,245,0.1); }
.sleep-failure-btn.secondary:hover { border-color: rgba(255,255,245,0.2); color: #BFB8AE; }
.sleep-failure-btn:active { transform: scale(0.95); }

/* ----- 暂离卡片 ----- */
.sleep-pending-card {
    position: relative;
    background: rgba(212,184,184,0.06); border: 1px solid rgba(212,184,150,0.15);
    border-radius: 16px; padding: 20px; text-align: center;
    animation: sleepCardIn 0.5s cubic-bezier(0.22,0.61,0.36,1) both;
}
/* 状态栏：预览图标 + 主标题文案 + 步骤小字 */
.sleep-pending-icon { margin-bottom: 12px; }
.sleep-pending-icon.generating { display: flex; gap: 6px; justify-content: center; }
.sleep-pending-dot { width: 6px; height: 6px; border-radius: 50%; background: #D4B8B8; animation: pendingDotPulse 1.4s ease-in-out infinite; }
.sleep-pending-dot:nth-child(2) { animation-delay: 0.2s; }
.sleep-pending-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes pendingDotPulse { 0%,80%,100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
.sleep-pending-icon.ready, .sleep-pending-icon.failed { width: 36px; height: 36px; margin: 0 auto; }
.sleep-pending-icon.ready svg, .sleep-pending-icon.failed svg { width: 100%; height: 100%; }
.sleep-pending-icon.ready { color: #C4A86A; }
.sleep-pending-icon.failed { color: #9A928A; }
.sleep-pending-title { font-size: 15px; color: #DFD8CD; margin-bottom: 6px; font-family: var(--font-body); }
.sleep-pending-sub { font-size: 12px; color: #9A928A; margin-bottom: 12px; }
.sleep-task-step { color: #C4A86A; margin-left: 4px; font-size: 12px; }
.sleep-pending-btn {
    display: inline-block; padding: 8px 20px; border-radius: 18px;
    background: rgba(212,184,184,0.15); color: #D4B8B8; font-size: 13px;
    cursor: pointer; transition: all 0.2s ease; font-family: var(--font-body);
}
.sleep-pending-btn:hover { background: rgba(212,184,184,0.25); }
.sleep-pending-btn:active { transform: scale(0.95); }
/* 失败卡上的两个出口并排（重新开始 / 知道了）；窄屏自动换行不挤字 */
.sleep-pending-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sleep-pending-btn.ghost {
    background: transparent; color: #9A928A;
    border: 1px solid rgba(212,184,184,0.28);
}
.sleep-pending-btn.ghost:hover { background: rgba(212,184,184,0.10); }

/* ----- 白噪音 3×3 滑动网格（JS 滑动翻页驱动 translateX，禁止叠用原生滚动） ----- */
.sleep-noise-grid-wrapper { position: relative; overflow: hidden; touch-action: pan-y; }
.sleep-noise-grid-pages {
    display: flex;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    transform: translateX(calc(var(--current-page, 0) * -100%));
    transition: none; /* 落位由 JS 驱动（_sleepAnimatePage），去掉 CSS transition 避免竞态 */
}
.sleep-noise-grid-pages::-webkit-scrollbar { display: none; }
.sleep-noise-grid-page {
    flex: 0 0 100%;
    display: grid; grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 2px;
}
.sleep-noise-dots {
    display: flex; justify-content: center; gap: 6px; margin-top: 12px;
}
.sleep-noise-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,245,0.2); cursor: pointer;
    transition: all 0.25s ease;
}
.sleep-noise-dot.active { background: #D4B8B8; width: 18px; border-radius: 3px; }
.sleep-noise-dot:active { transform: scale(1.3); }

/* ----- BGM 独立模块 ----- */
.sleep-bgm-bar {
    display: flex; align-items: center; gap: 12px; padding: 14px;
    background: rgba(255,255,245,0.03); border: 1px solid rgba(255,255,245,0.08);
    border-radius: 14px; cursor: pointer; transition: all 0.2s ease;
}
.sleep-bgm-bar:hover { background: rgba(255,255,245,0.05); border-color: rgba(255,255,245,0.15); }
.sleep-bgm-bar:active { transform: scale(0.98); }
.sleep-bgm-bar-icon { width: 28px; height: 28px; color: #9A928A; flex-shrink: 0; }
.sleep-bgm-bar-icon svg { width: 100%; height: 100%; }
.sleep-bgm-bar-info { flex: 1; }
.sleep-bgm-bar-label { font-size: 14px; color: #DFD8CD; }
.sleep-bgm-bar-detail { font-size: 11px; color: #6A625A; margin-top: 2px; }
.sleep-bgm-bar-arrow { width: 16px; height: 16px; color: #6A625A; }
.sleep-bgm-bar-arrow svg { width: 100%; height: 100%; }
.sleep-bgm-vol-row {
    display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 0 4px;
}
.sleep-bgm-vol-label { font-size: 12px; color: #9A928A; flex-shrink: 0; }

/* ----- 自定义音频新增UI ----- */
.sleep-add-noise-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: #0D0B14; z-index: 2300; display: flex; flex-direction: column;
    opacity: 0; transition: opacity 0.3s ease;
}
.sleep-add-noise-overlay.open { opacity: 1; }
.sleep-add-noise-inner { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.sleep-add-noise-header {
    display: flex; align-items: center; gap: 12px; padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,245,0.06);
}
.sleep-add-noise-back { width: 32px; height: 32px; color: #9A928A; cursor: pointer; display: flex; align-items: center; }
.sleep-add-noise-back svg { width: 20px; height: 20px; }
.sleep-add-noise-back:hover { color: #D4B8B8; }
.sleep-add-noise-title { font-size: 16px; color: #DFD8CD; font-family: var(--font-body); }
.sleep-add-noise-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px; scrollbar-width: none; -ms-overflow-style: none; }
.sleep-add-noise-body::-webkit-scrollbar { display: none; } /* 隐藏系统滚动条（新增伴眠音频界面） */
.sleep-add-section-label {
    font-size: 13px; color: #9A928A; margin-bottom: 12px; margin-top: 20px;
    font-family: var(--font-body);
}
.sleep-add-section-label:first-child { margin-top: 0; }
.sleep-add-icon-pages {
    display: flex; touch-action: pan-y;
    /* 禁止在轨道自己身上 overflow:hidden：轨道做 translateX 时会把自己裁到屏外，导致第二页全空白。
       裁剪交给父容器 .sleep-add-noise-body（overflow-x:hidden）即可，与白噪音网格的父级裁剪一致。 */
    transform: translateX(calc(var(--add-icon-page, 0) * -100%));
    transition: none; /* 落位由 JS 驱动（_sleepAnimatePage），去掉 CSS transition 避免竞态 */
}
.sleep-add-icon-page {
    flex: 0 0 100%;
    display: grid; grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr); gap: 10px;
}
.sleep-add-icon-card {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px; border-radius: 12px; cursor: pointer;
    border: 1px solid rgba(255,255,245,0.06); background: rgba(255,255,245,0.02);
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
                background 0.2s ease,
                border-color 0.2s ease;
}
.sleep-add-icon-card:hover { background: rgba(255,255,245,0.05); border-color: rgba(255,255,245,0.12); }
.sleep-add-icon-card:active { transform: scale(0.93); }
.sleep-add-icon-card.selected { background: rgba(212,184,184,0.1); border-color: rgba(212,184,184,0.3); }
.sleep-add-icon-svg { width: 28px; height: 28px; color: #9A928A; }
.sleep-add-icon-card.selected .sleep-add-icon-svg { color: #D4B8B8; }
.sleep-add-icon-name { font-size: 11px; color: #6A625A; }
.sleep-add-icon-card.selected .sleep-add-icon-name { color: #D4B8B8; }
.sleep-add-icon-dots {
    display: flex; justify-content: center; gap: 6px; margin-top: 12px;
}
.sleep-add-icon-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,245,0.2); cursor: pointer;
    transition: all 0.25s ease;
}
.sleep-add-icon-dot.active { background: #D4B8B8; width: 18px; border-radius: 3px; }
.sleep-add-icon-dot:active { transform: scale(1.3); }
.sleep-add-name-input {
    width: 100%; padding: 12px 14px; border-radius: 12px; font-size: 14px;
    background: rgba(255,255,245,0.04); border: 1px solid rgba(255,255,245,0.1);
    color: #DFD8CD; outline: none; font-family: var(--font-body);
    transition: border-color 0.2s ease; box-sizing: border-box;
}
.sleep-add-name-input:focus { border-color: rgba(212,184,184,0.4); }
.sleep-add-name-input::placeholder { color: #6A625A; }
.sleep-add-upload-zone {
    border: 1px dashed rgba(255,255,245,0.15); border-radius: 14px;
    padding: 28px; text-align: center; cursor: pointer;
    transition: all 0.2s ease; background: rgba(255,255,245,0.015);
}
.sleep-add-upload-zone:hover, .sleep-add-upload-zone.drag-over { border-color: rgba(212,184,184,0.35); background: rgba(212,184,184,0.04); }
.sleep-add-upload-zone svg { width: 32px; height: 32px; color: #6A625A; margin-bottom: 8px; }
.sleep-add-upload-text { font-size: 13px; color: #9A928A; }
.sleep-add-upload-hint { font-size: 11px; color: #6A625A; margin-top: 4px; }
/* 选择文件后，文件名/大小/状态/试听/重传 都放进上传框里（不再单独一行） */
.sleep-add-upload-file { margin-top: 6px; }
.sleep-add-upload-filename { font-size: 13px; color: #DFD8CD; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sleep-add-upload-size { font-size: 11px; color: #6A625A; margin-top: 2px; }
.sleep-add-upload-status { font-size: 12px; color: #9A928A; margin-top: 8px; }
.sleep-add-upload-actions { display: flex; justify-content: center; gap: 18px; margin-top: 10px; }
.sleep-add-file-play { color: #D4B8B8; cursor: pointer; font-size: 13px; }
.sleep-add-file-play:hover { text-decoration: underline; }
.sleep-add-file-play.busy { color: #9A928A; pointer-events: none; cursor: default; }
.sleep-upload-spin {
    display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px;
    border: 1.5px solid rgba(212,184,184,0.4); border-top-color: #D4B8B8; border-radius: 50%;
    animation: sleepUploadSpin 0.7s linear infinite;
}
@keyframes sleepUploadSpin { to { transform: rotate(360deg); } }
.sleep-add-noise-footer {
    display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid rgba(255,255,245,0.06);
}
.sleep-add-noise-btn {
    flex: 1; padding: 12px; border-radius: 22px; text-align: center; font-size: 14px;
    cursor: pointer; font-family: var(--font-body); transition: all 0.2s ease;
}
.sleep-add-noise-btn.cancel { color: #9A928A; border: 1px solid rgba(255,255,245,0.1); }
.sleep-add-noise-btn.cancel:hover { border-color: rgba(255,255,245,0.2); color: #BFB8AE; }
.sleep-add-noise-btn.save { background: rgba(212,184,184,0.15); color: #D4B8B8; border: 1px solid rgba(212,184,184,0.25); }
.sleep-add-noise-btn.save:hover { background: rgba(212,184,184,0.25); }
.sleep-add-noise-btn:active { transform: scale(0.96); }

/* ===== 窄屏 ≤370px ===== */
@media (max-width: 370px) {
    .sleep-noise-grid-page { gap: 6px; }
    .sleep-add-icon-page { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; }
    .sleep-failure-card { max-width: 260px; padding: 24px 18px; }
}

/* ===== 哄睡任务横幅（聊天界面头部下方悬浮，不撑满屏幕、不可拖动） ===== */
.sleep-task-banner {
    position: fixed;
    top: calc(var(--header-height) + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 448px;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 18px;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm), var(--shadow-xs);
    cursor: pointer;
    font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 13px;
    color: var(--ink, #4A4440);
    animation: sleepBannerIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    -webkit-tap-highlight-color: transparent;
}
@keyframes sleepBannerIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.sleep-banner-moon {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(180,150,200,0.16), rgba(120,140,180,0.16));
    color: #8B7BA8; flex-shrink: 0;
}
.sleep-banner-moon svg { width: 17px; height: 17px; }
/* 失败态：月色图标换成暖陶色感叹，跟正常状态一眼分得开（不用系统图标） */
.sleep-banner-moon.warn {
    background: linear-gradient(135deg, rgba(201,168,168,0.20), rgba(180,110,110,0.14));
    color: #9A6A6A;
}
.sleep-banner-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sleep-banner-arrow { color: var(--rose, #C9A8A8); flex-shrink: 0; display: flex; align-items: center; }
.sleep-banner-arrow svg { width: 14px; height: 14px; }
/* 失败横幅上的两个出口（再试一次 / 知道了）：不撑高、不换行，360px 也放得下 */
.sleep-banner-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sleep-banner-act {
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-secondary); font-family: var(--font-body), 'Noto Serif SC', serif;
    font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 999px; cursor: pointer;
    -webkit-appearance: none; appearance: none; white-space: nowrap;
    transition: transform .16s ease, background .2s ease, border-color .2s ease;
}
.sleep-banner-act:active { transform: scale(.95); }
.sleep-banner-act.retry { border-color: rgba(196,168,106,.6); background: rgba(196,168,106,.14); color: #96762F; }
.sleep-banner-act.dismiss { color: var(--text-muted); }
@media (max-width: 380px) {
    .sleep-task-banner { font-size: 12.5px; gap: 8px; padding: 8px 11px; }
    .sleep-banner-moon { width: 26px; height: 26px; }
    .sleep-banner-act { font-size: 11.5px; padding: 6px 8px; }
}
@media (min-width: 768px) {
    .sleep-task-banner { top: calc(var(--header-height) + 30px); }
}

/* ===== 晚安日记：打开/切换柔和动画（一次性 class，JS 控制） ===== */
.sleep-history-in { animation: sleepHistoryIn 0.35s ease both; }
@keyframes sleepHistoryIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.sleep-stats-in { animation: sleepStatsIn 0.3s ease both; }
@keyframes sleepStatsIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== 晚安日记：记录按日期分组归纳 ===== */
.sleep-rec-group-header {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 18px 2px 8px;
}
.sleep-rec-group-header:first-child { margin-top: 4px; }
.sleep-rec-group-title { font-size: 13px; color: #D4B8B8; font-family: var(--font-body), 'Noto Serif SC', serif; letter-spacing: 0.04em; }
.sleep-rec-group-date { font-size: 11px; color: #6A625A; font-family: var(--font-display), 'Playfair Display', serif; font-style: italic; }

/* 记录按月份展开/收起 */
.sleep-rec-month { margin-bottom: 4px; }
.sleep-rec-month-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 4px; cursor: pointer;
    border-bottom: 1px solid rgba(255,255,245,0.05);
    -webkit-tap-highlight-color: transparent;
}
.sleep-rec-month-header:active { opacity: 0.7; }
.sleep-rec-month-title { font-size: 14px; color: #DFD8CD; font-family: var(--font-body), 'Noto Serif SC', serif; }
.sleep-rec-month-count { font-size: 11px; color: #6A625A; }
.sleep-rec-month-arrow { margin-left: auto; width: 16px; height: 16px; color: #6A625A; transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
.sleep-rec-month-arrow svg { width: 100%; height: 100%; }
.sleep-rec-month.collapsed .sleep-rec-month-arrow { transform: rotate(-90deg); }
.sleep-rec-month-body { overflow: hidden; }
.sleep-rec-month.collapsed .sleep-rec-month-body { display: none; }
.sleep-rec-period {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; padding: 3px 10px; border-radius: 10px;
    font-family: var(--font-body), 'Noto Serif SC', serif;
}
.sleep-rec-period svg { width: 12px; height: 12px; }
.sleep-rec-period.night { background: rgba(180,150,200,0.14); color: #B49AC8; }
.sleep-rec-period.nap { background: rgba(230,180,120,0.16); color: #C89A58; }
.sleep-rec-period.dusk { background: rgba(160,180,200,0.14); color: #8FA8C0; }
.sleep-rec-play {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 8px; font-size: 11px; color: #9A928A; cursor: pointer;
    font-family: var(--font-body), 'Noto Serif SC', serif;
}
.sleep-rec-play svg { width: 12px; height: 12px; }
.sleep-rec-play:hover { color: #D4B8B8; }

/* ===== 开始按钮：双重确认状态（呼吸感提示） ===== */
.sleep-start-btn.confirming {
    background: rgba(200,160,160,0.32);
    border-color: rgba(212,184,184,0.5);
    animation: sleepConfirmPulse 1.2s ease-in-out infinite;
}
@keyframes sleepConfirmPulse {
    0%, 100% { box-shadow: 0 0 16px rgba(200,160,160,0.15), inset 0 1px 0 rgba(255,255,255,0.06); }
    50% { box-shadow: 0 0 30px rgba(200,160,160,0.35), inset 0 1px 0 rgba(255,255,255,0.08); }
}