/* =====================================================================
 * 哄睡电台（Sleep Radio）· 独立样式
 * ---------------------------------------------------------------------
 * 风格：哥特式骨架（尖拱 / 描金细线 / 衬线字 / 庄严缓慢的光影过渡）
 *       × 温柔宁静的睡眠配色（月夜蓝紫 / 薰衣草灰 / 柔金 / 柔雾白）。
 *       遵循 tools/哥特式风.md：无大圆角、无亮白底、无轻浮弹跳动效。
 * 结构：overlay 挂在 #app 内（absolute + inset:0），随小手机屏幕圆角裁切。
 * 兼容：-webkit- 前缀齐备；backdrop-filter 有 @supports 兜底；
 *       safe-area 由 #app 容器内边距承担，本层再补 env() 兜底。
 * 命名：统一 slr- 前缀，独立文件，不与其它功能共用。
 * ===================================================================== */

.slr-overlay {
    /* —— 温柔月夜配色令牌 —— */
    --slr-night: #16142a;          /* 最深夜幕 */
    --slr-night-soft: #201d35;     /* 次级夜幕（面板底） */
    --slr-veil: #2b2745;           /* 纱雾紫（卡片底） */
    --slr-ink: #ded7ec;            /* 月光薰衣草（正文） */
    --slr-ink-dim: rgba(222, 215, 236, 0.55);
    --slr-gold: #cbb994;           /* 柔金（描线/强调，替代哥特亮金的睡前版） */
    --slr-gold-dim: rgba(203, 185, 148, 0.42);
    --slr-gold-faint: rgba(203, 185, 148, 0.18);
    --slr-water: #8fa7c8;          /* 静水蓝 */
    --slr-water-dim: rgba(143, 167, 200, 0.35);
    --slr-serif: Georgia, "Times New Roman", "FangZheng KaiTi", "Kaiti SC", "STKaiti", KaiTi, "PingFang SC", serif;
    --slr-slow: 420ms cubic-bezier(0.33, 0.02, 0.2, 1);

    position: absolute;
    inset: 0;
    z-index: 100160; /* 高于一起听歌 lt-overlay(100150) */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: inherit;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 360ms ease, visibility 0s linear 360ms;
    color: var(--slr-ink);
    font-family: var(--slr-serif);
    background:
        radial-gradient(120% 66% at 50% 118%, rgba(143, 167, 200, 0.22) 0%, rgba(143, 167, 200, 0) 58%),
        radial-gradient(90% 40% at 50% -6%, rgba(72, 62, 110, 0.55) 0%, rgba(72, 62, 110, 0) 62%),
        linear-gradient(180deg, #17152b 0%, #1b1830 46%, #171b2e 100%);
    -webkit-tap-highlight-color: transparent;
}

.slr-overlay.slr-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 360ms ease, visibility 0s;
}

.slr-overlay,
.slr-overlay * {
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.slr-overlay *::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none; }

/* hidden 属性强约束（部分老 WebView 对自定义 display 元素的 hidden 失效） */
.slr-overlay [hidden] { display: none !important; }

.slr-overlay button {
    font-family: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

/* ============================ 上部区域 ============================ */

.slr-top {
    flex: 0 0 auto;
    position: relative;
    z-index: 5;
    padding-top: max(6px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
    background: linear-gradient(180deg, rgba(22, 20, 42, 0.92) 0%, rgba(22, 20, 42, 0.55) 78%, rgba(22, 20, 42, 0) 100%);
}

.slr-topbar {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    padding: 8px 10px 2px;
}

.slr-overlay .slr-topbar-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--slr-gold);
    opacity: 0.85;
    transition: opacity var(--slr-slow), text-shadow var(--slr-slow);
}
.slr-topbar-btn svg { width: 22px; height: 22px; }
.slr-topbar-btn:active { opacity: 1; }
#slr-menu-toggle svg { transition: transform var(--slr-slow); }
.slr-overlay.slr-menu-collapsed #slr-menu-toggle svg { transform: rotate(180deg); }

.slr-title-wrap { text-align: center; user-select: none; -webkit-user-select: none; }
.slr-title {
    font-size: 17px;
    letter-spacing: 6px;
    text-indent: 6px;
    color: var(--slr-gold);
    text-shadow: 0 0 18px rgba(203, 185, 148, 0.35);
    font-weight: 600;
}
.slr-title-sub {
    margin-top: 2px;
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--slr-ink-dim);
    text-transform: uppercase;
}

