* {
    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;
}

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

#voice-call-global-root .voice-call-layer:not(.show) {
    display: 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: 6px;
    }
    
    .function-icon {
        width: 25px;
        height: 25px;
    }
    
    .function-icon img {
        width: 100%;
        height: 100%;
    }
    
    .function-name {
        font-size: 11px;
    }
    
    .bottom-nav {
        left: 12px;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom, 0px));
        padding: 6px 8px;
    }
    
    .nav-icon {
        width: 36px;
        height: 36px;
    }
    
    .nav-name {
        font-size: 10px;
    }
}

/* 窄屏：并排宽度不足（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;
        gap: var(--home-top-gap);
    }

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

    .quick-functions {
        width: min(166px, 100%);
        max-width: min(166px, calc(100% - 4px));
    }

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

.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: #e0ddd5;
    background-color: var(--home-default-page-bg);
    transition: background-color 0.35s ease;
    /* 音乐卡片底边与悬浮底栏顶边间距 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;
}

/* 主题编辑页 */
.theme-page-root {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #f0f2f5;
}

.theme-page-root.active {
    display: flex;
}

.theme-page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    flex-shrink: 0;
}

.theme-page-header .back-btn {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.theme-page-header h1 {
    font-size: 18px;
    font-weight: 600;
    color: #111;
    margin: 0;
}

.theme-page-header-spacer {
    position: absolute;
    right: 16px;
    width: 36px;
    height: 1px;
}

.theme-page-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 12px 100px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.theme-page-body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.theme-section-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.theme-section-head {
    margin-bottom: 12px;
}

.theme-section-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #111;
}

.theme-section-hint {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    line-height: 1.4;
}

.theme-section-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.theme-thumb-wrap {
    width: 88px;
    height: 88px;
    border-radius: 10px;
    border: 1px dashed #ccc;
    background: #fafafa;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-thumb-wrap.has-image {
    border-style: solid;
    border-color: #e0e0e0;
}

.theme-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.theme-thumb-placeholder {
    font-size: 12px;
    color: #aaa;
    padding: 8px;
    text-align: center;
}

.theme-section-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.theme-btn {
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    cursor: pointer;
}

.theme-btn-secondary {
    background: #07c160;
    color: #fff;
}

.theme-btn-secondary:active {
    opacity: 0.9;
}

.theme-btn-ghost {
    background: #f5f5f5;
    color: #555;
}

.theme-icons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.theme-icon-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.theme-icon-preview {
    width: 100%;
    aspect-ratio: 1;
    max-width: 64px;
    padding: 0;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    background: #fafafa;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.theme-icon-label {
    font-size: 11px;
    color: #444;
}

.theme-mini-link {
    border: none;
    background: none;
    color: #576b95;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 0;
}

.theme-font-preview-block {
    border: 1px solid #e8edf2;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fa 100%);
    padding: 14px;
}

.theme-font-sample {
    color: #33404d;
    line-height: 1.65;
    font-size: 20px;
    word-break: break-word;
}

.theme-font-sample-title {
    font-size: 0.9em;
    font-weight: 600;
    margin-bottom: 8px;
}

.theme-font-sample-line + .theme-font-sample-line {
    margin-top: 6px;
}

.theme-font-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.theme-text-input {
    width: 100%;
    border: 1px solid #dbe3ea;
    border-radius: 10px;
    background: #fff;
    padding: 11px 12px;
    font-size: 13px;
    color: #2f3b47;
    outline: none;
    box-sizing: border-box;
}

.theme-text-input:focus {
    border-color: #8ea4b8;
    box-shadow: 0 0 0 3px rgba(142, 164, 184, 0.14);
}

.theme-font-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.theme-font-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-font-slider-label {
    flex-shrink: 0;
    font-size: 13px;
    color: #4a5968;
}

.theme-font-size-range {
    flex: 1;
    accent-color: #7f97ab;
}

.theme-font-size-value {
    min-width: 42px;
    text-align: right;
    font-size: 12px;
    color: #708395;
}

.theme-page-footer {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.theme-footer-btn {
    flex: 1;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: 15px;
    cursor: pointer;
}

.theme-footer-cancel {
    background: #f0f0f0;
    color: #333;
}

.theme-footer-save {
    background: #07c160;
    color: #fff;
}

.stub-app-body {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.stub-app-text {
    font-size: 15px;
    color: #888;
}

.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-app-content--settings .phone-note-card.phone-settings-wallpaper-card {
    cursor: default;
    user-select: auto;
    position: relative;
}
.phone-app-content--settings .phone-note-card.phone-settings-wallpaper-card:active,
.phone-app-content--settings .phone-note-card.phone-settings-wallpaper-card:focus-within {
    transform: none;
}

.phone-settings-wallpaper-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.phone-settings-wallpaper-label {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: #5d4037;
}
.phone-settings-wallpicker-select {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(123, 145, 179, 0.38);
    padding: 6px 12px;
    font-size: 14px;
    color: #23324a;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 2px rgba(59, 77, 109, 0.06);
}

.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-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.phone-settings-page-title,
.phone-settings-summary,
.phone-settings-group-label {
    padding-left: 0;
    padding-right: 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;
}

/* [moved] 购物应用（#shopping-page / 购物车 / 我的 等）→ love-mi-shopping.css */

.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-sprite {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.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-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

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

.chat-gift-empty {
    color: #888;
    font-size: 14px;
    padding: 16px 0;
    line-height: 1.5;
}

.chat-gift-item-name {
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
}

.chat-gift-item-meta {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

.chat-gift-item-info {
    flex: 1;
    min-width: 0;
}

.chat-gift-send-btn {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    padding: 7px 12px;
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.chat-gift-send-btn:active {
    opacity: 0.88;
}

.chat-gift-check {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 4px;
}

.chat-gift-check input {
    width: 18px;
    height: 18px;
    accent-color: #ff7eb3;
}

.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;
}

/* [moved] 该段已迁至 twitter.css —— ① 推特核心：首页 / 详情 / 评论 / composer / 弹窗 / 转发去向 / DM 转发富卡 + keyframes(twitter-spin, twitterDetailForwardMenuIn)（原 L5681-L7510） */

/* 主屏幕内容区：块级纵向堆叠 + 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-color: var(--home-default-page-bg, #e0ddd5);
    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;
    will-change: transform;
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0.25, 1);
}

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

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

.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--dark {
    background: rgba(32, 32, 36, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.08),
        0 0 20px rgba(110, 150, 255, 0.12);
}

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(16px, 3vh, 24px);
    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-caption {
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(42, 42, 42, 0.45);
    margin: 6px 0 10px;
}

.sub-screen-caption--tail {
    margin-bottom: 4px;
}

.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: 16px 14px 18px;
    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: 128px;
}

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

.sub-screen-slot-film {
    flex: 1;
    min-width: 0;
    min-height: 128px;
    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: 3;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    font-size: 16px;
    color: transparent;
    background: transparent;
    border: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
}

.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;
    margin-top: 14px;
    text-align: center;
    font-family: "Segoe Script", "Apple Chancery", "Snell Roundhand", "Bradley Hand", cursive;
    font-size: clamp(10px, 2.9vw, 12px);
    line-height: 1.45;
    color: rgba(243, 245, 250, 0.92);
    padding: 10px 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sub-screen-split {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    margin-top: 2px;
    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;
}

.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--dark {
    background: #3a3a3a;
}

.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--dark .sub-screen-action-label {
    color: #f0f0f0;
}

.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;
}

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

/* 子屏快捷图标：资源放在项目内 assets/sub-screen-icons/，相对路径便于 http / file 协议加载 */
.sub-screen-action-icon--calc {
    position: relative;
    background: url('assets/line-icons/calc.svg') center / contain no-repeat;
}

.sub-screen-action-icon--calc::before {
    display: none;
}

.sub-screen-action-icon--camera {
    background: url('assets/line-icons/movie.svg') center / contain no-repeat;
    box-shadow: none;
}

.sub-screen-action-icon--camera::after {
    display: none;
}

.sub-screen-action-icon--clock {
    /* AO3：仅放大图标 2px（容器不变） */
    background: url('assets/line-icons/ao3.svg') center / 42px 42px no-repeat;
    border: none;
    box-sizing: border-box;
}

.sub-screen-action-icon--clock::before,
.sub-screen-action-icon--clock::after {
    display: none;
}

.sub-screen-action-icon--gear {
    background: url('assets/line-icons/gear.svg') center / contain no-repeat;
}

.sub-screen-action-icon--gear::before,
.sub-screen-action-icon--gear::after {
    display: none;
}

.sub-screen-action-icon--game {
    background: url('assets/line-icons/game.svg') center / contain no-repeat;
}

.sub-screen-action-icon--game::before,
.sub-screen-action-icon--game::after {
    display: none;
}


/* 子屏四格快捷入口：尺寸对齐主屏快捷（设置/购物/世界书/主题） */
.sub-screen-split .sub-screen-actions {
    gap: 14px;
    grid-template-columns: repeat(2, 74px);
    grid-template-rows: repeat(2, 74px);
    justify-content: center;
    align-content: center;
    transform: translateX(10px);
}

.sub-screen-split .sub-screen-actions .sub-screen-action {
    width: 74px;
    height: 74px;
    padding: 9px 8px;
    border-radius: 18px;
    gap: 6px;
}

.sub-screen-split .sub-screen-actions .sub-screen-action-icon {
    width: 25px;
    height: 25px;
    border-radius: 9px;
}

.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;
    }
}

/* [moved] 系统页面样式 → love-mi-system-page.css */

/* 状态栏样式 */
.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;
}

/* 电池图标样式 */
/* 兼容旧结构：如仍存在 battery-icon/battery-img，不再强制白底 */
.battery-icon::after { background: transparent; }

/* 主卡片样式（上封面区 + 头像压线 + 下半信息区；米色整卡底已去除，由上下分区磨砂承担） */
.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% 高度区域，点击换背景；无底色素覆层，保留图片原色。
   整块约 85% 不透明（15% 透），透出背后主屏/卡片底微弱层次 */
.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: 0.85;
    transition: opacity 0.3s ease;
}

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

/* 下层内容区：与购物格子同款玻璃（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: 28px;
    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;
}

/* 与主卡片→快捷区之间留白；不用 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;
}

/* 音乐播放器外槽：与底栏留白见 #home-screen 变量 */
.home-music-slot {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    container-type: inline-size;
    container-name: homeslot;
}

/* 主界面音乐播放器：横向卡片（略压缩高度利落实测一屏） */
.music-player-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: clamp(96px, 34vw, 118px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: linear-gradient(135deg, #E8F4F0 0%, #E9E7F5 100%);
    border-radius: clamp(20px, 5.2vw, 28px);
    padding: 8px 12px;
    margin: 0;
    box-shadow: 0 12px 28px rgba(112, 128, 165, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.44);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0.88;
}

.music-upload-input { display: none; }

.music-player-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-height: 0;
    gap: 9px;
}

.music-album-wrap {
    height: 100%;
    max-height: 100%;
    width: auto;
    max-width: 36%;
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: clamp(8px, 2.4cqw, 12px);
    overflow: hidden;
    background: #d8d8dc;
    cursor: pointer;
    position: relative;
}

