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

/* iOS 输入框优化：防止聚焦时自动放大 */
input,
textarea,
select,
button {
    font-size: 16px;
    /* iOS 防止双击放大 */
    touch-action: manipulation;
}

input:focus,
textarea:focus,
select:focus {
    /* 防止聚焦时页面缩放 */
    font-size: 16px;
}

html {
    /* 避免移动端 100vh 包含地址栏导致溢出 */
    height: 100%;
    -webkit-text-size-adjust: 100%;
    /* iOS 防止双击放大 */
    touch-action: manipulation;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
    color: #333;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
    min-height: 100%;
    min-height: 100dvh; /* 动态视口，排除移动端浏览器 UI */
    transition: background 0.35s ease, color 0.35s ease;
    /* iOS 优化：防止长按弹出菜单 */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    /* iOS 防止双击放大 */
    touch-action: manipulation;
}

@font-face {
    font-family: 'LoveMiHuiwenMingchao';
    src: url('assets/汇文明朝体.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'LoveMiOfflineNarration';
    src: url('assets/AaGuDianKeBenSongYouMoBan-2.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'LoveMiMusicLyrics';
    src: url('assets/AaGuDianKeBenSongYouMoBan-2.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'LoveMiOfflineDialogue';
    src: url('assets/FangZhengKaiTiJianTi-1.ttf') format('truetype');
    font-display: swap;
}

/* 背景气泡效果 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 40%),
        radial-gradient(circle at 40% 70%, rgba(255,255,255,0.25) 0%, transparent 45%),
        radial-gradient(circle at 70% 80%, rgba(255,255,255,0.15) 0%, transparent 35%),
        radial-gradient(circle at 10% 80%, rgba(255,255,255,0.2) 0%, transparent 40%);
    z-index: 0;
    pointer-events: none;
}

#app {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
    /* 锁屏等子元素用 cqw 随「小手机」宽度缩放，避免用 vw 在宽屏上比例失调 */
    container-type: inline-size;
    container-name: love-phone;
    /* 适配刘海屏安全区域 */
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    /* iOS 防止双击放大 */
    touch-action: manipulation;
}

body[data-chat-keyboard-open="1"] #app,
body.ios-fullscreen-mode[data-chat-keyboard-open="1"] #app {
    height: var(--lovemi-chat-app-height, 100vh) !important;
    min-height: var(--lovemi-chat-app-height, 100vh) !important;
    max-height: var(--lovemi-chat-app-height, 100vh) !important;
    bottom: auto !important;
    overflow: hidden !important;
}

/* 语音通话外壳兜底：voice-call.css 按需加载前须有叠层定位与默认隐藏层，否则节点落入文档流底部 */
#voice-call-global-root.voice-call-global-root {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 100145;
    overflow: hidden;
}

/* 关键修复（语音通话「黑屏一闪」）：原先用 display:none ↔ block 切换，会让魅族 / Vivo /
   OPPO / Via / 雨见 / 夸克等 Android 浏览器在 GPU 合成层销毁/重建瞬间露出一帧黑色。
   改用 visibility + opacity + pointer-events，合成层保持稳定，只走轻量 opacity 过渡。 */
#voice-call-global-root .voice-call-layer:not(.show) {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/*
 * 锁屏：unlock 后 css-lazy-loader 会移除 lock-screen.css；#lock-screen 仍留在 #app 内。
 * 若无下列兜底，锁屏块会失去绝对定位，以普通块级落入 flex 文档流，挤压主界面下半屏。
 */
#lock-screen.lock-screen--gone {
    display: none !important;
    pointer-events: none !important;
}

/* 响应式设置 */
@media (min-width: 481px) {
    #app {
        border-radius: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
        min-height: calc(100vh - 40px);
        min-height: calc(100dvh - 40px);
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
    }
}

/* 网页模式下的适配 */
@media (min-width: 768px) {
    body {
        background-color: #e0e0e0;
    }
    
    #app {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    }
}

/* 小屏手机适配（宽度 <= 375 或 高度 <= 700） */
@media (max-width: 375px), (max-height: 700px) {
    #home-screen {
        /* 与 .bottom-nav 小屏样式一致：图标 36px；悬浮底栏需更大 scroll-padding */
        --home-dock-bar-h: 104px;
        --home-dock-bottom-inset: max(12px, env(safe-area-inset-bottom, 0px));
        --home-scroll-extra-bottom: 24px;
    }

    .main-card {
        margin: 0 clamp(16px, 4.5vw, 22px) 0;
        --main-card-cover-h: clamp(96px, 30vw, 120px);
        --main-card-avatar: 80px;
        --main-card-radius: 20px;
    }
    
    .card-content {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 12px;
        padding-top: calc(var(--main-card-avatar) / 2 + 8px);
    }
    
    .avatar-section {
        margin: 0;
    }
    
    .card-meta-below-avatar {
        max-width: 260px;
        gap: 10px;
        padding-bottom: 8px;
    }
    
    .decorative-icons {
        gap: 5px 8px;
    }
    
    .decorative-icon {
        font-size: 14px;
        width: 1.8em;
        height: 1.8em;
    }

    .decorative-icon--text-run {
        font-size: 13px;
    }
    
    .card-signature-line {
        font-size: 14px;
    }
    
    .card-location span {
        font-size: 12px;
    }
    
    .home-content {
        padding: 22px clamp(14px, 4vw, 18px) 0;
        gap: 0;
    }

    .home-top-row {
        margin-top: 0;
        --home-top-gap: 12px;
        gap: var(--home-top-gap);
    }

    .home-main-flex-spacer {
        flex: 0 0 auto;
        min-height: 8px;
        max-height: 28px;
    }

    .music-player-card {
        height: clamp(92px, 29vw, 112px);
        padding: 6px 9px;
    }
    
    .function-item {
        padding: 5px 4px 4px;
    }
    
    .function-name {
        font-size: 10px;
    }
    
    .bottom-nav {
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        margin-inline: 0;
        bottom: max(12px, env(safe-area-inset-bottom, 0px));
        padding: 6px 8px;
    }
    
    .nav-name {
        font-size: 9px;
    }
}

/* 窄屏：并排宽度不足（166+28+166 与左右 20px 内边距），改为上下排列 */
@media (max-width: 420px), (max-height: 600px) {
    #home-screen {
        --home-dock-bar-h: 102px;
        --home-scroll-extra-bottom: 24px;
    }

    .main-card {
        margin: 0 clamp(16px, 4.8vw, 22px) 0;
        --main-card-cover-h: clamp(88px, 28vw, 108px);
        --main-card-avatar: 70px;
        --main-card-radius: 18px;
    }
    
    .home-content {
        padding: 22px clamp(14px, 4vw, 18px) 0;
        gap: 0;
    }

    .home-top-row {
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        --home-top-gap: 16px;
        --home-top-quick-nudge: -4px;
        --home-top-horoscope-nudge: 4px;
        gap: var(--home-top-gap);
    }

    .home-main-flex-spacer {
        flex: 0 0 auto;
        min-height: 8px;
        max-height: 20px;
    }

    .quick-functions {
        width: calc(var(--home-quick-btn-size, 70px) * 2 + var(--home-quick-btn-gap, 12px));
        max-width: 100%;
    }

    .music-player-card {
        height: clamp(90px, 28vw, 110px);
        padding: 6px 9px;
    }
    
    .function-name {
        font-size: 9px;
    }
}

.page {
    display: none;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.page.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* 主界面：默认页底色；全屏壁纸由 .home-screen-bg-layer 铺满 #home-screen（含状态栏与底栏区域） */
#home-screen {
    position: relative;
    /* 与子屏 .home-sub-screen-page 统一的系统预设底色（无自定义主界面背景图时铺满整页，避免底部露 #fff 分层） */
    --home-default-page-bg:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.26) 25%, transparent 48%),
        radial-gradient(circle at 86% 18%, rgba(233, 231, 245, 0.94) 0%, rgba(233, 231, 245, 0.34) 30%, transparent 56%),
        radial-gradient(circle at 24% 82%, rgba(188, 198, 223, 0.8) 0%, rgba(188, 198, 223, 0.26) 34%, transparent 62%),
        radial-gradient(circle at 76% 72%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 24%, transparent 52%),
        linear-gradient(145deg, #BCC6DF 0%, #E9E7F5 54%, #BCC6DF 100%);
    background: var(--home-default-page-bg);
    transition: background 0.35s ease;
    /* 主屏 / 子屏 / 底栏快捷按钮统一 70×70 圆角正方 */
    --home-quick-btn-size: 70px;
    --home-quick-btn-gap: 12px;
    /* 音乐卡片底边与悬浮底栏顶边间距 30px + 底栏实高 + bottom 对齐 + 移动浏览器 UI 余量 */
    --home-music-to-dock-gap: 30px;
    --home-dock-bar-h: 100px;
    --home-dock-bottom-inset: max(16px, env(safe-area-inset-bottom, 0px));
    --home-scroll-extra-bottom: 16px;
    --home-main-pad-bottom: calc(
        var(--home-music-to-dock-gap) + var(--home-dock-bar-h) + var(--home-dock-bottom-inset) + var(--home-scroll-extra-bottom)
    );
}

#home-screen > .home-screen-bg-layer {
    z-index: 0;
}

/* 底栏 .bottom-nav 需保持 position:absolute 叠在内容上方；勿与 status-bar / pager 一并设为 relative */
#home-screen > .status-bar,
#home-screen > .home-desktop-pager {
    position: relative;
    z-index: 1;
}

#home-screen > .bottom-nav {
    z-index: 5;
}

/* 已设置主界面壁纸时：状态栏半透明+轻模糊，减轻与背景的硬分界，同时保持可读 */
#home-screen.home-screen--wallpaper > .status-bar {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#home-screen.home-screen--wallpaper > .status-bar .status-left {
    color: rgba(0, 0, 0, 0.82);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85), 0 0 10px rgba(255, 255, 255, 0.45);
}

#home-screen.home-screen--wallpaper > .status-bar .status-icon-svg {
    color: rgba(0, 0, 0, 0.62);
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.75));
}

/* 主屏：主卡片紧贴状态栏区域（去掉状态栏下内边距造成的空隙） */
#home-screen > .status-bar {
    padding-bottom: 0;
}

/* 全局操作提示横幅：挂载于 #app 内，右上角滑入 */
#app > .notification {
    position: absolute;
    top: max(10px, env(safe-area-inset-top, 0px));
    right: 12px;
    left: auto;
    z-index: 100520;
    max-width: min(280px, calc(100% - 24px));
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
    color: #fff;
    background: rgba(32, 32, 32, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    word-break: break-word;
}

#app > .notification.show {
    opacity: 1;
    transform: translateX(0);
}

#app > .notification.notification--success {
    background: linear-gradient(135deg, rgba(7, 193, 96, 0.96) 0%, rgba(6, 160, 80, 0.96) 100%);
    border-color: rgba(255, 255, 255, 0.18);
}

#app > .notification.notification--error {
    background: linear-gradient(135deg, rgba(230, 67, 64, 0.96) 0%, rgba(200, 45, 42, 0.96) 100%);
    border-color: rgba(255, 255, 255, 0.18);
}

body > .notification {
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 0px));
    right: 12px;
    left: auto;
    z-index: 1000001;
    max-width: min(280px, calc(100vw - 24px));
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
    color: #fff;
    background: rgba(32, 32, 32, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    word-break: break-word;
}

body > .notification.show {
    opacity: 1;
    transform: translateX(0);
}

body > .notification.notification--success {
    background: linear-gradient(135deg, rgba(7, 193, 96, 0.96) 0%, rgba(6, 160, 80, 0.96) 100%);
    border-color: rgba(255, 255, 255, 0.18);
}

body > .notification.notification--error {
    background: linear-gradient(135deg, rgba(230, 67, 64, 0.96) 0%, rgba(200, 45, 42, 0.96) 100%);
    border-color: rgba(255, 255, 255, 0.18);
}


.phone-notes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 4px 16px;
}

.phone-notes-list .phone-note-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(255,255,255,0.92));
    border: 1px solid rgba(255,255,255,0.42);
    border-radius: 18px;
    padding: 13px 14px;
    box-shadow: 0 10px 28px rgba(59, 77, 109, 0.08), inset 0 1px 0 rgba(255,255,255,0.52);
    backdrop-filter: blur(15px) saturate(145%);
    cursor: default;
    user-select: none;
    outline: none;
}

.phone-notes-list .phone-note-card:active {
    transform: translateY(0.5px);
}

.phone-app-content--settings .phone-note-card + .phone-note-card,
.phone-app-content--settings .phone-settings-battery-panel + .phone-note-card,
.phone-app-content--settings .phone-note-card + .phone-settings-battery-panel {
    margin-top: 8px;
}

.phone-app-content--settings .phone-note-card,
.phone-app-content .phone-note-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(255,255,255,0.92));
    border: 1px solid rgba(255,255,255,0.42);
    border-radius: 18px;
    padding: 13px 14px;
    box-shadow: 0 10px 28px rgba(59, 77, 109, 0.08), inset 0 1px 0 rgba(255,255,255,0.52);
    backdrop-filter: blur(15px) saturate(145%);
    cursor: pointer;
    user-select: none;
    outline: none;
}

.phone-app-content--settings .phone-note-card:active,
.phone-app-content .phone-note-card:active {
    transform: translateY(0.5px);
}


.phone-settings-wallpaper-preview {
    position: relative;
    margin-top: 10px;
    height: 128px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(123, 145, 179, 0.24);
    background:
        radial-gradient(circle at 20% 22%, rgba(255, 155, 188, 0.32), transparent 34%),
        radial-gradient(circle at 80% 60%, rgba(140, 215, 255, 0.26), transparent 36%),
        linear-gradient(135deg, #18181c 0%, #0b0b0f 70%, #000 100%);
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.phone-settings-wallpaper-preview span {
    position: absolute;
    left: 12px;
    bottom: 10px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.36);
    color: rgba(255, 255, 255, 0.88);
    font-size: 11px;
    font-weight: 700;
}

.phone-settings-wallpaper-preview--beast {
    background:
        linear-gradient(90deg, rgba(45, 45, 45, 0.22) 1px, transparent 1px),
        linear-gradient(0deg, rgba(45, 45, 45, 0.22) 1px, transparent 1px),
        linear-gradient(135deg, #e5e5e5 0%, #d4d4d4 46%, #a0a0a0 100%);
    background-size: 24px 24px, 24px 24px, auto;
}

.phone-settings-wallpaper-preview--classic {
    background:
        radial-gradient(circle at 24% 20%, rgba(201, 76, 76, 0.28), transparent 30%),
        radial-gradient(circle at 78% 30%, rgba(212, 163, 115, 0.36), transparent 34%),
        linear-gradient(145deg, #f5e6d3 0%, #d4a373 52%, #2e4a3f 100%);
}

.phone-settings-wallpaper-preview--cyber {
    background:
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 255, 255, 0.08) 2px 4px),
        radial-gradient(circle at 20% 18%, rgba(255, 0, 255, 0.46), transparent 34%),
        radial-gradient(circle at 80% 58%, rgba(0, 255, 255, 0.38), transparent 36%),
        linear-gradient(145deg, #0d0221 0%, #160936 55%, #050111 100%);
}

.phone-settings-wallpaper-preview--pastoral {
    background:
        radial-gradient(circle at 18% 22%, rgba(245, 215, 95, 0.34), transparent 28%),
        radial-gradient(circle at 74% 20%, rgba(212, 160, 160, 0.26), transparent 30%),
        linear-gradient(145deg, #faf6f0 0%, #dbe9c7 46%, #5a8f5a 100%);
}

.phone-settings-wallpaper-preview--future {
    background:
        linear-gradient(90deg, rgba(0, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(191, 95, 255, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, rgba(0, 255, 255, 0.34), transparent 38%),
        linear-gradient(145deg, #07111f 0%, #0d0221 58%, #23104b 100%);
    background-size: 36px 36px, 36px 36px, auto, auto;
}

.phone-settings-wallpaper-preview.has-wallpaper {
    background-size: cover;
    background-position: center;
}

.phone-settings-wallpaper-actions,
.phone-settings-theme-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.phone-settings-theme-btn,
.phone-settings-theme-cancel,
.phone-settings-theme-save {
    min-height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(123, 145, 179, 0.32);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.phone-settings-theme-btn,
.phone-settings-theme-save {
    background: #111827;
    color: #fff;
}

.phone-settings-theme-btn--ghost,
.phone-settings-theme-cancel {
    background: rgba(255, 255, 255, 0.92);
    color: #334155;
}

.phone-settings-theme-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.phone-settings-theme-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(123, 145, 179, 0.28);
    background: rgba(255, 255, 255, 0.88);
    color: #23324a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.phone-settings-theme-option.is-active {
    border-color: rgba(17, 24, 39, 0.72);
    box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.08);
}

.phone-settings-theme-swatch {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    border: 1px solid rgba(17, 24, 39, 0.16);
    flex: 0 0 auto;
}

.phone-settings-theme-option--beast .phone-settings-theme-swatch {
    border-radius: 0;
    background: linear-gradient(135deg, #e5e5e5 0 35%, #2d2d2d 35% 60%, #a0a0a0 60%);
}

.phone-settings-theme-option--classic .phone-settings-theme-swatch {
    background: linear-gradient(135deg, #8b4513 0 34%, #f5e6d3 34% 68%, #2e4a3f 68%);
}

.phone-settings-theme-option--cyber .phone-settings-theme-swatch {
    background: linear-gradient(135deg, #0d0221 0 32%, #ff00ff 32% 60%, #00ffff 60%);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.32);
}

.phone-settings-theme-option--pastoral .phone-settings-theme-swatch {
    background: linear-gradient(135deg, #5a8f5a 0 35%, #faf6f0 35% 68%, #f5d75f 68%);
}

.phone-settings-theme-option--future .phone-settings-theme-swatch {
    background: linear-gradient(135deg, #07111f 0 35%, #00ffff 35% 58%, #bf5fff 58%);
    box-shadow: 0 0 10px rgba(191, 95, 255, 0.32);
}

.phone-app-content--settings .phone-note-title,
.phone-app-content .phone-note-title {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: #5d4037;
    margin-bottom: 6px;
}

.phone-app-content--settings .phone-note-body,
.phone-app-content .phone-note-body {
    font-size: 13px;
    line-height: 1.55;
    color: #333;
    word-break: break-word;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(93, 64, 55, 0.08);
}

.phone-notes-list .phone-note-card.is-done {
    opacity: 1;
}

.phone-notes-list .phone-note-card.is-done .phone-note-title,
.phone-notes-list .phone-note-card.is-done .phone-note-body,
.phone-notes-list .phone-note-card.is-done .phone-note-time,
.phone-notes-list .phone-note-card.is-done .phone-note-head-right {
    color: #BFCAC2;
    text-decoration: none;
}

.phone-app-content--settings {
    padding: 12px !important;
}


.phone-settings-page-title,
.phone-settings-summary,
.phone-settings-group-label,
.phone-settings-group--list,
.phone-settings-battery-panel {
    margin: 0;
}


.phone-settings-battery-panel {
    background: #f5f6fa;
    border-top: 1px solid rgba(226, 232, 240, 0.92);
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    padding: 12px;
    font-size: 13px;
    color: #24303c;
    line-height: 1.45;
    backdrop-filter: none;
    box-shadow: none;
}

.phone-battery-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.phone-battery-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: conic-gradient(#34c759 0% 78%, #e5e7eb 78% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 6px #fff;
}

.phone-battery-pct-num {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}

.phone-battery-pct-suf {
    font-size: 12px;
    color: #666;
    margin-left: 1px;
}

.phone-battery-meta {
    flex: 1;
    min-width: 0;
}

.phone-battery-screen {
    margin-top: 4px;
    font-size: 12px;
    color: #666;
}

.phone-battery-kb-hint {
    margin-top: 6px;
    font-size: 12px;
    color: #888;
    line-height: 1.35;
}

.phone-battery-list-title {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 13px;
}

.phone-battery-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 12px;
    overflow: hidden;
}

.phone-battery-rank-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 0;
    border: none;
}

.phone-battery-rank-row + .phone-battery-rank-row {
    border-top: 1px solid rgba(226, 232, 240, 0.92);
}

.phone-battery-rank-i {
    width: 20px;
    text-align: center;
    color: #a0a7b4;
    flex-shrink: 0;
}

.phone-battery-rank-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone-battery-rank-pct {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: #24303c;
}

.phone-notes-list .phone-note-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.phone-notes-list .phone-note-head-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.phone-notes-list .phone-note-head-right {
    color: rgba(0, 0, 0, 0.35);
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s ease;
    cursor: pointer;
    padding: 4px 2px;
    margin: -4px -2px;
    user-select: none;
}

.phone-notes-list .phone-note-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
    border: 1px solid rgba(143, 170, 210, 0.18);
    background: rgba(255, 255, 255, 0.42);
    color: #455972;
    flex-shrink: 0;
}

.phone-notes-list .phone-note-badge.is-todo {
    border-color: rgba(143, 170, 210, 0.22);
    background: rgba(206, 220, 241, 0.34);
    color: #4f6886;
}

.phone-notes-list .phone-note-badge.is-done {
    border-color: rgba(143, 170, 210, 0.18);
    background: rgba(226, 234, 245, 0.42);
    color: #61758d;
}

.phone-notes-list .phone-note-time {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phone-note-detail-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.50), rgba(255,255,255,0.24));
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.42);
    box-shadow: 0 10px 28px rgba(59, 77, 109, 0.08);
    backdrop-filter: blur(18px);
    padding: 14px 14px 16px;
}

.phone-note-detail-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.phone-note-detail-title {
    font-size: 16px;
    font-weight: 750;
    color: #111;
    margin-bottom: 10px;
}

.phone-note-detail-body {
    font-size: 13px;
    line-height: 1.65;
    color: #222;
    white-space: pre-wrap;
    word-break: break-word;
}

.phone-notes-list .phone-note-title {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    font-weight: 700;
    font-size: 14px;
    color: #5d4037;
    margin-bottom: 6px;
    cursor: pointer;
}

.phone-notes-list .phone-note-body {
    font-size: 13px;
    line-height: 1.55;
    color: #333;
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(93, 64, 55, 0.08);
}

.phone-notes-list .phone-note-title:focus-visible {
    outline: none;
    color: #7a5a4d;
}

.phone-notes-list .phone-note-body[hidden] {
    display: none !important;
}

.phone-app-inline-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255,255,255,0.42);
    background: linear-gradient(145deg, rgba(255,255,255,0.46), rgba(255,255,255,0.22));
    color: #1a2433;
    padding: 8px 12px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 22px rgba(59, 77, 109, 0.08);
}

.phone-call-script {
    white-space: pre-wrap;
    font-size: 13px;
    line-height: 1.78;
    color: #233046;
    margin: 0;
    font-family: inherit;
    padding: 16px 17px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255,255,255,0.40), rgba(255,255,255,0.22));
    border: 1px solid rgba(255,255,255,0.42);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 28px rgba(59, 77, 109, 0.08);
}

.phone-video-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.phone-video-card {
    border-radius: 18px;
    padding: 13px;
    background: linear-gradient(145deg, rgba(255,255,255,0.56), rgba(255,255,255,0.24));
    border: 1px solid rgba(255,255,255,0.42);
    box-shadow: 0 10px 28px rgba(59, 77, 109, 0.08), inset 0 1px 0 rgba(255,255,255,0.52);
    backdrop-filter: blur(18px) saturate(145%);
}

.phone-video-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.phone-video-tag {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(143, 170, 210, 0.12);
    color: #536784;
    border: 1px solid rgba(143, 170, 210, 0.18);
}

.phone-video-play {
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.42);
    background: linear-gradient(145deg, rgba(114, 136, 171, 0.96), rgba(87, 107, 142, 0.96));
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(83, 103, 132, 0.2);
}

.phone-video-playtext {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(35, 48, 70, 0.78);
    margin-top: 10px;
    white-space: pre-wrap;
    display: none;
}

.phone-video-playtext.is-visible {
    display: block;
}

.chat-gift-shelf-sub {
    margin-bottom: 8px !important;
}

.chat-gift-shelf-list {
    max-height: min(360px, 58vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.chat-gift-shelf-empty {
    margin: 0;
    padding: 12px 4px 8px;
    font-size: 14px;
    line-height: 1.55;
    color: #777;
}

.chat-gift-shelf-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.chat-gift-shelf-row:last-child {
    border-bottom: none;
}

.chat-gift-shelf-cb {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: #ff7eb3;
}

.chat-gift-shelf-thumb {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-gift-shelf-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-gift-shelf-thumb .shopping-cover-cosmetic {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.chat-gift-shelf-thumb--ph {
    font-size: 22px;
    opacity: 0.4;
}

.chat-gift-shelf-meta {
    flex: 1;
    min-width: 0;
}

.chat-gift-shelf-title {
    font-size: 14px;
    font-weight: 500;
    color: #222;
    line-height: 1.35;
    word-break: break-word;
}

.chat-gift-shelf-price {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}


.chat-gift-shelf-footer {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.chat-gift-shelf-footer .wallet-modal-btn {
    width: 100%;
}

#phone-page,
#twitter-page {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #f8f8f8;
}

/* 主屏幕内容区：块级纵向堆叠 + overflow-y，避免内部 flex:1 把子项压扁导致 scrollHeight 等于视口无法滚动 */
.home-scroll-wrapper {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-padding-bottom: var(--home-main-pad-bottom);
    display: block;
    padding-bottom: var(--home-main-pad-bottom);
    touch-action: pan-y;
    /* 滚动条隐形，保留触控/滚轮滚动（与小组件子屏 .sub-screen-scroll 一致） */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.home-scroll-wrapper::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* —— 主屏 ↔ 小组件子屏：横向分页（类 iOS 桌面滑屏）—— */
/* 共用背景层：铺满 #home-screen（状态栏/底栏之上为透明叠层，壁纸连续无分层） */
.home-screen-bg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    z-index: 0;
    pointer-events: none;
    background: var(--home-default-page-bg, linear-gradient(145deg, #BCC6DF 0%, #E9E7F5 100%));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home-desktop-pager {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    background-color: transparent;
}

.home-desktop-track {
    display: flex;
    flex-direction: row;
    width: 200%;
    height: 100%;
    min-height: 0;
    position: absolute;
    top: 0;
    left: 0;
    contain: layout paint;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0.25, 1);
}

.home-desktop-track.is-dragging {
    transition: none;
}

/* ===== 主屏/子屏 页面指示器（类 iOS 圆点 + 可点击切换） =====
 * 设计目标：
 *  1) 视觉上类似 iOS 桌面分页圆点，浮在两页底部、避让底栏；
 *  2) 在任何机型上可直接点击切换主屏/子屏，作为「滑屏不灵敏」时的兜底交互（典型场景：Vivo via 浏览器）；
 *  3) 不抢主桌面任何控件的点击；亮/暗外观与底栏一致；
 *  4) 与底部导航共存：垂直定位略高于 .bottom-nav，使用 env(safe-area-inset-bottom) 兼容刘海屏。
 */
.home-desktop-page-indicator {
    position: absolute;
    /* 位于底部导航之上：复用 #home-screen 定义的 dock 高度 + 安全区变量，并向上让 10px 留白；
       这样 dock 高度若以后调整，圆点会自动跟随而无需再改这里。 */
    bottom: calc(var(--home-dock-bar-h, 100px) + var(--home-dock-bottom-inset, env(safe-area-inset-bottom, 16px)) + 10px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    z-index: 5;
    pointer-events: auto;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.home-desktop-page-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
    /* 增加可点击区域，提升 Vivo / 老安卓上的命中率，但视觉直径保持 7px */
    position: relative;
}
.home-desktop-page-dot::after {
    content: '';
    position: absolute;
    /* 把命中盒子外扩到 ~28px × 28px */
    top: -11px;
    bottom: -11px;
    left: -11px;
    right: -11px;
}
.home-desktop-page-dot:hover {
    background: rgba(255, 255, 255, 0.75);
}
.home-desktop-page-dot.is-active {
    background: #ffffff;
    width: 18px;
    border-radius: 999px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.18);
}
.home-desktop-page-dot:focus {
    outline: none;
}
.home-desktop-page-dot:focus-visible {
    outline: 2px solid rgba(108, 145, 255, 0.65);
    outline-offset: 2px;
}

/* 暗色模式：底色更深、对比更高 */
html[data-appearance="dark"] .home-desktop-page-indicator {
    background: rgba(20, 20, 24, 0.55);
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 1px 4px rgba(0, 0, 0, 0.4);
}
html[data-appearance="dark"] .home-desktop-page-dot {
    background: rgba(255, 255, 255, 0.42);
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.4);
}
html[data-appearance="dark"] .home-desktop-page-dot.is-active {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* 反向入侵中：禁用点击（与全局输入屏蔽语义一致），降低不透明度提示状态 */
html.reverse-invasion-active .home-desktop-page-indicator {
    opacity: 0.4;
    pointer-events: none;
}

.home-desktop-page {
    width: 50%;
    flex-shrink: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    contain: layout paint;
}

.home-desktop-page-main {
    overflow: hidden;
    background: transparent;
}

.home-desktop-page-main .home-scroll-wrapper {
    flex: 1;
    min-height: 0;
}

/* 小组件子屏：背景必须完全透明，以显示共用背景层 */
.home-sub-screen-page {
    background: transparent !important;
    color: #2a2a2a;
    position: relative;
    overflow: hidden;
}

html[data-appearance="dark"] .home-sub-screen-page {
    color: rgba(245, 245, 250, 0.92);
}

html[data-appearance="dark"] .sub-screen-action-label {
    color: rgba(242, 242, 247, 0.88);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}


html[data-appearance="dark"] .sub-screen-action-icon {
    background: rgba(38, 38, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.08),
        0 0 18px rgba(110, 155, 255, 0.12),
        0 6px 14px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 子屏内容层（透明背景，显示下方共用背景） */
.home-sub-screen-page > .sub-screen-scroll {
    position: relative;
    z-index: 1;
    /* 透明背景，显示共用背景层 */
    background-color: transparent;
}

.sub-screen-scroll {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 calc(90px + env(safe-area-inset-bottom, 0px));
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* 须透明，否则会盖住共用背景层上的用户背景图 */
    background-color: transparent;
}

/* 至少铺满一屏；纵向用 gap 明确分隔三大块，底部留白避免贴底栏 */
.sub-screen-fill {
    box-sizing: border-box;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: clamp(12px, 2.4vh, 18px);
    padding: max(8px, env(safe-area-inset-top, 0px)) 14px clamp(18px, 3.5vh, 28px);
}

.sub-screen-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}


.sub-screen-top-widget {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.sub-screen-clock-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sub-screen-week-line {
    font-family: Georgia, "Times New Roman", "Songti SC", serif;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.sub-screen-flips {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.sub-screen-flip {
    flex: 1;
    min-width: 0;
    background: #3a3a3a;
    color: #fff;
    font-family: Georgia, "Times New Roman", "Songti SC", serif;
    font-size: clamp(22px, 7.5vw, 30px);
    font-weight: 600;
    text-align: center;
    padding: 10px 6px;
    border-radius: 14px;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sub-screen-lunar {
    font-family: Georgia, "Songti SC", serif;
    font-size: 11px;
    color: rgba(42, 42, 42, 0.72);
    line-height: 1.35;
}

.sub-screen-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.12);
    margin-top: 4px;
    max-width: 100%;
}

.sub-screen-cal-wrap {
    flex: 1;
    min-width: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: linear-gradient(135deg, rgba(188, 198, 223, 0.88) 0%, rgba(233, 231, 245, 0.88) 48%, rgba(208, 221, 227, 0.88) 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 18px;
    padding: 8px 10px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: 0 12px 24px rgba(112, 128, 165, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

.sub-screen-cal-head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
    font-size: 10px;
    color: rgba(42, 42, 42, 0.5);
    margin-bottom: 4px;
}

.sub-screen-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px 2px;
    text-align: center;
    font-size: 11px;
}

.sub-screen-cal-cell {
    aspect-ratio: 1;
    max-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #333;
}

.sub-screen-cal-empty {
    visibility: hidden;
}

.sub-screen-cal-today {
    background: #3a3a3a;
    color: #fff;
    font-weight: 600;
}

.sub-screen-film {
    position: relative;
    background: linear-gradient(135deg, rgba(188, 198, 223, 0.88) 0%, rgba(233, 231, 245, 0.88) 50%, rgba(208, 221, 227, 0.88) 100%);
    border-radius: 26px;
    padding: 14px 14px 12px;
    margin-top: 0;
    margin-bottom: 0;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.44);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 28px rgba(112, 128, 165, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.sub-screen-film::before {
    display: none;
}

.sub-screen-film-inner {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: stretch;
    min-height: 118px;
}

.sub-screen-slot {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.sub-screen-slot-film {
    flex: 1;
    min-width: 0;
    min-height: 118px;
    background: linear-gradient(135deg, rgba(188, 198, 223, 0.88) 0%, rgba(233, 231, 245, 0.88) 52%, rgba(208, 221, 227, 0.88) 100%);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: 0 8px 18px rgba(112, 128, 165, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}

.sub-screen-file-input {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: block !important;
    opacity: 0.001;
    pointer-events: none;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    cursor: pointer;
    font-size: 16px;
    color: transparent;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    touch-action: manipulation;
}

.sub-screen-slot-glow,
.sub-screen-slot-sparkles,
.sub-screen-slot-hint,
.sub-screen-slot-img {
    pointer-events: none;
}

.sub-screen-slot-img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: middle;
    pointer-events: none;
}

.sub-screen-slot.has-img .sub-screen-slot-img {
    display: block;
}

.sub-screen-slot.has-img.sub-screen-slot-film {
    border-style: solid;
    border-color: transparent;
}

.sub-screen-slot-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(238, 241, 247, 0.62);
    text-shadow: 0 1px 6px rgba(40, 44, 57, 0.18);
    pointer-events: none;
}

.sub-screen-slot-square .sub-screen-slot-hint {
    color: rgba(95, 102, 123, 0.52);
}

.sub-screen-slot.has-img .sub-screen-slot-hint {
    display: none;
}

.sub-screen-quote {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    margin: 8px auto 0;
    text-align: left;
    font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Bradley Hand", cursive;
    font-size: clamp(10px, 2.9vw, 12px);
    line-height: 1.35;
    color: rgba(92, 101, 128, 0.82);
    padding: 6px 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.1) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.sub-screen-split {
    position: relative;
    top: -4px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    margin-top: 12px;
    flex-shrink: 0;
}

.sub-screen-slot-square {
    flex: 0 0 136px;
    width: 136px;
    min-width: 136px;
    margin-left: 10px;
    aspect-ratio: 0.86;
    max-height: 194px;
    align-self: center;
    background: linear-gradient(180deg, rgba(250, 248, 253, 0.97) 0%, rgba(239, 234, 244, 0.95) 100%);
    border: 1px solid rgba(205, 199, 215, 0.76);
    border-radius: 10px;
    padding: 12px 12px 20px;
    box-shadow: 0 20px 32px rgba(112, 110, 130, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.58) inset;
    transform: translateX(15px) rotate(-8deg);
    overflow: visible;
}

.sub-screen-slot-square::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    width: 34px;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(236, 228, 185, 0.86) 0%, rgba(224, 214, 167, 0.74) 100%);
    box-shadow: 0 2px 6px rgba(166, 151, 111, 0.18);
    transform: translateX(-50%) rotate(6deg);
}

.sub-screen-slot-square::after {
    content: '';
    position: absolute;
    inset: 14px 12px 20px;
    border-radius: 4px;
    border: 1px solid rgba(215, 208, 223, 0.78);
    pointer-events: none;
}

.sub-screen-slot-square .sub-screen-slot-img {
    position: relative;
    z-index: 1;
    border-radius: 3px;
}

.sub-screen-slot-square .sub-screen-file-input {
    inset: 12px 12px 20px;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
}

.sub-screen-slot-square .sub-screen-slot-hint {
    inset: 14px 12px 20px;
    z-index: 1;
}

.sub-screen-actions {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    align-content: center;
}

.sub-screen-action {
    border: 1px solid rgba(255, 255, 255, 0.44);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: transform 0.2s ease, opacity 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 12px 28px rgba(112, 128, 165, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.sub-screen-action:active {
    transform: scale(0.96);
    opacity: 0.92;
}

.sub-screen-action--light {
    background: linear-gradient(135deg, rgba(188, 198, 223, 0.88) 0%, rgba(233, 231, 245, 0.88) 50%, rgba(208, 221, 227, 0.88) 100%);
}

/* 子屏：情侣空间 / IF线 / AO3 / 游戏 四格快捷入口整体 88% 不透明度 + 背景模糊 12px */
.sub-screen-split .sub-screen-actions .sub-screen-action--light {
    opacity: 0.88;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}


.sub-screen-action-label {
    font-size: 11px;
    font-weight: 600;
    color: #46556f;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}


.sub-screen-action-icon {
    width: 25px;
    height: 25px;
    border-radius: 9px;
    position: relative;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(188, 198, 223, 0.88) 0%, rgba(233, 231, 245, 0.88) 52%, rgba(208, 221, 227, 0.88) 100%);
    box-shadow: 0 8px 18px rgba(112, 128, 165, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.sub-screen-action-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    display: block;
    pointer-events: none;
}

.sub-screen-action-icon.theme-icon-wrap--custom {
    overflow: hidden;
    align-items: stretch;
    justify-content: stretch;
}

.sub-screen-action-icon-img.theme-icon-img--custom {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    transform: none;
    border-radius: inherit;
}

/* 与旧版 AO3 位一致：略放大图标 */
.sub-screen-action-icon-img--ao3 {
    transform: scale(1.08);
}


/* 子屏四格快捷入口：尺寸对齐主屏快捷（70×70 圆角正方） */
.sub-screen-split .sub-screen-actions {
    gap: var(--home-quick-btn-gap, 12px);
    grid-template-columns: repeat(2, var(--home-quick-btn-size, 70px));
    grid-template-rows: repeat(2, var(--home-quick-btn-size, 70px));
    justify-content: center;
    align-content: center;
    transform: translateX(10px);
}

.sub-screen-split .sub-screen-actions .sub-screen-action {
    width: var(--home-quick-btn-size, 70px);
    height: var(--home-quick-btn-size, 70px);
    min-width: var(--home-quick-btn-size, 70px);
    padding: 6px 5px 5px;
    border-radius: 16px;
    gap: 2px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
}

.sub-screen-split .sub-screen-actions .sub-screen-action-icon {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    max-height: calc(var(--home-quick-btn-size, 70px) - 24px);
    height: auto;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.sub-screen-split .sub-screen-actions .sub-screen-action-label {
    font-size: 12px;
}

@media (max-width: 375px), (max-height: 700px) {
    .sub-screen-fill {
        padding-left: 12px;
        padding-right: 12px;
    }

    .sub-screen-film-inner {
        min-height: 100px;
    }

    .sub-screen-slot-film {
        min-height: 100px;
    }

    .sub-screen-slot-square {
        max-height: 148px;
    }
}

/* 状态栏样式 */
.status-bar {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.status-left {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin-right: auto;
}

.status-right {
    display: flex;
    gap: 12px;
    font-size: 14px;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
}

.status-icon {
    display: inline-block;
    color: #666;
    transition: color 0.3s ease;
}

/* 线性状态栏图标（SVG），使用 currentColor 适配所有界面背景 */
.status-icon-svg {
    width: 20px;
    height: 20px;
    display: block;
    color: rgba(0, 0, 0, 0.55);
    opacity: 0.95;
}

/* 在浅色磨砂栏上更柔和；在照片封面等复杂背景上依赖 shadow 提升可读性 */
.status-icon {
    filter: none;
}

/* 电池图标样式 */


/* 主卡片样式（上封面区 + 头像压线 + 下半信息区；米色整卡底已去除，由上下分区磨砂承担） */
.main-card {
    --main-card-cover-h: clamp(112px, 34vw, 152px);
    --main-card-avatar: 100px;
    --main-card-radius: 24px;
    position: relative;
    margin: 0 clamp(18px, 5.5vw, 28px) 0;
    border-radius: var(--main-card-radius);
    overflow: hidden;
    /* 去掉 inset 高光层，仅保留外阴影 */
    box-shadow: 0 18px 38px rgba(112, 128, 165, 0.2);
    flex-shrink: 0;
    /* 外框无底：上半仅展示封面图（无底色素覆层）；下半磨砂由 .card-content */
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.42);
}

/* 上层封面：仅占卡片顶部约 40% 高度区域，点击换背景；无底色素覆层，保留图片原色。 */
.card-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--main-card-cover-h);
    background: transparent;
    background-size: cover;
    background-position: center;
    z-index: 0;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s ease;
    background-blend-mode: normal;
    mix-blend-mode: normal;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.card-background:hover {
    opacity: 1;
}

/* 下层内容区：与购物格子同款玻璃（75% 透 / 25% 不透）；磨砂 5px */
.card-content {
    position: relative;
    margin-top: var(--main-card-cover-h);
    padding: calc(var(--main-card-avatar) / 2 + 10px) 22px 14px;
    background: linear-gradient(135deg, rgba(188, 198, 223, 0.25) 0%, rgba(233, 231, 245, 0.25) 50%, rgba(208, 221, 227, 0.25) 100%);
    border: none;
    border-radius: 0;
    z-index: 1;
    transition: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: none;
}

/* 去掉上半截式高光叠加层，避免挡主屏壁纸 */
.card-content::before {
    display: none;
}

/* 头像压在封面与白色区分界线上（相对 .card-content 上移半个直径） */
.avatar-section {
    position: absolute;
    top: calc(var(--main-card-avatar) / -2);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    z-index: 4;
    pointer-events: none;
}

.avatar-section .avatar-frame {
    pointer-events: auto;
}

/* 头像下方：签名优先展示（iOS 主文案），装饰图标次之，地点最后 */
.card-meta-below-avatar {
    align-self: stretch;
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-bottom: 4px;
    z-index: 1;
    position: relative;
}

.card-meta-below-avatar .card-signature {
    order: 2;
}

.card-meta-below-avatar .decorative-icons {
    order: 1;
}

.card-meta-below-avatar .card-location {
    order: 3;
}

/* 圆形头像框（白描边，利于叠在封面上） */
.avatar-frame {
    position: relative;
    width: var(--main-card-avatar);
    height: var(--main-card-avatar);
    border-radius: 50%;
    overflow: hidden;
    background-color: #eee;
    border: 3px solid #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-frame:hover {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}

/* 头像图片 */
.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 6;
    pointer-events: none;
}

/* 头像文件输入框 */
.avatar-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}

/* 上传覆盖层 */
.upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 3;
    border-radius: var(--main-card-radius) var(--main-card-radius) 0 0;
}

.card-background:hover .upload-overlay {
    opacity: 1;
}

.upload-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.upload-text {
    font-size: 14px;
    font-weight: 500;
}

/* 加载状态 */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--main-card-radius);
    display: none;
}

.loading-overlay.show {
    display: flex;
}

/* 挂载在 body 上的全屏加载：数据辅助/设置页全屏时，主卡片内的 #loading-overlay 不可见 */
#global-loading-overlay {
    position: fixed !important;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
    z-index: 2147483000;
}

.loading-brand {
    margin-bottom: 14px;
    line-height: 0;
}

.loading-brand-img {
    display: block;
    width: min(168px, 52vw);
    height: auto;
    filter: drop-shadow(0 2px 8px rgba(157, 78, 221, 0.2));
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #9D4EDD;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.decorative-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 5px 8px;
    width: 100%;
    margin: 0;
    z-index: 1;
    position: relative;
    box-sizing: border-box;
}

.decorative-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    width: auto;
    min-width: 1.75em;
    max-width: 100%;
    height: 1.75em;
    padding: 0 0.08em;
    font-size: 14px;
    line-height: 1;
    color: #48484a;
    opacity: 1;
    transition: transform 0.2s ease, color 0.2s ease;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-sizing: border-box;
    /* 半透明磨砂底上提高对比，不依赖字体灰度 */
    text-shadow:
        0 0 1px rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(255, 255, 255, 0.75),
        0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 装饰图标里整段字符表情：与编辑框同字号、避免 Color Emoji 抢行高；单行显示与输入时一致，过长时横向轻滑 */
.decorative-icon--text-run {
    display: block;
    flex: 0 1 100%;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 0 2px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: normal;
    word-spacing: normal;
    text-align: center;
    color: #2c2c2e;
    /* 文本向符号优先，减轻「符号被渲染得过大」的问题；彩色表情置后作回退 */
    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "PingFang SC",
        "Microsoft YaHei",
        "Hiragino Sans",
        "Yu Gothic UI",
        Meiryo,
        sans-serif,
        "Segoe UI Symbol",
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji";
    font-variant-emoji: text;
    -webkit-font-variant-emoji: text;
    font-variant-numeric: normal;
    white-space: pre;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    text-shadow:
        0 0 1px rgba(255, 255, 255, 0.92),
        0 1px 2px rgba(255, 255, 255, 0.78),
        0 1px 4px rgba(0, 0, 0, 0.06);
    transform: none !important;
}

.decorative-icon--text-run::-webkit-scrollbar {
    height: 3px;
}

.decorative-icon--text-run::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 3px;
}

.decorative-icon:hover {
    transform: scale(1.08);
    color: #2c2c2e;
}

/* 主卡片签名：两行均在卡片内水平居中，不裁切为梯形、不侧倾；表情与文字一致对待 */
.card-signature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    width: 100%;
    max-width: 100%;
    z-index: 1;
    position: relative;
    box-sizing: border-box;
    padding: 0 4px;
}

.card-signature-line {
    font-size: 15px;
    font-weight: 500;
    color: #111;
    margin: 0;
    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "PingFang SC",
        "Microsoft YaHei",
        sans-serif,
        "Segoe UI Emoji",
        "Apple Color Emoji",
        "Noto Color Emoji";
    font-style: normal;
    line-height: 1.42;
    letter-spacing: 0;
    word-break: normal;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    text-align: center;
    width: 100%;
    max-width: 100%;
    font-variant-emoji: normal;
    text-transform: none;
    -webkit-transform: none;
    transform: none;
    clip-path: none;
    -webkit-clip-path: none;
    text-shadow:
        0 0 1px rgba(255, 255, 255, 0.95),
        0 1px 2px rgba(255, 255, 255, 0.82),
        0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-signature-line + .card-signature-line {
    margin-top: 4px;
}

.card-location {
    text-align: center;
    margin: 0;
    width: 100%;
    z-index: 1;
    position: relative;
    box-sizing: border-box;
    padding: 0 4px;
}

.card-location span {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: #454548;
    line-height: 1.45;
    letter-spacing: 0.02em;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
    vertical-align: middle;
    text-shadow:
        0 0 1px rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(255, 255, 255, 0.72),
        0 1px 3px rgba(0, 0, 0, 0.07);
}

/* 放入统一容器后不再重复外边距（间距由 .card-meta-below-avatar gap 控制） */
.card-meta-below-avatar .decorative-icons,
.card-meta-below-avatar .card-signature,
.card-meta-below-avatar .card-location {
    margin-top: 0;
    margin-bottom: 0;
}

/* 主屏幕内容区：与主卡片间距 25px；高度随内容增高以便外层 .home-scroll-wrapper 出现纵向滚动条 */
.home-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 25px clamp(16px, 4.5vw, 22px) 0;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
}

/* 左侧区域（快捷 + 弹性留白 + 音乐） */
.left-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    padding-top: 0;
    box-sizing: border-box;
}

/* 快捷区与星座运势同一行 */
.home-top-row {
    --home-top-gap: 38px;
    --home-top-quick-nudge: -4px;
    --home-top-horoscope-nudge: 4px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: var(--home-top-gap);
    width: 100%;
    margin-top: 0;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* 用户反馈：快捷区与星座卡片间距略紧 — 快捷区左移、星座右移各 4px */
.home-top-row .quick-functions {
    margin-left: var(--home-top-quick-nudge);
    margin-right: calc(-1 * var(--home-top-quick-nudge));
}

.home-top-row .horoscope-card {
    margin-left: var(--home-top-horoscope-nudge);
}

/* 与主卡片→快捷区之间留白；不用 flex:1 吃满视口，否则内层总高度被压扁、主屏无法滚动 */
.home-main-flex-spacer {
    flex: 0 0 auto;
    min-height: clamp(12px, 3vh, 40px);
    max-height: 48px;
    width: 100%;
    min-width: 0;
    pointer-events: none;
}

/* 模态框样式 */
/* 设置页面样式 */
#settings-page,
#data-assist-page {
    display: none;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.settings-content {
    flex: 1;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.settings-content::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

#settings-page.active,
#data-assist-page.active,
#appearance-mode-page.active {
    display: flex;
}

.settings-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
}

.back-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.back-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.settings-header h1 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    flex: 1;
    text-align: center;
    margin: 0;
}

.settings-group {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.setting-group-title {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    padding: 12px 16px 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preset-buttons {
    display: flex;
    gap: 12px;
    padding: 0 16px 12px;
}

.preset-btn {
    flex: 1;
    padding: 8px 12px;
    background: rgba(245, 245, 245, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
}

.preset-btn:hover {
    background: rgba(235, 235, 235, 0.8);
    transform: translateY(-1px);
}

.setting-item {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease;
    flex-wrap: wrap;
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-item:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.setting-item.with-arrow {
    justify-content: space-between;
    cursor: pointer;
}

.setting-item.with-toggle {
    justify-content: space-between;
}

.setting-item.with-value {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.setting-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.setting-item.with-value .setting-label {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.setting-item.vertical-layout {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.setting-item.vertical-layout .setting-label {
    width: 100%;
    flex: none;
}

.setting-item.vertical-layout .api-key-container,
.setting-item.vertical-layout .setting-input {
    width: 100%;
}

.model-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.model-name-row .setting-label {
    font-size: 16px;
    margin-right: 10px;
    margin-left: 11px;
    white-space: nowrap;
}

.model-select-container {
    position: relative;
    flex: 1;
}

.model-select-container .setting-input {
    font-size: 14px;
    padding: 10px 30px 10px 12px;
    width: calc(100% + 10px);
    border: 1px solid transparent;
    background-color: transparent;
    transition: all 0.3s ease;
}

.model-select-container .setting-input:hover {
    border-color: rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.8);
}

.model-select-container .setting-input:focus {
    outline: none;
    border-color: #07C160;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.1);
}

.model-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    pointer-events: none;
    font-size: 12px;
}

.setting-label {
    font-size: 16px;
    color: #333;
    flex: 0 0 100px;
}

.setting-select {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 200px;
    z-index: 1000;
}


.setting-item.danger .setting-label {
    color: #ff3b30;
}

html[data-appearance="dark"] {
    color-scheme: dark;
    /* 交互控件 · iOS / Android 深色通用（高对比、可点区域清晰） */
    --dark-btn-text: #f5f5f7;
    --dark-btn-text-soft: rgba(235, 235, 245, 0.78);
    --dark-icon-btn-bg: rgba(72, 72, 76, 0.92);
    --dark-icon-btn-bg-hover: rgba(88, 88, 94, 0.96);
    --dark-icon-btn-border: rgba(255, 255, 255, 0.2);
    --dark-icon-btn-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.32);
    --dark-btn-primary-bg: linear-gradient(180deg, #0a84ff 0%, #0077ed 100%);
    --dark-btn-primary-solid: #0a84ff;
    --dark-btn-secondary-bg: rgba(118, 118, 128, 0.36);
    --dark-btn-secondary-border: rgba(255, 255, 255, 0.16);
    --dark-line-icon-filter: brightness(0) invert(1);
}

/*
 * 夜间模式 · 线性图标与功能按钮可见性
 * line-icons SVG 描边为 #222，<img> 加载时 CSS 无法改 stroke，须 filter 提亮。
 * 自定义上传图标路径不含 line-icons/，不会被误处理。
 */
html[data-appearance="dark"] img[src*="line-icons/"] {
    filter: var(--dark-line-icon-filter);
    opacity: 0.94;
}


html[data-appearance="dark"] #chat-page.chat-page--offline-group .chat-header .back-btn img,
html[data-appearance="dark"] #chat-page.chat-page--offline-group .chat-header .chat-header-btn img,
html[data-appearance="dark"] #chat-page.chat-page--offline-group .chat-header .back-btn svg,
html[data-appearance="dark"] #chat-page.chat-page--offline-group .chat-header .chat-header-btn svg {
    filter: none !important;
    opacity: 1 !important;
}

html[data-appearance="dark"] .wechat-nav-item.active .wechat-nav-img {
    filter: brightness(0) saturate(100%) invert(62%) sepia(52%) saturate(728%) hue-rotate(95deg) brightness(95%) contrast(92%);
    opacity: 1;
}

/* 顶栏 / 页头 · 图标按钮：浅底描边，避免「透明底 + 深色图标」看不见 */
html[data-appearance="dark"] .back-btn,
html[data-appearance="dark"] .wechat-back-btn,
html[data-appearance="dark"] .system-header-btn,
html[data-appearance="dark"] .books-header-btn,
html[data-appearance="dark"] .books-header-btn--icon-only,
html[data-appearance="dark"] .chat-header .back-btn,
html[data-appearance="dark"] .chat-header-btn,
html[data-appearance="dark"] .wechat-header-btn,
html[data-appearance="dark"] #wechat-discover-page .wechat-memory-back-btn,
html[data-appearance="dark"] #wechat-discover-page .wechat-memory-header-action,
html[data-appearance="dark"] #wechat-discover-page .wechat-settings-back {
    color: var(--dark-btn-text) !important;
    background: var(--dark-icon-btn-bg) !important;
    border: 1px solid var(--dark-icon-btn-border) !important;
    box-shadow: var(--dark-icon-btn-shadow) !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

html[data-appearance="dark"] .back-btn:hover,
html[data-appearance="dark"] .wechat-back-btn:hover,
html[data-appearance="dark"] .system-header-btn:hover,
html[data-appearance="dark"] .books-header-btn:hover,
html[data-appearance="dark"] .chat-header .back-btn:hover,
html[data-appearance="dark"] .chat-header-btn:hover,
html[data-appearance="dark"] .wechat-header-btn:hover,
html[data-appearance="dark"] #wechat-discover-page .wechat-memory-back-btn:hover,
html[data-appearance="dark"] #wechat-discover-page .wechat-memory-header-action:hover,
html[data-appearance="dark"] #wechat-discover-page .wechat-settings-back:hover {
    background: var(--dark-icon-btn-bg-hover) !important;
}

html[data-appearance="dark"] .back-btn:active,
html[data-appearance="dark"] .wechat-back-btn:active,
html[data-appearance="dark"] .system-header-btn:active,
html[data-appearance="dark"] .books-header-btn:active,
html[data-appearance="dark"] .chat-header-btn:active,
html[data-appearance="dark"] .wechat-header-btn:active {
    background: rgba(100, 100, 106, 0.98) !important;
}

html[data-appearance="dark"] .back-arrow {
    color: var(--dark-btn-text);
}

/* 主操作 / 次要 / 添加 · 弹窗与表单底栏 */
html[data-appearance="dark"] .btn-add,
html[data-appearance="dark"] .btn-save,
html[data-appearance="dark"] .save-btn {
    background: var(--dark-btn-primary-bg) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 4px 14px rgba(10, 132, 255, 0.28) !important;
}

html[data-appearance="dark"] .btn-cancel,
html[data-appearance="dark"] .cancel-btn {
    background: var(--dark-btn-secondary-bg) !important;
    color: var(--dark-btn-text) !important;
    border: 1px solid var(--dark-btn-secondary-border) !important;
    box-shadow: none !important;
}

html[data-appearance="dark"] .btn-add:hover,
html[data-appearance="dark"] .btn-save:hover,
html[data-appearance="dark"] .save-btn:hover {
    filter: brightness(1.08);
}

html[data-appearance="dark"] .btn-cancel:hover,
html[data-appearance="dark"] .cancel-btn:hover {
    background: rgba(118, 118, 128, 0.48) !important;
}

html[data-appearance="dark"] .modal-footer .btn-add,
html[data-appearance="dark"] .modal-footer .btn-cancel,
html[data-appearance="dark"] .modal-footer .btn-save {
    min-height: 44px;
}

/* 微信 · 顶栏标题筛选钮保持文字型，不加实心底（与 + / 返回区分） */
html[data-appearance="dark"] .wechat-header-filter-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--dark-btn-text) !important;
}

html[data-appearance="dark"] .wechat-header-filter-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

html[data-appearance="dark"] body {
    background: linear-gradient(135deg, #0b0b0c 0%, #151518 100%);
    color: #f5f5f7;
}

html[data-appearance="dark"] body::before {
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 40%),
        radial-gradient(circle at 40% 70%, rgba(255,255,255,0.05) 0%, transparent 45%),
        radial-gradient(circle at 70% 80%, rgba(255,255,255,0.04) 0%, transparent 35%),
        radial-gradient(circle at 10% 80%, rgba(255,255,255,0.05) 0%, transparent 40%);
}

html[data-appearance="dark"] #app {
    background-color: #111214;
    box-shadow: 0 0 28px rgba(0, 0, 0, 0.32);
}

/* 已设全局底图时：不叠一层实色，避免改色/冲淡用户背景 */
html[data-appearance="dark"][data-user-global-wallpaper="1"] #app {
    background-color: transparent;
}

html[data-appearance="dark"] #settings-page,
html[data-appearance="dark"] #data-assist-page,
html[data-appearance="dark"] #appearance-mode-page,
html[data-appearance="dark"] #system-page,
html[data-appearance="dark"] #books-page,
html[data-appearance="dark"] .theme-page-root {
    background: linear-gradient(135deg, #111214 0%, #1c1c1e 100%);
}

html[data-appearance="dark"] #home-screen {
    --home-default-page-bg: #0e0e10;
    --ios-night-ctrl: rgba(30, 30, 34, 0.58);
    --ios-night-edge: 0 0 0 0.5px rgba(255, 255, 255, 0.1);
    --ios-night-glow: 0 0 22px rgba(100, 150, 255, 0.12);
    --ios-night-glow-soft: 0 0 36px rgba(70, 110, 200, 0.06);
    --ios-night-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    background: var(--home-default-page-bg);
}

/* 主界面有自定义壁纸：底图与壁纸层不套滤镜/不强行改色，仅保留 letterbox 时的深色填充 */
html[data-appearance="dark"][data-user-home-wallpaper="1"] #home-screen {
    background-color: transparent;
}

html[data-appearance="dark"][data-user-home-wallpaper="1"] #home-screen .home-screen-bg-layer {
    background: transparent;
    filter: none;
}

html[data-appearance="dark"] #settings-page .settings-content,
html[data-appearance="dark"] #data-assist-page .settings-content,
html[data-appearance="dark"] #appearance-mode-page .settings-content {
    background: rgba(28, 28, 30, 0.72);
}

html[data-appearance="dark"] #settings-page .settings-header,
html[data-appearance="dark"] #data-assist-page .settings-header,
html[data-appearance="dark"] #appearance-mode-page .settings-header {
    background: rgba(28, 28, 30, 0.88);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-appearance="dark"] #settings-page .settings-header h1,
html[data-appearance="dark"] #data-assist-page .settings-header h1,
html[data-appearance="dark"] #appearance-mode-page .settings-header h1,
html[data-appearance="dark"] #settings-page .back-btn,
html[data-appearance="dark"] #data-assist-page .back-btn,
html[data-appearance="dark"] #appearance-mode-page .back-btn,
html[data-appearance="dark"] #settings-page .status-bar,
html[data-appearance="dark"] #data-assist-page .status-bar,
html[data-appearance="dark"] #appearance-mode-page .status-bar {
    color: #f5f5f7;
}

html[data-appearance="dark"] #settings-page .back-btn:hover,
html[data-appearance="dark"] #data-assist-page .back-btn:hover,
html[data-appearance="dark"] #appearance-mode-page .back-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

html[data-appearance="dark"] #settings-page .settings-group,
html[data-appearance="dark"] #data-assist-page .settings-group,
html[data-appearance="dark"] #appearance-mode-page .settings-group {
    background: rgba(44, 44, 46, 0.92);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

html[data-appearance="dark"] #settings-page .setting-item,
html[data-appearance="dark"] #data-assist-page .setting-item,
html[data-appearance="dark"] #appearance-mode-page .setting-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

html[data-appearance="dark"] #settings-page .setting-item:hover,
html[data-appearance="dark"] #data-assist-page .setting-item:hover,
html[data-appearance="dark"] #appearance-mode-page .setting-item:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

html[data-appearance="dark"] #settings-page .setting-label,
html[data-appearance="dark"] #data-assist-page .setting-label,
html[data-appearance="dark"] #appearance-mode-page .setting-label,
html[data-appearance="dark"] #appearance-mode-page .appearance-mode-title,
html[data-appearance="dark"] #appearance-mode-page .appearance-mode-card-label {
    color: #f5f5f7;
}

html[data-appearance="dark"] #settings-page .setting-arrow,
html[data-appearance="dark"] #data-assist-page .setting-arrow,
html[data-appearance="dark"] #appearance-mode-page .setting-arrow,
html[data-appearance="dark"] #appearance-mode-page .appearance-mode-copy {
    color: rgba(235, 235, 245, 0.68);
}

html[data-appearance="dark"] #appearance-mode-page .appearance-mode-card {
    background: linear-gradient(180deg, rgba(44, 44, 46, 0.98) 0%, rgba(34, 34, 36, 0.96) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-appearance="dark"] #home-screen > .status-bar {
    color: rgba(255, 255, 255, 0.98);
    background: rgba(18, 18, 20, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

html[data-appearance="dark"] #home-screen > .status-bar .status-left {
    color: rgba(255, 255, 255, 0.98);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
}

html[data-appearance="dark"] #home-screen > .status-bar .status-icon-svg {
    color: rgba(255, 255, 255, 0.88);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22));
}

/* 主界面壁纸 + 夜间：状态栏用轻黑玻璃，避免厚重暗条“盖住”壁纸；读数仍靠阴影与对比 */
html[data-appearance="dark"][data-user-home-wallpaper="1"] #home-screen.home-screen--wallpaper > .status-bar {
    background: rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: rgba(255, 255, 255, 0.97);
}

html[data-appearance="dark"][data-user-home-wallpaper="1"] #home-screen.home-screen--wallpaper > .status-bar .status-left {
    color: rgba(255, 255, 255, 0.97);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

html[data-appearance="dark"][data-user-home-wallpaper="1"] #home-screen.home-screen--wallpaper > .status-bar .status-icon-svg {
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

html[data-appearance="dark"] .main-card:not(.main-card--wallpaper) {
    background: rgba(28, 28, 30, 0.98);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42), var(--ios-night-edge, 0 0 0 0.5px rgba(255, 255, 255, 0.08));
    border-color: rgba(255, 255, 255, 0.1);
}

/* 主卡片有封面图：不切暗色层压在用户封面图上 */
html[data-appearance="dark"] .main-card.main-card--wallpaper {
    background: transparent;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48), 0 0 0 0.5px rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.12);
}

/* 深色：下半与主屏功能格同款低不透明磨砂；磨砂 5px */
html[data-appearance="dark"] .card-content {
    background: rgba(30, 30, 34, 0.25);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: none;
}

html[data-appearance="dark"] .card-meta-below-avatar .decorative-icon {
    color: rgba(249, 249, 251, 0.93);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72), 0 0 1px rgba(0, 0, 0, 0.88);
}

html[data-appearance="dark"] .card-meta-below-avatar .decorative-icon:hover {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

html[data-appearance="dark"] .card-meta-below-avatar .decorative-icon--text-run {
    color: rgba(249, 249, 251, 0.94);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.74), 0 0 1px rgba(0, 0, 0, 0.9);
}

html[data-appearance="dark"] .card-meta-below-avatar .decorative-icon--text-run::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
}

html[data-appearance="dark"] .card-meta-below-avatar .card-signature-line {
    color: rgba(250, 250, 252, 0.97);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.76), 0 0 1px rgba(0, 0, 0, 0.9);
}

html[data-appearance="dark"] .card-meta-below-avatar .card-location span {
    color: rgba(235, 235, 245, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.68);
}

html[data-appearance="dark"] .avatar-frame {
    border-color: rgba(231, 233, 245, 0.3);
    box-shadow: 0 10px 24px rgba(35, 42, 61, 0.32);
}

html[data-appearance="dark"] .clock-time,
html[data-appearance="dark"] .clock-date,
html[data-appearance="dark"] .clock-day,
html[data-appearance="dark"] .function-name,
html[data-appearance="dark"] .nav-name,
html[data-appearance="dark"] .sub-screen-clock-block,
html[data-appearance="dark"] .sub-screen-quote {
    color: #f4f3fb;
}

html[data-appearance="dark"] .function-name {
    color: rgba(242, 242, 247, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* 主屏 / 三联：与深色 .sub-screen-action--light（含情侣空间格）同色、同模糊强度；勿改上面 .sub-screen-action--light 本身 */
html[data-appearance="dark"] .function-item,
html[data-appearance="dark"] .bottom-nav,
html[data-appearance="dark"] .music-player-card,
html[data-appearance="dark"] .sub-screen-film {
    background: rgba(30, 30, 34, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.09),
        0 0 22px rgba(110, 150, 255, 0.12),
        0 0 40px rgba(60, 90, 160, 0.06),
        0 12px 30px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 1;
}

/* 主功能格 / 子屏等其他小组件：iOS 式深色 + 低亮磨砂 + 边缘微光（保持原强度） */
html[data-appearance="dark"] .sub-screen-cal-wrap,
html[data-appearance="dark"] .wechat-memory-calendar-card,
html[data-appearance="dark"] .sub-screen-action--light {
    background: rgba(30, 30, 34, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.09),
        0 0 22px rgba(110, 150, 255, 0.12),
        0 0 40px rgba(60, 90, 160, 0.06),
        0 12px 30px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

@media (hover: hover) and (pointer: fine) {
    html[data-appearance="dark"] .function-item:hover,
    html[data-appearance="dark"] .nav-item:hover {
        background: rgba(255, 255, 255, 0.08);
        box-shadow:
            0 0 0 0.5px rgba(255, 255, 255, 0.12),
            0 0 24px rgba(120, 170, 255, 0.16),
            0 0 48px rgba(80, 120, 200, 0.08),
            0 14px 32px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

html[data-appearance="dark"] .function-item:active,
html[data-appearance="dark"] .nav-item:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.97);
}

html[data-appearance="dark"] .function-icon,
html[data-appearance="dark"] .nav-icon,
html[data-appearance="dark"] .sub-screen-slot-film,
html[data-appearance="dark"] .music-controls-main .music-skip-btn,
html[data-appearance="dark"] .music-controls-main .music-play-btn,
html[data-appearance="dark"] .music-more-btn {
    background: rgba(38, 38, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.08),
        0 0 18px rgba(110, 155, 255, 0.12),
        0 6px 14px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-appearance="dark"] .books-header,
html[data-appearance="dark"] .system-header,
html[data-appearance="dark"] .theme-page-header {
    background: rgba(28, 28, 30, 0.88);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-appearance="dark"] .books-header h1,
html[data-appearance="dark"] .system-header h1,
html[data-appearance="dark"] .theme-page-header h1,
html[data-appearance="dark"] .system-header-btn,
html[data-appearance="dark"] .books-header-btn {
    color: var(--dark-btn-text, #f5f5f7);
}

html[data-appearance="dark"] .music-album-wrap {
    background: rgba(40, 40, 46, 0.75);
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 0 20px rgba(100, 145, 255, 0.1);
}

html[data-appearance="dark"] .music-title,
html[data-appearance="dark"] .music-artist,
html[data-appearance="dark"] .music-time,
html[data-appearance="dark"] .music-more-btn,
html[data-appearance="dark"] .music-upload-hint,
html[data-appearance="dark"] .music-album-placeholder,
html[data-appearance="dark"] .music-more-item {
    color: rgba(245, 245, 247, 0.94);
}

html[data-appearance="dark"] .music-progress-bg {
    background: rgba(255, 255, 255, 0.16);
}

html[data-appearance="dark"] .books-content {
    background: linear-gradient(180deg, rgba(17, 18, 20, 0.86) 0%, rgba(28, 28, 30, 0.96) 100%);
}

html[data-appearance="dark"] .world-book-item {
    background: rgba(44, 44, 46, 0.94);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

html[data-appearance="dark"] .world-book-item:hover {
    background: rgba(58, 58, 60, 0.94);
}

html[data-appearance="dark"] .world-book-item-title,
html[data-appearance="dark"] .world-book-empty-text {
    color: #f5f5f7;
}

html[data-appearance="dark"] .world-book-item-preview,
html[data-appearance="dark"] .world-book-empty-hint,
html[data-appearance="dark"] .world-book-empty-icon {
    color: rgba(235, 235, 245, 0.56);
}

html[data-appearance="dark"] .modal-content,
html[data-appearance="dark"] .world-book-select-modal-content,
html[data-appearance="dark"] .add-world-book-modal-content,
html[data-appearance="dark"] .new-folder-modal-content {
    background: linear-gradient(180deg, rgba(44, 44, 46, 0.98) 0%, rgba(28, 28, 30, 0.98) 100%);
    color: #f5f5f7;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
}

html[data-appearance="dark"] .modal-header,
html[data-appearance="dark"] .modal-footer,
html[data-appearance="dark"] .world-book-select-footer {
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-appearance="dark"] .modal-header h3,
html[data-appearance="dark"] .world-book-item.world-book-item--checked .world-book-item-title,
html[data-appearance="dark"] .world-book-folder-header,
html[data-appearance="dark"] .world-book-select-item,
html[data-appearance="dark"] .form-group label {
    color: #f5f5f7;
}

html[data-appearance="dark"] .world-book-select-folder {
    background: rgba(58, 58, 60, 0.82);
}

html[data-appearance="dark"] .world-book-select-folder-header:hover {
    background: rgba(72, 72, 74, 0.92);
}

html[data-appearance="dark"] .world-book-select-item {
    background: rgba(44, 44, 46, 0.92);
}

html[data-appearance="dark"] .world-book-select-item:hover {
    background: rgba(58, 58, 60, 0.92);
}

html[data-appearance="dark"] .world-book-select-item.checked {
    border-color: #30d158;
    background: rgba(48, 209, 88, 0.12);
}

html[data-appearance="dark"] .world-book-folder-select,
html[data-appearance="dark"] .world-book-textarea,
html[data-appearance="dark"] .new-folder-input,
html[data-appearance="dark"] .form-input {
    background: rgba(58, 58, 60, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    color: #f5f5f7;
}

html[data-appearance="dark"] .form-hint,
html[data-appearance="dark"] .world-book-item-preview,
html[data-appearance="dark"] .modal-close,
html[data-appearance="dark"] .world-book-select-modal-content .modal-close {
    color: rgba(235, 235, 245, 0.66);
}


html[data-appearance="dark"] .theme-section-card {
    background: rgba(44, 44, 46, 0.94);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

html[data-appearance="dark"] .theme-section-title,
html[data-appearance="dark"] .theme-btn-icon-label,
html[data-appearance="dark"] .theme-icon-label {
    color: #f5f5f7;
}

html[data-appearance="dark"] .theme-section-hint,
html[data-appearance="dark"] .theme-thumb-placeholder {
    color: rgba(235, 235, 245, 0.62);
}

html[data-appearance="dark"] .theme-thumb-wrap {
    background: rgba(58, 58, 60, 0.86);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-appearance="dark"] .theme-btn-secondary {
    background: #30d158;
    color: #09120c;
}


html[data-appearance="dark"] #twitter-page,
html[data-appearance="dark"] #wechat-page,
html[data-appearance="dark"] .couple-space-overlay,
html[data-appearance="dark"] .couple-space-shell {
    background: linear-gradient(180deg, #111214 0%, #1c1c1e 100%);
}

html[data-appearance="dark"] #wechat-page,
html[data-appearance="dark"] .wechat-page,
html[data-appearance="dark"] .wechat-chat-page,
html[data-appearance="dark"] .wechat-discover-page,
html[data-appearance="dark"] .wechat-contacts-page,
html[data-appearance="dark"] .wechat-me-page,
html[data-appearance="dark"] .wechat-settings-page,
html[data-appearance="dark"] .wechat-me-content,
html[data-appearance="dark"] #wechat-discover-page .discover-content,
html[data-appearance="dark"] .wechat-chat-list {
    background: linear-gradient(180deg, #111214 0%, #1c1c1e 100%);
    color: #f5f5f7;
}

html[data-appearance="dark"] #wechat-page .status-bar,
html[data-appearance="dark"] #wechat-page .wechat-header,
html[data-appearance="dark"] #wechat-page .wechat-top-bar,
html[data-appearance="dark"] #wechat-page .wechat-search-bar,
html[data-appearance="dark"] #wechat-page .wechat-bottom-nav,
html[data-appearance="dark"] #wechat-page .wechat-chat-input-bar,
html[data-appearance="dark"] #wechat-page .wechat-chat-header,
html[data-appearance="dark"] .wechat-me-header,
html[data-appearance="dark"] .wechat-settings-header {
    background: rgba(28, 28, 30, 0.94);
    color: #f5f5f7;
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-appearance="dark"] #wechat-page .wechat-session-item,
html[data-appearance="dark"] #wechat-page .wechat-contact-item,
html[data-appearance="dark"] #wechat-page .wechat-setting-item,
html[data-appearance="dark"] #wechat-page .wechat-message,
html[data-appearance="dark"] #wechat-page .wechat-discover-item,
html[data-appearance="dark"] .wechat-me-profile,
html[data-appearance="dark"] .wechat-me-function-item {
    background: rgba(44, 44, 46, 0.94);
    color: #f5f5f7;
    border-color: rgba(255, 255, 255, 0.06);
}

html[data-appearance="dark"] .wechat-me-header h1,
html[data-appearance="dark"] .wechat-me-name,
html[data-appearance="dark"] .wechat-me-function-name,
html[data-appearance="dark"] .wechat-settings-header-title,
html[data-appearance="dark"] .wechat-session-name,
html[data-appearance="dark"] .wechat-discover-item-title {
    color: #f5f5f7;
}

html[data-appearance="dark"] .wechat-me-id,
html[data-appearance="dark"] .wechat-me-function-arrow,
html[data-appearance="dark"] .wechat-session-preview,
html[data-appearance="dark"] .wechat-session-meta {
    color: rgba(235, 235, 245, 0.62);
}

/* —— 夜间：无全局底图时整页深色系；有全局底时仅让交互层/面板深色磨砂；功能键统一边缘微光 —— */
html[data-appearance="dark"]:not([data-user-global-wallpaper="1"]) #phone-page {
    background: linear-gradient(180deg, #0e0e10 0%, #1a1a1c 100%) !important;
    background-image: none !important;
}

/* 微信主壳 / 独立聊天页 / 顶栏与按钮 */
html[data-appearance="dark"] #wechat-page {
    background: #111112 !important;
    color: #f5f5f7;
}

html[data-appearance="dark"] #chat-page {
    background: #111112 !important;
    color: #f5f5f7;
}

html[data-appearance="dark"] .wechat-header {
    background: rgba(24, 24, 28, 0.92) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

html[data-appearance="dark"] .wechat-header h1,
html[data-appearance="dark"] .wechat-header-btn,
html[data-appearance="dark"] .wechat-header-filter-btn,
html[data-appearance="dark"] .wechat-header-filter-title {
    color: #f5f5f7 !important;
}

html[data-appearance="dark"] .wechat-header-filter-pill {
    background: rgba(7, 193, 96, 0.22);
    color: #34d399;
    border: 1px solid rgba(7, 193, 96, 0.28);
}

html[data-appearance="dark"] .wechat-back-btn,
html[data-appearance="dark"] .wechat-header-btn {
    background: var(--dark-icon-btn-bg, rgba(72, 72, 76, 0.92)) !important;
    border: 1px solid var(--dark-icon-btn-border, rgba(255, 255, 255, 0.2)) !important;
    border-radius: 10px;
    box-shadow: var(--dark-icon-btn-shadow, 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.32)) !important;
}

html[data-appearance="dark"] .wechat-chat-group-menu,
html[data-appearance="dark"] .wechat-add-menu {
    background: rgba(34, 34, 38, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f5f5f7;
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.06), 0 0 24px rgba(0, 0, 0, 0.45);
}

html[data-appearance="dark"] .chat-header {
    background: rgba(24, 24, 28, 0.92) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: #f5f5f7;
}

html[data-appearance="dark"] .chat-header-title-cluster h1,
html[data-appearance="dark"] .chat-header-btn {
    color: #f5f5f7 !important;
}

html[data-appearance="dark"] .chat-header-btn,
html[data-appearance="dark"] .chat-header .back-btn {
    background: var(--dark-icon-btn-bg, rgba(72, 72, 76, 0.92)) !important;
    border: 1px solid var(--dark-icon-btn-border, rgba(255, 255, 255, 0.2)) !important;
    box-shadow: var(--dark-icon-btn-shadow, 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.32)) !important;
    border-radius: 8px;
}

html[data-appearance="dark"] #wechat-page .wechat-bottom-nav,
html[data-appearance="dark"] .wechat-me-page .wechat-bottom-nav,
html[data-appearance="dark"] .wechat-discover-page .wechat-bottom-nav {
    background: rgba(20, 20, 24, 0.94) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 0 28px rgba(80, 120, 200, 0.12) !important;
}

html[data-appearance="dark"] #wechat-page .wechat-nav-item {
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.05), 0 0 12px rgba(100, 140, 255, 0.08);
    border-radius: 14px;
}

/* #twitter-page 无全局底时的实色深底见「统一玻璃风」段末的 html[data-appearance="dark"]:not([data-user-global-wallpaper]) 规则 */

/* AO3 全层（不跟随主题全局图）：夜间深底 + 卡片/主按钮微光 */
html[data-appearance="dark"] .ao3-root__backdrop,
html[data-appearance="dark"] .ao3-root__panel,
html[data-appearance="dark"] .ao3-page,
html[data-appearance="dark"] .ao3-root__header {
    background: linear-gradient(180deg, #0d0c10 0%, #121118 100%) !important;
    color: #f5f5f7;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-appearance="dark"] .ao3-root__title,
html[data-appearance="dark"] .ao3-hero__title,
html[data-appearance="dark"] .ao3-page-card__title,
html[data-appearance="dark"] .ao3-board-card__name,
html[data-appearance="dark"] .ao3-board-more__summary,
html[data-appearance="dark"] .ao3-section__title,
html[data-appearance="dark"] .ao3-profile__name,
html[data-appearance="dark"] .ao3-thread-card__name,
html[data-appearance="dark"] .ao3-char-card,
html[data-appearance="dark"] .ao3-menu-item,
html[data-appearance="dark"] .ao3-primary-btn,
html[data-appearance="dark"] .ao3-action-btn,
html[data-appearance="dark"] .ao3-link-btn {
    color: #f0f0f5;
}

html[data-appearance="dark"] .ao3-hero__desc,
html[data-appearance="dark"] .ao3-page-card__desc,
html[data-appearance="dark"] .ao3-board-card__desc,
html[data-appearance="dark"] .ao3-empty-inline,
html[data-appearance="dark"] .ao3-char-card__meta,
html[data-appearance="dark"] .ao3-profile__bio,
html[data-appearance="dark"] .ao3-form__label {
    color: rgba(220, 220, 232, 0.78) !important;
}

html[data-appearance="dark"] .ao3-root__back,
html[data-appearance="dark"] .ao3-root__refresh,
html[data-appearance="dark"] .ao3-root__add,
html[data-appearance="dark"] .ao3-home-refresh,
html[data-appearance="dark"] .ao3-board-refresh,
html[data-appearance="dark"] .ao3-primary-btn,
html[data-appearance="dark"] .ao3-action-btn,
html[data-appearance="dark"] .ao3-link-btn {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(32, 32, 38, 0.62) !important;
    color: #f0f0f5 !important;
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.08),
        0 0 20px rgba(120, 160, 255, 0.12),
        0 0 40px rgba(60, 90, 160, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(12px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
}

html[data-appearance="dark"] .ao3-quick-card,
html[data-appearance="dark"] .ao3-board-card,
html[data-appearance="dark"] .ao3-board-more,
html[data-appearance="dark"] .ao3-menu-item,
html[data-appearance="dark"] .ao3-char-card,
html[data-appearance="dark"] .ao3-thread-card,
html[data-appearance="dark"] .ao3-rank-item,
html[data-appearance="dark"] .ao3-page-card {
    background: rgba(28, 28, 32, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f0f0f5;
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.07),
        0 0 20px rgba(100, 140, 255, 0.1),
        0 6px 18px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-appearance="dark"] #wechat-api-settings-modal .modal-content.api-settings-modal-content,
html[data-appearance="dark"] #wechat-active-message-modal .modal-content.api-settings-modal-content {
    background: linear-gradient(180deg, rgba(36, 36, 40, 0.98) 0%, rgba(24, 24, 28, 0.99) 100%) !important;
    color: #f5f5f7;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-appearance="dark"] .couple-space-overlay,
html[data-appearance="dark"] .couple-space-panel,
html[data-appearance="dark"] .couple-space-card,
html[data-appearance="dark"] .couple-space-sheet,
html[data-appearance="dark"] .couple-space-main {
    color: #f5f5f7;
    background: rgba(28, 28, 30, 0.94);
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-appearance-switching] body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: 2147483646;
    animation: ios-appearance-fade 0.32s ease;
}

html[data-appearance="dark"][data-appearance-switching] body::after {
    background: rgba(12, 12, 14, 0.16);
}

@keyframes ios-appearance-fade {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.settings-disclosure {
    display: block;
    background: rgba(255, 255, 255, 0.92);
}

.settings-disclosure-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    user-select: none;
}

.settings-disclosure-summary .setting-label {
    flex: 1;
}

/* 主设置「系统通知」：summary 已与 .setting-item 同级内边距，内层再套 setting-item 会叠成双倍行高 */
#system-notification-card > .settings-disclosure-summary > .setting-item.with-toggle {
    flex: 1;
    margin: 0;
    padding: 0;
    border-bottom: none;
}

.settings-disclosure-summary::-webkit-details-marker {
    display: none;
}

.settings-disclosure-summary::marker {
    content: none;
}

.settings-disclosure:hover .settings-disclosure-summary {
    background: rgba(0, 0, 0, 0.02);
}


.settings-disclosure-panel {
    padding: 0 16px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.settings-disclosure-panel p {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: #4a4a4a;
}

html[data-appearance="dark"] .settings-disclosure {
    background: rgba(30, 30, 34, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-appearance="dark"] .settings-disclosure:hover .settings-disclosure-summary {
    background: rgba(255, 255, 255, 0.06);
}

html[data-appearance="dark"] .settings-disclosure-summary,
html[data-appearance="dark"] .settings-disclosure-summary .setting-label,
html[data-appearance="dark"] .settings-disclosure-panel {
    color: rgba(245, 245, 247, 0.94);
}

html[data-appearance="dark"] .settings-disclosure-panel {
    border-top-color: rgba(255, 255, 255, 0.08);
    background: rgba(22, 22, 26, 0.32);
}

html[data-appearance="dark"] .settings-disclosure-panel p,
html[data-appearance="dark"] .settings-disclosure-panel [style*="color:#7a7a7a"],
html[data-appearance="dark"] .settings-disclosure-panel [style*="color: #7a7a7a"] {
    color: rgba(235, 235, 245, 0.68) !important;
}

html[data-appearance="dark"] .settings-disclosure-panel .api-input-container {
    background: rgba(44, 44, 48, 0.5);
    border-color: rgba(255, 255, 255, 0.08);
}

.setting-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    width: 100%;
}

.setting-input:focus {
    outline: none;
    border-color: #07C160;
    box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.1);
}

.api-key-container {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.api-key-container .setting-input {
    flex: 1;
    padding-right: 40px;
}

.api-key-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 16px;
    color: #999;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
    z-index: 1;
}

.api-key-clear:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #666;
}

.setting-select {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
}

.setting-select:focus {
    outline: none;
    border-color: #07C160;
    box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.1);
}

.fetch-models-btn {
    width: calc(100% - 32px);
    margin: 12px 16px;
    padding: 12px;
    background: rgba(245, 245, 245, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fetch-models-btn:hover:not(:disabled) {
    background: rgba(235, 235, 235, 0.8);
    transform: translateY(-1px);
}

.fetch-models-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 微信专用 API：拉取模型列表与「拉取模型列表」按钮同宽对齐，避免 flex-start 下窄条左偏 */
#wechat-api-settings-modal #wechat-models-list.models-list {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    margin: 10px 16px 0;
    box-sizing: border-box;
    border-radius: 8px;
    max-height: min(220px, 38vh);
}

/* 微信专用 API：拉取模型与连接状态 */
.wechat-connection-status {
    margin: 4px 16px 0;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.wechat-api-settings-footer {
    margin-top: 8px;
}

.wechat-clear-api-btn {
    width: calc(100% - 32px);
    margin: 8px 16px 0;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px dashed rgba(0, 0, 0, 0.14);
    border-radius: 10px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wechat-clear-api-btn:hover {
    background: rgba(245, 245, 245, 0.9);
    color: #444;
}

.fetch-icon {
    font-size: 16px;
}

.setting-value {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.setting-number {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background: transparent;
    text-align: right;
    transition: all 0.3s ease;
}

.setting-number:hover {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.8);
}

.setting-number:focus {
    outline: none;
    border-color: #07C160;
    background: white;
    box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.1);
}

.setting-description {
    width: 100%;
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    padding-left: 0;
}

.save-all-btn {
    width: calc(100% - 32px);
    margin: 24px 16px 16px;
    padding: 16px;
    background: #000;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.save-all-btn:hover {
    background: #333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 开关控件样式 */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e0e0e0;
    transition: .4s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: #4cd964;
}

input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 确保模态框在小手机屏幕内居中 */
#edit-profile-modal {
    position: absolute;
    z-index: 1001;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
}

#edit-profile-modal.show {
    display: flex;
}

.modal-content {
    background-color: white;
    padding: 24px;
    border: 1px solid #888;
    border-radius: 12px;
    width: 80%;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* 微信专用 API 设置：适配小手机屏幕 + 隐形滚动 */
#wechat-api-settings-modal .modal-content.api-settings-modal-content {
    padding: 0;
    width: min(92vw, 360px);
    max-width: 360px;
    max-height: min(86vh, 620px);
    display: flex;
    flex-direction: column;
}

#wechat-api-settings-modal .modal-content.api-settings-modal-content .settings-header {
    flex: 0 0 auto;
}

#wechat-api-settings-modal .modal-content.api-settings-modal-content .settings-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 18px;
}

/* 滚动条隐藏（仍可滚动） */
#wechat-api-settings-modal .modal-content.api-settings-modal-content .settings-content::-webkit-scrollbar {
    width: 0;
    height: 0;
}
#wechat-api-settings-modal .modal-content.api-settings-modal-content .settings-content {
    scrollbar-width: none;
}

/* 微信主动发消息设置：复用 API 设置模态框样式 */
#wechat-active-message-modal .modal-content.api-settings-modal-content {
    padding: 0;
    width: min(92vw, 360px);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
}
#wechat-active-message-modal .modal-content.api-settings-modal-content .settings-header {
    flex: 0 0 auto;
}
#wechat-active-message-modal .modal-content.api-settings-modal-content .settings-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#wechat-active-message-modal .modal-content.api-settings-modal-content .settings-content::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* 主动发消息：好友勾选列表 */
#wechat-active-message-friend-picker-modal .modal-content.api-settings-modal-content {
    padding: 0;
    width: min(92vw, 360px);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
}
#wechat-active-message-friend-picker-modal .modal-content.api-settings-modal-content .settings-header {
    flex: 0 0 auto;
}
#wechat-active-message-friend-picker-modal .modal-content.api-settings-modal-content .settings-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#wechat-active-message-friend-picker-modal .modal-content.api-settings-modal-content .settings-content::-webkit-scrollbar {
    width: 0;
    height: 0;
}


.wechat-active-msg-pick-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px;
    border-bottom: 1px solid #f0f0f0;
}
.wechat-active-msg-pick-row:last-child {
    border-bottom: none;
}
.wechat-active-msg-pick-main {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 10px;
    align-items: center;
}
.wechat-active-msg-pick-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(7, 193, 96, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #07c160;
    font-weight: 700;
    flex-shrink: 0;
}
.wechat-active-msg-pick-texts {
    min-width: 0;
}
.wechat-active-msg-pick-name {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wechat-active-msg-pick-sub {
    margin-top: 2px;
    font-size: 12px;
    color: #8a8a8a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 底部按钮固定在内容底部（随内容滚动时保持可见）；与 .add-command-footer 解耦，避免与圆角药丸按钮叠成双层 */
#wechat-api-settings-modal .wechat-api-settings-footer.add-command-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 12px 0 0;
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.modal-header .back-btn {
    position: static;
    transform: none;
    margin: 0;
    padding: 4px;
    width: 36px;
    height: 36px;
}

.modal-close {
    display: none;
}


/* 选择预设模态框样式 */
.preset-list {
    max-height: 200px;
    overflow-y: auto;
}

.preset-item {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.preset-item:hover {
    background-color: #f5f5f5;
}

.preset-item:last-child {
    border-bottom: none;
}

.preset-item.active {
    background-color: #e8f5e8;
    border-left: 4px solid #07C160;
}

.preset-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.preset-item-row:last-child {
    border-bottom: none;
}

.preset-item-name-btn {
    flex: 1;
    min-width: 0;
    text-align: left;
    padding: 10px 12px;
    border: none;
    background: transparent;
    font-size: 16px;
    color: #111;
    cursor: pointer;
    border-radius: 8px;
    overflow-wrap: anywhere;
    transition: background-color 0.2s ease;
}

.preset-item-name-btn:hover {
    background-color: #f5f5f5;
}

.preset-item-delete-btn {
    flex-shrink: 0;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    background: #fff0f0;
    color: #c62828;
}

.preset-item-delete-btn:hover {
    background: #ffe0e0;
}

.close-btn {
    width: 100%;
    padding: 16px;
    border: none;
    background: #f5f5f5;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border-top: 1px solid #f0f0f0;
}

.close-btn:hover {
    background: #e5e5e5;
}

/* 选择预设模态框样式 */
#select-preset-modal .modal-footer {
    display: flex;
    justify-content: center;
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

#select-preset-modal .btn-cancel {
    width: 100%;
    padding: 16px;
    border: none;
    background: #f5f5f5;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 0;
    border-radius: 0;
}

/* 添加好友操作页 */
#add-friend-modal.add-friend-page-shell {
    display: flex;
    position: fixed;
    z-index: 2600;
    left: 50%;
    top: 50%;
    width: min(100vw, 480px);
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent !important;
    transform: translate(-50%, -50%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.26s ease, visibility 0s linear 0.3s;
}

@media (min-width: 481px) {
    #add-friend-modal.add-friend-page-shell {
        height: calc(100vh - 40px);
        height: calc(100dvh - 40px);
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
        border-radius: 20px;
    }
}

@media (max-width: 480px) {
    /* 移动端用 top/bottom 双锚定铺满布局视口，不依赖 100vh/100dvh 的具体取值，
       规避部分国产内核（Via/夸克/搜狗等）键盘弹出时 dvh 计算异常导致
       弹窗下缘缩短、露出底层列表的问题 */
    #add-friend-modal.add-friend-page-shell {
        left: 0;
        top: 0;
        bottom: 0;
        width: 100vw;
        height: auto;
        max-height: none;
        transform: none;
    }
}

#add-friend-modal.add-friend-page-shell.show {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.22s ease, visibility 0s;
}

#add-friend-modal .add-friend-modal {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 0 !important;
    box-shadow: none;
    background: #f7f7f7;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

#add-friend-modal.show .add-friend-modal {
    transform: translate3d(0, 0, 0);
}

.add-friend-view-track {
    flex: 1 1 auto;
    min-height: 0;
    width: 200%;
    display: flex;
    transform: translate3d(0, 0, 0);
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

#add-friend-modal.is-detail .add-friend-view-track {
    transform: translate3d(-50%, 0, 0);
}

.add-friend-panel {
    width: 50%;
    min-width: 50%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #f7f7f7;
}

.add-friend-page-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 56px;
    padding: 10px 14px;
    background: rgba(247, 247, 247, 0.92);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.add-friend-page-header h3 {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #242424;
}

.add-friend-back-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #222;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.add-friend-page-body,
.add-friend-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 22px 18px;
}

.avatar-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.add-friend-persona-hint {
    margin-top: 8px;
    padding: 6px 12px;
    border: 1px solid rgba(7, 193, 96, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-weight: 600;
    color: #07C160;
    cursor: pointer;
}

.add-friend-role-card-input {
    display: none;
}

.avatar-placeholder {
    width: 100px;
    height: 100px;
    border: 2px dashed #e0e0e0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.avatar-placeholder:hover {
    border-color: #07C160;
}

.avatar-plus {
    font-size: 32px;
    color: #e0e0e0;
    transition: all 0.3s ease;
}

.avatar-placeholder:hover .avatar-plus {
    color: #07C160;
}

.form-group {
    margin-bottom: 16px;
}

.add-friend-role-simple-group .resizeable-textarea {
    min-height: 150px;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: #07C160;
    box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.1);
}

/* 可调整大小的输入框样式 */
.resizeable-input {
    position: relative;
}

.resizeable-textarea {
    width: 100%;
    min-height: 80px;
    max-height: 200px;
    min-width: 100%;
    max-width: 100%;
    resize: none;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    transition: all 0.3s ease;
    box-sizing: border-box;
    overflow-y: auto;
}

.resizeable-textarea:focus {
    outline: none;
    border-color: #07C160;
    box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.1);
}

.resize-handle {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23999" d="M10 0v10H0V0h10z M8 8v2H2V2h2V0H0v12h12V8H8z"/></svg>') no-repeat center;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.resize-handle:hover {
    opacity: 1;
}

.add-friend-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex: 0 0 auto;
    margin-top: 0;
    padding: 14px 22px max(18px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(247, 247, 247, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.add-friend-detail-entry {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(7, 193, 96, 0.18);
    border-radius: 8px;
    background: rgba(7, 193, 96, 0.08);
    color: #06a653;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.add-friend-detail-entry:hover {
    background: rgba(7, 193, 96, 0.14);
}

.add-friend-detail-entry:active {
    transform: scale(0.99);
}

.add-friend-detail-field {
    margin-bottom: 14px;
}

.add-friend-detail-field label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #333;
}

.add-friend-detail-textarea {
    min-height: 76px;
    resize: vertical;
    line-height: 1.45;
}

.add-friend-detail-footer {
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
    padding: 14px 22px max(18px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(247, 247, 247, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.add-friend-detail-save-btn {
    width: 100%;
    max-width: 260px;
}

.btn-add,
.btn-cancel {
    width: 135px;
    height: 45px;
    padding: 0;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-add {
    background: #000;
    color: white;
}

.btn-add:hover {
    background: #333;
}

.btn-cancel {
    border: 1px solid #e0e0e0;
    background: white;
    color: #333;
}

.btn-cancel:hover {
    background: #f5f5f5;
}

.modal-body {
    padding: 16px;
}

#add-friend-modal .add-friend-page-body,
#add-friend-modal .add-friend-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 22px 18px;
}

#add-friend-modal .add-friend-detail-footer .add-friend-detail-save-btn {
    width: 100%;
    max-width: 260px;
}

/* 保存预设模态框 */
#save-preset-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

#save-preset-modal.show {
    display: flex;
}

#save-preset-modal .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 400px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#save-preset-modal .modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

#save-preset-modal .modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

#save-preset-modal .modal-close {
    display: none;
}

#save-preset-modal .form-group {
    margin-bottom: 20px;
}

#save-preset-modal .form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

#save-preset-modal .form-group input:focus {
    outline: none;
    border-color: #07C160;
    box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.1);
}

#save-preset-modal .error-message {
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 4px;
}

#save-preset-modal .modal-footer {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

#save-preset-modal .btn-cancel {
    flex: 1;
    padding: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f5f5f5;
    color: #333;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
}

#save-preset-modal .btn-cancel:hover {
    background-color: #e5e5e5;
}

#save-preset-modal .btn-save {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 4px;
    background-color: #07C160;
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
}

#save-preset-modal .btn-save:hover {
    background-color: #05a850;
}


.preset-select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
    cursor: pointer;
}

/* API输入容器 */
.api-input-container {
    width: 100%;
}

/* 模型选择容器 */
.model-select-container {
    position: relative;
    width: 100%;
}

.model-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    pointer-events: none;
}

/* 模型列表 */
.models-list {
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    background-color: white;
}

.model-item {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.model-item:hover {
    background-color: #f5f5f5;
}

.model-item:last-child {
    border-bottom: none;
}

/* 连接状态 */
.connection-status {
    display: flex;
    align-items: center;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-indicator.connecting {
    background-color: #faad14;
    animation: pulse 1.5s infinite;
}

.status-indicator.connected {
    background-color: #52c41a;
}

.status-indicator.idle {
    background-color: #c8ccd3;
}

.status-indicator.error {
    background-color: #ff4d4f;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.form-group {
    margin-bottom: 0;
}

.form-group label {
    display: none;
}

.modal-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    transition: all 0.3s ease;
    box-sizing: border-box;
    margin-bottom: 16px;
}

.modal-input:focus {
    outline: none;
    border-color: #07C160;
    box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.1);
}

.modal-textarea-main-card-signature {
    min-height: 4.2em;
    line-height: 1.45;
    resize: vertical;
    field-sizing: content;
}

.location-suggestions {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    max-height: 200px;
    overflow-y: auto;
    margin-top: -12px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.location-suggestion-item {
    padding: 10px 12px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}
.location-suggestion-item:last-child { border-bottom: none; }
.location-suggestion-item:hover { background: #f5f5f5; }
.location-suggestion-loading,
.location-suggestion-empty { color: #999; cursor: default; }

.error-message {
    font-size: 12px;
    color: #ff4d4f;
    margin-top: 8px;
    min-height: 16px;
}

.modal-footer {
    display: flex;
    padding: 0;
    border-top: 1px solid #f0f0f0;
    height: 50px;
}

.modal-btn {
    flex: 1;
    padding: 12px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cancel-btn {
    background-color: #f5f5f5;
    color: #333;
    border-right: 1px solid #e0e0e0;
}

.cancel-btn:hover {
    background-color: #e0e0e0;
}

.save-btn {
    background-color: #07C160;
    color: white;
}

.save-btn:hover {
    background-color: #06b155;
}

/* 编辑个人资料模态框 */
.edit-profile-modal {
    width: 320px;
    height: 400px;
    background: rgba(240, 240, 242, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
}

.edit-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.5);
}

.edit-profile-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.edit-profile-body {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

/* 头像上传区域 */
.avatar-upload-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.avatar-container {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 10px;
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* 昵称编辑区域 */
.nickname-edit-section {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.nickname-edit-section label {
    font-size: 14px;
    color: #333;
    white-space: nowrap;
}

.nickname-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.nickname-input:focus {
    outline: none;
    border-color: #07C160;
    box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.1);
}

/* 底部按钮区域 */
.edit-profile-footer {
    display: flex;
    gap: 12px;
    padding: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.5);
}

.cancel-btn, .save-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cancel-btn {
    background: #f5f5f5;
    color: #333;
}

.cancel-btn:hover {
    background: #e0e0e0;
}

.save-btn {
    background: #000;
    color: #fff;
}

.save-btn:hover {
    background: #333;
}

/* 微信页面样式 */
#wechat-page {
    display: none;
    flex-direction: column;
    height: 100%;
    background: #f2f2f2;
    position: relative;
}

#wechat-page.active {
    display: flex;
}

.wechat-header {
    /* 三列栅格：避免 iOS Safari 下 flex + 中间列 z-index 把两侧按钮盖住 */
    display: grid;
    grid-template-columns: minmax(44px, auto) minmax(0, 1fr) minmax(44px, auto);
    align-items: center;
    column-gap: 4px;
    padding: 12px 8px; /* 缩小5px */
    background: rgba(191, 189, 195, 0.35); /* #PANTONE 663 C with 35% opacity */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    z-index: 50;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.wechat-back-btn {
    grid-column: 1;
    grid-row: 1;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.wechat-back-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.wechat-header h1 {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.wechat-header-titlebox {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.wechat-header-filter-btn {
    border: none;
    background: none;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.wechat-header-filter-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.wechat-header-filter-title {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
}

.wechat-header-filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(7, 193, 96, 0.12);
    color: #07C160;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.wechat-header-filter-arrow {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.2s ease;
    opacity: 0.7;
    flex: 0 0 auto;
}

.wechat-header-filter-btn[aria-expanded="true"] .wechat-header-filter-arrow {
    transform: rotate(225deg) translateY(-1px);
}

.wechat-chat-group-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 168px;
    padding: 8px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: none;
    z-index: 60;
    isolation: isolate;
}

.wechat-chat-group-menu.show {
    display: block;
}

/* 分组菜单打开时：避免会话列表叠在菜单之上抢走点击 */
#wechat-page.wechat-chat-group-menu-open .wechat-chat-list,
#wechat-page.wechat-chat-group-menu-open .wechat-bottom-nav {
    pointer-events: none;
    user-select: none;
}

#wechat-page.wechat-chat-group-menu-open .wechat-add-menu {
    pointer-events: none;
}

.wechat-chat-group-option {
    width: 100%;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 14px;
    color: #222;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1;
}

.wechat-chat-group-option:hover {
    background: rgba(7, 193, 96, 0.08);
}

.wechat-chat-group-option.is-selected {
    background: rgba(7, 193, 96, 0.12);
    color: #07C160;
    font-weight: 600;
}

.wechat-chat-group-check {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.wechat-chat-group-option.is-selected .wechat-chat-group-check {
    opacity: 1;
}

.wechat-header-buttons {
    grid-column: 3;
    grid-row: 1;
    width: 44px;
    min-width: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 3;
}

.wechat-header-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.wechat-header-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.wechat-header-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* 添加菜单样式（整体较原版约 +35px 宽高，便于点击、减少误触收起） */
.wechat-add-menu {
    position: absolute;
    top: 60px;
    right: 13px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 100;
    overflow: hidden;
    box-sizing: border-box;
}

.wechat-add-menu.show {
    display: block;
}

.wechat-add-menu-item {
    box-sizing: border-box;
    padding: 20.75px 41.5px;
    font-size: 16px;
    line-height: 1.35;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.wechat-add-menu-item:hover {
    background-color: #f5f5f5;
}

.wechat-chat-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: rgba(250, 250, 250, 0.65); /* #RAL 9003 with 65% opacity */
}

.wechat-chat-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}

#wechat-page.couple-ticketing-notice-page-active > .wechat-bottom-nav {
    display: none !important;
}

#wechat-page.couple-ticketing-notice-page-active > .wechat-chat-list {
    overflow: hidden !important;
    overscroll-behavior: none;
}

#wechat-page > .couple-ticketing-notice-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 100126 !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

.wechat-chat-list-empty {
    padding: 48px 24px;
    text-align: center;
    color: #888;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
}

/* 底部导航栏 */
.wechat-bottom-nav {
    display: flex;
    flex-shrink: 0;
    background: rgba(191, 189, 195, 0.35); /* #PANTONE 663 C with 35% opacity */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    padding: 8px 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.wechat-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 8px 0;
}

.wechat-nav-item.active .wechat-nav-text {
    color: #07C160;
}

.wechat-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    width: 32px;
    height: 32px;
}

.wechat-nav-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wechat-nav-text {
    font-size: 12px;
    color: #666;
    transition: color 0.3s ease;
    display: none; /* 隐藏文字元素 */
}

.wechat-chat-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.wechat-chat-item:hover {
    background-color: #f5f5f5;
}

.wechat-chat-item.unread {
    background-color: transparent;
}

.wechat-chat-item.unread .wechat-chat-name {
    font-weight: normal;
    color: inherit;
}

.wechat-chat-unread {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 9px;
    background: #fa5151;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    z-index: 1;
}

.wechat-chat-item.unread .wechat-chat-unread {
    display: block;
}

.wechat-chat-content {
    flex: 1;
    min-width: 0;
    position: relative;
}

.wechat-chat-avatar {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background-color: #07C160;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    margin-right: 12px;
}

.wechat-chat-content {
    flex: 1;
    min-width: 0;
}

.wechat-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    gap: 8px;
}

.wechat-chat-name-row {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wechat-chat-name {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 8px;
}

.wechat-chat-tag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
}

.wechat-chat-tag--friend {
    background: rgba(7, 193, 96, 0.10);
    color: #07C160;
}

.wechat-chat-tag--family {
    background: rgba(255, 149, 0, 0.12);
    color: #d97706;
}

.wechat-chat-tag--lover {
    background: rgba(255, 45, 85, 0.12);
    color: #e11d48;
}

.wechat-chat-tag--group {
    background: rgba(88, 86, 214, 0.12);
    color: #5856d6;
}

.wechat-chat-time {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
}

.wechat-chat-message {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 聊天页面样式 */
#chat-page {
    display: none;
    flex-direction: column;
    height: 100%;
    background: #f2f2f2;
    position: relative;
}

#chat-page.active {
    display: flex;
}

#chat-page[data-chat-keyboard-open="1"] {
    box-sizing: border-box;
    height: min(100%, var(--lovemi-chat-page-height, 100%));
    min-height: 0;
    max-height: var(--lovemi-chat-page-height, 100%);
    padding-bottom: 0;
    overflow: hidden;
}

#chat-page[data-chat-keyboard-open="1"] > .status-bar,
#chat-page[data-chat-keyboard-open="1"] > .chat-header {
    flex: 0 0 auto;
}

#chat-page.chat-page--offline-mode {
    --offline-ink: #333;
    --offline-ink-mid: rgba(51, 51, 51, 0.74);
    --offline-ink-soft: rgba(51, 51, 51, 0.44);
    --offline-paper: #F0F0F2;
    --offline-paper-dark: #E5E5E7;
    --offline-rule: rgba(51, 51, 51, 0.72);
    --offline-rule-soft: rgba(51, 51, 51, 0.28);
    background-color: #F0F0F2 !important;
    background-image: none !important;
    background-size: auto !important;
    color: #333;
    transition: background-color 0.46s ease, color 0.46s ease;
}

#chat-page.chat-page--offline-mode::after {
    display: none !important;
    content: none !important;
}

#chat-page.chat-page--offline-mode > .status-bar {
    display: none;
}

/* 线下模式：可折叠卡片头部 — 默认折叠态 */
#chat-page.chat-page--offline-mode .chat-header {
    min-height: unset;
    width: calc(100% - 20px);
    margin: 10px auto 0;
    box-sizing: border-box;
    padding: 10px 14px;
    flex-direction: row;
    align-items: center;
    /* 与展开态一致保持 space-between，避免展开瞬间返回键从视觉中心「跳入」左侧致误触 */
    justify-content: space-between;
    background: transparent !important;
    border-bottom: none;
    box-shadow: none;
    position: relative;
    z-index: 200;
    overflow: visible;
    transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
}

#chat-page.chat-page--offline-mode .chat-header::before,
#chat-page.chat-page--offline-mode .chat-header::after {
    display: none !important;
    content: none !important;
}

/* 折叠态：隐藏心跳监控；返回/设置保留占位（不可见、不可点），与展开态同款槽位避免返回键在中间闪现误触 */
#chat-page.chat-page--offline-mode .chat-header .chat-heartbeat-monitor {
    display: none;
}

#chat-page.chat-page--offline-mode .chat-header .back-btn {
    display: flex;
    order: 1;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    margin-right: 8px;
    border-radius: 999px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#chat-page.chat-page--offline-mode .chat-header .chat-header-buttons {
    display: flex;
    order: 4;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    width: 42px;
    min-width: 42px;
    height: 42px;
    margin-left: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 折叠态：中间栏铺满 flex 槽位，整块白底区域均可点开展开 */
#chat-page.chat-page--offline-mode .chat-header-title-cluster {
    flex: 1;
    order: 2;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: 0;
    justify-content: center;
    cursor: pointer;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#chat-page.chat-page--offline-mode .chat-header-title-cluster h1 {
    order: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    color: #333;
    text-shadow: none;
    line-height: 1;
    padding: 0;
    margin: 0;
}

#chat-page.chat-page--offline-mode .chat-header-title-cluster h1::before {
    content: none;
}

/* ===== 展开态 ===== */
#chat-page.chat-page--offline-mode .chat-header.chat-header--expanded {
    width: calc(100% - 20px);
    margin: 10px auto 0;
    box-sizing: border-box;
    padding: 10px 14px;
    min-height: 56px;
    height: 56px;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

#chat-page.chat-page--offline-mode .chat-header.chat-header--expanded .back-btn {
    display: flex;
    order: 1;
    filter: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    width: 42px;
    height: 42px;
    margin-right: 8px;
    border-radius: 999px;
}

#chat-page.chat-page--offline-mode .chat-header.chat-header--expanded .chat-header-title-cluster {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    order: 2;
    gap: 10px;
}

#chat-page.chat-page--offline-mode .chat-header.chat-header--expanded .chat-header-title-cluster h1 {
    font-size: 17px;
}

#chat-page.chat-page--offline-mode .chat-header.chat-header--expanded .chat-heartbeat-monitor {
    display: block;
    order: 3;
    position: static;
    flex-shrink: 0;
    margin-left: 8px;
}

#chat-page.chat-page--offline-mode .chat-header.chat-header--expanded .chat-header-buttons {
    display: flex;
    order: 4;
    margin-left: 8px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    width: auto;
    min-width: 0;
    height: auto;
}

#chat-page.chat-page--offline-mode .chat-header.chat-header--expanded .chat-header-btn,
#chat-page.chat-page--offline-mode .chat-header.chat-header--expanded .back-btn {
    color: #333;
    filter: none;
    opacity: 1;
}

#chat-page.chat-page--offline-mode .chat-heartbeat-monitor-summary {
    width: 40px;
    height: 40px;
}

#chat-page.chat-page--offline-mode .chat-heartbeat-monitor-glass {
    width: 34px;
    height: 34px;
    animation-name: chat-heartbeat-pulse;
}

#chat-page.chat-page--offline-mode .chat-heartbeat-monitor-glass::before {
    width: 24px;
    height: 20px;
}

#chat-page.chat-page--offline-mode .chat-header.chat-header--expanded .chat-header-btn {
    width: 42px;
    height: 42px;
    border-radius: 999px;
}

#chat-page.chat-page--offline-mode .chat-heartbeat-monitor-img {
    filter: none;
    opacity: 0.85;
}

#chat-page.chat-page--offline-mode .chat-heartbeat-monitor-panel {
    top: calc(100% + 6px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 600;
}

/* 无 User 观察群：更多面板仅「总结」可点 */
#chat-page.chat-page--nouser-observer .chat-more-item:not(.chat-more-item--observer-allowed) {
    opacity: 0.38;
    pointer-events: none;
}

/* 聊天主栈：承接 #chat-page 列布局剩余高度，否则 .chat-content 的 flex:1/min-height:0 不生效，长会话会把底部输入栏顶出屏外 */
.chat-main-stack {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.chat-header {
    display: flex;
    align-items: center;
    padding: 12px 11px;
    background: #f7f7f7;
    border-bottom: 1px solid #e0e0e0;
    /* 整块压在 .chat-content 之上，避免心跳监控等顶栏下拉面板的 z-index 盖不过下方消息区 */
    position: relative;
    z-index: 200;
}

.chat-header .back-btn {
    position: static;
    transform: none;
    margin-right: 11px;
    width: 30px;
    height: 30px;
}

.chat-header-title-cluster {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 心跳/TA想下拉面：作为绝对定位参照，使面板在栏内水平居中，避免被 #app overflow 裁切右缘 */
    position: relative;
}

.chat-header-title-cluster .chat-heartbeat-monitor {
    flex-shrink: 0;
    /* 由 .chat-header-title-cluster 承接定位，避免面板以 30px 心形为宽参考而整体偏右溢出 */
    position: static;
}

.chat-header-title-cluster h1 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-header-buttons {
    display: flex;
    gap: 8px;
    margin-left: 11px;
}

.chat-header-btn {
    background: none;
    border: none;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

.chat-back-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.chat-header-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.chat-header-settings-icon {
    display: block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.chat-header-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* 心跳监控：顶部栏 <details>，私聊时在好友昵称左侧；群聊 TA 想时同结构 */
.chat-heartbeat-monitor {
    position: relative;
    list-style: none;
}

.chat-heartbeat-monitor[data-monitor-mode="heartbeat"] .chat-heartbeat-monitor-summary,
.chat-heartbeat-monitor[data-monitor-mode="tathink"] .chat-heartbeat-monitor-summary {
    width: 30px;
    height: 30px;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    border-radius: 0;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.chat-heartbeat-monitor[data-monitor-mode="heartbeat"] .chat-heartbeat-monitor-summary:hover,
.chat-heartbeat-monitor[data-monitor-mode="heartbeat"] .chat-heartbeat-monitor-summary:active,
.chat-heartbeat-monitor[data-monitor-mode="tathink"] .chat-heartbeat-monitor-summary:hover,
.chat-heartbeat-monitor[data-monitor-mode="tathink"] .chat-heartbeat-monitor-summary:active {
    background: transparent;
    box-shadow: none;
    filter: brightness(1.06);
}

.chat-heartbeat-monitor-summary {
    list-style: none;
    cursor: pointer;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: filter 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.chat-heartbeat-monitor-summary::-webkit-details-marker {
    display: none;
}

.chat-heartbeat-monitor-summary::marker {
    content: none;
}

/* 心形以 PNG 透明轮廓为准，不再用语义心形 clip-path 裁切；背后柔焦 12px 衬托磨砂感 */
.chat-heartbeat-monitor-glass {
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: transparent;
    transform-origin: 50% 55%;
    animation: chat-heartbeat-pulse 1.15s ease-in-out infinite;
}

.chat-heartbeat-monitor-glass::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 52%;
    width: 24px;
    height: 22px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(255, 248, 252, 0.88);
    filter: blur(12px);
    -webkit-filter: blur(12px);
    opacity: 0.62;
    z-index: 0;
    pointer-events: none;
}

.chat-heartbeat-monitor-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0.7;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 0.5px 1.5px rgba(255, 182, 198, 0.45))
        drop-shadow(0 2px 10px rgba(230, 170, 195, 0.22));
}

@keyframes chat-heartbeat-pulse {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.12); }
    28% { transform: scale(1); }
    42% { transform: scale(1.08); }
    56% { transform: scale(1); }
}

.chat-heartbeat-monitor[data-monitor-mode="heartbeat"][open] .chat-heartbeat-monitor-glass,
.chat-heartbeat-monitor[data-monitor-mode="tathink"][open] .chat-heartbeat-monitor-glass {
    animation: none;
    transform: scale(1.06);
    transition: transform 0.2s ease;
}

.chat-heartbeat-monitor-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    z-index: 500;
    min-width: 240px;
    max-width: min(360px, 92vw);
    box-sizing: border-box;
    isolation: isolate;
    filter: none;
}

/* 顶栏内：相对整块标题区居中，宽度不超过栏宽，避免小手机右侧被 #app 圆角区域裁切 */
.chat-header-title-cluster .chat-heartbeat-monitor-panel {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(360px, calc(100% - 12px));
    max-width: min(360px, calc(100% - 12px));
    min-width: min(240px, 100%);
}

/* 心跳监控 / TA想 共用下拉：面板不透明度 95% */
.chat-heartbeat-monitor-inner {
    background: linear-gradient(145deg, rgba(233, 231, 245, 0.95) 0%, rgba(223, 218, 240, 0.95) 55%, rgba(215, 210, 235, 0.95) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 14px;
    border-radius: 20px;
    font-size: 13px;
    line-height: 1.45;
    color: #38334b;
    border: 1px solid rgba(125, 113, 166, 0.22);
    box-shadow: 0 16px 36px rgba(80, 72, 117, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    max-height: min(420px, 58vh);
    overflow-y: auto;
    max-width: 100%;
    box-sizing: border-box;
}

/* 心跳监控报告 · API 返回 HTML 渲染区（新版：好感度+环境+心跳） */
.hb-report {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #38334b;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 各区块通用 */
.hb-section {
    margin-bottom: 0;
    padding: 12px 12px 13px;
    border-radius: 16px;
    /* 与顶部下拉容器一致：不透明度 95% */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 237, 250, 0.95) 100%);
    border: 1px solid rgba(133, 121, 172, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 18px rgba(116, 108, 150, 0.08);
}
.hb-section:last-child {
    margin-bottom: 0;
}

/* 区块标题标签 */
.hb-section-label {
    font-size: 11px;
    font-weight: 700;
    color: #7565a4;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* 好感度区块 */
.hb-affection {
    border-bottom: none;
    padding-bottom: 13px;
}

.hb-affection-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.hb-affection-score {
    font-size: 22px;
    font-weight: 700;
    color: #6d5a9f;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.hb-affection-num {
    color: #6d5a9f;
}

.hb-affection-slash {
    color: rgba(98, 88, 136, 0.42);
    margin: 0 1px;
}

.hb-affection-total {
    color: rgba(98, 88, 136, 0.58);
    font-size: 14px;
}

.hb-affection-bar {
    flex: 1;
    height: 8px;
    background: rgba(132, 119, 173, 0.18);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(84, 72, 119, 0.12);
}

.hb-affection-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(146, 130, 196, 0.98) 0%, rgba(178, 153, 214, 0.95) 52%, rgba(200, 179, 230, 0.92) 100%);
    border-radius: 999px;
    transition: width 0.5s ease;
}

.hb-affection-desc {
    font-size: 12px;
    color: #564d72;
    font-weight: 600;
    line-height: 1.55;
}

/* 环境区块 */
.hb-env {
    border-bottom: none;
    padding-bottom: 13px;
}

.hb-env-desc {
    font-size: 12px;
    color: #514a68;
    line-height: 1.65;
}

/* 心跳区块 */
.hb-heartbeat {
    position: relative;
}

/* 心跳板块内的收藏按钮 */
.hb-heartbeat-favorite-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(248, 187, 208, 0.9), rgba(225, 190, 231, 0.9));
    border: 1px solid rgba(233, 30, 99, 0.3);
    border-radius: 12px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(233, 30, 99, 0.15);
    font-size: 11px;
    font-weight: 500;
    color: #880e4f;
    z-index: 10;
}

.hb-heartbeat-favorite-btn:hover {
    background: linear-gradient(135deg, rgba(244, 143, 177, 0.95), rgba(206, 147, 216, 0.95));
    box-shadow: 0 3px 8px rgba(233, 30, 99, 0.25);
    transform: translateY(-1px);
}

.hb-heartbeat-favorite-btn:active {
    transform: translateY(0) scale(0.95);
    box-shadow: 0 1px 4px rgba(233, 30, 99, 0.2);
}

.hb-heartbeat-favorite-icon {
    font-size: 14px;
    line-height: 1;
}

.hb-rate-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 4px;
}

.hb-rate-num {
    font-size: 36px;
    font-weight: 700;
    color: #6c5aa0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hb-rate-unit {
    font-size: 13px;
    color: rgba(98, 88, 136, 0.68);
}

.hb-emotions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.hb-emotion-tag {
    background: linear-gradient(145deg, rgba(233, 231, 245, 0.55) 0%, rgba(214, 208, 236, 0.38) 100%);
    color: #5f537f;
    border: 1px solid rgba(136, 123, 178, 0.24);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    line-height: 1.5;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.hb-thought {
    font-size: 12px;
    color: #4f4867;
    line-height: 1.68;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.group-tathink-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.group-tathink-body {
    font-size: 12px;
    color: #4f4867;
    line-height: 1.72;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 12px 13px;
    border-radius: 16px;
    /* 与外层面板一致：不透明度 95% */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(239, 236, 249, 0.95) 100%);
    border: 1px solid rgba(136, 124, 178, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 8px 18px rgba(116, 108, 150, 0.08);
}

/* 当 TA想 body 内注入了收藏按钮时，定位参照交给 body 自己，
   并在右上预留按钮空间，避免按钮压住第一行文字（小屏 360px 真机也能看清正文）。 */
.group-tathink-body.has-favorite-btn {
    position: relative;
    padding-top: 36px;
}

/* TA想 收藏按钮 · 小尺寸圆角紧凑款，
   和 .hb-heartbeat-favorite-btn 的视觉语言保持一致但更收敛，避免按钮过大破坏 TA想正文阅读节奏。 */
.group-tathink-favorite-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border: 1px solid rgba(233, 30, 99, 0.28);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(248, 187, 208, 0.85), rgba(225, 190, 231, 0.85));
    color: #880e4f;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(233, 30, 99, 0.14);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    /* iOS Safari / 小米浏览器 系统按钮样式重置，保证按钮颜色按设计稿渲染 */
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    z-index: 5;
}

.group-tathink-favorite-btn:hover {
    background: linear-gradient(135deg, rgba(244, 143, 177, 0.92), rgba(206, 147, 216, 0.92));
    box-shadow: 0 3px 7px rgba(233, 30, 99, 0.2);
}

.group-tathink-favorite-btn:active {
    transform: scale(0.94);
    box-shadow: 0 1px 3px rgba(233, 30, 99, 0.18);
}

.group-tathink-favorite-icon {
    font-size: 12px;
    line-height: 1;
}

.group-tathink-favorite-text {
    line-height: 1;
}

/* 极窄屏（≤360px，老款 iPhone SE / 小屏华为）下，按钮再收一档以避免遮住右侧文字 */
@media (max-width: 360px) {
    .group-tathink-body.has-favorite-btn {
        padding-top: 34px;
    }

    .group-tathink-favorite-btn {
        padding: 2px 7px;
        font-size: 10.5px;
    }

    .group-tathink-favorite-icon {
        font-size: 11px;
    }
}

.chat-heartbeat-monitor-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.group-heartbeat-member-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(136, 126, 171, 0.72) rgba(233, 231, 245, 0.28);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.group-heartbeat-member-strip::-webkit-scrollbar {
    height: 10px;
}

.group-heartbeat-member-strip::-webkit-scrollbar-track {
    background: linear-gradient(90deg, rgba(233, 231, 245, 0.18) 0%, rgba(217, 211, 236, 0.24) 100%);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(139, 128, 180, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.group-heartbeat-member-strip::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(139, 130, 170, 0.52) 0%, rgba(111, 104, 145, 0.68) 55%, rgba(164, 154, 193, 0.5) 100%);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 8px rgba(91, 84, 122, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.group-heartbeat-member-btn {
    border: 1px solid rgba(137, 124, 179, 0.18);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.22) 0%, rgba(238, 235, 249, 0.16) 100%);
    padding: 8px 8px 7px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 62px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 6px 14px rgba(110, 101, 145, 0.08);
}

.group-heartbeat-member-btn.active .group-heartbeat-member-avatar {
    border-color: #8c7db9;
    box-shadow: 0 0 0 3px rgba(140, 125, 185, 0.2);
}

.group-heartbeat-member-btn.active {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.34) 0%, rgba(228, 223, 245, 0.28) 100%);
    border-color: rgba(132, 118, 179, 0.34);
}

.group-heartbeat-member-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(242, 240, 249, 0.98) 0%, rgba(221, 216, 238, 0.95) 100%);
    border: 2px solid transparent;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5b5275;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

.group-heartbeat-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.group-heartbeat-member-name {
    max-width: 58px;
    font-size: 11px;
    color: #5f567a;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-heartbeat-empty {
    padding: 12px 8px 4px;
    font-size: 12px;
    color: #70698a;
    line-height: 1.7;
    text-align: center;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.24) 0%, rgba(238, 235, 248, 0.15) 100%);
    border: 1px solid rgba(136, 124, 178, 0.16);
}

.hb-report-group .hb-affection {
    border-bottom: none;
    padding-bottom: 0;
}

.hb-report-group .hb-affection-desc {
    margin-top: 6px;
}

/* 旧版兼容（防止旧报告残留导致样式错乱） */
.heartbeat-report {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #333;
}

.heartbeat-rate {
    margin-bottom: 8px;
}

.heartbeat-rate-num {
    font-size: 32px;
    font-weight: 700;
    color: #e74c3c;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.heartbeat-rate-unit {
    font-size: 13px;
    color: #999;
    margin-left: 3px;
}

.heartbeat-emotions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}

.heartbeat-emotion-tag {
    background: rgba(231, 76, 60, 0.12);
    color: #c0392b;
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 12px;
    line-height: 1.5;
}

.heartbeat-thought {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    border-top: 1px solid rgba(231, 76, 60, 0.15);
    padding-top: 8px;
    font-style: italic;
}

.chat-content {
    flex: 1;
    min-height: 0; /* 关键：flex 子项默认可「撑开」导致无法正确滚动到底，见 #chat-page 列布局 */
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#chat-page.chat-page--offline-mode .chat-content {
    padding: 14px 14px 24px;
    gap: 6px;
    background: transparent;
    position: relative;
    z-index: 1;
    transition: padding 0.46s ease, gap 0.46s ease;
}

/* 打开会话 / 读库首屏：避免整片空白；置于消息列顶侧，不抢高度 */
.chat-history-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 120px;
    padding: 24px 12px;
    margin: auto 0 0 0;
    color: #8b879e;
    font-size: 13px;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}

.chat-history-loading__text {
    letter-spacing: 0.5px;
}

.chat-history-loading__dots {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.chat-history-loading__dots i {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #a8a0c2;
    opacity: 0.5;
    animation: chat-history-loading-pulse 0.9s ease-in-out infinite;
}

.chat-history-loading__dots i:nth-child(2) {
    animation-delay: 0.12s;
}

.chat-history-loading__dots i:nth-child(3) {
    animation-delay: 0.24s;
}

@keyframes chat-history-loading-pulse {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.92);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.chat-content::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

#chat-page[data-chat-keyboard-open="1"] .chat-main-stack {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    max-height: calc(var(--lovemi-chat-page-height, 100vh) - 126px);
}

#chat-page[data-chat-keyboard-open="1"] .chat-content {
    flex: 1 1 auto;
    min-height: 0;
    scroll-padding-bottom: 96px;
}

#chat-page[data-chat-keyboard-open="1"] .chat-bottom-composer {
    flex: 0 0 auto;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateZ(0);
    z-index: 500;
}

#chat-page[data-chat-keyboard-open="1"] .chat-input-area {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-height: 52px;
}

.chat-system-message {
    align-self: center;
    background: rgba(0, 0, 0, 0.05);
    color: #999;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 12px;
    margin: 8px 0;
}

.chat-system-message--ticketing {
    box-sizing: border-box;
    max-width: 86%;
    padding: 8px 12px;
    border: 1px solid rgba(121, 151, 137, 0.26);
    border-radius: 10px;
    background: rgba(244, 249, 246, 0.94);
    color: #526074;
    line-height: 1.55;
    text-align: left;
    white-space: pre-line;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.chat-message {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
    margin: 0;
}

#chat-page.chat-page--offline-mode .chat-message--offline-flow,
#chat-page.chat-page--offline-archive .chat-message--offline-flow {
    gap: 9px;
    padding: 0 0 2px;
    align-items: flex-start;
}

/* 好友消息（Char）：头像在左，保持默认 row 方向；
   用户消息（User）：头像在右，利用 DOM 顺序 [content][avatar] + row + flex-start 实现 */
#chat-page.chat-page--offline-mode .chat-message--offline-flow.my-message,
#chat-page.chat-page--offline-archive .chat-message--offline-flow.my-message {
    justify-content: flex-start;
    flex-direction: row;
}

.chat-message.other-message {
    justify-content: flex-start;
}

/* 对方消息：强制「头像 → 气泡区」视觉顺序，避免 DOM 因异常片段或解析问题变成「内容在前、头像在后」时头像被挤到屏幕最右侧 */
.chat-message.other-message .chat-message-avatar {
    order: 1;
}

.chat-message.other-message .chat-message-content {
    order: 2;
}

.chat-message.my-message {
    justify-content: flex-end;
}

.chat-message-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: transparent;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

#chat-page.chat-page--offline-mode .chat-message--offline-flow .chat-message-avatar,
#chat-page.chat-page--offline-archive .chat-message--offline-flow .chat-message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: transparent;
    color: #fff;
    filter: none;
    box-shadow: none;
    flex-shrink: 0;
    overflow: hidden;
}

/* 仅第一条消息显示头像，连续消息头像占位不可见 */
#chat-page .chat-message--offline-flow.chat-message--continued .chat-message-avatar {
    visibility: hidden;
}

.chat-message-avatar.transparent-avatar {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: transparent;
}

.chat-message.my-message .chat-message-avatar {
    background-color: #187498;
}

.chat-message.my-message .chat-message-avatar.transparent-avatar {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: transparent;
}

.chat-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.chat-message-bubble {
    display: inline-flex;
    position: relative;
    min-width: 30px;
    width: fit-content;
    max-width: min(75vw, 360px, 100%);
    font-size: 15px;
    z-index: 1;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    padding: 12px 16px;
    box-sizing: border-box;
    line-height: 1.3;
    min-height: 40px;
    align-items: center;
}

/* 线上聊天文本气泡：改用 inline-block，避免 inline-flex 把 <span class="chat-punctuation-gap"> 与相邻文字
   各自变成 flex item，被压缩到 min-content（中文一字一列）造成竖向并排错位
   仅作用于普通文本气泡，跳过线下气泡及语音/拍立得/转账/位置/拍立得 HTML 等自带布局的气泡 */
.chat-message-bubble:not(.chat-message-bubble--offline):not(.chat-message-bubble--offline-rich):not(.chat-message-bubble--voice):not(.chat-message-bubble--polaroid):not(.chat-message-bubble--gift-bundle):not(:has(.chat-transfer-bubble)):not(:has(.chat-location-bubble)):not(:has(.chat-photo-flip-root)):not(:has(.wechat-polaroid-wrap)):not(:has(.art-vibe)) {
    display: inline-block;
    align-items: initial;
    line-height: 1.5;
    vertical-align: top;
    max-width: min(75vw, 360px, 100%);
    text-align: left;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    line-break: auto;
}

/* 中文标点间距 span：保持 inline，避免被当成独立块导致一字一行或过早断行 */
.chat-message-bubble .chat-punctuation-gap {
    display: inline;
    white-space: normal;
    word-break: inherit;
}

/* 线下叙事：多段纵向排版；
   基础规则保持轻量（仅设置 flex 主轴方向 + 段间距），让群组线下的"独立小气泡"
   样式（chat-page--offline-group 分支，width:fit-content / auto）能正常生效。 */
.chat-message-bubble.chat-message-bubble--offline {
    flex-direction: column;
    align-items: stretch;
    align-self: flex-start;
    gap: 0.4em;
}

/* 私聊线下分支（chat-page--offline-single / 私聊归档）专属：
   显式改用 block 级 flex（display:flex），避免 .chat-message-bubble 基础规则的 inline-flex
   在部分 Chromium 内核（vivo / OPPO Via / 三星 / 华为 / 小米 Chrome）上把 width:100%
   误算成 fit-content，导致气泡被压缩到内容宽度而出现两侧大量空白、文字看似居中。
   群组线下分支（chat-page--offline-group）有自己的 width:fit-content / auto 规则，
   故不在这里强制，保持群组每个成员的"小气泡"视觉。 */
#chat-page.chat-page--offline-single .chat-message-bubble.chat-message-bubble--offline,
#chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-message-bubble.chat-message-bubble--offline {
    display: flex;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
}

/* 线下模式：取消对话框，无边框/阴影/背景 */
#chat-page.chat-page--offline-mode .chat-message--offline-flow .chat-message-bubble,
#chat-page.chat-page--offline-archive .chat-message--offline-flow .chat-message-bubble {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 8px 6px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #333 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible;
    position: relative;
}

#chat-page.chat-page--offline-mode .chat-message--offline-flow .chat-message-bubble::before,
#chat-page.chat-page--offline-archive .chat-message--offline-flow .chat-message-bubble::before {
    content: none !important;
    display: none !important;
}

#chat-page.chat-page--offline-mode .chat-message--offline-flow .chat-message-bubble::after,
#chat-page.chat-page--offline-archive .chat-message--offline-flow .chat-message-bubble::after {
    content: none !important;
    display: none !important;
}

/* 线下模式：心电图分隔线容器 */
#chat-page.chat-page--offline-mode .chat-message--offline-flow,
#chat-page.chat-page--offline-archive .chat-message--offline-flow {
    padding-bottom: 28px;
    position: relative;
}

#chat-page.chat-page--offline-mode .chat-message--offline-flow.chat-message--offline-longform,
#chat-page.chat-page--offline-archive .chat-message--offline-flow.chat-message--offline-longform {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* 心电图跳跃线 — 用 SVG 波形 + stroke-dashoffset 动画模拟心电监护仪 */
#chat-page.chat-page--offline-mode .chat-message--offline-flow .offline-ecg-separator,
#chat-page.chat-page--offline-archive .chat-message--offline-flow .offline-ecg-separator {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 6px;
    height: 18px;
    overflow: hidden;
    pointer-events: none;
}

#chat-page.chat-page--offline-mode .chat-message--offline-flow .offline-ecg-separator--top,
#chat-page.chat-page--offline-archive .chat-message--offline-flow .offline-ecg-separator--top {
    top: 6px;
    bottom: auto;
}

#chat-page.chat-page--offline-mode .chat-message--offline-flow .offline-ecg-separator svg,
#chat-page.chat-page--offline-archive .chat-message--offline-flow .offline-ecg-separator svg {
    display: block;
    width: 100%;
    height: 100%;
}

#chat-page.chat-page--offline-archive .chat-message--offline-flow[data-offline-block-id] {
    padding-bottom: 34px;
}

#chat-page.chat-page--offline-archive .chat-message--offline-flow[data-offline-block-id] .offline-flight-separator {
    left: 50%;
    right: auto;
    bottom: 1px;
    width: 158px;
    height: 32px;
    transform: translateX(-50%);
    overflow: visible;
}

#chat-page.chat-page--offline-archive .chat-message--offline-flow[data-offline-block-id] .offline-flight-separator.offline-ecg-separator--top {
    top: 1px;
    bottom: auto;
}

#chat-page.chat-page--offline-archive .chat-message--offline-flow[data-offline-block-id] .offline-flight-separator svg {
    width: 158px;
    height: 32px;
    overflow: visible;
}

#chat-page.chat-page--offline-archive .chat-message--offline-flow[data-offline-block-id] .offline-flight-separator .flight-line-glow {
    fill: none;
    stroke: rgba(156, 201, 154, 0.75);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: blur(12px);
    vector-effect: non-scaling-stroke;
}

#chat-page.chat-page--offline-archive .chat-message--offline-flow[data-offline-block-id] .offline-flight-separator .flight-line {
    fill: none;
    stroke: #5a8b5e;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 7 5;
    opacity: 0.75;
    vector-effect: non-scaling-stroke;
}

#chat-page.chat-page--offline-archive .chat-message--offline-flow[data-offline-block-id] .offline-flight-separator .flight-plane {
    opacity: 0.75;
    filter: drop-shadow(0 4px 12px rgba(90, 139, 94, 0.28));
}

#chat-page.chat-page--offline-archive .chat-message--offline-flow[data-offline-block-id] .offline-flight-separator .flight-plane-wing--main {
    fill: #b5d8b1;
}

#chat-page.chat-page--offline-archive .chat-message--offline-flow[data-offline-block-id] .offline-flight-separator .flight-plane-wing--fold {
    fill: #7fb982;
}

#chat-page.chat-page--offline-archive .chat-message--offline-flow[data-offline-block-id] .offline-flight-separator .flight-plane-wing--tail {
    fill: #5a8b5e;
}

#chat-page.chat-page--offline-mode .chat-message--offline-flow .offline-ecg-separator .ecg-line-bg {
    stroke: #DBE2EC;
    stroke-width: 1.2;
    fill: none;
}

#chat-page.chat-page--offline-mode .chat-message--offline-flow .offline-ecg-separator .ecg-line-fg {
    stroke: #8D91AA;
    stroke-width: 1.5;
    fill: none;
    stroke-dasharray: 60 240;
    stroke-dashoffset: 300;
    /* 默认不再让所有线下消息无限循环动画：
       长会话场景下每条线下消息都跑 SVG stroke 动画，是真机持续发热的主要来源之一。
       仅给「最近的几条」线下气泡保留动效（视觉提示），其余保持静态。 */
    animation: none;
}

/* 仅最近 5 条子元素中的线下气泡保留 ECG 动画；
   极端情况下（穿插系统消息）最多 5 处动画并发，远低于历史上百条全跑的负担。 */
#chat-page.chat-page--offline-mode .chat-message--offline-flow:nth-last-child(-n+5) .offline-ecg-separator .ecg-line-fg {
    animation: ecg-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 用户主动开启「减少动效」/省电模式时，连这 5 条也停下，进一步降功耗。 */
@media (prefers-reduced-motion: reduce) {
    #chat-page.chat-page--offline-mode .chat-message--offline-flow .offline-ecg-separator .ecg-line-fg,
    #chat-page.chat-page--offline-mode .chat-message--offline-flow:nth-last-child(-n+5) .offline-ecg-separator .ecg-line-fg {
        animation: none;
    }
}

@keyframes ecg-pulse {
    0% {
        stroke-dashoffset: 300;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* 最后一条消息不需要底部的波形分隔线；
   若仅有顶部分界（offline-ecg-separator--top），仍视为「本条之前」的视觉分隔，需保留。
   （长文块首条若为当前会话末条时会带 --top） */
#chat-page.chat-page--offline-mode .chat-message--offline-flow:last-child,
#chat-page.chat-page--offline-archive .chat-message--offline-flow:last-child {
    padding-bottom: 2px;
}

#chat-page.chat-page--offline-mode .chat-message--offline-flow:last-child .offline-ecg-separator:not(.offline-ecg-separator--top),
#chat-page.chat-page--offline-archive .chat-message--offline-flow:last-child .offline-ecg-separator:not(.offline-ecg-separator--top) {
    display: none;
}

/* 原先长文末条强行 display:block，会把底部波形顶出来；现已不在 DOM 中追加底线，本条删除冗余覆盖。
   末条若为长文且仍须保留上边距可读性：
 */
#chat-page.chat-page--offline-mode .chat-message--offline-flow.chat-message--offline-longform:last-child,
#chat-page.chat-page--offline-archive .chat-message--offline-flow.chat-message--offline-longform:last-child {
    padding-bottom: 2px;
}

/* 本人消息：内容区为 align-items:flex-end；线下气泡若沿用 align-self:flex-start 会覆盖该对齐，刷新后仍表现为「气泡贴左、头像贴右」 */
.chat-message.my-message .chat-message-bubble.chat-message-bubble--offline {
    align-self: flex-end;
}

#chat-page.chat-page--offline-mode .chat-message--offline-longform .chat-message-content,
#chat-page.chat-page--offline-archive .chat-message--offline-longform .chat-message-content {
    width: 100%;
}

.chat-message.my-message .chat-message-bubble.chat-message-bubble--offline-longform,
.chat-message.other-message .chat-message-bubble.chat-message-bubble--offline-longform {
    align-self: stretch;
}

.chat-message-bubble.chat-message-bubble--offline-longform {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0 4px;
    gap: 0.55em;
    cursor: pointer;
}

.chat-message-bubble--offline .chat-message-segment {
    display: block;
    width: 100%;
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: break-word;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

/* 旁白：环境/动作/表情描写 */
.chat-message-bubble--offline .chat-message-segment--narration {
    font-family: 'LoveMiOfflineNarration', 'Songti SC', 'Noto Serif SC', serif;
    color: rgba(38, 38, 38, 0.80);
    font-size: 14.5px;
    line-height: 1.82;
    letter-spacing: 0.04em;
    font-style: italic;
    text-indent: 0;
}

/* 对白：人物台词 */
.chat-message-bubble--offline .chat-message-segment--dialogue {
    font-family: 'LoveMiOfflineDialogue', 'Songti SC', 'Noto Serif SC', serif;
    color: #262626;
    font-size: 13.5px;
    line-height: 1.72;
    letter-spacing: 0.035em;
    text-indent: 0;
}

/* 中文弯引号间距修正：用 padding 撑开，避免 inline-block margin 在 .chat-punctuation-gap 父级被折叠 */
.chat-message-bubble--offline .offline-cjk-quote-open,
.chat-message-bubble--offline .offline-cjk-quote-close {
    display: inline-block;
    letter-spacing: 0 !important;
    line-height: 1;
    text-indent: 0;
    vertical-align: baseline;
    font-feature-settings: 'kern' 0, 'palt' 0;
}
.chat-message-bubble--offline .offline-cjk-quote-open {
    padding-left: 0.12em;
    padding-right: 0.18em;
    margin-left: 0.04em;
    margin-right: 0.06em;
}
.chat-message-bubble--offline .offline-cjk-quote-close {
    padding-left: 0.18em;
    padding-right: 0.08em;
    margin-left: 0.06em;
    margin-right: 0.02em;
}
/* 嵌套保护：buildMessageContentHtml 已经把 CJK 标点包了 chat-punctuation-gap，
   再嵌一层 inline 父级会让 margin 失效，强制父级也是 inline-block 让 padding/margin 恒定生效 */
.chat-message-bubble--offline .chat-punctuation-gap:has(.offline-cjk-quote-open),
.chat-message-bubble--offline .chat-punctuation-gap:has(.offline-cjk-quote-close) {
    display: inline-block;
    letter-spacing: 0 !important;
}

/* 世界书 HTML 单独气泡：整段不经行级拆分，避免标签与后续正文混排被截断 */
.chat-message-bubble.chat-message-bubble--offline-rich {
    min-width: 0;
    max-width: 80%;
    overflow: visible;
}

.chat-message-bubble--offline .chat-message-segment--offline-rich {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: visible;
    line-height: 1.45;
    word-wrap: break-word;
    word-break: break-word;
}

.chat-message-linebreak {
    min-height: 0.55em;
    flex-shrink: 0;
}

/* ============================================================
   线下聊天模式：长短段落区分 / 阅读节奏
   - narration（旁白/动作/环境）：长段，给更大的段落呼吸感与首行缩进
   - dialogue（对白）：短段，紧凑排版，无首行缩进，保留对话紧凑感
   - 长文模式（chat-message-bubble--offline-longform）：分段之间使用整段空行
   - 消息模式（chat-message-bubble--offline 非长文）：单条气泡内可能含多段，
     同样需要区分长短段落
   适用机型/浏览器：iPhone Safari、华为/小米/OPPO/魅族/vivo/三星 Chrome /
   Via / Edge / 搜狗 / 雨见 / 夸克 等主流移动浏览器
   ============================================================ */
.chat-message-bubble--offline .chat-message-segment {
    text-align: left;
    margin: 0;
}

/* 旁白：长段呼吸 — 段间留更大间距，首句轻缩进，模拟书面叙事节奏 */
.chat-message-bubble--offline .chat-message-segment--narration {
    margin-top: 0.18em;
    margin-bottom: 0.18em;
    text-indent: 0;
}

/* 旁白后接旁白：相邻两段叙事之间留出更大的段落呼吸（"长段间距"） */
.chat-message-bubble--offline .chat-message-segment--narration + .chat-message-segment--narration {
    margin-top: 0.55em;
}

/* 旁白接对白 / 对白接旁白：场景与人物切换，给中等留白 */
.chat-message-bubble--offline .chat-message-segment--narration + .chat-message-segment--dialogue,
.chat-message-bubble--offline .chat-message-segment--dialogue + .chat-message-segment--narration {
    margin-top: 0.42em;
}

/* 对白：紧凑短段 — 相邻两条对白之间紧凑排版（"短段间距"） */
.chat-message-bubble--offline .chat-message-segment--dialogue + .chat-message-segment--dialogue {
    margin-top: 0.12em;
}

/* 长文模式：模型输出中显式插入的空行（chat-message-linebreak） = 真正的段落分隔
   按用户要求：分段只留一条空行（约一个行高），不再额外注入心电图分界线。
   此处把空行从 0.55em 抬到约 1.0em，让"段落"在视觉上明确成立。 */
.chat-message-bubble--offline-longform .chat-message-linebreak {
    min-height: 1em;
}

/* 长文模式：相邻 segment 之间不靠 flex gap，靠 segment 自带的 margin 控制，
   避免与上方 narration/dialogue 间距叠加造成段落过疏。 */
.chat-message-bubble--offline-longform {
    gap: 0;
}

/* 消息模式（非长文）：单条气泡内可能只有 1-2 个 segment，保留默认 gap 即可 */

/* Char 行程「系统自动回复·延迟联系」：标注在气泡内、正文末尾，小号，避免与真人续聊混淆 */
#chat-page .chat-message.other-message .chat-message-bubble .chat-message-char-auto-reply-note {
    display: inline;
    margin-left: 0.35em;
    font-size: 10px;
    line-height: 1.35;
    color: rgba(44, 62, 80, 0.48);
    letter-spacing: 0.03em;
    font-weight: 500;
    vertical-align: baseline;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}

.chat-message.other-message .chat-message-bubble .chat-message-char-auto-reply-note {
    display: inline;
    margin-left: 0.35em;
    font-size: 10px;
    line-height: 1.35;
    color: rgba(0, 0, 0, 0.45);
    letter-spacing: 0.03em;
    font-weight: 500;
    vertical-align: baseline;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}

/* 微信聊天气泡：雾面玻璃（排除拍立得/转账/位置/翻面照片，避免外框样式被破坏） */
/* 本块刻意少用 !important，便于「微信-设置」里 #wechat-user-bubble-css 覆盖；需强制时用用户 CSS 的 !important */
#chat-page .chat-message.other-message .chat-message-bubble:not(.chat-message-bubble--polaroid):not(:has(.chat-transfer-bubble)):not(:has(.chat-location-bubble)):not(:has(.chat-photo-flip-root)),
#chat-page .chat-message.my-message .chat-message-bubble:not(.chat-message-bubble--polaroid):not(:has(.chat-transfer-bubble)):not(:has(.chat-location-bubble)):not(:has(.chat-photo-flip-root)) {
    background-color: rgba(232, 239, 245, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    padding: 10px 16px;
    color: #2c3e50;
    overflow: hidden;
}

#chat-page .chat-message.other-message .chat-message-bubble.chat-message-bubble--rich-html,
#chat-page .chat-message.my-message .chat-message-bubble.chat-message-bubble--rich-html {
    overflow: visible;
    padding: 8px 12px;
}

#chat-page .chat-message.other-message .chat-message-bubble.chat-message-bubble--offline-rich,
#chat-page .chat-message.my-message .chat-message-bubble.chat-message-bubble--offline-rich {
    overflow: visible !important;
}

#chat-page .chat-message.other-message .chat-message-bubble:not(.chat-message-bubble--polaroid):not(:has(.chat-transfer-bubble)):not(:has(.chat-location-bubble)):not(:has(.chat-photo-flip-root)):not(.chat-message-bubble--rich-html) *,
#chat-page .chat-message.my-message .chat-message-bubble:not(.chat-message-bubble--polaroid):not(:has(.chat-transfer-bubble)):not(:has(.chat-location-bubble)):not(:has(.chat-photo-flip-root)):not(.chat-message-bubble--rich-html) * {
    background-color: transparent !important;
}

#chat-page .chat-message.other-message .chat-message-bubble:not(.chat-message-bubble--polaroid):not(:has(.chat-transfer-bubble)):not(:has(.chat-location-bubble)):not(:has(.chat-photo-flip-root)):not(.chat-message-bubble--rich-html)::before,
#chat-page .chat-message.my-message .chat-message-bubble:not(.chat-message-bubble--polaroid):not(:has(.chat-transfer-bubble)):not(:has(.chat-location-bubble)):not(:has(.chat-photo-flip-root)):not(.chat-message-bubble--rich-html)::before {
    display: none !important;
}

/* 未挂载在 #chat-page 时（如设置页预览）仍保留默认灰/白气泡 */
.chat-message.other-message .chat-message-bubble {
    border-radius: 9px 9px 9px 9px;
    padding: 12px 16px;
    color: #000000;
    border: 1px solid #ababab;
    background: rgba(235,235,235,1);
    box-shadow: -1px 1px 2px 1px rgba(0,0,0,0);
}

.chat-message.my-message .chat-message-bubble {
    border-radius: 9px 9px 10px 9px;
    padding: 12px 16px;
    color: #000000;
    border: 1px solid #a8a8a8;
    background: rgba(255,255,255,1);
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0);
}

/* 消息时间戳 */
.chat-message-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    /* 占满头像旁剩余宽度，否则 max-width:80% 会相对过窄的父级计算，短句也会被强制换行 */
    flex: 1 1 0%;
    min-width: 0;
}

.chat-message-timestamp {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    margin-left: 8px;
    white-space: nowrap;
}

/* 群聊：跨日 / 间隔超 24 小时时居中日期时间分隔（如 4月11日 01:24） */
.chat-date-separator {
    width: 100%;
    text-align: center;
    margin: 10px 0 6px;
    clear: both;
    box-sizing: border-box;
    pointer-events: none;
}

.chat-date-separator span {
    display: inline-block;
    font-size: 12px;
    line-height: 1.4;
    color: #999;
    font-weight: 400;
}

/* 群聊：成员昵称（显示在气泡上方，类似微信） */
.chat-message-name {
    font-size: 12px;
    color: #8a8a8a;
    line-height: 1.1;
    margin-left: 8px;
    margin-top: 2px;
    margin-bottom: -2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.chat-message.my-message .chat-message-name {
    display: none;
}

.chat-message.my-message .chat-message-content {
    align-items: flex-end;
}

#chat-page.chat-page--offline-mode .chat-message--offline-flow .chat-message-content,
#chat-page.chat-page--offline-archive .chat-message--offline-flow .chat-message-content {
    align-items: stretch;
    max-width: none;
    flex: 1 1 0%;
    min-width: 0;
}

#chat-page .chat-message--offline-archived-hidden {
    display: none !important;
}

@font-face {
    font-family: 'LoveMiScriptArchiveSong';
    src: url('assets/AaGuDianKeBenSongYouMoBan-2.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'LoveMiScriptArchiveHand';
    src: url('assets/QingSongShouXieTi1-2.ttf') format('truetype');
    font-display: swap;
}

/* 「等待下一次重逢」折叠归档卡片 — 登机牌样式 */
.chat-offline-reunion-card {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(92%, 360px);
    align-self: center;
    margin: 22px auto 14px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.24s ease, opacity 0.24s ease, filter 0.24s ease;
    filter: drop-shadow(0 8px 18px rgba(60, 90, 70, 0.18));
}

.chat-offline-reunion-card * {
    pointer-events: none;
}

.chat-offline-reunion-card:hover {
    transform: translateY(-1px);
}

.chat-offline-reunion-card:active {
    transform: scale(0.985);
    opacity: 0.92;
}

.chat-offline-reunion-card__pass {
    width: 100%;
    display: flex;
    align-items: stretch;
    background:
        linear-gradient(180deg, #d4e8d2 0%, #c5e0c2 14%, #c5e0c2 16%, #f3f8f1 16%, #f8fbf7 100%);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    color: #2c4a3a;
    font-family: 'Helvetica Neue', 'Arial', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 顶部绿色横条 */
.chat-offline-reunion-card__pass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    background: linear-gradient(90deg, #9cc99a 0%, #b5d8b1 100%);
    pointer-events: none;
}

/* 左侧副券 */
.chat-offline-reunion-card__stub {
    flex: 0 0 92px;
    padding: 36px 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.chat-offline-reunion-card__stub-label {
    font-size: 9px;
    letter-spacing: 0.22em;
    color: rgba(44, 74, 58, 0.55);
    margin-top: 2px;
}

.chat-offline-reunion-card__stub-code {
    font-family: 'LoveMiHuiwenMingchao', 'Songti SC', 'Noto Serif SC', serif;
    font-size: 17px;
    font-weight: 700;
    color: #2c4a3a;
    letter-spacing: 0.06em;
}

.chat-offline-reunion-card__stub-plane {
    color: #5a8b5e;
    margin: 4px 0 2px;
    line-height: 0;
}

.chat-offline-reunion-card__stub-route {
    font-size: 8.5px;
    letter-spacing: 0.12em;
    color: rgba(44, 74, 58, 0.7);
    line-height: 1.4;
}

/* 中间齿孔分割线 */
.chat-offline-reunion-card__perforation {
    flex: 0 0 12px;
    position: relative;
    align-self: stretch;
    z-index: 1;
}

.chat-offline-reunion-card__perforation::before {
    content: '';
    position: absolute;
    top: 32px;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 2px dashed rgba(60, 110, 80, 0.55);
}

/* 右侧主券 */
.chat-offline-reunion-card__main {
    flex: 1 1 auto;
    padding: 34px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.chat-offline-reunion-card__brand {
    font-size: 10px;
    letter-spacing: 0.34em;
    font-weight: 700;
    color: rgba(44, 74, 58, 0.68);
    text-transform: uppercase;
}

.chat-offline-reunion-card__title {
    font-family: 'LoveMiHuiwenMingchao', 'Songti SC', 'Noto Serif SC', serif;
    font-size: 19px;
    font-weight: 700;
    color: #1f3a2c;
    letter-spacing: 0.2em;
    line-height: 1.25;
    margin: 2px 0 4px;
    text-align: left;
}

.chat-offline-reunion-card__meta {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.chat-offline-reunion-card__meta-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}

.chat-offline-reunion-card__meta-item span {
    font-size: 8.5px;
    letter-spacing: 0.18em;
    color: rgba(44, 74, 58, 0.52);
    text-transform: uppercase;
}

.chat-offline-reunion-card__meta-item strong {
    font-family: 'Helvetica Neue', 'Arial', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #2c4a3a;
}

/* 条纹条码 */
.chat-offline-reunion-card__barcode {
    margin-top: 6px;
    height: 18px;
    background-image: repeating-linear-gradient(
        90deg,
        #2c4a3a 0,
        #2c4a3a 1px,
        transparent 1px,
        transparent 3px,
        #2c4a3a 3px,
        #2c4a3a 5px,
        transparent 5px,
        transparent 6px,
        #2c4a3a 6px,
        #2c4a3a 8px,
        transparent 8px,
        transparent 11px
    );
    opacity: 0.78;
    border-radius: 1px;
}

.chat-offline-reunion-card__hint {
    align-self: flex-end;
    margin-top: 2px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 10px;
    letter-spacing: 0.28em;
    color: rgba(44, 74, 58, 0.55);
}

.chat-offline-script-archive-card {
    width: min(94%, 430px);
    filter: drop-shadow(0 8px 16px rgba(42, 35, 48, 0.12));
}

.chat-offline-script-archive-card__art {
    position: relative;
    width: 100%;
    aspect-ratio: 1.49 / 1;
    overflow: hidden;
    background: transparent;
}

.chat-offline-script-archive-card__art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-offline-script-archive-card__clean {
    display: none;
}

.chat-offline-script-archive-card__maintext {
    position: absolute;
    left: 34.4%;
    top: 13.6%;
    width: 34.8%;
    height: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    text-align: center;
}

.chat-offline-script-archive-card__title {
    width: 100%;
    color: #3a3a40;
    font-family: 'LoveMiScriptArchiveSong', 'LoveMiScriptArchiveHand', 'Microsoft YaHei', sans-serif;
    font-size: clamp(17px, 4.8vw, 25px);
    font-weight: 900;
    letter-spacing: .025em;
    line-height: 1.08;
    text-shadow: 0 1px 0 rgba(255,255,255,.86), 0 2px 8px rgba(255,255,255,.52);
}

.chat-offline-script-archive-card__group {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-offline-script-archive-card__scene {
    display: block;
    width: 100%;
    margin-top: 2px;
    white-space: nowrap;
}

.chat-offline-script-archive-card__time {
    position: absolute;
    left: -2%;
    top: 35.5%;
    width: 88%;
    color: rgba(74, 74, 82, .82);
    font-family: 'LoveMiScriptArchiveHand', 'Microsoft YaHei', sans-serif;
    font-size: clamp(11px, 3vw, 14px);
    letter-spacing: .1em;
    line-height: 1.1;
    text-shadow: 0 1px 0 rgba(255,255,255,.88), 0 2px 8px rgba(255,255,255,.58);
}

.chat-offline-script-archive-card__names {
    position: absolute;
    left: -4%;
    top: 50.5%;
    width: 82%;
    color: rgba(62, 62, 70, .84);
    font-family: 'LoveMiScriptArchiveHand', 'Microsoft YaHei', sans-serif;
    font-size: clamp(10px, 2.7vw, 13px);
    line-height: 1.18;
    max-height: 30px;
    overflow: hidden;
    text-shadow: 0 1px 0 rgba(255,255,255,.88), 0 2px 8px rgba(255,255,255,.58);
}

.chat-offline-script-archive-card__hint {
    position: absolute;
    left: 34%;
    right: 16%;
    bottom: 8.8%;
    margin: 0;
    align-self: auto;
    color: rgba(45, 45, 52, .72);
    font-family: 'LoveMiScriptArchiveHand', 'Microsoft YaHei', sans-serif;
    font-size: clamp(10px, 2.6vw, 13px);
    letter-spacing: .1em;
    text-align: center;
}

/* 「等待下一次重逢」展开后的尾部收起条 — 与登机牌色系一致的轻量小条
   背景：归档段被展开后，登机牌仍在原位（线下记录开头），但叙事很长时
   用户向下读完已经看不到登机牌，再想收起得滚回最上面。这条尾部收起条
   始终贴在最后一条归档消息后面，让用户就近收起本段。 */
.chat-offline-reunion-tail {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: min(72%, 240px);
    margin: 8px auto 16px;
    padding: 8px 14px;
    background: linear-gradient(180deg, rgba(245, 250, 243, 0.94), rgba(228, 240, 224, 0.94));
    border: 1px dashed rgba(90, 139, 94, 0.38);
    border-radius: 999px;
    color: rgba(44, 74, 58, 0.78);
    font-size: 12px;
    letter-spacing: 0.18em;
    cursor: pointer;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 3px rgba(44, 74, 58, 0.06);
    transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.chat-offline-reunion-tail * {
    pointer-events: none;
}

.chat-offline-reunion-tail:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(238, 247, 234, 0.96), rgba(218, 234, 213, 0.96));
    border-color: rgba(90, 139, 94, 0.55);
}

.chat-offline-reunion-tail:active {
    transform: scale(0.985);
    opacity: 0.92;
}

.chat-offline-reunion-tail__icon {
    font-size: 13px;
    line-height: 1;
    color: rgba(44, 74, 58, 0.7);
}

.chat-offline-reunion-tail__label {
    font-family: 'LoveMiHuiwenMingchao', 'Songti SC', 'Noto Serif SC', serif;
    font-weight: 600;
    letter-spacing: 0.22em;
}

.chat-offline-script-archive-tail {
    width: min(64%, 230px);
    padding: 6px 10px 8px;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: none;
    box-shadow: none;
    color: rgba(75, 92, 78, .74);
}

.chat-offline-script-archive-tail:hover {
    background: transparent;
    border-color: transparent;
}

.chat-offline-script-archive-tail__paws {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
}

.chat-offline-script-archive-tail__paws i {
    display: block;
    width: 26px;
    height: 26px;
    background: url('assets/店铺;小木美工素材 (12).png') center / contain no-repeat;
    opacity: .76;
}

.chat-offline-script-archive-tail__paws i:nth-child(1) {
    width: 18px;
    height: 18px;
    transform: translateY(8px) rotate(-14deg);
    opacity: .52;
}

.chat-offline-script-archive-tail__paws i:nth-child(2) {
    width: 24px;
    height: 24px;
    transform: translateY(-2px) rotate(8deg);
    opacity: .68;
}

.chat-offline-script-archive-tail__paws i:nth-child(3) {
    width: 20px;
    height: 20px;
    transform: translateY(7px) rotate(-5deg);
    opacity: .58;
}

.chat-offline-script-archive-tail__paws i:nth-child(4) {
    width: 29px;
    height: 29px;
    transform: translateY(-4px) rotate(13deg);
    opacity: .78;
}

.chat-offline-script-archive-tail__paws i:nth-child(5) {
    width: 21px;
    height: 21px;
    transform: translateY(5px) rotate(-10deg);
    opacity: .62;
}

.chat-offline-script-archive-tail .chat-offline-reunion-tail__label {
    font-family: 'LoveMiScriptArchiveHand', 'Microsoft YaHei', sans-serif;
    font-size: 12px;
    letter-spacing: .12em;
}

.chat-message.my-message .chat-message-timestamp {
    margin-left: 0;
    margin-right: 8px;
}

/* 消息操作界面 */
.message-action-menu {
    position: absolute;
    width: 330px;
    max-width: calc(100% - 16px);
    height: 65px;
    background: rgba(240, 238, 235, 0.45); /* #PANTONE 11-4201TCX Cloud Dancer with 45% opacity */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
}

.message-action-menu.show {
    display: flex;
}

.message-action-menu.message-action-menu--voice-save {
    width: 405px;
}

.message-action-item {
    width: 75px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.message-action-item[hidden] {
    display: none !important;
}

.message-action-item:hover {
    background: rgba(255, 255, 255, 0.3);
}

.message-action-icon {
    font-size: 20px;
    margin-bottom: 4px;
    color: #333;
}

.message-action-text {
    font-size: 12px;
    color: #666;
}

/* 回溯确认模态框样式 */
.backtrack-confirm-modal {
    width: 300px;
    max-width: 90%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.backtrack-confirm-content {
    padding: 24px;
    text-align: center;
}

.backtrack-confirm-text {
    font-size: 16px;
    color: #333;
    line-height: 1.4;
}

.backtrack-confirm-footer {
    display: flex;
    border-top: 1px solid #f0f0f0;
}

.backtrack-cancel-btn,
.backtrack-confirm-btn {
    flex: 1;
    padding: 16px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.backtrack-cancel-btn {
    background: white;
    color: #666;
    border-right: 1px solid #f0f0f0;
}

.backtrack-cancel-btn:hover {
    background: #f5f5f5;
}

.backtrack-confirm-btn {
    background: #07C160;
    color: white;
}

.backtrack-confirm-btn:hover {
    background: #05a850;
}

/* 确认删除模态框样式 */
.confirm-delete-modal {
    width: 280px;
    height: 180px;
    background: rgba(240, 240, 240, 0.55); /* Cloud Dancer 色值近似，透明度55% */
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    padding: 20px 20px 15px;
    box-sizing: border-box;
}

.confirm-delete-text {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin: 0 0 20px 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-delete-footer {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: center;
    margin-top: 0;
    padding-bottom: 0;
}

.confirm-delete-cancel-btn,
.confirm-delete-confirm-btn {
    padding: 8px 24px;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.confirm-delete-cancel-btn {
    background: #f0f0f0;
    color: #333;
    border: 1px solid #d0d0d0;
}

.confirm-delete-cancel-btn:hover {
    background: #e0e0e0;
}

.confirm-delete-confirm-btn {
    background: #333;
    color: white;
}

.confirm-delete-confirm-btn:hover {
    background: #111;
}

/* 引用框架样式 */
.chat-quote-frame {
    display: none;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 15px;
    font-size: 14px;
}

.chat-quote-frame.show {
    display: block;
}

.chat-quote-frame.is-expanded .chat-quote-detail {
    display: block;
}

.chat-quote-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.chat-quote-name {
    font-weight: 600;
    color: #333;
}

.chat-quote-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-quote-close:hover {
    color: #333;
}

.chat-quote-toggle {
    width: 100%;
    border: none;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    cursor: pointer;
    text-align: left;
}

.chat-quote-content {
    color: #666;
    line-height: 1.4;
    word-break: break-word;
}

.chat-quote-meta {
    font-size: 12px;
    color: #7b8794;
}

.chat-quote-detail {
    display: none;
    margin-top: 8px;
    color: #4b5563;
    line-height: 1.5;
    word-break: break-word;
    padding: 10px 12px 0;
}

/* 消息中的引用样式 */
.chat-message-quote {
    margin-top: 8px;
    padding: 10px 12px;
    background-color: #f0f0f0;
    border-radius: 10px;
    font-size: 12px;
    color: #666;
    border-left: 3px solid #07C160;
    cursor: pointer;
}

.chat-message-quote.is-expanded .quote-detail,
.chat-message-quote.is-expanded .quote-open-original {
    display: block;
}

.chat-message-quote .quote-summary-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-message-quote .quote-name {
    font-weight: 600;
    display: block;
}

.chat-message-quote .quote-content {
    line-height: 1.3;
    word-break: break-word;
}

.chat-message-quote .quote-toggle-hint {
    font-size: 11px;
    color: #7b8794;
}

.chat-message-quote .quote-detail {
    display: none;
    margin-top: 8px;
    line-height: 1.5;
    word-break: break-word;
    color: #425466;
}

.chat-message-quote .quote-open-original {
    display: none;
    margin-top: 8px;
    padding: 0;
    background: none;
    border: none;
    color: #2563eb;
    font-size: 12px;
    cursor: pointer;
}

.chat-message--quote-target {
    animation: quoteTargetFlash 1.8s ease;
}

@keyframes quoteTargetFlash {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35); }
    35% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.18); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* 多选模式样式：相对 #chat-page 定位，勿用 fixed——否则会贴浏览器视口底，溢出 love咪 #app 圆角外框 */
#chat-page .chat-multiselect-bar {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    gap: 8px;
    row-gap: 10px;
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(240, 238, 235, 0.55); /* #PANTONE 11-4201TCX Cloud Dancer with 55% opacity */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    font-size: 13px;
    box-sizing: border-box;
    min-height: 48px;
    height: auto;
    width: 100%;
    max-width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

#chat-page .chat-multiselect-bar.show {
    display: flex;
}

#chat-page .multiselect-info {
    font-size: 13px;
    color: #333;
    flex: 1 1 108px;
    min-width: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    align-self: center;
}

#chat-page .multiselect-info span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#chat-page .multiselect-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 1 1 200px;
    min-width: 0;
    align-self: center;
}

#chat-page .multiselect-btn {
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex: 0 0 auto;
    line-height: 1.25;
    align-self: center;
}

@media (max-width: 380px) {
    #chat-page .chat-multiselect-bar {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 12px;
    }

    #chat-page .multiselect-info {
        font-size: 12px;
        flex-basis: 100%;
    }

    #chat-page .multiselect-actions {
        flex-basis: 100%;
        justify-content: space-between;
    }

    #chat-page .multiselect-btn {
        padding: 6px 8px;
        font-size: 11px;
    }
}


.forward-btn {
    background: #f5f5f5;
    color: #333;
}

.forward-btn:hover {
    background: #e0e0e0;
}

/* 转发好友选择 */
#forward-friends-modal {
    z-index: 1200;
}

.forward-friends-modal-content {
    max-width: 340px;
    width: 88%;
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.forward-friends-header {
    flex-shrink: 0;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}

.forward-friends-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    width: 100%;
}

.forward-friends-body {
    flex: 1;
    min-height: 0;
    padding: 12px 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.forward-friends-hint {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #888;
    line-height: 1.4;
}

.forward-friends-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #eee;
    border-radius: 8px;
    max-height: 38vh;
}

.forward-friends-empty {
    text-align: center;
    padding: 24px 12px;
    font-size: 14px;
    color: #999;
}

.forward-friend-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.15s ease;
}

.forward-friend-row:last-child {
    border-bottom: none;
}

.forward-friend-row:active {
    background: #f5f5f5;
}

.forward-friend-row.selected {
    background: rgba(7, 193, 96, 0.08);
}

.forward-friend-checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid #ccc;
    border-radius: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
}

.forward-friend-row.selected .forward-friend-checkbox {
    border-color: #07c160;
    background: #07c160;
}

.forward-friend-row.selected .forward-friend-checkbox::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.forward-friend-avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
    background: #e0e0e0 center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
}

.forward-friend-name {
    flex: 1;
    font-size: 16px;
    color: #111;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forward-friends-footer {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 12px 16px 16px;
    border-top: 1px solid #eee;
}

.forward-friends-cancel-btn,
.forward-friends-send-btn {
    padding: 10px 24px;
    min-height: 36px;
    line-height: 1.2;
    border-radius: 6px;
    font-size: 15px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.forward-friends-cancel-btn {
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
}

.forward-friends-send-btn {
    background: #000;
    color: #fff;
    border: none;
}

.forward-friends-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #999;
}

/* 导出角色相关记录选择界面 */
#export-chat-history-modal {
    z-index: 1200;
}

.export-chat-history-modal {
    max-width: 340px;
    width: 88%;
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.export-chat-history-modal .modal-header {
    flex-shrink: 0;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.export-chat-history-modal .modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    flex: 1;
}

.export-chat-confirm-btn {
    padding: 6px 16px;
    min-height: 32px;
    line-height: 1.2;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    background: #07c160;
    color: #fff;
    border: none;
    cursor: pointer;
}

.export-chat-confirm-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #999;
}

.export-chat-history-modal .modal-body {
    flex: 1;
    min-height: 0;
    padding: 12px 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.export-chat-hint {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #888;
    line-height: 1.4;
}

#full-backup-export-modal {
    z-index: 1200;
}

.full-backup-export-modal {
    max-width: 340px;
    width: 88%;
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.full-backup-export-modal .modal-header {
    flex-shrink: 0;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.full-backup-export-modal .modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    flex: 1;
}

.full-backup-export-modal .modal-body {
    flex: 1;
    min-height: 0;
    padding: 12px 16px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.full-backup-summary {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(7, 193, 96, 0.08);
    color: #1d6f44;
    font-size: 13px;
    line-height: 1.45;
}

.full-backup-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.full-backup-module-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    background: #fff;
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.full-backup-module-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.full-backup-module-card.selected {
    border-color: #07c160;
    background: rgba(7, 193, 96, 0.08);
    box-shadow: 0 8px 18px rgba(7, 193, 96, 0.14);
}

.full-backup-module-icon {
    width: 34px;
    height: 34px;
    margin: 0 auto 8px;
    display: block;
}

.full-backup-module-name {
    font-size: 14px;
    font-weight: 600;
    color: #222;
}


.export-chat-select-all {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8f8f8;
    border-radius: 8px;
    margin-bottom: 12px;
    cursor: pointer;
}

.export-chat-checkbox {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 2px solid #ddd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.export-chat-checkbox.checked {
    background: #07c160;
    border-color: #07c160;
}

.export-chat-checkbox.checked::after {
    content: '✓';
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

.export-chat-select-all-label {
    font-size: 14px;
    color: #333;
}

.export-chat-friends-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #eee;
    border-radius: 8px;
    max-height: 48vh;
}

.export-chat-friend-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.15s ease;
}

.export-chat-friend-row:last-child {
    border-bottom: none;
}

.export-chat-friend-row:hover {
    background: #f5f5f5;
}

.export-chat-friend-row .export-chat-checkbox {
    border-color: #07c160;
}

.export-chat-friend-avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f0f0f0;
}

.export-chat-friend-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    flex-shrink: 0;
}

.export-chat-friend-info {
    flex: 1;
    min-width: 0;
}

.export-chat-friend-name {
    font-size: 15px;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.export-chat-friend-type {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.export-chat-friend-count {
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
}

.export-chat-empty {
    text-align: center;
    padding: 40px 12px;
    font-size: 14px;
    color: #999;
}

/* 下载准备就绪（兜底） */
#download-ready-modal {
    z-index: 1300;
}

.download-ready-modal {
    max-width: 340px;
    width: 88%;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
}

.download-ready-modal .modal-header {
    flex-shrink: 0;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}

.download-ready-modal .modal-header h3 {
    margin: 0;
    font-size: 17px;
    flex: 1;
    text-align: center;
}

.download-ready-modal .modal-body {
    padding: 16px;
}

.download-ready-hint {
    margin: 0 0 12px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
    white-space: pre-line;
}

.download-ready-btn {
    width: 100%;
    min-height: 44px;
    border: none;
    border-radius: 12px;
    background: #07c160;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.download-ready-btn.secondary {
    margin-top: 10px;
    background: #f2f2f2;
    color: #333;
    font-weight: 500;
}

.download-ready-btn:active {
    transform: translateY(1px);
}

/* 微信钱包界面 */
.wallet-page {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    flex-direction: column;
    background: #f5f5f5;
    z-index: 100;
}

.wallet-page.show {
    display: flex;
}

.wallet-page-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.wallet-back-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.wallet-page-title {
    flex: 1;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
}

.wallet-page-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.wallet-balance-card {
    background: linear-gradient(145deg, #31435d 0%, #415a78 52%, #5f7a9a 100%);
    border-radius: 24px;
    padding: 26px 24px 24px;
    color: #f7fbff;
    margin-bottom: 18px;
    text-align: center;
    box-shadow: 0 18px 34px rgba(31, 53, 82, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.wallet-balance-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    background: rgba(247, 251, 255, 0.14);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f6fbff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}

.wallet-balance-icon-svg {
    width: 32px;
    height: 32px;
    display: block;
}

.wallet-balance-label {
    font-size: 14px;
    color: rgba(243, 248, 255, 0.86);
    margin-bottom: 8px;
    letter-spacing: 0.04em;
}

.wallet-balance-amount {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 14px rgba(20, 31, 48, 0.22);
}

.wallet-menu-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}

.wallet-menu-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.wallet-menu-item:last-child {
    border-bottom: none;
}

.wallet-menu-icon {
    font-size: 20px;
    margin-right: 12px;
    width: 24px;
    text-align: center;
}

.wallet-menu-name {
    flex: 1;
    font-size: 15px;
    color: #333;
}

.wallet-menu-value {
    font-size: 14px;
    color: #999;
    margin-right: 4px;
}

.wallet-menu-arrow {
    font-size: 18px;
    color: #ccc;
}

.wallet-menu-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.wallet-menu-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.wallet-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ddd;
    border-radius: 28px;
    transition: 0.3s;
}

.wallet-toggle-slider::before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.wallet-menu-toggle input:checked + .wallet-toggle-slider {
    background: #07c160;
}

.wallet-menu-toggle input:checked + .wallet-toggle-slider::before {
    transform: translateX(22px);
}

/* 亲属卡界面 */
.kinship-page {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    flex-direction: column;
    background: #f5f5f5;
    z-index: 101;
}

.kinship-page.show {
    display: flex;
}

.kinship-page-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.kinship-back-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.kinship-page-title {
    flex: 1;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
}

.kinship-page-body {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, #eef3f8 0%, #f7f9fc 100%);
}

.kinship-tabs {
    display: flex;
    gap: 12px;
    padding: 6px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(207, 217, 230, 0.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
    position: sticky;
    top: 0;
    z-index: 3;
}

.kinship-tab {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #748093;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 12px;
    transition: all 0.18s ease;
}

.kinship-tab.active {
    color: #33435a;
    font-weight: 700;
    background: linear-gradient(135deg, #dde7f1 0%, #f7fbff 100%);
    box-shadow: 0 6px 16px rgba(83, 108, 136, 0.12);
}

.kinship-give-btn {
    width: 100%;
    padding: 13px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 700;
    color: #f7fbff;
    background: linear-gradient(135deg, #4f6784 0%, #6d87a7 100%);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(79, 103, 132, 0.18);
}

.kinship-give-btn:hover {
    background: linear-gradient(135deg, #445d78 0%, #617c9b 100%);
}

/* 与钱包页一致：整块内容在 body 内滚动，避免嵌套 flex 导致子列表高度为 0、手势落到外层 .wechat-me-content */
.kinship-received-section,
.kinship-sent-section {
    display: block;
    overflow: visible;
}

.kinship-card-list {
    display: block;
    overflow: visible;
    padding-right: 0;
}

.kinship-card-list.stacked {
    --kinship-stack-step: 118px;
    padding-bottom: 18px;
}

.kinship-card-list.stacked .kinship-card-item {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 20px;
    margin-bottom: 14px;
    box-shadow: none;
    position: relative;
    transform-origin: top center;
    will-change: transform;
}

.kinship-card-item {
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease, filter 0.24s ease;
}

.kinship-card-list.stacked .kinship-card-item:nth-child(1) {
    z-index: 8;
    transform: translateY(0) scale(1);
}

.kinship-card-list.stacked .kinship-card-item:nth-child(2) {
    z-index: 7;
    transform: translateY(calc(-1 * var(--kinship-stack-step))) scale(0.992);
}

.kinship-card-list.stacked .kinship-card-item:nth-child(3) {
    z-index: 6;
    transform: translateY(calc(-2 * var(--kinship-stack-step))) scale(0.984);
}

.kinship-card-list.stacked .kinship-card-item:nth-child(4) {
    z-index: 5;
    transform: translateY(calc(-3 * var(--kinship-stack-step))) scale(0.976);
}

.kinship-card-list.stacked .kinship-card-item:nth-child(5) {
    z-index: 4;
    transform: translateY(calc(-4 * var(--kinship-stack-step))) scale(0.968);
}

.kinship-card-list.stacked .kinship-card-item:nth-child(n+6) {
    z-index: 3;
    transform: translateY(calc(-5 * var(--kinship-stack-step))) scale(0.96);
}

.kinship-card-list.expanded .kinship-card-item,
.kinship-card-item {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 20px;
    margin-bottom: 14px;
    box-shadow: none;
    position: relative;
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: none;
}

.kinship-card-list.expanded .kinship-card-item:last-child,
.kinship-card-item:last-child {
    margin-bottom: 0;
}

.kinship-card-toggle-trigger {
    cursor: pointer;
}

.kinship-bank-card-face {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 18px 18px 16px;
    color: #f8fbff;
    box-shadow: 0 16px 34px rgba(39, 58, 81, 0.18);
}

.kinship-bank-card-face.received {
    background: linear-gradient(145deg, #314862 0%, #48627f 50%, #6d87a4 100%);
}

.kinship-bank-card-face.sent {
    background: linear-gradient(145deg, #5e6777 0%, #788396 46%, #9eabbf 100%);
}

.kinship-bank-card-face::before {
    content: '';
    position: absolute;
    right: -26px;
    top: -34px;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}

.kinship-bank-card-top,
.kinship-bank-card-owner-row,
.kinship-bank-card-bottom,
.kinship-bank-card-chip-row,
.kinship-bank-card-number {
    position: relative;
    z-index: 1;
}

.kinship-bank-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.kinship-bank-card-bank {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.kinship-bank-card-label {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(245, 249, 255, 0.76);
}

.kinship-bank-card-brandmark {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(248, 251, 255, 0.72);
}

.kinship-bank-card-chip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0 14px;
}

.kinship-bank-card-chip {
    width: 34px;
    height: 26px;
    border-radius: 7px;
    background: linear-gradient(145deg, #f2d79d 0%, #c9a869 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

.kinship-bank-card-wave {
    width: 26px;
    height: 18px;
    border-top: 2px solid rgba(255,255,255,0.82);
    border-bottom: 2px solid rgba(255,255,255,0.48);
    border-radius: 20px;
    opacity: 0.86;
}

.kinship-bank-card-number {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 16px;
}

.kinship-bank-card-owner-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.kinship-bank-card-owner-label,
.kinship-bank-card-balance-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: rgba(243, 248, 255, 0.7);
    margin-bottom: 4px;
}

.kinship-bank-card-owner strong,
.kinship-bank-card-balance {
    font-size: 16px;
    font-weight: 700;
}

.kinship-bank-card-state {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.kinship-bank-card-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.kinship-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    min-height: 200px;
    text-align: center;
}

.kinship-empty-text {
    font-size: 16px;
    color: #999;
    margin-bottom: 8px;
}

.kinship-empty-hint {
    font-size: 13px;
    color: #bbb;
    line-height: 1.5;
}

.wallet-bills-page {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    flex-direction: column;
    background: #f5f5f5;
    z-index: 102;
}

.wallet-bills-page.show {
    display: flex;
}

#wechat-me-page.wallet-bills-page-active .wechat-bottom-nav,
#wechat-me-page.wallet-page-active .wechat-bottom-nav {
    display: none !important;
}

#wechat-me-page.wallet-bills-page-active .wechat-me-content {
    overflow: hidden;
    overscroll-behavior: none;
}

.wallet-bills-page-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 16px max(16px, env(safe-area-inset-bottom, 0px));
}

.wallet-bills-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wallet-bills-summary-card {
    padding: 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #ececec;
}

.wallet-bills-summary-label {
    font-size: 13px;
    color: #7a7a7a;
    margin-bottom: 8px;
}

.wallet-bills-summary-amount {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
}

.wallet-bills-summary-amount.income {
    color: #07c160;
}

.wallet-bills-summary-amount.expense {
    color: #1a1a1a;
}

.wallet-bills-filters {
    display: flex;
    gap: 10px;
}

.wallet-bills-filter {
    border: none;
    background: #fff;
    color: #666;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
}

.wallet-bills-filter.active {
    background: #1a1a1a;
    color: #fff;
    font-weight: 600;
}

.wallet-bills-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wallet-bill-delete-confirm-content {
    width: min(92vw, 340px);
}

.wallet-bill-delete-confirm-body {
    padding: 22px 20px 8px;
}

.wallet-bill-delete-confirm-text {
    margin: 0;
    text-align: center;
    font-size: 15px;
    color: #333;
    line-height: 1.5;
}

.wallet-bill-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 16px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #ececec;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.wallet-bill-item-main {
    min-width: 0;
    flex: 1;
}

.wallet-bill-item-title {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.45;
    word-break: break-word;
}

.wallet-bill-item-meta {
    margin-top: 5px;
    font-size: 12px;
    color: #6f6f6f;
    line-height: 1.45;
    word-break: break-word;
}

.wallet-bill-detail-toggle {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: #f5f6f8;
    color: #57606a;
    font-size: 12px;
    line-height: 1.2;
}

.wallet-bill-detail-toggle-icon {
    font-size: 11px;
    transition: transform 0.18s ease;
}

.wallet-bill-item.detail-expanded .wallet-bill-detail-toggle {
    background: #eef4ff;
    color: #2f6bff;
}

.wallet-bill-item.detail-expanded .wallet-bill-detail-toggle-icon {
    transform: rotate(180deg);
}

.wallet-bill-item-detail {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f7f8fa;
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
}

.wallet-bill-item-time {
    margin-top: 8px;
    font-size: 12px;
    color: #9b9b9b;
}

.wallet-bill-item-side {
    flex-shrink: 0;
    padding-top: 1px;
}

.wallet-bill-item-amount {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.wallet-bill-item-amount.income {
    color: #07c160;
}

.wallet-bill-item-amount.expense {
    color: #1a1a1a;
}

.wallet-bills-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
}

.wallet-bills-empty-text {
    font-size: 16px;
    color: #999;
    margin-bottom: 8px;
}

.wallet-bills-empty-hint {
    font-size: 13px;
    color: #bbb;
    line-height: 1.6;
}

.kinship-friend-list {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.kinship-friend-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.kinship-friend-item:last-child {
    border-bottom: none;
}

.kinship-friend-item.selected {
    background: #f5f5f5;
}

.kinship-friend-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    background: #e0e0e0;
    flex-shrink: 0;
}

.kinship-friend-item-name {
    font-size: 15px;
    color: #1a1a1a;
}

.payment-method-list {
    max-height: 200px;
    overflow-y: auto;
}

.payment-method-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
}

.payment-method-item:last-child {
    margin-bottom: 0;
}

.payment-method-item:hover {
    background: #f9f9f9;
}

.payment-method-item.is-selected {
    border-color: #ff5000;
    background: #fff8f5;
    box-shadow: 0 0 0 1px rgba(255, 80, 0, 0.15);
}

.payment-method-item.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.payment-method-label {
    font-size: 15px;
    color: #1a1a1a;
}

.payment-method-amount {
    font-size: 14px;
    color: #666;
}

/* 钱包模态框 - 黑白配色 */
.wallet-modal .wallet-modal-content {
    background: #fff;
    border: 1px solid #333;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    overflow: hidden;
}

.wallet-modal-header {
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
}

.wallet-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: center;
}

.wallet-modal-body {
    padding: 24px 20px;
}

.wallet-modal-hint {
    margin: 0 0 16px;
    font-size: 14px;
    color: #666;
}

.wallet-password-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 18px;
    letter-spacing: 8px;
    text-align: center;
    border: 1px solid #333;
    border-radius: 8px;
    background: #fff;
    color: #1a1a1a;
    box-sizing: border-box;
}

.wallet-password-input::placeholder {
    color: #999;
    font-size: 14px;
    letter-spacing: 0;
}

.wallet-amount-input {
    letter-spacing: normal;
}

.wallet-password-input:focus {
    outline: none;
    border-color: #1a1a1a;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}

.wallet-modal-error {
    margin: 12px 0 0;
    font-size: 13px;
    color: #c00;
    min-height: 18px;
}

.wallet-modal-footer {
    display: flex;
    border-top: 1px solid #e0e0e0;
}

.wallet-modal-btn {
    flex: 1;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: #fff;
    color: #1a1a1a;
}

.wallet-modal-btn.cancel {
    border-right: 1px solid #e0e0e0;
}

.wallet-modal-btn.cancel:hover {
    background: #f5f5f5;
}

.wallet-modal-btn.confirm {
    background: #1a1a1a;
    color: #fff;
}

.wallet-modal-btn.confirm:hover {
    background: #333;
}

.favorites-item {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    cursor: pointer;
}

.favorites-item:last-child {
    border-bottom: none;
}

.favorites-item:active {
    background: #f8f8f8;
}

.favorites-item-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.favorites-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.favorites-item-src {
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #55627d;
}

.favorites-item-time {
    flex-shrink: 0;
    font-size: 12px;
    color: #a2a8b3;
}

.favorites-item-body {
    font-size: 15px;
    color: #111;
    line-height: 1.65;
    word-break: break-word;
    white-space: pre-wrap;
}

.favorites-item-tip {
    font-size: 12px;
    color: #b0b0b0;
}

.favorites-item.pending-delete {
    background: #fff7f7;
    box-shadow: inset 0 0 0 1px rgba(255, 90, 90, 0.12);
}


.wechat-memory-library-page,
.wechat-memory-space-page {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 12;
    flex-direction: column;
    background: #f6f7fb;
}

.wechat-memory-library-page.show,
.wechat-memory-space-page.show {
    display: flex;
}

.wechat-memory-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid #ececf2;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.wechat-memory-back-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

.wechat-memory-back-btn:active {
    background: rgba(0, 0, 0, 0.05);
}

.wechat-memory-header-title {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #1f2533;
}


.wechat-memory-header-action {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #9098ad;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.wechat-memory-header-action svg {
    width: 22px;
    height: 22px;
}

.wechat-memory-header-action:active {
    transform: translateY(1px);
}

.wechat-memory-header-action.is-active {
    background: rgba(98, 114, 234, 0.12);
    color: #6272ea;
}

.wechat-memory-header-action:disabled {
    opacity: 0.55;
    cursor: default;
}

/* 记忆空间 · 选择可参与好友：顶边对齐状态栏下沿（与 .status-bar 高度公式一致），底部留白；列表区域滚动 */
#wechat-memory-friend-selector-modal.modal.show {
    align-items: center;
    justify-content: flex-start;
    /* 与状态栏同系：max(12,safe) 顶 padding + 左右 16 内约一行时间区(~22) + 底 padding 12 → 用 40px 作为栏下第一根「内容线」位置 */
    padding: calc(max(12px, env(safe-area-inset-top, 0px)) + 40px) 12px calc(max(12px, env(safe-area-inset-bottom, 0px)) + 17px);
    box-sizing: border-box;
}

.wechat-memory-friend-selector-content {
    width: min(440px, 100%);
    max-height: min(
        calc(82vh - 5px),
        calc(
            100vh - max(12px, env(safe-area-inset-top, 0px)) - 40px - max(12px, env(safe-area-inset-bottom, 0px)) - 17px
        )
    );
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px 24px 14px 14px;
    margin: 0 auto;
    background: rgba(238, 233, 248, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 12px 30px rgba(45, 37, 73, 0.14);
}

.wechat-memory-friend-selector-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px 16px;
}

.wechat-memory-friend-selector-header {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 92px 1fr 92px;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
}

.wechat-memory-friend-selector-heading {
    min-width: 0;
    text-align: center;
}


.wechat-memory-friend-selector-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #4c4563;
}

.wechat-memory-friend-selector-close,
.wechat-memory-friend-selector-save {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    background: rgba(214, 206, 230, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #544d6b;
    font-size: 14px;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 18px rgba(52, 43, 82, 0.12);
}

.wechat-memory-friend-selector-save {
    justify-self: end;
}

.wechat-memory-friend-selector-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.wechat-memory-friend-selector-item .wechat-memory-friend-subtitle,
.wechat-memory-friend-selector-item .wechat-memory-friend-avatar {
    display: none;
}

.wechat-memory-friend-selector-item .wechat-memory-friend-name {
    font-size: 15px;
    color: #3f3954;
}

.wechat-memory-friend-selector-checkbox {
    width: 20px;
    height: 20px;
    accent-color: #8c82aa;
}

.wechat-memory-library-body,
.wechat-memory-space-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}

.wechat-memory-space-body {
    padding-bottom: 104px;
}

.wechat-memory-intro,
.wechat-memory-calendar-hint {
    font-size: 13px;
    color: #77809a;
    line-height: 1.6;
}

.wechat-memory-intro {
    margin-bottom: 12px;
}

.wechat-memory-friend-list {
    display: grid;
    gap: 12px;
}

.wechat-memory-friend-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: none;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(77, 90, 122, 0.08);
    cursor: pointer;
    text-align: left;
}

.wechat-memory-friend-card:active {
    transform: translateY(1px);
    box-shadow: 0 8px 18px rgba(77, 90, 122, 0.1);
}

.wechat-memory-friend-avatar,
.wechat-memory-space-avatar-img,
.wechat-memory-friend-avatar-placeholder {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    flex-shrink: 0;
}

.wechat-memory-friend-avatar {
    overflow: hidden;
    background: linear-gradient(135deg, #dcdffc 0%, #cfd4ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wechat-memory-space-avatar-img {
    display: block;
    object-fit: cover;
}

.wechat-memory-friend-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #4b57a5;
    background: linear-gradient(135deg, #ecefff 0%, #d5dbff 100%);
}

.wechat-memory-friend-meta {
    min-width: 0;
    flex: 1;
}

.wechat-memory-friend-name {
    font-size: 16px;
    font-weight: 600;
    color: #1f2533;
    line-height: 1.35;
    word-break: break-word;
}

.wechat-memory-friend-subtitle {
    margin-top: 6px;
    font-size: 13px;
    color: #7e879e;
    line-height: 1.5;
}


.wechat-memory-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 24px 16px;
    color: #9aa1b1;
    font-size: 14px;
    text-align: center;
}

.wechat-memory-friend-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, rgba(127, 140, 255, 0.14) 0%, rgba(216, 227, 255, 0.88) 100%);
    border-radius: 22px;
}

.wechat-memory-friend-month {
    margin-top: 6px;
    font-size: 13px;
    color: #68708a;
}

.wechat-memory-month-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.wechat-memory-month-trigger::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    opacity: 0.7;
}

.wechat-memory-month-trigger:active {
    opacity: 0.85;
}

.wechat-memory-calendar-card {
    padding: 16px;
    background: linear-gradient(135deg, rgba(188, 198, 223, 0.88) 0%, rgba(233, 231, 245, 0.88) 48%, rgba(208, 221, 227, 0.88) 100%);
    border-radius: 22px;
    box-shadow: 0 14px 30px rgba(112, 128, 165, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.wechat-memory-calendar-weekdays,
.wechat-memory-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.wechat-memory-calendar-weekdays {
    margin-bottom: 10px;
}

.wechat-memory-calendar-weekdays span {
    text-align: center;
    font-size: 12px;
    color: #8e96aa;
}

.wechat-memory-calendar-cell {
    position: relative;
    min-height: 44px;
    border: none;
    border-radius: 14px;
    background: #eef1f6;
    color: #6f7890;
    font-size: 15px;
    font-weight: 600;
    cursor: default;
}

.wechat-memory-calendar-cell-inner {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wechat-memory-calendar-cell.empty {
    background: transparent;
}

.wechat-memory-calendar-cell.has-chat {
    cursor: pointer;
}

.wechat-memory-calendar-cell.selection-mode {
    box-shadow: inset 0 0 0 1.5px rgba(98, 114, 234, 0.18);
}

.wechat-memory-calendar-cell.level-1 {
    background: #cbd7ff;
    color: #37415e;
}

.wechat-memory-calendar-cell.level-2 {
    background: #8f9fff;
    color: #fff;
}

.wechat-memory-calendar-cell.level-3 {
    background: #6272ea;
    color: #fff;
    box-shadow: 0 10px 22px rgba(98, 114, 234, 0.22);
}

.wechat-memory-calendar-cell:active:not(.empty):not(:disabled) {
    transform: translateY(1px);
}

.wechat-memory-calendar-cell.selected {
    box-shadow: 0 0 0 2px rgba(98, 114, 234, 0.9), 0 10px 22px rgba(98, 114, 234, 0.18);
}

.wechat-memory-calendar-cell.selected::after {
    content: '\2713';
    position: absolute;
    top: 5px;
    left: 6px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #4f5de4;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

.wechat-memory-calendar-badge {
    position: absolute;
    right: 7px;
    bottom: 5px;
    font-size: 10px;
    opacity: 0.82;
}

.wechat-memory-calendar-hint {
    margin-top: 12px;
}

.wechat-memory-batch-generate-btn {
    position: sticky;
    right: 0;
    bottom: 16px;
    margin: 18px 0 0 auto;
    min-width: 132px;
    padding: 14px 18px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #7381ff 0%, #5d6bee 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 14px 30px rgba(98, 114, 234, 0.24);
    cursor: pointer;
    z-index: 2;
}

.wechat-memory-batch-generate-btn:disabled {
    background: #c8d0e6;
    box-shadow: none;
    cursor: default;
}

.wechat-memory-month-picker-content {
    width: min(420px, calc(100% - 32px));
    max-width: 420px;
    border-radius: 24px;
    overflow: hidden;
}

.wechat-memory-month-picker-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 0;
}

.wechat-memory-month-picker-kicker {
    font-size: 12px;
    color: #8a93ab;
    letter-spacing: 0.08em;
}

.wechat-memory-month-picker-title {
    margin: 6px 0 0;
    font-size: 20px;
    color: #1f2533;
}

.wechat-memory-month-picker-body {
    padding: 16px 20px 0;
}

.wechat-memory-month-picker-year-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.wechat-memory-month-picker-year-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 12px;
    background: #eef1f7;
    color: #4f5873;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.wechat-memory-month-picker-year-input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #d8ddec;
    border-radius: 14px;
    background: #fff;
    color: #1f2533;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    outline: none;
}

.wechat-memory-month-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.wechat-memory-month-picker-item {
    height: 42px;
    border: none;
    border-radius: 14px;
    background: #f1f3f8;
    color: #596179;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.wechat-memory-month-picker-item.is-active {
    background: linear-gradient(135deg, #7381ff 0%, #5d6bee 100%);
    color: #fff;
    box-shadow: 0 10px 22px rgba(98, 114, 234, 0.22);
}

.wechat-memory-month-picker-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 20px 20px;
}

.wechat-memory-month-picker-footer .wallet-modal-btn {
    min-width: 120px;
    flex: 0 0 120px;
}

.wechat-memory-diary-modal-content {
    width: min(440px, calc(100% - 32px));
    max-width: 440px;
    border-radius: 24px;
    overflow: hidden;
}

.wechat-memory-diary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 0;
}

.wechat-memory-diary-kicker {
    font-size: 12px;
    color: #8a93ab;
    letter-spacing: 0.08em;
}

.wechat-memory-diary-title {
    margin: 6px 0 0;
    font-size: 20px;
    color: #1f2533;
}

.wechat-memory-diary-body {
    padding: 12px 20px 0;
}

.wechat-memory-diary-loading {
    font-size: 13px;
    color: #7e879e;
    margin-bottom: 10px;
}

.wechat-memory-diary-content {
    max-height: min(56vh, 420px);
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.8;
    color: #2f3545;
    white-space: pre-wrap;
}

.wechat-memory-diary-footer {
    padding: 16px 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.wechat-memory-diary-footer .wallet-modal-btn {
    min-width: 120px;
    flex: 0 0 120px;
}

.wechat-memory-diary-action-btn {
    background: #f3f4f8;
    color: #4a536b;
}

.wechat-memory-diary-action-btn:hover {
    background: #ebeef6;
}

.favorite-btn {
    background: #f5f5f5;
    color: #333;
}

.favorite-btn:hover {
    background: #e0e0e0;
}

.delete-btn {
    background: #ff4757;
    color: white;
}

.delete-btn:hover {
    background: #ff3742;
}

/* 消息选择框样式 */
.chat-message-selector {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(120, 132, 146, 0.72);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(17, 24, 39, 0.16);
}

.chat-message-selector:hover {
    border-color: rgba(88, 101, 242, 0.7);
    box-shadow: 0 5px 14px rgba(88, 101, 242, 0.18);
}

.chat-message-selector.selected {
    background: linear-gradient(180deg, #5b8cff 0%, #4a74ea 100%);
    border-color: #4a74ea;
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(74, 116, 234, 0.34);
}

.chat-message-selector.selected::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}

/* 消息选中状态 */
.chat-message.selected {
    background: linear-gradient(90deg, rgba(91, 140, 255, 0.12), rgba(91, 140, 255, 0.04));
    border-radius: 16px;
}

.chat-message.selected .chat-message-bubble {
    box-shadow: 0 0 0 2px rgba(91, 140, 255, 0.28), 0 10px 22px rgba(91, 140, 255, 0.12);
    transform: translateY(-1px);
}

/* 编辑消息模态框样式 */
.edit-message-modal {
    width: 300px;
    max-width: 90%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.edit-message-modal .modal-header {
    padding: 20px 24px 0;
    text-align: center;
}

.edit-message-modal .modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.edit-message-modal .modal-body {
    padding: 24px;
}

.edit-message-input {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    resize: vertical;
    box-sizing: border-box;
}

.edit-message-input:focus {
    outline: none;
    border-color: #07C160;
    box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.1);
}

.edit-message-footer {
    display: flex;
    border-top: 1px solid #f0f0f0;
    padding: 16px 24px;
    gap: 12px;
}

.edit-cancel-btn,
.edit-confirm-btn {
    flex: 1;
    height: 34px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-cancel-btn {
    background: white;
    color: #333;
    border: 1px solid #e0e0e0;
}

.edit-cancel-btn:hover {
    background: #f5f5f5;
}

.edit-confirm-btn {
    background: black;
    color: white;
}

.edit-confirm-btn:hover {
    background: #333;
}

.chat-input-area {
    /* 默认使用 px 安全值：OPPO A5 / 旧 Android Chrome 不支持 cqw 时，不能让按钮热区声明失效。 */
    --chat-tool-btn: 34px;
    --chat-tool-icon: 18px;
    display: flex;
    align-items: center;
    padding: 9px 12px;
    background: rgba(191, 189, 195, 0.45); /* #PANTONE 663 C with 45% opacity */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px 20px 0 0;
    gap: 8px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    max-width: 100%;
    box-sizing: border-box;
}

@supports (width: 1cqw) {
    .chat-input-area {
        /* 现代浏览器按 #app 容器宽度微调，旧浏览器保持上方 px 安全热区。 */
        --chat-tool-btn: clamp(26px, 9cqw, 36px);
        --chat-tool-icon: clamp(14px, 5cqw, 20px);
        padding: clamp(8px, 2.2cqw, 12px) clamp(10px, 3.2cqw, 16px);
        gap: clamp(6px, 2cqw, 12px);
    }
}

.chat-function-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--chat-tool-btn, 36px);
    height: var(--chat-tool-btn, 36px);
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #000;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    pointer-events: auto;
    touch-action: manipulation;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 3px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.chat-function-icon {
    width: var(--chat-tool-icon, 20px);
    height: var(--chat-tool-icon, 20px);
    flex-shrink: 0;
    pointer-events: none;
    display: block;
}

.chat-mention-btn {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

@supports (width: 1cqw) {
    .chat-mention-btn {
        font-size: clamp(11px, 3.2cqw, 14px);
    }
}

#chat-page:not(.chat-page--mention-enabled) #chat-mention-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .chat-function-btn:hover {
        transform: scale(1.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 8px rgba(0, 0, 0, 0.12);
    }
}

.receive-btn {
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}

/* 真机触摸即时反馈；与 .loading 的动画可并存 */
#chat-page .chat-function-btn.receive-btn:active:not(:disabled) {
    transform: scale(0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.receive-btn.loading .chat-function-icon {
    opacity: 0;
}

.receive-btn.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--chat-tool-btn, 36px) * 0.67);
    height: calc(var(--chat-tool-btn, 36px) * 0.67);
    border: max(2px, calc(var(--chat-tool-btn, 36px) * 0.075)) solid rgba(0, 0, 0, 0.3);
    border-top-color: #07C160;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.chat-input {
    flex: 1;
    min-width: 0;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

@supports (width: 1cqw) {
    .chat-input {
        padding: clamp(8px, 2cqw, 10px) clamp(12px, 3cqw, 16px);
        font-size: clamp(13px, 3.6cqw, 14px);
    }
}

#chat-page textarea.chat-input {
    display: block;
    width: 100%;
    min-height: 36px;
    max-height: 120px;
    line-height: 1.45;
    resize: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    field-sizing: content;
    font-family: inherit;
    box-sizing: border-box;
}

@supports not (field-sizing: content) {
    #chat-page textarea.chat-input {
        overflow-y: hidden;
    }
}

#chat-page .chat-input-area {
    align-items: flex-end;
}

.chat-input:focus {
    outline: none;
    border-color: #07C160;
    box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.1);
}

/* 查找聊天记录模态框样式 */
.search-chat-modal {
    width: 90%;
    max-width: 400px;
    background: rgba(240, 240, 240, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    overflow: hidden;
}

.search-chat-modal .modal-header {
    border-bottom: 1px solid #e5e5e5;
}

.search-chat-input {
    flex: 1;
    padding: 8px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    background: #f5f5f5;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

.search-chat-input:focus {
    outline: none;
    border-color: #07C160;
    background: white;
}

.search-results {
    height: 100%;
    overflow-y: auto;
}

.search-placeholder {
    text-align: center;
    color: #999;
    padding: 40px 20px;
    font-size: 14px;
}

.search-result-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.search-result-item:hover {
    background: #f5f5f5;
}

.search-result-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.search-result-content {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-content .highlight {
    background: #fff3cd;
    color: #d63384;
    padding: 0 2px;
    border-radius: 2px;
}

.search-no-result {
    text-align: center;
    color: #999;
    padding: 40px 20px;
    font-size: 14px;
}

/* 清空聊天记录确认提示框 */
.clear-chat-confirm-modal {
    width: 90%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    overflow: hidden;
}

.clear-chat-confirm-content {
    padding: 40px 30px;
    text-align: center;
}

.clear-chat-confirm-text {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
}

.clear-chat-confirm-footer {
    display: flex;
    border-top: 1px solid #e5e5e5;
}


.clear-chat-cancel-btn,
.clear-chat-confirm-btn {
    flex: 1;
    padding: 16px;
    border: none;
    background: none;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-chat-cancel-btn {
    color: #333;
    border-right: 1px solid #e5e5e5;
}

.clear-chat-cancel-btn:hover {
    background: #f5f5f5;
}

.clear-chat-confirm-btn {
    color: #d63384;
    font-weight: 500;
}

.clear-chat-confirm-btn:hover {
    background: #fff5f5;
}

/* 删除并退出确认提示框 */
.delete-friend-confirm-modal {
    width: 90%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    overflow: hidden;
}

.delete-friend-confirm-content {
    padding: 40px 30px;
    text-align: center;
}

.delete-friend-confirm-text {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
}

.delete-friend-confirm-footer {
    display: flex;
    border-top: 1px solid #e5e5e5;
}

.delete-friend-cancel-btn,
.delete-friend-confirm-btn {
    flex: 1;
    padding: 16px;
    border: none;
    background: none;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.delete-friend-cancel-btn {
    color: #333;
    border-right: 1px solid #e5e5e5;
}

.delete-friend-cancel-btn:hover {
    background: #f5f5f5;
}

.delete-friend-confirm-btn {
    color: #d63384;
    font-weight: 500;
}

.delete-friend-confirm-btn:hover {
    background: #fff5f5;
}

/* 聊天/好友设置 · 小屏全层磨砂（#chat-page 内，与长记忆同构） */
#chat-page .chat-fullscreen-glass {
    z-index: 2400;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent !important;
    display: flex !important;
    align-items: stretch;
    justify-content: stretch;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(10px, 0, 0);
    transition: opacity 0.3s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.35s;
}

#chat-page #friend-settings-modal.chat-fullscreen-glass,
#chat-page #group-settings-modal.chat-fullscreen-glass {
    z-index: 2410;
}

/* 自好友/群全层设置中打开子页时须压过磨砂层 */
#char-dialogue-lang-modal.show,
#friend-contact-group-modal.show,
#add-group-members-modal.show,
#group-private-bubble-members-modal.show,
#group-member-bubble-css-modal.show,
#group-topic-direction-modal.show,
#group-topic-editor-modal.show,
#group-topic-delete-confirm-modal.show {
    z-index: 2500;
}

#chat-page .chat-fullscreen-glass.show {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.3s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

/* 查找聊天记录：贴合小手机视口，约 90% 实色 + 15px 磨砂，入场与聊天设置同轨 */
#chat-page #search-chat-modal.search-chat-fullscreen {
    z-index: 2425;
}

#offline-script-chat-page #search-chat-modal.search-chat-fullscreen {
    z-index: 9600;
}

#chat-page #search-chat-modal.search-chat-fullscreen .modal-content.search-chat-modal {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column;
    padding: 0;
    background: rgba(245, 246, 248, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--chat-text, #1f2430);
}

#offline-script-chat-page #search-chat-modal.search-chat-fullscreen .modal-content.search-chat-modal {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column;
    padding: 0;
    background: rgba(245, 246, 248, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--chat-text, #1f2430);
}

#chat-page #search-chat-modal.search-chat-fullscreen .modal-content.search-chat-modal > .modal-header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#offline-script-chat-page #search-chat-modal.search-chat-fullscreen .modal-content.search-chat-modal > .modal-header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#chat-page #search-chat-modal.search-chat-fullscreen .search-chat-input {
    flex: 1;
    min-width: 0;
}

#offline-script-chat-page #search-chat-modal.search-chat-fullscreen .search-chat-input {
    flex: 1;
    min-width: 0;
}

#chat-page #search-chat-modal.search-chat-fullscreen .search-chat-modal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

#offline-script-chat-page #search-chat-modal.search-chat-fullscreen .search-chat-modal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

#chat-page #search-chat-modal.search-chat-fullscreen .search-results {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#offline-script-chat-page #search-chat-modal.search-chat-fullscreen .search-results {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#chat-page .chat-message.chat-message--search-jump-highlight {
    outline: 2px solid rgba(7, 193, 96, 0.9);
    outline-offset: 3px;
    border-radius: 10px;
    transition: outline-color 0.2s ease;
}

#chat-page .chat-fullscreen-glass .modal-content.chat-settings-modal,
#chat-page .chat-fullscreen-glass .modal-content.friend-settings-modal {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column;
    padding: 0;
    background: rgba(231, 232, 234, 0.88) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--chat-text, #1f2430);
}

#chat-page .chat-fullscreen-glass .modal-content.chat-settings-modal > .modal-header,
#chat-page .chat-fullscreen-glass .modal-content.friend-settings-modal > .modal-header {
    flex: 0 0 auto;
}

#chat-page .chat-fullscreen-glass .modal-content.chat-settings-modal > .modal-body,
#chat-page .chat-fullscreen-glass .modal-content.friend-settings-modal > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: none !important;
}

#chat-page .chat-fullscreen-glass .friend-settings-content {
    max-height: none;
    min-height: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
    padding: 20px 20px 28px;
}

#chat-page .chat-fullscreen-glass .chat-settings-modal > .modal-body {
    box-sizing: border-box;
    padding: 0 0 8px 0;
}

#chat-page .chat-fullscreen-glass .chat-settings-list {
    padding-bottom: 6px;
}

/* 弹窗式预览（#app 外）等仍用下方默认尺寸；仅 #chat-page 全层用上一段 */
/* 聊天设置模态框 */
.chat-settings-modal {
    width: 90%;
    max-width: 400px;
    background: rgba(240, 240, 240, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    overflow: hidden;
}

.chat-settings-modal > .modal-body {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.chat-settings-modal > .modal-body::-webkit-scrollbar {
    width: 6px;
}

.chat-settings-modal > .modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.chat-settings-modal > .modal-body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.chat-settings-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
}

.chat-settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.chat-settings-item:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.private-chat-api-fold-header {
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
    gap: 10px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.private-chat-api-fold-arrow {
    width: 18px;
    text-align: center;
    transform-origin: center;
    transition: transform 0.2s ease, color 0.2s ease;
    flex: 0 0 auto;
}

.private-chat-api-fold-header[aria-expanded="true"] .private-chat-api-fold-arrow {
    color: #07c160;
}

#private-chat-api-fields {
    -webkit-text-size-adjust: 100%;
}

#private-chat-api-fields input,
#private-chat-api-fields button {
    min-height: 38px;
    -webkit-appearance: none;
    appearance: none;
}

.chat-settings-label {
    font-size: 15px;
    color: #333;
    font-weight: 500;
}

.chat-settings-arrow {
    font-size: 14px;
    color: #999;
}

.chat-settings-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.chat-settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.chat-settings-item.danger {
    color: #ff3b30;
}

.chat-settings-item.danger .chat-settings-label {
    color: #ff3b30;
}

/* 删除并退出按钮 */
.delete-and-exit-btn {
    margin-top: 8px;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 14px;
}

.delete-and-exit-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.delete-and-exit-btn span {
    font-size: 15px;
    font-weight: 500;
    color: #ff3b30;
}

/* 好友设置模态框 */
.friend-settings-modal {
    width: 90%;
    max-width: 400px;
    background: rgba(240, 240, 240, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    overflow: hidden;
}

.friend-settings-content {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.friend-settings-content::-webkit-scrollbar {
    width: 6px;
}

.friend-settings-content::-webkit-scrollbar-track {
    background: transparent;
}

.friend-settings-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

/* 头像上传部分 */
.avatar-upload-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.avatar-container {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.avatar-placeholder {
    font-size: 36px;
    font-weight: 600;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    text-align: center;
}

#avatar-upload {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* 好友设置：与 #avatar-upload 一致，覆盖整圆区域，避免原生「选择文件」文案露出 */
#friend-settings-modal #fs-avatar-upload,
.friend-settings-modal #fs-avatar-upload {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
    z-index: 2;
}

.avatar-hint {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* 好友信息部分 */
.friend-info-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 30px;
}

.friend-info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.friend-info-label {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.friend-info-value {
    font-size: 14px;
    color: #999;
}

.role-setting {
    flex: 1;
    margin-left: 20px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 8px;
    font-size: 14px;
    color: #666;
}

/* 编辑状态样式 */
.friend-info-edit {
    flex: 1;
    margin-left: 20px;
}

.friend-info-edit input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}

.friend-info-edit input:focus {
    border-color: #ddd;
    box-shadow: none;
}

.role-setting-edit {
    flex: 1;
    margin-left: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-setting-edit input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    background: #f5f5f5;
}

.role-setting-edit button {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.role-setting-edit button:first-of-type {
    background: #007aff;
    color: #fff;
}

.role-setting-edit button:first-of-type:hover {
    background: #0056b3;
}

.role-setting-edit button:last-of-type {
    background: #f5f5f5;
    color: #333;
}

.role-setting-edit button:last-of-type:hover {
    background: #e0e0e0;
}

/* 角色设定容器 */
.role-setting-container {
    padding: 16px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.role-setting-container:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.role-setting-header {
    margin-bottom: 12px;
}

.role-setting-label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.role-setting-content {
    padding: 16px;
    background: #f5f5f5;
    border-radius: 8px;
    font-size: 14px;
    color: #666;
    min-height: 72px;
    display: flex;
    align-items: flex-start;
}

.role-setting-content .role-preview-text,
.role-setting-content .role-preview-placeholder {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.45;
}

.role-setting-content .role-preview-placeholder {
    color: #999;
}

.role-setting-edit {
    display: block;
    max-height: min(58vh, 480px);
    overflow: hidden;
}

.resizeable-textarea-container {
    position: relative;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 120px;
    max-height: min(55vh, 420px);
    overflow: hidden;
}

.resizeable-textarea {
    width: 100%;
    height: 100%;
    min-height: 120px;
    min-width: 100%;
    max-width: 100%;
    max-height: min(55vh, 420px);
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    background: #f5f5f5;
    resize: none;
    box-sizing: border-box;
    outline: none;
    transition: all 0.2s ease;
    overflow-y: auto;
}

.resizeable-textarea:focus {
    border-color: #ddd;
    box-shadow: none;
}

.resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background-color: #ccc;
    border-radius: 0 0 8px 0;
    cursor: nwse-resize;
    transition: all 0.2s ease;
    z-index: 10;
}

.resize-handle:hover {
    background-color: #999;
    width: 16px;
    height: 16px;
}

.resize-handle:active {
    background-color: #666;
}

/* 头像上传进度提示 */
.avatar-upload-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: #007aff;
    width: 0%;
    transition: width 0.3s ease;
}

/* 增加点击反馈 */
.friend-info-item {
    cursor: pointer;
    transition: all 0.3s ease;
}

.friend-info-item:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chat-avatar-container {
    display: flex;
    align-items: center;
}

.chat-avatar-box {
    width: 60px;
    height: 60px;
    border: 2px dashed #ddd;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.chat-avatar-box:hover {
    border-color: #07C160;
    background-color: rgba(7, 193, 96, 0.05);
}

.chat-avatar-preview {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.chat-avatar-hint {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-top: 60px;
    transition: all 0.3s ease;
}

.chat-avatar-box.has-avatar .chat-avatar-hint {
    opacity: 0;
    visibility: hidden;
}

/* 保存按钮 */
.save-button {
    padding: 16px;
    background: #000;
    color: #fff;
    border-radius: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.save-button:hover {
    background: #333;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* 群聊设置：成员管理 */
.group-members-section {
    padding: 16px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.group-members-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.group-members-list,
.group-sync-members-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.group-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(245, 245, 245, 0.9);
    border-radius: 10px;
}

.group-member-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.group-member-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e9e9e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #888;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex: 0 0 auto;
}

.group-member-name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.group-member-remove-btn {
    border: none;
    background: rgba(255, 59, 48, 0.12);
    color: #ff3b30;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 0 0 auto;
}

.group-member-remove-btn:hover {
    background: rgba(255, 59, 48, 0.18);
}

.group-members-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.group-members-add-btn {
    border: none;
    background: rgba(7, 193, 96, 0.12);
    color: #07C160;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.group-members-add-btn:hover {
    background: rgba(7, 193, 96, 0.18);
}

.group-sync-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(245, 245, 245, 0.9);
    border-radius: 10px;
}

.group-sync-hint {
    margin-top: 10px;
    font-size: 12px;
    color: #777;
    line-height: 1.5;
}

.group-private-bubble-members-content {
    display: flex;
    flex-direction: column;
}

.group-private-bubble-members-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 96px;
}

.group-private-bubble-members-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px 12px;
}

.group-private-bubble-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    min-height: 58px;
    border-radius: 14px;
    background: rgba(245, 245, 245, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 6px 16px rgba(31, 45, 61, 0.06);
    -webkit-tap-highlight-color: transparent;
}

.group-private-bubble-member-row--disabled {
    opacity: 0.58;
}

.group-private-bubble-member-text {
    min-width: 0;
}

.group-private-bubble-member-sub,
.group-private-bubble-members-empty {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.4;
    color: #777;
}

.group-private-bubble-member-row input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    accent-color: #07C160;
}

.group-private-bubble-members-empty {
    padding: 18px 12px;
    text-align: center;
}

.group-private-bubble-members-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px;
    padding-bottom: calc(12px + constant(safe-area-inset-bottom));
    padding: 12px max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: rgba(255, 255, 255, 0.88);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.group-private-bubble-members-footer .wechat-settings-btn {
    min-width: 82px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.group-private-bubble-members-footer .wechat-settings-btn:disabled {
    opacity: 0.62;
    pointer-events: none;
}


.chat-input-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.chat-input-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.chat-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 14px;
    background: white;
    transition: all 0.3s ease;
}

/* 更多功能面板 - 磨砂玻璃质感 */
.chat-more-panel {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 1000;
    display: none;
    max-height: 280px;
    overflow-y: auto;
}

.chat-more-panel.show {
    display: block;
}

.chat-more-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px 16px;
}

.chat-more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 12px 8px;
    border-radius: 8px;
    transition: background 0.2s;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.chat-more-item > * {
    pointer-events: none;
}

.chat-more-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.voice-message-modal-content {
    width: min(88vw, 360px);
}

.voice-message-hint {
    line-height: 1.6;
}

.voice-message-textarea {
    margin-top: 10px;
    min-height: 116px;
}

.voice-record-lang-row {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.voice-record-lang-row label {
    color: #555;
    font-size: 13px;
}

.voice-message-lang-select {
    flex: 0 1 auto;
    max-width: 200px;
    padding: 7px 10px;
    border: 1px solid #d8d8dd;
    border-radius: 10px;
    background: #fff;
    color: #222;
    font-size: 13px;
    line-height: 1.3;
    appearance: none;
    -webkit-appearance: none;
}

.voice-message-lang-select:focus {
    outline: none;
    border-color: #8a8aff;
}

.voice-record-panel {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.voice-record-hold-btn {
    width: 62px;
    height: 62px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    color: #fff;
    font-size: 25px;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.2);
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.voice-record-hold-btn.is-recording {
    background: linear-gradient(135deg, #ef4444 0%, #be123c 100%);
    transform: scale(1.05);
}

.voice-record-status {
    min-height: 18px;
    color: #777;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

.voice-record-status.is-recording {
    color: #be123c;
}

.voice-record-status.is-ready {
    color: #047857;
}

.voice-record-status.is-error {
    color: #b91c1c;
}

/* 更多面板打开时，聊天内容底部留出空间，确保最后一条消息不被遮挡 */
.chat-content.more-panel-open {
    padding-bottom: 280px;
}

/* 灵动岛打开时，聊天内容顶部留出空间 */
.chat-content.dynamic-island-open {
    padding-top: 56px;
}

.chat-more-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    color: #333;
}

.chat-more-icon svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.chat-more-item:nth-child(2) .chat-more-icon svg {
    width: 22px;
    height: 28px;
}

.chat-more-label {
    font-size: 12px;
    color: #333;
    text-align: center;
}

.redpacket-type-toggle {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.redpacket-type-btn {
    flex: 1;
    border: 1px solid #d9d9d9;
    background: #fff;
    color: #333;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 14px;
    cursor: pointer;
}

.redpacket-type-btn.active {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
    font-weight: 600;
}

.redpacket-cover-editor {
    margin-bottom: 16px;
}

.redpacket-cover-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.redpacket-cover-editor-title {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.redpacket-cover-clear-btn {
    border: none;
    background: none;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}

.redpacket-cover-preview {
    width: 100%;
    min-height: 136px;
    border: 1px dashed #d0d0d0;
    border-radius: 16px;
    background: linear-gradient(135deg, #fa9d3b 0%, #f56c6c 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.redpacket-cover-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.redpacket-cover-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.22) 100%);
}

.redpacket-cover-preview-placeholder {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    padding: 0 20px;
}

.redpacket-password-hint {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 12px;
}

/* 一起听 - iOS风格灵动岛 */
.chat-dynamic-island {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    display: none;
    transition: transform 0.28s ease, opacity 0.28s ease;
}

.chat-dynamic-island.show {
    display: block;
}

.chat-dynamic-island.idle {
    transform: translateX(-50%) scale(0.96);
}


.dynamic-island-more {
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}


.dynamic-island-more:hover,
.dynamic-island-more.active {
    background: rgba(255, 255, 255, 0.28);
}


.chat-dynamic-island.idle .dynamic-island-info,
.chat-dynamic-island.idle .dynamic-island-more,
.chat-dynamic-island.idle .dynamic-island-play,
.chat-dynamic-island.idle .dynamic-island-close {
    display: none;
}


.chat-dynamic-island.idle .dynamic-island-panel {
    display: none !important;
}

@keyframes dynamic-island-vinyl-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.dynamic-island-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 220px;
    padding: 12px;
    background: rgba(13, 13, 15, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    display: none;
    flex-direction: column;
    gap: 10px;
}

.dynamic-island-panel.show {
    display: flex;
}


/* 聊天记忆总结（更多->总结） */
.chat-summary-modal,
.chat-summary-prompt-picker-modal,
.chat-summary-prompt-create-modal {
    /* 必须高于长记忆界面（2260），否则会被遮住 */
    z-index: 2290;
}

#chat-summary-modal.chat-summary-modal.show {
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 20px 0;
    overflow: hidden;
}

.chat-summary-modal-content,
.chat-summary-prompt-picker-content,
.chat-summary-prompt-create-content {
    width: 340px;
    max-width: 92%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 36px rgba(0,0,0,0.18);
    overflow: hidden;
}

.chat-summary-modal-content {
    padding: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.chat-summary-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}

.chat-summary-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #222;
}

.chat-summary-close {
    position: absolute;
    right: 10px;
    top: 8px;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    font-size: 22px;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.chat-summary-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.chat-summary-body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.chat-summary-detect {
    font-size: 13px;
    line-height: 1.45;
    color: #555;
    background: rgba(7,193,96,0.08);
    border: 1px solid rgba(7,193,96,0.16);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

.chat-summary-field {
    margin-bottom: 14px;
}

.chat-summary-field:last-child {
    margin-bottom: 0;
}

.chat-summary-label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.chat-summary-input {
    width: 100%;
    padding: 12px 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 15px;
    box-sizing: border-box;
    background: #fff;
}

.chat-summary-hint {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.55;
    color: #8a6a3a;
}

.chat-summary-input:focus,
.chat-summary-textarea:focus {
    outline: none;
    border-color: #07C160;
}

.chat-summary-prompt-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.chat-summary-prompt-display {
    cursor: pointer;
}

.chat-summary-prompt-btn {
    flex: 0 0 auto;
    padding: 12px 14px;
    border: none;
    border-radius: 10px;
    background: #07C160;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.chat-summary-start-field {
    padding: 12px;
    background: rgba(7,193,96,0.07);
    border: 1px solid rgba(7,193,96,0.14);
    border-radius: 12px;
}

.chat-summary-start-btn {
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 10px;
    background: #07C160;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.chat-summary-start-btn:hover {
    background: #06ad56;
}

.chat-summary-footer,
.chat-summary-prompt-picker-footer,
.chat-summary-prompt-create-footer {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid #eee;
}

.chat-summary-btn {
    flex: 1;
    padding: 12px 10px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
}

.chat-summary-btn.cancel {
    background: #f0f0f0;
    color: #333;
}

.chat-summary-btn.confirm {
    background: #07C160;
    color: #fff;
}

.chat-summary-btn.confirm:hover {
    background: #06ad56;
}

.chat-summary-prompt-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}

.chat-summary-prompt-picker-title {
    font-size: 16px;
    font-weight: 800;
    color: #222;
}

.chat-summary-prompt-picker-add {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: #07C160;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.chat-summary-prompt-picker-body {
    padding: 12px 10px;
    max-height: 52vh;
    overflow-y: auto;
}

.chat-summary-prompt-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-summary-prompt-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid #eee;
    background: #fff;
    cursor: pointer;
}

.chat-summary-prompt-item.active {
    border-color: rgba(7,193,96,0.55);
    box-shadow: 0 6px 18px rgba(7,193,96,0.12);
}

.chat-summary-prompt-name {
    font-size: 14px;
    font-weight: 800;
    color: #333;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-summary-prompt-badge {
    flex-shrink: 0;
    font-size: 12px;
    color: #07C160;
    font-weight: 800;
}

.chat-summary-prompt-empty {
    padding: 18px 8px 8px;
    text-align: center;
    font-size: 13px;
    color: #999;
}

.chat-summary-prompt-create-header {
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}

.chat-summary-prompt-create-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #222;
}

.chat-summary-prompt-create-body {
    padding: 16px;
}

.chat-summary-textarea {
    width: 100%;
    padding: 12px 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    box-sizing: border-box;
    resize: vertical;
    min-height: 120px;
}

/* 长记忆管理（黑/灰/白/红 线性图标风） */
.chat-long-memory-modal {
    z-index: 2260;
    /* 覆盖 .modal 的 fixed：让长记忆界面贴合 #app 容器大小（与聊天界面同尺寸） */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #fff; /* 覆盖 .modal 的半透明遮罩 */
    overflow: hidden;
}

/* 长记忆管理：全屏独立界面（占满小手机屏幕） */
.chat-long-memory-modal.show {
    align-items: stretch;
    justify-content: stretch;
}

.chat-long-memory-content {
    width: 100%;
    max-width: none;
    height: 100%;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-long-memory-header {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    padding: 10px 10px;
    border-bottom: 1px solid #eee;
}

.chat-long-memory-title {
    text-align: center;
    font-size: 16px;
    font-weight: 900;
    color: #111;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-long-memory-back,
.chat-long-memory-edit {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #111;
    padding: 6px;
    cursor: pointer;
}

.chat-long-memory-back svg,
.chat-long-memory-edit svg {
    width: 100%;
    height: 100%;
    display: block;
}

.chat-long-memory-body {
    padding: 12px;
    flex: 1;
    overflow-y: auto;
}

.chat-long-memory-empty {
    padding: 22px 10px;
    text-align: center;
    font-size: 13px;
    color: #777;
}

.chat-long-memory-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-long-memory-card {
    border: 1px solid #eee;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.chat-long-memory-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    border-bottom: 1px solid #eee;
    background: #fff;
}

.chat-long-memory-card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chat-long-memory-icon-btn {
    width: 34px;
    height: 34px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
    color: #111;
    cursor: pointer;
    padding: 6px;
}

.chat-long-memory-icon-btn svg {
    width: 100%;
    height: 100%;
    display: block;
}

.chat-long-memory-icon-btn.danger {
    border-color: rgba(220,38,38,0.35);
    color: #dc2626;
}

.chat-long-memory-card-meta {
    font-size: 12px;
    color: #666;
    font-weight: 700;
}

.chat-long-memory-card-body {
    padding: 12px 12px 14px;
    font-size: 14px;
    line-height: 1.55;
    color: #222;
    white-space: pre-wrap;
}

.chat-long-memory-edit-modal {
    z-index: 2270;
}

.chat-long-memory-edit-content {
    width: 360px;
    max-width: 94%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    overflow: hidden;
}

.chat-long-memory-edit-header {
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}

.chat-long-memory-edit-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 900;
    color: #111;
    text-align: center;
}

.chat-long-memory-edit-body {
    padding: 14px 16px;
}

.chat-long-memory-edit-textarea {
    width: 100%;
    padding: 12px 12px;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 14px;
    box-sizing: border-box;
    resize: vertical;
    min-height: 140px;
    color: #111;
}

.chat-long-memory-edit-textarea:focus {
    outline: none;
    border-color: #111;
}

.chat-long-memory-edit-footer {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid #eee;
}

.chat-long-memory-btn {
    flex: 1;
    padding: 12px 10px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
}

.chat-long-memory-btn.cancel {
    background: #f3f4f6;
    color: #111;
}

.chat-long-memory-btn.confirm {
    background: #111;
    color: #fff;
}

.chat-message-bubble.chat-message-bubble--kinship-invite {
    padding: 0 !important;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    /* 窄屏：随会话列宽收缩，避免固定 236px 超出气泡后被 #chat-page 规则 overflow:hidden 裁切 */
    width: min(236px, 100%);
    max-width: 100%;
    box-sizing: border-box;
}

/* —— 一起听歌·邀请卡片 —— */
.chat-message-bubble.chat-message-bubble--lt-invite {
    padding: 0 !important;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: min(236px, 100%);
    max-width: 100%;
    box-sizing: border-box;
}
#chat-page .chat-message .chat-message-bubble.chat-message-bubble--lt-invite {
    overflow: visible !important;
}
.chat-lt-invite-card {
    width: 100%;
    max-width: 236px;
    border-radius: 18px;
    padding: 12px 14px 12px;
    background: linear-gradient(180deg, #ffe9f0 0%, #fff5f8 100%);
    border: 1px solid rgba(214, 83, 122, 0.22);
    box-shadow: 0 8px 22px rgba(214, 83, 122, 0.10);
    color: #3a2330;
}
.chat-lt-invite-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.chat-lt-invite-tag {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(214, 83, 122, 0.16);
    color: #b03f6a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.chat-lt-invite-chip {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.chat-lt-invite-chip--pending {
    background: rgba(255, 255, 255, 0.72);
    color: #846272;
}
.chat-lt-invite-chip--accept {
    background: rgba(78, 168, 122, 0.18);
    color: #2f7c54;
}
.chat-lt-invite-chip--reject {
    background: rgba(155, 116, 130, 0.16);
    color: #7a5564;
}
.chat-lt-invite-title {
    font-size: clamp(13px, 3.9vw, 15px);
    line-height: 1.4;
    font-weight: 700;
    color: #3a2330;
    margin-bottom: 6px;
}
.chat-lt-invite-body {
    font-size: 12px;
    line-height: 1.55;
    color: #5b3b4a;
    word-break: break-word;
}
.chat-lt-invite-sub {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(214, 83, 122, 0.18);
    font-size: 11px;
    line-height: 1.5;
    color: #846272;
}

/* 一起听歌·音乐卡片 */
.chat-message-bubble--lt-music-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
    max-width: 280px;
}

#chat-page .chat-message .chat-message-bubble.chat-message-bubble--lt-music-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

.chat-lt-music-text-bubble {
    font-size: 14px;
    line-height: 1.5;
    color: #3a2330;
    margin-bottom: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(232, 239, 245, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    word-break: break-word;
}

.chat-lt-music-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #fff5f8 0%, #ffe9f0 100%) !important;
    border: 1px solid rgba(214, 83, 122, 0.22);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(214, 83, 122, 0.12);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-lt-music-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(214, 83, 122, 0.18);
    border-color: rgba(214, 83, 122, 0.35);
}

.chat-lt-music-card:active {
    transform: translateY(0);
}

.chat-lt-music-cover {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: rgba(214, 83, 122, 0.12);
    flex-shrink: 0;
}

.chat-lt-music-cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: rgba(214, 83, 122, 0.5);
}

.chat-lt-music-info {
    flex: 1;
    min-width: 0;
}

.chat-lt-music-title {
    font-size: 14px;
    font-weight: 600;
    color: #3a2330;
    line-height: 1.4;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-lt-music-artist {
    font-size: 12px;
    color: #846272;
    line-height: 1.3;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-lt-music-source {
    font-size: 10px;
    color: #b03f6a;
    line-height: 1.2;
    opacity: 0.7;
}

.chat-lt-music-play-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(214, 83, 122, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #b03f6a;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.chat-lt-music-card:hover .chat-lt-music-play-icon {
    background: rgba(214, 83, 122, 0.25);
    transform: scale(1.1);
}

/* #chat-page 下通用气泡块对「非拍立得/转账…」强制 overflow:hidden，特异性高于上一段，须收回亲属卡可见溢出或配合宽度收缩 */
#chat-page .chat-message .chat-message-bubble.chat-message-bubble--kinship-invite {
    overflow: visible !important;
}

.chat-kinship-invite-card {
    width: 100%;
    max-width: 236px;
    border-radius: 20px;
    padding: 14px;
    background: linear-gradient(180deg, #cfd8e6 0%, #eef2f7 100%);
    border: 1px solid rgba(86, 100, 118, 0.18);
    box-shadow: 0 10px 24px rgba(57, 71, 88, 0.10);
    color: #2f3946;
}

.chat-kinship-invite-card.is-received {
    background: linear-gradient(180deg, #d8e0eb 0%, #f3f6f9 100%);
}

.chat-kinship-invite-card.is-removed {
    background: linear-gradient(180deg, #dde2e8 0%, #f5f7f9 100%);
    color: #66717d;
}

.chat-kinship-invite-card.is-application {
    background: linear-gradient(165deg, #f4d8de 0%, #f8e7eb 46%, #fff7f8 100%);
    border-color: rgba(185, 118, 136, 0.22);
    box-shadow: 0 10px 24px rgba(151, 86, 104, 0.10);
}

.chat-kinship-invite-card.is-application.is-received {
    background: linear-gradient(165deg, #ead5dc 0%, #f7e8ec 54%, #fff8fa 100%);
}

.chat-kinship-invite-card.is-application.is-removed {
    background: linear-gradient(165deg, #e4d7dc 0%, #f5ecef 100%);
}

.chat-kinship-invite-card.is-application .chat-kinship-invite-chip {
    background: rgba(172, 101, 120, 0.13);
    color: #8a5264;
}

.chat-kinship-invite-card.is-application .chat-kinship-invite-amount {
    color: #89556a;
}

.chat-kinship-invite-card.is-application .chat-kinship-invite-state,
.chat-kinship-invite-card.is-application .chat-kinship-invite-wait {
    color: #8b6470;
}

.chat-kinship-invite-top,
.chat-kinship-invite-foot,
.chat-kinship-invite-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.chat-kinship-invite-top,
.chat-kinship-invite-foot {
    flex-wrap: wrap;
    row-gap: 8px;
}

.chat-kinship-invite-top {
    margin-bottom: 12px;
}

.chat-kinship-invite-main {
    align-items: stretch;
}

.chat-kinship-invite-copy {
    min-width: 0;
    flex: 1;
}

.chat-kinship-invite-chip,
.chat-kinship-invite-state {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.06em;
    max-width: 100%;
    box-sizing: border-box;
}

.chat-kinship-invite-chip {
    flex-shrink: 0;
    background: rgba(73, 93, 118, 0.12);
    color: #415268;
    font-weight: 700;
}

.chat-kinship-invite-state {
    flex-shrink: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(255, 255, 255, 0.56);
    color: #5c6978;
}

.chat-kinship-invite-title {
    font-size: clamp(13px, 3.9vw, 15px);
    line-height: 1.42;
    font-weight: 700;
    color: #2f3946;
    word-break: break-word;
}

.chat-kinship-invite-subtitle {
    margin-top: 6px;
    font-size: 11px;
    color: #667385;
    letter-spacing: 0.08em;
}

.chat-kinship-invite-amount {
    margin-top: 10px;
    font-size: clamp(17px, 5.2vw, 22px);
    line-height: 1;
    font-weight: 800;
    color: #304458;
}

.chat-kinship-invite-note {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.55;
    color: #5c6773;
}

.chat-kinship-invite-brand {
    width: 56px;
    flex: 0 0 56px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 0 2px;
}

.chat-kinship-invite-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(47, 57, 70, 0.08));
}

.chat-kinship-invite-brand-text {
    font-size: 9px;
    line-height: 1.3;
    text-align: center;
    color: #6f7b88;
    letter-spacing: 0.04em;
}

.chat-kinship-invite-foot {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(84, 96, 111, 0.10);
}

.chat-kinship-invite-foot-text {
    font-size: 11px;
    color: #738090;
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.chat-kinship-invite-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1 1 140px;
    min-width: 0;
    max-width: 100%;
}

.chat-kinship-invite-accept,
.chat-kinship-invite-reject,
.chat-kinship-invite-retry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(100%, 72px);
    flex: 1 1 72px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.chat-kinship-invite-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.chat-kinship-invite-accept {
    border: 0;
    background: linear-gradient(180deg, #55697f 0%, #46596d 100%);
    color: #f7f9fb;
    box-shadow: 0 6px 14px rgba(70, 89, 109, 0.18);
}

.chat-kinship-invite-retry {
    border: 0;
    background: linear-gradient(180deg, #55697f 0%, #46596d 100%);
    color: #f7f9fb;
    box-shadow: 0 6px 14px rgba(70, 89, 109, 0.18);
    cursor: pointer;
}

.chat-kinship-invite-reject {
    border: 1px solid rgba(82, 98, 115, 0.35);
    background: rgba(255, 255, 255, 0.72);
    color: #5a6a7a;
    box-shadow: none;
    cursor: pointer;
}

.chat-kinship-invite-reject:active {
    opacity: 0.88;
}

.chat-kinship-invite-wait {
    background: rgba(255, 255, 255, 0.55);
    color: #6a7684;
    font-weight: 600;
    min-width: auto;
    padding: 0 14px;
}

.chat-kinship-invite-badge:not(.chat-kinship-invite-wait) {
    background: rgba(255, 255, 255, 0.68);
    color: #526273;
}

.chat-kinship-invite-badge.is-removed {
    color: #7a8693;
}

/* 一起听歌 · 分享到微信（可折叠歌单卡片） */
.chat-message-bubble--lt-playlist-share {
    max-width: min(92vw, 320px);
}

.chat-lt-pl-share-card {
    width: 100%;
    border-radius: 18px;
    border: 1px solid rgba(74, 80, 88, 0.12);
    background: linear-gradient(165deg, rgba(255, 252, 253, 0.98) 0%, rgba(236, 238, 244, 0.95) 100%);
    box-shadow: 0 10px 28px rgba(52, 58, 65, 0.1);
    overflow: hidden;
    color: #2d2a2c;
}

.chat-lt-pl-share-card > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    padding: 12px 12px 12px 10px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.chat-lt-pl-share-card > summary::-webkit-details-marker {
    display: none;
}

.chat-lt-pl-share-summary {
    outline: none;
}

.chat-lt-pl-share-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #d9c2c8 0%, #b9c6d5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.chat-lt-pl-share-thumb--ph {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
}

.chat-lt-pl-share-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-lt-pl-share-sum-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chat-lt-pl-share-brand {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #7d8fa6;
    text-transform: uppercase;
}

.chat-lt-pl-share-card-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    word-break: break-word;
}

.chat-lt-pl-share-meta {
    font-size: 12px;
    color: #5a575a;
    line-height: 1.35;
    word-break: break-word;
}

.chat-lt-pl-share-hint {
    font-size: 11px;
    color: #7d8fa6;
    margin-top: 2px;
}

.chat-lt-pl-share-body {
    padding: 0 12px 12px 12px;
    border-top: 1px solid rgba(74, 80, 88, 0.08);
}

.chat-lt-pl-share-row {
    display: flex;
    gap: 8px;
    font-size: 12px;
    line-height: 1.45;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(74, 80, 88, 0.1);
}

.chat-lt-pl-share-k {
    flex: 0 0 4.5em;
    color: #7a7578;
}

.chat-lt-pl-share-v {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
    font-weight: 500;
    color: #2d2a2c;
}

.chat-lt-pl-share-missing {
    margin: 8px 0 4px;
    font-size: 11px;
    color: #8b8588;
    line-height: 1.4;
}

.chat-lt-pl-share-tracks {
    margin: 8px 0 0;
    padding: 0 0 0 1.1em;
    max-height: 220px;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.45;
    color: #3a3638;
}

.chat-lt-pl-share-tracks li {
    margin: 4px 0;
    padding-left: 2px;
}

.chat-lt-pl-share-track-idx {
    display: inline-block;
    min-width: 1.4em;
    margin-right: 4px;
    color: #8b8588;
    font-variant-numeric: tabular-nums;
}

.chat-lt-pl-share-track-art {
    color: #6e6a6d;
    font-weight: 400;
}

.chat-lt-pl-share-track-empty {
    list-style: none;
    margin-left: -1.1em;
    color: #8b8588;
    font-size: 12px;
}

.chat-lt-pl-share-foot {
    margin: 10px 0 0;
    font-size: 11px;
    color: #8b8588;
    line-height: 1.45;
}

.photo-card-modal-hint {
    font-size: 13px;
    color: #666;
    margin: 0 0 12px;
    line-height: 1.45;
}

.photo-card-textarea {
    min-height: 110px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.45;
    box-sizing: border-box;
}

/* 描述型照片：拍立得外框 + 3D 翻面（须固定宽度，避免 fit-content + 子项 100% 在 flex 里塌成细条） */
.chat-message-bubble.chat-message-bubble--real-image {
    padding: 4px !important;
    max-width: min(260px, 72vw);
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.72);
}

.chat-real-image {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    border-radius: 12px;
}

.chat-message-bubble.chat-message-bubble--polaroid {
    overflow: visible;
    padding: 6px 8px !important;
    flex-shrink: 0;
    width: 244px;
    min-width: 244px;
    max-width: min(270px, calc(100% - 20px));
    box-sizing: border-box;
    align-items: stretch;
}

/* 线下模式下气泡 .chat-message-bubble 普遍被覆写为 width:100% / 透明背景，
   拍立得外框需要保持固定宽度的卡片形态，否则 polaroid 会在 100% 容器里被拉成横条。
   选择器特异度高于 #chat-page.chat-page--offline-mode .chat-message--offline-flow .chat-message-bubble，
   配合 !important 锁定卡片几何，避免被线下规则反向覆盖。 */
#chat-page.chat-page--offline-mode .chat-message--offline-flow .chat-message-bubble.chat-message-bubble--polaroid,
#chat-page.chat-page--offline-archive .chat-message--offline-flow .chat-message-bubble.chat-message-bubble--polaroid {
    width: 244px !important;
    min-width: 244px !important;
    max-width: min(270px, calc(100% - 20px)) !important;
    padding: 6px 8px !important;
    align-self: flex-start;
}
#chat-page.chat-page--offline-mode .chat-message--offline-flow.my-message .chat-message-bubble.chat-message-bubble--polaroid,
#chat-page.chat-page--offline-archive .chat-message--offline-flow.my-message .chat-message-bubble.chat-message-bubble--polaroid {
    align-self: flex-end;
}
/* 拍立得外框自身的容器（chat-photo-polaroid-frame）已带白色背景与阴影，
   外层 bubble 的 background:transparent 不影响视觉；保留外层透明即可，无需在线下额外加底色。 */

.chat-message-bubble.chat-message-bubble--voice {
    min-width: 136px;
    max-width: min(240px, calc(100% - 22px));
    padding: 10px 14px !important;
    border-radius: 16px !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.chat-voice-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-voice-icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.38);
    color: #24303c;
    font-size: 14px;
    flex: 0 0 auto;
}

.chat-voice-wave {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
}

.chat-voice-wave span {
    display: block;
    width: 3px;
    border-radius: 999px;
    background: rgba(36, 48, 60, 0.72);
}

.chat-voice-wave span:nth-child(1) { height: 8px; }
.chat-voice-wave span:nth-child(2) { height: 14px; }
.chat-voice-wave span:nth-child(3) { height: 11px; }
.chat-voice-wave span:nth-child(4) { height: 16px; }
.chat-voice-wave span:nth-child(5) { height: 9px; }

@keyframes chatVoiceWavePulse {
    0%, 100% {
        transform: scaleY(0.55);
        opacity: 0.72;
    }
    50% {
        transform: scaleY(1.05);
        opacity: 1;
    }
}

.chat-voice-duration {
    font-size: 12px;
    color: rgba(36, 48, 60, 0.72);
    flex: 0 0 auto;
}

.chat-voice-hint {
    font-size: 11px;
    color: rgba(36, 48, 60, 0.58);
}

.chat-voice-audio {
    display: none;
}

.chat-voice-transcript {
    display: none;
    font-size: 13px;
    line-height: 1.5;
    color: #24303c;
    padding-top: 4px;
    border-top: 1px solid rgba(36, 48, 60, 0.12);
    white-space: normal;
    word-break: break-word;
}

.chat-message-bubble--voice.is-open .chat-voice-transcript {
    display: block;
}

.chat-message-bubble--voice.is-open .chat-voice-wave span,
.chat-message-bubble--voice.is-playing .chat-voice-wave span {
    transform-origin: center bottom;
    animation: chatVoiceWavePulse 1s ease-in-out infinite;
}

.chat-message-bubble--voice.is-open .chat-voice-wave span:nth-child(2),
.chat-message-bubble--voice.is-playing .chat-voice-wave span:nth-child(2) {
    animation-delay: 0.12s;
}

.chat-message-bubble--voice.is-open .chat-voice-wave span:nth-child(3),
.chat-message-bubble--voice.is-playing .chat-voice-wave span:nth-child(3) {
    animation-delay: 0.24s;
}

.chat-message-bubble--voice.is-open .chat-voice-wave span:nth-child(4),
.chat-message-bubble--voice.is-playing .chat-voice-wave span:nth-child(4) {
    animation-delay: 0.36s;
}

.chat-message-bubble--voice.is-open .chat-voice-wave span:nth-child(5),
.chat-message-bubble--voice.is-playing .chat-voice-wave span:nth-child(5) {
    animation-delay: 0.18s;
}

.chat-message-bubble--voice.is-open .chat-voice-hint {
    color: rgba(36, 48, 60, 0.78);
}

/* 规范③ HTML 拍立得（.art-vibe / .wechat-polaroid-wrap）：样式放在全局，模型只需发结构，避免 <style> 被当聊天文本拆开 */
.wechat-polaroid-wrap {
    width: 260px;
    max-width: 100%;
    background: #fcfbf9;
    padding: 14px 14px 22px;
    margin: 0;
    border-radius: 2px;
    box-shadow: 0 4px 12px rgba(170, 160, 140, 0.08), 0 20px 40px rgba(170, 160, 140, 0.12);
    border: 1px solid rgba(230, 225, 215, 0.6);
    font-family: -apple-system, "PingFang SC", sans-serif;
    box-sizing: border-box;
}

.wechat-polaroid-imgbox {
    width: 100%;
    aspect-ratio: 3 / 4;
    position: relative;
    background: #e8e6e3 linear-gradient(180deg, #eceae7 0%, #ddd9d4 100%);
    overflow: hidden;
}

@supports not (aspect-ratio: 3 / 4) {
    .wechat-polaroid-imgbox {
        height: 0;
        padding-top: 133.333%;
    }

    .wechat-polaroid-imgbox .wechat-polaroid-img {
        position: absolute;
        inset: 0;
    }
}

.wechat-polaroid-imgbox::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03), inset 0 3px 8px rgba(0, 0, 0, 0.04);
    pointer-events: none;
    z-index: 1;
}

.wechat-polaroid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(1.05) brightness(0.98) saturate(0.85) sepia(12%);
    position: relative;
    z-index: 0;
}

.wechat-polaroid-text {
    margin-top: 18px;
    padding: 0 2px;
}

.wechat-polaroid-line {
    width: 16px;
    height: 1px;
    background: #c8c3bc;
    margin-bottom: 10px;
}

.wechat-polaroid-caption {
    font-size: 13px;
    color: #55504b;
    line-height: 1.7;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-align: justify;
}

.wechat-polaroid-meta {
    margin-top: 16px;
    font-family: "Georgia", "Times New Roman", serif;
    font-style: italic;
    font-size: 10.5px;
    color: #b5b0a8;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
}

.chat-message-bubble.chat-message-bubble--polaroid .wechat-polaroid-wrap {
    width: min(260px, 100%);
    max-width: 100%;
    flex: 0 0 auto;
}

.chat-message-bubble:has(.wechat-polaroid-wrap),
.chat-message-bubble:has(.art-vibe) {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    flex-shrink: 0;
    width: auto;
    min-width: min(260px, calc(100% - 20px));
    max-width: min(280px, calc(100% - 16px));
    overflow: visible;
    box-sizing: border-box;
}

.chat-message-bubble:has(.wechat-polaroid-wrap) > .wechat-polaroid-wrap {
    flex-shrink: 0;
    align-self: center;
    max-width: 100%;
}

.chat-photo-flip-root {
    width: 228px;
    height: 324px;
    max-width: 100%;
    perspective: 920px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    margin: 0 auto;
    flex-shrink: 0;
}

.chat-photo-flip-root.is-flipped {
    cursor: default;
}

.chat-photo-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.chat-photo-flip-root.is-flipped .chat-photo-flip-inner {
    transform: rotateY(180deg);
}

.chat-photo-face {
    position: absolute;
    inset: 0;
    border-radius: 2px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: visible;
    box-sizing: border-box;
}

.chat-photo-polaroid-frame {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fcfbf9;
    padding: 11px 11px 12px;
    border-radius: 2px;
    border: 1px solid rgba(230, 225, 215, 0.65);
    box-shadow:
        0 4px 12px rgba(170, 160, 140, 0.1),
        0 18px 36px rgba(170, 160, 140, 0.14);
    box-sizing: border-box;
    font-family: -apple-system, "PingFang SC", sans-serif;
}

.chat-photo-polaroid-imgarea {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 1px;
    overflow: hidden;
    box-sizing: border-box;
}

.chat-photo-polaroid-imgarea--back {
    background:
        radial-gradient(circle at 50% 31%, #ffffff 0 11%, transparent 11.5%),
        radial-gradient(circle at 42% 32%, #ffffff 0 8%, transparent 8.5%),
        radial-gradient(circle at 58% 32%, #ffffff 0 8%, transparent 8.5%),
        linear-gradient(45deg, transparent 48%, #ffffff 48.5% 51.5%, transparent 52%) 50% 41% / 70px 70px no-repeat,
        linear-gradient(135deg, rgba(255, 235, 244, 0.96) 0%, rgba(245, 188, 210, 0.95) 100%) 50% 50% / 72% 62% no-repeat,
        linear-gradient(180deg, #1d1d1e 0%, #070707 100%);
    border-radius: 18px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 -16px 36px rgba(255, 255, 255, 0.06),
        inset 0 12px 22px rgba(0, 0, 0, 0.36);
}

.chat-photo-polaroid-emulsion {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            -12deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.03) 2px,
            rgba(255, 255, 255, 0.03) 3px
        );
    pointer-events: none;
    opacity: 0.9;
}

.chat-photo-polaroid-imgarea--back::after {
    content: "";
    position: absolute;
    inset: 9% 11%;
    border-radius: 18px;
    background:
        radial-gradient(circle at 32% 16%, rgba(255, 255, 255, 0.28), transparent 28%),
        radial-gradient(circle at 76% 72%, rgba(0, 0, 0, 0.12), transparent 32%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.018) 0 1px, transparent 1px 5px);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}

.chat-photo-polaroid-imgarea--back::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 44px;
    height: 16px;
    transform: translateX(-50%);
    border-radius: 14px 14px 3px 3px;
    background: linear-gradient(180deg, #f5bed2, #d993ae);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.16);
    z-index: 2;
}

.chat-photo-polaroid-imgarea--front {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: linear-gradient(165deg, #faf8f5 0%, #ebe7e1 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04), inset 0 3px 10px rgba(0, 0, 0, 0.05);
}

.chat-photo-polaroid-chin {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 8px;
}

.chat-photo-polaroid-chin--back {
    align-items: center;
    justify-content: flex-end;
}

.chat-photo-polaroid-brand {
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 9px;
    letter-spacing: 2px;
    color: #b5b0a8;
    font-style: italic;
}

.chat-photo-polaroid-chin--front .chat-photo-polaroid-line {
    width: 16px;
    height: 1px;
    background: #c8c3bc;
    margin-bottom: 8px;
}

.chat-photo-polaroid-meta {
    font-family: "Georgia", "Times New Roman", serif;
    font-style: italic;
    font-size: 10px;
    color: #b5b0a8;
    letter-spacing: 0.8px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.chat-photo-back-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
    padding: 48% 10px 14px;
    height: 100%;
    box-sizing: border-box;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}

.chat-photo-back-label {
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #111;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16);
}

.chat-photo-back-hint {
    margin-top: auto;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
    opacity: 0.96;
    line-height: 1.1;
    max-width: 12em;
}

.chat-photo-front {
    transform: rotateY(180deg);
    pointer-events: none;
}

.chat-photo-back {
    pointer-events: auto;
}

.chat-photo-flip-root.is-flipped .chat-photo-back {
    pointer-events: none;
}

.chat-photo-flip-root.is-flipped .chat-photo-front {
    pointer-events: auto;
}

.chat-photo-front-text {
    position: relative;
    z-index: 0;
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 11px;
    font-size: 13px;
    line-height: 1.65;
    font-weight: 300;
    color: #55504b;
    letter-spacing: 0.35px;
    text-align: justify;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    max-height: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
    touch-action: pan-y !important;
    pointer-events: auto;
    cursor: default;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.chat-photo-front-text::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.chat-photo-front-text:focus {
    outline: none;
}

/* 转账消息气泡 */
.chat-message-bubble.chat-message-bubble--transfer,
#chat-page .chat-message .chat-message-bubble.chat-message-bubble--transfer,
#chat-page .chat-message .chat-message-bubble:has(.chat-transfer-bubble) {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.chat-transfer-bubble {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    width: 248px;
    max-width: 100%;
    min-height: 136px;
    padding: 13px 15px 14px;
    border-radius: 16px;
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0) 39%),
        linear-gradient(135deg, #ffd3e8 0%, #c8edff 52%, #f8dcff 100%);
    color: #26324a;
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow:
        0 10px 22px rgba(72, 104, 146, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.chat-transfer-bubble::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 12px;
    pointer-events: none;
    z-index: 0;
}
.chat-transfer-card-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-height: 36px;
}
.chat-transfer-label {
    max-width: calc(100% - 48px);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 800;
    color: #324469;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}
.chat-transfer-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex: 0 0 auto;
    border-radius: 10px;
    filter: drop-shadow(0 4px 8px rgba(79, 106, 148, 0.14));
}
.chat-transfer-body {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 58px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1px 6px 0;
    gap: 7px;
}
.chat-transfer-amount {
    font-size: 28px;
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: 0;
    color: #243350;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
    flex-shrink: 0;
}
.chat-transfer-status {
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
    color: #59657d;
    margin-top: 0;
    flex-shrink: 0;
    background: none;
    border: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
.chat-transfer-bubble.transfer-pending .chat-transfer-status { color: #4d5d7e; }
.chat-transfer-bubble.transfer-received {
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0) 39%),
        linear-gradient(135deg, #ffd9ec 0%, #bfebff 50%, #e7ddff 100%);
}
.chat-transfer-bubble.transfer-received .chat-transfer-label,
.chat-transfer-bubble.transfer-received .chat-transfer-amount {
    opacity: 1;
}
.chat-transfer-bubble.transfer-received .chat-transfer-status { color: #4f6383; }
.chat-transfer-bubble.transfer-received .chat-transfer-status::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    color: #4e7aa6;
    font-size: 10px;
    font-weight: 900;
    vertical-align: 1px;
}
.chat-transfer-bubble.transfer-rejected {
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0) 39%),
        linear-gradient(135deg, #efd6e4 0%, #d5e6f2 52%, #e7dff0 100%);
}
.chat-transfer-bubble.transfer-rejected .chat-transfer-status { color: #72667a; }

@media (max-width: 420px) {
    .chat-transfer-bubble {
        width: 226px;
        min-height: 128px;
        padding: 12px 13px 13px;
    }

    .chat-transfer-amount {
        font-size: 25px;
    }
}

/* 微信购物商品分享卡：可爱极简粉彩卡片 */
.chat-message-bubble--shopping-share {
    max-width: 236px;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.chat-shopping-share-card {
    display: block;
    width: 236px;
    max-width: 100%;
    padding: 12px;
    border: 1px solid rgba(248, 205, 218, 0.9);
    border-radius: 18px;
    background: linear-gradient(160deg, #fffaf4 0%, #fff4f8 58%, #ffffff 100%);
    box-shadow: 0 8px 22px rgba(209, 122, 150, 0.14);
    color: #55424a;
    text-align: left;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overflow: hidden;
}

.chat-shopping-share-card:active {
    transform: scale(0.985);
}

.chat-shopping-share-card:focus-visible {
    outline: 2px solid rgba(244, 155, 188, 0.72);
    outline-offset: 2px;
}

.chat-shopping-share-top,
.chat-shopping-share-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.chat-shopping-share-chip {
    display: inline-block;
    min-height: 22px;
    line-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: #f8cdda;
    color: #9c4965;
    font-size: 11px;
    font-weight: 700;
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-shopping-share-source,
.chat-shopping-share-hint {
    font-size: 10px;
    color: rgba(156, 73, 101, 0.62);
    white-space: nowrap;
}

.chat-shopping-share-main {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.chat-shopping-share-thumb,
.chat-shopping-share-detail-thumb {
    flex: 0 0 auto;
    border-radius: 15px;
    background: #fff7ed;
    border: 1px solid rgba(248, 205, 218, 0.7);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.chat-shopping-share-thumb {
    width: 64px;
    height: 64px;
    padding: 5px;
}

.chat-shopping-share-thumb img,
.chat-shopping-share-thumb svg,
.chat-shopping-share-detail-thumb img,
.chat-shopping-share-detail-thumb svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.chat-shopping-share-thumb .shopping-cover-cosmetic,
.chat-shopping-share-thumb .shopping-cover-ai-icon,
.chat-shopping-share-detail-thumb .shopping-cover-cosmetic,
.chat-shopping-share-detail-thumb .shopping-cover-ai-icon {
    width: 100%;
    height: 100%;
}

.chat-shopping-share-thumb--ph {
    color: rgba(192, 90, 122, 0.56);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.chat-shopping-share-info {
    flex: 1;
    min-width: 0;
}

.chat-shopping-share-title {
    color: #47323a;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.chat-shopping-share-desc {
    margin-top: 4px;
    color: rgba(85, 66, 74, 0.72);
    font-size: 11px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chat-shopping-share-meta {
    margin-top: 5px;
    color: rgba(156, 73, 101, 0.65);
    font-size: 10px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-shopping-share-foot {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed rgba(248, 205, 218, 0.9);
}

.chat-shopping-share-price {
    color: #e45f86;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.chat-shopping-share-detail-modal {
    z-index: 12045;
}

.chat-shopping-share-detail-content {
    width: min(328px, calc(100vw - 32px));
    max-width: 100%;
    border-radius: 20px;
    border: 1px solid rgba(248, 205, 218, 0.9);
    background: #fffaf4;
    box-shadow: 0 16px 46px rgba(209, 122, 150, 0.2);
    overflow: hidden;
}

.chat-shopping-share-detail-modal .wallet-modal-header {
    color: #9c4965;
    background: linear-gradient(135deg, #fff7ed 0%, #fff0f5 100%);
    border-bottom: 1px solid rgba(248, 205, 218, 0.8);
}

.chat-shopping-share-detail-modal .modal-close {
    color: rgba(156, 73, 101, 0.82);
}

.chat-shopping-share-detail-body {
    max-height: min(64vh, 480px);
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}

.chat-shopping-share-detail-thumb {
    width: 132px;
    height: 132px;
    margin: 0 auto 12px;
    padding: 10px;
}

.chat-shopping-share-detail-name {
    margin: 0;
    color: #47323a;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
}

.chat-shopping-share-detail-price {
    margin-top: 6px;
    color: #e45f86;
    font-size: 20px;
    font-weight: 900;
    text-align: center;
}

.chat-shopping-share-detail-row {
    margin-top: 12px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(248, 205, 218, 0.58);
}

.chat-shopping-share-detail-label {
    margin-bottom: 5px;
    color: rgba(156, 73, 101, 0.75);
    font-size: 12px;
    font-weight: 800;
}

.chat-shopping-share-detail-row p {
    margin: 0;
    color: #55424a;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-shopping-share-detail-action {
    width: 100%;
    margin-top: 14px;
    border: none;
    border-radius: 999px;
    padding: 11px 14px;
    background: linear-gradient(135deg, #e45f86 0%, #c85c7e 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(228, 95, 134, 0.24);
    cursor: pointer;
}

.chat-shopping-share-detail-action--secondary {
    background: #fff;
    color: #9c4965;
    border: 1px solid rgba(228, 95, 134, 0.32);
    box-shadow: none;
}

/* 购物礼盒：黑金 + 线框立方体（与全局线性图标风统一） */
.chat-message-bubble--gift-bundle {
    max-width: 210px;
}

.chat-gift-bundle-card {
    position: relative;
    border-radius: 14px;
    padding: 0 0 12px;
    background: linear-gradient(165deg, #141418 0%, #0d0d10 55%, #121215 100%);
    border: 1px solid rgba(201, 169, 98, 0.45);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(212, 175, 55, 0.12);
    overflow: hidden;
}

/* 含 data-gift-detail 时可点穿至 document 委托的 click（缩短部分移动端点按延迟） */
.chat-gift-bundle-card--has-detail {
    cursor: pointer;
    touch-action: manipulation;
}

/* 可点击区域：查看赠送清单 */
.chat-gift-bundle-hit {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 12px 0;
    border: none;
    background: transparent;
    text-align: center;
    cursor: pointer;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    border-radius: 14px 14px 0 0;
    touch-action: manipulation;
}

.chat-gift-bundle-hit:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.55);
    outline-offset: 2px;
}


.chat-gift-bundle-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    margin-bottom: 4px;
}

.chat-gift-bundle-cube-svg {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(201, 169, 98, 0.15));
}

/* 恋爱手帐·恋心礼盒：#FFF3F3 / #F6E8E7 / RAL 近似暖灰粉 + 线描心形 */
.chat-gift-bundle-card--journal-sweetheart {
    background: linear-gradient(165deg, #fff8f8 0%, #fff3f3 40%, #f6e8e7 100%);
    border: 1px solid rgba(200, 149, 143, 0.45);
    box-shadow:
        0 8px 22px rgba(184, 120, 112, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.chat-gift-bundle-card--journal-sweetheart .chat-gift-bundle-tag {
    color: rgba(176, 128, 112, 0.85);
    letter-spacing: 0.28em;
}
.chat-gift-bundle-card--journal-sweetheart .chat-gift-bundle-title {
    color: #8f5f56;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.chat-gift-bundle-card--journal-sweetheart .chat-gift-bundle-meta,
.chat-gift-bundle-card--journal-sweetheart .chat-gift-bundle-note,
.chat-gift-bundle-card--journal-sweetheart .chat-gift-bundle-status {
    color: rgba(120, 82, 74, 0.78);
}
.chat-gift-bundle-card--journal-sweetheart .chat-gift-bundle-hit:focus-visible {
    outline-color: rgba(200, 149, 143, 0.65);
}
.chat-gift-bundle-heart-svg {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(184, 120, 112, 0.2));
}

/* 恋心礼盒·拆开清单时的飘落彩带（全屏一次动画） */
.chat-gift-confetti-root {
    position: fixed;
    inset: 0;
    z-index: 120500;
    pointer-events: none;
    overflow: hidden;
}
.chat-gift-confetti-piece {
    position: absolute;
    top: -12px;
    width: 7px;
    height: 14px;
    border-radius: 2px;
    opacity: 0.92;
    animation-name: chatGiftConfettiFall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes chatGiftConfettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0.35;
    }
}

.chat-gift-bundle-inner {
    position: relative;
    text-align: center;
    padding: 0 6px 2px;
    /* 保留可点：委托用 closest(.chat-gift-bundle-card)，事件目标可为内部文字 */
}

.chat-gift-bundle-tag {
    display: inline-block;
    font-size: 8px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(201, 169, 98, 0.75);
    font-weight: 600;
    margin-bottom: 4px;
}

.chat-gift-bundle-title {
    font-size: 15px;
    font-weight: 700;
    color: #e8d5a3;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.chat-gift-bundle-meta {
    font-size: 11px;
    color: rgba(232, 213, 163, 0.72);
    line-height: 1.35;
}

.chat-gift-bundle-note {
    margin: 8px 0 0;
    font-size: 10px;
    color: rgba(176, 176, 182, 0.88);
    line-height: 1.45;
}

.chat-gift-bundle-status {
    margin-top: 8px;
    font-size: 11px;
    color: #c9a962;
    font-weight: 500;
}

.chat-gift-bundle-receive {
    margin: 10px 12px 0;
    width: calc(100% - 24px);
    box-sizing: border-box;
    border: 1px solid rgba(201, 169, 98, 0.55);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #1a1814;
    background: linear-gradient(180deg, #e8d5a3 0%, #c9a227 45%, #a88420 100%);
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 245, 220, 0.45);
    -webkit-tap-highlight-color: transparent;
}

.chat-gift-bundle-receive:active {
    opacity: 0.92;
    transform: scale(0.98);
}

.chat-gift-bundle-receive.is-loading {
    cursor: wait;
    opacity: 0.95;
}

/* 拆开后的状态条（替换原「接收」按钮，避免异步重绘前又变回「接收」） */
.chat-gift-bundle-received-badge {
    display: block;
    margin: 10px 12px 0;
    width: calc(100% - 24px);
    box-sizing: border-box;
    border-radius: 10px;
    padding: 10px 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #1a1814;
    background: linear-gradient(180deg, #e8d5a3 0%, #c9a227 45%, #a88420 100%);
    border: 1px solid rgba(201, 169, 98, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.35);
    -webkit-tap-highlight-color: transparent;
    pointer-events: none;
}

.chat-gift-bundle-card--journal-sweetheart .chat-gift-bundle-received-badge {
    color: #4a2c2c;
    background: linear-gradient(180deg, #fce8e4 0%, #e8bdb5 48%, #d4a099 100%);
    border-color: rgba(200, 149, 143, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 252, 251, 0.65);
}

.chat-gift-bundle-receive .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.chat-gift-bundle-receive-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 1.1em;
}

.chat-gift-bundle-receive-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1a1814;
    opacity: 0.4;
    animation: chat-gift-recv-dot 0.95s ease-in-out infinite;
}

.chat-gift-bundle-receive-dots i:nth-child(2) {
    animation-delay: 0.16s;
}

.chat-gift-bundle-receive-dots i:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes chat-gift-recv-dot {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.35;
    }
    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
    60% {
        transform: translateY(0);
        opacity: 0.55;
    }
}

/* 礼物清单弹层（与 wallet-modal 系一致） */
.chat-gift-bundle-detail-modal {
    z-index: 12040;
}

.chat-gift-bundle-detail-content {
    max-width: min(320px, calc(100vw - 32px));
    width: 100%;
    background: linear-gradient(180deg, #1c1c22 0%, #121215 100%);
    border: 1px solid rgba(201, 169, 98, 0.4);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.chat-gift-bundle-detail-modal .wallet-modal-header {
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(201, 169, 98, 0.25);
    color: #e8d5a3;
}

.chat-gift-bundle-detail-modal .modal-close {
    color: rgba(232, 213, 163, 0.85);
}

.chat-gift-bundle-detail-body {
    max-height: min(52vh, 360px);
    overflow-y: auto;
    padding: 12px 14px 16px;
}

.chat-gift-bundle-detail-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 14px;
    color: #e8e8ea;
}

.chat-gift-bundle-detail-row:last-child {
    border-bottom: none;
}

.chat-gift-bundle-detail-row .chat-gift-bundle-detail-title {
    flex: 1 1 140px;
    min-width: 0;
    color: #f0f0f2;
    font-weight: 500;
}

.chat-gift-bundle-detail-qty {
    color: rgba(201, 169, 98, 0.95);
    font-size: 13px;
    font-weight: 600;
}

.chat-gift-bundle-detail-price {
    margin-left: auto;
    font-size: 13px;
    color: rgba(232, 213, 163, 0.9);
}

.chat-gift-bundle-detail-empty {
    margin: 8px 0;
    font-size: 13px;
    color: rgba(180, 180, 188, 0.9);
    text-align: center;
}

/* 表情面板（与 .chat-input-area 同列于 .chat-bottom-composer，贴合输入栏顶边，避免 absolute 误盖工具条） */
.chat-bottom-composer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: relative;
    z-index: 10;
}

#chat-page[data-chat-keyboard-open="1"] .chat-bottom-composer {
    flex: 0 0 auto;
    max-height: min(46vh, 320px);
    overflow: visible;
    transform: translateZ(0);
    will-change: transform;
}

#chat-page[data-chat-keyboard-open="1"] .emoji-panel.show {
    max-height: min(30vh, 220px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.emoji-panel {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    background: white;
    border-top: 1px solid #e0e0e0;
    border-bottom: none;
    z-index: 1;
    display: none;
    order: -1;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.emoji-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.emoji-panel.show {
    display: block;
}

.emoji-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.emoji-category {
    display: flex;
}

.emoji-category-item {
    padding: 5px 10px;
    margin-right: 10px;
    border-radius: 15px;
    font-size: 14px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

.emoji-category-item.active {
    background: black;
    color: white;
}

.emoji-category-add {
    width: 24px;
    height: 24px;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    color: #666;
    transition: all 0.3s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.emoji-category-add:hover {
    background: #f5f5f5;
    border-color: #999;
}

.emoji-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.emoji-panel-manage {
    padding: 5px 10px;
    border: none;
    background: none;
    font-size: 14px;
    cursor: pointer;
    color: #666;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.emoji-panel-delete {
    padding: 5px 10px;
    border: 1px solid #ff4d4f;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    color: #ff4d4f;
    border-radius: 4px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.emoji-panel-delete:hover:not(:disabled) {
    background: #ff4d4f;
    color: #fff;
}

.emoji-panel-delete:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.emoji-panel-content {
    height: 200px;
    overflow-y: auto;
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.emoji-panel-content::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.emoji-panel-content.has-emoji-grid {
    align-items: flex-start;
    justify-content: flex-start;
}

.emoji-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.emoji-add-button {
    width: 100px;
    height: 100px;
    border: 2px dashed #e0e0e0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.emoji-add-icon {
    font-size: 40px;
    color: #e0e0e0;
}

.emoji-empty-text {
    font-size: 14px;
    color: #999;
}

/* 表情网格 */
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 8px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    touch-action: pan-y;
}

.emoji-item {
    width: 100%;
    min-width: 0;
    min-height: 72px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 4px 2px;
    overflow: visible;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.emoji-item-thumb,
.emoji-item-label,
.emoji-item img {
    pointer-events: none;
}

.emoji-item:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.emoji-item-thumb {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.emoji-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.emoji-item-label {
    width: 100%;
    min-width: 0;
    font-size: 10px;
    line-height: 1.2;
    color: #666;
    text-align: center;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.emoji-item.manage-mode-item {
    position: relative;
}

.emoji-item.manage-mode-item::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border: 2px solid #ccc;
    border-radius: 3px;
    background: rgba(255,255,255,0.9);
}

.emoji-item.manage-mode-item.selected {
    box-shadow: 0 0 0 2px #07C160;
}

.emoji-item.manage-mode-item.selected::after {
    background: #07C160;
    border-color: #07C160;
}

.emoji-item.emoji-add-item {
    border: 2px dashed #e0e0e0;
    background: #fafafa;
}

.emoji-add-thumb {
    background: transparent;
}

.emoji-item.emoji-add-item:hover {
    border-color: #07C160;
    background: #f0fff4;
}

.emoji-add-inline {
    font-size: 24px;
    color: #999;
}

.emoji-item.emoji-add-item:hover .emoji-add-inline {
    color: #07C160;
}

/* 聊天界面中的表情图片 */
.chat-emoji {
    max-width: 75px;
    max-height: 75px;
    width: auto;
    height: auto;
    vertical-align: middle;
    display: block;
    padding: 0;
    border: none;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

.chat-emoji-broken {
    opacity: 0.4;
    filter: grayscale(1);
    max-width: 75px;
    max-height: 75px;
}

/* 创建表情分组对话框 */
.create-emoji-category-modal {
    width: 280px;
    min-height: 200px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
}

.create-emoji-category-modal .modal-header {
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.create-emoji-category-content {
    padding: 20px;
}

.create-emoji-category-content input {
    width: 100%;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    font-size: 14px;
    outline: none;
}

.create-emoji-category-content input:focus {
    border-color: #07C160;
}

.create-emoji-category-footer {
    display: flex;
    border-top: 1px solid #e0e0e0;
}

.create-emoji-category-cancel,
.create-emoji-category-confirm {
    flex: 1;
    padding: 12px;
    border: none;
    background: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.create-emoji-category-cancel {
    color: #333;
    border-right: 1px solid #e0e0e0;
}

.create-emoji-category-cancel:hover {
    background: #f5f5f5;
}

.create-emoji-category-confirm {
    color: #07C160;
    font-weight: 500;
}

.create-emoji-category-confirm:hover {
    background: rgba(7, 193, 96, 0.05);
}

.emoji-category-delete-confirm-modal.modal {
    z-index: 100500;
    padding: 18px;
    box-sizing: border-box;
}

#chat-page .emoji-category-delete-confirm-modal.modal {
    position: absolute;
}

.emoji-category-delete-confirm-content.modal-content {
    width: min(86vw, 300px);
    max-width: 300px;
    padding: 0 !important;
    overflow: hidden;
    border: none;
    border-radius: 14px;
    background: #fff !important;
    color: #1f1f1f;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
}

#chat-page .emoji-category-delete-confirm-content.modal-content {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.emoji-category-delete-confirm-title {
    padding: 18px 18px 8px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.emoji-category-delete-confirm-message {
    padding: 0 20px 18px;
    font-size: 14px;
    line-height: 1.55;
    color: #555;
    text-align: center;
}

.emoji-category-delete-confirm-actions {
    display: flex;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.emoji-category-delete-confirm-actions button {
    flex: 1;
    min-height: 46px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 15px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.emoji-category-delete-cancel {
    color: #333;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.emoji-category-delete-ok {
    color: #e5484d;
    font-weight: 600;
}

.emoji-category-delete-confirm-actions button:active {
    background: rgba(0, 0, 0, 0.06);
}

html[data-appearance="dark"] .emoji-category-delete-confirm-content.modal-content {
    background: #25262d !important;
    color: #f5f5f7;
}

html[data-appearance="dark"] #chat-page .emoji-category-delete-confirm-content.modal-content {
    background: #25262d !important;
}

html[data-appearance="dark"] .emoji-category-delete-confirm-message {
    color: rgba(245, 245, 247, 0.72);
}

html[data-appearance="dark"] .emoji-category-delete-confirm-actions {
    border-top-color: rgba(255, 255, 255, 0.12);
}

html[data-appearance="dark"] .emoji-category-delete-cancel {
    color: #f5f5f7;
    border-right-color: rgba(255, 255, 255, 0.12) !important;
}

/* 添加表情对话框 */
.add-emoji-modal {
    width: 320px;
    min-height: 250px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
}

.add-emoji-modal .modal-header {
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.add-emoji-content {
    padding: 20px;
}

.add-emoji-tip {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.5;
}

.add-emoji-content textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    font-size: 14px;
    outline: none;
    resize: vertical;
    min-height: 100px;
}

.add-emoji-content textarea:focus {
    border-color: #07C160;
}

.add-emoji-footer {
    display: flex;
    border-top: 1px solid #e0e0e0;
}

.add-emoji-cancel,
.add-emoji-confirm {
    flex: 1;
    padding: 12px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-emoji-cancel {
    color: #333;
    background: #f5f5f5;
    border-right: 1px solid #e0e0e0;
}

.add-emoji-cancel:hover {
    background: #e0e0e0;
}

.add-emoji-confirm {
    color: white;
    background: black;
    font-weight: 500;
}

.add-emoji-confirm:hover {
    background: #333;
}


.chat-send-btn {
    background: #07C160;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.chat-send-btn:hover {
    background: #05a850;
}

.chat-send-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* 主屏幕设置页：Material 风格统一（黑 / 白 / 灰，仅视觉层） */
#settings-page {
    background: #f5f5f5;
    color: #1d1d1f;
}

#settings-page .settings-header {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#settings-page .settings-header h1 {
    color: #1d1d1f;
    font-weight: 700;
    letter-spacing: -0.02em;
}

#settings-page .back-btn {
    color: #1d1d1f;
    background: transparent;
    border-radius: 999px;
}

#settings-page .back-btn:hover {
    background: #f0f0f0;
}

#settings-page .settings-content {
    padding: 16px 14px 22px;
    background: #f5f5f5;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#settings-page .settings-content::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

#settings-page .settings-group {
    margin: 0 0 14px;
    padding: 8px 0;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #ededed;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 6px 18px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

#settings-page .setting-item {
    min-height: 54px;
    padding: 14px 16px;
    border-bottom: 1px solid #eeeeee;
    background: transparent;
    transition: background 0.18s ease, transform 0.18s ease;
}

#settings-page .setting-item:last-child {
    border-bottom: none;
}

#settings-page .setting-item:hover {
    background: #f7f7f7;
}

#settings-page .setting-item:active {
    background: #eeeeee;
}

#settings-page .setting-item.with-arrow {
    position: relative;
    padding-right: 42px;
}

#settings-page .setting-item.with-arrow::after,
#settings-page .settings-disclosure-summary > .setting-label::after {
    content: '›';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9a9a9a;
    font-size: 22px;
    line-height: 1;
}

#settings-page .setting-label {
    color: #1d1d1f;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
    flex: 1 1 auto;
}

#settings-page .setting-item.danger .setting-label {
    color: #2a2a2a;
}

#settings-page .setting-item.with-toggle {
    gap: 12px;
}

#settings-page .toggle-switch {
    width: 52px;
    height: 32px;
    flex: 0 0 auto;
}

#settings-page .toggle-slider {
    background: #d7d7d7;
    border: 1px solid #c8c8c8;
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

#settings-page .toggle-slider:before {
    width: 24px;
    height: 24px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.18),
        0 2px 6px rgba(0, 0, 0, 0.10);
}

#settings-page .toggle-switch input:checked + .toggle-slider {
    background: #1f1f1f;
    border-color: #1f1f1f;
}

#settings-page .toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

#settings-page .settings-disclosure {
    border-bottom: 1px solid #eeeeee;
}

#settings-page .settings-disclosure:last-child {
    border-bottom: none;
}

#settings-page .settings-disclosure-summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    min-height: 54px;
    display: flex;
    align-items: center;
}

#settings-page .settings-disclosure-summary::-webkit-details-marker {
    display: none;
}

#settings-page .settings-disclosure-summary > .setting-label {
    display: block;
    width: 100%;
    padding: 14px 42px 14px 16px;
}

#settings-page .settings-disclosure[open] .settings-disclosure-summary > .setting-label::after {
    transform: translateY(-50%) rotate(90deg);
}

#settings-page #system-notification-card > .settings-disclosure-summary > .setting-item.with-toggle {
    width: 100%;
    border-bottom: none;
    padding-right: 16px;
}

#settings-page #system-notification-card > .settings-disclosure-summary > .setting-item.with-toggle::after {
    content: none;
}

#settings-page #system-notification-card > .settings-disclosure-summary {
    display: block;
}

#settings-page .settings-disclosure-panel {
    margin: 0 12px 12px;
    padding: 12px;
    border-top: 1px solid #eeeeee;
    border-radius: 14px;
    background: #f7f7f7;
}

#settings-page .settings-disclosure-panel p,
#settings-page .settings-disclosure-panel div {
    color: #777 !important;
}

#settings-page .settings-disclosure-panel .fetch-models-btn {
    width: auto !important;
    min-height: 38px;
    margin: 0;
    padding: 8px 14px !important;
    border-radius: 999px;
    border: 1px solid #d8d8d8;
    background: #fff;
    color: #1d1d1f !important;
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

#settings-page .settings-disclosure-panel .fetch-models-btn:hover:not(:disabled) {
    background: #eeeeee;
    transform: translateY(-1px);
}

@media (max-width: 380px) {
    #settings-page .settings-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    #settings-page .setting-item,
    #settings-page .settings-disclosure-summary > .setting-label {
        padding-left: 14px;
    }
}

#minimax-voice-page .settings-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: #f6f6f2;
}

.minimax-voice-settings-content {
    padding-top: 16px;
}

.minimax-voice-settings-group {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);
}

.minimax-voice-settings-group .setting-group-title {
    padding: 18px 18px 10px;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #757575;
    text-transform: uppercase;
}

.minimax-voice-settings-group .setting-item {
    padding: 16px 18px;
}

.minimax-voice-settings-group .setting-item.vertical-layout {
    gap: 10px;
}

.minimax-voice-settings-group .setting-item.vertical-layout .setting-label {
    width: 100%;
    flex: none;
    color: #2c2c2c;
}

.minimax-voice-select-wrap {
    position: relative;
    width: 100%;
}

.minimax-voice-select {
    width: 100%;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    border-color: #e9eaee;
    background: #fafafa;
}

.minimax-voice-select:focus {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

.minimax-voice-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #8a8a8a;
    pointer-events: none;
}

.minimax-voice-status-row {
    justify-content: space-between;
}

.minimax-voice-status-row .setting-label {
    width: auto;
    flex: 0 0 auto;
    color: #2c2c2c;
}

.minimax-voice-connection-status {
    min-width: 0;
    margin-left: 16px;
    color: #7a7a7a;
    font-size: 14px;
}

.minimax-voice-hint-row {
    align-items: flex-start;
}

.minimax-voice-usage-hint {
    font-size: 13px;
    line-height: 1.7;
    color: #7a7a7a;
}

.minimax-voice-clone-entry-row {
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.minimax-voice-clone-entry-row .setting-label {
    display: block;
    width: auto;
    color: #2c2c2c;
    margin-bottom: 6px;
}

.minimax-voice-clone-entry-desc {
    margin-top: 0;
    line-height: 1.55;
}

.minimax-voice-clone-entry-btn,
.minimax-voice-clone-primary-btn,
.minimax-voice-clone-secondary-btn,
.minimax-voice-clone-copy-btn {
    border: 0;
    border-radius: 12px;
    min-height: 42px;
    padding: 10px 14px;
    font-size: 15px;
    line-height: 1.25;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.minimax-voice-clone-entry-btn,
.minimax-voice-clone-primary-btn {
    flex: 0 0 auto;
    background: #111;
    color: #fff;
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.14);
}

.minimax-voice-clone-secondary-btn,
.minimax-voice-clone-copy-btn {
    background: #f4f4f5;
    color: #333;
}

.minimax-voice-clone-panel[hidden],
.minimax-voice-clone-result[hidden],
.minimax-voice-clone-preview[hidden],
.minimax-voice-clone-preview-link[hidden] {
    display: none !important;
}

.minimax-voice-clone-panel {
    border-top: 1px solid #f0f0f0;
}

.minimax-voice-file-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-height: 72px;
    padding: 14px 16px;
    border: 1px dashed #d7d7dc;
    border-radius: 14px;
    background: #fafafa;
    color: #333;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.minimax-voice-file-picker span {
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.minimax-voice-file-picker small {
    font-size: 12px;
    color: #8a8a8a;
}

#minimax-clone-audio-file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.minimax-voice-clone-textarea {
    width: 100%;
    min-height: 82px;
    resize: vertical;
    line-height: 1.5;
    font-family: inherit;
}

.minimax-voice-clone-status {
    margin: 0 18px 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f7f7f7;
    color: #777;
    font-size: 13px;
    line-height: 1.5;
}

.minimax-voice-clone-status.working {
    background: #fff7e6;
    color: #9a5b00;
}

.minimax-voice-clone-status.success {
    background: #ecfdf3;
    color: #097b3d;
}

.minimax-voice-clone-status.error {
    background: #fff1f1;
    color: #b3261e;
}

.minimax-voice-clone-actions {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 10px;
    padding: 0 18px 18px;
}

.minimax-voice-clone-result {
    margin: 0 18px 18px;
    padding: 14px;
    border-radius: 14px;
    background: #f7fbf8;
    border: 1px solid #d9f0df;
}

.minimax-voice-clone-result-label {
    color: #5f6f64;
    font-size: 13px;
    margin-bottom: 8px;
}

.minimax-voice-clone-result-value {
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 14px;
    line-height: 1.45;
    word-break: break-all;
    user-select: text;
    -webkit-user-select: text;
}

.minimax-voice-clone-copy-btn {
    width: 100%;
    margin: 12px 0 10px;
}

.minimax-voice-clone-preview {
    margin: 12px 0;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(9, 123, 61, 0.12);
}

.minimax-voice-clone-audio {
    display: block;
    width: 100%;
    min-height: 42px;
    margin-top: 8px;
}

.minimax-voice-clone-preview-meta {
    margin-top: 8px;
    color: #66736a;
    font-size: 12px;
    line-height: 1.45;
}

.minimax-voice-clone-preview-link {
    display: block;
    margin-top: 8px;
    color: #087c3a;
    font-size: 13px;
    line-height: 1.45;
    text-decoration: none;
    word-break: break-word;
    -webkit-tap-highlight-color: transparent;
}

.minimax-voice-clone-primary-btn:disabled,
.minimax-voice-clone-secondary-btn:disabled,
.minimax-voice-clone-entry-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.minimax-voice-test-actions {
    padding: 0 18px 18px;
}

.minimax-voice-test-btn {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #ececef;
    border-radius: 12px;
    background: #fff;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.minimax-voice-test-btn:hover {
    background: #fafafa;
    border-color: #d8d8dc;
}

.minimax-voice-test-btn:active {
    transform: scale(0.99);
}

.minimax-voice-save-btn {
    border-radius: 16px;
    margin-top: 20px;
}

@media (max-width: 420px) {
    .minimax-voice-clone-entry-row {
        align-items: stretch;
        flex-direction: column;
    }

    .minimax-voice-clone-entry-btn {
        width: 100%;
    }

    .minimax-voice-clone-actions {
        grid-template-columns: 1fr;
    }
}


/* 错误弹框样式 */
/* 通用确认/错误弹层：须高于主屏刷新选择层(99999)等 */
.error-dialog-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1000000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px 16px;
    overflow-y: auto;
    box-sizing: border-box;
}

.error-dialog-container.show {
    opacity: 1;
    visibility: visible;
}

.error-dialog {
    background-color: white;
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    margin: auto;
    flex-shrink: 0;
}

.error-dialog-container.show .error-dialog {
    transform: scale(1);
}

.error-dialog-title {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #222;
    text-align: center;
    word-break: break-word;
}

.error-dialog-content {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #555;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 60vh;
    overflow-y: auto;
    background: #f8f8f8;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #eee;
}

.error-dialog-buttons {
    display: flex;
    gap: 10px;
}

.error-dialog-button {
    flex: 1;
    padding: 10px;
    background-color: #07C160;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.error-dialog-button:hover {
    background-color: #05a851;
}

.error-dialog-button:active {
    background-color: #049447;
}

.error-dialog-button.error-dialog-button-cancel {
    background-color: #e8e8e8;
    color: #333;
}

.error-dialog-button.error-dialog-button-cancel:hover {
    background-color: #d4d4d4;
}

.error-dialog-button.error-dialog-button-cancel:active {
    background-color: #c8c8c8;
}

.error-dialog-copy-btn {
    flex: 0 0 auto;
    padding: 10px 14px;
    background-color: #e8e8e8;
    color: #333;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.error-dialog-copy-btn:hover {
    background-color: #d4d4d4;
}

#chat-exclusive-bubble-preset-dialog .error-dialog {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#chat-exclusive-bubble-preset-dialog .error-dialog::-webkit-scrollbar {
    display: none;
}

/* 微信我页面 */
#wechat-me-page {
    display: none;
    flex-direction: column;
    height: 100%;
    background: #f2f2f2;
    position: relative;
    overflow: hidden;
}

#wechat-me-page.active {
    display: flex;
}

/* 微信我页面内容区域 */
.wechat-me-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #f2f2f2;
    position: relative;
}

/* 亲属卡全屏层打开时禁止底层「我」内容区抢滚动 */
#wechat-me-page.kinship-page-active .wechat-me-content {
    overflow: hidden;
    overscroll-behavior: none;
}

/* 收藏页打开时禁止底层「我」内容区抢滚动，手势交给收藏页内部滚动。
   这里改用显式 class（由 showFavorites / closeFavoritesPage 等切换）而不是 :has()，
   原因：早期版本的 Quark/Sogou/魅族浏览器以及部分内置 WebView 不支持 :has，
   用 JS class 控制可确保所有目标浏览器一致生效。 */
#wechat-me-page.favorites-page-active .wechat-me-content {
    overflow: hidden;
    overscroll-behavior: none;
}

/* 收藏是「我」页内的独立全屏子界面，打开时不再保留消息/发现/我底栏。
   避免小屏和带安全区机型上出现底部背景断层或 tabbar 覆盖内容。 */
#wechat-me-page.favorites-page-active > .wechat-bottom-nav {
    display: none !important;
}

#wechat-me-page.favorites-page-active .wechat-me-content {
    flex: 1 1 auto;
    min-height: 0;
}

/* 设置 / 聊天美化全屏子页打开时：底层「我」内容区不抢纵向滚动（与收藏页一致，兼容 iOS / 国产 WebView） */
#wechat-me-page.wechat-me-subpane-scroll-lock .wechat-me-content {
    overflow: hidden;
    overscroll-behavior: none;
}

/* 设置 / 聊天美化及其子弹窗是挂在 .wechat-me-content 内的全屏层；
   打开时隐藏微信底栏，让内容区扩展到页面底部，避免露出「消息 / 发现 / 我」。 */
#wechat-me-page.wechat-me-subpane-scroll-lock > .wechat-bottom-nav {
    display: none !important;
}

.wechat-me-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: rgba(191, 189, 195, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.wechat-me-header h1 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

/* 个人信息区域 */
.wechat-me-header.hidden,
.wechat-me-profile.hidden,
.wechat-me-functions.hidden {
    display: none !important;
}

.wechat-me-profile {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 30px 20px;
    margin-bottom: 10px;
    cursor: pointer;
}

.wechat-me-profile-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.wechat-me-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 15px;
}

.wechat-me-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wechat-me-avatar-placeholder {
    width: 100%;
    height: 100%;
    background-color: #f0f0f2;
    border-radius: 50%;
}

.wechat-me-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wechat-me-name {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
}

.wechat-me-id {
    font-size: 14px;
    color: #999;
}

/* 多选底栏：禁止全局 `.cancel-btn,.save-btn{flex:1;padding:12px;font-size:14px}` 把「取消」撑成特大键；四键统一为紧凑 pill */
#chat-page .chat-multiselect-bar .multiselect-btn.cancel-btn,
#chat-page .chat-multiselect-bar .multiselect-btn.forward-btn,
#chat-page .chat-multiselect-bar .multiselect-btn.favorite-btn,
#chat-page .chat-multiselect-bar .multiselect-btn.delete-btn {
    flex: 0 0 auto !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    border-right: none !important;
    min-width: 0;
    width: auto;
    max-width: none;
    line-height: 1.25 !important;
    align-self: center;
}

@media (max-width: 380px) {
    #chat-page .chat-multiselect-bar .multiselect-btn.cancel-btn,
    #chat-page .chat-multiselect-bar .multiselect-btn.forward-btn,
    #chat-page .chat-multiselect-bar .multiselect-btn.favorite-btn,
    #chat-page .chat-multiselect-bar .multiselect-btn.delete-btn {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
}

/* 功能列表 */
.wechat-me-functions {
    background-color: #fff;
}

.wechat-me-function-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.wechat-me-function-icon {
    font-size: 20px;
    margin-right: 15px;
    width: 34px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wechat-me-function-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

/* 编辑个人资料模态框中的头像上传区域 */
#edit-profile-modal .avatar-upload-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

/* 我页 · 我的人设全屏列表 / 编辑（覆盖完整微信手机屏） */
#wechat-me-page .chat-fullscreen-glass {
    z-index: 280;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0) 30%),
        radial-gradient(circle at 88% 18%, rgba(204, 64, 156, 0.14) 0, rgba(204, 64, 156, 0) 32%),
        linear-gradient(145deg, rgba(248, 248, 250, 0.97) 0%, rgba(229, 230, 235, 0.96) 52%, rgba(224, 219, 232, 0.96) 100%) !important;
    display: flex !important;
    align-items: stretch;
    justify-content: stretch;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(10px, 0, 0);
    transition: opacity 0.3s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.35s;
}

#wechat-me-page .chat-fullscreen-glass.show {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.3s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

#wechat-me-page .chat-fullscreen-glass .modal-content.friend-settings-modal {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column;
    padding: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.22) 38%, rgba(255, 255, 255, 0.12) 100%),
        transparent !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--chat-text, #1f2430);
}

#edit-profile-modal .avatar-upload-container {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

#edit-profile-modal .avatar-upload-preview {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 2px dashed rgba(0, 0, 0, 0.2);
    background-color: transparent;
}

#edit-profile-modal .avatar-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#edit-profile-modal .avatar-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.wechat-me-function-name {
    flex: 1;
    font-size: 16px;
}


/* 微信发现页面 */
#wechat-discover-page {
    display: none;
    flex-direction: column;
    height: 100%;
    background: #f2f2f2;
    position: relative;
}

#wechat-discover-page.active {
    display: flex;
}

/* 发现页：去掉顶栏标题后，列表区占满剩余空间 */
#wechat-discover-page .discover-content {
    flex: 1;
    min-height: 0;
}

/* 发现页内二级全屏页（记忆空间 / 游戏手札）打开时隐藏微信底栏，让子页真正覆盖到底部。 */
#wechat-discover-page.wechat-discover-subpage-fullscreen > .wechat-bottom-nav {
    display: none !important;
}

#wechat-discover-page.wechat-discover-subpage-fullscreen > .discover-content {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* ========== 推特 / 微信统一冷淡玻璃风覆盖层 ========== */
#twitter-page,
#wechat-page,
#wechat-me-page,
#wechat-discover-page {
    --app-glass-bg: rgba(246, 248, 252, 0.9);
    --app-glass-strong: rgba(232, 236, 244, 0.9);
    --app-glass-soft: rgba(255, 255, 255, 0.72);
    --app-cta-bg: linear-gradient(135deg, #667a96, #7e6f97);
    --app-cta-solid: #6f7894;
    --app-accent: #7b86a6;
    --app-accent-strong: #6f6a92;
    --app-text: #1f2430;
    --app-text-soft: #627087;
    --app-line: rgba(116, 128, 152, 0.22);
    --app-line-strong: rgba(100, 112, 136, 0.3);
    --app-shadow: 0 16px 38px rgba(57, 69, 92, 0.14);
    --app-radius-xl: 24px;
    --app-radius-lg: 20px;
    --app-radius-md: 16px;
    --app-radius-sm: 12px;
    background:
        radial-gradient(circle at top left, rgba(154, 171, 211, 0.2), transparent 36%),
        radial-gradient(circle at top right, rgba(158, 142, 182, 0.18), transparent 34%),
        linear-gradient(180deg, #edf1f7 0%, #e3e8f1 100%);
    color: var(--app-text);
}

/* 夜间模式：在上一段「冷淡玻璃」变量之后统一改为深色系，避免后段大段 !important 盖掉前面的 html[data-appearance] 规则 */
html[data-appearance="dark"] #twitter-page,
html[data-appearance="dark"] #wechat-page,
html[data-appearance="dark"] #wechat-me-page,
html[data-appearance="dark"] #wechat-discover-page {
    --app-glass-bg: rgba(28, 28, 30, 0.94);
    --app-glass-strong: rgba(40, 40, 44, 0.96);
    --app-glass-soft: rgba(50, 50, 55, 0.88);
    --app-cta-bg: linear-gradient(180deg, #0a84ff 0%, #0077ed 100%);
    --app-cta-solid: #0a84ff;
    --app-accent: #8e9ab8;
    --app-accent-strong: #a8a0c8;
    --app-text: #f5f5f7;
    --app-text-soft: rgba(220, 220, 232, 0.72);
    --app-line: rgba(255, 255, 255, 0.1);
    --app-line-strong: rgba(255, 255, 255, 0.16);
    --app-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
    color: var(--app-text);
}

/* 无全局底图时：整页深底（微信/我/发现不受主题全局图影响，可始终用实色深底） */
html[data-appearance="dark"] #wechat-page,
html[data-appearance="dark"] #wechat-me-page,
html[data-appearance="dark"] #wechat-discover-page {
    background: linear-gradient(180deg, #0e0e10 0%, #1a1a1c 100%) !important;
    background-image: none !important;
}

html[data-appearance="dark"]:not([data-user-global-wallpaper="1"]) #twitter-page {
    background: linear-gradient(180deg, #0e0e10 0%, #1a1a1c 100%) !important;
    background-image: none !important;
}

#twitter-page *,
#wechat-page *,
#wechat-me-page *,
#wechat-discover-page * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#twitter-page *::-webkit-scrollbar,
#wechat-page *::-webkit-scrollbar,
#wechat-me-page *::-webkit-scrollbar,
#wechat-discover-page *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

#wechat-me-page .wechat-me-header,
#wechat-discover-page .wechat-me-header,
#wechat-page .modal-content,
#wechat-me-page .modal-content,
#wechat-discover-page .modal-content,
#wechat-page .wechat-chat-group-menu,
#wechat-page .wechat-add-menu,
#wechat-me-page .wechat-me-profile,
#wechat-me-page .wechat-me-functions,
#wechat-discover-page .wechat-settings-card {
    background: var(--app-glass-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--app-line) !important;
    box-shadow: var(--app-shadow);
}

#wechat-me-page .wechat-me-header,
#wechat-discover-page .wechat-me-header,
#wechat-me-page .wechat-bottom-nav,
#wechat-discover-page .wechat-bottom-nav {
    border-radius: var(--app-radius-lg);
    margin: 10px 10px 0;
}

#wechat-me-page .wechat-bottom-nav,
#wechat-discover-page .wechat-bottom-nav {
    margin: 10px;
}

/*
 * 微信（消息 / 我 / 发现）：与推特的「悬浮圆角玻璃」脱钩。
 * 顶栏、底栏原先的 margin+磨砂会让 #app 全局壁纸从缝隙透出，列表区半透明+blur 会让滚动像被压在另一层下面。
 * 此处改为贴边、实色、无 backdrop-filter，贴近真微信单层灰底结构。
 */
#wechat-page,
#wechat-me-page,
#wechat-discover-page {
    background: #ededed;
    background-image: none;
}

#wechat-page > .status-bar,
#wechat-me-page > .status-bar,
#wechat-discover-page > .status-bar {
    background: #ededed !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#wechat-page .wechat-header,
#wechat-me-page .wechat-me-header {
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: #ededed !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#wechat-page .wechat-bottom-nav,
#wechat-me-page .wechat-bottom-nav,
#wechat-discover-page .wechat-bottom-nav {
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: #f7f7f7 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#wechat-page .wechat-chat-list {
    background: #ededed !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
}

#wechat-me-page .wechat-me-content,
#wechat-discover-page .discover-content {
    background: #ededed !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 消息列表：全宽白行 + 底部分割线，避免「卡片浮在另一层灰底上」 */
#wechat-page .wechat-chat-item {
    margin: 0 !important;
    padding: 12px 16px !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
}

#wechat-page .wechat-chat-item:hover {
    background: #f0f0f0 !important;
}

#twitter-page .twitter-feed-panel,
#twitter-page .twitter-profile-sheet,
#twitter-page .twitter-profile-tab-panel,
#twitter-page .twitter-compose-modal-content,
#twitter-page .twitter-following-picker-modal-content,
#twitter-page .twitter-followers-picker-modal-content,
#twitter-page .twitter-profile-edit-modal-content,
#wechat-page .modal-content,
#wechat-me-page .modal-content,
#wechat-discover-page .modal-content,
#wechat-page .wechat-chat-group-menu,
#wechat-page .wechat-add-menu,
#wechat-me-page .wechat-me-profile,
#wechat-me-page .wechat-me-functions,
#wechat-me-page .wechat-me-function-item,
#wechat-discover-page .wechat-settings-card,
#wechat-discover-page .wechat-memory-library-page,
#wechat-discover-page .wechat-memory-space-page {
    border-radius: var(--app-radius-lg) !important;
}

#twitter-page .twitter-feed-tab,
#twitter-page .twitter-profile-tab,
#wechat-page .wechat-header-filter-btn,
#wechat-page .wechat-header-btn,
#wechat-page .wechat-chat-group-option,
#wechat-page .wechat-add-menu-item,
#wechat-me-page .wechat-me-function-item,
#wechat-discover-page .wechat-settings-btn,
#twitter-page .twitter-profile-edit-btn,
#twitter-page .twitter-bottom-btn,
#twitter-page .twitter-refresh-btn,
#twitter-page .btn-cancel,
#twitter-page .btn-save,
#twitter-page .twitter-compose-modal-footer > button,
#wechat-page .btn-cancel,
#wechat-page .btn-save,
#wechat-me-page .btn-cancel,
#wechat-me-page .btn-save,
#wechat-discover-page .btn-cancel,
#wechat-discover-page .btn-save,
#wechat-me-page .cancel-btn,
#wechat-me-page .save-btn {
    border-radius: 999px !important;
}

#twitter-page .twitter-profile-edit-btn,
#twitter-page .btn-cancel,
#twitter-page .btn-save,
#twitter-page .twitter-compose-modal-footer > button,
#wechat-page .btn-cancel,
#wechat-page .btn-save,
#wechat-me-page .btn-cancel,
#wechat-me-page .btn-save,
#wechat-discover-page .btn-cancel,
#wechat-discover-page .btn-save,
#wechat-me-page .cancel-btn,
#wechat-me-page .save-btn,
#wechat-discover-page .wechat-settings-btn {
    background: var(--app-cta-bg) !important;
    color: #f7f9fc !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 12px 24px rgba(102, 111, 137, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#twitter-page .btn-cancel,
#wechat-page .btn-cancel,
#wechat-me-page .btn-cancel,
#wechat-discover-page .btn-cancel,
#wechat-me-page .cancel-btn,
#wechat-discover-page .wechat-settings-btn.secondary {
    background: var(--dark-btn-secondary-bg, rgba(118, 118, 128, 0.36)) !important;
    color: var(--dark-btn-text, #f5f5f7) !important;
    border: 1px solid var(--dark-btn-secondary-border, rgba(255, 255, 255, 0.16)) !important;
    box-shadow: none !important;
}

#twitter-page .twitter-app-title,
#twitter-page .twitter-app-title-slash,
#twitter-page .twitter-profile-name,
#twitter-page .twitter-messages-title,
#wechat-page .wechat-header h1,
#wechat-page .wechat-header-filter-title,
#wechat-me-page .wechat-me-name,
#wechat-discover-page .wechat-settings-title,
#wechat-discover-page .wechat-settings-label {
    color: var(--app-text) !important;
}

#twitter-page .twitter-feed-tab,
#twitter-page .twitter-profile-tab,
#twitter-page .twitter-profile-handle,
#twitter-page .twitter-messages-hint,
#wechat-page .wechat-header-filter-btn,
#wechat-page .wechat-chat-item,
#wechat-page .wechat-chat-preview,
#wechat-page .wechat-chat-time,
#wechat-me-page .wechat-me-id,
#wechat-discover-page .wechat-settings-desc,
#wechat-discover-page .wechat-settings-intro,
#wechat-discover-page .wechat-settings-status {
    color: var(--app-text-soft) !important;
}

#twitter-page .twitter-feed-tab.active,
#twitter-page .twitter-profile-tab.active,
#twitter-page .twitter-bottom-btn.active,
#wechat-page .wechat-nav-item.active .wechat-nav-text,
#wechat-page .wechat-chat-group-option.is-selected,
#wechat-page .wechat-header-filter-pill {
    color: var(--app-accent-strong) !important;
}

#twitter-page .twitter-feed-tab.active::after,
#twitter-page .twitter-profile-tab.active::after {
    background: linear-gradient(135deg, #7b88ab, #8f7fa9) !important;
    height: 3px;
    border-radius: 999px;
}

#twitter-page .twitter-fab-compose {
    background: var(--app-cta-bg) !important;
    box-shadow: 0 16px 32px rgba(100, 112, 141, 0.3) !important;
}

#twitter-page .twitter-feed-panel,
#twitter-page .twitter-body .tweet-container {
    max-width: 560px;
    padding: 8px;
}

#twitter-page #twitter-body-following .tweet,
#twitter-page #twitter-body-foryou .tweet,
#twitter-page #twitter-body-entertainment .tweet {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid var(--app-line) !important;
    border-radius: var(--app-radius-md) !important;
    box-shadow: 0 10px 24px rgba(74, 86, 111, 0.08);
    margin: 0 0 10px;
}

#twitter-page #twitter-body-following .tweet-replies,
#twitter-page #twitter-body-foryou .tweet-replies,
#twitter-page #twitter-body-entertainment .tweet-replies,
#wechat-me-page .wechat-me-function-item,
#wechat-discover-page .wechat-settings-row,
#wechat-discover-page .wechat-memory-intro,
#wechat-discover-page .wechat-memory-calendar-card {
    border-top-color: var(--app-line) !important;
    border-bottom-color: var(--app-line) !important;
}

/* 消息页顶栏/底栏/列表/行由上方「贴边实色」规则接管，勿再套半透明玻璃（避免多层与滚动「被压住」感） */
#wechat-page .wechat-add-menu,
#wechat-page .wechat-chat-group-menu,
#wechat-me-page .wechat-me-profile,
#wechat-me-page .wechat-me-functions,
#wechat-me-page .wechat-me-function-item,
#wechat-discover-page .discover-content,
#wechat-discover-page .wechat-settings-page,
#wechat-discover-page .wechat-settings-header,
#wechat-discover-page .wechat-settings-card,
#wechat-discover-page .wechat-memory-header,
#wechat-discover-page .wechat-memory-calendar-card,
#wechat-discover-page .wechat-memory-friend-hero,
#wechat-discover-page .wechat-memory-diary-modal-content {
    background: var(--app-glass-bg) !important;
    border-color: var(--app-line) !important;
}

#wechat-me-page .wechat-me-function-item,
#wechat-discover-page .wechat-settings-row {
    margin: 6px 10px;
    padding: 14px 16px;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-md);
    background: rgba(255, 255, 255, 0.52) !important;
    box-shadow: 0 8px 18px rgba(83, 96, 124, 0.08);
}

#wechat-me-page .wechat-me-function-item:hover,
#wechat-page .wechat-add-menu-item:hover,
#wechat-page .wechat-chat-group-option:hover {
    background: rgba(123, 136, 171, 0.12) !important;
}

#wechat-me-page .wechat-me-profile {
    margin: 10px;
    padding: 28px 20px;
}

#wechat-me-page .wechat-me-avatar,
#wechat-me-page .avatar-preview {
    box-shadow: 0 12px 24px rgba(84, 98, 126, 0.16);
    border-color: rgba(255, 255, 255, 0.7) !important;
}

/* 推特主页头像：曾把 border 改成 70% 白，叠在 wrap 的蓝色底色上，会让头像「一半被淡蓝色透明层盖住」。
 * 这里只保留软阴影，边框统一为不透明白，避免和 banner 同色融合。 */
#twitter-page .twitter-profile-avatar-wrap {
    box-shadow: 0 12px 24px rgba(84, 98, 126, 0.16);
    border-color: #fff !important;
}

#wechat-discover-page .wechat-settings-page,
#wechat-discover-page .wechat-memory-library-page,
#wechat-discover-page .wechat-memory-space-page {
    background:
        radial-gradient(circle at top left, rgba(162, 176, 210, 0.16), transparent 28%),
        linear-gradient(180deg, rgba(246, 248, 252, 0.92), rgba(231, 236, 244, 0.92)) !important;
}

#wechat-discover-page .wechat-settings-header,
#wechat-discover-page .wechat-memory-header {
    border-bottom: 1px solid var(--app-line) !important;
}

#wechat-page .wechat-nav-text,
#wechat-me-page .wechat-nav-text,
#wechat-discover-page .wechat-nav-text {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--app-text-soft);
}

#twitter-page .twitter-bottom-btn.active {
    background: rgba(123, 136, 171, 0.12) !important;
}

#wechat-page .wechat-nav-item.active,
#wechat-me-page .wechat-nav-item.active,
#wechat-discover-page .wechat-nav-item.active {
    background: transparent !important;
}

#twitter-page .twitter-bottom-btn,
#wechat-page .wechat-nav-item,
#wechat-me-page .wechat-nav-item,
#wechat-discover-page .wechat-nav-item {
    margin: 0 6px;
    min-height: 58px;
}

#twitter-page .modal,
#wechat-page .modal,
#wechat-me-page .modal,
#wechat-discover-page .modal {
    background: rgba(32, 36, 46, 0.28) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#twitter-page .modal-content,
#wechat-page .modal-content,
#wechat-me-page .modal-content,
#wechat-discover-page .modal-content {
    border-radius: var(--app-radius-xl) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

#twitter-page input,
#twitter-page textarea,
#twitter-page select,
#wechat-page input,
#wechat-page textarea,
#wechat-page select,
#wechat-me-page input,
#wechat-me-page textarea,
#wechat-me-page select,
#wechat-discover-page input,
#wechat-discover-page textarea,
#wechat-discover-page select {
    border-radius: var(--app-radius-sm) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid var(--app-line-strong) !important;
    color: var(--app-text) !important;
}

#twitter-page input:focus,
#twitter-page textarea:focus,
#twitter-page select:focus,
#wechat-page input:focus,
#wechat-page textarea:focus,
#wechat-page select:focus,
#wechat-me-page input:focus,
#wechat-me-page textarea:focus,
#wechat-me-page select:focus,
#wechat-discover-page input:focus,
#wechat-discover-page textarea:focus,
#wechat-discover-page select:focus {
    outline: none;
    border-color: rgba(123, 134, 166, 0.7) !important;
    box-shadow: 0 0 0 4px rgba(123, 134, 166, 0.12) !important;
}

#wechat-me-page .wechat-me-content,
#wechat-discover-page .discover-content,
#wechat-discover-page .wechat-settings-body,
#wechat-discover-page .wechat-memory-space-body,
#wechat-discover-page .wechat-memory-library-body {
    padding: 10px 8px 14px;
}

#wechat-me-page .wechat-me-header,
#wechat-discover-page .wechat-me-header,
#wechat-discover-page .wechat-settings-header,
#wechat-discover-page .wechat-memory-header {
    min-height: 58px;
}

#wechat-me-page .wechat-me-profile-content,
#wechat-discover-page .wechat-memory-friend-meta,
#wechat-discover-page .wechat-settings-row--bubble {
    gap: 6px;
}

#wechat-me-page .wechat-me-name,
#wechat-discover-page .wechat-memory-friend-name,
#wechat-discover-page .wechat-memory-header-title,
#wechat-discover-page .wechat-settings-title {
    letter-spacing: 0.01em;
    font-weight: 700;
}

#wechat-me-page .wechat-me-id,
#wechat-discover-page .wechat-memory-calendar-hint,
#wechat-discover-page .wechat-memory-intro,
#wechat-discover-page .wechat-settings-intro,
#wechat-discover-page .wechat-settings-desc {
    color: var(--app-text-soft) !important;
    line-height: 1.6;
}

#wechat-discover-page .wechat-memory-friend-hero,
#wechat-discover-page .wechat-memory-calendar-card,
#wechat-discover-page .wechat-memory-diary-modal-content,
#wechat-discover-page .wechat-memory-friend-selector-content,
#wechat-discover-page .wechat-memory-month-picker-content {
    border: 1px solid var(--app-line) !important;
    border-radius: var(--app-radius-lg) !important;
    background: var(--app-glass-bg) !important;
    box-shadow: var(--app-shadow) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#wechat-discover-page .wechat-memory-friend-selector-header,
#wechat-discover-page .wechat-memory-month-picker-header,
#wechat-discover-page .wechat-memory-diary-header,
#wechat-discover-page .wechat-memory-diary-footer,
#wechat-discover-page .wechat-memory-month-picker-footer {
    border-color: var(--app-line) !important;
    background: rgba(255, 255, 255, 0.52) !important;
}

#wechat-discover-page .wechat-memory-back-btn,
#wechat-discover-page .wechat-memory-header-action,
#wechat-discover-page .wechat-settings-back,
#wechat-me-page .wechat-back-btn {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid var(--app-line);
}

#wechat-discover-page .wechat-memory-back-btn:active,
#wechat-discover-page .wechat-memory-header-action:active,
#wechat-discover-page .wechat-settings-back:active,
#wechat-me-page .wechat-back-btn:active {
    background: rgba(123, 136, 171, 0.14) !important;
}

html[data-appearance="dark"] #wechat-discover-page .wechat-memory-back-btn,
html[data-appearance="dark"] #wechat-discover-page .wechat-memory-header-action,
html[data-appearance="dark"] #wechat-discover-page .wechat-settings-back,
html[data-appearance="dark"] #wechat-me-page .wechat-back-btn {
    background: var(--dark-icon-btn-bg) !important;
    border: 1px solid var(--dark-icon-btn-border) !important;
    box-shadow: var(--dark-icon-btn-shadow) !important;
    color: var(--dark-btn-text) !important;
}

html[data-appearance="dark"] #wechat-discover-page .wechat-memory-back-btn:active,
html[data-appearance="dark"] #wechat-discover-page .wechat-memory-header-action:active,
html[data-appearance="dark"] #wechat-discover-page .wechat-settings-back:active,
html[data-appearance="dark"] #wechat-me-page .wechat-back-btn:active {
    background: rgba(100, 100, 106, 0.98) !important;
}

html[data-appearance="dark"] #wechat-discover-page .wechat-memory-friend-selector-header,
html[data-appearance="dark"] #wechat-discover-page .wechat-memory-month-picker-header,
html[data-appearance="dark"] #wechat-discover-page .wechat-memory-diary-header,
html[data-appearance="dark"] #wechat-discover-page .wechat-memory-diary-footer,
html[data-appearance="dark"] #wechat-discover-page .wechat-memory-month-picker-footer {
    background: rgba(36, 36, 40, 0.92) !important;
    border-color: var(--app-line) !important;
    color: var(--dark-btn-text) !important;
}

html[data-appearance="dark"] #wechat-discover-page .wechat-settings-row {
    background: rgba(48, 48, 52, 0.78) !important;
}

#wechat-discover-page .wechat-settings-card {
    padding: 6px;
}

#wechat-discover-page .wechat-settings-row {
    background: rgba(255, 255, 255, 0.54) !important;
}

#wechat-page .wechat-chat-content,
#wechat-page .wechat-chat-name,
#wechat-page .wechat-chat-preview,
#wechat-page .wechat-chat-time,
#wechat-me-page .wechat-me-function-name,
#wechat-discover-page .wechat-settings-label,
#wechat-discover-page .wechat-memory-friend-name {
    color: var(--app-text) !important;
}

#wechat-page .wechat-chat-preview,
#wechat-page .wechat-chat-time,
#wechat-me-page .wechat-me-id,
#wechat-discover-page .wechat-memory-friend-month,
#wechat-discover-page .wechat-settings-status {
    color: var(--app-text-soft) !important;
}

#wechat-page .wechat-header-filter-pill,
#wechat-discover-page .wechat-memory-batch-generate-btn,
#wechat-discover-page .wechat-memory-friend-selector-save,
#wechat-discover-page .wechat-memory-diary-action-btn {
    background: linear-gradient(135deg, rgba(123, 136, 171, 0.18), rgba(143, 127, 169, 0.22)) !important;
    border: 1px solid rgba(123, 136, 171, 0.22) !important;
    color: var(--app-accent-strong) !important;
    border-radius: 999px !important;
}

#wechat-page .wechat-nav-icon,
#wechat-me-page .wechat-nav-icon,
#wechat-discover-page .wechat-nav-icon {
    border-radius: 0;
    background: transparent;
    border: none;
}

#chat-page {
    --chat-glass-bg: rgba(246, 248, 252, 0.9);
    --chat-glass-soft: rgba(255, 255, 255, 0.72);
    --chat-line: rgba(116, 128, 152, 0.22);
    --chat-line-strong: rgba(100, 112, 136, 0.3);
    --chat-text: #1f2430;
    --chat-text-soft: #627087;
    --chat-accent: #7b86a6;
    --chat-accent-strong: #6f6a92;
    --chat-cta-bg: linear-gradient(135deg, #667a96, #7e6f97);
    --chat-shadow: 0 16px 38px rgba(57, 69, 92, 0.14);
    --chat-radius-xl: 24px;
    --chat-radius-lg: 20px;
    --chat-radius-md: 16px;
    --chat-radius-sm: 12px;
}

#chat-page,
#chat-page .chat-content,
#chat-page .chat-input-area,
#chat-page .chat-more-panel,
:is(#chat-page, .voice-call-global-root) .voice-call-layer,
:is(#chat-page, .voice-call-global-root) .voice-call-panel,
:is(#chat-page, .voice-call-global-root) .voice-call-mini,
#chat-page .chat-settings-modal,
#chat-page .chat-camera-modal,
#chat-page .world-book-select-modal-content,
#chat-page .add-world-book-modal-content,
#chat-page .main-music-island-shell,
#chat-page .main-music-island-expanded-card {
    background: transparent;
}

#chat-page *,
#chat-page *::-webkit-scrollbar {
    scrollbar-width: none !important;
}

#chat-page *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* TA想 · 无 User 多人群头像横条：恢复横向滚动条（全局 #chat-page * 会隐藏全部 scrollbar） */
#chat-page .group-heartbeat-member-strip {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(233, 231, 245, 0.8) rgba(233, 231, 245, 0.32) !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

#chat-page .group-heartbeat-member-strip::-webkit-scrollbar {
    height: 10px !important;
    width: auto !important;
    background: transparent !important;
}

#chat-page .group-heartbeat-member-strip::-webkit-scrollbar-track {
    background: rgba(233, 231, 245, 0.32) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 0 0 1px rgba(139, 128, 180, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

#chat-page .group-heartbeat-member-strip::-webkit-scrollbar-thumb {
    background: rgba(233, 231, 245, 0.8) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

#chat-page .chat-header,
#chat-page .chat-input-area,
#chat-page .chat-more-panel,
#chat-page .chat-settings-modal,
:is(#chat-page, .voice-call-global-root) .voice-call-mini,
#chat-page .chat-camera-modal .modal-content,
#chat-page .world-book-select-modal-content,
#chat-page .add-world-book-modal-content,
#chat-page .main-music-island-shell,
#chat-page .main-music-island-expanded-card,
#chat-page .chat-voice-call-summary-content,
#chat-page .voice-feature-choice-modal .modal-content,
#chat-page .voice-message-modal .modal-content,
#chat-page .wallet-modal .modal-content,
#chat-page .modal-content {
    background: var(--chat-glass-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--chat-line) !important;
    box-shadow: var(--chat-shadow) !important;
    color: var(--chat-text);
}

#chat-page .chat-header {
    border-radius: var(--chat-radius-lg);
    margin: 10px 10px 0;
}

#chat-page .chat-content {
    padding-left: 6px;
    padding-right: 6px;
}

#chat-page .chat-bottom-composer {
    margin: 10px;
}

#chat-page .chat-input-area {
    margin: 10px;
    border-radius: var(--chat-radius-lg);
}

#chat-page .chat-bottom-composer .chat-input-area {
    margin: 0;
}

/* 表情打开时与输入栏连成一块：去重顶边描边、圆角上下衔接 */
#chat-page .chat-bottom-composer:has(.emoji-panel.show) .chat-input-area {
    border-top: none !important;
    border-radius: 0 0 var(--chat-radius-lg) var(--chat-radius-lg) !important;
}

#chat-page .chat-bottom-composer .emoji-panel.show {
    border-radius: var(--chat-radius-lg) var(--chat-radius-lg) 0 0 !important;
}

#chat-page .chat-header .back-btn,
#chat-page .chat-header-btn,
#chat-page .chat-function-btn,
#chat-page .chat-input-btn,
#chat-page .chat-send-btn,
:is(#chat-page, .voice-call-global-root) .voice-call-top-btn,
:is(#chat-page, .voice-call-global-root) .voice-call-control-btn,
:is(#chat-page, .voice-call-global-root) .voice-call-send-plane,
#chat-page .world-book-select-confirm-btn,
#chat-page .wallet-modal-btn,
#chat-page .redpacket-type-btn,
#chat-page .dynamic-island-more,
#chat-page .music-search-btn,
#chat-page .music-search-add,
#chat-page .music-search-play,
#chat-page .music-playlist-add-btn,
#chat-page .music-playlist-cancel-btn {
    border-radius: 999px !important;
}

#chat-page .chat-header .back-btn,
#chat-page .chat-header-btn,
#chat-page .chat-function-btn,
#chat-page .chat-input-btn,
#chat-page .dynamic-island-more {
    background: rgba(255, 255, 255, 0.52) !important;
    border: 1px solid var(--chat-line) !important;
}

#chat-page .chat-send-btn,
:is(#chat-page, .voice-call-global-root) .voice-call-send-plane,
#chat-page .world-book-select-confirm-btn,
#chat-page .wallet-modal-btn.confirm,
#chat-page .music-search-btn,
#chat-page .music-search-add,
#chat-page .music-playlist-add-btn {
    background: var(--chat-cta-bg) !important;
    color: #f7f9fc !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

#chat-page .wallet-modal-btn.cancel,
#chat-page .music-search-play,
#chat-page .music-playlist-cancel-btn,
#chat-page .redpacket-type-btn {
    background: rgba(255, 255, 255, 0.58) !important;
    color: var(--chat-text) !important;
    border: 1px solid var(--chat-line) !important;
}

#chat-page .chat-input,
:is(#chat-page, .voice-call-global-root) .voice-call-input,
#chat-page .voice-message-textarea,
#chat-page .wallet-password-input,
#chat-page .wallet-amount-input,
#chat-page .modal-input,
#chat-page .world-book-textarea,
#chat-page .new-folder-input,
#chat-page .music-search-input,
#chat-page .world-book-folder-select {
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid var(--chat-line-strong) !important;
    color: var(--chat-text) !important;
    border-radius: var(--chat-radius-sm) !important;
}

#chat-page .chat-input:focus,
:is(#chat-page, .voice-call-global-root) .voice-call-input:focus,
#chat-page .voice-message-textarea:focus,
#chat-page .wallet-password-input:focus,
#chat-page .wallet-amount-input:focus,
#chat-page .modal-input:focus,
#chat-page .world-book-textarea:focus,
#chat-page .new-folder-input:focus,
#chat-page .music-search-input:focus,
#chat-page .world-book-folder-select:focus {
    outline: none;
    border-color: rgba(123, 134, 166, 0.7) !important;
    box-shadow: 0 0 0 4px rgba(123, 134, 166, 0.12) !important;
}

#chat-page .chat-header h1,
#chat-page .chat-more-label,
:is(#chat-page, .voice-call-global-root) .voice-call-name,
#chat-page .music-search-title,
#chat-page .music-playlist-header h3,
#chat-page .chat-settings-label {
    color: var(--chat-text) !important;
}

#chat-page .world-book-item-title,
#chat-page .world-book-item-preview,
#chat-page .world-book-folder-header,
#chat-page .world-book-folder-header-text,
#chat-page .world-book-folder-count,
#chat-page .world-book-select-item,
#chat-page .world-book-select-folder-header {
    color: #F5F4F0 !important;
}

#chat-page .chat-header-btn,
#chat-page .chat-header h1,
#chat-page .chat-input,
:is(#chat-page, .voice-call-global-root) .voice-call-status,
:is(#chat-page, .voice-call-global-root) .voice-call-timer,
:is(#chat-page, .voice-call-global-root) .voice-call-typing-text,
#chat-page .world-book-empty-hint,
#chat-page .music-search-artist,
#chat-page .music-search-status,
#chat-page .chat-settings-arrow {
    color: var(--chat-text-soft) !important;
}

#chat-page .chat-more-panel {
    margin: 0 10px 10px;
    padding: 12px;
    border-radius: var(--chat-radius-lg) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

#chat-page .chat-more-item {
    min-height: 72px;
    padding: 8px 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.52) !important;
    border: 1px solid var(--chat-line);
    box-shadow: 0 6px 14px rgba(83, 96, 124, 0.06);
}

#chat-page .chat-more-item:hover {
    background: rgba(123, 136, 171, 0.12) !important;
}

#chat-page .chat-more-icon {
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(126, 118, 156, 0.16);
    border: 1px solid rgba(126, 118, 156, 0.22);
}

#chat-page .chat-more-icon svg,
#chat-page .chat-more-icon img {
    width: 15px;
    height: 15px;
}

#chat-page .chat-more-label {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.35;
}

#chat-page .chat-content.more-panel-open,
#chat-page .chat-content.dynamic-island-open {
    filter: none;
}

#chat-page .world-book-item,
#chat-page .world-book-select-item,
#chat-page .world-book-folder-header,
#chat-page .music-search-item,
#chat-page .music-playlist-item,
#chat-page .chat-settings-item,
:is(#chat-page, .voice-call-global-root) .voice-call-transcript-bubble,
#chat-page .chat-voice-call-summary-bubble,
#chat-page .redpacket-cover-editor,
#chat-page .redpacket-cover-preview {
    background: rgba(255, 255, 255, 0.54) !important;
    border: 1px solid var(--chat-line) !important;
    border-radius: var(--chat-radius-md) !important;
}

#chat-page .world-book-item:hover,
#chat-page .world-book-select-item:hover,
#chat-page .world-book-folder-header:hover,
#chat-page .music-search-item:hover,
#chat-page .music-playlist-item:hover,
#chat-page .chat-settings-item:hover {
    background: rgba(123, 136, 171, 0.12) !important;
}

#chat-page .world-book-list,
#chat-page .music-search-list,
#chat-page .music-playlist-list,
#chat-page .chat-settings-list,
:is(#chat-page, .voice-call-global-root) .voice-call-transcript-list,
#chat-page .chat-voice-call-summary-list {
    gap: 10px;
}

:is(#chat-page, .voice-call-global-root) .voice-call-mini,
#chat-page .main-music-island-shell,
#chat-page .main-music-island-expanded-card {
    border-radius: var(--chat-radius-xl) !important;
}

:is(#chat-page, .voice-call-global-root) .voice-call-transcript-bubble,
#chat-page .chat-voice-call-summary-bubble {
    color: var(--chat-text) !important;
}

#chat-page .redpacket-type-btn.active,
#chat-page .world-book-item.world-book-item--checked .world-book-item-title,
#chat-page .world-book-select-item.checked {
    color: var(--chat-accent-strong) !important;
    background: rgba(123, 136, 171, 0.16) !important;
}

#chat-page .modal,
:is(#chat-page, .voice-call-global-root) .voice-call-layer.show,
#chat-page .main-music-island-expanded-scrim {
    background: rgba(32, 36, 46, 0.28) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#chat-page .favorites-page,
#chat-page .wallet-page,
#chat-page .wallet-bills-page,
#chat-page .moments-page,
#chat-page .offline-mode-page,
:is(#chat-page, .voice-call-global-root) .voice-call-layer,
#chat-page .post-moments-modal-content,
#chat-page .moments-comment-modal-content,
#chat-page .moments-post-menu,
#chat-page .emoji-panel,
#chat-page .emoji-picker,
#chat-page .emoji-popup,
#chat-page .chat-camera-modal .chat-camera-shell,
#chat-page .chat-camera-modal .chat-camera-panel {
    background: transparent;
}

.world-book-select-modal-content .modal-close,
.add-world-book-modal-content .modal-close,
.modal-content .modal-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(116, 128, 152, 0.22) !important;
    background: rgba(255, 255, 255, 0.58) !important;
    color: #627087 !important;
    border-radius: 999px !important;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.world-book-textarea,
.world-book-folder-select {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(123, 132, 164, 0.22) !important;
    border-radius: 12px !important;
    color: #48506b !important;
}

.favorites-item {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

.world-book-item,
.world-book-select-item,
.world-book-folder-header {
    background: rgba(167, 190, 198, 0.9) !important;
    border: 1px solid rgba(167, 190, 198, 0.9) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

.favorites-item:hover {
    background: rgba(255,255,255,0.18) !important;
}

.world-book-item:hover,
.world-book-select-item:hover,
.world-book-folder-header:hover {
    background: rgba(167, 190, 198, 0.9) !important;
}

.favorites-page,
.favorites-detail-page,
.wallet-page,
.wallet-bills-page,
#wechat-discover-page .discover-content,
.wechat-memory-library-page,
.wechat-memory-space-page {
    background: linear-gradient(180deg, #edf1f7 0%, #e3e8f1 100%) !important;
}

.favorites-page-header,
.wallet-page-header,
.wallet-bills-page .wallet-page-header {
    background: rgba(246, 248, 252, 0.9) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(116, 128, 152, 0.18) !important;
}

.favorites-tabs,
.favorites-action-tip,
.wallet-menu-card {
    background: rgba(246, 248, 252, 0.9) !important;
    border: 1px solid rgba(116, 128, 152, 0.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 18px rgba(83, 96, 124, 0.08) !important;
}

.favorites-page-body,
.favorites-detail-page .favorites-page-body,
.wallet-page-body,
.wallet-bills-page-body,
.wechat-memory-library-body,
.wechat-memory-space-body {
    padding: 10px 8px 14px !important;
}

#favorites-heartbeat-page .favorites-page-body,
#favorites-heartbeat-detail-page .favorites-page-body {
    padding: 0 !important;
}

#favorites-heartbeat-page .favorites-page-header,
#favorites-heartbeat-detail-page .favorites-page-header {
    margin: 8px 8px 0;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(57, 69, 92, 0.12);
}

.favorites-item {
    margin: 8px 10px;
}

#chat-page .favorites-page-header,
#chat-page .wallet-page-header,
#chat-page .wallet-bills-page .wallet-page-header,
#chat-page .moments-floating-toolbar,
#chat-page .offline-mode-header,
#chat-page .favorites-tabs,
#chat-page .wallet-balance-card,
#chat-page .wallet-menu-card,
#chat-page .wallet-bills-summary,
#chat-page .wallet-bills-filter,
#chat-page .wallet-bill-item,
#chat-page .favorites-item,
#chat-page .moments-post-card,
#chat-page .moments-post-social-box,
#chat-page .moments-post-menu,
#chat-page .post-moments-modal-content,
#chat-page .moments-comment-modal-content,
#chat-page .offline-mode-card,
#chat-page .offline-mode-section,
#chat-page .offline-mode-surface,
#chat-page .emoji-panel,
#chat-page .emoji-picker,
#chat-page .emoji-popup,
#chat-page .chat-camera-shell,
#chat-page .chat-camera-panel,
#chat-page .chat-camera-frame,
#chat-page .wallet-modal-content,
#chat-page .chat-settings-modal,
:is(#chat-page, .voice-call-global-root) .voice-call-mini,
#chat-page .music-search-content,
#chat-page .music-playlist-content {
    background: rgba(246, 248, 252, 0.9) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(116, 128, 152, 0.22) !important;
    box-shadow: 0 16px 38px rgba(57, 69, 92, 0.14) !important;
}

#chat-page .favorites-page-header,
#chat-page .wallet-page-header,
#chat-page .moments-floating-toolbar,
#chat-page .offline-mode-header {
    border-radius: 20px;
    margin: 10px 10px 0;
}

#chat-page .favorites-page-body,
#chat-page .wallet-page-body,
#chat-page .wallet-bills-page-body,
#chat-page .moments-page-body,
#chat-page .offline-mode-body {
    padding: 10px 8px 14px;
    background: transparent !important;
}

#chat-page .favorites-tabs,
#chat-page .wallet-balance-card,
#chat-page .wallet-menu-card,
#chat-page .wallet-bills-summary,
#chat-page .offline-mode-card,
#chat-page .offline-mode-section {
    border-radius: 20px !important;
    margin: 0 10px 10px;
}

#chat-page .wallet-bill-item,
#chat-page .favorites-item,
#chat-page .wallet-menu-item,
#chat-page .moments-post-card,
#chat-page .moments-post-menu-item,
#chat-page .offline-mode-option,
#chat-page .offline-mode-item,
#chat-page .emoji-item,
#chat-page .emoji-category-item,
#chat-page .chat-camera-action-btn {
    background: rgba(255, 255, 255, 0.54) !important;
    border: 1px solid rgba(116, 128, 152, 0.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 18px rgba(83, 96, 124, 0.08);
}

#chat-page .wallet-bill-item:hover,
#chat-page .favorites-item:hover,
#chat-page .wallet-menu-item:hover,
#chat-page .moments-post-menu-item:hover,
#chat-page .offline-mode-option:hover,
#chat-page .offline-mode-item:hover,
#chat-page .emoji-item:hover,
#chat-page .emoji-category-item:hover,
#chat-page .chat-camera-action-btn:hover {
    background: rgba(123, 136, 171, 0.12) !important;
}

#chat-page .favorites-back-btn,
#chat-page .wallet-back-btn,
#chat-page .moments-toolbar-back,
#chat-page .moments-toolbar-icon-btn,
#chat-page .post-moments-cancel,
#chat-page .post-moments-publish,
#chat-page .chat-voice-call-summary-close,
#chat-page .favorites-tab,
#chat-page .wallet-bills-filter,
#chat-page .wallet-modal-btn,
#chat-page .offline-mode-btn,
#chat-page .emoji-send-btn,
#chat-page .emoji-delete-btn,
#chat-page .chat-camera-close,
#chat-page .chat-camera-capture,
#chat-page .chat-camera-switch,
#chat-page .chat-camera-confirm {
    border-radius: 999px !important;
}

#chat-page .favorites-back-btn,
#chat-page .wallet-back-btn,
#chat-page .chat-voice-call-summary-close,
#chat-page .emoji-delete-btn,
#chat-page .chat-camera-close,
#chat-page .chat-camera-switch {
    background: rgba(255, 255, 255, 0.52) !important;
    border: 1px solid rgba(116, 128, 152, 0.22) !important;
}

.moments-toolbar-back,
.moments-toolbar-icon-btn {
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    border-radius: 12px !important;
    background: rgba(132, 151, 189, 0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #f7f9fc !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

#chat-page .post-moments-publish,
#chat-page .wallet-modal-btn.confirm,
#chat-page .offline-mode-btn.confirm,
#chat-page .emoji-send-btn,
#chat-page .chat-camera-capture,
#chat-page .chat-camera-confirm,
#chat-page .wallet-bills-filter.active,
#chat-page .favorites-tab.active {
    background: linear-gradient(135deg, #667a96, #7e6f97) !important;
    color: #f7f9fc !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

#chat-page .post-moments-cancel,
#chat-page .wallet-modal-btn.cancel,
#chat-page .offline-mode-btn,
#chat-page .favorites-tab,
#chat-page .wallet-bills-filter,
#chat-page .redpacket-type-btn,
#chat-page .emoji-category-item {
    background: rgba(255, 255, 255, 0.58) !important;
    color: #1f2430 !important;
    border: 1px solid rgba(116, 128, 152, 0.22) !important;
}

#chat-page .favorites-page-title,
#chat-page .wallet-page-title,
#chat-page .wallet-balance-amount,
#chat-page .wallet-menu-name,
#chat-page .wallet-bill-item-title,
#chat-page .favorites-item-src,
#chat-page .moments-ins-nickname,
#chat-page .moments-post-name,
#chat-page .post-moments-header h3,
#chat-page .chat-voice-call-summary-meta-title,
#chat-page .offline-mode-title,
#chat-page .emoji-title,
#chat-page .chat-camera-title {
    color: #1f2430 !important;
}

#chat-page .favorites-empty-hint,
#chat-page .favorites-item-time,
#chat-page .favorites-item-tip,
#chat-page .wallet-balance-label,
#chat-page .wallet-menu-value,
#chat-page .wallet-bill-item-meta,
#chat-page .wallet-bill-item-time,
#chat-page .wallet-bills-empty-hint,
#chat-page .moments-empty-hint,
#chat-page .moments-post-time-inline,
#chat-page .moments-post-content,
#chat-page .moments-thread-text,
#chat-page .post-moments-body textarea,
#chat-page .chat-voice-call-summary-meta-sub,
#chat-page .offline-mode-hint,
#chat-page .offline-mode-label,
#chat-page .emoji-empty,
#chat-page .chat-camera-hint {
    color: #627087 !important;
}

#chat-page .wallet-password-input,
#chat-page .wallet-amount-input,
#chat-page .post-moments-body textarea,
#chat-page .offline-mode-input,
#chat-page .emoji-search-input,
#chat-page .favorites-search-input {
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(100, 112, 136, 0.3) !important;
    color: #1f2430 !important;
    border-radius: 12px !important;
}

#chat-page .wallet-password-input:focus,
#chat-page .wallet-amount-input:focus,
#chat-page .post-moments-body textarea:focus,
#chat-page .offline-mode-input:focus,
#chat-page .emoji-search-input:focus,
#chat-page .favorites-search-input:focus {
    outline: none;
    border-color: rgba(123, 134, 166, 0.7) !important;
    box-shadow: 0 0 0 4px rgba(123, 134, 166, 0.12) !important;
}

#chat-page .moments-post-card,
#chat-page .moments-post-social-box,
#chat-page .moments-post-menu,
#chat-page .post-moments-modal-content,
#chat-page .moments-comment-modal-content,
#chat-page .wallet-modal-content,
#chat-page .chat-settings-modal,
#chat-page .emoji-panel,
#chat-page .emoji-picker,
#chat-page .chat-camera-shell,
#chat-page .chat-camera-panel,
#chat-page .music-search-content,
#chat-page .music-playlist-content,
#chat-page .world-book-select-modal-content,
#chat-page .add-world-book-modal-content {
    border-radius: 24px !important;
}

#chat-page .moments-post-menu,
#chat-page .music-search-list,
#chat-page .music-playlist-list,
#chat-page .wallet-bills-list,
#chat-page .favorites-list,
#chat-page .emoji-list,
#chat-page .emoji-category-list,
#chat-page .offline-mode-list,
#chat-page .moments-ins-scroll,
#chat-page .wallet-page-body,
#chat-page .wallet-bills-page-body,
#chat-page .favorites-page-body {
    scrollbar-width: none !important;
}

#chat-page .moments-post-menu::-webkit-scrollbar,
#chat-page .music-search-list::-webkit-scrollbar,
#chat-page .music-playlist-list::-webkit-scrollbar,
#chat-page .wallet-bills-list::-webkit-scrollbar,
#chat-page .favorites-list::-webkit-scrollbar,
#chat-page .emoji-list::-webkit-scrollbar,
#chat-page .emoji-category-list::-webkit-scrollbar,
#chat-page .offline-mode-list::-webkit-scrollbar,
#chat-page .moments-ins-scroll::-webkit-scrollbar,
#chat-page .wallet-page-body::-webkit-scrollbar,
#chat-page .wallet-bills-page-body::-webkit-scrollbar,
#chat-page .favorites-page-body::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

#chat-page .moments-page,
#chat-page .favorites-page,
#chat-page .wallet-page,
#chat-page .wallet-bills-page,
#chat-page .offline-mode-page {
    background:
        radial-gradient(circle at top left, rgba(154, 171, 211, 0.18), transparent 34%),
        radial-gradient(circle at top right, rgba(158, 142, 182, 0.16), transparent 30%),
        linear-gradient(180deg, #edf1f7 0%, #e3e8f1 100%) !important;
}

#chat-page .moments-post-menu-item:active {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* 话题方向模块 · 灰蓝磨砂玻璃美化 */
.group-settings-modal #group-topic-direction-section,
#group-topic-direction-modal .group-topic-direction-hint,
#group-topic-direction-modal #group-topic-direction-empty,
#group-topic-delete-confirm-modal .group-topic-delete-card {
    background: rgba(174, 188, 210, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow: 0 14px 36px rgba(77, 96, 128, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.group-settings-modal #group-topic-direction-section {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}

.group-settings-modal #group-topic-direction-section::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.06));
    pointer-events: none;
}

.group-settings-modal #group-topic-direction-display {
    position: relative;
    z-index: 1;
    max-width: 46%;
    color: #42546d !important;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-topic-direction-modal-content,
.group-topic-editor-modal-content,
.group-topic-delete-modal-content {
    background: rgba(189, 201, 221, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow: 0 22px 50px rgba(73, 91, 124, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.group-topic-modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
}

.group-topic-modal-header h3,
.group-topic-editor-body .friend-info-label,
.group-topic-delete-title,
.group-topic-row-title {
    color: #243247;
}

.group-topic-add-btn {
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: rgba(115, 136, 168, 0.22);
    color: #314561;
    border-radius: 12px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.group-topic-direction-body,
.group-topic-editor-body,
.group-topic-delete-body {
    padding: 14px 14px 16px;
}

.group-topic-direction-hint,
.group-topic-direction-empty,
.group-topic-delete-card {
    color: #52657f;
    border-radius: 18px;
}

.group-topic-direction-hint {
    margin: 0 0 12px;
    padding: 12px 14px;
    line-height: 1.55;
}

.group-topic-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.group-topic-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: stretch;
    gap: 10px;
    padding: 0;
}

.group-topic-row-main,
.group-topic-row-actions,
.group-topic-row-check,
.group-topic-name-input,
.group-topic-detail-input,
.group-topic-delete-card {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.group-topic-row-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 18px;
    background: rgba(174, 188, 210, 0.9);
    box-shadow: 0 12px 28px rgba(76, 95, 126, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.34);
    color: #243247;
    cursor: pointer;
    text-align: left;
}

.group-topic-row-detail {
    width: 100%;
    font-size: 12px;
    line-height: 1.45;
    color: #5f7088;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-topic-row-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.group-topic-row-action-btn {
    min-width: 54px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 14px;
    background: rgba(197, 208, 224, 0.9);
    color: #3d4e67;
    font-size: 12px;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.group-topic-row-action-btn--delete {
    color: #a14a58;
    background: rgba(216, 194, 201, 0.9);
}

.group-topic-row-check {
    width: 24px;
    min-width: 24px;
    align-self: center;
    justify-self: center;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.48);
    background: rgba(210, 219, 231, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
    position: relative;
}

.group-topic-row--active .group-topic-row-main {
    background: linear-gradient(135deg, rgba(190, 205, 227, 0.9), rgba(163, 181, 209, 0.9));
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 16px 32px rgba(61, 84, 120, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.group-topic-row--active .group-topic-row-title {
    color: #1d2e45;
}

.group-topic-row--active .group-topic-row-detail {
    color: #49617d;
}

.group-topic-row--active .group-topic-row-check::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: linear-gradient(180deg, #6e88ad, #4f6a92);
    box-shadow: 0 2px 8px rgba(79, 106, 146, 0.45);
}

.group-topic-editor-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.group-topic-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.group-topic-name-input,
.group-topic-detail-input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 16px;
    background: rgba(219, 226, 236, 0.9);
    color: #2b3a50;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.group-topic-name-input {
    padding: 12px 14px;
}

.group-topic-detail-input {
    min-height: 132px;
    padding: 14px;
    resize: none;
    line-height: 1.55;
}

.group-topic-name-input::placeholder,
.group-topic-detail-input::placeholder,
.group-topic-delete-text {
    color: #6d7e96;
}

.group-topic-name-input:focus,
.group-topic-detail-input:focus {
    outline: none;
    border-color: rgba(114, 138, 173, 0.62);
    box-shadow: 0 0 0 4px rgba(114, 138, 173, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.group-topic-editor-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.group-topic-editor-footer .forward-friends-cancel-btn,
.group-topic-editor-footer .forward-friends-send-btn {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.group-topic-editor-footer .forward-friends-cancel-btn {
    background: rgba(207, 216, 230, 0.9);
    color: #45576f;
}

.group-topic-editor-footer .forward-friends-send-btn {
    background: linear-gradient(135deg, rgba(125, 146, 177, 0.95), rgba(93, 117, 151, 0.95));
    color: #f4f8ff;
}

.group-topic-delete-body {
    padding-top: 18px;
}

.group-topic-delete-card {
    padding: 18px 16px;
}

.group-topic-delete-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.group-topic-delete-text {
    font-size: 13px;
    line-height: 1.55;
}

/* ========== 微信-设置页（我 → 设置） ========== */
.wechat-settings-page {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    flex-direction: column;
    background: #f2f2f2;
    z-index: 100;
    overflow: hidden;
}

.wechat-settings-page.show {
    display: flex;
}

/* 微信-聊天美化全屏页（自设置进入，类同设置页布局 + 侧滑） */
.wechat-chat-beautify-page {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    flex-direction: column;
    background: #f2f2f2;
    z-index: 106;
    /* 仅由内层 .wechat-settings-body 滚动，避免子树溢出撑高外层「我」内容区 */
    overflow: hidden;
    transform: translateX(104%);
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

.wechat-chat-beautify-page.show {
    display: flex;
    transform: translateX(0);
}

.wechat-settings-row--nav {
    cursor: pointer;
    align-items: center;
}

.wechat-settings-row--nav:active {
    background: rgba(0, 0, 0, 0.03);
}


.wechat-settings-row-actions--wrap {
    flex-wrap: wrap;
    gap: 8px;
}

.wechat-global-online-beautify-preview-wrap {
    margin: 10px 0 12px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    background: #fff;
}

.wechat-online-beautify--fake-chat-page {
    position: relative;
    display: flex;
    flex-direction: column;
    /* 明确覆盖误用 .page 时可能残留的 height:100%，避免预览块等于整页滚动区高度 */
    height: auto;
    min-height: 200px;
    max-height: 280px;
    font-size: 12px;
    --wechat-user-font-scale: 0.92;
}

.wechat-online-beautify-faux-status {
    flex-shrink: 0;
    padding: 3px 10px 2px;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wechat-online-beautify-faux-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 6px 8px;
    gap: 6px;
}

.wechat-online-beautify-faux-header h1 {
    font-size: 15px;
    margin: 0;
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wechat-online-beautify-faux-content {
    flex: 1;
    overflow: hidden;
    padding: 8px 10px 10px;
    min-height: 72px;
}

.wechat-online-beautify-faux-composer {
    flex-shrink: 0;
}

.wechat-online-beautify-faux-composer .chat-input-area {
    padding: 6px 8px 8px;
    gap: 6px;
}

.wechat-online-beautify-faux-btn {
    pointer-events: none;
    opacity: 0.95;
}

.wechat-settings-row--online-beautify-json {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.wechat-settings-row--online-beautify-json .wechat-settings-desc {
    margin-bottom: 10px;
}

.wechat-settings-row--online-beautify-json .wechat-bubble-css-textarea,
.chat-exclusive-beautify-card .wechat-bubble-css-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 136px;
    padding: 12px 13px;
    font-size: 12px;
    line-height: 1.5;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    border: 1px solid rgba(190, 196, 205, 0.9);
    border-radius: 10px;
    resize: vertical;
    background: rgba(255, 255, 255, 0.88);
    color: #222;
    box-shadow: inset 0 1px 2px rgba(20, 28, 40, 0.04);
}

.wechat-settings-row--online-beautify-json .wechat-bubble-css-textarea {
    margin: 0 0 8px;
}

.wechat-settings-row--online-beautify-json .wechat-bubble-css-textarea:focus,
.chat-exclusive-beautify-card .wechat-bubble-css-textarea:focus {
    outline: none;
    border-color: #07c160;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.12), inset 0 1px 2px rgba(20, 28, 40, 0.04);
}

.wechat-settings-row--online-beautify-json .wechat-settings-status {
    margin-bottom: 10px;
}

#chat-page .chat-fullscreen-glass .chat-exclusive-beautify-content > .chat-exclusive-beautify-body {
    padding: 12px 14px 20px;
}

.chat-exclusive-beautify-body .wechat-settings-intro {
    margin: 0 0 12px;
}

.chat-exclusive-beautify-hint {
    padding: 0 2px;
}

#chat-page .chat-exclusive-beautify-card,
.chat-exclusive-beautify-card {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(210, 216, 224, 0.9);
    box-shadow: 0 8px 24px rgba(42, 54, 76, 0.08);
}

#chat-page .chat-exclusive-beautify-card .chat-exclusive-beautify-section-head,
.chat-exclusive-beautify-card .chat-exclusive-beautify-section-head {
    display: flex;
    align-items: center;
    min-height: 0;
    margin: 0;
    padding: 15px 16px 10px;
    cursor: default;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

#chat-page .chat-exclusive-beautify-card .chat-exclusive-beautify-section-head:not(:first-child),
.chat-exclusive-beautify-card .chat-exclusive-beautify-section-head:not(:first-child) {
    border-top: 1px solid rgba(222, 226, 232, 0.9) !important;
}

#chat-page .chat-exclusive-beautify-card .chat-exclusive-beautify-section-head:hover,
.chat-exclusive-beautify-card .chat-exclusive-beautify-section-head:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.chat-exclusive-beautify-card .chat-settings-label {
    font-size: 15px;
    font-weight: 600;
    color: #1f2430;
}

.chat-exclusive-bg-block {
    padding: 0 16px 16px;
}

.chat-exclusive-bg-preview {
    min-height: 118px;
    border-radius: 10px;
    border: 1px dashed rgba(178, 185, 196, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    background: rgba(250, 251, 252, 0.9);
}

.chat-exclusive-bg-placeholder {
    font-size: 13px;
    color: #888;
    padding: 16px;
    text-align: center;
}

.chat-exclusive-bg-preview-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.chat-exclusive-bg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.chat-exclusive-beautify-card .wechat-bubble-css-textarea {
    width: calc(100% - 32px);
    margin: 0 16px 10px;
}

#chat-exclusive-bubble-css-textarea {
    min-height: 154px;
}

#chat-exclusive-beautify-json-textarea {
    min-height: 132px;
}

.chat-exclusive-beautify-card > .wechat-settings-desc {
    margin: 0 0 10px !important;
    padding: 0 16px !important;
    line-height: 1.5;
}

.chat-exclusive-row-actions {
    padding: 0 16px 16px;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;
}

.chat-exclusive-bg-actions .wechat-settings-btn,
.chat-exclusive-row-actions .wechat-settings-btn {
    min-height: 38px;
}

.wechat-settings-header {
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(100% - 5px);
    margin: 0 auto;
    min-height: 48px;
    padding: 12px 18.5px;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.wechat-settings-back {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.wechat-settings-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    max-width: 60%;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wechat-settings-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 14px 16px max(24px, env(safe-area-inset-bottom, 0px));
}

.wechat-settings-intro {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
    margin: 0 0 14px;
}

.wechat-settings-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.wechat-settings-row {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.wechat-settings-row:last-child {
    border-bottom: none;
}

.wechat-settings-row--inline-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wechat-settings-row--inline-toggle .wechat-settings-row-main {
    flex: 1;
    min-width: 0;
}

.wechat-settings-row--inline-toggle .wechat-settings-unread-toggle,
.wechat-settings-row--inline-toggle .toggle-switch {
    flex-shrink: 0;
}

.wechat-settings-row--bubble {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.wechat-settings-row--bubble .wechat-settings-label {
    margin-bottom: 4px;
}

.wechat-settings-row--bubble .wechat-settings-desc {
    margin-bottom: 10px;
}

.wechat-settings-row--bubble .wechat-settings-desc code {
    font-size: 11px;
    background: #f3f3f3;
    padding: 1px 4px;
    border-radius: 4px;
}

.wechat-settings-bubble-preview-block {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e8e8e8;
}

.wechat-settings-row--bubble .wechat-bubble-css-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 160px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.45;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    border: 1px solid #ddd;
    border-radius: 10px;
    resize: vertical;
    background: #fafafa;
    color: #222;
    margin-bottom: 8px;
}

.wechat-settings-row--bubble .wechat-bubble-css-textarea:focus {
    outline: none;
    border-color: #07c160;
    background: #fff;
}

.wechat-settings-label {
    font-size: 16px;
    font-weight: 600;
    color: #111;
    margin-bottom: 6px;
}

.wechat-settings-desc {
    font-size: 12px;
    color: #888;
    line-height: 1.45;
    margin-bottom: 8px;
}

.wechat-settings-status {
    font-size: 12px;
    color: #07c160;
}

.wechat-settings-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.wechat-settings-file {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.wechat-settings-btn {
    padding: 8px 14px;
    font-size: 14px;
    border: none;
    border-radius: 8px;
    background: #07c160;
    color: #fff;
    cursor: pointer;
}

.wechat-settings-btn.secondary {
    background: #f0f0f0;
    color: #333;
}

.wechat-settings-btn:active {
    opacity: 0.88;
}

.wechat-settings-preview-block {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #e8e8e8;
}

.wechat-settings-preview-caption {
    font-size: 11px;
    color: #999;
    margin-bottom: 8px;
}

.wechat-settings-bg-thumb {
    display: block;
    max-width: 100%;
    max-height: 132px;
    width: auto;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 聊天气泡预览：结构与聊天页一致，用户上传的 CSS 会同样作用在预览上 */
.wechat-settings-bubble-preview-host {
    background: #ededed;
    border-radius: 10px;
    padding: 10px 8px 12px;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.wechat-settings-bubble-preview-row {
    margin-bottom: 8px;
}

.wechat-settings-bubble-preview-row:last-child {
    margin-bottom: 0;
}

.wechat-settings-bubble-preview-host .chat-message-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex-shrink: 0;
}

.wechat-settings-bubble-preview-host .chat-message-bubble {
    font-size: 14px;
    pointer-events: none;
    cursor: default;
}

.wechat-settings-font-sample {
    font-size: calc(15px * var(--wechat-user-font-scale, 1));
    line-height: 1.65;
    padding: 12px 14px;
    background: linear-gradient(180deg, #fafafa 0%, #f3f3f3 100%);
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    color: #222;
}

html.wechat-global-font-on .wechat-settings-font-sample {
    font-family: 'WechatUserGlobalFont', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.wechat-settings-font-size-block {
    margin-top: 12px;
}

.wechat-settings-font-size-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.wechat-settings-font-size-slider {
    flex: 1;
    min-width: 0;
    height: 6px;
    border-radius: 999px;
    accent-color: #07c160;
    cursor: pointer;
}

.wechat-settings-font-size-value {
    flex-shrink: 0;
    min-width: 44px;
    text-align: right;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: #444;
}

.wechat-settings-text-input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.85);
    color: #111;
    font-size: 14px;
    outline: none;
}

.wechat-settings-text-input:focus {
    border-color: rgba(7, 193, 96, 0.55);
    box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.12);
}

/* 微信全局背景图：JS 写入 --wechat-global-bg-image 与各页行内底图（Blob URL）；本段用 !important 压过「冷淡玻璃 / 夜间实色底」 */
html.wechat-global-bg-on #wechat-page,
html.wechat-global-bg-on #wechat-me-page,
html.wechat-global-bg-on #wechat-discover-page,
html.wechat-global-bg-on #chat-page:not([data-wechat-exclusive-has-bg="1"]):not([data-wechat-exclusive-has-beautify-json="1"]):not(.chat-page--offline-mode) {
    background-color: transparent !important;
    background-image: var(--wechat-global-bg-image) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

html.wechat-global-bg-on #wechat-page .wechat-chat-list {
    background: rgba(250, 250, 250, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.wechat-global-bg-on #wechat-me-page .wechat-me-content,
html.wechat-global-bg-on #wechat-discover-page .discover-content {
    background: transparent !important;
}

/* 聊天页：让微信全局背景穿透（JS 已向 #chat-page 写入 background-image） */
html.wechat-global-bg-on #chat-page:not([data-wechat-exclusive-has-bg="1"]):not([data-wechat-exclusive-has-beautify-json="1"]):not(.chat-page--offline-mode) {
    background-color: transparent !important;
}

html.wechat-global-bg-on #chat-page .chat-content {
    background: transparent;
}

html.wechat-global-bg-on #chat-page .chat-header {
    background: rgba(247, 247, 247, 0.82) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#app.theme-global-font-on,
#app.theme-global-font-on button,
#app.theme-global-font-on input,
#app.theme-global-font-on textarea,
#app.theme-global-font-on select,
#theme-page.theme-global-font-on,
#theme-page.theme-global-font-on button,
#theme-page.theme-global-font-on input,
#theme-page.theme-global-font-on textarea,
#theme-page.theme-global-font-on select,
html.theme-global-font-on #twitter-page,
html.theme-global-font-on #twitter-page .tweet,
html.theme-global-font-on #twitter-page .tweet-text,
html.theme-global-font-on #twitter-page .tweet-name,
html.theme-global-font-on #twitter-page .tweet-handle,
html.theme-global-font-on #twitter-page .tweet-time,
html.theme-global-font-on #twitter-page .tweet-content,
html.theme-global-font-on #twitter-page .tweet-content-col,
html.theme-global-font-on #twitter-page .twitter-app-title,
html.theme-global-font-on #twitter-page .twitter-profile-name,
html.theme-global-font-on #twitter-page .twitter-profile-bio,
html.theme-global-font-on #twitter-page .twitter-detail-page,
html.theme-global-font-on #twitter-page .twitter-detail-content,
html.theme-global-font-on #twitter-page .twitter-messages-title,
html.theme-global-font-on #twitter-page .twitter-compose-textarea,
html.theme-global-font-on #twitter-page input,
html.theme-global-font-on #twitter-page textarea,
html.theme-global-font-on #twitter-page select,
html.theme-global-font-on #twitter-page button,
#app.theme-global-font-on #twitter-page,
#app.theme-global-font-on #twitter-page .tweet,
#app.theme-global-font-on #twitter-page .tweet-text,
#app.theme-global-font-on #twitter-page .tweet-name,
#app.theme-global-font-on #twitter-page .tweet-handle,
#app.theme-global-font-on #twitter-page .tweet-time,
#app.theme-global-font-on #twitter-page .tweet-content,
#app.theme-global-font-on #twitter-page .tweet-content-col,
#app.theme-global-font-on #twitter-page .twitter-app-title,
#app.theme-global-font-on #twitter-page .twitter-profile-name,
#app.theme-global-font-on #twitter-page .twitter-profile-bio,
#app.theme-global-font-on #twitter-page .twitter-detail-page,
#app.theme-global-font-on #twitter-page .twitter-detail-content,
#app.theme-global-font-on #twitter-page .twitter-messages-title,
#app.theme-global-font-on #twitter-page .twitter-compose-textarea,
#app.theme-global-font-on #twitter-page input,
#app.theme-global-font-on #twitter-page textarea,
#app.theme-global-font-on #twitter-page select,
#app.theme-global-font-on #twitter-page button {
    font-family: 'ThemeUserFont', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif !important;
}

html.theme-global-font-size-on #app,
html.theme-global-font-size-on #theme-page {
    font-size: calc(16px * var(--theme-user-font-scale, 1));
}

html.theme-global-font-size-on .function-name {
    font-size: clamp(8px, calc(10px * var(--theme-user-font-scale, 1)), 18px);
}

html.theme-global-font-size-on .nav-name {
    font-size: clamp(8px, calc(10px * var(--theme-user-font-scale, 1)), 18px);
}

html.theme-global-font-size-on .card-signature-line {
    font-size: clamp(11px, calc(14px * var(--theme-user-font-scale, 1)), 24px);
}

html.theme-global-font-size-on .card-location span {
    font-size: clamp(10px, calc(12px * var(--theme-user-font-scale, 1)), 20px);
}

html.theme-global-font-size-on .setting-label,
html.theme-global-font-size-on .model-name-row .setting-label {
    font-size: clamp(13px, calc(16px * var(--theme-user-font-scale, 1)), 24px);
}

html.theme-global-font-size-on .setting-select,
html.theme-global-font-size-on .setting-input,
html.theme-global-font-size-on .theme-text-input,
html.theme-global-font-size-on .theme-btn,
html.theme-global-font-size-on .theme-footer-btn {
    font-size: clamp(13px, calc(14px * var(--theme-user-font-scale, 1)), 22px);
}

html.theme-global-font-size-on .theme-section-title {
    font-size: clamp(14px, calc(16px * var(--theme-user-font-scale, 1)), 24px);
}

html.theme-global-font-size-on .theme-section-hint,
html.theme-global-font-size-on .theme-icon-label,
html.theme-global-font-size-on .theme-mini-link {
    font-size: clamp(10px, calc(12px * var(--theme-user-font-scale, 1)), 18px);
}

/* 微信板块字体（设置页上传）：仅作用于微信四个根页面及其子界面 */
html.wechat-global-font-on #wechat-page,
html.wechat-global-font-on #chat-page,
html.wechat-global-font-on #wechat-discover-page,
html.wechat-global-font-on #wechat-me-page {
    font-family: 'WechatUserGlobalFont', -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
}

/* 微信板块字号：与自定义字体独立，默认 100% */
#wechat-page,
#chat-page,
#wechat-discover-page,
#wechat-me-page {
    font-size: calc(1em * var(--wechat-user-font-scale, 1));
}

#chat-page .chat-message-bubble {
    font-size: calc(15px * var(--wechat-user-font-scale, 1));
}

#chat-page .chat-message-bubble--offline .chat-message-segment--narration {
    font-size: calc(14.5px * var(--wechat-user-font-scale, 1));
}

#chat-page .chat-message-bubble--offline .chat-message-segment--dialogue {
    font-size: calc(13.5px * var(--wechat-user-font-scale, 1));
}

.wechat-settings-bubble-preview-host .chat-message-bubble {
    font-size: calc(14px * var(--wechat-user-font-scale, 1));
}

.chat-bilingual-block {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    min-width: min(12em, 100%);
    white-space: normal;
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    -webkit-text-size-adjust: 100%;
    line-height: 1.45;
}

.chat-bilingual-original,
.chat-bilingual-translation {
    display: block;
}

.chat-bilingual-divider {
    display: block;
    width: 68%;
    max-width: 12em;
    width: min(68%, 12em);
    height: 1px;
    margin: 0.34em auto 0.32em;
    background: currentColor;
    opacity: 0.35;
}

.chat-bilingual-translation {
    font-size: 0.9em;
    line-height: 1.42;
    text-align: left;
    color: inherit;
    opacity: 0.82;
}

.chat-bilingual-block--grouped .chat-bilingual-original,
.chat-bilingual-block--grouped .chat-bilingual-translation {
    white-space: normal;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    word-wrap: break-word;
}

#chat-page .chat-message.my-message .chat-bilingual-divider {
    opacity: 0.35;
}

#chat-page .chat-message-bubble--offline .chat-bilingual-translation {
    color: inherit;
    opacity: 0.82;
}

html[data-appearance="dark"] .chat-bilingual-divider {
    opacity: 0.35;
}

html[data-appearance="dark"] .chat-bilingual-translation {
    color: inherit;
    opacity: 0.82;
}

/* 好友资金：红包 / 转账说明与按钮 */
.chat-transfer-note {
    position: relative;
    z-index: 1;
    font-size: 12px;
    color: #53627c;
    background: rgba(255, 255, 255, 0.44);
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 9px;
    padding: 6px 8px;
    margin: 2px 0 6px;
    line-height: 1.35;
}

.chat-transfer-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
    margin-top: 9px;
}

.chat-transfer-accept,
.chat-transfer-reject {
    flex: 1;
    padding: 8px 9px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
}

.chat-transfer-accept {
    background: linear-gradient(135deg, #5f8fd3 0%, #d267a1 100%);
    color: #fff;
    box-shadow: 0 6px 12px rgba(87, 125, 184, 0.18);
}

.chat-transfer-reject {
    background: rgba(255, 255, 255, 0.58);
    color: #4d5870;
    border-color: rgba(93, 115, 152, 0.16);
}

.chat-redpacket-bubble {
    min-width: 200px;
    padding: 12px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, #fa9d3b 0%, #f56c6c 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.chat-redpacket-bubble.transfer-pending[data-rp-ts] {
    cursor: pointer;
}

.chat-redpacket-bubble.transfer-received {
    background: linear-gradient(145deg, rgba(200, 110, 60, 0.7) 0%, rgba(160, 72, 72, 0.76) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.chat-redpacket-bubble.transfer-received .chat-redpacket-label,
.chat-redpacket-bubble.transfer-received .chat-redpacket-amount {
    opacity: 0.92;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.chat-redpacket-cover-image-wrap {
    position: absolute;
    inset: 0;
}

.chat-redpacket-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-redpacket-cover-image-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.28) 100%);
}

.chat-redpacket-content {
    position: relative;
    z-index: 1;
}

.chat-redpacket-received-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.chat-redpacket-received-icon {
    flex-shrink: 0;
    opacity: 0.95;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
.chat-redpacket-received-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}
.chat-redpacket-received-col .chat-redpacket-status {
    margin-top: 4px;
}

.chat-redpacket-label {
    font-size: 12px;
    opacity: 0.95;
    margin-bottom: 6px;
}

.chat-redpacket-type {
    font-size: 11px;
    opacity: 0.85;
    margin-bottom: 6px;
}

.chat-redpacket-cover {
    font-size: 13px;
    margin-bottom: 8px;
    opacity: 0.95;
    line-height: 1.5;
}

.chat-redpacket-amount {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.chat-redpacket-amount--sealed {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.chat-redpacket-status {
    font-size: 12px;
    margin-top: 8px;
    opacity: 0.9;
}

.chat-redpacket-open-btn {
    margin-top: 10px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    color: #f56c6c;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: block;
}

/* 聊天拍摄：前置摄像头 + 相框（Ins 米灰调） */
.chat-camera-modal {
    z-index: 1100;
    background-color: rgba(31, 27, 45, 0.5);
    backdrop-filter: blur(12px);
}

.chat-camera-modal-inner {
    width: min(92vw, 392px);
    max-height: 90vh;
    background:
        linear-gradient(180deg, rgba(130, 121, 160, 0.32) 0%, rgba(87, 81, 115, 0.24) 100%),
        rgba(244, 240, 252, 0.24);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(31, 24, 52, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.chat-camera-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
}

.chat-camera-title {
    font-size: 16px;
    font-weight: 600;
    color: #f5f1ff;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 6px rgba(27, 20, 47, 0.2);
}

.chat-camera-header-spacer {
    width: 36px;
}

.chat-camera-stage {
    padding: 16px 12px 10px;
}

.chat-camera-frame-wrap {
    position: relative;
    width: 100%;
    max-width: 342px;
    margin: 0 auto;
    /* 3:4 竖屏取景，与常见前置预览一致；不再依赖 logo 切图比例 */
    aspect-ratio: 3 / 4;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.chat-camera-video-shell {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    background: #000;
    z-index: 1;
}

.chat-camera-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
    min-height: 0;
}

.chat-camera-video.chat-camera-mirror {
    transform: scaleX(-1);
}

.chat-camera-hint {
    margin-top: 14px;
    text-align: center;
    font-size: 12px;
    color: rgba(241, 236, 255, 0.74);
    line-height: 1.5;
}

.chat-camera-actions {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 14px 16px 20px;
}

.chat-camera-shutter-row {
    display: contents;
}

.chat-camera-btn {
    border: 1px solid rgba(255, 255, 255, 0.16);
    cursor: pointer;
    font-size: 15px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    color: #f5f1ff;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 24px rgba(36, 29, 59, 0.16);
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

.chat-camera-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 26px rgba(36, 29, 59, 0.2);
}

.chat-camera-btn-cancel,
.chat-camera-btn-flip {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 11px 16px;
    flex-shrink: 0;
}

.chat-camera-btn-cancel {
    justify-self: start;
}

.chat-camera-btn-flip {
    justify-self: end;
}

.chat-camera-btn-cancel:active,
.chat-camera-btn-flip:active,
.chat-camera-btn-shutter:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.18);
}

.chat-camera-btn-shutter {
    justify-self: center;
    width: 72px;
    height: 72px;
    border-radius: 24px;
    font-size: 0;
    color: transparent;
    position: relative;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.18) 32%, rgba(187, 176, 214, 0.22) 100%),
        rgba(255, 255, 255, 0.14);
}

.chat-camera-btn-shutter::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1.5px solid rgba(245, 241, 255, 0.9);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.chat-camera-flip-svg {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    pointer-events: none;
}

.chat-media-choice-modal {
    z-index: 1102;
    align-items: flex-end;
    background: rgba(0, 0, 0, 0.28);
    padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
}

.chat-media-choice-modal.show {
    display: flex;
}

.chat-media-choice-sheet {
    width: min(100%, 420px);
    margin: 0 auto;
    padding: 8px 0;
    border-radius: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}

.chat-media-choice-option {
    display: block;
    width: 100%;
    min-height: 52px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 0;
    background: transparent;
    color: #111;
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.chat-media-choice-option:active {
    background: rgba(0, 0, 0, 0.06);
}

.chat-media-choice-cancel {
    margin-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    border-bottom: 0;
    color: #666;
}

.chat-camera-preview-modal {
    z-index: 1101;
    background: rgba(31, 27, 45, 0.52);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.chat-camera-preview-inner {
    width: min(92vw, 392px);
    background:
        linear-gradient(180deg, rgba(130, 121, 160, 0.32) 0%, rgba(87, 81, 115, 0.24) 100%),
        rgba(244, 240, 252, 0.24);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 22px 50px rgba(31, 24, 52, 0.26);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    overflow: hidden;
}

.chat-camera-preview-header {
    display: grid;
    grid-template-columns: 88px 1fr 88px;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
}

.chat-camera-preview-title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #f5f1ff;
}

.chat-camera-preview-stage {
    padding: 16px 14px 18px;
}

.chat-camera-preview-frame {
    overflow: hidden;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.chat-camera-preview-image {
    display: block;
    width: 100%;
    aspect-ratio: 1648 / 1875;
    object-fit: cover;
}

.chat-camera-preview-btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(214, 206, 230, 0.9);
    color: #544d6b;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 18px rgba(52, 43, 82, 0.12);
}

.chat-camera-preview-btn-primary {
    justify-self: end;
}

/* 合并转发卡片：蓝灰折叠样式 */
.chat-message-bubble--merged-forward {
    max-width: 248px;
    padding: 0 !important;
    overflow: visible;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.chat-merged-forward-card {
    width: 100%;
    border: 1px solid rgba(150, 166, 186, 0.34);
    border-radius: 18px;
    padding: 12px;
    text-align: left;
    background: linear-gradient(180deg, rgba(235, 241, 247, 0.98) 0%, rgba(219, 228, 238, 0.98) 100%);
    color: #263340;
    box-shadow: 0 8px 20px rgba(95, 113, 132, 0.16);
}

.chat-merged-forward-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.chat-merged-forward-kicker {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #728092;
}

.chat-merged-forward-count {
    font-size: 11px;
    color: #627184;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
}

.chat-merged-forward-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2b38;
    margin-bottom: 4px;
    line-height: 1.3;
}

.chat-merged-forward-summary {
    font-size: 12px;
    color: #647386;
    margin-bottom: 10px;
    line-height: 1.45;
}

.chat-merged-forward-preview {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 10px;
}

.chat-merged-forward-item {
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(178, 190, 205, 0.26);
}

.chat-merged-forward-item-sender {
    font-size: 11px;
    font-weight: 700;
    color: #556477;
    margin-bottom: 4px;
}

.chat-merged-forward-item-content {
    font-size: 12px;
    color: #2b3a48;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.chat-merged-forward-expand {
    font-size: 12px;
    color: #5f7084;
    text-align: center;
    padding-top: 2px;
}

.chat-merged-forward-modal {
    z-index: 1400;
}

.chat-merged-forward-content {
    width: min(360px, 90vw);
    max-height: min(85vh, 560px);
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
}

.chat-merged-forward-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-merged-forward-close {
    border: none;
    background: transparent;
    color: #6a7889;
    font-size: 24px;
    line-height: 1;
}

.chat-merged-forward-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 14px 0;
    -webkit-overflow-scrolling: touch;
}

/* 弹层内展示全文：取消卡片预览用的两行截断 */
.chat-merged-forward-modal .chat-merged-forward-list .chat-merged-forward-item-content {
    display: block;
    -webkit-box-orient: unset;
    -webkit-line-clamp: unset;
    overflow: visible;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.chat-merged-forward-empty {
    font-size: 13px;
    color: #7c8998;
    text-align: center;
    padding: 18px 0;
}

/* 好友设置：台词语言选择 */
.char-dialogue-lang-modal .modal-body.char-dialogue-lang-body {
    padding: 12px 16px 20px;
    max-height: min(72vh, 520px);
    overflow: auto;
    /* 隐藏滚动条 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.char-dialogue-lang-modal .modal-body.char-dialogue-lang-body::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

.char-dialogue-lang-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.char-dialogue-lang-option {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    background: #fafafa;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    color: #222;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.char-dialogue-lang-option:hover {
    background: #f0f9f4;
    border-color: #07c160;
}

.char-dialogue-lang-option.is-selected {
    background: rgba(7, 193, 96, 0.12);
    border-color: #07c160;
    font-weight: 600;
}

/* 夜间：覆盖「推/信统一玻璃风」大段中强制浅色行的 !important（须置于文件后段以胜出） */
html[data-appearance="dark"] #wechat-page .wechat-chat-item {
    background: rgba(40, 40, 44, 0.96) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-appearance="dark"] #wechat-page .wechat-chat-item:hover {
    background: rgba(55, 55, 60, 0.98) !important;
}

html[data-appearance="dark"] #wechat-me-page .wechat-me-function-item,
html[data-appearance="dark"] #wechat-discover-page .wechat-settings-row {
    background: rgba(36, 36, 40, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f5f5f7 !important;
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.07),
        0 0 18px rgba(100, 140, 255, 0.1) !important;
}

html[data-appearance="dark"] #wechat-me-page .wechat-me-function-item:hover,
html[data-appearance="dark"] #wechat-page .wechat-add-menu-item:hover,
html[data-appearance="dark"] #wechat-page .wechat-chat-group-option:hover {
    background: rgba(68, 68, 74, 0.45) !important;
}

html[data-appearance="dark"] #wechat-discover-page .wechat-settings-page,
html[data-appearance="dark"] #wechat-discover-page .wechat-memory-library-page,
html[data-appearance="dark"] #wechat-discover-page .wechat-memory-space-page {
    background: linear-gradient(180deg, rgba(14, 14, 16, 0.98), rgba(20, 20, 24, 0.98)) !important;
}

/* 夜间：覆盖约 25788 行「贴边实色 #ededed / 底栏 #f7f7f7」规则 */
html[data-appearance="dark"] #wechat-page,
html[data-appearance="dark"] #wechat-me-page,
html[data-appearance="dark"] #wechat-discover-page {
    background: #0c0c0e !important;
    background-image: none !important;
    color: #f5f5f7;
}

html[data-appearance="dark"] #wechat-page > .status-bar,
html[data-appearance="dark"] #wechat-me-page > .status-bar,
html[data-appearance="dark"] #wechat-discover-page > .status-bar {
    background: #121214 !important;
    color: #f5f5f7 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-appearance="dark"] #wechat-page > .status-bar .status-left,
html[data-appearance="dark"] #wechat-me-page > .status-bar .status-left,
html[data-appearance="dark"] #wechat-discover-page > .status-bar .status-left,
html[data-appearance="dark"] #wechat-page > .status-bar .status-icon-svg,
html[data-appearance="dark"] #wechat-me-page > .status-bar .status-icon-svg,
html[data-appearance="dark"] #wechat-discover-page > .status-bar .status-icon-svg {
    color: rgba(245, 245, 250, 0.92) !important;
}

html[data-appearance="dark"] #wechat-page .wechat-header,
html[data-appearance="dark"] #wechat-me-page .wechat-me-header,
html[data-appearance="dark"] #wechat-discover-page .wechat-me-header {
    background: #1a1a1d !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f5f5f7 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-appearance="dark"] #wechat-page .wechat-header h1,
html[data-appearance="dark"] #wechat-me-page .wechat-me-header h1,
html[data-appearance="dark"] #wechat-discover-page .wechat-me-header h1,
html[data-appearance="dark"] #wechat-discover-page .wechat-header h1 {
    color: #f5f5f7 !important;
}

html[data-appearance="dark"] #wechat-page .wechat-bottom-nav,
html[data-appearance="dark"] #wechat-me-page .wechat-bottom-nav,
html[data-appearance="dark"] #wechat-discover-page .wechat-bottom-nav {
    background: #141416 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 -1px 24px rgba(100, 140, 255, 0.1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 夜间：液态玻璃皮肤在顶栏/底栏顶部加了一条 rgba(255,255,255,0.86) 白色高光线（::after），
 * 暗底下会变成奇怪的亮边，夜间一律隐藏。 */
html[data-appearance="dark"] #wechat-page .wechat-header::after,
html[data-appearance="dark"] #wechat-me-page .wechat-me-header::after,
html[data-appearance="dark"] #wechat-discover-page .wechat-me-header::after,
html[data-appearance="dark"] #wechat-page .wechat-bottom-nav::after,
html[data-appearance="dark"] #wechat-discover-page .wechat-bottom-nav::after,
html[data-appearance="dark"] #wechat-me-page .wechat-bottom-nav::after {
    display: none !important;
}

/* 夜间“亮色横带”根因：设了微信全局背景图时，wechat-settings-theme.js 会给 #wechat-page/#wechat-me-page
 * 等写内联 !important 背景（background-image + background-color:transparent）。内联 !important 会压过样式表里
 * 的夜间深色背景，于是页面底层其实是这张（多为浅色的）全局图；中段被不透明深色内容盖住，只在顶栏/底栏外边距
 * 缝隙处露出，形成顶部/底部的亮带。
 * 该 ::before 位于「元素背景之上、子内容之下」（z-index:0，子元素 z-index:1）。夜间把它改成一层不透明深色，
 * 即可盖住内联全局图，让缝隙回到纯深色，同时顶栏/底栏/列表等子内容照常浮在其上。 */
html[data-appearance="dark"] #wechat-page::before,
html[data-appearance="dark"] #wechat-me-page::before,
html[data-appearance="dark"] #wechat-discover-page::before {
    display: block !important;
    inset: 0 !important;
    background: #0c0c0e !important;
    opacity: 1 !important;
    animation: none !important;
    z-index: 0 !important;
}

html[data-appearance="dark"] #wechat-page .wechat-nav-text,
html[data-appearance="dark"] #wechat-me-page .wechat-nav-text,
html[data-appearance="dark"] #wechat-discover-page .wechat-nav-text {
    color: rgba(245, 245, 250, 0.78) !important;
}

html[data-appearance="dark"] #wechat-page .wechat-nav-item.active .wechat-nav-text,
html[data-appearance="dark"] #wechat-me-page .wechat-nav-item.active .wechat-nav-text,
html[data-appearance="dark"] #wechat-discover-page .wechat-nav-item.active .wechat-nav-text {
    color: #e8e8ed !important;
}

html[data-appearance="dark"] #wechat-page .wechat-chat-list,
html[data-appearance="dark"] #wechat-me-page .wechat-me-content,
html[data-appearance="dark"] #wechat-discover-page .discover-content {
    background: #0c0c0e !important;
}

html[data-appearance="dark"] #wechat-me-page .wechat-me-profile,
html[data-appearance="dark"] #wechat-me-page .wechat-me-functions,
html[data-appearance="dark"] #wechat-me-page .wechat-me-function-item,
html[data-appearance="dark"] #wechat-discover-page .wechat-settings-card {
    background: rgba(32, 32, 36, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f5f5f7 !important;
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.07),
        0 0 24px rgba(100, 140, 255, 0.12) !important;
}

html[data-appearance="dark"] #wechat-me-page .wechat-me-name,
html[data-appearance="dark"] #wechat-me-page .wechat-me-id {
    color: #f0f0f5 !important;
}

html[data-appearance="dark"] .wechat-memory-library-page,
html[data-appearance="dark"] .wechat-memory-space-page {
    background: #0c0c0e !important;
}

/* ===== 余额页 / 银行卡 / 充提选卡 ===== */
.wallet-balance-card--clickable { cursor: pointer; position: relative; }
.wallet-balance-arrow {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    font-size: 22px; color: rgba(255,255,255,0.7);
}
.wallet-balance-actions {
    display: flex; gap: 12px; margin: 16px 0;
}
.wallet-action-btn {
    flex: 1; padding: 12px 0; border: none; border-radius: 12px;
    background: #07c160; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
}
.wallet-action-btn--secondary {
    background: #fff; color: #07c160; border: 1.5px solid #07c160;
}
.wallet-menu-arrow { margin-left: auto; color: #bbb; font-size: 18px; }

/* 银行卡列表 */
#wallet-bankcard-page .bankcard-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 2px;
}

#wallet-bankcard-page .bankcard-item {
    min-height: 204px;
    aspect-ratio: 1.586 / 1;
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    color: #f8fbff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    background:
        radial-gradient(circle at 10% 12%, rgba(255, 255, 255, 0.32) 0, rgba(255, 255, 255, 0) 30%),
        radial-gradient(circle at 88% 8%, rgba(185, 174, 220, 0.42) 0, rgba(185, 174, 220, 0) 34%),
        radial-gradient(circle at 84% 86%, rgba(117, 146, 190, 0.36) 0, rgba(117, 146, 190, 0) 38%),
        linear-gradient(135deg, #596f9c 0%, #7475ad 48%, #8d8db8 100%);
    box-shadow:
        0 18px 34px rgba(67, 77, 118, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -1px 0 rgba(37, 45, 78, 0.2);
}

/* 银行卡背景装饰 */
#wallet-bankcard-page .bankcard-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.48;
    background:
        linear-gradient(116deg, transparent 0 24%, rgba(255, 255, 255, 0.16) 25%, transparent 27% 100%),
        repeating-linear-gradient(142deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(28deg, rgba(42, 53, 92, 0.14) 0 1px, transparent 1px 18px);
}

#wallet-bankcard-page .bankcard-item::after {
    content: '';
    position: absolute;
    right: -54px;
    bottom: -56px;
    width: 178px;
    height: 178px;
    z-index: -1;
    border-radius: 50%;
    background:
        conic-gradient(from 28deg, rgba(255, 255, 255, 0.38), rgba(139, 154, 214, 0.18), rgba(211, 203, 234, 0.4), rgba(255, 255, 255, 0.2)),
        radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 62%);
    opacity: 0.42;
}

#wallet-bankcard-page .bankcard-sheen {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(102deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.08) 18%, transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 38%);
    opacity: 0.62;
}

#wallet-bankcard-page .bankcard-top {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

/* 芯片 */
#wallet-bankcard-page .bankcard-chip {
    width: 56px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, transparent 31%, rgba(92, 76, 54, 0.34) 32% 33%, transparent 34% 66%, rgba(92, 76, 54, 0.28) 67% 68%, transparent 69%),
        linear-gradient(180deg, transparent 31%, rgba(92, 76, 54, 0.28) 32% 33%, transparent 34% 66%, rgba(92, 76, 54, 0.24) 67% 68%, transparent 69%),
        url('love-mi-logo.png') center / 35px 35px no-repeat,
        linear-gradient(135deg, #e9d9bc 0%, #c9b185 46%, #efe0bd 100%);
    box-shadow:
        inset 0 0 0 1px rgba(89, 75, 50, 0.28),
        inset 0 8px 16px rgba(255, 255, 255, 0.2),
        0 8px 16px rgba(38, 45, 76, 0.2);
}

#wallet-bankcard-page .bankcard-chip::before {
    content: '';
    position: absolute;
    inset: 7px 9px;
    border: 1px solid rgba(87, 71, 48, 0.34);
    border-radius: 6px;
}

#wallet-bankcard-page .bankcard-chip-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    opacity: 0.3;
    filter: grayscale(1) sepia(0.25) contrast(1.2) brightness(0.62);
    mix-blend-mode: multiply;
}

#wallet-bankcard-page .bankcard-issuer {
    min-width: 0;
}

/* 银行名称 */
#wallet-bankcard-page .bankcard-bank-name {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(34, 42, 73, 0.32);
}

#wallet-bankcard-page .bankcard-card-type {
    margin-top: 5px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.5px;
    color: rgba(244, 248, 255, 0.66);
}

#wallet-bankcard-page .bankcard-contactless {
    width: 28px;
    height: 32px;
    position: relative;
    justify-self: end;
    opacity: 0.74;
}

#wallet-bankcard-page .bankcard-contactless span {
    position: absolute;
    top: 50%;
    left: 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-left: 0;
    border-bottom-color: transparent;
    border-top-color: transparent;
    transform: translateY(-50%);
}

#wallet-bankcard-page .bankcard-contactless span:nth-child(1) {
    width: 7px;
    height: 12px;
    border-radius: 0 12px 12px 0;
}

#wallet-bankcard-page .bankcard-contactless span:nth-child(2) {
    width: 14px;
    height: 20px;
    border-radius: 0 20px 20px 0;
}

#wallet-bankcard-page .bankcard-contactless span:nth-child(3) {
    width: 22px;
    height: 28px;
    border-radius: 0 28px 28px 0;
}

/* 卡号 */
#wallet-bankcard-page .bankcard-number {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.92);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28),
        0 3px 10px rgba(28, 35, 70, 0.26);
}

#wallet-bankcard-page .bankcard-number-dots {
    opacity: 0.7;
    word-spacing: 4px;
}

#wallet-bankcard-page .bankcard-number-last4 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #fff;
}

/* 底部信息 */
#wallet-bankcard-page .bankcard-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    position: relative;
    z-index: 1;
}

#wallet-bankcard-page .bankcard-holder,
#wallet-bankcard-page .bankcard-valid {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

#wallet-bankcard-page .bankcard-valid {
    text-align: right;
}

#wallet-bankcard-page .bankcard-holder span,
#wallet-bankcard-page .bankcard-valid span {
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.3px;
    color: rgba(238, 243, 255, 0.62);
}

#wallet-bankcard-page .bankcard-holder strong,
#wallet-bankcard-page .bankcard-valid strong {
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.9);
}

#wallet-bankcard-page .bankcard-brand {
    position: absolute;
    right: 18px;
    top: 78px;
    z-index: 0;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.26);
    pointer-events: none;
}

@media (max-width: 380px) {
    #wallet-bankcard-page .bankcard-item {
        min-height: 188px;
        padding: 16px 17px 15px;
    }

    #wallet-bankcard-page .bankcard-top {
        grid-template-columns: 54px minmax(0, 1fr) 24px;
        gap: 10px;
    }

    #wallet-bankcard-page .bankcard-chip {
        width: 50px;
        height: 38px;
    }

    #wallet-bankcard-page .bankcard-bank-name {
        font-size: 18px;
    }

    #wallet-bankcard-page .bankcard-number {
        gap: 8px;
        font-size: 18px;
        letter-spacing: 1.5px;
        margin-bottom: 17px;
    }

    #wallet-bankcard-page .bankcard-number-dots {
        word-spacing: 3px;
    }

    #wallet-bankcard-page .bankcard-number-last4 {
        font-size: 20px;
        letter-spacing: 2.4px;
    }
}

/* 旧样式保留（用于其他地方） */
.bankcard-bank { font-size: 15px; font-weight: 600; }
.bankcard-num { font-size: 13px; opacity: 0.8; }

/* 模态框银行卡选择 */
.modal-card-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.modal-card-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-radius: 10px;
    background: #f5f5f5; cursor: pointer;
}
.modal-card-item:active { background: #e8e8e8; }
.modal-card-bank { font-size: 14px; font-weight: 600; color: #333; }
.modal-card-num { font-size: 13px; color: #888; }
.modal-add-card-btn {
    margin-top: 10px; padding: 12px; text-align: center;
    border-radius: 10px; background: #07c160; color: #fff;
    font-size: 15px; cursor: pointer;
}

/* 发卡行列表 */
.bank-list { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; }
.bank-item {
    padding: 13px 16px; font-size: 15px; color: #333;
    border-bottom: 1px solid #f0f0f0; cursor: pointer;
}
.bank-item:last-child { border-bottom: none; }
.bank-item:active { background: #f5f5f5; }

/* ============================================================
   多人群组 · 线下聊天模式 — 水彩画风系统预设
   作用域：仅 #chat-page.chat-page--offline-group
   ------------------------------------------------------------
   · 整体配色：暖纸张底 + 柔和水彩渐变，文字深蓝灰保证可读性
   · 顶部封面卡片：保持原尺寸与按钮布局，改为半透明水彩渗色
   · 消息模式：保留每条 User / Char 消息拆分气泡
   · 长文模式：User 正文不显示气泡包裹，Char 正文完整包在一个气泡里
   · 仅做视觉美化，不影响按钮布局与运行逻辑
   ============================================================ */

/* ---- 主题变量 ---- */
#chat-page.chat-page--offline-group {
    --offgrp-paper:        #faf8f5;
    --offgrp-paper-soft:   rgba(255, 252, 247, 0.86);
    --offgrp-paper-deep:   rgba(232, 168, 124, 0.24);
    --offgrp-ink:          #25364a;
    --offgrp-ink-mid:      rgba(37, 54, 74, 0.78);
    --offgrp-ink-soft:     rgba(37, 54, 74, 0.48);
    --offgrp-primary:      #4a6fa5;
    --offgrp-accent-peach: #e8a87c;
    --offgrp-accent-teal:  #85cdca;
    --offgrp-accent-rose:  #c38d94;
    --offgrp-accent-sand:  #d4a373;
    --offgrp-stroke:       rgba(74, 111, 165, 0.16);
    --offgrp-stroke-strong:rgba(195, 141, 148, 0.24);
    --offgrp-card-shadow:  0 12px 30px rgba(74, 111, 165, 0.12), 0 2px 8px rgba(212, 163, 115, 0.10);
    --offgrp-bubble-shadow:0 8px 20px rgba(74, 111, 165, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.58);
    background-color: var(--offgrp-paper) !important;
    background-image:
        radial-gradient(circle at 16% 9%, rgba(232, 168, 124, 0.26), transparent 31%),
        radial-gradient(circle at 88% 18%, rgba(133, 205, 202, 0.24), transparent 34%),
        radial-gradient(circle at 58% 88%, rgba(195, 141, 148, 0.18), transparent 38%),
        linear-gradient(180deg, #faf8f5 0%, #f7f0eb 52%, #faf8f5 100%) !important;
    background-size: 140% 140%, 150% 150%, 160% 160%, auto !important;
    color: var(--offgrp-ink);
}

/* ---- 顶部封面卡（不可折叠，常驻展开态） ----
       不用 aspect-ratio（在 #chat-page flex 列里部分浏览器算不出预期高度），改用 clamp 与 vw
       把高度直接锁在「图原始 312/1024 ≈ 30.47% 比例」附近的合理区间。
       cover 兜底铺满，图本身不会留任何黑边。
       选择器用 .chat-page--offline-mode.chat-page--offline-group 双类提升特异性，确保覆盖
       上游 .chat-page--offline-mode .chat-header.chat-header--expanded 的 !important 白底。 */
#chat-page.chat-page--offline-mode.chat-page--offline-group.chat-page--offline-beautified .chat-header,
#chat-page.chat-page--offline-mode.chat-page--offline-group.chat-page--offline-beautified .chat-header.chat-header--expanded {
    /* 横向占满屏幕内容区（不再 calc(100% - 20px)），避免出现两侧露底被看成「丑黑边」。 */
    width: 100% !important;
    max-width: none !important;
    margin: 10px 0 0 !important;
    box-sizing: border-box;
    padding: 0 12px !important;
    /* 高度锁定：clamp 保证主流手机宽度下接近图原始比例观感 */
    min-height: 110px !important;
    height: clamp(110px, 30vw, 150px) !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 24px;
    box-shadow: var(--offgrp-card-shadow);
    cursor: default !important;
    touch-action: auto;
    user-select: none;
    /* ❌ 不可用 overflow:hidden：会把 <details> 心跳下拉面整块裁掉，看起来像「被气泡挡住」；
       ✅ 必须用 visible；圆角裁剪仅交给下层 ::before。 */
    overflow: visible !important;
    position: relative;
    isolation: isolate;
    /* 保证整块顶栏叠在 .chat-main-stack 之上（含下拉露出区域） */
    z-index: 400;
}

/* 封面图层：用多层渐变模拟水彩在纸张上渗透 */
#chat-page.chat-page--offline-mode.chat-page--offline-group.chat-page--offline-beautified .chat-header::before {
    content: '' !important;
    display: block !important;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
    background-color: #faf8f5;
    background-image:
        radial-gradient(circle at 18% 26%, rgba(232, 168, 124, 0.58), transparent 34%),
        radial-gradient(circle at 80% 28%, rgba(133, 205, 202, 0.52), transparent 36%),
        radial-gradient(circle at 58% 74%, rgba(195, 141, 148, 0.38), transparent 40%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.84) 0%, rgba(250, 248, 245, 0.66) 48%, rgba(212, 163, 115, 0.18) 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 130% 130%, 132% 132%, 150% 150%, auto;
    overflow: hidden;
}

/* 若没有 ::before 兜底则保持无伪元素遗留 */
#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header::after {
    display: none !important;
    content: none !important;
}

/* 顶栏控件须叠在 ::before 封面层之上。.back-btn 基类仍为 absolute，
   在线下群组专用规则中对齐清零 top/left/transform，配合 relative+z-index，避免再掉出卡片。*/

#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header > * {
    position: relative;
    z-index: 1;
}

/* ---- 群组分支：所有头部控件常显（覆盖私聊线下的折叠态隐藏规则） ---- */
#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header .back-btn,
#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header .chat-header-buttons,
#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header .chat-heartbeat-monitor {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ---- 返回键 / 更多按钮：奶油浅底胶囊 + 山岩深色图标 ----
       封面图本身有亮区（沙色）+ 暗区（山岩）；按钮直接落图上时图标在亮区会几乎透明、在暗区
       又被压得发灰。给它们一个奶油浅胶囊作背景，无论按钮落在图哪一段都清晰可读。
       —— 心跳监控按用户要求保留「无底层」，下方 .chat-heartbeat-monitor-summary 单独处理。 */
#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header .back-btn {
    /* 防御性重置：对抗 .back-btn 基类（line 11767）的 absolute + top:50% + left:16px + transform，
       不重置死的话，返回键会被推到卡外、和聊天设置脱离同一水平线。 */
    /* 必须为 relative（非 static）：叠在封面 ::before 之上，且顶住 .back-btn 基类的 absolute，
       top/left/transform 必须用下面几行清零。 */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    align-self: center !important;
    order: 1;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    color: var(--offgrp-primary) !important;
    background: rgba(255, 252, 247, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 8px 18px rgba(74, 111, 165, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(8px) saturate(1.05);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    filter: none !important;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 返回键里的 SVG 图标本身 stroke 是深灰 #222；放在奶油底胶囊上能清晰可见 */
#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header .back-btn .chat-back-icon,
#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header .back-btn img,
#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header .back-btn svg {
    width: 24px !important;
    height: 24px !important;
    filter: none !important;
    opacity: 1 !important;
}

#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header .chat-header-buttons {
    order: 4;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    width: auto;
    min-width: 0;
    height: auto;
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header .chat-header-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    color: var(--offgrp-primary) !important;
    background: rgba(255, 252, 247, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 8px 18px rgba(74, 111, 165, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(8px) saturate(1.05);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    filter: none !important;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header .chat-header-btn .chat-header-settings-icon,
#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header .chat-header-btn svg,
#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header .chat-header-btn img {
    width: 22px !important;
    height: 22px !important;
    filter: none !important;
    opacity: 1 !important;
}

/* ---- 标题簇：透明落在水彩封面上，深色文字确保浅底可读 ---- */
#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header-title-cluster {
    flex: 1;
    order: 2;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    cursor: default !important;
}

#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header-title-cluster h1 {
    order: 0;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 17px !important;
    font-weight: 700;
    line-height: 1.2;
    color: #27415d !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.82),
        0 6px 18px rgba(74, 111, 165, 0.20);
    letter-spacing: 0.02em;
}

#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header-title-cluster h1::before {
    content: none !important;
}

#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header-title-cluster .chat-header-subtitle,
#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header-title-cluster .chat-header-status,
#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-header-title-cluster small {
    color: rgba(39, 65, 93, 0.78) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76);
}

/* ---- 心跳监控：直接放在图上，不再加底层胶囊 ---- */
#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-heartbeat-monitor {
    order: 3;
    /* 须保持 static：若 <details> 为 position:relative，其内 .chat-heartbeat-monitor-panel（absolute）
       的百分比宽度会以心形槽位宽度（约 36px）为基准，面板会塌成一条竖条盖住消息区。
       叠层由 flex 子项的 z-index + 标题簇 position:relative 共同保证，与 .chat-header-title-cluster 规则一致。 */
    position: static !important;
    flex-shrink: 0;
    margin-left: 8px;
    z-index: 6;
}

/* 展开时下拉面叠到整页聊天内容之上（主因：此前 .chat-header overflow:hidden 会裁剪面板） */
#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-heartbeat-monitor[open] {
    z-index: 9600 !important;
}

#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-heartbeat-monitor-summary {
    width: 36px;
    height: 36px;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 3px 10px rgba(195, 141, 148, 0.28));
}

#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-heartbeat-monitor-glass {
    width: 30px;
    height: 30px;
    animation-name: chat-heartbeat-pulse;
    background: transparent !important;
    box-shadow: none !important;
}

#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-heartbeat-monitor-glass::before {
    width: 22px;
    height: 18px;
}

#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-heartbeat-monitor-img {
    filter: none;
    opacity: 1;
}

#chat-page.chat-page--offline-group.chat-page--offline-beautified .chat-heartbeat-monitor-panel {
    top: calc(100% + 6px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    /* 显著高于消息区 / 玻璃浮层，避免长文气泡「盖住」心跳报告 */
    z-index: 9650 !important;
}

/* 清空美化后的硬复位：即使上一次导入写过强样式，也必须回到系统预设头栏。 */
#chat-page.chat-page--offline-mode.chat-page--offline-group:not(.chat-page--offline-beautified) .chat-header,
#chat-page.chat-page--offline-mode.chat-page--offline-group:not(.chat-page--offline-beautified) .chat-header.chat-header--expanded {
    width: calc(100% - 20px) !important;
    margin: 10px auto 0 !important;
    padding: 10px 14px !important;
    min-height: 56px !important;
    height: 56px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    background-image: none !important;
    border-radius: var(--chat-radius-lg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
    overflow: visible !important;
}

#chat-page.chat-page--offline-mode.chat-page--offline-group:not(.chat-page--offline-beautified) .chat-header::before,
#chat-page.chat-page--offline-mode.chat-page--offline-group:not(.chat-page--offline-beautified) .chat-header::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}

/* ---- 聊天内容区：拉开顶部留白让封面卡呼吸；文字默认山岩色 ---- */
#chat-page.chat-page--offline-group .chat-content {
    padding: 14px 14px 24px;
    gap: 8px;
    background: transparent;
    color: var(--offgrp-ink);
}

/* ---- 移除心电图分隔线 + 还原合理消息间距 ---- */
#chat-page.chat-page--offline-group .chat-message--offline-flow .offline-ecg-separator {
    display: none !important;
}

#chat-page.chat-page--offline-group .chat-message--offline-flow {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 4px;
}

#chat-page.chat-page--offline-group .chat-message--offline-flow.chat-message--offline-longform {
    padding-top: 0;
    padding-bottom: 0;
}

/* ---- User / Char 消息独立气泡 ---- */
#chat-page.chat-page--offline-group .chat-message--offline-flow .chat-message-content {
    align-items: flex-start !important;
    flex: 0 1 auto !important;
    min-width: 0;
    max-width: calc(100% - 56px) !important;
}

/* User 消息整行靠右（覆盖私聊线下分支保留的 justify-content:flex-start），保持 [气泡][头像] 视觉顺序 */
#chat-page.chat-page--offline-group .chat-message--offline-flow.my-message {
    justify-content: flex-end !important;
}

#chat-page.chat-page--offline-group .chat-message--offline-flow.my-message .chat-message-content {
    align-items: flex-end !important;
}

/* Char（other-message）所有线下气泡变体：柔和水彩纸张气泡 */
#chat-page.chat-page--offline-group .chat-message--offline-flow .chat-message-bubble,
#chat-page.chat-page--offline-group .chat-message--offline-flow .chat-message-bubble--offline,
#chat-page.chat-page--offline-group .chat-message--offline-flow .chat-message-bubble--offline-longform,
#chat-page.chat-page--offline-group .chat-message--offline-flow .chat-message-bubble--offline-rich {
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 10px 14px !important;
    background:
        radial-gradient(circle at 16% 16%, rgba(133, 205, 202, 0.18), transparent 42%),
        linear-gradient(145deg, rgba(255, 252, 247, 0.92) 0%, rgba(250, 248, 245, 0.82) 58%, rgba(133, 205, 202, 0.12) 100%) !important;
    border: 1px solid var(--offgrp-stroke) !important;
    border-radius: 24px !important;
    box-shadow: var(--offgrp-bubble-shadow) !important;
    color: var(--offgrp-ink) !important;
    overflow: visible !important;
    line-height: 1.55 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* fit-content 仅作用于普通短文气泡（多段消息流式），让其只占用所需宽度 */
#chat-page.chat-page--offline-group .chat-message--offline-flow .chat-message-bubble--offline:not(.chat-message-bubble--offline-longform):not(.chat-message-bubble--offline-rich) {
    width: fit-content !important;
}

/* 长文型 / Rich 气泡稍微多留点 padding */
#chat-page.chat-page--offline-group .chat-message--offline-flow .chat-message-bubble--offline-longform,
#chat-page.chat-page--offline-group .chat-message--offline-flow .chat-message-bubble--offline-rich {
    padding: 12px 16px !important;
}

/* User（my-message）消息模式气泡：保留拆分，使用暖桃水彩 */
#chat-page.chat-page--offline-group .chat-message--offline-flow.my-message .chat-message-bubble,
#chat-page.chat-page--offline-group .chat-message--offline-flow.my-message .chat-message-bubble--offline,
#chat-page.chat-page--offline-group .chat-message--offline-flow.my-message .chat-message-bubble--offline-longform,
#chat-page.chat-page--offline-group .chat-message--offline-flow.my-message .chat-message-bubble--offline-rich {
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.46), transparent 38%),
        linear-gradient(145deg, rgba(232, 168, 124, 0.30) 0%, rgba(212, 163, 115, 0.20) 54%, rgba(250, 248, 245, 0.72) 100%) !important;
    border: 1px solid var(--offgrp-stroke-strong) !important;
}

/* 长文模式：User 正文不再显示气泡包裹，只保留文字排版；Char 长文仍完整包在气泡里 */
#chat-page.chat-page--offline-group .chat-message--offline-flow.my-message.chat-message--offline-longform .chat-message-bubble,
#chat-page.chat-page--offline-group .chat-message--offline-flow.my-message.chat-message--offline-longform .chat-message-bubble--offline-longform {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 2px 4px !important;
}

/* 段内文字 / 旁白 / 对白统一为山岩深灰；旁白略柔一档；禁止上游浅色覆盖 */
#chat-page.chat-page--offline-group .chat-message--offline-flow .chat-message-bubble,
#chat-page.chat-page--offline-group .chat-message--offline-flow .chat-message-bubble * {
    color: var(--offgrp-ink) !important;
}

#chat-page.chat-page--offline-group .chat-message--offline-flow .chat-message-segment--narration {
    color: var(--offgrp-ink-mid) !important;
}

/* 名字（群组内 Char 昵称）— 与气泡风格一致 */
#chat-page.chat-page--offline-group .chat-message--offline-flow .chat-message-name {
    color: var(--offgrp-ink-mid) !important;
    font-size: 12px;
    margin: 0 0 4px;
    padding: 0 4px;
    text-shadow: none;
}

/* 头像描边淡化为砂色，与气泡呼应 */
#chat-page.chat-page--offline-group .chat-message--offline-flow .chat-message-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--offgrp-stroke);
    background-color: var(--offgrp-paper-soft);
    box-shadow: 0 1px 3px rgba(60, 50, 32, 0.12);
}

/* ---- 输入区与底栏：柔化为同色系（不改布局） ---- */
#chat-page.chat-page--offline-group .chat-input-container,
#chat-page.chat-page--offline-group .chat-footer {
    background: rgba(244, 236, 220, 0.78) !important;
    border-top: 1px solid var(--offgrp-stroke);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#chat-page.chat-page--offline-group .chat-input {
    background: #FBF6EA !important;
    border: 1px solid var(--offgrp-stroke) !important;
    color: var(--offgrp-ink) !important;
}

#chat-page.chat-page--offline-group .chat-input::placeholder {
    color: var(--offgrp-ink-soft) !important;
}

/* 心跳监控 HTML 中可能也输出 .hb-offline-status 块；在监控面板里隐藏，
   避免在用户查看心跳时看到原始字段（数据已被解析存档供状态版面使用）。 */
#chat-heartbeat-monitor-content .hb-offline-status {
    display: none !important;
}

/* ── 夜间模式 · 补充：日间规则遗留的浅色底按钮 / 设置页 ── */
html[data-appearance="dark"] .wechat-settings-btn {
    background: var(--dark-btn-primary-solid) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

html[data-appearance="dark"] .wechat-settings-btn.secondary {
    background: var(--dark-btn-secondary-bg) !important;
    color: var(--dark-btn-text) !important;
    border: 1px solid var(--dark-btn-secondary-border) !important;
}

html[data-appearance="dark"] #chat-page .chat-multiselect-bar .multiselect-btn {
    background: var(--dark-icon-btn-bg) !important;
    color: var(--dark-btn-text) !important;
    border: 1px solid var(--dark-icon-btn-border) !important;
}

html[data-appearance="dark"] #chat-page .chat-multiselect-bar .multiselect-btn.delete-btn {
    background: rgba(255, 69, 58, 0.22) !important;
    color: #ff6961 !important;
    border-color: rgba(255, 105, 97, 0.35) !important;
}

html[data-appearance="dark"] #chat-page .chat-multiselect-bar .multiselect-btn.forward-btn,
html[data-appearance="dark"] #chat-page .chat-multiselect-bar .multiselect-btn.favorite-btn {
    background: rgba(10, 132, 255, 0.2) !important;
    color: #64b5ff !important;
    border-color: rgba(10, 132, 255, 0.32) !important;
}

html[data-appearance="dark"] .wallet-modal-btn.cancel,
html[data-appearance="dark"] .forward-friends-cancel-btn {
    background: var(--dark-btn-secondary-bg) !important;
    color: var(--dark-btn-text) !important;
    border: 1px solid var(--dark-btn-secondary-border) !important;
}

html[data-appearance="dark"] .wallet-modal-btn.confirm,
html[data-appearance="dark"] .forward-friends-send-btn {
    background: var(--dark-btn-primary-bg) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}


/* 微信三栏（消息 / 发现 / 我）：浅色液态玻璃主题
 * 仅视觉层覆盖。主色调回到白色系，#E8F4F0 仅作为清新蓝绿点缀。
 */
#wechat-page,
#wechat-discover-page,
#wechat-me-page {
    --wechat-lg-base: #ffffff;
    --wechat-lg-base-rgb: 255, 255, 255;
    --wechat-lg-tint: #E8F4F0;
    --wechat-lg-surface: rgba(255, 255, 255, 0.70);
    --wechat-lg-surface-strong: rgba(255, 255, 255, 0.88);
    --wechat-lg-surface-soft: rgba(255, 255, 255, 0.54);
    --wechat-lg-border: rgba(120, 164, 154, 0.16);
    --wechat-lg-border-soft: rgba(255, 255, 255, 0.64);
    --wechat-lg-text: #1f3430;
    --wechat-lg-text-soft: rgba(31, 52, 48, 0.62);
    --wechat-lg-accent: #5f9f91;
    --wechat-lg-accent-strong: #347f70;
    --wechat-lg-shadow: 0 12px 32px rgba(72, 118, 108, 0.08), 0 1px 4px rgba(72, 118, 108, 0.04);
    --wechat-lg-shadow-soft: 0 8px 22px rgba(72, 118, 108, 0.06);
    background:
        radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.92), transparent 30%),
        radial-gradient(circle at 86% 18%, rgba(232, 244, 240, 0.42), transparent 36%),
        radial-gradient(circle at 50% 92%, rgba(232, 244, 240, 0.36), transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #f8fbfa 56%, #ffffff 100%) !important;
    background-size: 160% 160%, 140% 140%, 160% 160%, auto !important;
    color: var(--wechat-lg-text);
}

#wechat-page::before,
#wechat-discover-page::before,
#wechat-me-page::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.36) 34%, transparent 62%),
        radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.34), transparent 28%);
    opacity: 0.7;
    animation: wechatLightGlassBg 18s ease-in-out infinite alternate;
    z-index: 0;
}

#wechat-page > *,
#wechat-discover-page > *,
#wechat-me-page > * {
    position: relative;
    z-index: 1;
}

/* 消息分组菜单必须浮在会话列表之上；通用子层 z-index 不能压低顶栏层级。 */
#wechat-page > .wechat-header {
    z-index: 80 !important;
    overflow: visible !important;
}

#wechat-page .wechat-header-titlebox,
#wechat-page .wechat-chat-group-menu {
    z-index: 120 !important;
}

#wechat-page.wechat-chat-group-menu-open .wechat-chat-list {
    z-index: 0 !important;
}

/* 右上角添加菜单必须脱离 flex 文档流；否则通用 #wechat-page > * 层级规则会把它改成 relative，展开时在顶部撑出空白。 */
#wechat-page > .wechat-add-menu {
    position: absolute !important;
    top: calc(max(12px, env(safe-area-inset-top, 0px)) + 92px) !important;
    right: 16px !important;
    left: auto !important;
    width: auto !important;
    min-width: 164px;
    max-width: min(72vw, 220px);
    z-index: 180 !important;
    display: none !important;
    overflow: hidden;
    transform: translate3d(0, -4px, 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

#wechat-page > .wechat-add-menu.show {
    display: block !important;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
}

#wechat-page > .wechat-add-menu .wechat-add-menu-item {
    min-height: 46px;
    padding: 12px 18px;
    justify-content: flex-start;
    text-align: left;
}

/* 发起群聊好友选择必须是微信页内覆盖层，不能作为 flex 子项把消息列表向下撑开。 */
#wechat-page > #create-groupchat-modal.modal,
#wechat-page > #join-group-confirm-modal.modal {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1000 !important;
    display: none !important;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
}

#wechat-page > #create-groupchat-modal.modal.show,
#wechat-page > #join-group-confirm-modal.modal.show {
    display: flex !important;
}

#wechat-page > #create-groupchat-modal .forward-friends-modal-content {
    width: min(88%, 340px);
    max-height: min(72%, 520px);
}

#wechat-page > #create-groupchat-modal .forward-friends-footer {
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

#wechat-page > #create-groupchat-modal .forward-friends-cancel-btn,
#wechat-page > #create-groupchat-modal .forward-friends-send-btn {
    min-width: 90px;
}

/* 朋友圈是发现页里的全屏绝对定位子层；上面的通用 z-index 层级不能改写它的布局。 */
#wechat-discover-page > .moments-page,
#wechat-discover-page > .wechat-char-fmom-shell {
    position: absolute !important;
    inset: 0 !important;
    z-index: 99 !important;
    min-height: 0 !important;
}

#wechat-discover-page > .moments-page .moments-page-body,
#wechat-discover-page > .wechat-char-fmom-shell .moments-page-body {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
}

#wechat-discover-page > .moments-page .moments-ins-scroll,
#wechat-discover-page > .wechat-char-fmom-shell .moments-ins-scroll {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
}

#wechat-page > .status-bar,
#wechat-discover-page > .status-bar,
#wechat-me-page > .status-bar {
    background: rgba(var(--wechat-lg-base-rgb), 0.78) !important;
    color: var(--wechat-lg-text) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.48) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

#wechat-page .wechat-header,
#wechat-me-page .wechat-me-header,
#wechat-discover-page .wechat-me-header {
    margin: 8px 10px 0 !important;
    border-radius: 22px !important;
    background: var(--wechat-lg-surface) !important;
    border: 1px solid var(--wechat-lg-border-soft) !important;
    box-shadow: var(--wechat-lg-shadow-soft) !important;
    backdrop-filter: blur(18px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

#wechat-page .wechat-header::after,
#wechat-me-page .wechat-me-header::after,
#wechat-discover-page .wechat-me-header::after,
#wechat-page .wechat-bottom-nav::after,
#wechat-discover-page .wechat-bottom-nav::after,
#wechat-me-page .wechat-bottom-nav::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    top: 1px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.86), transparent);
    pointer-events: none;
}

#wechat-page .wechat-header-filter-title,
#wechat-page .wechat-header-filter-btn,
#wechat-me-page .wechat-me-header h1,
#wechat-discover-page .wechat-me-header h1 {
    color: var(--wechat-lg-text) !important;
}

#wechat-page .wechat-back-btn,
#wechat-page .wechat-header-btn,
#wechat-page .wechat-header-filter-btn {
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.26) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

#wechat-page .wechat-back-btn:active,
#wechat-page .wechat-header-btn:active,
#wechat-page .wechat-header-filter-btn:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.48) !important;
}

#wechat-page .wechat-header-filter-pill,
#wechat-page .wechat-chat-group-option.is-selected {
    background: rgba(95, 159, 145, 0.14) !important;
    color: var(--wechat-lg-accent-strong) !important;
}

#wechat-page .wechat-chat-group-menu,
#wechat-page .wechat-add-menu {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid var(--wechat-lg-border-soft) !important;
    border-radius: 22px !important;
    box-shadow: var(--wechat-lg-shadow) !important;
    backdrop-filter: blur(18px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

#wechat-page .wechat-chat-group-option,
#wechat-page .wechat-add-menu-item {
    color: var(--wechat-lg-text) !important;
    border-radius: 16px !important;
}

#wechat-page .wechat-chat-group-option:hover,
#wechat-page .wechat-add-menu-item:hover {
    background: rgba(95, 159, 145, 0.12) !important;
}

#wechat-page .wechat-chat-list,
#wechat-discover-page .discover-content,
#wechat-me-page .wechat-me-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-top: 8px;
}

#wechat-page .wechat-chat-item {
    margin: 8px 10px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--wechat-lg-border-soft) !important;
    border-radius: 18px !important;
    background: var(--wechat-lg-surface-strong) !important;
    box-shadow: var(--wechat-lg-shadow-soft) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

#wechat-page .wechat-chat-item:hover,
#wechat-page .wechat-chat-item:active {
    background: rgba(255, 255, 255, 0.84) !important;
}

#wechat-page .wechat-chat-avatar {
    border-radius: 16px !important;
    background-color: #9fd4c8 !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(72, 118, 108, 0.18), inset 0 1px 0 rgba(255,255,255,.32);
}

#wechat-page .wechat-chat-name,
#wechat-page .wechat-chat-name-row,
#wechat-me-page .wechat-me-name,
#wechat-me-page .wechat-me-function-name {
    color: var(--wechat-lg-text) !important;
}

#wechat-page .wechat-chat-message,
#wechat-page .wechat-chat-time,
#wechat-me-page .wechat-me-id,
#wechat-me-page .wechat-me-function-arrow {
    color: var(--wechat-lg-text-soft) !important;
}

#wechat-page .wechat-chat-tag--friend,
#wechat-page .wechat-chat-tag--family,
#wechat-page .wechat-chat-tag--lover,
#wechat-page .wechat-chat-tag--group {
    background: rgba(95, 159, 145, 0.12) !important;
    color: var(--wechat-lg-accent-strong) !important;
}

#wechat-page .wechat-bottom-nav,
#wechat-discover-page .wechat-bottom-nav,
#wechat-me-page .wechat-bottom-nav {
    position: relative;
    margin: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 6px 4px !important;
    border: 1px solid var(--wechat-lg-border-soft) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.60) !important;
    box-shadow: var(--wechat-lg-shadow) !important;
    backdrop-filter: blur(20px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
}

#wechat-page .wechat-nav-item,
#wechat-discover-page .wechat-nav-item,
#wechat-me-page .wechat-nav-item {
    min-height: 54px;
    margin: 0 3px;
    border-radius: 18px;
    color: var(--wechat-lg-text-soft);
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

#wechat-page .wechat-nav-item.active,
#wechat-discover-page .wechat-nav-item.active,
#wechat-me-page .wechat-nav-item.active {
    background: rgba(95, 159, 145, 0.13) !important;
    color: var(--wechat-lg-accent-strong) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
}

#wechat-page .wechat-nav-item:active,
#wechat-discover-page .wechat-nav-item:active,
#wechat-me-page .wechat-nav-item:active {
    transform: scale(0.98);
}

#wechat-page .wechat-nav-text,
#wechat-discover-page .wechat-nav-text,
#wechat-me-page .wechat-nav-text {
    color: var(--wechat-lg-text-soft) !important;
}

#wechat-page .wechat-nav-item.active .wechat-nav-text,
#wechat-discover-page .wechat-nav-item.active .wechat-nav-text,
#wechat-me-page .wechat-nav-item.active .wechat-nav-text {
    color: var(--wechat-lg-accent-strong) !important;
    font-weight: 700;
}

#wechat-page .wechat-nav-img,
#wechat-discover-page .wechat-nav-img,
#wechat-me-page .wechat-nav-img,
#wechat-page .wechat-header-img,
#wechat-page .wechat-back-icon {
    filter: saturate(0.86) hue-rotate(118deg) brightness(0.92);
    opacity: 0.86;
}

#wechat-page .wechat-nav-item.active .wechat-nav-img,
#wechat-discover-page .wechat-nav-item.active .wechat-nav-img,
#wechat-me-page .wechat-nav-item.active .wechat-nav-img {
    opacity: 1;
    filter: saturate(1.1) hue-rotate(118deg) brightness(0.86);
}

#wechat-me-page .wechat-me-functions,
#wechat-me-page .wechat-me-profile {
    margin: 10px;
    border-radius: 24px !important;
    background: var(--wechat-lg-surface) !important;
    border: 1px solid var(--wechat-lg-border-soft) !important;
    box-shadow: var(--wechat-lg-shadow) !important;
    backdrop-filter: blur(18px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
    overflow: hidden;
}

#wechat-me-page .wechat-me-function-item {
    margin: 8px 10px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.52) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.44) !important;
    box-shadow: 0 8px 18px rgba(72, 118, 108, 0.08) !important;
}

#wechat-me-page .wechat-me-function-item:active {
    background: rgba(255, 255, 255, 0.68) !important;
    transform: scale(0.99);
}

#wechat-me-page .wechat-me-function-icon {
    background: rgba(232, 244, 240, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 6px 14px rgba(72,118,108,.10);
}

#wechat-me-page .wechat-me-profile {
    padding: 28px 18px !important;
}

#wechat-me-page .wechat-me-avatar,
#wechat-me-page .avatar-preview {
    border: 2px solid rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 14px 26px rgba(72, 118, 108, 0.18), inset 0 1px 0 rgba(255,255,255,.34) !important;
}

#wechat-me-page .wechat-me-avatar-placeholder {
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.86), transparent 30%),
        linear-gradient(135deg, #d9f0ea 0%, #a8d6ca 100%) !important;
}

/* 发现页内的设置、记忆空间等子页面沿用浅色玻璃底色 */
#wechat-discover-page .wechat-settings-page,
#wechat-discover-page .wechat-memory-library-page,
#wechat-discover-page .wechat-memory-space-page {
    background:
        radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.86), transparent 32%),
        radial-gradient(circle at 85% 15%, rgba(232, 244, 240, 0.38), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%) !important;
}

#wechat-discover-page .wechat-settings-header,
#wechat-discover-page .wechat-memory-header,
#wechat-discover-page .wechat-settings-card,
#wechat-discover-page .wechat-memory-calendar-card,
#wechat-discover-page .wechat-memory-friend-hero,
#wechat-discover-page .wechat-memory-diary-modal-content {
    background: var(--wechat-lg-surface) !important;
    border-color: var(--wechat-lg-border-soft) !important;
    box-shadow: var(--wechat-lg-shadow-soft) !important;
    backdrop-filter: blur(18px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #wechat-page,
    #wechat-discover-page,
    #wechat-me-page {
        background: #ffffff !important;
    }

    #wechat-page .wechat-header,
    #wechat-page .wechat-bottom-nav,
    #wechat-page .wechat-chat-item,
    #wechat-discover-page .wechat-bottom-nav,
    #wechat-me-page .wechat-me-header,
    #wechat-me-page .wechat-bottom-nav,
    #wechat-me-page .wechat-me-profile,
    #wechat-me-page .wechat-me-functions,
    #wechat-me-page .wechat-me-function-item {
        background: #f8fcfb !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #wechat-page::before,
    #wechat-discover-page::before,
    #wechat-me-page::before {
        animation: none !important;
    }

    #wechat-page .wechat-nav-item,
    #wechat-discover-page .wechat-nav-item,
    #wechat-me-page .wechat-nav-item,
    #wechat-page .wechat-chat-item,
    #wechat-me-page .wechat-me-function-item {
        transition: none !important;
    }
}

@keyframes wechatLightGlassBg {
    0% { opacity: 0.52; transform: translate3d(-1.5%, -1%, 0); }
    100% { opacity: 0.82; transform: translate3d(1.5%, 1%, 0); }
}

/* 微信聊天设置 / 好友设置 / 我-设置：灰蓝米白液态玻璃美化
   仅覆盖视觉层，不改 DOM 与交互逻辑。 */
#chat-page,
#wechat-me-page {
    --wechat-cool-bg: #f2f1ed;
    --wechat-cool-bg-rgb: 242, 241, 237;
    --wechat-cool-cream: #fbfaf6;
    --wechat-cool-cream-rgb: 251, 250, 246;
    --wechat-cool-blue: #6f8194;
    --wechat-cool-blue-rgb: 111, 129, 148;
    --wechat-cool-blue-deep: #4d6074;
    --wechat-cool-blue-soft: rgba(111, 129, 148, 0.14);
    --wechat-cool-text: #202a35;
    --wechat-cool-text-soft: rgba(32, 42, 53, 0.62);
    --wechat-cool-line: rgba(111, 129, 148, 0.16);
    --wechat-cool-line-strong: rgba(111, 129, 148, 0.26);
    --wechat-cool-glass: rgba(251, 250, 246, 0.66);
    --wechat-cool-glass-strong: rgba(251, 250, 246, 0.86);
    --wechat-cool-glass-soft: rgba(255, 255, 255, 0.46);
    --wechat-cool-shadow: 0 16px 42px rgba(68, 82, 98, 0.12), 0 1px 4px rgba(68, 82, 98, 0.06);
    --wechat-cool-shadow-soft: 0 8px 24px rgba(68, 82, 98, 0.08);
}

#chat-page #chat-settings-modal.chat-fullscreen-glass,
#chat-page #friend-settings-modal.chat-fullscreen-glass,
#chat-page #group-settings-modal.chat-fullscreen-glass {
    background:
        radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.72), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(132, 151, 170, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(242, 241, 237, 0.55), rgba(232, 235, 238, 0.46)) !important;
}

#chat-page .chat-fullscreen-glass .modal-content.chat-settings-modal,
#chat-page .chat-fullscreen-glass .modal-content.friend-settings-modal {
    background:
        radial-gradient(circle at 20% -6%, rgba(255,255,255,0.78), transparent 28%),
        radial-gradient(circle at 90% 8%, rgba(111,129,148,0.12), transparent 34%),
        linear-gradient(180deg, rgba(250, 249, 245, 0.84), rgba(235, 238, 240, 0.80)) !important;
    color: var(--wechat-cool-text) !important;
    backdrop-filter: blur(22px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.1) !important;
}

#chat-page .chat-fullscreen-glass .modal-content.chat-settings-modal > .modal-header,
#chat-page .chat-fullscreen-glass .modal-content.friend-settings-modal > .modal-header {
    min-height: 58px;
    padding: 12px 16px !important;
    background: rgba(var(--wechat-cool-cream-rgb), 0.72) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.62) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.78), 0 10px 24px rgba(68,82,98,0.05);
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

#chat-page .chat-fullscreen-glass .modal-content.chat-settings-modal > .modal-header::after,
#chat-page .chat-fullscreen-glass .modal-content.friend-settings-modal > .modal-header::after,
#wechat-me-page .wechat-settings-header::after {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    top: 1px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.88), transparent);
    pointer-events: none;
}

#chat-page .chat-fullscreen-glass .modal-header h3,
#wechat-me-page .wechat-settings-title {
    color: var(--wechat-cool-text) !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
}

#chat-page .chat-fullscreen-glass .modal-header .back-btn,
#wechat-me-page .wechat-settings-back {
    width: 38px;
    height: 38px;
    border-radius: 14px !important;
    color: var(--wechat-cool-blue-deep) !important;
    background: rgba(255, 255, 255, 0.42) !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 6px 16px rgba(68,82,98,.08);
}

#chat-page .chat-fullscreen-glass .modal-header .back-btn:active,
#wechat-me-page .wechat-settings-back:active {
    transform: scale(0.97);
    background: rgba(255,255,255,0.66) !important;
}

#chat-page .chat-fullscreen-glass .chat-settings-list,
#chat-page .chat-fullscreen-glass .friend-settings-content {
    padding: 16px 14px max(18px, env(safe-area-inset-bottom, 0px)) !important;
}

#chat-page .chat-fullscreen-glass .chat-settings-item,
#chat-page .chat-fullscreen-glass .friend-info-item,
#chat-page .chat-fullscreen-glass .role-setting-container,
#chat-page .chat-fullscreen-glass .group-members-section,
#chat-page .chat-fullscreen-glass #private-chat-api-fields,
#chat-page .chat-fullscreen-glass #group-autochat-dedicated-api-fields,
#chat-page .chat-fullscreen-glass #chat-settings-autochat-interval-hint {
    background: var(--wechat-cool-glass) !important;
    border: 1px solid rgba(255, 255, 255, 0.60) !important;
    border-radius: 18px !important;
    box-shadow: var(--wechat-cool-shadow-soft) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

#chat-page .chat-fullscreen-glass .chat-settings-item,
#chat-page .chat-fullscreen-glass .friend-info-item {
    min-height: 52px;
}

#chat-page .chat-fullscreen-glass .chat-settings-item:hover,
#chat-page .chat-fullscreen-glass .friend-info-item:hover,
#chat-page .chat-fullscreen-glass .role-setting-container:hover,
#chat-page .chat-fullscreen-glass .group-members-section:hover {
    background: var(--wechat-cool-glass-strong) !important;
    border-color: var(--wechat-cool-line-strong) !important;
    box-shadow: var(--wechat-cool-shadow) !important;
}

#chat-page .chat-fullscreen-glass .chat-settings-label,
#chat-page .chat-fullscreen-glass .friend-info-label,
#chat-page .chat-fullscreen-glass .role-setting-label,
#chat-page .chat-fullscreen-glass .group-members-header .friend-info-label {
    color: var(--wechat-cool-text) !important;
    font-weight: 700 !important;
}

#chat-page .chat-fullscreen-glass .friend-info-value,
#chat-page .chat-fullscreen-glass .role-setting-content,
#chat-page .chat-fullscreen-glass .avatar-hint,
#chat-page .chat-fullscreen-glass .chat-avatar-hint,
#chat-page .chat-fullscreen-glass .chat-settings-arrow,
#chat-page .chat-fullscreen-glass #private-chat-api-fields,
#chat-page .chat-fullscreen-glass #group-autochat-dedicated-api-fields,
#chat-page .chat-fullscreen-glass #chat-settings-autochat-interval-hint {
    color: var(--wechat-cool-text-soft) !important;
}

#chat-page .chat-fullscreen-glass .chat-settings-label.danger,
#chat-page .chat-fullscreen-glass #chat-settings-blacklist-item .chat-settings-label,
#chat-page .chat-fullscreen-glass .delete-and-exit-btn span {
    color: #a45f62 !important;
}

#chat-page .chat-fullscreen-glass .delete-and-exit-btn {
    background: rgba(255, 250, 248, 0.66) !important;
    border: 1px solid rgba(164, 95, 98, 0.14) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(164, 95, 98, 0.07) !important;
}

#chat-page .chat-fullscreen-glass input,
#chat-page .chat-fullscreen-glass textarea,
#chat-page .chat-fullscreen-glass select,
#wechat-me-page .wechat-settings-page input,
#wechat-me-page .wechat-settings-page textarea,
#wechat-me-page .wechat-settings-page select {
    background: rgba(255, 255, 255, 0.56) !important;
    color: var(--wechat-cool-text) !important;
    border: 1px solid var(--wechat-cool-line) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 2px rgba(68,82,98,0.04), 0 1px 0 rgba(255,255,255,.55) !important;
}

#chat-page .chat-fullscreen-glass input:focus,
#chat-page .chat-fullscreen-glass textarea:focus,
#chat-page .chat-fullscreen-glass select:focus,
#wechat-me-page .wechat-settings-page input:focus,
#wechat-me-page .wechat-settings-page textarea:focus,
#wechat-me-page .wechat-settings-page select:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.76) !important;
    border-color: rgba(var(--wechat-cool-blue-rgb), 0.38) !important;
    box-shadow: 0 0 0 3px rgba(var(--wechat-cool-blue-rgb), 0.12), inset 0 1px 2px rgba(68,82,98,0.04) !important;
}

#chat-page .chat-fullscreen-glass .avatar-container,
#chat-page .chat-fullscreen-glass .chat-avatar-box {
    border-color: rgba(255, 255, 255, 0.70) !important;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,0.92), transparent 30%),
        linear-gradient(135deg, rgba(232, 231, 224, 0.95), rgba(164, 179, 195, 0.44)) !important;
    box-shadow: 0 14px 30px rgba(68,82,98,0.16), inset 0 1px 0 rgba(255,255,255,0.62) !important;
}

#chat-page .chat-fullscreen-glass .avatar-placeholder,
#chat-page .chat-fullscreen-glass .chat-avatar-preview {
    border-color: rgba(255, 255, 255, 0.70) !important;
    box-shadow: 0 14px 30px rgba(68,82,98,0.16), inset 0 1px 0 rgba(255,255,255,0.62) !important;
}

#chat-page .chat-fullscreen-glass .avatar-container:hover,
#chat-page .chat-fullscreen-glass .chat-avatar-box:hover {
    border-color: rgba(var(--wechat-cool-blue-rgb), 0.38) !important;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,0.98), transparent 30%),
        linear-gradient(135deg, rgba(250,249,245,0.98), rgba(158,176,195,0.52)) !important;
}

#chat-page .chat-fullscreen-glass .avatar-placeholder:hover,
#chat-page .chat-fullscreen-glass .chat-avatar-preview:hover {
    border-color: rgba(var(--wechat-cool-blue-rgb), 0.38) !important;
}

#chat-page .chat-fullscreen-glass .save-button,
#chat-page .chat-fullscreen-glass .group-members-add-btn,
#chat-page .chat-fullscreen-glass .private-chat-fetch-models-btn,
#chat-page .chat-fullscreen-glass .group-autochat-fetch-models-btn,
#wechat-me-page .wechat-settings-btn {
    color: #fff !important;
    background: linear-gradient(135deg, #6f8194 0%, #4d6074 100%) !important;
    border: 1px solid rgba(255,255,255,0.30) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 22px rgba(68,82,98,0.18), inset 0 1px 0 rgba(255,255,255,0.30) !important;
}

#chat-page .chat-fullscreen-glass .save-button:hover,
#chat-page .chat-fullscreen-glass .group-members-add-btn:hover,
#chat-page .chat-fullscreen-glass .private-chat-fetch-models-btn:hover,
#chat-page .chat-fullscreen-glass .group-autochat-fetch-models-btn:hover,
#wechat-me-page .wechat-settings-btn:hover {
    filter: brightness(1.03);
    box-shadow: 0 14px 28px rgba(68,82,98,0.22), inset 0 1px 0 rgba(255,255,255,0.32) !important;
}

#wechat-me-page .wechat-settings-btn.secondary {
    color: var(--wechat-cool-blue-deep) !important;
    background: rgba(255,255,255,0.62) !important;
    border: 1px solid var(--wechat-cool-line) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.74), 0 6px 16px rgba(68,82,98,0.08) !important;
}

#chat-page .chat-settings-toggle .toggle-slider,
#chat-page .friend-info-item .toggle-slider,
#wechat-me-page .wechat-settings-page .toggle-slider {
    background: rgba(174, 181, 188, 0.44) !important;
    border: 1px solid rgba(255,255,255,0.62) !important;
    box-shadow: inset 0 1px 2px rgba(68,82,98,0.10), 0 1px 0 rgba(255,255,255,.52) !important;
}

#chat-page .chat-settings-toggle input:checked + .toggle-slider,
#chat-page .friend-info-item input:checked + .toggle-slider,
#wechat-me-page .wechat-settings-page input:checked + .toggle-slider {
    background: linear-gradient(135deg, rgba(111,129,148,0.92), rgba(77,96,116,0.96)) !important;
}

#wechat-me-page .wechat-settings-page,
#wechat-me-page .wechat-chat-beautify-page {
    background:
        radial-gradient(circle at 14% 6%, rgba(255,255,255,0.78), transparent 32%),
        radial-gradient(circle at 86% 14%, rgba(111,129,148,0.14), transparent 36%),
        linear-gradient(180deg, #f8f6f0 0%, #eceff1 58%, #f9f7f1 100%) !important;
    color: var(--wechat-cool-text) !important;
}

#wechat-me-page .wechat-settings-header {
    max-width: none !important;
    min-height: 58px;
    padding: 12px 16px !important;
    background: rgba(var(--wechat-cool-cream-rgb), 0.72) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.60) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.78), 0 10px 24px rgba(68,82,98,0.05) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

#wechat-me-page .wechat-settings-body {
    padding: 16px 14px max(24px, env(safe-area-inset-bottom, 0px)) !important;
}

#wechat-me-page .wechat-settings-intro {
    color: var(--wechat-cool-text-soft) !important;
    padding: 12px 14px;
    margin-bottom: 12px !important;
    border: 1px solid rgba(255,255,255,0.58);
    border-radius: 18px;
    background: rgba(255,255,255,0.40);
    box-shadow: 0 6px 16px rgba(68,82,98,0.05);
    backdrop-filter: blur(14px) saturate(1.06);
    -webkit-backdrop-filter: blur(14px) saturate(1.06);
}

#wechat-me-page .wechat-settings-card {
    padding: 6px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,0.42) !important;
    border: 1px solid rgba(255,255,255,0.60) !important;
    box-shadow: var(--wechat-cool-shadow) !important;
    backdrop-filter: blur(20px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
}

#wechat-me-page .wechat-settings-row {
    margin: 8px 6px !important;
    padding: 15px 16px !important;
    border: 1px solid rgba(255,255,255,0.62) !important;
    border-radius: 18px !important;
    background: var(--wechat-cool-glass) !important;
    box-shadow: var(--wechat-cool-shadow-soft) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

#wechat-me-page .wechat-settings-row:active,
#wechat-me-page .wechat-settings-row--nav:active {
    background: var(--wechat-cool-glass-strong) !important;
    transform: scale(0.995);
}

#wechat-me-page .wechat-settings-label,
#wechat-me-page .wechat-settings-row--online-beautify-json .wechat-settings-label {
    color: var(--wechat-cool-text) !important;
    font-weight: 700 !important;
}

#wechat-me-page .wechat-settings-desc,
#wechat-me-page .wechat-settings-preview-caption,
#wechat-me-page .wechat-settings-font-size-value {
    color: var(--wechat-cool-text-soft) !important;
}

#wechat-me-page .wechat-settings-status {
    color: var(--wechat-cool-blue-deep) !important;
    font-weight: 700;
}


#wechat-me-page .wechat-bubble-css-textarea,
#wechat-me-page .wechat-settings-text-input,
#wechat-me-page .wechat-settings-font-size-slider {
    background: rgba(255, 255, 255, 0.56) !important;
    border-color: var(--wechat-cool-line) !important;
    color: var(--wechat-cool-text) !important;
}

#wechat-me-page .wechat-settings-bg-thumb,
#wechat-me-page .wechat-settings-font-sample,
#wechat-me-page .wechat-global-online-beautify-preview-wrap,
#wechat-me-page .wechat-settings-bubble-preview-host {
    border-color: var(--wechat-cool-line) !important;
    background: rgba(255,255,255,0.52) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.62), 0 8px 18px rgba(68,82,98,0.06) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #chat-page .chat-fullscreen-glass .modal-content.chat-settings-modal,
    #chat-page .chat-fullscreen-glass .modal-content.friend-settings-modal,
    #wechat-me-page .wechat-settings-page,
    #wechat-me-page .wechat-chat-beautify-page,
    #wechat-me-page .wechat-settings-card,
    #wechat-me-page .wechat-settings-row {
        background: #f8f6f0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #chat-page .chat-fullscreen-glass .chat-settings-item,
    #chat-page .chat-fullscreen-glass .friend-info-item,
    #wechat-me-page .wechat-settings-row,
    #wechat-me-page .wechat-settings-btn {
        transition: none !important;
    }
}

/* 记忆空间：水彩艺术风视觉覆盖。仅调整发现页记忆空间相关样式，不改变日历/日记生成逻辑。 */
#wechat-discover-page {
    --memory-watercolor-ink: #4b4250;
    --memory-watercolor-muted: rgba(75, 66, 80, 0.64);
    --memory-watercolor-paper: #faf6f0;
    --memory-watercolor-paper-rgb: 250, 246, 240;
    --memory-watercolor-rose: #d4a0a0;
    --memory-watercolor-blue: #7bb8d4;
    --memory-watercolor-green: #8cc5a8;
    --memory-watercolor-lilac: #c3a0d4;
    --memory-watercolor-gold: #e8c87a;
    --memory-watercolor-line: rgba(128, 102, 118, 0.14);
    --memory-watercolor-line-soft: rgba(128, 102, 118, 0.09);
    --memory-watercolor-shadow: 0 18px 42px rgba(118, 94, 104, 0.11), 0 2px 8px rgba(118, 94, 104, 0.05);
    --memory-watercolor-shadow-soft: 0 10px 28px rgba(118, 94, 104, 0.08);
}

#wechat-discover-page .wechat-memory-library-page,
#wechat-discover-page .wechat-memory-space-page {
    color: var(--memory-watercolor-ink) !important;
    background:
        radial-gradient(circle at 18% 10%, rgba(212, 160, 160, 0.30), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(123, 184, 212, 0.24), transparent 36%),
        radial-gradient(circle at 28% 88%, rgba(140, 197, 168, 0.19), transparent 34%),
        linear-gradient(180deg, #fffdf9 0%, #faf6f0 52%, #f7efe9 100%) !important;
    overflow: hidden;
}

#wechat-discover-page .wechat-memory-library-page::before,
#wechat-discover-page .wechat-memory-space-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.28;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .18'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23paper)' opacity='.62'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

#wechat-discover-page .wechat-memory-header,
#wechat-discover-page .wechat-memory-library-body,
#wechat-discover-page .wechat-memory-space-body {
    position: relative;
    z-index: 1;
}

#wechat-discover-page .wechat-memory-header {
    padding: max(12px, env(safe-area-inset-top, 0px)) 14px 12px !important;
    background:
        radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.82), transparent 42%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.84), rgba(250, 246, 240, 0.64)) !important;
    border-bottom: 1px solid var(--memory-watercolor-line-soft) !important;
    box-shadow: 0 8px 24px rgba(118, 94, 104, 0.06) !important;
}

#wechat-discover-page .wechat-memory-header-title,
#wechat-discover-page .wechat-memory-friend-name,
#wechat-discover-page .wechat-memory-diary-title,
#wechat-discover-page .wechat-memory-month-picker-title {
    color: var(--memory-watercolor-ink) !important;
}

#wechat-discover-page .wechat-memory-back-btn,
#wechat-discover-page .wechat-memory-header-action {
    border: 1px solid var(--memory-watercolor-line-soft) !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.76) 0%, rgba(250, 246, 240, 0.46) 58%, rgba(212, 160, 160, 0.12) 100%) !important;
    color: rgba(75, 66, 80, 0.72) !important;
    box-shadow: 0 8px 20px rgba(118, 94, 104, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#wechat-discover-page .wechat-memory-header-action.is-active {
    color: #8c6878 !important;
    background:
        radial-gradient(circle at 48% 42%, rgba(212, 160, 160, 0.42) 0%, rgba(195, 160, 212, 0.18) 62%, rgba(255, 255, 255, 0.44) 100%) !important;
}

#wechat-discover-page .wechat-memory-intro,
#wechat-discover-page .wechat-memory-calendar-hint,
#wechat-discover-page .wechat-memory-friend-subtitle,
#wechat-discover-page .wechat-memory-friend-month,
#wechat-discover-page .wechat-memory-diary-kicker,
#wechat-discover-page .wechat-memory-month-picker-kicker,
#wechat-discover-page .wechat-memory-diary-loading {
    color: var(--memory-watercolor-muted) !important;
}

#wechat-discover-page .wechat-memory-library-body,
#wechat-discover-page .wechat-memory-space-body {
    padding: 14px 12px calc(110px + env(safe-area-inset-bottom, 0px)) !important;
}

#wechat-discover-page .wechat-memory-friend-card,
#wechat-discover-page .wechat-memory-friend-hero,
#wechat-discover-page .wechat-memory-calendar-card,
#wechat-discover-page .wechat-memory-diary-modal-content,
#wechat-discover-page .wechat-memory-month-picker-content,
#wechat-discover-page .wechat-memory-friend-selector-content {
    border: 1px solid var(--memory-watercolor-line) !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 22% 10%, rgba(255, 255, 255, 0.86), transparent 34%),
        radial-gradient(circle at 88% 0%, rgba(123, 184, 212, 0.12), transparent 32%),
        linear-gradient(145deg, rgba(255, 252, 247, 0.82), rgba(250, 246, 240, 0.64)) !important;
    box-shadow: var(--memory-watercolor-shadow-soft) !important;
    backdrop-filter: blur(16px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.04) !important;
}

#wechat-discover-page .wechat-memory-friend-card {
    padding: 15px !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#wechat-discover-page .wechat-memory-friend-card:active,
#wechat-discover-page .wechat-memory-calendar-cell:active:not(.empty):not(:disabled),
#wechat-discover-page .wechat-memory-batch-generate-btn:active,
#wechat-discover-page .wechat-memory-month-picker-item:active {
    transform: scale(0.985) !important;
}

#wechat-discover-page .wechat-memory-friend-hero {
    align-items: center;
    margin: 2px 0 14px !important;
    padding: 16px !important;
    background:
        radial-gradient(circle at 16% 18%, rgba(212, 160, 160, 0.32), transparent 42%),
        radial-gradient(circle at 92% 12%, rgba(123, 184, 212, 0.24), transparent 38%),
        linear-gradient(145deg, rgba(255, 252, 247, 0.82), rgba(250, 246, 240, 0.62)) !important;
    box-shadow: var(--memory-watercolor-shadow) !important;
}

#wechat-discover-page .wechat-memory-friend-avatar,
#wechat-discover-page .wechat-memory-space-avatar-img,
#wechat-discover-page .wechat-memory-friend-avatar-placeholder {
    border-radius: 22px !important;
}

#wechat-discover-page .wechat-memory-friend-avatar,
#wechat-discover-page .wechat-memory-friend-avatar-placeholder {
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    background:
        radial-gradient(circle at 42% 34%, rgba(255, 255, 255, 0.72), transparent 34%),
        linear-gradient(135deg, rgba(212, 160, 160, 0.34), rgba(123, 184, 212, 0.26), rgba(140, 197, 168, 0.22)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 8px 20px rgba(118, 94, 104, 0.10);
    color: #8b6677 !important;
}

#wechat-discover-page .wechat-memory-calendar-card {
    padding: 15px !important;
    background:
        radial-gradient(circle at 20% 12%, rgba(232, 200, 122, 0.18), transparent 30%),
        radial-gradient(circle at 82% 22%, rgba(123, 184, 212, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(255, 253, 249, 0.86), rgba(250, 246, 240, 0.68)) !important;
}

#wechat-discover-page .wechat-memory-calendar-weekdays,
#wechat-discover-page .wechat-memory-calendar-grid {
    gap: clamp(5px, 1.8vw, 8px) !important;
}

#wechat-discover-page .wechat-memory-calendar-weekdays span {
    color: rgba(75, 66, 80, 0.46) !important;
    font-weight: 700;
}

#wechat-discover-page .wechat-memory-calendar-cell {
    min-height: clamp(38px, 11vw, 46px) !important;
    border: 1px solid rgba(128, 102, 118, 0.10) !important;
    border-radius: 18px 20px 16px 22px !important;
    background:
        radial-gradient(circle at 48% 38%, rgba(255, 255, 255, 0.64), transparent 46%),
        rgba(255, 252, 247, 0.60) !important;
    color: rgba(75, 66, 80, 0.52) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 5px 14px rgba(118, 94, 104, 0.05) !important;
}

#wechat-discover-page .wechat-memory-calendar-cell-inner {
    min-height: clamp(38px, 11vw, 46px) !important;
}

#wechat-discover-page .wechat-memory-calendar-cell.level-1 {
    background:
        radial-gradient(circle at 50% 42%, rgba(140, 197, 168, 0.34), rgba(140, 197, 168, 0.12) 58%, rgba(255, 255, 255, 0.42) 100%) !important;
    color: #526d61 !important;
}

#wechat-discover-page .wechat-memory-calendar-cell.level-2 {
    background:
        radial-gradient(circle at 50% 42%, rgba(123, 184, 212, 0.40), rgba(123, 184, 212, 0.18) 62%, rgba(255, 255, 255, 0.46) 100%) !important;
    color: #486779 !important;
}

#wechat-discover-page .wechat-memory-calendar-cell.level-3 {
    background:
        radial-gradient(circle at 50% 42%, rgba(212, 160, 160, 0.52), rgba(195, 160, 212, 0.22) 66%, rgba(255, 255, 255, 0.48) 100%) !important;
    color: #7d5868 !important;
    box-shadow: 0 10px 22px rgba(212, 160, 160, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

#wechat-discover-page .wechat-memory-calendar-cell.selection-mode {
    box-shadow: inset 0 0 0 1px rgba(195, 160, 212, 0.36), 0 6px 14px rgba(118, 94, 104, 0.07) !important;
}

#wechat-discover-page .wechat-memory-calendar-cell.selected {
    border-color: rgba(212, 160, 160, 0.42) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.82), 0 0 0 4px rgba(212, 160, 160, 0.22), 0 12px 24px rgba(212, 160, 160, 0.14) !important;
}

#wechat-discover-page .wechat-memory-calendar-cell.selected::after {
    background: rgba(255, 252, 247, 0.92) !important;
    color: #9c6f7d !important;
    box-shadow: 0 3px 8px rgba(118, 94, 104, 0.10);
}

#wechat-discover-page .wechat-memory-calendar-badge {
    color: rgba(75, 66, 80, 0.56) !important;
    font-weight: 700;
}

#wechat-discover-page .wechat-memory-month-trigger {
    min-height: 30px;
    padding: 4px 10px !important;
    border: 1px solid rgba(128, 102, 118, 0.12) !important;
    border-radius: 999px !important;
    background: rgba(255, 252, 247, 0.48) !important;
}

#wechat-discover-page .wechat-memory-batch-generate-btn,
#wechat-discover-page .wechat-memory-month-picker-item.is-active,
#wechat-discover-page .wechat-memory-friend-selector-save,
#wechat-discover-page .wechat-memory-diary-footer .wallet-modal-btn:not(.wechat-memory-diary-action-btn) {
    border: 1px solid rgba(212, 160, 160, 0.18) !important;
    background:
        radial-gradient(circle at 50% 44%, rgba(212, 160, 160, 0.76) 0%, rgba(195, 160, 212, 0.42) 56%, rgba(123, 184, 212, 0.22) 100%) !important;
    color: #fffdf9 !important;
    box-shadow: 0 12px 28px rgba(212, 160, 160, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

#wechat-discover-page .wechat-memory-batch-generate-btn {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 44px;
}

#wechat-discover-page .wechat-memory-batch-generate-btn:disabled {
    background: rgba(203, 192, 188, 0.42) !important;
    color: rgba(75, 66, 80, 0.42) !important;
    border-color: rgba(128, 102, 118, 0.08) !important;
}

#wechat-discover-page .wechat-memory-month-picker-content,
#wechat-discover-page .wechat-memory-diary-modal-content {
    max-height: calc(100vh - max(28px, env(safe-area-inset-top, 0px)) - max(28px, env(safe-area-inset-bottom, 0px))) !important;
}

#wechat-discover-page .wechat-memory-month-picker-year-btn,
#wechat-discover-page .wechat-memory-month-picker-item,
#wechat-discover-page .wechat-memory-diary-action-btn,
#wechat-discover-page .wechat-memory-friend-selector-close {
    border: 1px solid var(--memory-watercolor-line-soft) !important;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.70), rgba(250, 246, 240, 0.48) 62%, rgba(232, 200, 122, 0.10) 100%) !important;
    color: rgba(75, 66, 80, 0.76) !important;
    box-shadow: 0 8px 18px rgba(118, 94, 104, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

#wechat-discover-page .wechat-memory-month-picker-year-input {
    border: 1px solid var(--memory-watercolor-line) !important;
    background: rgba(255, 252, 247, 0.70) !important;
    color: var(--memory-watercolor-ink) !important;
    box-shadow: inset 0 1px 2px rgba(118, 94, 104, 0.04) !important;
}

#wechat-discover-page .wechat-memory-diary-content {
    max-height: min(58vh, 430px) !important;
    padding: 14px 15px !important;
    border: 1px solid var(--memory-watercolor-line-soft);
    border-radius: 22px;
    background:
        linear-gradient(rgba(255, 252, 247, 0.74), rgba(255, 252, 247, 0.74)),
        repeating-linear-gradient(0deg, transparent 0 27px, rgba(212, 160, 160, 0.075) 28px 29px);
    color: #4f4650 !important;
    line-height: 1.9 !important;
    -webkit-overflow-scrolling: touch;
}

#wechat-discover-page .wechat-memory-friend-selector-content {
    background:
        radial-gradient(circle at 18% 10%, rgba(212, 160, 160, 0.22), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(123, 184, 212, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(250, 246, 240, 0.86)) !important;
}

#wechat-discover-page .wechat-memory-friend-selector-header {
    border-bottom: 1px solid var(--memory-watercolor-line-soft) !important;
    background: rgba(255, 252, 247, 0.42) !important;
}

#wechat-discover-page .wechat-memory-friend-selector-title,
#wechat-discover-page .wechat-memory-friend-selector-item .wechat-memory-friend-name {
    color: var(--memory-watercolor-ink) !important;
}

#wechat-discover-page .wechat-memory-friend-selector-item {
    border: 1px solid var(--memory-watercolor-line-soft) !important;
    border-radius: 22px !important;
    background: rgba(255, 252, 247, 0.56) !important;
    box-shadow: 0 8px 20px rgba(118, 94, 104, 0.06) !important;
}

#wechat-discover-page .wechat-memory-friend-selector-checkbox {
    accent-color: var(--memory-watercolor-rose);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #wechat-discover-page .wechat-memory-header,
    #wechat-discover-page .wechat-memory-friend-card,
    #wechat-discover-page .wechat-memory-friend-hero,
    #wechat-discover-page .wechat-memory-calendar-card,
    #wechat-discover-page .wechat-memory-diary-modal-content,
    #wechat-discover-page .wechat-memory-month-picker-content,
    #wechat-discover-page .wechat-memory-friend-selector-content {
        background-color: #fffaf3 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (hover: hover) and (pointer: fine) {
    #wechat-discover-page .wechat-memory-friend-card:hover,
    #wechat-discover-page .wechat-memory-month-picker-item:hover,
    #wechat-discover-page .wechat-memory-header-action:hover,
    #wechat-discover-page .wechat-memory-back-btn:hover {
        box-shadow: var(--memory-watercolor-shadow) !important;
    }
}

@media (max-width: 380px) {
    #wechat-discover-page .wechat-memory-library-body,
    #wechat-discover-page .wechat-memory-space-body {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #wechat-discover-page .wechat-memory-calendar-card {
        padding: 12px !important;
    }

    #wechat-discover-page .wechat-memory-calendar-cell {
        border-radius: 15px 17px 14px 18px !important;
        font-size: 14px !important;
    }

    #wechat-discover-page .wechat-memory-friend-hero {
        gap: 11px !important;
        padding: 14px !important;
    }

    #wechat-discover-page .wechat-memory-friend-avatar,
    #wechat-discover-page .wechat-memory-space-avatar-img,
    #wechat-discover-page .wechat-memory-friend-avatar-placeholder {
        width: 50px !important;
        height: 50px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #wechat-discover-page .wechat-memory-friend-card,
    #wechat-discover-page .wechat-memory-header-action,
    #wechat-discover-page .wechat-memory-calendar-cell,
    #wechat-discover-page .wechat-memory-batch-generate-btn,
    #wechat-discover-page .wechat-memory-month-picker-item {
        transition: none !important;
    }
}

/* 微信视频功能：分享屏幕 */
.video-feature-choice-body {
    padding-top: 6px;
}

.video-feature-choice-hint,
.video-feature-choice-note {
    line-height: 1.5;
}

.video-feature-choice-note {
    margin-top: 12px;
    font-size: 12px;
    color: rgba(80, 80, 86, 0.72);
}

.video-feature-choice-grid {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.video-feature-choice-btn {
    border: 1px solid #ececec;
    background: #fafafa;
    border-radius: 16px;
    padding: 14px 15px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.video-feature-choice-btn--accent {
    border-color: rgba(7, 193, 96, 0.18);
    background: linear-gradient(135deg, rgba(7, 193, 96, 0.08) 0%, rgba(7, 193, 96, 0.02) 100%);
}

.video-feature-choice-btn-title {
    font-size: 15px;
    font-weight: 700;
    color: #202124;
}

.video-feature-choice-btn-sub {
    font-size: 12px;
    color: #666;
    line-height: 1.45;
}

.video-feature-choice-btn:active {
    opacity: 0.92;
}

.screen-share-global-root {
    position: fixed;
    inset: 0;
    /* 页面内最顶层：盖过情侣空间(100280)/主悬浮球(100400)等所有浮层 */
    z-index: 100600;
    pointer-events: none;
}

/* 直播区域占窗口宽约48.5%：372 * 0.485 ≈ 180px */
.screen-share-floating-window {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 66px);
    right: calc(env(safe-area-inset-right, 0px) + 16px);
    width: 372px;
    min-height: 450px;
    display: none;
    pointer-events: auto;
    filter: drop-shadow(0 16px 28px rgba(12, 14, 20, 0.26));
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.screen-share-floating-window.is-dragging {
    filter: drop-shadow(0 20px 36px rgba(12, 14, 20, 0.38));
    opacity: 0.92;
    cursor: grabbing;
}

.screen-share-floating-window.show {
    display: block;
}

.screen-share-frame-shell {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
}

.screen-share-frame-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
}

/* 必须高于相框图（z-index:2）：素材中间的白色区域不透明，直播画面要覆盖在白色区域上方 */
.screen-share-live-surface {
    position: absolute;
    left: 28%;
    top: 29.5%;
    width: 48.5%;
    height: 34.5%;
    border-radius: 7px;
    overflow: hidden;
    background: #0f1115;
    transform: rotate(-3.5deg);
    transform-origin: center center;
    z-index: 3;
}

.screen-share-video,
.screen-share-fallback-img,
.screen-share-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0f1115;
}

.screen-share-canvas {
    display: none;
}

/* 降级模式（手机浏览器不支持实时录屏）：小窗内显示用户上传的屏幕截图 */
.screen-share-fallback-img {
    display: none;
    object-fit: contain;
}

.screen-share-floating-window.is-fallback .screen-share-fallback-img {
    display: block;
}

.screen-share-floating-window.is-fallback .screen-share-video {
    display: none;
}

.screen-share-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-line;
    color: rgba(255, 255, 255, 0.9);
    background: linear-gradient(135deg, rgba(20, 22, 28, 0.96), rgba(54, 58, 70, 0.92));
    z-index: 3;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.screen-share-floating-window.is-live .screen-share-placeholder {
    display: none;
}

/* ===== 分享屏幕：悬浮到系统屏幕上（Document PiP 置顶窗口）的布局 ===== */
.screen-share-pip-body {
    margin: 0;
    overflow: hidden;
    background: #fff5f7;
}

.screen-share-global-root.pip-mode {
    position: fixed;
    inset: 0;
}

/* 进入 PiP 时 JS 会清空内联 left/top/right/transform，所以这里不需要 !important；
   去掉 !important 后用户在悬浮窗里长按拖拽产生的内联坐标才能生效 */
.screen-share-global-root.pip-mode .screen-share-floating-window {
    top: 4px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    /* 跟随悬浮窗大小缩放：宽度吃满 94vw，同时按相框 3:4 比例用 70vh 限高，
       保证用户把悬浮窗拉大时猫咪相框同步变大、拉小时也不溢出。
       Document PiP 仅存在于 Chrome/Edge 116+，min() 多参数在这些内核完全可用；
       移动端（iPhone/华为/小米等）走页面内小窗，不受此规则影响。 */
    width: min(94vw, 70vh, 640px);
    min-height: 0;
    filter: drop-shadow(0 10px 18px rgba(12, 14, 20, 0.22));
}

.screen-share-global-root.pip-mode .screen-share-mini-chat {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    height: min(48vh, 320px);
    max-height: 60vh;
}

/* ===== 分享屏幕：小窗点击菜单（少女漫画风配色） ===== */
.screen-share-menu {
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 6px;
    min-width: 148px;
    padding: 10px;
    border-radius: 20px;
    border: 2px solid rgba(255, 183, 197, 0.35);
    background: #fff5f7;
    box-shadow: 0 4px 20px rgba(255, 183, 197, 0.45), 0 10px 30px rgba(196, 181, 253, 0.18);
    pointer-events: auto;
}

.screen-share-menu.show {
    display: flex;
}

.screen-share-menu-item {
    border: none;
    border-radius: 999px;
    padding: 9px 14px;
    background: #ffb7c5;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 4px 15px rgba(255, 183, 197, 0.38);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.screen-share-menu-item:active {
    transform: scale(0.97);
}

.screen-share-menu-item:nth-child(2) {
    background: #c4b5fd;
    box-shadow: 0 4px 15px rgba(196, 181, 253, 0.38);
}

.screen-share-menu-item:nth-child(3) {
    background: #fde68a;
    color: #4a5568;
    box-shadow: 0 4px 15px rgba(253, 230, 138, 0.38);
}

.screen-share-menu-item--danger {
    background: transparent !important;
    color: #ffb7c5 !important;
    border: 2px solid rgba(255, 183, 197, 0.4) !important;
    box-shadow: none !important;
}

/* ===== 分享屏幕：便捷聊天悬浮迷你界面（少女漫画风） ===== */
.screen-share-mini-chat {
    position: absolute;
    right: calc(env(safe-area-inset-right, 0px) + 10px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    width: min(348px, 92vw);
    /* 高度自适应：不超过手机真机屏幕高度的一半 */
    height: min(48vh, 430px);
    max-height: 50vh;
    display: none;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px;
    border: 2px solid rgba(255, 183, 197, 0.35);
    background-color: #fff5f7;
    /* 网点纹理 screentone */
    background-image:
        radial-gradient(circle 2px at 20% 30%, rgba(255, 182, 193, 0.35) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 70% 20%, rgba(255, 182, 193, 0.28) 0%, transparent 100%),
        radial-gradient(circle 2px at 50% 70%, rgba(255, 182, 193, 0.3) 0%, transparent 100%);
    background-size: 56px 56px;
    box-shadow: 0 0 20px rgba(255, 183, 197, 0.25), 0 8px 30px rgba(196, 181, 253, 0.2);
    pointer-events: auto;
}

.screen-share-mini-chat.show {
    display: flex;
}

.screen-share-mini-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 8px;
    background: linear-gradient(135deg, #ffb7c5, #fecdd3);
    box-shadow: 0 3px 10px rgba(255, 183, 197, 0.3);
}

.screen-share-mini-chat-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.screen-share-mini-chat-close {
    flex: none;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #ffb7c5;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(255, 183, 197, 0.3);
    -webkit-tap-highlight-color: transparent;
}

/* 便捷聊天：头部表情按钮 */
.screen-share-mini-chat-emoji-btn {
    flex: none;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #ffb7c5;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(255, 183, 197, 0.3);
    -webkit-tap-highlight-color: transparent;
}

.screen-share-mini-chat-emoji-btn svg {
    width: 17px;
    height: 17px;
}

/* 便捷聊天：表情面板（展开在头部下方，读微信表情库）
   细粉色描边 + 四周留边距，与消息列表视觉分隔；滚动条隐形 */
.screen-share-mini-chat-emoji-panel {
    display: none;
    flex: none;
    max-height: 168px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 8px 10px 2px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.92);
    border: 1.5px solid rgba(255, 183, 197, 0.55);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(255, 183, 197, 0.16);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.screen-share-mini-chat-emoji-panel.show {
    display: block;
}

.ss-mini-emoji-category {
    font-size: 11px;
    font-weight: 700;
    color: #b0889a;
    margin: 6px 0 4px;
}

.ss-mini-emoji-category:first-child {
    margin-top: 0;
}

.ss-mini-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 6px;
}

.ss-mini-emoji-item {
    border: none;
    padding: 2px;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ss-mini-emoji-item:active {
    background: rgba(255, 183, 197, 0.2);
}

.ss-mini-emoji-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.ss-mini-emoji-empty {
    padding: 14px 4px;
    text-align: center;
    font-size: 12px;
    color: #b0889a;
}

.screen-share-mini-chat-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    /* 隐形滚动条：标准属性（Firefox）+ 旧 IE/Edge 属性，WebKit 内核走下方伪元素规则 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* 隐形滚动条：覆盖 Safari / Chrome / Edge / 夸克 / Via / 雨见等 WebKit & Blink 内核 */
.screen-share-mini-chat-list::-webkit-scrollbar,
.screen-share-mini-chat-emoji-panel::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

.ss-mini-row {
    display: flex;
}

.ss-mini-row--user {
    justify-content: flex-end;
}

.ss-mini-row--friend {
    justify-content: flex-start;
}

.ss-mini-row--system {
    justify-content: center;
}

/* 群聊便捷聊天：成员名标签竖排在气泡上方 */
.ss-mini-row--named {
    flex-direction: column;
    align-items: flex-start;
}

.ss-mini-name {
    font-size: 10px;
    line-height: 1.4;
    color: #b0889a;
    margin: 0 0 2px 8px;
}

.ss-mini-bubble {
    max-width: 82%;
    padding: 8px 12px;
    border-radius: 18px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.ss-mini-row--user .ss-mini-bubble {
    background: linear-gradient(135deg, #ffb7c5, #fecdd3);
    color: #fff;
    border-bottom-right-radius: 6px;
    box-shadow: 0 2px 10px rgba(255, 183, 197, 0.35);
}

.ss-mini-row--friend .ss-mini-bubble {
    background: rgba(255, 255, 255, 0.86);
    color: #4a5568;
    border: 2px solid rgba(255, 183, 197, 0.18);
    border-bottom-left-radius: 6px;
    box-shadow: 0 2px 10px rgba(255, 183, 197, 0.16);
}

/* 便捷聊天：表情/图片消息 */
.ss-mini-bubble img,
.ss-mini-bubble img.chat-emoji {
    display: block;
    max-width: 132px;
    max-height: 132px;
    width: auto;
    height: auto;
    border-radius: 10px;
    object-fit: contain;
}

/* 便捷聊天：语音消息（标签 + 文字转写） */
.ss-mini-bubble--voice {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.ss-mini-voice-tag {
    flex: none;
    margin-top: 1px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.55);
    color: #e290a5;
}

.ss-mini-row--friend .ss-mini-voice-tag {
    background: rgba(255, 183, 197, 0.22);
    color: #d97a93;
}

.ss-mini-row--system .ss-mini-bubble {
    max-width: 92%;
    padding: 4px 12px;
    background: rgba(255, 183, 197, 0.14);
    color: #b0889a;
    font-size: 11px;
    border-radius: 999px;
}

.ss-mini-typing .ss-mini-bubble {
    color: #c4b5fd;
    font-weight: 600;
}

.screen-share-mini-chat-inputbar {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px) * 0.4);
    background: rgba(255, 255, 255, 0.7);
    border-top: 1px solid rgba(255, 183, 197, 0.22);
}

.screen-share-mini-chat-input {
    flex: 1;
    min-width: 0;
    max-height: 84px;
    resize: none;
    border: 1px solid rgba(255, 183, 197, 0.3);
    border-radius: 18px;
    padding: 8px 14px;
    background: #fff;
    color: #4a5568;
    font-size: 13px;
    line-height: 1.45;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.screen-share-mini-chat-input:focus {
    border-color: rgba(255, 183, 197, 0.65);
    box-shadow: 0 0 0 3px rgba(255, 183, 197, 0.18);
}

.screen-share-mini-chat-input::placeholder {
    color: rgba(255, 183, 197, 0.6);
}

.screen-share-mini-chat-send {
    flex: none;
    border: none;
    border-radius: 999px;
    padding: 9px 18px;
    background: #ffb7c5;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 183, 197, 0.5);
    transition: transform 0.25s ease, opacity 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.screen-share-mini-chat-send:active {
    transform: scale(0.96);
}

.screen-share-mini-chat-send:disabled {
    opacity: 0.55;
    cursor: default;
}

/* 便捷聊天：「接收」按钮（描边样式区别于「发送」，接收中禁用变灰） */
.screen-share-mini-chat-receive {
    flex: none;
    border: 1.5px solid rgba(255, 183, 197, 0.65);
    border-radius: 999px;
    padding: 8px 14px;
    background: #fff;
    color: #e98aa2;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(255, 183, 197, 0.25);
    transition: transform 0.25s ease, opacity 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.screen-share-mini-chat-receive:active {
    transform: scale(0.96);
}

.screen-share-mini-chat-receive:disabled {
    opacity: 0.55;
    cursor: default;
}

html[data-appearance="dark"] .video-feature-choice-note,
html[data-appearance="dark"] .video-feature-choice-btn-sub {
    color: rgba(235, 235, 245, 0.7);
}

html[data-appearance="dark"] .video-feature-choice-btn-title {
    color: #f5f5f7;
}

html[data-appearance="dark"] .video-feature-choice-btn {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 420px) {
    /* 窄屏真机：再放大会盖满聊天区，封顶到接近全宽的 86vw */
    .screen-share-floating-window {
        top: calc(env(safe-area-inset-top, 0px) + 58px);
        right: calc(env(safe-area-inset-right, 0px) + 8px);
        width: min(318px, 86vw);
        min-height: 386px;
    }

}

@media (max-height: 680px) {
    .screen-share-floating-window {
        width: min(294px, 84vw);
        min-height: 356px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-feature-choice-btn,
    .screen-share-floating-window {
        transition: none !important;
    }
}

/* =====================================================================
   微信视频通话 · ins 清冷感 Frutiger Aero 风格
   低饱和蓝灰为主，少量低饱和青/绿做点缀；毛玻璃面板 + 大圆角 + 顶部高光。
   兼容性：backdrop-filter 全部带 -webkit- 前缀并配不透明底色兜底；
   动效只用 opacity/transform，避免低端安卓机重排闪屏。
   ===================================================================== */

#video-call-global-root.video-call-global-root {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 100150;
    overflow: hidden;
}

/* 显隐用 visibility + opacity（display 切换会让魅族/Vivo/OPPO 等机型的
   GPU 合成层销毁重建，露出一帧黑屏） */
.video-call-layer {
    position: absolute;
    inset: 0;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.22s ease;
    /* 清冷低饱和蓝灰渐变兜底（自定义背景图未加载/未设置时） */
    background: linear-gradient(176deg, #e3eaf1 0%, #ccd9e4 36%, #b3c5d3 72%, #a3b6c5 100%);
}

.video-call-layer:not(.show) {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.video-call-background-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    pointer-events: none;
}

.video-call-layer.has-custom-bg .video-call-background-img {
    display: block;
}

/* 自定义背景上盖一层冷调薄纱，统一进清冷色调 */
.video-call-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(228, 236, 243, 0.42) 0%, rgba(196, 210, 222, 0.30) 46%, rgba(158, 176, 192, 0.46) 100%);
}

.video-call-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
    gap: 10px;
}

/* ---- 顶栏：左换背景 / 中标题计时 / 右缩小 ---- */

.video-call-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
}

.video-call-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38));
    color: #5b7186;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(91, 113, 134, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.16s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.video-call-icon-btn svg {
    width: 20px;
    height: 20px;
}

.video-call-icon-btn:active {
    transform: scale(0.95);
}

.video-call-topbar-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 0;
}

.video-call-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #51677c;
}

.video-call-timer {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.12em;
    color: rgba(91, 113, 134, 0.78);
}

/* ---- 双视频框架 ---- */

.video-call-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex: 0 0 auto;
}

.video-call-frame {
    position: relative;
    aspect-ratio: 3 / 4;
    min-height: 150px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: linear-gradient(180deg, rgba(214, 224, 233, 0.92), rgba(176, 192, 206, 0.92));
    box-shadow: 0 10px 26px rgba(74, 96, 117, 0.20);
    -webkit-tap-highlight-color: transparent;
}

.video-call-frame--char {
    cursor: pointer;
}

.video-call-char-img,
.video-call-user-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
}

.video-call-user-video.is-mirrored {
    transform: scaleX(-1);
}

.video-call-char-placeholder,
.video-call-user-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    color: #5d7388;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(214, 231, 234, 0.55), rgba(0, 0, 0, 0) 60%),
        linear-gradient(180deg, rgba(222, 231, 238, 0.96), rgba(187, 202, 214, 0.96));
}

.video-call-char-placeholder {
    font-size: 44px;
    font-weight: 600;
    color: rgba(93, 115, 136, 0.82);
}

.video-call-user-placeholder {
    cursor: pointer;
}

/* Aero 顶部高光：上半区白色渐变玻璃光泽 */
.video-call-frame-gloss {
    position: absolute;
    inset: 0 0 auto 0;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.04));
}

.video-call-frame-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: calc(100% - 16px);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(244, 248, 250, 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 11px;
    color: #506679;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 低饱和青绿点缀：在线呼吸点 */
.video-call-live-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8fbcab;
    box-shadow: 0 0 0 3px rgba(143, 188, 171, 0.22);
    animation: video-call-live-breath 2.4s ease-in-out infinite;
}

@keyframes video-call-live-breath {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.video-call-frame-tip {
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(244, 248, 250, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 10px;
    color: rgba(80, 102, 121, 0.85);
    pointer-events: none;
}

/* 反转镜头：线性 UI 按钮 */
.video-call-flip-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(244, 248, 250, 0.55);
    color: #5b7186;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}

.video-call-flip-btn svg {
    width: 17px;
    height: 17px;
}

.video-call-flip-btn:active {
    transform: scale(0.95);
}

.video-call-status {
    flex: 0 0 auto;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: rgba(81, 103, 124, 0.85);
}

/* ---- 通话内聊天区 ---- */

.video-call-chat {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(238, 243, 247, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 26px rgba(74, 96, 117, 0.14);
    overflow: hidden;
}

.video-call-chat-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 隐形滚动条：保留滚动能力但不显示滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 12px 12px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Chrome / Safari / 各安卓 WebView：彻底隐藏聊天区滚动条 */
.video-call-chat-list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.vc-chat-row {
    display: flex;
}

.vc-chat-row--user {
    justify-content: flex-end;
}

.vc-chat-row--friend {
    justify-content: flex-start;
}

.vc-chat-row--system {
    justify-content: center;
}

.vc-chat-bubble {
    max-width: 82%;
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.55;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    color: #41566a;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.66);
    box-shadow: 0 3px 10px rgba(91, 113, 134, 0.08);
}

/* User 气泡：低饱和蓝 */
.vc-chat-row--user .vc-chat-bubble {
    background: linear-gradient(180deg, rgba(168, 195, 216, 0.92), rgba(143, 173, 198, 0.92));
    border-color: rgba(255, 255, 255, 0.4);
    color: #f4f8fb;
    border-bottom-right-radius: 6px;
}

/* Char 气泡：雾白玻璃 */
.vc-chat-row--friend .vc-chat-bubble {
    border-bottom-left-radius: 6px;
}

.vc-chat-row--system .vc-chat-bubble {
    max-width: 92%;
    padding: 3px 12px;
    font-size: 11px;
    color: rgba(91, 113, 134, 0.75);
    background: rgba(238, 243, 247, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
    text-align: center;
}

.vc-chat-typing .vc-chat-bubble {
    color: rgba(91, 113, 134, 0.65);
    font-style: normal;
    animation: video-call-live-breath 1.6s ease-in-out infinite;
}

.vc-chat-bubble img {
    max-width: 150px;
    max-height: 150px;
    border-radius: 10px;
    display: block;
}


/* ---- 三段式消息：旁白「」/ 台词“”/ 翻译（） ---- */

.vc-chat-row--hint {
    justify-content: center;
    font-size: 11px;
    color: rgba(91, 113, 134, 0.6);
    padding: 6px 0;
}

.vc-chat-bubble .vc-seg {
    display: block;
}

.vc-seg--narration {
    font-size: 11.5px;
    line-height: 1.55;
    color: rgba(91, 113, 134, 0.78);
    font-style: italic;
    margin-bottom: 2px;
}

.vc-seg--dialogue {
    font-size: 13px;
    line-height: 1.55;
    color: #3c5165;
}

.vc-chat-row--user .vc-chat-bubble .vc-seg--dialogue {
    color: #f4f8fb;
}

.vc-seg--translation {
    font-size: 11px;
    line-height: 1.5;
    color: rgba(91, 113, 134, 0.62);
    margin-top: 1px;
}

.vc-seg--plain {
    font-size: 13px;
    line-height: 1.55;
}

/* Char 语音条：Minimax 配音回放按钮 */
.vc-chat-audio-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid rgba(143, 188, 171, 0.5);
    background: rgba(189, 216, 205, 0.5);
    color: #3f6052;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s ease;
}

.vc-chat-audio-btn:active {
    transform: scale(0.95);
}

/* ---- 心跳监控（通话内面板） ---- */

.video-call-icon-btn.has-new {
    color: #c96a6a;
    animation: video-call-live-breath 1.4s ease-in-out infinite;
}

.video-call-heartbeat-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 56px;
    bottom: 86px;
    z-index: 6;
    display: none;
    flex-direction: column;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(246, 250, 252, 0.92);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 44px rgba(74, 98, 122, 0.22);
    overflow: hidden;
}

.video-call-heartbeat-panel.show {
    display: flex;
}

.video-call-heartbeat-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.45);
}

.video-call-heartbeat-title {
    font-size: 12px;
    font-weight: 600;
    color: #41566a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-call-heartbeat-close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(143, 173, 198, 0.4);
    background: rgba(255, 255, 255, 0.7);
    color: #5b7186;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.video-call-heartbeat-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 16px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #41566a;
}

.video-call-heartbeat-body img {
    max-width: 100%;
}

.video-call-heartbeat-empty {
    padding: 26px 8px;
    text-align: center;
    font-size: 12px;
    color: rgba(91, 113, 134, 0.6);
}

/* ---- 呼叫中过渡屏：邀请阶段只显示此屏，模型 accept 后才进通话面板 ---- */

.video-call-invite-screen {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: calc(env(safe-area-inset-top, 0px) + 24px) 24px calc(env(safe-area-inset-bottom, 0px) + 40px);
    text-align: center;
}

.video-call-layer.is-inviting .video-call-invite-screen {
    display: flex;
}

.video-call-layer.is-inviting .video-call-panel {
    display: none;
}

.video-call-invite-avatar-wrap {
    position: relative;
    width: 104px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-call-invite-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(143, 173, 198, 0.55);
    animation: video-call-invite-ring 2.2s ease-out infinite;
    pointer-events: none;
}

.video-call-invite-ring--delay {
    animation-delay: 1.1s;
}

@keyframes video-call-invite-ring {
    0% { transform: scale(1); opacity: 0.85; }
    100% { transform: scale(1.65); opacity: 0; }
}

.video-call-invite-avatar,
.video-call-invite-avatar-placeholder {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 12px 30px rgba(74, 98, 122, 0.28);
    object-fit: cover;
    background: rgba(255, 255, 255, 0.6);
}

.video-call-invite-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 600;
    color: #5b7186;
}

.video-call-invite-name {
    margin-top: 4px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #3c5165;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.video-call-invite-status {
    font-size: 13px;
    color: rgba(91, 113, 134, 0.85);
    animation: video-call-live-breath 1.8s ease-in-out infinite;
}

.video-call-invite-cancel {
    margin-top: 34px;
}

/* ---- 输入栏：输入框 + 接收 + 发送 ---- */

.video-call-inputbar {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 10px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(244, 248, 250, 0.5);
}

.video-call-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 38px;
    max-height: 96px;
    padding: 9px 13px;
    resize: none;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.5;
    color: #41566a;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.video-call-input::placeholder {
    color: rgba(91, 113, 134, 0.5);
}

.video-call-input:focus {
    border-color: rgba(143, 173, 198, 0.85);
    box-shadow: 0 0 0 4px rgba(143, 173, 198, 0.16);
}

.video-call-receive-btn,
.video-call-send-btn {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

/* 接收：低饱和青绿点缀 */
.video-call-receive-btn {
    background: linear-gradient(180deg, rgba(189, 216, 205, 0.94), rgba(157, 192, 178, 0.94));
    color: #3f6052;
    box-shadow: 0 4px 12px rgba(143, 188, 171, 0.28);
}

.video-call-receive-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* 发送：低饱和蓝 */
.video-call-send-btn {
    background: linear-gradient(180deg, rgba(168, 195, 216, 0.96), rgba(134, 166, 192, 0.96));
    color: #f4f8fb;
    box-shadow: 0 4px 12px rgba(110, 142, 168, 0.32);
}

.video-call-receive-btn:active,
.video-call-send-btn:active {
    transform: scale(0.95);
}

/* ---- 底栏：挂断 ---- */

.video-call-bottombar {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

.video-call-hangup-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    padding: 0 26px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: linear-gradient(180deg, rgba(216, 167, 167, 0.95), rgba(196, 134, 134, 0.95));
    color: #fdf6f6;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(178, 120, 120, 0.34);
    transition: transform 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}

.video-call-hangup-btn svg {
    width: 20px;
    height: 20px;
}

.video-call-hangup-btn:active {
    transform: scale(0.95);
}

/* ---- 缩小后的悬浮小窗：仅 User 视频框（轻点展开 / 长按拖动） ---- */

.video-call-mini {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 76px);
    right: calc(env(safe-area-inset-right, 0px) + 14px);
    width: 112px;
    aspect-ratio: 3 / 4;
    display: none;
    pointer-events: auto;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: linear-gradient(180deg, rgba(214, 224, 233, 0.96), rgba(176, 192, 206, 0.96));
    box-shadow: 0 12px 28px rgba(57, 78, 99, 0.30);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.video-call-mini.show {
    display: block;
}

.video-call-mini.is-dragging {
    box-shadow: 0 18px 38px rgba(57, 78, 99, 0.42);
}

.video-call-mini-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-call-mini-video.is-mirrored {
    transform: scaleX(-1);
}

.video-call-mini-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #5d7388;
}

.video-call-mini-meta {
    position: absolute;
    left: 6px;
    bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(40, 54, 66, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
}

.video-call-mini-timer {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: rgba(244, 248, 251, 0.95);
}

/* ---- 小屏/矮屏适配 ---- */

@media (max-height: 700px) {
    .video-call-frame {
        aspect-ratio: 4 / 4.4;
        min-height: 124px;
    }

    .video-call-panel {
        gap: 8px;
    }
}

/* aspect-ratio 兜底：极老内核（部分搜狗/旧版 Via）不支持时给固定高度 */
@supports not (aspect-ratio: 3 / 4) {
    .video-call-frame {
        height: 200px;
    }

    .video-call-mini {
        height: 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-call-layer,
    .video-call-icon-btn,
    .video-call-flip-btn,
    .video-call-receive-btn,
    .video-call-send-btn,
    .video-call-hangup-btn {
        transition: none !important;
    }

    .video-call-live-dot,
    .vc-chat-typing .vc-chat-bubble {
        animation: none !important;
    }
}