.slr-hosts-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 16px 2px;
    min-height: 20px;
}
.slr-hosts-deco { color: var(--slr-gold-dim); font-size: 9px; }
.slr-hosts-text {
    font-size: 12px;
    color: var(--slr-ink-dim);
    letter-spacing: 1px;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slr-hosts-text.slr-hosts-on { color: var(--slr-gold); }

/* —— 可收起功能栏（尖拱窗格） —— */
.slr-menu {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 8px 14px 4px;
    max-height: 96px;
    overflow: hidden;
    opacity: 1;
    transition: max-height var(--slr-slow), opacity var(--slr-slow), padding var(--slr-slow);
}
.slr-overlay.slr-menu-collapsed .slr-menu {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

.slr-overlay .slr-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 9px 2px 7px;
    /* 尖拱：哥特式窗形 */
    border-radius: 50% 50% 3px 3px / 66% 66% 3px 3px;
    border: 1px solid var(--slr-gold-faint);
    background: linear-gradient(180deg, rgba(43, 39, 69, 0.72) 0%, rgba(32, 29, 53, 0.72) 100%);
    box-shadow: 0 4px 16px rgba(8, 6, 18, 0.5), inset 0 1px 0 rgba(222, 215, 236, 0.06);
    transition: border-color var(--slr-slow), box-shadow var(--slr-slow), transform 240ms ease;
}
.slr-menu-item:active {
    border-color: var(--slr-gold-dim);
    box-shadow: 0 6px 22px rgba(203, 185, 148, 0.18);
    transform: translateY(1px);
}
.slr-menu-item.slr-menu-item--on {
    border-color: var(--slr-gold-dim);
    box-shadow: 0 0 18px rgba(203, 185, 148, 0.22), inset 0 0 12px rgba(203, 185, 148, 0.08);
}
.slr-menu-icon { width: 22px; height: 22px; color: var(--slr-gold); opacity: 0.9; }
.slr-menu-icon svg { width: 100%; height: 100%; }
.slr-menu-label { font-size: 10.5px; letter-spacing: 1px; color: var(--slr-ink); opacity: 0.85; }

/* 描金分隔纹（tracery divider） */
.slr-top-tracery {
    height: 10px;
    margin: 2px 22px 0;
    background:
        radial-gradient(6px 6px at 50% 4px, var(--slr-gold-dim) 0 1.6px, transparent 2.4px),
        linear-gradient(90deg, transparent 0%, var(--slr-gold-dim) 18%, var(--slr-gold-dim) 82%, transparent 100%) 50% 4px / 100% 1px no-repeat;
}

/* ============================ 中间区域 ============================ */

.slr-stage {
    flex: 1 1 auto;
    position: relative;
    min-height: 0;
    overflow: hidden;
    touch-action: pan-y;
}

/* —— 可选舞台动态：非当前效果 display:none，不占用合成与绘制资源 —— */
.slr-effect-layer,
.slr-effect {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.slr-effect-layer {
    overflow: hidden;
    contain: strict;
}
.slr-effect { display: none; }
/* data-effect 为空格分隔的叠加列表（如 "stars rain"），~= 逐项点亮对应效果层 */
.slr-effect-layer[data-effect~="ripple"] .slr-effect--ripple,
.slr-effect-layer[data-effect~="rain"] .slr-effect--rain,
.slr-effect-layer[data-effect~="snow"] .slr-effect--snow,
.slr-effect-layer[data-effect~="stars"] .slr-effect--stars,
.slr-effect-layer[data-effect~="glow"] .slr-effect--glow { display: block; }
.slr-effect-layer[data-effect="off"] { display: none; }

/* 拟态水波：椭圆透视、明暗双沿和中心凹光，比规则同心圆更接近真实水面。 */
.slr-water-glow,
.slr-water-heart,
.slr-water-ring {
    position: absolute;
    left: 50%;
    top: 47%;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.slr-water-glow {
    width: 190px;
    height: 92px;
    opacity: .68;
    background: radial-gradient(ellipse at 46% 42%, rgba(222, 215, 236, .2) 0%, rgba(143, 167, 200, .11) 30%, rgba(22, 20, 42, 0) 72%);
    -webkit-animation: slr-water-breathe 8s ease-in-out infinite;
    animation: slr-water-breathe 8s ease-in-out infinite;
}
.slr-water-heart {
    width: 90px;
    height: 42px;
    border: 1px solid rgba(180, 197, 221, .2);
    background: radial-gradient(ellipse at 45% 36%, rgba(232, 227, 244, .26) 0%, rgba(143, 167, 200, .1) 40%, rgba(22, 20, 42, .02) 72%);
    box-shadow: inset 0 8px 16px rgba(8, 6, 18, .22), 0 -1px 10px rgba(180, 197, 221, .1);
    -webkit-animation: slr-water-heart 6.5s ease-in-out infinite;
    animation: slr-water-heart 6.5s ease-in-out infinite;
}
.slr-water-heart::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 44%;
    width: 8px;
    height: 4px;
    border-radius: 50%;
    background: rgba(232, 227, 244, .28);
    box-shadow: 0 0 12px rgba(180, 197, 221, .28);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.slr-water-ring {
    width: 74px;
    height: 34px;
    opacity: 0;
    border: 1px solid rgba(143, 167, 200, .3);
    border-bottom-color: rgba(8, 6, 18, .12);
    box-shadow: 0 -1px 8px rgba(180, 197, 221, .11), inset 0 1px 7px rgba(143, 167, 200, .08);
    -webkit-animation: slr-water-ring 12s cubic-bezier(.18, .45, .24, 1) infinite;
    animation: slr-water-ring 12s cubic-bezier(.18, .45, .24, 1) infinite;
    will-change: transform, opacity;
}
.slr-water-ring:nth-of-type(2) { -webkit-animation-delay: -9.6s; animation-delay: -9.6s; }
.slr-water-ring:nth-of-type(3) { -webkit-animation-delay: -7.2s; animation-delay: -7.2s; }
.slr-water-ring:nth-of-type(4) { -webkit-animation-delay: -4.8s; animation-delay: -4.8s; }
.slr-water-ring:nth-of-type(5) { -webkit-animation-delay: -2.4s; animation-delay: -2.4s; }
@-webkit-keyframes slr-water-ring {
    0% { -webkit-transform: translate(-50%, -50%) scale(.28, .22) rotate(-1deg); opacity: 0; }
    8% { opacity: .76; }
    48% { opacity: .34; }
    100% { -webkit-transform: translate(-50%, -50%) scale(7.1, 6.2) rotate(1.2deg); opacity: 0; }
}
@keyframes slr-water-ring {
    0% { transform: translate(-50%, -50%) scale(.28, .22) rotate(-1deg); opacity: 0; }
    8% { opacity: .76; }
    48% { opacity: .34; }
    100% { transform: translate(-50%, -50%) scale(7.1, 6.2) rotate(1.2deg); opacity: 0; }
}
@-webkit-keyframes slr-water-breathe { 50% { opacity: .9; -webkit-transform: translate(-50%, -50%) scale(1.08, 1.04); } }
@keyframes slr-water-breathe { 50% { opacity: .9; transform: translate(-50%, -50%) scale(1.08, 1.04); } }
@-webkit-keyframes slr-water-heart { 50% { -webkit-transform: translate(-50%, -50%) scale(1.05, .96); opacity: .78; } }
@keyframes slr-water-heart { 50% { transform: translate(-50%, -50%) scale(1.05, .96); opacity: .78; } }

/* 小雨：长周期缓落 + 每轮短暂停歇，减少持续扫屏带来的紧迫感。 */
.slr-raindrop {
    position: absolute;
    left: var(--x, 50%);
    top: -28px;
    width: 1px;
    height: var(--l, 14px);
    border-radius: 50%;
    opacity: 0;
    background: linear-gradient(180deg, rgba(180, 197, 221, 0), rgba(180, 197, 221, .62));
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
    -webkit-animation: slr-rain-fall var(--t, 7.2s) linear var(--d, 0s) infinite;
    animation: slr-rain-fall var(--t, 7.2s) linear var(--d, 0s) infinite;
    will-change: transform, opacity;
}
@-webkit-keyframes slr-rain-fall {
    0% { -webkit-transform: translate3d(8px, -20px, 0) rotate(4deg); opacity: 0; }
    9% { opacity: .46; }
    72% { opacity: .3; }
    84% { -webkit-transform: translate3d(-20px, 110vh, 0) rotate(4deg); opacity: 0; }
    100% { -webkit-transform: translate3d(-20px, 110vh, 0) rotate(4deg); opacity: 0; }
}
@keyframes slr-rain-fall {
    0% { transform: translate3d(8px, -20px, 0) rotate(4deg); opacity: 0; }
    9% { opacity: .46; }
    72% { opacity: .3; }
    84% { transform: translate3d(-20px, 110vh, 0) rotate(4deg); opacity: 0; }
    100% { transform: translate3d(-20px, 110vh, 0) rotate(4deg); opacity: 0; }
}
.slr-rain-splash {
    position: absolute;
    left: 24%;
    bottom: 17%;
    width: 22px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid rgba(143, 167, 200, .28);
    opacity: 0;
    -webkit-animation: slr-rain-splash 8.6s ease-out -1s infinite;
    animation: slr-rain-splash 8.6s ease-out -1s infinite;
}
.slr-rain-splash:nth-last-child(2) { left: 57%; bottom: 24%; -webkit-animation-delay: -5.6s; animation-delay: -5.6s; }
.slr-rain-splash:nth-last-child(1) { left: 82%; bottom: 12%; -webkit-animation-delay: -3.4s; animation-delay: -3.4s; }
@-webkit-keyframes slr-rain-splash { 0%, 76% { -webkit-transform: scale(.25); opacity: 0; } 82% { opacity: .48; } 100% { -webkit-transform: scale(2.3, 1.5); opacity: 0; } }
@keyframes slr-rain-splash { 0%, 76% { transform: scale(.25); opacity: 0; } 82% { opacity: .48; } 100% { transform: scale(2.3, 1.5); opacity: 0; } }

/* 雪花：低数量、长周期、左右轻摆，控制 DOM 与合成层数量。 */
.slr-snowflake {
    position: absolute;
    left: var(--x, 50%);
    top: -28px;
    color: rgba(222, 215, 236, .68);
    font-family: Georgia, serif;
    font-size: 15px;
    line-height: 1;
    text-shadow: 0 0 9px rgba(180, 197, 221, .25);
    opacity: 0;
    -webkit-animation: slr-snow-fall var(--t, 17s) linear var(--d, 0s) infinite;
    animation: slr-snow-fall var(--t, 17s) linear var(--d, 0s) infinite;
    will-change: transform, opacity;
}
@-webkit-keyframes slr-snow-fall {
    0% { -webkit-transform: translate3d(-8px, -24px, 0) rotate(0) scale(var(--s, .8)); opacity: 0; }
    10% { opacity: .68; }
    48% { -webkit-transform: translate3d(20px, 52vh, 0) rotate(145deg) scale(var(--s, .8)); }
    90% { opacity: .48; }
    100% { -webkit-transform: translate3d(-16px, 108vh, 0) rotate(310deg) scale(var(--s, .8)); opacity: 0; }
}
@keyframes slr-snow-fall {
    0% { transform: translate3d(-8px, -24px, 0) rotate(0) scale(var(--s, .8)); opacity: 0; }
    10% { opacity: .68; }
    48% { transform: translate3d(20px, 52vh, 0) rotate(145deg) scale(var(--s, .8)); }
    90% { opacity: .48; }
    100% { transform: translate3d(-16px, 108vh, 0) rotate(310deg) scale(var(--s, .8)); opacity: 0; }
}

/* 星空：四层渐变一次绘制 41 颗星，只让少量星群以不同长周期轻闪。 */
.slr-star-mist,
.slr-star-field {
    position: absolute;
    inset: 0;
}
.slr-star-mist {
    opacity: .2;
    background:
        radial-gradient(ellipse at 28% 48%, rgba(143, 167, 200, .1) 0%, rgba(143, 167, 200, .035) 34%, transparent 66%),
        radial-gradient(ellipse at 72% 38%, rgba(134, 118, 177, .09) 0%, rgba(134, 118, 177, .025) 32%, transparent 63%);
    -webkit-filter: blur(13px);
    filter: blur(13px);
    -webkit-animation: slr-star-mist 26s ease-in-out -8s infinite alternate;
    animation: slr-star-mist 26s ease-in-out -8s infinite alternate;
}
.slr-star-field { background-repeat: no-repeat; }
.slr-star-field--still {
    opacity: .5;
    background:
        radial-gradient(circle at 4% 9%, rgba(222,215,236,.75) 0, rgba(222,215,236,.75) .7px, transparent 1.4px),
        radial-gradient(circle at 11% 22%, rgba(143,167,200,.8) 0, rgba(143,167,200,.8) .8px, transparent 1.5px),
        radial-gradient(circle at 18% 45%, rgba(203,185,148,.72) 0, rgba(203,185,148,.72) .7px, transparent 1.4px),
        radial-gradient(circle at 26% 12%, rgba(222,215,236,.72) 0, rgba(222,215,236,.72) .9px, transparent 1.6px),
        radial-gradient(circle at 33% 71%, rgba(143,167,200,.66) 0, rgba(143,167,200,.66) .7px, transparent 1.4px),
        radial-gradient(circle at 40% 31%, rgba(222,215,236,.8) 0, rgba(222,215,236,.8) .75px, transparent 1.5px),
        radial-gradient(circle at 48% 55%, rgba(203,185,148,.72) 0, rgba(203,185,148,.72) .8px, transparent 1.5px),
        radial-gradient(circle at 56% 16%, rgba(143,167,200,.76) 0, rgba(143,167,200,.76) .75px, transparent 1.5px),
        radial-gradient(circle at 64% 40%, rgba(222,215,236,.72) 0, rgba(222,215,236,.72) .7px, transparent 1.4px),
        radial-gradient(circle at 72% 8%, rgba(203,185,148,.8) 0, rgba(203,185,148,.8) .85px, transparent 1.6px),
        radial-gradient(circle at 79% 63%, rgba(143,167,200,.72) 0, rgba(143,167,200,.72) .7px, transparent 1.4px),
        radial-gradient(circle at 86% 29%, rgba(222,215,236,.76) 0, rgba(222,215,236,.76) .8px, transparent 1.5px),
        radial-gradient(circle at 94% 49%, rgba(203,185,148,.7) 0, rgba(203,185,148,.7) .7px, transparent 1.4px),
        radial-gradient(circle at 7% 78%, rgba(222,215,236,.68) 0, rgba(222,215,236,.68) .75px, transparent 1.5px),
        radial-gradient(circle at 51% 85%, rgba(143,167,200,.7) 0, rgba(143,167,200,.7) .8px, transparent 1.5px),
        radial-gradient(circle at 91% 83%, rgba(222,215,236,.7) 0, rgba(222,215,236,.7) .7px, transparent 1.4px);
}
.slr-star-field--twinkle-a {
    opacity: .38;
    background:
        radial-gradient(circle at 8% 35%, rgba(222,215,236,.9) 0, rgba(222,215,236,.9) 1px, transparent 1.8px),
        radial-gradient(circle at 21% 62%, rgba(143,167,200,.9) 0, rgba(143,167,200,.9) .9px, transparent 1.7px),
        radial-gradient(circle at 30% 24%, rgba(203,185,148,.9) 0, rgba(203,185,148,.9) 1px, transparent 1.9px),
        radial-gradient(circle at 43% 76%, rgba(222,215,236,.86) 0, rgba(222,215,236,.86) .9px, transparent 1.7px),
        radial-gradient(circle at 59% 48%, rgba(143,167,200,.92) 0, rgba(143,167,200,.92) 1px, transparent 1.9px),
        radial-gradient(circle at 69% 22%, rgba(222,215,236,.88) 0, rgba(222,215,236,.88) .9px, transparent 1.8px),
        radial-gradient(circle at 82% 72%, rgba(203,185,148,.9) 0, rgba(203,185,148,.9) 1px, transparent 1.9px),
        radial-gradient(circle at 95% 17%, rgba(143,167,200,.88) 0, rgba(143,167,200,.88) .9px, transparent 1.7px),
        radial-gradient(circle at 14% 91%, rgba(222,215,236,.86) 0, rgba(222,215,236,.86) .85px, transparent 1.7px),
        radial-gradient(circle at 74% 91%, rgba(222,215,236,.88) 0, rgba(222,215,236,.88) .9px, transparent 1.8px);
    -webkit-animation: slr-stars-twinkle-a 11.8s ease-in-out -3.1s infinite;
    animation: slr-stars-twinkle-a 11.8s ease-in-out -3.1s infinite;
}
.slr-star-field--twinkle-b {
    opacity: .32;
    background:
        radial-gradient(circle at 3% 57%, rgba(143,167,200,.9) 0, rgba(143,167,200,.9) .9px, transparent 1.7px),
        radial-gradient(circle at 16% 7%, rgba(203,185,148,.92) 0, rgba(203,185,148,.92) .9px, transparent 1.8px),
        radial-gradient(circle at 37% 43%, rgba(222,215,236,.9) 0, rgba(222,215,236,.9) 1px, transparent 1.8px),
        radial-gradient(circle at 46% 13%, rgba(143,167,200,.92) 0, rgba(143,167,200,.92) .85px, transparent 1.7px),
        radial-gradient(circle at 57% 67%, rgba(203,185,148,.88) 0, rgba(203,185,148,.88) 1px, transparent 1.9px),
        radial-gradient(circle at 67% 83%, rgba(222,215,236,.9) 0, rgba(222,215,236,.9) .9px, transparent 1.7px),
        radial-gradient(circle at 78% 35%, rgba(143,167,200,.9) 0, rgba(143,167,200,.9) 1px, transparent 1.9px),
        radial-gradient(circle at 89% 58%, rgba(222,215,236,.92) 0, rgba(222,215,236,.92) .9px, transparent 1.8px),
        radial-gradient(circle at 97% 93%, rgba(203,185,148,.86) 0, rgba(203,185,148,.86) .85px, transparent 1.7px);
    -webkit-animation: slr-stars-twinkle-b 15.4s ease-in-out -9.2s infinite;
    animation: slr-stars-twinkle-b 15.4s ease-in-out -9.2s infinite;
}
.slr-star-field--glints {
    opacity: .26;
    background:
        radial-gradient(circle at 13% 49%, rgba(235,232,244,.95) 0, rgba(203,185,148,.85) 1.1px, transparent 2.4px),
        radial-gradient(circle at 28% 84%, rgba(235,232,244,.95) 0, rgba(143,167,200,.85) 1.2px, transparent 2.5px),
        radial-gradient(circle at 53% 27%, rgba(235,232,244,.95) 0, rgba(203,185,148,.82) 1.2px, transparent 2.6px),
        radial-gradient(circle at 70% 57%, rgba(235,232,244,.95) 0, rgba(143,167,200,.85) 1.1px, transparent 2.4px),
        radial-gradient(circle at 85% 11%, rgba(235,232,244,.95) 0, rgba(203,185,148,.85) 1.2px, transparent 2.6px),
        radial-gradient(circle at 93% 76%, rgba(235,232,244,.95) 0, rgba(143,167,200,.82) 1.1px, transparent 2.5px);
    -webkit-filter: drop-shadow(0 0 3px rgba(180,197,221,.28));
    filter: drop-shadow(0 0 3px rgba(180,197,221,.28));
    -webkit-animation: slr-stars-glint 18.6s ease-in-out -12s infinite;
    animation: slr-stars-glint 18.6s ease-in-out -12s infinite;
}
@-webkit-keyframes slr-star-mist { to { -webkit-transform: translate3d(2.5%, 1%, 0); opacity: .27; } }
@keyframes slr-star-mist { to { transform: translate3d(2.5%, 1%, 0); opacity: .27; } }
@-webkit-keyframes slr-stars-twinkle-a { 0%,100% { opacity: .3; } 20% { opacity: .38; } 25% { opacity: .7; } 31% { opacity: .34; } 75% { opacity: .42; } 81% { opacity: .6; } 87% { opacity: .33; } }
@keyframes slr-stars-twinkle-a { 0%,100% { opacity: .3; } 20% { opacity: .38; } 25% { opacity: .7; } 31% { opacity: .34; } 75% { opacity: .42; } 81% { opacity: .6; } 87% { opacity: .33; } }
@-webkit-keyframes slr-stars-twinkle-b { 0%,100% { opacity: .28; } 38% { opacity: .32; } 45% { opacity: .64; } 52% { opacity: .3; } 82% { opacity: .4; } }
@keyframes slr-stars-twinkle-b { 0%,100% { opacity: .28; } 38% { opacity: .32; } 45% { opacity: .64; } 52% { opacity: .3; } 82% { opacity: .4; } }
@-webkit-keyframes slr-stars-glint { 0%,100% { opacity: .2; } 43% { opacity: .26; } 48% { opacity: .66; } 54% { opacity: .23; } }
@keyframes slr-stars-glint { 0%,100% { opacity: .2; } 43% { opacity: .26; } 48% { opacity: .66; } 54% { opacity: .23; } }

/* 流光：夜行车窗外横向掠过的暖冷光晕，叠一层低亮度极光薄纱。 */
.slr-light-trail {
    position: absolute;
    left: -65%;
    top: 15%;
    width: 56%;
    height: 80px;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(ellipse, rgba(203, 185, 148, .32) 0%, rgba(203, 185, 148, .1) 32%, rgba(203, 185, 148, 0) 72%);
    -webkit-filter: blur(9px);
    filter: blur(9px);
    -webkit-transform: rotate(-9deg);
    transform: rotate(-9deg);
    -webkit-animation: slr-light-pass 13s cubic-bezier(.3, .04, .58, .96) -2s infinite;
    animation: slr-light-pass 13s cubic-bezier(.3, .04, .58, .96) -2s infinite;
    will-change: transform, opacity;
}
.slr-light-trail:nth-child(2) { top: 38%; height: 110px; background: radial-gradient(ellipse, rgba(143, 167, 200, .34), rgba(143, 167, 200, .08) 38%, transparent 72%); -webkit-animation-delay: -8.5s; animation-delay: -8.5s; }
.slr-light-trail:nth-child(3) { top: 61%; height: 62px; width: 44%; -webkit-animation-delay: -5.1s; animation-delay: -5.1s; -webkit-animation-duration: 10s; animation-duration: 10s; }
.slr-light-trail:nth-child(4) { top: 76%; height: 95px; background: radial-gradient(ellipse, rgba(134, 118, 177, .3), rgba(134, 118, 177, .08) 38%, transparent 72%); -webkit-animation-delay: -11s; animation-delay: -11s; -webkit-animation-duration: 16s; animation-duration: 16s; }
.slr-aurora-ribbon {
    position: absolute;
    left: -16%;
    top: 7%;
    width: 132%;
    height: 52%;
    border-radius: 46% 54% 58% 42% / 38% 44% 56% 62%;
    opacity: .2;
    background:
        radial-gradient(ellipse at 20% 42%, rgba(103, 174, 164, .18) 0%, rgba(103, 174, 164, .07) 30%, transparent 60%),
        radial-gradient(ellipse at 56% 30%, rgba(134, 118, 177, .18) 0%, rgba(134, 118, 177, .06) 34%, transparent 63%),
        radial-gradient(ellipse at 84% 50%, rgba(143, 167, 200, .14) 0%, rgba(143, 167, 200, .04) 32%, transparent 62%);
    -webkit-filter: blur(15px);
    filter: blur(15px);
    -webkit-transform: translate3d(-2%, 0, 0) rotate(-4deg) skewX(-5deg) scaleY(.92);
    transform: translate3d(-2%, 0, 0) rotate(-4deg) skewX(-5deg) scaleY(.92);
    -webkit-animation: slr-aurora-drift 24s ease-in-out -9s infinite alternate;
    animation: slr-aurora-drift 24s ease-in-out -9s infinite alternate;
    will-change: transform, opacity;
}
.slr-aurora-ribbon::before {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    top: 31%;
    height: 34%;
    border-radius: 48% 52% 44% 56% / 58% 42% 60% 40%;
    background: linear-gradient(94deg,
        transparent 0%,
        rgba(103, 174, 164, .3) 20%,
        rgba(134, 118, 177, .27) 48%,
        rgba(143, 167, 200, .22) 72%,
        transparent 100%);
    -webkit-transform: rotate(-3deg) skewX(-7deg);
    transform: rotate(-3deg) skewX(-7deg);
}
.slr-window-haze {
    position: absolute;
    inset: 0;
    opacity: .34;
    background: linear-gradient(112deg, transparent 18%, rgba(180, 197, 221, .045) 36%, transparent 49%, rgba(203, 185, 148, .04) 66%, transparent 80%);
    -webkit-animation: slr-window-haze 9s ease-in-out infinite alternate;
    animation: slr-window-haze 9s ease-in-out infinite alternate;
}
@-webkit-keyframes slr-light-pass { 0% { -webkit-transform: translate3d(0, 24px, 0) rotate(-9deg) scale(.72); opacity: 0; } 22% { opacity: .62; } 72% { opacity: .3; } 100% { -webkit-transform: translate3d(300%, -32px, 0) rotate(-9deg) scale(1.25); opacity: 0; } }
@keyframes slr-light-pass { 0% { transform: translate3d(0, 24px, 0) rotate(-9deg) scale(.72); opacity: 0; } 22% { opacity: .62; } 72% { opacity: .3; } 100% { transform: translate3d(300%, -32px, 0) rotate(-9deg) scale(1.25); opacity: 0; } }
@-webkit-keyframes slr-window-haze { to { opacity: .58; -webkit-transform: translateX(3%); } }
@keyframes slr-window-haze { to { opacity: .58; transform: translateX(3%); } }
@-webkit-keyframes slr-aurora-drift { 0% { -webkit-transform: translate3d(-2%, 0, 0) rotate(-4deg) skewX(-5deg) scaleY(.92); opacity: .14; } 52% { opacity: .23; } 100% { -webkit-transform: translate3d(5%, 5%, 0) rotate(2deg) skewX(4deg) scaleY(1.08); opacity: .18; } }
@keyframes slr-aurora-drift { 0% { transform: translate3d(-2%, 0, 0) rotate(-4deg) skewX(-5deg) scaleY(.92); opacity: .14; } 52% { opacity: .23; } 100% { transform: translate3d(5%, 5%, 0) rotate(2deg) skewX(4deg) scaleY(1.08); opacity: .18; } }

/* 页面切后台、功能关闭或宿主暂停时，显式冻结所有已选动画。 */
.slr-overlay.slr-effects-paused .slr-effect *,
.slr-overlay.slr-effects-paused .slr-effect *::before,
.slr-overlay.slr-effects-paused .slr-effect *::after {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important;
}

/* 尊重系统无障碍偏好：保留当前主题的静态氛围，但完全停止位移动画。 */
@media (prefers-reduced-motion: reduce) {
    .slr-effect *, .slr-effect *::before, .slr-effect *::after {
        -webkit-animation: none !important;
        animation: none !important;
        will-change: auto !important;
    }
    .slr-water-ring { opacity: .2; -webkit-transform: translate(-50%, -50%) scale(3.5, 3); transform: translate(-50%, -50%) scale(3.5, 3); }
    .slr-raindrop { top: 18%; opacity: .16; }
    .slr-snowflake { top: 26%; opacity: .22; }
    .slr-star-mist { opacity: .2; -webkit-transform: none; transform: none; }
    .slr-star-field--twinkle-a { opacity: .38; }
    .slr-star-field--twinkle-b { opacity: .32; }
    .slr-star-field--glints { opacity: .26; }
    .slr-light-trail { left: 24%; opacity: .18; }
    .slr-aurora-ribbon { opacity: .14; -webkit-transform: rotate(-2deg); transform: rotate(-2deg); }
}

/* —— 消息深入浅出浮现层 —— */
.slr-float {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    /* 气泡浮现在舞台中间空白区域；底部留白避开朗读控制条与状态提示 */
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    padding: 30px 18px 96px;
    pointer-events: none;
}

.slr-bubble {
    pointer-events: auto;
    max-width: 82%;
    padding: 10px 14px;
    font-size: 14.5px;
    line-height: 1.68;
    letter-spacing: 0.4px;
    color: var(--slr-ink);
    border: 1px solid var(--slr-gold-faint);
    background: linear-gradient(180deg, rgba(43, 39, 69, 0.78) 0%, rgba(30, 27, 50, 0.78) 100%);
    box-shadow: 0 8px 26px rgba(8, 6, 18, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /* 尖拱切角：左上右上微尖 */
    border-radius: 3px 14px 3px 14px / 3px 18px 3px 18px;
    opacity: 0;
    -webkit-transform: translateY(14px);
    transform: translateY(14px);
    transition: opacity 900ms ease, -webkit-transform 900ms ease;
    transition: opacity 900ms ease, transform 900ms ease;
    word-break: break-word;
    user-select: none;
    -webkit-user-select: none;
}
.slr-bubble.slr-bubble--in { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
.slr-bubble.slr-bubble--out { opacity: 0; -webkit-transform: translateY(-18px); transform: translateY(-18px); }
.slr-bubble--user {
    align-self: flex-end;
    border-color: rgba(143, 167, 200, 0.28);
    background: linear-gradient(180deg, rgba(52, 60, 88, 0.8) 0%, rgba(38, 44, 66, 0.8) 100%);
    border-radius: 14px 3px 14px 3px / 18px 3px 18px 3px;
}
.slr-bubble--host { align-self: flex-start; }
.slr-bubble-name {
    display: block;
    font-size: 10.5px;
    letter-spacing: 1.4px;
    color: var(--slr-gold);
    opacity: 0.85;
    margin-bottom: 3px;
}
.slr-bubble-quote {
    display: block;
    font-size: 11.5px;
    color: var(--slr-ink-dim);
    border-left: 2px solid var(--slr-gold-dim);
    padding-left: 8px;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 双语对白：上原文、下中文译，间距仅 2px */
.slr-bubble-orig { display: block; }
.slr-bubble-trans {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--slr-ink-dim);
    opacity: 0.92;
}
.slr-bubble-img {
    display: block;
    max-width: 132px;
    max-height: 132px;
    border-radius: 3px;
    border: 1px solid var(--slr-gold-faint);
}

/* 舞台状态提示（主播酝酿中…） */
.slr-stage-status {
    position: absolute;
    left: 50%;
    bottom: 8px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--slr-gold);
    opacity: 0.75;
    padding: 4px 14px;
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    background: rgba(22, 20, 42, 0.6);
    pointer-events: none;
    -webkit-animation: slr-status-glow 2.6s ease-in-out infinite;
    animation: slr-status-glow 2.6s ease-in-out infinite;
}
@-webkit-keyframes slr-status-glow { 0%,100% { opacity: 0.45; } 50% { opacity: 0.9; } }
@keyframes slr-status-glow { 0%,100% { opacity: 0.45; } 50% { opacity: 0.9; } }

/* 定时关机倒计时角标（仅展示，不拦截舞台长按/点按手势） */
.slr-timer-chip {
    position: absolute;
    top: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 4px 12px;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--slr-gold);
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    background: rgba(22, 20, 42, 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    white-space: nowrap;
    pointer-events: none;
    z-index: 4;
}
.slr-timer-chip[hidden] { display: none; }
.slr-timer-chip.is-ending { animation: slr-status-glow 1.4s ease-in-out infinite; }

/* —— 连续朗读控制条（书名·章节·段落进度 + 暂停/续读/停止） —— */
.slr-reader-bar {
    position: absolute;
    left: 50%;
    bottom: 34px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 28px);
    padding: 5px 8px 5px 12px;
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    background: rgba(22, 20, 42, 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 4;
}
.slr-reader-bar[hidden] { display: none; }
.slr-reader-info {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--slr-gold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 52vw;
}
.slr-reader-bar.is-paused .slr-reader-info { opacity: 0.55; }
.slr-overlay .slr-reader-btn {
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 4px 10px;
    color: var(--slr-gold);
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    background: rgba(43, 39, 69, 0.5);
}
.slr-overlay .slr-reader-btn:active { opacity: 0.7; }
.slr-overlay .slr-reader-btn--stop {
    color: #d8a7a7;
    border-color: rgba(216, 167, 167, 0.4);
}

.slr-stage-hint {
    position: absolute;
    top: 12px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--slr-ink-dim);
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 600ms ease;
    white-space: nowrap;
}
.slr-overlay.slr-hint-hidden .slr-stage-hint { opacity: 0; }

/* —— 历史消息翻看层 —— */
.slr-history {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(18, 16, 33, 0.96) 0%, rgba(24, 21, 42, 0.96) 100%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.slr-history-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--slr-gold-faint);
}
.slr-history-title { font-size: 12px; letter-spacing: 3px; color: var(--slr-gold); }
.slr-overlay .slr-history-close {
    font-size: 11.5px;
    letter-spacing: 1px;
    color: var(--slr-ink);
    padding: 6px 12px;
    border: 1px solid var(--slr-gold-dim);
    border-radius: 2px;
    transition: box-shadow var(--slr-slow);
}
.slr-history-close:active { box-shadow: 0 0 14px rgba(203, 185, 148, 0.25); }
.slr-history-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.slr-history-list .slr-bubble {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    transition: box-shadow 300ms ease, border-color 300ms ease;
}
.slr-bubble.slr-bubble--selected {
    border-color: var(--slr-gold);
    box-shadow: 0 0 16px rgba(203, 185, 148, 0.3);
}
.slr-history-time {
    align-self: center;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--slr-ink-dim);
    padding: 2px 10px;
}

/* 多选操作栏 */
.slr-msbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-top: 1px solid var(--slr-gold-faint);
    background: rgba(24, 21, 42, 0.96);
    position: relative;
    z-index: 7;
}
.slr-msbar-count { font-size: 12px; color: var(--slr-ink-dim); letter-spacing: 1px; }
.slr-msbar-actions { display: flex; gap: 10px; }
.slr-msbar-actions button {
    font-size: 12px;
    letter-spacing: 1px;
    padding: 6px 14px;
    border: 1px solid var(--slr-gold-dim);
    border-radius: 2px;
    color: var(--slr-ink);
}
#slr-msbar-delete { color: #d8a7a7; border-color: rgba(216, 167, 167, 0.4); }