.music-album-art {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.music-album-placeholder {
    font-size: clamp(26px, 8cqw, 40px);
    color: rgba(0, 0, 0, 0.22);
}

.music-upload-hint {
    font-size: clamp(8px, 2.4cqw, 10px);
    color: rgba(0, 0, 0, 0.38);
    margin-top: 4px;
    text-align: center;
    padding: 0 4px;
}

.music-album-art.has-cover .music-album-placeholder,
.music-album-art.has-cover .music-upload-hint {
    display: none;
}

.music-player-col {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2px;
}

.music-player-header-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.music-track-meta {
    flex: 1;
    min-width: 0;
}

.music-title,
.music-artist {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-title {
    font-size: clamp(11px, 3.1cqw, 14px);
    font-weight: 700;
    color: #2d3748;
    letter-spacing: -0.01em;
}

.music-artist {
    font-size: clamp(9px, 2.5cqw, 12px);
    font-weight: 400;
    color: #4a5568;
    margin-top: 2px;
    opacity: 0.85;
}

/* 更多 ⋯ */
.music-more-wrap {
    flex-shrink: 0;
    position: relative;
}

.music-more-btn {
    width: clamp(26px, 7cqw, 32px);
    height: clamp(26px, 7cqw, 32px);
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: linear-gradient(135deg, #E8F4F0 0%, #E9E7F5 100%);
    color: #4a5568;
    font-size: clamp(18px, 5cqw, 22px);
    line-height: 1;
    cursor: pointer;
    border-radius: 12px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(112, 128, 165, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.music-more-btn:hover {
    background: linear-gradient(135deg, rgba(232, 244, 240, 0.95) 0%, rgba(233, 231, 245, 0.95) 100%);
}

.music-more-dropdown {
    display: none;
    position: absolute;
    top: 0;
    right: 100%;
    margin-top: 0;
    margin-right: 6px;
    min-width: 160px;
    max-width: min(240px, 85vw);
    padding: 8px 0;
    background: linear-gradient(135deg, #E8F4F0 0%, #E9E7F5 100%);
    border-radius: 18px;
    box-shadow: 0 16px 32px rgba(112, 128, 165, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.42);
    z-index: 120;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.music-more-dropdown.show {
    display: block;
}

.music-more-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    text-align: left;
    font-size: 14px;
    color: #2d3748;
    cursor: pointer;
}

.music-more-item:hover {
    background: rgba(255, 255, 255, 0.22);
}

.music-more-item.music-repeat-btn.active,
.music-more-item.main-music-island-listen-together-btn.active {
    font-weight: 600;
}

.music-more-volume-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: default;
}

.music-more-volume-row:hover {
    background: transparent;
}

.music-more-vol-label {
    font-size: 13px;
    color: #44536c;
    flex-shrink: 0;
}

.music-volume-slider {
    flex: 1;
    min-width: 0;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(95, 114, 141, 0.18);
    border-radius: 999px;
    outline: none;
}

.music-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #bcc6df 0%, #e9e7f5 52%, #d0dde3 100%);
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 10px rgba(112, 128, 165, 0.18);
}

.music-volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #bcc6df 0%, #e9e7f5 52%, #d0dde3 100%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(112, 128, 165, 0.18);
}

.music-progress {
    margin-top: 0;
}

.music-progress-bar {
    position: relative;
    height: clamp(14px, 4cqw, 18px);
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
}

.music-progress-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: clamp(3px, 1cqw, 4px);
    background: rgba(95, 114, 141, 0.16);
    border-radius: 999px;
    pointer-events: none;
}

.music-progress-fill {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: clamp(5px, 1.5cqw, 7px);
    background: linear-gradient(90deg, #bcc6df 0%, #e9e7f5 52%, #d0dde3 100%);
    border-radius: 999px;
    width: 0%;
    min-width: 0;
    max-width: 100%;
    pointer-events: none;
    z-index: 1;
}

.music-progress-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(9px, 2.8cqw, 12px);
    height: clamp(9px, 2.8cqw, 12px);
    background: linear-gradient(135deg, #bcc6df 0%, #e9e7f5 52%, #d0dde3 100%);
    border-radius: 50%;
    left: 0%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.52), 0 4px 10px rgba(112, 128, 165, 0.16);
    pointer-events: none;
    z-index: 2;
}

.music-time {
    display: flex;
    justify-content: space-between;
    font-size: clamp(8px, 2.2cqw, 10px);
    color: rgba(0, 0, 0, 0.45);
    margin-top: 1px;
}

/* 主控：上一首 / 播放 / 下一首 */
.music-controls-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(7px, 2.4cqw, 12px);
    margin-top: 0;
    padding-bottom: 0;
}

.music-controls-main .music-skip-btn {
    width: clamp(28px, 7.5cqw, 34px);
    height: clamp(28px, 7.5cqw, 34px);
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: linear-gradient(135deg, rgba(232, 244, 240, 0.88) 0%, rgba(233, 231, 245, 0.88) 100%);
    font-size: clamp(13px, 3.8cqw, 17px);
    color: #2d3748;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    padding: 0;
    box-shadow: 0 8px 18px rgba(112, 128, 165, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.music-controls-main .music-skip-btn:hover {
    background: linear-gradient(135deg, rgba(232, 244, 240, 0.95) 0%, rgba(233, 231, 245, 0.95) 100%);
}

.music-lyrics-toggle-btn svg {
    width: clamp(16px, 4.4cqw, 20px);
    height: clamp(16px, 4.4cqw, 20px);
    display: block;
}

.music-lyrics-toggle-btn.active {
    color: #243247;
    background: linear-gradient(135deg, rgba(210, 219, 240, 1) 0%, rgba(248, 245, 255, 1) 50%, rgba(220, 235, 242, 1) 100%);
    box-shadow: 0 10px 22px rgba(83, 104, 146, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.music-controls-main .music-play-btn {
    width: clamp(32px, 9cqw, 40px);
    height: clamp(32px, 9cqw, 40px);
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: linear-gradient(135deg, rgba(232, 244, 240, 0.96) 0%, rgba(233, 231, 245, 0.96) 100%);
    color: #2d3748;
    font-size: clamp(12px, 3.4cqw, 15px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    padding: 0;
    box-shadow: 0 10px 20px rgba(112, 128, 165, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.music-controls-main .music-play-btn:hover {
    background: linear-gradient(135deg, rgba(232, 244, 240, 1) 0%, rgba(233, 231, 245, 1) 100%);
}

/* 无容器查询时 cqw 会回退为视口相关行为；提供 vw 兜底 */
@supports not (width: 1cqw) {
    .music-player-card {
        padding: 7px 11px;
    }
    .music-player-row {
        gap: 9px;
    }
    .music-album-wrap {
        max-width: 36%;
    }
    .music-title {
        font-size: clamp(11px, 3.1vw, 14px);
    }
    .music-artist {
        font-size: clamp(9px, 2.5vw, 12px);
    }
    .music-controls-main {
        gap: clamp(7px, 2.4vw, 12px);
    }
    .music-controls-main .music-skip-btn {
        width: clamp(28px, 7.5vw, 34px);
        height: clamp(28px, 7.5vw, 34px);
        font-size: clamp(13px, 3.8vw, 17px);
    }
    .music-controls-main .music-play-btn {
        width: clamp(32px, 9vw, 40px);
        height: clamp(32px, 9vw, 40px);
        font-size: clamp(12px, 3.4vw, 15px);
    }
}

/* 播放列表 / 联网搜歌模态：须盖过主屏灵动岛与悬浮球容器(100350) */
.music-playlist-modal.modal,
.music-search-modal.modal,
.music-local-upload-modal.modal,
.music-lyrics-modal.modal {
    z-index: 100410;
}

/*
 * 播放列表：与 #main-music-island 同属 #app 坐标系。.modal 默认 position:fixed 相对视口，
 * 小手机外框有外边距时留白与灵动岛错位；改为 absolute 铺满 #app。
 * 另：全局 .modal.show 垂直居中会让卡片顶端与灵动岛重叠，改为贴顶留白。
 */
.music-playlist-modal.modal {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.music-playlist-modal.modal.show {
    --playlist-modal-top-clearance: calc(env(safe-area-inset-top, 0px) + clamp(104px, 26vmin, 212px));
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    padding-top: var(--playlist-modal-top-clearance);
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}

.music-playlist-modal.modal.show .music-playlist-content {
    max-height: min(
        calc(70vh + 15px),
        calc(
            100% - var(--playlist-modal-top-clearance) - max(16px, env(safe-area-inset-bottom, 0px)) - 12px
        )
    );
}

.music-playlist-modal .music-playlist-content {
    max-width: 335px;
    width: 90%;
    max-height: calc(70vh + 15px);
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* 联网搜歌模态框（复用播放列表的视觉规范） */
.music-search-modal .music-search-content {
    max-width: 360px;
    width: 92%;
    max-height: 76vh;
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.music-local-upload-modal .music-local-upload-content,
.music-lyrics-modal .music-lyrics-content {
    max-width: 350px;
    width: 92%;
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.music-search-bar {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.music-search-input {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    outline: none;
    font-size: 14px;
}

.music-search-input:focus {
    border-color: rgba(0, 0, 0, 0.35);
}

.music-search-btn {
    height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: 10px;
    background: #1a1a1a;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
}

.music-search-btn:hover {
    background: #333;
}

.music-search-status {
    padding: 10px 16px;
    font-size: 12px;
    color: #777;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.music-search-status:empty {
    display: none;
}

.music-search-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    min-height: 140px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.music-search-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.music-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background 0.2s;
}

.music-search-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.music-search-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.06);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.35);
    font-weight: 700;
}

.music-search-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.music-search-meta {
    flex: 1;
    min-width: 0;
}

.music-search-title {
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-search-artist {
    font-size: 12px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-search-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.music-search-add,
.music-search-play {
    height: 30px;
    padding: 0 10px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 12px;
}

.music-search-play {
    background: rgba(0, 0, 0, 0.06);
    color: #333;
}

.music-search-play:hover {
    background: rgba(0, 0, 0, 0.1);
}

.music-search-add {
    background: #16a34a;
    color: #fff;
}

.music-search-add:hover {
    background: #12823c;
}

.music-upload-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px 16px;
}

.music-upload-panel-track {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.04);
    color: #333;
}

.music-upload-panel-track span,
.music-upload-panel-track strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-upload-panel-track span {
    font-size: 13px;
}

.music-upload-panel-track strong {
    font-size: 12px;
    color: #777;
    font-weight: 500;
}

.music-lyrics-editor-shell {
    padding: 0;
    overflow: hidden;
}

.music-lyrics-editor {
    width: 100%;
    min-height: 92px;
    max-height: 180px;
    resize: vertical;
    border: none;
    outline: none;
    background: transparent;
    color: #333;
    font-size: 13px;
    line-height: 1.55;
    padding: 12px 14px;
    font-family: 'LoveMiMusicLyrics', 'LoveMiOfflineNarration', 'Songti SC', serif;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.music-lyrics-editor::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.music-lyrics-editor::placeholder {
    color: rgba(0, 0, 0, 0.45);
}

.music-lyrics-editor:disabled {
    opacity: 0.58;
}

.music-upload-panel-btn,
.music-lyrics-url-btn {
    min-height: 36px;
    border: none;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.06);
    color: #333;
    font-size: 14px;
    cursor: pointer;
}

.music-upload-panel-btn:hover,
.music-lyrics-url-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.music-upload-panel-btn-primary {
    background: #1a1a1a;
    color: #fff;
}

.music-upload-panel-btn-primary:hover {
    background: #333;
}

.music-upload-panel-btn-danger {
    background: rgba(220, 53, 69, 0.12);
    color: #b42334;
}

.music-upload-panel-btn-danger:hover {
    background: rgba(220, 53, 69, 0.2);
}

.music-lyrics-url-row {
    display: flex;
    gap: 8px;
}

.music-lyrics-url-input {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 11px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    outline: none;
    font-size: 13px;
}

.music-lyrics-url-input:focus {
    border-color: rgba(0, 0, 0, 0.35);
}

.music-lyrics-url-btn {
    width: 58px;
    flex-shrink: 0;
}


.music-playlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

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

.music-playlist-close {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    border-radius: 4px;
}

.music-playlist-close:hover {
    background: rgba(0, 0, 0, 0.05);
}

.music-playlist-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    min-height: 120px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.music-playlist-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.music-playlist-empty {
    padding: 24px 16px;
    text-align: center;
    color: #999;
    font-size: 14px;
}

.music-playlist-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.music-playlist-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.music-playlist-item.active {
    background: rgba(0, 0, 0, 0.06);
    font-weight: 500;
}

.music-playlist-item-index {
    width: 24px;
    font-size: 12px;
    color: #999;
}

.music-playlist-item-info {
    flex: 1;
    min-width: 0;
}

.music-playlist-item-title {
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-playlist-item-artist {
    font-size: 12px;
    color: #999;
}

.music-playlist-item-missing .music-playlist-item-title {
    color: #999;
}

.music-playlist-item-lyrics,
.music-playlist-item-delete {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #666;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 0;
}

.music-playlist-item-lyrics svg {
    width: 16px;
    height: 16px;
}

.music-playlist-item-lyrics.has-lyrics {
    background: rgba(22, 163, 74, 0.14);
    color: #15803d;
}

.music-playlist-item-lyrics:hover {
    background: rgba(22, 163, 74, 0.2);
    color: #15803d;
}

.music-playlist-item-delete:hover {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

.music-playlist-footer {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.music-playlist-add-btn,
.music-playlist-cancel-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.music-playlist-add-btn {
    background: #1a1a1a;
    color: #fff;
}

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

.music-playlist-cancel-btn {
    background: rgba(0, 0, 0, 0.06);
    color: #333;
}

.music-playlist-cancel-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.music-desktop-lyrics {
    position: absolute;
    left: 50%;
    bottom: 108px;
    /* 与 #main-music-island 同档：须高于全屏页（微信/一起看书/旅行约会等 100135～100280+），否则「显示歌词」已开但看不见 */
    z-index: 100355;
    width: min(320px, calc(100% - 42px));
    min-width: 180px;
    min-height: 48px;
    height: 68px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: rgba(255, 255, 255, 0.96);
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    transform: none;
    transition: opacity 0.35s ease, text-shadow 0.35s ease;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    overflow: visible;
    pointer-events: none;
}

.music-desktop-lyrics.show {
    display: flex;
}

.music-desktop-lyrics.is-idle {
    opacity: 0.52;
}

.music-desktop-lyrics.dragging,
.music-desktop-lyrics.resizing {
    opacity: 0.96;
    cursor: grabbing;
}

.music-desktop-lyrics-inner {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
}

.music-desktop-lyrics-text,
.music-desktop-lyrics-next {
    width: auto;
    max-width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'LoveMiMusicLyrics', 'LoveMiOfflineNarration', 'Songti SC', serif;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.72), 0 0 2px rgba(0, 0, 0, 0.78);
    pointer-events: auto;
}

.music-desktop-lyrics-text {
    font-size: clamp(17px, 5cqw, 24px);
    line-height: 1.18;
    font-weight: 600;
}

.music-desktop-lyrics-next {
    font-size: clamp(12px, 3.2cqw, 16px);
    line-height: 1.12;
    opacity: 0.68;
}

.music-desktop-lyrics-resize {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 12px;
    height: 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.58);
    border-bottom: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 2px;
    cursor: nwse-resize;
    opacity: 0;
    pointer-events: auto;
    transition: opacity 0.2s ease;
}

.music-desktop-lyrics:hover .music-desktop-lyrics-resize,
.music-desktop-lyrics.resizing .music-desktop-lyrics-resize {
    opacity: 0.55;
}

.music-desktop-lyrics-resize::before {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 8px;
    height: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.42);
    border-bottom: 1px solid rgba(255, 255, 255, 0.42);
}

/* 小屏：音乐区由 .left-section flex + margin-top:auto 上推，不再用大固定 margin */
@media (max-width: 340px) {
    .music-controls-main {
        gap: 10px;
    }

    .music-player-card {
        height: 108px;
    }
}

/* 日期显示模块 */
.date-clock {
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.clock {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.clock-face {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.clock-number {
    position: absolute;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.clock-12 {
    top: 10px;
}

.clock-3 {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.clock-6 {
    bottom: 10px;
}

.clock-9 {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.clock-center {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ff6b6b;
    z-index: 10;
}

.clock-hand {
    position: absolute;
    background: #333;
    transform-origin: bottom center;
    border-radius: 2px;
}

.hour-hand {
    width: 3px;
    height: 26px;
    top: 29px;
    background: #333;
    z-index: 5;
}

.minute-hand {
    width: 2px;
    height: 40px;
    top: 15px;
    background: #666;
    z-index: 6;
}

.second-hand {
    width: 1px;
    height: 44px;
    top: 11px;
    background: #ff6b6b;
    z-index: 7;
}

.clock-day {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
}

/* 快捷功能（垂直下移由 .home-top-row margin-top 承担）；网格间距加大，四键不挤在一起 */
.quick-functions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 3.5vw, 18px);
    width: min(166px, calc((100% - var(--home-top-gap, 28px)) / 2));
    max-width: calc((100% - var(--home-top-gap, 28px)) / 2);
    flex-shrink: 1;
    min-width: 0;
    margin-top: 0;
}

/* 锁屏（今日一句弹窗等）：已迁至 lock-screen.css */
.function-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(7px, 2vw, 10px) clamp(5px, 1.8vw, 9px);
    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: clamp(16px, 4.6vw, 20px);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, opacity 0.25s 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(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0.88;
    border: 1px solid rgba(255, 255, 255, 0.44);
    width: 100%;
    max-width: min(78px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}

.function-item:hover {
    background: linear-gradient(135deg, rgba(194, 203, 228, 0.88) 0%, rgba(237, 235, 247, 0.88) 50%, rgba(214, 227, 233, 0.88) 100%);
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(112, 128, 165, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.function-icon {
    margin-bottom: clamp(4px, 1vw, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 9px;
    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);
}

.function-icon img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.function-name {
    font-size: clamp(10px, 2.7vw, 12px);
    font-weight: 600;
    color: #46556f;
    margin-top: clamp(3px, 0.8vw, 5px);
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* 底部导航 */
.bottom-nav {
    position: absolute;
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    left: 50%;
    right: auto;
    width: 360px;
    max-width: calc(100% - 28px);
    transform: translateX(-50%);
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    padding: 9px 10px;
    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: 26px;
    box-shadow: 0 12px 28px rgba(112, 128, 165, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0.88;
    border: 1px solid rgba(255, 255, 255, 0.44);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 7px 6px;
    border-radius: 18px;
    transition: all 0.3s ease;
    position: relative;
    flex: 1;
    max-width: 72px;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
}

.nav-icon {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    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);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.nav-icon img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.nav-item:hover .nav-icon {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.nav-name {
    font-size: 10px;
    font-weight: 500;
    color: #666;
    transition: color 0.3s ease;
}

.nav-item:hover .nav-name {
    color: #999;
}

/* 模态框样式 */
/* 设置页面样式 */
#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;
}

/* [moved] 世界书页面样式 → love-mi-world-book.css */
.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-arrow {
    font-size: 14px;
    color: #999;
}

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

.appearance-mode-content {
    display: flex;
    flex-direction: column;
}

.appearance-mode-group {
    padding: 18px;
}

.appearance-mode-intro {
    margin-bottom: 18px;
}

.appearance-mode-title {
    font-size: 18px;
    font-weight: 700;
    color: #1c1c1e;
    margin-bottom: 8px;
}

.appearance-mode-copy {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
}

.appearance-mode-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.appearance-mode-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 247, 251, 0.94) 100%);
    padding: 14px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(.2,.9,.2,1), box-shadow 0.22s cubic-bezier(.2,.9,.2,1), border-color 0.22s ease, background 0.22s ease;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
    position: relative;
    overflow: hidden;
}

.appearance-mode-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 34%);
    pointer-events: none;
}

.appearance-mode-card:hover {
    transform: translateY(-1px);
}

.appearance-mode-card.is-selected {
    border-color: rgba(10, 132, 255, 0.92);
    box-shadow: 0 14px 30px rgba(10, 132, 255, 0.16);
    transform: translateY(-2px) scale(1.01);
}

.appearance-mode-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.appearance-mode-card-label {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: -0.01em;
}

.appearance-mode-card-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(148, 163, 184, 0.58);
    background: rgba(255, 255, 255, 0.88);
    position: relative;
    flex: 0 0 auto;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
    transition: transform 0.22s cubic-bezier(.2,.9,.2,1), border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.appearance-mode-card.is-selected .appearance-mode-card-check {
    border-color: #0a84ff;
    background: radial-gradient(circle at 35% 30%, #5db2ff 0%, #0a84ff 68%, #0067d8 100%);
    box-shadow: 0 6px 14px rgba(10, 132, 255, 0.3);
    transform: scale(1.04);
}

.appearance-mode-card.is-selected .appearance-mode-card-check::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 4px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.appearance-preview {
    border-radius: 20px;
    padding: 12px;
    min-height: 176px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.appearance-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.appearance-preview-light {
    background: linear-gradient(180deg, #fbfbfd 0%, #eef1f6 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 6px 18px rgba(15, 23, 42, 0.06);
}

.appearance-preview-light::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 38%);
}

.appearance-preview-dark {
    background: linear-gradient(180deg, #2c2c2e 0%, #111214 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 18px rgba(0, 0, 0, 0.26);
}

.appearance-preview-dark::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 32%);
}

.appearance-preview-status,
.appearance-preview-header,
.appearance-preview-card,
.appearance-preview-list span,
.appearance-preview-tabbar span {
    display: block;
    border-radius: 999px;
}

.appearance-preview-status {
    height: 10px;
    width: 42%;
    opacity: 0.86;
}

.appearance-preview-header {
    height: 16px;
    width: 58%;
    opacity: 0.92;
}

.appearance-preview-card {
    height: 56px;
    border-radius: 18px;
}

.appearance-preview-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.appearance-preview-list span:nth-child(1) { height: 12px; width: 78%; }
.appearance-preview-list span:nth-child(2) { height: 12px; width: 66%; }
.appearance-preview-list span:nth-child(3) { height: 12px; width: 72%; }

.appearance-preview-tabbar {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    align-items: end;
}

.appearance-preview-tabbar span {
    height: 12px;
}

.appearance-preview-light .appearance-preview-status,
.appearance-preview-light .appearance-preview-header,
.appearance-preview-light .appearance-preview-list span,
.appearance-preview-light .appearance-preview-tabbar span {
    background: rgba(60, 60, 67, 0.18);
}

.appearance-preview-light .appearance-preview-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 249, 252, 0.95) 100%);
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
}

.appearance-preview-dark .appearance-preview-status,
.appearance-preview-dark .appearance-preview-header,
.appearance-preview-dark .appearance-preview-list span,
.appearance-preview-dark .appearance-preview-tabbar span {
    background: rgba(255, 255, 255, 0.18);
}

.appearance-preview-dark .appearance-preview-card {
    background: linear-gradient(180deg, rgba(58, 58, 60, 0.98) 0%, rgba(44, 44, 46, 0.96) 100%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
}

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"] .sub-screen-action-icon--calc,
html[data-appearance="dark"] .sub-screen-action-icon--camera,
html[data-appearance="dark"] .sub-screen-action-icon--clock,
html[data-appearance="dark"] .sub-screen-action-icon--gear,
html[data-appearance="dark"] .sub-screen-action-icon--game {
    filter: var(--dark-line-icon-filter);
    opacity: 0.92;
}

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-color: 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-color: 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);
}

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-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"] .nav-item:hover .nav-icon {
    background: rgba(50, 50, 55, 0.88);
    color: #fff;
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.12),
        0 0 22px rgba(120, 175, 255, 0.2),
        0 6px 16px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}


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-page-root .theme-page-content,
html[data-appearance="dark"] .theme-page-content {
    background: linear-gradient(180deg, rgba(17, 18, 20, 0.86) 0%, rgba(28, 28, 30, 0.96) 100%);
}

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"] .theme-btn-light {
    background: rgba(58, 58, 60, 0.9);
    color: #f5f5f7;
    border-color: rgba(255, 255, 255, 0.08);
}

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%);
}

/* [moved] 该段已迁至 twitter.css —— ② 推特暗色基础：#twitter-page 子元素夜间覆盖（顶栏 / 字色 / 时间轴卡片 / .tweet 文本）（原 L13782-L13833） */

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,
html[data-appearance="dark"] .discover-list,
html[data-appearance="dark"] .discover-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,
html[data-appearance="dark"] .discover-item-name {
    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,
html[data-appearance="dark"] .discover-item-arrow {
    color: rgba(235, 235, 245, 0.62);
}

html[data-appearance="dark"] .discover-item:active {
    background: rgba(58, 58, 60, 0.96);
}

/* —— 夜间：无全局底图时整页深色系；有全局底时仅让交互层/面板深色磨砂；功能键统一边缘微光 —— */
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;
}

/* [moved] 该段已迁至 twitter.css —— ③ 推特暗色高级：#twitter-page.active / .twitter-page--profile-bleed / 按钮玻璃质感（原 L14166-L14228） */

/* #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-arrow {
    font-size: 14px;
    color: #999;
    transition: transform 0.2s ease;
}

.settings-disclosure[open] .settings-disclosure-arrow {
    transform: rotate(90deg);
}

.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;
}

.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;
}

.api-settings-item--column .api-settings-item-main {
    width: 100%;
}

.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-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    margin: 20px 0;
    box-sizing: border-box;
}

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

.modal-buttons {
    display: flex;
    gap: 0;
}

.modal-buttons button {
    flex: 1;
    padding: 16px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

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

.modal-buttons .cancel-btn:hover {
    background: #e5e5e5;
}

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

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

/* 选择预设模态框样式 */
.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) {
    #add-friend-modal.add-friend-page-shell {
        left: 0;
        top: 0;
        width: 100vw;
        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-close {
    display: none;
}

.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-container {
    margin-right: 10px;
}

.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;
}

.avatar-upload-hint {
    font-size: 14px;
    color: #666;
    text-align: center;
}

/* 昵称编辑区域 */
.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-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.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 {}

.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);
}

.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-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-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: 80%;
    font-size: 15px;
    z-index: 1;
    word-wrap: break-word;
    word-break: normal;
    white-space: normal;
    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;
}

/* 线下叙事：多段纵向排版；默认 inline-flex 为横向，会导致多段挤在一行 */
.chat-message-bubble.chat-message-bubble--offline {
    flex-direction: column;
    align-items: stretch;
    align-self: flex-start;
    gap: 0.4em;
}

/* 线下模式：取消对话框，无边框/阴影/背景 */
#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;
}

/* 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;
}

/* 「等待下一次重逢」折叠归档卡片 — 登机牌样式 */
.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;
    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: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-message.my-message .chat-message-timestamp {
    margin-left: 0;
    margin-right: 8px;
}

/* 消息操作界面 */
.message-action-menu {
    position: absolute;
    width: 330px;
    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-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: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;
    }
}

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

.select-all-btn:hover {
    background: #e0e0e0;
}

.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;
}

.full-backup-module-desc {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: #8a8a8a;
}

.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);
}

/* 微信收藏界面（全页） */
.favorites-page {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    flex-direction: column;
    background: #fff;
    z-index: 100;
}

.favorites-page.show {
    display: flex;
}

.favorites-page-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}

.favorites-back-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.favorites-page-title {
    flex: 1;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
}

.favorites-page-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.favorites-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 24px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.favorites-action-tip {
    flex-shrink: 0;
    padding: 8px 16px 10px;
    font-size: 12px;
    color: #999;
    background: #fff;
    border-bottom: 1px solid #f4f4f4;
}