/* 引用条 */
.slr-quote-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 6px;
    padding: 7px 10px;
    border: 1px solid var(--slr-gold-faint);
    border-left: 2px solid var(--slr-gold-dim);
    background: rgba(43, 39, 69, 0.6);
    position: relative;
    z-index: 5;
}
.slr-quote-mark { color: var(--slr-gold); font-size: 14px; flex: 0 0 auto; }
.slr-quote-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11.5px;
    color: var(--slr-ink-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slr-overlay .slr-quote-close { flex: 0 0 auto; width: 26px; height: 26px; font-size: 16px; color: var(--slr-ink-dim); }

/* ============================ 底部区域 ============================ */

.slr-bottom {
    flex: 0 0 auto;
    position: relative;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 10px calc(10px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    border-top: 1px solid var(--slr-gold-faint);
    background: linear-gradient(180deg, rgba(24, 21, 42, 0.88) 0%, rgba(18, 16, 33, 0.96) 100%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.slr-overlay .slr-bbtn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--slr-gold);
    border: 1px solid var(--slr-gold-faint);
    border-radius: 50% 50% 3px 3px / 62% 62% 3px 3px; /* 小尖拱 */
    background: rgba(43, 39, 69, 0.55);
    transition: box-shadow var(--slr-slow), border-color var(--slr-slow);
}
.slr-bbtn svg { width: 20px; height: 20px; }
.slr-bbtn:active { border-color: var(--slr-gold-dim); box-shadow: 0 0 14px rgba(203, 185, 148, 0.22); }
.slr-bbtn.slr-bbtn--busy {
    -webkit-animation: slr-status-glow 1.6s ease-in-out infinite;
    animation: slr-status-glow 1.6s ease-in-out infinite;
    pointer-events: none;
}

.slr-input-wrap { flex: 1 1 auto; min-width: 0; }
.slr-input {
    display: block;
    width: 100%;
    min-height: 38px;
    max-height: 96px;
    padding: 9px 12px;
    resize: none;
    font-family: var(--slr-serif);
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: 0.5px;
    color: var(--slr-ink);
    caret-color: var(--slr-gold);
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    background: rgba(22, 20, 42, 0.75);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--slr-slow), box-shadow var(--slr-slow);
}
.slr-input::placeholder { color: rgba(222, 215, 236, 0.32); }
.slr-input:focus { border-color: var(--slr-gold-dim); box-shadow: 0 0 12px rgba(203, 185, 148, 0.12); }

.slr-overlay .slr-send {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
    letter-spacing: 2px;
    color: #1d1a30;
    background: linear-gradient(180deg, #d6c6a2 0%, #bfab84 100%);
    border: 1px solid rgba(203, 185, 148, 0.7);
    border-radius: 2px;
    font-weight: 600;
    transition: box-shadow var(--slr-slow), opacity var(--slr-slow);
}
.slr-send:active { box-shadow: 0 0 18px rgba(203, 185, 148, 0.4); }
.slr-send:disabled { opacity: 0.45; pointer-events: none; }

/* —— 表情面板 —— */
.slr-emoji-panel {
    flex: 0 0 auto;
    position: relative;
    z-index: 5;
    max-height: 218px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--slr-gold-faint);
    background: rgba(24, 21, 42, 0.97);
}
.slr-emoji-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px 4px;
}
.slr-overlay .slr-emoji-tab {
    flex: 0 0 auto;
    font-size: 11.5px;
    letter-spacing: 1px;
    padding: 5px 12px;
    color: var(--slr-ink-dim);
    border: 1px solid transparent;
    border-radius: 2px;
    white-space: nowrap;
}
.slr-emoji-tab.is-active { color: var(--slr-gold); border-color: var(--slr-gold-dim); }
.slr-emoji-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 8px 12px calc(10px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}
.slr-overlay .slr-emoji-cell {
    aspect-ratio: 1 / 1;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    background: rgba(43, 39, 69, 0.4);
    overflow: hidden;
}
.slr-emoji-cell img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.slr-emoji-empty {
    padding: 26px 20px;
    text-align: center;
    font-size: 12px;
    color: var(--slr-ink-dim);
    letter-spacing: 1px;
}