.favorites-tab {
    font-size: 15px;
    color: #999;
    cursor: pointer;
}

.favorites-tab.active {
    color: #07c160;
    font-weight: 500;
}

.favorites-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.favorites-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
}

.favorites-empty-text {
    font-size: 16px;
    color: #999;
    margin-bottom: 8px;
}

.favorites-empty-hint {
    font-size: 13px;
    color: #bbb;
    line-height: 1.5;
}

/* 微信钱包界面 */
.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;
}

.wallet-bills-page-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}

.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;
}

.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);
}

.favorites-item-emoji {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

.favorites-item-meta {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
}

.favorites-item-delete {
    flex-shrink: 0;
    padding: 4px 8px;
    font-size: 12px;
    color: #999;
    background: transparent;
    border: none;
    cursor: pointer;
}

.favorites-item-delete:active {
    color: #ff4757;
}

.favorites-item-images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.favorites-item-images img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px;
}

.favorites-item-source-badge {
    font-size: 11px;
    color: #07c160;
    margin-left: 6px;
}

/* 发现页 - 朋友圈入口 */
.discover-list {
    background: #fff;
}

.discover-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.discover-item:active {
    background: #f5f5f5;
}

.discover-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 14px;
}


.memory-space-icon {
    background: linear-gradient(135deg, #8b7cff 0%, #5f6fff 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.discover-item-name {
    flex: 1;
    font-size: 16px;
    color: #111;
}

.discover-item-arrow {
    font-size: 18px;
    color: #ccc;
}

.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-spacer {
    width: 40px;
    flex-shrink: 0;
}

.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-kicker {
    display: none;
}

.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-friend-arrow {
    flex-shrink: 0;
    font-size: 18px;
    color: #c0c6d4;
}

.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;
}

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

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

/* 消息选择框样式 */
.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 {
    /* 随 #app 容器宽度（小手机视口）缩放，避免真机浏览器里工具钮大于底栏、挤出圆角区域 */
    --chat-tool-btn: clamp(26px, 9cqw, 36px);
    --chat-tool-icon: clamp(14px, 5cqw, 20px);
    display: flex;
    align-items: center;
    padding: clamp(8px, 2.2cqw, 12px) clamp(10px, 3.2cqw, 16px);
    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: clamp(6px, 2cqw, 12px);
    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;
}

.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: clamp(11px, 3.2cqw, 14px);
    font-weight: 600;
    line-height: 1;
}

@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: clamp(8px, 2cqw, 10px) clamp(12px, 3cqw, 16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.8);
    font-size: clamp(13px, 3.6cqw, 14px);
    outline: none;
    transition: all 0.3s ease;
}

.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-confirm-footer--single {
    justify-content: center;
}

.clear-chat-confirm-footer--single .clear-chat-confirm-btn {
    color: #1f63b8;
}

.clear-chat-confirm-footer--single .clear-chat-confirm-btn:hover {
    background: #f1f6ff;
}

.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;
}

/* 切换人设提示弹窗：清单式说明 */
.persona-switch-notice-modal-content {
    max-width: 440px;
}

.persona-switch-notice-content {
    padding: 28px 26px 24px;
    text-align: left;
}

.persona-switch-notice-title {
    font-size: 17px;
    font-weight: 700;
    color: #1f1f1f;
    line-height: 1.45;
    margin-bottom: 12px;
}

.persona-switch-notice-desc {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 10px;
}

.persona-switch-notice-list {
    margin: 0 0 14px;
    padding: 0 0 0 22px;
    color: #374151;
    font-size: 13.5px;
    line-height: 1.7;
}

.persona-switch-notice-list li {
    margin-bottom: 4px;
    list-style: disc;
}

.persona-switch-notice-warn {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(214, 51, 132, 0.08);
    border: 1px solid rgba(214, 51, 132, 0.18);
    color: #b03268;
    font-size: 13px;
    line-height: 1.6;
}

/* 删除并退出确认提示框 */
.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-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;
}

#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);
}

#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;
}

#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);
}

.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;
}

/* 群聊气泡 CSS 编辑器 */
.group-bubble-css-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-bubble-css-intro {
    margin-bottom: 12px;
}

.group-bubble-css-sub-label {
    display: block;
    margin: 10px 0 8px;
    font-size: 14px;
    color: #555;
}

.group-member-name--bubble-css {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.group-member-name--has-bubble-css {
    color: #07a050;
}

.group-member-name--has-bubble-css::after {
    content: ' CSS';
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    margin-left: 2px;
    vertical-align: 0.05em;
}

.group-bubble-css-textarea {
    width: 100%;
    min-height: 130px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 10px;
    padding: 12px;
    font-size: 13px;
    line-height: 1.45;
    background: rgba(245,245,245,0.9);
    box-sizing: border-box;
    outline: none;
    resize: vertical;
}

.group-bubble-css-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* 开关样式 */
.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);
}

.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;
}

.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;
}


/* 更多面板打开时，聊天内容底部留出空间，确保最后一条消息不被遮挡 */
.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-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 10px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    min-width: 180px;
    max-width: 260px;
    transition: all 0.28s ease;
}

.chat-dynamic-island.idle .dynamic-island-inner {
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    height: 25px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    background: radial-gradient(circle at center, #171717 0 16%, #7b4b2a 16% 19%, #0a0a0a 19% 72%, #1b1b1b 72% 100%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.chat-dynamic-island.idle .dynamic-island-inner::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 3px);
    opacity: 0.35;
    animation: dynamic-island-vinyl-spin 2.8s linear infinite;
}

.chat-dynamic-island.idle .dynamic-island-inner::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d6d6d6;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
    z-index: 1;
}

.dynamic-island-cover {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(145deg, #444, #333);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dynamic-island-placeholder {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
}

.dynamic-island-cover.has-cover {
    background-size: cover;
    background-position: center;
}

.dynamic-island-cover.has-cover .dynamic-island-placeholder {
    display: none;
}

.dynamic-island-info {
    flex: 1;
    min-width: 0;
}

.dynamic-island-track {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dynamic-island-artist {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.dynamic-island-more-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.95;
}

.dynamic-island-more:hover,
.dynamic-island-more.active {
    background: rgba(255, 255, 255, 0.28);
}

.dynamic-island-play {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.dynamic-island-play:hover {
    background: rgba(255, 255, 255, 0.35);
}

.dynamic-island-close {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    line-height: 1;
}

.dynamic-island-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.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-cover {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: transparent;
    position: relative;
    z-index: 2;
}

.chat-dynamic-island.idle .dynamic-island-cover.has-cover {
    background-image: none !important;
}

.chat-dynamic-island.idle .dynamic-island-placeholder {
    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;
}

.dynamic-island-panel-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dynamic-island-panel-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
}

.dynamic-island-panel-slider {
    width: 100%;
    accent-color: #ffffff;
}

.dynamic-island-panel-actions {
    display: flex;
    gap: 8px;
}

.dynamic-island-panel-btn {
    flex: 1;
    min-height: 34px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

.dynamic-island-panel-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}


/* 线下模式弹窗（聊天-更多-线下模式） */
.offline-mode-modal,
.offline-style-picker-modal,
.offline-style-new-modal,
.offline-style-rename-modal,
.offline-beautify-modal,
.offline-group-preset-picker-modal,
.offline-group-preset-edit-modal,
.offline-status-panel-modal {
    z-index: 2200;
}

.offline-mode-modal-content,
.offline-style-picker-content,
.offline-style-new-content,
.offline-beautify-content {
    width: 340px;
    max-width: 92%;
    background: linear-gradient(145deg, rgba(233, 231, 245, 0.95) 0%, rgba(188, 198, 223, 0.95) 48%, rgba(133, 120, 157, 0.95) 100%);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow: 0 14px 40px rgba(70, 74, 108, 0.18);
    overflow: hidden;
    backdrop-filter: blur(15px) saturate(1.04);
    -webkit-backdrop-filter: blur(15px) saturate(1.04);
}

.offline-mode-header,
.offline-style-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.08);
}

.offline-mode-header h3,
.offline-style-picker-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #4f5672;
}

.offline-group-preset-picker-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.offline-group-preset-io-wrap {
    position: relative;
    flex-shrink: 0;
}

.offline-group-preset-io-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 132px;
    padding: 6px;
    box-sizing: border-box;
    flex-direction: column;
    gap: 6px;
    z-index: 2300;
    background: linear-gradient(145deg, rgba(248, 246, 255, 0.98) 0%, rgba(220, 224, 240, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(70, 74, 108, 0.22);
}

.offline-group-preset-io-menu.show {
    display: flex;
}

.offline-group-preset-io-menu-item {
    width: 100%;
    margin: 0;
    justify-content: center;
    flex-shrink: 0;
}

.offline-group-preset-picker-modal .offline-style-picker-content {
    overflow: visible !important;
}

.offline-group-preset-io-symbol-btn {
    font-size: 17px;
    line-height: 1;
}

.offline-mode-close,
.offline-style-picker-add {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    font-size: 20px;
    color: #5d647e;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.offline-mode-body {
    padding: 16px;
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.offline-mode-body::-webkit-scrollbar,
.offline-style-picker-body::-webkit-scrollbar,
.offline-style-new-body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.offline-mode-field {
    margin-bottom: 14px;
}

.offline-mode-field:last-child {
    margin-bottom: 0;
}

.offline-mode-label {
    display: block;
    font-size: 13px;
    color: #5f667f;
    margin-bottom: 8px;
}

.offline-mode-input,
.offline-mode-select {
    width: 100%;
    padding: 12px 12px;
    border: 1px solid rgba(123, 132, 164, 0.22);
    border-radius: 12px;
    font-size: 15px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.72);
    color: #48506b;
}

.offline-mode-input:focus,
.offline-mode-select:focus {
    outline: none;
    border-color: rgba(116, 126, 164, 0.42);
    box-shadow: 0 0 0 3px rgba(233, 231, 245, 0.3);
}

.offline-mode-hint {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(86, 93, 118, 0.78);
}

.offline-mode-pov-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.offline-mode-pov-card {
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 14px;
    padding: 12px;
    background: rgba(255,255,255,0.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.offline-mode-pov-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.offline-mode-pov-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(233,231,245,0.96) 0%, rgba(188,198,223,0.96) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #4f5672;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.offline-mode-pov-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.offline-mode-pov-name {
    font-size: 14px;
    font-weight: 700;
    color: #4f5672;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offline-mode-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px;
    border: 1px solid rgba(123, 132, 164, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.28);
}

.offline-mode-segmented-option {
    display: block;
    min-width: 0;
}

.offline-mode-segmented-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.offline-mode-segmented-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    color: #5f667f;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.offline-mode-segmented-option input:checked + span {
    background: rgba(255, 255, 255, 0.76);
    color: #4f5672;
    box-shadow: 0 6px 14px rgba(70, 74, 108, 0.12);
}

.offline-mode-segmented-option input:focus-visible + span {
    outline: 2px solid rgba(116, 126, 164, 0.55);
    outline-offset: 2px;
}

.offline-mode-style-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.offline-mode-style-display {
    cursor: pointer;
}

.offline-mode-style-btn,
.offline-mode-beautify-entry,
.offline-mode-btn.confirm,
.offline-style-picker-add {
    background: linear-gradient(135deg, rgba(188, 198, 223, 0.92) 0%, rgba(133, 120, 157, 0.92) 100%);
    color: #fff;
}

.offline-mode-style-btn,
.offline-mode-beautify-entry {
    flex: 0 0 auto;
    padding: 12px 14px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
}

.offline-mode-beautify-entry {
    width: 100%;
    font-weight: 700;
    text-align: center;
}

.offline-mode-footer,
.offline-style-picker-footer,
.offline-style-new-footer {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.08);
}

.offline-mode-btn {
    flex: 1;
    padding: 12px 10px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    font-size: 15px;
    cursor: pointer;
}

.offline-mode-btn.cancel {
    background: rgba(255,255,255,0.18);
    color: #4f5672;
}

.offline-mode-btn.confirm:hover {
    filter: brightness(1.03);
}

.offline-style-picker-body {
    padding: 12px 10px;
    max-height: 52vh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.offline-beautify-body {
    padding: 14px 16px;
    max-height: 62vh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.offline-beautify-body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.offline-beautify-hint {
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.5;
}

.offline-beautify-hint code {
    padding: 1px 4px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.38);
    color: #48506b;
    font-size: 11px;
}

.offline-beautify-textarea {
    width: 100%;
    min-height: 270px;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid rgba(123, 132, 164, 0.22);
    border-radius: 14px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.76);
    color: #384158;
    font-family: Consolas, 'SFMono-Regular', 'Microsoft YaHei', monospace;
    font-size: 12.5px;
    line-height: 1.55;
    outline: none;
}

.offline-beautify-textarea:focus {
    border-color: rgba(116, 126, 164, 0.42);
    box-shadow: 0 0 0 3px rgba(233, 231, 245, 0.3);
}

.offline-beautify-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.offline-beautify-actions .offline-mode-btn {
    padding: 10px 6px;
    font-size: 13px;
}

/* 聊天记忆总结（更多->总结） */
.chat-summary-modal,
.chat-summary-prompt-picker-modal,
.chat-summary-prompt-create-modal {
    /* 必须高于长记忆界面（2260），否则会被遮住 */
    z-index: 2290;
}

.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-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 {
    padding: 16px;
}

.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-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-footer,
.chat-summary-prompt-picker-footer,
.chat-summary-prompt-create-footer {
    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-page（与 love咪 小手机可视区同大；.chat-offline-modals-layer 须为 #chat-page 直接子级） */
#chat-page .chat-offline-modals-layer {
    position: absolute;
    inset: 0;
    z-index: 2180;
    pointer-events: none;
}

#chat-page .chat-offline-modals-layer .modal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    overflow: hidden;
    background: transparent;
}

#chat-page .chat-offline-modals-layer .modal.show {
    pointer-events: auto;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

/* 状态检测卡片：不参与线下层「全屏 flex 外壳」，不靠遮罩/磨砂挡聊天；仅卡片本体可交互 */
#chat-page .chat-offline-modals-layer .offline-status-panel-modal.modal {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
}

#chat-page .chat-offline-modals-layer .offline-status-panel-modal.modal.show {
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
    pointer-events: none !important;
}

#chat-page .chat-offline-modals-layer .offline-status-panel-modal .offline-status-panel-content.modal-content {
    pointer-events: auto !important;
    /* 覆盖 #chat-page .modal-content 的玻璃半透明：头栏自有实底，正文区否则仍透出聊天 */
    background: linear-gradient(145deg, #f9f6f2 0%, #e6e0eb 52%, #cec6dd 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #dcd6e8 !important;
    box-shadow: 0 12px 32px rgba(74, 70, 92, 0.2) !important;
}

html[data-appearance="dark"] #chat-page .chat-offline-modals-layer .offline-status-panel-modal .offline-status-panel-content.modal-content {
    background: linear-gradient(145deg, #45404f 0%, #383545 52%, #2c2934 100%) !important;
    color: #f5f5f7 !important;
    border-color: #5d5969 !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
}

#chat-page .chat-offline-modals-layer .offline-mode-modal-content,
#chat-page .chat-offline-modals-layer .offline-style-picker-content,
#chat-page .chat-offline-modals-layer .offline-style-new-content,
#chat-page .chat-offline-modals-layer .offline-beautify-content {
    width: 100% !important;
    max-width: none !important;
    height: 100%;
    min-height: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#chat-page .chat-offline-modals-layer .offline-group-preset-picker-modal .offline-style-picker-content {
    overflow: visible !important;
}

#chat-page .chat-offline-modals-layer .offline-mode-header,
#chat-page .chat-offline-modals-layer .offline-style-picker-header,
#chat-page .chat-offline-modals-layer .offline-style-new-header {
    flex-shrink: 0;
}

#chat-page .chat-offline-modals-layer .offline-mode-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

#chat-page .chat-offline-modals-layer .offline-style-picker-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

#chat-page .chat-offline-modals-layer .offline-beautify-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#chat-page .chat-offline-modals-layer .offline-beautify-textarea {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: none;
    resize: none;
}

#chat-page .chat-offline-modals-layer .offline-style-new-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

#chat-page .chat-offline-modals-layer .offline-group-preset-textarea {
    min-height: 200px;
    max-height: none;
}

#chat-page .chat-offline-modals-layer .offline-mode-footer,
#chat-page .chat-offline-modals-layer .offline-style-picker-footer,
#chat-page .chat-offline-modals-layer .offline-style-new-footer {
    flex-shrink: 0;
}

.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;
}

.offline-style-picker-hint {
    padding: 0 4px 10px;
    margin: 0;
    line-height: 1.45;
}

.offline-style-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.offline-style-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid #eee;
    background: #fff;
    cursor: default;
}

.offline-style-item-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
}

.offline-style-item.active {
    border-color: rgba(7,193,96,0.55);
    box-shadow: 0 6px 18px rgba(7,193,96,0.12);
}

.offline-style-name {
    font-size: 14px;
    font-weight: 800;
    color: #333;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offline-style-badge {
    flex-shrink: 0;
    font-size: 12px;
    color: #07C160;
    font-weight: 800;
}

.offline-style-item-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.offline-style-action {
    padding: 6px 8px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
}

.offline-style-action--rename {
    background: #e8f8ef;
    color: #059a4f;
}

.offline-style-action--delete {
    background: #fff0f0;
    color: #c62828;
}

.offline-style-rename-hint {
    line-height: 1.45;
}

.offline-style-empty {
    padding: 18px 8px 8px;
    text-align: center;
    font-size: 13px;
    color: #999;
}

.offline-style-new-header {
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}

.offline-style-new-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #222;
}

.offline-style-new-body {
    padding: 16px;
}

.offline-style-new-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;
}

.offline-style-new-textarea:focus {
    outline: none;
    border-color: #07C160;
}

/* —— 多人群组线下聊天 · 成员人称网格（offline-mode-modal 内的群组分支） —— */
.offline-group-member-pov-grid {
    /* 自适应排布：每张卡至少 144px，自动多列；与 .offline-mode-pov-grid 共用样式 */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
    gap: 10px;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.offline-group-member-pov-grid::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.offline-group-pov-card {
    /* 与既有 .offline-mode-pov-card 视觉一致；这里只补充 min-width 防止挤压 */
    min-width: 0;
}

/* —— 多人群组线下聊天 · 预设列表条目 —— */
.offline-group-preset-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.offline-group-preset-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid #eee;
    background: #fff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.offline-group-preset-item.enabled {
    border-color: rgba(7, 193, 96, 0.55);
    box-shadow: 0 6px 18px rgba(7, 193, 96, 0.12);
}
.offline-group-preset-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    touch-action: none;
}
.offline-group-preset-item-main * {
    touch-action: none;
}
.offline-group-preset-item:not(.offline-group-preset-item--drag-ghost-src) {
    cursor: grab;
    -webkit-touch-callout: none;
    user-select: none;
}
.offline-group-preset-item-title {
    font-size: 14px;
    font-weight: 800;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.offline-group-preset-item-sub {
    font-size: 11px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.offline-group-preset-item-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: default;
    user-select: auto;
}

/* 长按拖动排序：原行变淡，浮层跟随指针 */
.offline-group-preset-item.offline-group-preset-item--drag-ghost-src {
    opacity: 0.38;
}
.offline-group-preset-item.offline-group-preset-item--drag-floating {
    position: fixed;
    z-index: 3100;
    margin: 0;
    pointer-events: none;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
    opacity: 0.96;
    cursor: grabbing;
}
.offline-group-preset-list.offline-group-preset-list--dragging {
    user-select: none;
}
body.offline-group-preset-dragging {
    cursor: grabbing;
    touch-action: none;
}

/* iOS 风格小开关：用于「激活该预设」 */
.offline-group-preset-toggle {
    position: relative;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
    display: inline-block;
    cursor: pointer;
}
.offline-group-preset-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.offline-group-preset-toggle-slider {
    position: absolute;
    inset: 0;
    background: #d9d9d9;
    border-radius: 999px;
    transition: background 0.18s ease;
}
.offline-group-preset-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease;
}
.offline-group-preset-toggle input:checked + .offline-group-preset-toggle-slider {
    background: #07c160;
}
.offline-group-preset-toggle input:checked + .offline-group-preset-toggle-slider::before {
    transform: translateX(16px);
}

/* —— 多人群组线下聊天 · 预设编辑弹窗（更宽，适合粘贴长 JSON） —— */
.offline-group-preset-edit-content {
    width: 360px;
    max-width: 94%;
}
.offline-group-preset-textarea {
    min-height: 240px;
    max-height: 50vh;
    font-family: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 12px;
    line-height: 1.5;
}

/* 主界面悬浮球：挂在 #app 内、各 .page 外；须高于情侣空间与各全屏子层(≤100280)，否则进入情侣空间等功能后「球消失」 */
/* API 快捷弹窗 .main-float-api-modal、音乐相关 .modal 须高于本容器，见同文件对应规则 */
.main-float-root {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 100350;
    /* 悬浮球逻辑使用相对本容器的 left/top，须用 absolute 而非 fixed（fixed 会相对视口跑出小手机框） */
}

.main-float-root .main-float-btn,
.main-float-root .main-float-panel {
    pointer-events: auto;
}

/* 主屏悬浮球：相对 .main-float-root，始终落在大手机里的「小手机」区域内 */
.main-float-root > .main-float-btn {
    position: absolute;
    right: 10px;
    top: 110px;
    left: auto;
    bottom: auto;
}

.main-float-root > .main-float-panel {
    position: absolute;
    right: auto;
}

/* 停靠时不再向左右挤出屏幕外，保持完全落在大手机内容区内（特异性高于下方 .is-docked-* 的 translateX） */
.main-float-root > .main-float-btn.is-docked-left,
.main-float-root > .main-float-btn.is-docked-right {
    transform: none;
}

.main-float-btn,
.offline-float-btn {
    border: none;
    border-radius: 50%;
    background: transparent;
    padding: 0;
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none; /* 便于拖拽；配合 pointermove preventDefault */
    transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
}

.main-float-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.offline-float-btn {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 10px;
    top: 110px;
    /* 独立于 .main-float-root；须高于聊天顶栏与各覆盖层以便拖动 */
    z-index: 100350;
}

.main-float-btn-img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    filter: saturate(1.08) contrast(1.04);
    pointer-events: none; /* 触摸命中统一落在 button，避免 Safari 对 img 长按/拖图片干扰 */
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.offline-float-btn-img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 16px;
    /* SVG 小彩球含卫星；contain 避免 cover 切掉角落 */
    object-fit: contain;
    filter: saturate(1.04) contrast(1.02);
    pointer-events: none; /* 触摸命中统一落在 button，避免 Safari 对 img 长按/拖图片干扰 */
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.main-float-btn:active,
.offline-float-btn:active {
    transform: scale(0.98);
}

.main-float-btn.dragging,
.offline-float-btn.dragging {
    opacity: 0.9;
    box-shadow: 0 12px 30px rgba(0,0,0,0.22);
}

.main-float-btn.is-idle {
    opacity: 0.52;
}

.offline-float-btn.is-idle {
    opacity: 0.52;
}

.main-float-btn.is-docked-left {
    transform: translateX(-20px);
}

.main-float-btn.is-docked-right {
    transform: translateX(20px);
}

/* iOS AssistiveTouch 风格：磨砂玻璃正方形快捷面板（3x3 网格，第 7 项居中） */
.main-float-panel {
    position: fixed; /* 线下悬浮球等若复用类名时保留；主屏内由 .main-float-root > .main-float-panel 覆盖为 absolute */
    top: 174px;
    right: 10px;
    z-index: 2;
    display: none;
    width: 150px;
    height: 150px;
    padding: 10px;
    border-radius: 20px;
    background: rgba(245, 245, 250, 0.75); /* 75% 不透明 = 25% 透明 */
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
    box-sizing: border-box;
}

.main-float-panel.show {
    display: grid;
}

.main-float-panel-btn {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
    padding: 4px 2px;
    background: transparent;
    color: rgba(28, 28, 32, 0.92);
    font-size: 9px;
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: background 0.15s ease, transform 0.12s ease;
}

.main-float-panel-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

.main-float-panel-btn:active {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0.94);
}

/* 第 7 项「手机」居中放在第三行第二格 */
.main-float-panel-btn:nth-child(7) {
    grid-column: 2;
}

.main-float-panel-btn-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(28, 28, 32, 0.88);
}