/* —— 更多功能菜单 —— */
.slr-more-menu {
    position: absolute;
    right: 12px;
    bottom: calc(64px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 132px;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--slr-gold-dim);
    background: rgba(24, 21, 42, 0.97);
    box-shadow: 0 10px 32px rgba(8, 6, 18, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.slr-overlay .slr-more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 13.5px;
    letter-spacing: 2px;
    color: var(--slr-ink);
    border-bottom: 1px solid var(--slr-gold-faint);
    transition: background 300ms ease;
}
.slr-more-item:last-child { border-bottom: 0; }
.slr-more-item:active { background: rgba(203, 185, 148, 0.1); }
.slr-more-ico { width: 18px; height: 18px; color: var(--slr-gold); }
.slr-more-ico svg { width: 100%; height: 100%; }

/* —— 动态效果选择 —— */
.slr-sheet--effect { max-height: 82%; }
.slr-effect-options {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.slr-overlay .slr-effect-option {
    flex: 0 0 auto;
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    text-align: left;
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    background: rgba(43, 39, 69, .42);
    transition: border-color 260ms ease, background 260ms ease, box-shadow 260ms ease;
}
.slr-overlay .slr-effect-option.is-on {
    border-color: var(--slr-gold-dim);
    background: rgba(55, 49, 82, .66);
    box-shadow: inset 0 0 18px rgba(203, 185, 148, .06), 0 0 14px rgba(143, 167, 200, .08);
}
.slr-effect-thumb {
    position: relative;
    flex: 0 0 68px;
    width: 68px;
    height: 42px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(222, 215, 236, .7);
    border: 1px solid rgba(143, 167, 200, .18);
    background: linear-gradient(155deg, rgba(22, 20, 42, .94), rgba(37, 41, 65, .8));
}
.slr-effect-option-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.slr-effect-option-copy strong { font-size: 13px; letter-spacing: 2px; color: var(--slr-gold); font-weight: 500; }
.slr-effect-option-copy small { font-size: 10.5px; line-height: 1.45; letter-spacing: .3px; color: var(--slr-ink-dim); }
.slr-effect-check { flex: 0 0 auto; width: 15px; color: var(--slr-gold); opacity: 0; transition: opacity 220ms ease; }
.slr-effect-option.is-on .slr-effect-check { opacity: 1; }
.slr-effect-thumb--ripple i {
    position: absolute;
    left: 50%; top: 52%;
    width: 18px; height: 7px;
    border: 1px solid rgba(143, 167, 200, .56);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.slr-effect-thumb--ripple i:nth-child(2) { width: 36px; height: 14px; opacity: .65; }
.slr-effect-thumb--ripple i:nth-child(3) { width: 57px; height: 23px; opacity: .35; }
.slr-effect-thumb--rain { justify-content: space-around; padding: 0 16px; }
.slr-effect-thumb--rain i { width: 1px; height: 18px; background: linear-gradient(transparent, rgba(180, 197, 221, .68)); -webkit-transform: rotate(8deg); transform: rotate(8deg); }
.slr-effect-thumb--rain i:nth-child(2) { height: 11px; margin-top: 17px; }
.slr-effect-thumb--rain i:nth-child(3) { height: 14px; margin-top: -12px; }
.slr-effect-thumb--snow { font-size: 11px; white-space: nowrap; text-shadow: 0 0 8px rgba(180, 197, 221, .28); }
.slr-effect-thumb--stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(222,215,236,.78); box-shadow: 0 0 5px rgba(180,197,221,.35); }
.slr-effect-thumb--stars i:nth-child(1) { left: 12px; top: 11px; width: 1px; height: 1px; }
.slr-effect-thumb--stars i:nth-child(2) { left: 25px; top: 27px; }
.slr-effect-thumb--stars i:nth-child(3) { left: 34px; top: 8px; width: 1px; height: 1px; }
.slr-effect-thumb--stars i:nth-child(4) { left: 47px; top: 21px; background: rgba(203,185,148,.88); }
.slr-effect-thumb--stars i:nth-child(5) { left: 58px; top: 10px; width: 1px; height: 1px; }
.slr-effect-thumb--stars i:nth-child(6) { left: 12px; top: 34px; background: rgba(143,167,200,.88); }
.slr-effect-thumb--glow i { position: absolute; width: 56px; height: 16px; border-radius: 50%; background: radial-gradient(ellipse, rgba(203,185,148,.6), transparent 70%); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
.slr-effect-thumb--glow i:nth-child(2) { background: radial-gradient(ellipse, rgba(143,167,200,.52), transparent 70%); -webkit-transform: translate(10px, 12px) rotate(-10deg); transform: translate(10px, 12px) rotate(-10deg); }
.slr-effect-thumb--off i { width: 32px; height: 1px; background: var(--slr-gold-dim); -webkit-transform: rotate(-38deg); transform: rotate(-38deg); }

/* ============================ 面板 / 弹层 ============================ */

.slr-sheet-mask {
    position: absolute;
    inset: 0;
    z-index: 40;
    background: rgba(10, 9, 20, 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.slr-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 41;
    max-height: 78%;
    display: flex;
    flex-direction: column;
    padding: 0 0 calc(12px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    background: linear-gradient(180deg, #241f3d 0%, #1c1932 100%);
    border-top: 1px solid var(--slr-gold-dim);
    box-shadow: 0 -14px 44px rgba(8, 6, 18, 0.75);
    /* 尖拱顶造型 */
    border-radius: 26px 26px 0 0 / 20px 20px 0 0;
    -webkit-animation: slr-sheet-up 380ms cubic-bezier(0.3, 0.05, 0.25, 1);
    animation: slr-sheet-up 380ms cubic-bezier(0.3, 0.05, 0.25, 1);
}
@-webkit-keyframes slr-sheet-up { from { -webkit-transform: translateY(24px); opacity: 0; } to { -webkit-transform: translateY(0); opacity: 1; } }
@keyframes slr-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.slr-sheet-head {
    flex: 0 0 auto;
    text-align: center;
    padding: 16px 18px 10px;
    border-bottom: 1px solid var(--slr-gold-faint);
}
.slr-sheet-title {
    display: block;
    font-size: 14.5px;
    letter-spacing: 4px;
    color: var(--slr-gold);
}
.slr-sheet-sub {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--slr-ink-dim);
}
.slr-sheet-foot {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 12px 16px 0;
}

.slr-overlay .slr-btn {
    flex: 1 1 0;
    min-height: 42px;
    font-size: 13.5px;
    letter-spacing: 3px;
    border-radius: 2px;
    transition: box-shadow var(--slr-slow);
}
.slr-overlay .slr-btn--ghost { color: var(--slr-ink); border: 1px solid var(--slr-gold-faint); background: transparent; }
.slr-overlay .slr-btn--gold {
    color: #1d1a30;
    font-weight: 600;
    background: linear-gradient(180deg, #d6c6a2 0%, #bfab84 100%);
    border: 1px solid rgba(203, 185, 148, 0.7);
}
.slr-btn--gold:active, .slr-btn--ghost:active { box-shadow: 0 0 16px rgba(203, 185, 148, 0.28); }
.slr-btn:disabled { opacity: 0.45; pointer-events: none; }

/* —— 指定主播列表 —— */
.slr-assign-list {
    flex: 1 1 auto;
    min-height: 80px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.slr-overlay .slr-assign-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--slr-gold-faint);
    background: rgba(43, 39, 69, 0.45);
    transition: border-color 300ms ease, box-shadow 300ms ease;
}
.slr-assign-row.is-picked {
    border-color: var(--slr-gold);
    box-shadow: 0 0 14px rgba(203, 185, 148, 0.22);
}
.slr-assign-ava {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 2px;
    border: 1px solid var(--slr-gold-dim);
    object-fit: cover;
    background: var(--slr-veil);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--slr-gold);
    overflow: hidden;
}
.slr-assign-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slr-assign-meta { flex: 1 1 auto; min-width: 0; }
.slr-assign-name {
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--slr-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slr-assign-voice {
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--slr-ink-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slr-assign-check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1px solid var(--slr-gold-dim);
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--slr-gold);
    font-size: 13px;
}
.slr-assign-empty, .slr-lib-empty {
    padding: 30px 20px;
    text-align: center;
    font-size: 12px;
    color: var(--slr-ink-dim);
    letter-spacing: 1px;
    line-height: 1.8;
}

/* —— 文本库 —— */
.slr-lib-list {
    flex: 1 1 auto;
    min-height: 80px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.slr-lib-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--slr-gold-faint);
    background: rgba(43, 39, 69, 0.45);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.slr-lib-row:active { background: rgba(58, 52, 92, 0.6); }
.slr-lib-row.is-live {
    border-color: rgba(212, 181, 116, 0.55);
    background: rgba(58, 52, 92, 0.55);
}
.slr-lib-go {
    flex: 0 0 auto;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--slr-gold);
    opacity: 0.7;
    white-space: nowrap;
}
.slr-lib-row.is-live .slr-lib-go { opacity: 1; }
.slr-lib-ico { flex: 0 0 auto; color: var(--slr-gold); font-size: 15px; }
.slr-lib-meta { flex: 1 1 auto; min-width: 0; }
.slr-lib-name {
    font-size: 13.5px;
    color: var(--slr-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slr-lib-size { margin-top: 2px; font-size: 10.5px; color: var(--slr-ink-dim); }
.slr-overlay .slr-lib-del {
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 5px 10px;
    color: #d8a7a7;
    border: 1px solid rgba(216, 167, 167, 0.4);
    border-radius: 2px;
}

/* —— 联网文本（文本库内联表单） —— */
.slr-lib-online {
    flex: 0 0 auto;
    margin: 10px 16px 0;
    padding: 4px 12px 12px;
    border: 1px solid var(--slr-gold-faint);
    background: rgba(43, 39, 69, 0.4);
}
.slr-lib-online-status {
    margin-top: 10px;
    padding: 8px 10px;
    font-size: 11.5px;
    line-height: 1.7;
    letter-spacing: 0.5px;
    color: var(--slr-water);
    border: 1px dashed rgba(143, 167, 200, 0.3);
    background: rgba(143, 167, 200, 0.06);
}
.slr-lib-online-status.slr-status-err { color: #d8a7a7; border-color: rgba(216, 167, 167, 0.35); background: rgba(216, 167, 167, 0.06); }
.slr-lib-online-actions { display: flex; gap: 10px; margin-top: 12px; }
.slr-lib-online-actions .slr-btn { min-height: 38px; font-size: 12.5px; letter-spacing: 2px; }
.slr-lib-src {
    display: inline-block;
    margin-right: 5px;
    padding: 1px 5px;
    font-size: 9.5px;
    letter-spacing: 1px;
    color: var(--slr-water);
    border: 1px solid rgba(143, 167, 200, 0.35);
    vertical-align: 1px;
}

/* —— 哄睡音频记录 —— */
.slr-audio-chips {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 16px 2px;
}
.slr-overlay .slr-audio-chip {
    flex: 0 0 auto;
    padding: 6px 13px;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--slr-ink-dim);
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    white-space: nowrap;
    transition: color 300ms ease, border-color 300ms ease;
}
.slr-overlay .slr-audio-chip.is-on { color: var(--slr-gold); border-color: var(--slr-gold-dim); }
.slr-audio-list {
    flex: 1 1 auto;
    min-height: 100px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.slr-audio-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--slr-gold-faint);
    background: rgba(43, 39, 69, 0.45);
}
.slr-audio-row.is-playing { border-color: var(--slr-gold); box-shadow: 0 0 14px rgba(203, 185, 148, 0.22); }
.slr-overlay .slr-audio-play {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--slr-gold);
    border: 1px solid var(--slr-gold-dim);
    border-radius: 50% 50% 3px 3px / 62% 62% 3px 3px;
}
.slr-audio-play svg { width: 16px; height: 16px; }
.slr-audio-meta { flex: 1 1 auto; min-width: 0; }
.slr-audio-host { font-size: 12px; letter-spacing: 1px; color: var(--slr-gold); }
.slr-audio-text {
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--slr-ink-dim);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}
.slr-audio-sub { margin-top: 3px; font-size: 10px; letter-spacing: 0.5px; color: var(--slr-ink-dim); opacity: 0.7; }
.slr-audio-ops { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.slr-overlay .slr-audio-op {
    font-size: 10.5px;
    letter-spacing: 1px;
    padding: 4px 9px;
    color: var(--slr-ink);
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
}
.slr-overlay .slr-audio-op--del { color: #d8a7a7; border-color: rgba(216, 167, 167, 0.4); }
.slr-audio-empty {
    padding: 30px 20px;
    text-align: center;
    font-size: 12px;
    color: var(--slr-ink-dim);
    letter-spacing: 1px;
    line-height: 1.8;
}

/* —— 白噪音 —— */
.slr-noise-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 12px 16px 4px;
}
.slr-overlay .slr-noise-tab {
    flex: 1 1 0;
    padding: 8px 0;
    font-size: 12.5px;
    letter-spacing: 2px;
    color: var(--slr-ink-dim);
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    transition: color 300ms ease, border-color 300ms ease;
}
.slr-noise-tab.is-active { color: var(--slr-gold); border-color: var(--slr-gold-dim); }
.slr-noise-pane {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 16px 4px;
}
.slr-noise-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.slr-overlay .slr-noise-tag {
    padding: 7px 14px;
    font-size: 12.5px;
    letter-spacing: 1.5px;
    color: var(--slr-ink);
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    background: rgba(43, 39, 69, 0.45);
    transition: border-color 300ms ease, box-shadow 300ms ease, color 300ms ease;
}
.slr-noise-tag.is-on {
    color: var(--slr-gold);
    border-color: var(--slr-gold);
    box-shadow: 0 0 12px rgba(203, 185, 148, 0.22);
}
.slr-noise-tags-hint { margin-top: 8px; font-size: 10.5px; color: var(--slr-ink-dim); letter-spacing: 1px; }

/* ===== 语言设置（文本语言转换 / TA的语言） ===== */
/* 兼容说明：弹层左右贴边会落入 iPhone / 华为·小米·OPPO·vivo 等 Android 机型的
   「边缘返回手势」触发带，按钮越靠边越容易被系统手势吞掉、点不中；
   这里统一补上左右安全内边距，并让内容区可独立滚动，避免小屏 / 分屏下
   底部按钮被裁出可视区而无法点击。 */
.slr-lang-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px 6px;
}
.slr-lang-target-title { font-size: 12px; letter-spacing: 2px; color: var(--slr-gold); margin-top: 2px; }
.slr-lang-opts { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.slr-overlay .slr-lang-opt {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    min-width: 44px;
    padding: 7px 14px;
    font-size: 12.5px;
    letter-spacing: 1.5px;
    line-height: 1.3;
    color: var(--slr-ink);
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    background: rgba(43, 39, 69, 0.45);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: border-color 300ms ease, box-shadow 300ms ease, color 300ms ease;
}
.slr-lang-opt.is-on {
    color: var(--slr-gold);
    border-color: var(--slr-gold);
    box-shadow: 0 0 12px rgba(203, 185, 148, 0.22);
}
.slr-lang-opts.is-disabled { opacity: 0.4; pointer-events: none; }
.slr-lang-body .slr-set-field--row { margin-top: 0; }
.slr-lang-body .slr-noise-tags-hint { margin-top: 0; padding-bottom: 2px; line-height: 1.6; }

/* ===== 音量（主播人声 / 背景白噪音） ===== */
/* 与语言面板同款左右安全内边距 + 可滚动兜底，避免贴边导致的误触/裁切风险 */
.slr-volume-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 18px 16px 8px;
}
.slr-volume-row { display: flex; flex-direction: column; gap: 10px; }
.slr-volume-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    letter-spacing: 1.5px;
    color: var(--slr-ink);
}
.slr-volume-val { color: var(--slr-gold); font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; }
/* 跨浏览器 <input type="range"> 样式：iOS/Android Safari、Chrome 内核（Via/夸克/搜狗/雨见等 WebView）
 * 与 Firefox 均需分别用 -webkit-/-moz- 前缀伪元素才能自定义滑轨与滑块外观。 */
.slr-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 28px;
    margin: 0;
    padding: 0;
    background: transparent;
    outline: none;
    touch-action: manipulation;
}
.slr-volume-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--slr-gold-faint);
}
.slr-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--slr-gold);
    border: 2px solid #1d1a30;
    box-shadow: 0 0 8px rgba(203, 185, 148, 0.4);
    cursor: pointer;
}
.slr-volume-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--slr-gold-faint);
}
.slr-volume-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--slr-gold);
    border: 2px solid #1d1a30;
    box-shadow: 0 0 8px rgba(203, 185, 148, 0.4);
    cursor: pointer;
}
.slr-volume-slider:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(203, 185, 148, 0.25); }
.slr-volume-slider:focus::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(203, 185, 148, 0.25); }
.slr-noise-results { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.slr-overlay .slr-noise-result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--slr-ink-dim);
    border: 1px dashed var(--slr-gold-faint);
}
.slr-overlay .slr-noise-local-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 74px;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--slr-ink);
    border: 1px dashed var(--slr-gold-dim);
    background: rgba(43, 39, 69, 0.35);
}
.slr-noise-local-ico { color: var(--slr-gold); font-size: 18px; }
.slr-noise-local-name { margin-top: 8px; font-size: 11.5px; color: var(--slr-gold); text-align: center; word-break: break-all; }
/* —— 白噪音混音列表：每轨一行（名称 + 独立音量滑杆 + 移除） —— */
.slr-noise-mix {
    flex: 0 0 auto;
    margin: 8px 16px 0;
    padding: 8px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid rgba(143, 167, 200, 0.25);
    background: rgba(143, 167, 200, 0.08);
}
.slr-noise-mix-title {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--slr-water);
}
.slr-noise-mix-row { display: flex; flex-direction: column; gap: 6px; }
.slr-noise-mix-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    letter-spacing: 0.5px;
    color: var(--slr-ink);
}
.slr-noise-mix-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slr-noise-mix-val {
    flex: 0 0 auto;
    color: var(--slr-gold);
    font-variant-numeric: tabular-nums;
    min-width: 3.2em;
    text-align: right;
}
.slr-overlay .slr-noise-mix-del {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--slr-ink-dim);
    border: 1px solid rgba(143, 167, 200, 0.3);
    background: transparent;
}
.slr-overlay .slr-noise-mix-del:active { color: var(--slr-gold); border-color: var(--slr-gold-dim); }
.slr-noise-mix-slider { width: 100%; }

/* —— 设置页（全屏） —— */
.slr-settings {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(90% 40% at 50% -6%, rgba(72, 62, 110, 0.55) 0%, rgba(72, 62, 110, 0) 62%),
        linear-gradient(180deg, #17152b 0%, #1c1932 100%);
}
.slr-settings-topbar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    padding: max(8px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 10px 6px;
    border-bottom: 1px solid var(--slr-gold-faint);
}
.slr-settings-title {
    text-align: center;
    font-size: 15px;
    letter-spacing: 5px;
    color: var(--slr-gold);
}
.slr-settings-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px calc(20px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.slr-set-card {
    padding: 14px;
    border: 1px solid var(--slr-gold-faint);
    background: rgba(43, 39, 69, 0.4);
    box-shadow: 0 6px 22px rgba(8, 6, 18, 0.4);
}
.slr-set-card-title { font-size: 13.5px; letter-spacing: 3px; color: var(--slr-gold); }
.slr-set-card-sub { margin-top: 5px; font-size: 11px; line-height: 1.6; color: var(--slr-ink-dim); }
.slr-set-field { display: block; margin-top: 12px; }
.slr-set-field > span { display: block; font-size: 11.5px; letter-spacing: 1.5px; color: var(--slr-ink-dim); margin-bottom: 6px; }
.slr-set-field input {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    font-family: var(--slr-serif);
    font-size: 13.5px;
    color: var(--slr-ink);
    caret-color: var(--slr-gold);
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    background: rgba(22, 20, 42, 0.75);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.slr-set-field input:focus { border-color: var(--slr-gold-dim); }
.slr-set-field--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.slr-set-field--row > span { margin-bottom: 0; flex: 0 0 auto; }
.slr-set-field--row input { width: 96px; text-align: center; flex: 0 0 auto; }
.slr-set-seg { display: flex; gap: 8px; }
.slr-overlay .slr-set-seg-btn {
    padding: 8px 14px;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--slr-ink-dim);
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    transition: color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.slr-set-seg-btn.is-on {
    color: var(--slr-gold);
    border-color: var(--slr-gold);
    box-shadow: 0 0 12px rgba(203, 185, 148, 0.2);
}
.slr-overlay .slr-set-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    border: 1px solid var(--slr-gold-dim);
    border-radius: 2px;
    background: rgba(22, 20, 42, 0.75);
    transition: background var(--slr-slow);
}
.slr-set-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: var(--slr-ink-dim);
    transition: left var(--slr-slow), background var(--slr-slow);
}
.slr-set-toggle[aria-checked="true"] { background: rgba(203, 185, 148, 0.2); }
.slr-set-toggle[aria-checked="true"] .slr-set-toggle-knob { left: 27px; background: var(--slr-gold); }
.slr-settings-save { flex: 0 0 auto; }

/* 定时关机：N 小时 N 分钟 输入行 */
.slr-set-timer-row {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    transition: opacity 300ms ease;
}
.slr-set-timer-row.is-disabled { opacity: 0.4; pointer-events: none; }
.slr-set-timer-unit {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
}
.slr-set-timer-unit input {
    width: 72px;
    padding: 9px 10px;
    text-align: center;
    font-size: 13px;
    color: var(--slr-ink);
    background: rgba(22, 20, 42, 0.75);
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.slr-set-timer-unit input:focus { border-color: var(--slr-gold-dim); }
.slr-set-timer-unit > span {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--slr-ink-dim);
}

/* 拉取模型列表 */
.slr-overlay .slr-set-fetch-models {
    display: block;
    width: 100%;
    margin-top: 12px;
    min-height: 38px;
    font-size: 12.5px;
    letter-spacing: 2px;
}
.slr-set-models-list {
    margin-top: 8px;
    max-height: 180px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--slr-gold-faint);
    background: rgba(22, 20, 42, 0.75);
}
.slr-overlay .slr-set-model-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    font-size: 12.5px;
    letter-spacing: 0.5px;
    color: var(--slr-ink);
    border-bottom: 1px solid var(--slr-gold-faint);
    word-break: break-all;
    transition: background 240ms ease, color 240ms ease;
}
.slr-overlay .slr-set-model-item:last-child { border-bottom: 0; }
.slr-overlay .slr-set-model-item:active { color: var(--slr-gold); background: rgba(203, 185, 148, 0.08); }
.slr-set-models-hint {
    padding: 10px 12px;
    font-size: 11.5px;
    color: var(--slr-ink-dim);
    letter-spacing: 1px;
}