.main-float-panel-btn-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.main-float-panel-btn-label {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: rgba(28, 28, 32, 0.85);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 快捷 API 弹层：须高于 .main-float-root(100350) 与各情侣空间内抬升的 .modal */
.main-float-api-modal.modal {
    z-index: 100400;
}

.main-float-api-modal-content {
    width: 340px;
    max-width: 92%;
    border-radius: 26px;
    overflow: hidden;
}

.main-float-api-settings-content {
    padding: 8px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

.main-float-api-modal-content .settings-content.main-float-api-settings-content {
    flex: none;
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.main-float-api-sheet {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.main-float-api-label {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.03em;
}

.main-float-api-control {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    font-size: 14px;
    background: #fafafa;
    color: #1a1a1a;
}

.main-float-api-control:focus {
    outline: none;
    border-color: #07C160;
    background: #fff;
}

.main-float-api-select {
    cursor: pointer;
}

.main-float-models-list {
    max-height: 160px;
    overflow-y: auto;
    margin-top: 0;
    border-radius: 12px;
}

.main-float-api-sheet .main-float-fetch-models-btn {
    width: 100%;
    margin: 0;
    min-height: 44px;
    border-radius: 12px;
    box-sizing: border-box;
}

.main-float-api-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 0;
    padding-top: 4px;
}

.main-float-api-modal-actions .wallet-modal-btn {
    flex: 1;
}

.main-music-island {
    /* 相对 #app（小手机框）定位，避免 fixed 相对浏览器视口跑出框外 */
    position: absolute;
    top: 84px;
    left: 50%;
    transform: translateX(-50%);
    /* 略高于 .main-float-root，避免全屏图层下灵动岛仍被埋没 */
    z-index: 100355;
    display: none;
    /* 避免父层吞掉命中，导致全屏 scrim 收不到点击 */
    pointer-events: none;
}

.main-music-island.show {
    display: block;
}

.main-music-island-shell,
.main-music-island-expanded,
.main-music-island-expanded-scrim {
    pointer-events: auto;
}

/* 展开态：全屏透明层，点击空白处收起（底图上的假控件由 HUD 白底遮盖） */
.main-music-island-expanded-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: default;
}

.main-music-island.expanded .main-music-island-expanded-scrim {
    display: block;
}

.main-music-island-shell {
    position: relative;
    z-index: 1;
    width: min(268px, 88vw);
    height: 56px;
    border: none;
    border-radius: 28px;
    padding: 0 14px 0 8px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #2d3748;
    background: linear-gradient(135deg, #E8F4F0 0%, #E9E7F5 100%);
    box-shadow: 0 14px 32px rgba(112, 128, 165, 0.18);
    cursor: pointer;
    transition: opacity 0.4s ease;
    touch-action: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

.main-music-island .main-music-island-player-card {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    cursor: default;
    touch-action: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

.main-music-island .main-music-island-player-card.dragging {
    opacity: 0.96;
    cursor: grabbing;
}

.main-music-island-shell.dragging {
    opacity: 0.92;
    cursor: grabbing;
}

.main-music-island-shell.is-idle {
    opacity: 0.4;
}

.main-music-island-shell-artwrap {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.main-music-island-compact-art {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.main-music-island-shell-row {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-left: 6px;
}

.main-music-island-compact-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 600;
    text-shadow: none;
}

.main-music-island-compact-play {
    flex-shrink: 0;
    font-size: 17px;
    line-height: 1;
    text-shadow: none;
}

/* 展开态：与主屏 .music-player-card 同一套横向毛玻璃卡片（仅样式；逻辑仍用原 id 绑定） */
.main-music-island-expanded {
    display: none;
    width: min(340px, 94vw);
    margin-top: 10px;
    background: transparent;
    overflow: visible;
    box-shadow: none;
    border-radius: 0;
    container-type: inline-size;
    container-name: mainisle;
}

.main-music-island.expanded .main-music-island-expanded {
    display: block;
    position: relative;
    z-index: 3;
}

.main-music-island.expanded .main-music-island-shell {
    display: none;
}

.main-music-island .main-music-island-player-card {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    cursor: default;
}

.main-music-island .main-music-island-player-card .music-player-row {
    flex: 1;
    min-height: clamp(88px, 30cqw, 110px);
}

.main-music-island .main-music-island-album-wrap {
    cursor: default;
}

/* 展开区无独立 home slot 容器名，沿用 mainisle 供 cqw 回落 */
@supports not (width: 1cqw) {
    .main-music-island .main-music-island-player-card {
        min-height: 96px;
    }
    .main-music-island .main-music-island-player-card .music-player-row {
        min-height: 88px;
    }
}

.main-music-island .main-music-island-ctrls {
    flex-shrink: 0;
    margin-top: 1px;
}

.main-music-island-more-wrap {
    position: relative;
}

/* 主屏灵动岛「更多」：菜单不透明度 85%，避免底层聊天/底图透过毛玻璃干扰音量条识别 */
.main-music-island-more-wrap .music-more-dropdown {
    z-index: 5000;
    background: linear-gradient(
            135deg,
            rgba(232, 244, 240, 0.85) 0%,
            rgba(233, 231, 245, 0.85) 100%
        )
        !important;
    border: 1px solid rgba(255, 255, 255, 0.48) !important;
    box-shadow:
        0 16px 34px rgba(112, 128, 165, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

html[data-appearance="dark"] .main-music-island-more-wrap .music-more-dropdown {
    background: linear-gradient(135deg, rgba(38, 42, 52, 0.85) 0%, rgba(44, 48, 58, 0.85) 52%, rgba(32, 36, 44, 0.85) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* 音量滑轨在主菜单上对比略增强（仍沿用全局 .music-volume-slider 形状） */
.main-music-island-more-wrap .music-volume-slider {
    background: rgba(95, 114, 141, 0.38);
}

/* 日间：高亮磨砂白 */
html[data-appearance="light"] .main-float-panel {
    background: rgba(245, 245, 250, 0.75);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 14px 28px rgba(32, 44, 74, 0.16);
}

html[data-appearance="light"] .main-float-panel-btn,
html[data-appearance="light"] .main-float-panel-btn-icon,
html[data-appearance="light"] .main-float-panel-btn-label {
    color: rgba(28, 28, 32, 0.9);
}

html[data-appearance="light"] .main-float-panel-btn:hover {
    background: rgba(255, 255, 255, 0.45);
}

/* 夜间：磨砂深色玻璃 */
html[data-appearance="dark"] .main-float-panel {
    background: rgba(28, 28, 32, 0.55);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
}

html[data-appearance="dark"] .main-float-panel-btn,
html[data-appearance="dark"] .main-float-panel-btn-icon,
html[data-appearance="dark"] .main-float-panel-btn-label {
    color: rgba(245, 245, 250, 0.92);
}

html[data-appearance="dark"] .main-float-panel-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

html[data-appearance="dark"] .main-float-panel-btn:active {
    background: rgba(255, 255, 255, 0.18);
}


.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;
    padding: 0 !important;
    max-width: 280px;
}

.chat-lt-music-text {
    font-size: 14px;
    line-height: 1.5;
    color: #3a2330;
    margin-bottom: 8px;
    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%);
    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-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--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）：气泡为 inline-flex 默认横向，拍立得后与正文会并排挤压；改为纵向堆叠 */
.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;
    -webkit-tap-highlight-color: transparent;
    margin: 0 auto;
    flex-shrink: 0;
}

.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%;
    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: linear-gradient(145deg, #d8d6d3 0%, #9c9a97 48%, #b5b3b0 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.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: 8px;
    border-radius: 2px;
    border: 1px dashed rgba(60, 60, 60, 0.18);
    pointer-events: none;
    z-index: 1;
}

.chat-photo-polaroid-imgarea--front {
    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: 8px;
    color: rgba(38, 38, 38, 0.92);
    text-align: center;
    padding: 12px 10px;
    height: 100%;
    box-sizing: border-box;
}

.chat-photo-back-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.chat-photo-back-hint {
    font-size: 11px;
    opacity: 0.82;
    line-height: 1.35;
    max-width: 11em;
}

.chat-photo-front {
    transform: rotateY(180deg);
}

.chat-photo-front-text {
    position: relative;
    z-index: 0;
    padding: 12px 11px;
    font-size: 13px;
    line-height: 1.65;
    font-weight: 300;
    color: #55504b;
    letter-spacing: 0.35px;
    text-align: justify;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    max-height: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    box-sizing: border-box;
}

/* 转账消息气泡 */
.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;
}
.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;
}
.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);
}
.chat-transfer-status {
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
    color: #59657d;
    margin-top: 7px;
}
.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--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-hit--static {
    cursor: default;
    pointer-events: none;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.emoji-panel-delete {
    padding: 5px 10px;
    border: 1px solid #ff4d4f;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    color: #ff4d4f;
    border-radius: 4px;
}

.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;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.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;
}

.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;
}

.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;
}

.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);
}

/* 添加表情对话框 */
.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-input:focus {
    outline: none;
    border-color: #07C160;
    box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.1);
}

.chat-pat-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    margin-left: 10px;
    padding: 4px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

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

.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;
}

/* API设置页面 */
#api-settings-page {
    display: none;
    flex-direction: column;
    height: 100%;
    background: #f2f2f2;
}

#minimax-voice-page {
    display: none;
    flex-direction: column;
    height: 100%;
    background: #f6f6f2;
}

#api-settings-page.active {
    display: flex;
}

#minimax-voice-page.active {
    display: flex;
}

#api-settings-page .settings-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: #f2f2f2;
}

#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-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;
}

/* 聊天背景设置模态框 */
.chat-background-modal .modal-body {
    padding: 20px;
}

.chat-background-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.background-preview {
    width: 100%;
    max-width: 300px;
    height: 400px;
    border: 2px dashed #ddd;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

.background-preview-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.background-preview-placeholder:hover {
    background-color: #f0f0f0;
    border-color: #07C160;
}

.background-upload-hint {
    color: #999;
    font-size: 14px;
    text-align: center;
}

.background-preview.has-background {
    border: 2px solid #07C160;
}

.background-preview.has-background .background-preview-placeholder {
    display: none;
}

.background-preview-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
}

.background-actions {
    width: 100%;
    max-width: 300px;
}

.clear-background-btn {
    width: 100%;
    padding: 12px;
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.clear-background-btn:hover {
    background-color: #e0e0e0;
    border-color: #ccc;
}

.clear-background-btn:active {
    background-color: #d0d0d0;
}

/* 错误弹框样式 */
/* 通用确认/错误弹层：须高于主屏刷新选择层(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;
}

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

#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;
}

.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;
}

/* 编辑个人资料模态框 */
.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;
}

.avatar-upload-hint {
    font-size: 14px;
    color: #666;
    text-align: center;
}

/* 昵称编辑区域 */
.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;
}

/* 多选底栏：禁止全局 `.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 内，与聊天全屏磨砂同构） */
#wechat-me-page .chat-fullscreen-glass {
    z-index: 200;
    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;
}

#wechat-me-page #my-persona-editor-modal.chat-fullscreen-glass {
    z-index: 210;
}

#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,
#wechat-me-page .chat-fullscreen-glass .modal-content.my-persona-list-panel {
    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);
}

#wechat-me-page .my-persona-list-header-row.modal-header,
#wechat-me-page .my-persona-editor-header-row.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 10px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex: 0 0 auto;
    box-sizing: border-box;
    min-height: 44px;
}

#wechat-me-page .my-persona-list-header-row .back-btn,
#wechat-me-page .my-persona-editor-header-row .back-btn {
    flex: 0 0 auto;
}

#wechat-me-page .my-persona-list-header-row h3,
#wechat-me-page .my-persona-editor-header-row h3 {
    margin: 0;
    flex: 1 1 auto;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #333;
}

#wechat-me-page .my-persona-add-btn {
    width: 36px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    background: rgba(255, 255, 255, 0.65);
    color: #262626;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 auto;
}

#wechat-me-page .my-persona-editor-header-spacer {
    width: 36px;
    height: 32px;
    flex: 0 0 auto;
}

#wechat-me-page .my-persona-list-body-outer.modal-body,
#wechat-me-page .my-persona-editor-body-outer.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: none !important;
    padding: 0;
}

#wechat-me-page .my-persona-main-list-body {
    padding: 0;
}

#wechat-me-page .my-persona-list-empty-hint {
    margin: 24px 20px;
    font-size: 14px;
    color: #888;
    text-align: center;
    line-height: 1.5;
}

#wechat-me-page .my-persona-editor-panel {
    min-height: 0;
}

#wechat-me-page .my-persona-editor-body-outer .friend-settings-content,
#wechat-me-page .my-persona-editor-inner {
    max-height: none;
    min-height: 0;
    box-sizing: border-box;
    padding: 20px 20px 8px;
}

#wechat-me-page .my-persona-editor-panel .my-profile-footer {
    flex: 0 0 auto;
}

#my-persona-delete-confirm-modal.show {
    z-index: 1200;
}

#my-persona-delete-confirm-modal .my-persona-delete-confirm-content {
    max-width: 300px;
    width: 86vw;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

#my-persona-delete-confirm-modal .my-persona-delete-confirm-body {
    padding: 20px 20px 8px;
}

#my-persona-delete-confirm-modal .my-persona-delete-confirm-text {
    margin: 0;
    font-size: 15px;
    color: #333;
    text-align: center;
    line-height: 1.5;
}