/* —— 消息互动菜单 —— */
.slr-msg-menu {
    position: absolute;
    z-index: 60;
    display: flex;
    border: 1px solid var(--slr-gold-dim);
    background: rgba(24, 21, 42, 0.98);
    box-shadow: 0 10px 30px rgba(8, 6, 18, 0.75);
}
.slr-msg-menu button {
    padding: 11px 15px;
    font-size: 12.5px;
    letter-spacing: 2px;
    color: var(--slr-ink);
    border-right: 1px solid var(--slr-gold-faint);
    white-space: nowrap;
}
.slr-msg-menu button:last-child { border-right: 0; }
.slr-msg-menu button:active { color: var(--slr-gold); }

/* —— 通用模态 —— */
.slr-modal {
    position: absolute;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 9, 20, 0.66);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.slr-modal-box {
    width: 100%;
    max-width: 320px;
    padding: 18px 16px 16px;
    border: 1px solid var(--slr-gold-dim);
    background: linear-gradient(180deg, #262142 0%, #1c1932 100%);
    box-shadow: 0 16px 48px rgba(8, 6, 18, 0.8);
}
.slr-modal-box--tall { max-height: 76%; display: flex; flex-direction: column; }
.slr-modal-title {
    text-align: center;
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--slr-gold);
    margin-bottom: 12px;
}
.slr-modal-text { font-size: 12.5px; line-height: 1.8; color: var(--slr-ink-dim); letter-spacing: 0.5px; }
.slr-modal-textarea {
    display: block;
    width: 100%;
    padding: 10px 12px;
    resize: none;
    font-family: var(--slr-serif);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--slr-ink);
    caret-color: var(--slr-gold);
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    background: rgba(22, 20, 42, 0.75);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.slr-modal-foot { display: flex; gap: 10px; margin-top: 14px; }
.slr-summary-body {
    flex: 1 1 auto;
    min-height: 80px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 0.5px;
    color: var(--slr-ink);
    white-space: pre-wrap;
    word-break: break-word;
    padding: 4px 2px;
}

/* ============================ 电台总结（主播分区 + 垂直时间线） ============================ */

/* —— 主播分区筛选 chips —— */
.slr-summary-chips {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 16px 2px;
}
.slr-overlay .slr-summary-chip {
    flex: 0 0 auto;
    padding: 6px 13px;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--slr-ink-dim);
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    white-space: nowrap;
    transition: color 300ms ease, border-color 300ms ease;
}
.slr-overlay .slr-summary-chip.is-on { color: var(--slr-gold); border-color: var(--slr-gold-dim); }

/* —— 总结进度行 —— */
.slr-summary-progress {
    flex: 0 0 auto;
    padding: 8px 18px 0;
    font-size: 11px;
    letter-spacing: 1px;
    line-height: 1.7;
    color: var(--slr-ink-dim);
}

/* —— 垂直时间线 —— */
.slr-summary-timeline {
    flex: 1 1 auto;
    min-height: 120px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px 12px 20px;
    position: relative;
}
.slr-summary-empty {
    padding: 34px 12px;
    text-align: center;
    font-size: 12px;
    line-height: 2;
    letter-spacing: 1px;
    color: var(--slr-ink-dim);
}
.slr-overlay .slr-sum-node {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 11px 12px 11px 26px;
    color: var(--slr-ink);
    transition: background 300ms ease;
}
/* 时间线竖线：连接各节点圆点 */
.slr-sum-node::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--slr-gold-faint);
}
.slr-sum-node:first-child::before { top: 50%; }
.slr-sum-node:last-child::before { bottom: 50%; }
.slr-sum-node:first-child:last-child::before { display: none; }
.slr-sum-node:active { background: rgba(203, 185, 148, 0.08); }
.slr-sum-dot {
    position: absolute;
    left: 9px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    border: 1px solid var(--slr-gold);
    background: var(--slr-night-soft);
    box-shadow: 0 0 8px rgba(203, 185, 148, 0.35);
}
.slr-sum-node-main { flex: 1 1 auto; min-width: 0; display: block; }
.slr-sum-node-date {
    display: block;
    font-size: 13.5px;
    letter-spacing: 1.5px;
    color: var(--slr-gold);
}
.slr-sum-node-meta {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--slr-ink-dim);
}
.slr-sum-node-arrow {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
    color: var(--slr-gold-dim);
}