#my-persona-delete-confirm-modal .my-persona-delete-confirm-footer {
    display: flex;
    gap: 10px;
    padding: 12px 16px 16px;
    border: none;
    justify-content: stretch;
    align-items: stretch;
    /* 覆盖全局 .modal-footer 固定高度，避免胶囊按钮内文字被压到底部 */
    height: auto !important;
    min-height: 52px;
    box-sizing: border-box;
}

#my-persona-delete-confirm-modal .my-persona-delete-confirm-footer .cancel-btn,
#my-persona-delete-confirm-modal .my-persona-delete-confirm-footer .save-btn {
    flex: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 14px;
    box-sizing: border-box;
    line-height: 1.2;
    font-size: 15px;
    font-weight: 500;
}

#my-persona-delete-confirm-modal .my-persona-delete-confirm-ok {
    background: #1a1a1a;
    color: #fff;
}

/* 选择人设模态框 */
#select-persona-modal .modal-content {
    width: 200px;
    height: 280px;
    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;
}

#select-persona-modal .select-persona-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#select-persona-modal .select-persona-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

#select-persona-modal .select-persona-body {
    padding: 20px;
    overflow-y: auto;
}

#select-persona-modal .persona-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#select-persona-modal .persona-item {
    padding: 10px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s;
}

#select-persona-modal .persona-item:hover {
    background: rgba(230, 230, 230, 0.8);
}

/* 人设头像上传区域 */
#my-persona-editor-modal .my-profile-avatar-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

#my-persona-editor-modal .my-profile-avatar-container {
    position: relative;
    width: 100px;
    height: 100px;
}

#my-persona-editor-modal .my-profile-avatar-preview {
    width: 100%;
    height: 100%;
    border: 2px dashed rgba(0, 0, 0, 0.2);
    background-color: transparent;
}

#my-persona-editor-modal .my-profile-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#my-persona-editor-modal .my-profile-avatar-file-input {
    position: fixed;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    font-size: 0;
}

#my-persona-editor-modal .my-profile-avatar-upload-zone {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 2px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#my-persona-editor-modal .my-profile-avatar-upload-zone:active .my-profile-avatar-preview {
    opacity: 0.92;
}

/* 人设编辑区域 */
#my-persona-editor-modal .my-profile-edit-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#my-persona-editor-modal .my-profile-edit-section label {
    font-size: 14px;
    color: #666;
}

#my-persona-editor-modal .my-profile-input-container {
    position: relative;
    width: 100%;
}

#my-persona-editor-modal .my-profile-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-size: 14px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    min-height: 40px;
    max-height: 150px;
    resize: none;
    box-sizing: border-box;
}

#my-persona-editor-modal .resizeable-textarea-container {
    position: relative;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 100px;
    max-height: 250px;
    overflow: hidden;
}

#my-persona-editor-modal .resizeable-textarea {
    width: 100%;
    height: 100%;
    min-height: 100px;
    min-width: 100%;
    max-width: 100%;
    max-height: 250px;
    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;
}

#my-persona-editor-modal .resizeable-textarea:focus {
    border-color: #ddd;
    box-shadow: none;
}

#my-persona-editor-modal .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;
}

#my-persona-editor-modal .resize-handle:hover {
    background-color: #999;
}

#my-persona-editor-modal .resize-handle:active {
    background-color: #666;
}

#my-persona-editor-modal .my-profile-input:focus {
    outline: none;
    border-color: #07C160;
    box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.2);
}

#my-persona-editor-modal .my-profile-footer {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    gap: 12px;
    height: 60px;
    box-sizing: border-box;
}

#my-persona-editor-modal .my-profile-footer .cancel-btn, #my-persona-editor-modal .my-profile-footer .save-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#my-persona-editor-modal .my-profile-footer .cancel-btn {
    background-color: white;
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

#my-persona-editor-modal .my-profile-footer .save-btn {
    background-color: black;
    color: white;
}

#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-me-function-arrow {
    font-size: 16px;
    color: #999;
}

/* 微信发现页面 */
#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;
}


/* ========== 推特 / 微信统一冷淡玻璃风覆盖层 ========== */
#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,
#twitter-page .twitter-profile-avatar-wrap,
#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;
}

#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-panel,
: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-panel,
: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,
#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;
}

.offline-mode-modal-content,
.offline-style-picker-content,
.offline-style-new-content,
.offline-beautify-content,
.offline-group-preset-edit-content {
    width: 340px;
    max-width: 92%;
    background: linear-gradient(145deg, rgba(233, 231, 245, 0.95) 0%, rgba(188, 198, 223, 0.95) 48%, rgba(133, 120, 157, 0.95) 100%) !important;
    backdrop-filter: blur(15px) saturate(1.04);
    -webkit-backdrop-filter: blur(15px) saturate(1.04);
    border: 1px solid rgba(255,255,255,0.28) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 40px rgba(70, 74, 108, 0.18) !important;
    overflow: hidden;
}

.offline-mode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.22) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.offline-mode-close,
.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;
}

.offline-mode-input,
.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;
}

.offline-mode-pov-card,
.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;
}

.offline-mode-pov-card:hover,
.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,
.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;
}

.discover-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    margin: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(77, 96, 130, 0.12), inset 0 1px 0 rgba(255,255,255,0.52) !important;
    cursor: pointer;
}

.discover-item:hover,
.discover-item:active {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: translateY(1px);
}

.discover-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.42);
}

.moments-icon {
    background: rgba(132, 151, 189, 0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #f7f9fc;
}

.memory-space-icon {
    background: rgba(120, 136, 176, 0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #fff;
}

.favorites-page-body,
.wallet-page-body,
.wallet-bills-page-body,
.wechat-memory-library-body,
.wechat-memory-space-body {
    padding: 10px 8px 14px !important;
}

.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-panel,
: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;
}

.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;
    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-status--muted {
    color: #999;
    font-size: 12px;
}

.wechat-settings-chevron {
    font-size: 22px;
    color: #c7c7cc;
    font-weight: 300;
    line-height: 1;
    padding-right: 4px;
}

.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;
    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;
    overflow-y: auto;
    padding: 14px 16px 24px;
}

.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 将 background-image 写到各页（Blob URL，避免超长 Data URL 写入 CSS 变量失效） */
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;
}

html.wechat-global-bg-on .discover-list {
    background: rgba(255, 255, 255, 0.55) !important;
}


/* 聊天页：让微信全局背景穿透（JS 已向 #chat-page 写入 background-image） */
html.wechat-global-bg-on #chat-page {
    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 {
    font-family: 'ThemeUserFont', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* 微信板块字体（设置页上传）：仅作用于微信四个根页面及其子界面 */
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));
}


/* 不支持容器查询单位时：用 vmin 近似随屏缩放，避免仅依赖 vw 在横屏/宽带上过大 */

.my-persona-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.18s ease, border-color 0.18s ease;
}

.my-persona-list-row.is-active {
    background: linear-gradient(135deg, rgba(254, 218, 119, 0.18) 0%, rgba(252, 99, 122, 0.16) 50%, rgba(204, 64, 156, 0.18) 100%);
    border-bottom-color: rgba(204, 64, 156, 0.18);
}

.my-persona-list-name {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    color: #262626;
    cursor: pointer;
    user-select: none;
    padding: 4px 6px;
    margin: -4px -6px;
    border-radius: 8px;
    outline: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.my-persona-list-name:hover {
    background: rgba(204, 64, 156, 0.08);
}

.my-persona-list-name:focus-visible {
    background: rgba(204, 64, 156, 0.1);
    box-shadow: 0 0 0 2px rgba(204, 64, 156, 0.32);
}

.my-persona-list-row.is-active .my-persona-list-name {
    color: #cc409c;
    font-weight: 600;
}

.my-persona-list-active-tag {
    display: none;
    flex-shrink: 0;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.4;
    color: #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, #feda77 0%, #fc6376 50%, #cc409c 100%);
    box-shadow: 0 4px 10px rgba(204, 64, 156, 0.32);
}

.my-persona-list-row.is-active .my-persona-list-active-tag {
    display: inline-flex;
    align-items: center;
}

.my-persona-list-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.my-persona-list-edit,
.my-persona-list-del {
    padding: 4px 10px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    background: #fff;
    cursor: pointer;
}

.my-persona-list-del {
    color: #ed4956;
    border-color: #ffc9c9;
}

/* 好友资金：红包 / 转账说明与按钮 */
.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-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;
}

/* 开机动画：已迁至 boot-animation.css（index.html head 内 link#boot-animation-css） */


/* 锁屏主界面：已迁至 lock-screen.css */
/* 夜间：覆盖「推/信统一玻璃风」大段中强制浅色行的 !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;
}

/* [moved] 该段已迁至 twitter.css —— ④ 推特暗色 tweet 卡片（深玻璃质感）（原 L35644-L35654） */

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;
}

/* [moved] 该段已迁至 twitter.css —— ⑤ 推特暗色 .twitter-bottom-btn.active（原 L35678-L35681） */

/* 夜间：覆盖约 25788 行「贴边实色 #ededed / 底栏 #f7f7f7」及 .discover-list #fff（该段在文件中部且带 !important，会盖掉较早的 html[data-appearance] 微信规则） */
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-bottom: 1px solid rgba(255, 255, 255, 0.1) !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-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.08),
        0 -1px 24px rgba(100, 140, 255, 0.1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !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-discover-page .discover-list {
    background: transparent !important;
}

html[data-appearance="dark"] #wechat-discover-page .discover-item {
    background: rgba(32, 32, 36, 0.92) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f5f5f7 !important;
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.06),
        0 0 20px rgba(100, 140, 255, 0.1);
}

html[data-appearance="dark"] #wechat-discover-page .discover-item:active {
    background: rgba(48, 48, 52, 0.96) !important;
}

html[data-appearance="dark"] #wechat-discover-page .discover-item-name {
    color: #f0f0f5 !important;
}

html[data-appearance="dark"] #wechat-discover-page .discover-item-arrow {
    color: rgba(200, 200, 210, 0.55) !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
   ------------------------------------------------------------
   · 顶部封面卡片：使用 archaeology-of-light.png，max-width 400px、左右各 10px 边距、不再折叠
   · 整体配色：暖象牙 / 砂米 / 山岩深灰，文字深褐保证可读性
   · 心电图分隔线：移除
   · 每条 User / Char 消息独立成气泡（背景 + 圆角 + 细描边）
   · 仅做视觉美化，不影响按钮布局与运行逻辑
   ============================================================ */

/* ---- 主题变量 ---- */
#chat-page.chat-page--offline-group {
    --offgrp-paper:        #EFE8D8;   /* 砂米色页面底 */
    --offgrp-paper-soft:   #FBF6E9;   /* Char 气泡：纯象牙白（避免任何视觉偏冷/偏绿） */
    --offgrp-paper-deep:   #EDE0BD;   /* User 气泡：暖砂米 */
    --offgrp-ink:          #2D2A26;   /* 山岩深灰：主要文字 */
    --offgrp-ink-mid:      rgba(45, 42, 38, 0.78);
    --offgrp-ink-soft:     rgba(45, 42, 38, 0.46);
    --offgrp-stroke:       rgba(45, 42, 38, 0.14);
    --offgrp-stroke-strong:rgba(45, 42, 38, 0.22);
    --offgrp-card-shadow:  0 4px 14px rgba(60, 50, 32, 0.14);
    --offgrp-bubble-shadow:0 2px 6px rgba(60, 50, 32, 0.06);
    background-color: var(--offgrp-paper) !important;
    background-image: none !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-header,
#chat-page.chat-page--offline-mode.chat-page--offline-group .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;
    /* 实拍图 archaeology-of-light.png 自带圆角外一圈纯黑画布；不能直接画在最外层 cover，否则整条黑杠都在。
       下面由 ::before 层单独放大裁剪；此处只保留与主题衔接的兜底底色。 */
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 16px;
    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;
}

/* 封面图层：居中放大背景，裁掉 PNG 内置黑边后再按圆角蒙版裁剪 */
#chat-page.chat-page--offline-mode.chat-page--offline-group .chat-header::before {
    content: '' !important;
    display: block !important;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
    background-color: #2a2618;
    background-image: url('assets/wechat-offline-group-cover/archaeology-of-light.png');
    background-repeat: no-repeat;
    background-position: center 44%;
    /* 约 42~48% 可裁掉两侧黑条；若以后换封面图可调整 */
    background-size: 146% auto;
    overflow: hidden;
}

/* 若没有 ::before 兜底则保持无伪元素遗留 */
#chat-page.chat-page--offline-group .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-header > * {
    position: relative;
    z-index: 1;
}

/* ---- 群组分支：所有头部控件常显（覆盖私聊线下的折叠态隐藏规则） ---- */
#chat-page.chat-page--offline-group .chat-header .back-btn,
#chat-page.chat-page--offline-group .chat-header .chat-header-buttons,
#chat-page.chat-page--offline-group .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-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-ink) !important;
    background: rgba(247, 240, 222, 0.95) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    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-header .back-btn .chat-back-icon,
#chat-page.chat-page--offline-group .chat-header .back-btn img,
#chat-page.chat-page--offline-group .chat-header .back-btn svg {
    width: 24px !important;
    height: 24px !important;
    filter: none !important;
    opacity: 1 !important;
}

#chat-page.chat-page--offline-group .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-header .chat-header-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    color: var(--offgrp-ink) !important;
    background: rgba(247, 240, 222, 0.95) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    filter: none !important;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

#chat-page.chat-page--offline-group .chat-header .chat-header-btn .chat-header-settings-icon,
#chat-page.chat-page--offline-group .chat-header .chat-header-btn svg,
#chat-page.chat-page--offline-group .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-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-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: #FFFFFF !important;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.65),
        0 0 8px rgba(0, 0, 0, 0.45),
        0 0 18px rgba(0, 0, 0, 0.32);
    letter-spacing: 0.02em;
}

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

#chat-page.chat-page--offline-group .chat-header-title-cluster .chat-header-subtitle,
#chat-page.chat-page--offline-group .chat-header-title-cluster .chat-header-status,
#chat-page.chat-page--offline-group .chat-header-title-cluster small {
    color: rgba(255, 255, 255, 0.86) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 8px rgba(0, 0, 0, 0.4);
}

/* ---- 心跳监控：直接放在图上，不再加底层胶囊 ---- */
#chat-page.chat-page--offline-group .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-heartbeat-monitor[open] {
    z-index: 9600 !important;
}

#chat-page.chat-page--offline-group .chat-heartbeat-monitor-summary {
    width: 36px;
    height: 36px;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.32));
}

#chat-page.chat-page--offline-group .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-heartbeat-monitor-glass::before {
    width: 22px;
    height: 18px;
}

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

#chat-page.chat-page--offline-group .chat-heartbeat-monitor-panel {
    top: calc(100% + 6px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    /* 显著高于消息区 / 玻璃浮层，避免长文气泡「盖住」心跳报告 */
    z-index: 9650 !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: var(--offgrp-paper-soft) !important;
    background-image: none !important;       /* 拒绝任何渐变 / 图样导致的偏色 */
    border: 1px solid var(--offgrp-stroke) !important;
    border-radius: 14px !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: var(--offgrp-paper-deep) !important;
    background-image: none !important;
    border: 1px solid var(--offgrp-stroke-strong) !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;
}

/* ============================================================
   线下模式 · 角色状态版面（关系 / 苹果 / 欲望 / 满足 / 当前位于）
   私聊与多人群组共用，触发自聊天页头像点击。
   JavaScript 用 position:fixed 将内容贴在头像附近；整块高度约为原先一半。
   ============================================================ */

.offline-status-panel-modal.show {
    display: block;
    background-color: transparent;
    overflow: visible;
}

.offline-status-panel-modal .offline-status-panel-content.modal-content {
    position: fixed;
    z-index: 2201;
    left: auto;
    top: auto;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    width: min(288px, calc(100vw - 20px));
    max-width: min(288px, calc(100% - 16px));
    max-height: min(42vh, 360px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
}

.offline-status-panel-content {
    /* 整块实底，不向聊天区域透出（无透明 / 磨砂） */
    background: linear-gradient(145deg, #f9f6f2 0%, #e6e0eb 52%, #cec6dd 100%);
    border-radius: 16px;
    border: 1px solid #dcd6e8;
    box-shadow: 0 12px 32px rgba(74, 70, 92, 0.2);
}

/* 聊天页对 .modal-content 统一加了玻璃底（!important），须强行还原为不透明显式底 */
#chat-page .offline-status-panel-content.modal-content {
    background: linear-gradient(145deg, #f9f6f2 0%, #e6e0eb 52%, #cec6dd 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #dcd6e8 !important;
    box-shadow: 0 12px 32px rgba(74, 70, 92, 0.2) !important;
}

.offline-status-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #d2ccdd;
    background: #eae6f3;
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
}

.offline-status-panel-content.offline-status-panel-content--dragging {
    user-select: none;
    -webkit-user-select: none;
}

.offline-status-panel-content.offline-status-panel-content--dragging .offline-status-panel-header {
    cursor: grabbing;
}

.offline-status-panel-header .offline-mode-close {
    cursor: pointer;
    touch-action: manipulation;
}

.offline-status-panel-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: #f7f5fb;
    color: #4f5672;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #e2dde8;
    box-shadow: 0 2px 6px rgba(60, 60, 90, 0.12);
}

.offline-status-panel-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.offline-status-panel-title-wrap {
    flex: 1;
    min-width: 0;
}

.offline-status-panel-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #4a4665;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.offline-status-panel-sub {
    margin-top: 2px;
    font-size: 10px;
    color: #6b6787;
}

.offline-status-panel-body {
    padding: 10px 12px 12px;
    max-height: min(28vh, 240px);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* 无自身背景时会叠在半透明父盒上，透出背后气泡；与卡片下半段同色实底 */
    background: #ece6f1;
}

.offline-status-panel-body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.offline-status-panel-empty {
    padding: 12px 4px;
    text-align: center;
    font-size: 12px;
    line-height: 1.55;
    color: #5f5b74;
}

.offline-status-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.offline-status-card {
    background: #fbf9fd;
    border: 1px solid #ebe6f4;
    border-radius: 12px;
    padding: 8px 10px 10px;
    box-shadow: inset 0 1px 0 #ffffff;
    display: flex;
    flex-direction: column;
    min-height: 52px;
}

.offline-status-card--bar,
.offline-status-card--location {
    grid-column: 1 / -1;
}

.offline-status-card-label {
    font-size: 11px;
    color: #6e6a86;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.offline-status-card-value {
    font-size: 15px;
    font-weight: 700;
    color: #3e3a55;
    line-height: 1.25;
    word-break: break-word;
}

.offline-status-card-value-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.offline-status-card-unit {
    font-size: 11px;
    font-weight: 500;
    color: #84809a;
    margin-left: 3px;
}

.offline-status-card-tip,
.offline-status-card-hint {
    margin-top: 6px;
    font-size: 11px;
    color: #777393;
    line-height: 1.5;
}

.offline-status-card--apples .offline-status-card-value {
    color: #b65a52;
}

.offline-status-card--relationship .offline-status-card-value {
    color: #5a5478;
}

.offline-status-card--location .offline-status-card-value {
    color: #4f5872;
    font-size: 16px;
}

/* 进度条：欲望 / 满足共用，按数值带（low/mid/high）切换主色。 */
.offline-status-bar {
    margin-top: 6px;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: #d6d3e6;
    overflow: hidden;
}

.offline-status-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
    background: #8a86b3;
}

.offline-status-card--desire.offline-status-band-low .offline-status-bar-fill { background: linear-gradient(90deg, #b9b8d4, #9d9ac1); }
.offline-status-card--desire.offline-status-band-mid .offline-status-bar-fill { background: linear-gradient(90deg, #d29ea6, #c97e8a); }
.offline-status-card--desire.offline-status-band-high .offline-status-bar-fill { background: linear-gradient(90deg, #e07a8a, #c84e62); }

.offline-status-card--satisfaction.offline-status-band-low .offline-status-bar-fill { background: linear-gradient(90deg, #b6cad6, #93b1c4); }
.offline-status-card--satisfaction.offline-status-band-mid .offline-status-bar-fill { background: linear-gradient(90deg, #99c2bf, #69a39d); }
.offline-status-card--satisfaction.offline-status-band-high .offline-status-bar-fill { background: linear-gradient(90deg, #87c099, #4f9a6e); }

/* 暗色主题：全局 .modal-content 使用半透明梯度，此处改为实底，与亮色一致百分百不透明 */
html[data-appearance="dark"] #chat-page .offline-status-panel-content.modal-content,
html[data-appearance="dark"] .offline-status-panel-content.modal-content {
    background: linear-gradient(145deg, #45404f 0%, #383545 52%, #2c2934 100%) !important;
    color: #f5f5f7 !important;
    border-color: #5d5969 !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
}

html[data-appearance="dark"] .offline-status-panel-header {
    background: #393745 !important;
    border-bottom-color: #544f61 !important;
}

html[data-appearance="dark"] .offline-status-panel-body {
    background: #383545 !important;
}

html[data-appearance="dark"] .offline-status-panel-title {
    color: #ebe9f4 !important;
}

html[data-appearance="dark"] .offline-status-panel-avatar {
    background: #474352 !important;
    border-color: #5f5a6c !important;
}

html[data-appearance="dark"] .offline-status-panel-sub,
html[data-appearance="dark"] .offline-status-panel-empty {
    color: #bfbccb !important;
}

html[data-appearance="dark"] .offline-status-card {
    background: #3f3b49 !important;
    border-color: #565260 !important;
    box-shadow: inset 0 1px 0 #6a6578 !important;
}

html[data-appearance="dark"] .offline-status-card-value {
    color: #efecf7 !important;
}

html[data-appearance="dark"] .offline-status-card--apples .offline-status-card-value {
    color: #e8988e !important;
}

html[data-appearance="dark"] .offline-status-card--relationship .offline-status-card-value {
    color: #d8d4ee !important;
}

html[data-appearance="dark"] .offline-status-card--location .offline-status-card-value {
    color: #c5d4e8 !important;
}

html[data-appearance="dark"] .offline-status-card-label {
    color: #b9b6c8 !important;
}

html[data-appearance="dark"] .offline-status-card-tip,
html[data-appearance="dark"] .offline-status-card-hint {
    color: #a39fb4 !important;
}

html[data-appearance="dark"] .offline-status-card-unit {
    color: #9591a8 !important;
}

html[data-appearance="dark"] .offline-status-bar {
    background: #4f4b58 !important;
}

/* 多人群组长文：长按 Char 头像选成员 */
.offline-status-member-picker {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2210;
    background: rgba(28, 26, 42, 0.22);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.offline-status-member-picker.show {
    display: block;
}

.offline-status-member-picker-pop {
    position: fixed;
    z-index: 2212;
    left: 0;
    top: 0;
    width: max-content;
    max-width: min(320px, calc(100vw - 16px));
    padding: 10px 12px 12px;
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(242, 238, 250, 0.98) 0%, rgba(208, 208, 232, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 12px 36px rgba(58, 56, 88, 0.22);
    pointer-events: auto;
}

.offline-status-member-picker-tip {
    font-size: 11px;
    color: rgba(62, 58, 86, 0.78);
    margin-bottom: 8px;
    text-align: center;
}

.offline-status-member-picker-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 300px;
}

.offline-status-member-picker-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 64px;
    padding: 6px 4px 4px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    cursor: pointer;
    color: #3e3a55;
    font-size: 10px;
    line-height: 1.2;
    transition: transform 0.12s ease, filter 0.12s ease;
}

.offline-status-member-picker-btn:hover {
    filter: brightness(1.04);
}

.offline-status-member-picker-btn:active {
    transform: scale(0.97);
}

.offline-status-member-picker-ava {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.6);
    font-weight: 700;
    font-size: 15px;
}

.offline-status-member-picker-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.offline-status-member-picker-nm {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 心跳监控 HTML 中可能也输出 .hb-offline-status 块；在监控面板里隐藏，
   避免在用户查看心跳时看到原始字段（数据已被解析存档供状态版面使用）。 */
#chat-heartbeat-monitor-content .hb-offline-status {
    display: none !important;
}

/* 线下模式：把头像变成可点击外观，给一点轻提示 */
#chat-page.chat-page--offline-mode .chat-message-avatar {
    cursor: pointer;
}
#chat-page.chat-page--offline-mode .chat-message-avatar:hover {
    filter: brightness(1.04);
}
#chat-page.chat-page--offline-mode .chat-message.my-message .chat-message-avatar {
    cursor: pointer;
}

/* 多人群组线下：user 的头像点击不开版面（JS 里直接忽略），把鼠标样式恢复为默认 */
#chat-page.chat-page--offline-group .chat-message.my-message .chat-message-avatar {
    cursor: default;
}

/* 反向入侵样式：已迁至 reverse-invasion.css（index.html link#reverse-invasion-css） */
/* [moved] 该段已迁至 twitter.css —— ⑥ 推特 DM 私信（Insta 风 + 低饱和蓝灰）：root / header / list / chat / msg / quote / composer / emoji / settings / multiselect + 暗色派生 + DM overlay（原 L40723-L41908） */

/* ── 夜间模式 · 补充：日间规则遗留的浅色底按钮 / 设置页 ── */
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;
}

html[data-appearance="dark"] .setting-arrow,
html[data-appearance="dark"] .wechat-me-function-arrow,
html[data-appearance="dark"] .discover-item-arrow {
    color: rgba(200, 200, 210, 0.72) !important;
}