/* —— 总结设置弹窗（复刻微信「聊天记忆总结」表单） —— */
.slr-sum-set-box { max-width: 336px; }
.slr-sum-set-body {
    flex: 1 1 auto;
    min-height: 80px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 2px;
}
.slr-sum-detect {
    padding: 9px 11px;
    font-size: 11.5px;
    line-height: 1.8;
    letter-spacing: 0.5px;
    color: var(--slr-ink-dim);
    border: 1px solid var(--slr-gold-faint);
    background: rgba(22, 20, 42, 0.55);
}
.slr-sum-hint {
    margin-top: 6px;
    font-size: 10.5px;
    line-height: 1.7;
    letter-spacing: 0.5px;
    color: var(--slr-ink-dim);
    opacity: 0.85;
}
.slr-sum-prompt-row { display: flex; gap: 8px; }
.slr-sum-prompt-row input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    font-family: var(--slr-serif);
    font-size: 13px;
    color: var(--slr-ink);
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    background: rgba(22, 20, 42, 0.75);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.slr-overlay .slr-sum-prompt-btn {
    flex: 0 0 auto;
    padding: 0 16px;
    font-size: 12.5px;
    letter-spacing: 2px;
    color: var(--slr-gold);
    border: 1px solid var(--slr-gold-dim);
    border-radius: 2px;
    transition: box-shadow 300ms ease;
}
.slr-sum-prompt-btn:active { box-shadow: 0 0 14px rgba(203, 185, 148, 0.28); }
.slr-sum-start-field { text-align: center; }
.slr-overlay .slr-sum-start-btn { width: 100%; }
.slr-sum-select {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-family: var(--slr-serif);
    font-size: 13px;
    color: var(--slr-ink);
    border: 1px solid var(--slr-gold-faint);
    border-radius: 2px;
    background: rgba(22, 20, 42, 0.75);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.slr-sum-select:focus { border-color: var(--slr-gold-dim); }
.slr-sum-select option { background: #201d35; color: #ded7ec; }

/* —— 总结设定选择 / 新建 —— */
.slr-sum-picker-head {
    position: relative;
    margin-bottom: 12px;
}
.slr-sum-picker-head .slr-sum-picker-title { display: block; margin-bottom: 0; }
.slr-overlay .slr-sum-picker-add {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--slr-gold);
    border: 1px solid var(--slr-gold-dim);
    border-radius: 2px;
}
.slr-sum-prompt-list {
    flex: 1 1 auto;
    min-height: 60px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.slr-overlay .slr-sum-prompt-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 11px 12px;
    color: var(--slr-ink);
    border: 1px solid var(--slr-gold-faint);
    background: rgba(43, 39, 69, 0.45);
    transition: border-color 300ms ease;
}
.slr-overlay .slr-sum-prompt-item.is-on { border-color: var(--slr-gold); box-shadow: 0 0 12px rgba(203, 185, 148, 0.18); }
.slr-sum-prompt-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    letter-spacing: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slr-sum-prompt-badge {
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--slr-gold);
}
.slr-sum-prompt-empty {
    padding: 26px 10px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--slr-ink-dim);
}

/* —— 总结详情 —— */
.slr-sum-detail-meta {
    margin: -4px 0 10px;
    text-align: center;
    font-size: 11px;
    line-height: 1.7;
    letter-spacing: 1px;
    color: var(--slr-ink-dim);
}
.slr-sum-detail-foot .slr-btn { letter-spacing: 1.5px; font-size: 12.5px; }
.slr-overlay .slr-sum-btn-danger { color: #d9a0a0; border-color: rgba(217, 160, 160, 0.4); }

/* ============================ 兼容兜底 ============================ */

/* backdrop-filter 不支持时提高底色不透明度（Via/搜狗/老 WebView） */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .slr-bubble { background: linear-gradient(180deg, rgba(43, 39, 69, 0.96) 0%, rgba(30, 27, 50, 0.96) 100%); }
    .slr-bottom { background: rgba(18, 16, 33, 0.98); }
    .slr-more-menu, .slr-history { background: rgba(20, 18, 36, 0.99); }
}

/* aspect-ratio 不支持的老 WebView：表情格子退化为固定高度 */
@supports not (aspect-ratio: 1 / 1) {
    .slr-emoji-cell { height: 72px; }
}

/* 窄屏（iPhone SE / 小屏安卓）微调 */
@media (max-width: 375px) {
    .slr-menu { gap: 6px; padding-left: 10px; padding-right: 10px; }
    .slr-menu-label { font-size: 10px; letter-spacing: 0.5px; }
    .slr-title { font-size: 15.5px; letter-spacing: 5px; }
    .slr-overlay .slr-bbtn { width: 35px; height: 35px; }
    .slr-overlay .slr-send { padding: 0 11px; letter-spacing: 1px; }
    .slr-bubble { max-width: 88%; font-size: 14px; }
}

/* 矮屏（键盘弹出 / 横置小窗）：收窄上部，保证输入可见 */
@media (max-height: 560px) {
    .slr-hosts-line { display: none; }
    .slr-menu { max-height: 84px; }
    .slr-stage-hint { display: none; }
}