/* ============================================================ */
        /* 【1. 全局基础样式】*/
        /* ============================================================ */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        body {
			background-color: var(--sea-bg);
			width: 100vw;
			height: 100%;
			height: 100%; /* 确保高度填满 */
			position: fixed; /* 强制固定，防止 iOS 整体拖动 */
			overflow: hidden; /* 禁止 body 滚动 */
			overscroll-behavior: none; /* 关键：禁止浏览器的橡皮筋效果和下拉刷新 */
		}
		body.app-booting {
			background: var(--sea-bg);
		}
		body.app-booting > * {
			visibility: hidden;
		}
		body.app-ready > * {
			visibility: visible;
		}

		html {
			height: 100%;
			overflow: hidden;
			background-color: var(--sea-bg-secondary);
			overscroll-behavior: none;
		}

		.app-file-input {
			position: fixed;
			left: -9999px;
			top: 0;
			width: 1px;
			height: 1px;
			opacity: 0;
		}

        .content-area {
		position: fixed;
		top: 44px;
		left: 0;
		right: 0;
		bottom: 0; /* 改为0，不再留死高度，由 padding 控制 */
		overflow-y: auto; /* 允许内部滚动 */
		overflow-x: hidden;
		background-color: var(--sea-bg-secondary);
		/* 增加惯性滚动，手感更好 */
		-webkit-overflow-scrolling: touch; 
		/* 初始底部内边距，会被 JS 动态修改以适应输入框高度 */
		padding-bottom: 60px; 
	}

        .content-area.me-page-active { top: 0; }
        .content-area.no-bottom-nav { bottom: 0; }
        .page { display: none; height: 100%; padding: 0; }
        .page.active { display: block; }
        
        #chat-page .page-content {
            padding: 0 0 96px;
			background: #ededed;
        }
		#wechat-contacts-page .page-content {
			padding: 0 0 96px;
			background: #ededed;
		}
		/* 🔒【整机深浅统一】#me-page 背景交给 --wx-bg，此处不再硬编码浅色 */
/* ============================================================ */
/* WeChat 2026 Unified Theme System - Deep/Light Dual Color    */
/* Strict isolation from phone app styles                       */
/* ============================================================ */

/* === WeChat Light Theme === */
body[data-wechat-theme="light"] {
    --wx-bg: #ededed;
    --wx-card: #ffffff;
    --wx-text: #000000;
    --wx-text-sub: #888888;
    --wx-text-hint: #b0b0b0;
    --wx-sep: #e5e5e5;
    --wx-sep-light: #f0f0f0;
    --wx-topbar: #f7f7f7;
    --wx-topbar-text: #000000;
    --wx-brand: #07c160;
    --wx-brand-hover: #06ae56;
    --wx-active: #f0f0f0;
    --wx-card-hover: #f5f5f5;
    --wx-shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
    --wx-shadow-md: 0 2px 12px rgba(0,0,0,0.10);
    --wx-input-bg: #f7f7f7;
    --wx-red: #ff3b30;
    --wx-orange: #ff9500;
}

/* === WeChat Dark Theme === */
body[data-wechat-theme="dark"] {
    --wx-bg: #111111;
    --wx-card: #1c1c1e;
    --wx-text: #ffffff;
    --wx-text-sub: #8e8e93;
    --wx-text-hint: #48484a;
    --wx-sep: #2c2c2e;
    --wx-sep-light: #242426;
    --wx-topbar: #1c1c1e;
    --wx-topbar-text: #ffffff;
    --wx-brand: #07c160;
    --wx-brand-hover: #06ae56;
    --wx-active: #2c2c2e;
    --wx-card-hover: #2c2c2e;
    --wx-shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
    --wx-shadow-md: 0 2px 12px rgba(0,0,0,0.5);
    --wx-input-bg: #2c2c2e;
    --wx-red: #ff453a;
    --wx-orange: #ff9f0a;
}

/* === "Me" Page Base === */
#me-page { background: var(--wx-bg); }
#me-page .page-content { background: var(--wx-bg); padding-bottom: 80px; }
.me-wx-body { background: var(--wx-bg); min-height: 100vh; }

/* === Profile Card (no cover image, avatar at top) === */
.me-wx-profile-card {
    background: var(--wx-card);
    margin: 0 0 12px;
    padding: 52px 20px 20px;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: background 0.15s;
}
.me-wx-profile-card:active { background: var(--wx-card-hover); }

/* === Avatar === */
.me-wx-avatar-wrap {
    width: 68px;
    height: 68px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.me-wx-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
}
/* 微信官方风格默认头像：白底灰色人像（无自定义头像时显示） */
.me-wx-avatar {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f2f2f2'/%3E%3Ccircle cx='50' cy='40' r='17' fill='%23c2c6cc'/%3E%3Cpath d='M22 82c0-15 12.6-24 28-24s28 9 28 24z' fill='%23c2c6cc'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
}
.me-wx-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-wx-avatar .fa-user { display: none; }
.me-wx-avatar img[src]:not([src=""]) ~ .fa-user { display: none; }

/* === 微信官方风格默认头像统一覆盖（面具当前/列表/编辑，无自定义图时显示白底灰人像） === */
.wx-mask-current-avatar,
.wx-mask-list-avatar,
.wx-mask-edit-avatar {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f2f2f2'/%3E%3Ccircle cx='50' cy='40' r='17' fill='%23c2c6cc'/%3E%3Cpath d='M22 82c0-15 12.6-24 28-24s28 9 28 24z' fill='%23c2c6cc'/%3E%3C/svg%3E") !important;
    background-color: #f2f2f2 !important;
    background-size: cover !important;
    background-position: center !important;
}
/* 默认状态下隐藏占位的 fa-user 图标（白底灰人像已由背景呈现）；有真实 img 时背景被图片覆盖 */
.wx-mask-current-avatar > .fa-user,
.wx-mask-list-avatar > .fa-user,
.wx-mask-edit-avatar > .fa-user { display: none !important; }

/* === Profile Info === */
.me-wx-profile-info { flex: 1; margin-left: 16px; min-width: 0; }
.me-wx-name {
    font-size: 19px;
    font-weight: 600;
    color: var(--wx-text);
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.me-wx-status {
    font-size: 13px;
    color: var(--wx-text-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.me-wx-qr-icon { font-size: 20px; color: var(--wx-text-sub); margin-right: 14px; flex-shrink: 0; }
.me-wx-arrow-icon { font-size: 14px; color: var(--wx-text-hint); flex-shrink: 0; }

/* === Cover (hidden - no cover in 2026 style) === */
.me-wx-cover { display: none; }

/* === Function Groups === */
.me-wx-group {
    background: var(--wx-card);
    margin: 0 0 12px;
    border-top: 0.5px solid var(--wx-sep);
    border-bottom: 0.5px solid var(--wx-sep);
}

/* === List Items === */
.me-wx-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 0.5px solid var(--wx-sep-light);
    cursor: pointer;
    transition: background 0.12s;
    background: var(--wx-card);
}
.me-wx-item:last-child { border-bottom: none; }
.me-wx-item:active { background: var(--wx-active); }
.me-wx-item-left { display: flex; align-items: center; gap: 14px; }
.me-wx-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    flex-shrink: 0;
}
/* 2026 微信官方彩色线条图标：无底色方块，直接展示线条 SVG */
.me-wx-item-icon.me-wx-icon-line {
    background: transparent !important;
    width: 28px;
    height: 28px;
    border-radius: 0;
}
.me-wx-item-icon.me-wx-icon-line svg {
    width: 26px;
    height: 26px;
    display: block;
}
/* 2026 微信官方图标 PNG 版：透明底、直接显示位图 */
.me-wx-item-icon.me-wx-icon-img {
	background: transparent !important;
	width: 28px;
	height: 28px;
	border-radius: 0;
	overflow: visible;
}
.me-wx-item-icon.me-wx-icon-img img {
	width: 26px;
	height: 26px;
	object-fit: contain;
	display: block;
}

.me-wx-item-label { font-size: 16px; color: var(--wx-text); }
.me-wx-item-arrow { font-size: 13px; color: var(--wx-text-hint); }


		#chat-top,
		#wechat-contacts-top,
		#discover-top,
		#me-top,
		#chat-detail-top,
		#chat-actions-top,
		#chat-setting-top,
		#group-setting-top,
		#chat-search-top,
		#favorites-top,
		#user-info-top,
		#avatar-edit-top,
		#name-edit-top,
		#status-edit-top,
		#gender-edit-top,
		#region-edit-top,
		#mask-edit-top,
		#life-events-top,
		#ltm-top,
		#my-works-top,
		#user-masks-top,
		#edit-user-mask-top {
			background: #ededed;
			border-bottom: 1px solid #d9d9d9;
			box-shadow: none;
		}
		#chat-top .top-bar-title,
		#wechat-contacts-top .top-bar-title,
		#discover-top .top-bar-title,
		#me-top .top-bar-title,
		#chat-detail-top .top-bar-title,
		#chat-detail-top #chat-detail-title,
		#chat-detail-top #chat-detail-title-container,
		#chat-detail-top #chat-detail-title-container *,
		#chat-actions-top .top-bar-title,
		#chat-setting-top .top-bar-title,
		#group-setting-top .top-bar-title,
		#chat-search-top .top-bar-title,
		#favorites-top .top-bar-title,
		#user-info-top .top-bar-title,
		#avatar-edit-top .top-bar-title,
		#name-edit-top .top-bar-title,
		#status-edit-top .top-bar-title,
		#gender-edit-top .top-bar-title,
		#region-edit-top .top-bar-title,
		#mask-edit-top .top-bar-title,
		#life-events-top .top-bar-title,
		#ltm-top .top-bar-title,
		#my-works-top .top-bar-title,
		#user-masks-top .top-bar-title,
		#edit-user-mask-top .top-bar-title {
			color: #111 !important;
		}
		#chat-actions-top svg path {
			stroke: #07c160;
		}
		/* ============================================================ */
		/* 【核心修复】全局变量定义 */
		/* ============================================================ */
		:root {
			/* 默认值给50px，JS加载后会更新为精确值 */
			--chat-bar-height: 50px;
			--sea-bg: #edf6f5;
			--sea-bg-secondary: #f8fbfa;
			--sea-surface: rgba(255, 255, 255, 0.82);
			--sea-surface-strong: #f7fcfb;
			--sea-border: #d6e5e1;
			--sea-ink: #27484e;
			--sea-muted: #6f8c90;
			--sea-accent: #6f9498;
			--sea-accent-ink: #ffffff;
			--sea-accent-soft: #dceceb;
			--sea-shadow: 0 10px 30px rgba(92, 129, 132, 0.12);
			--sea-topbar-shadow: 0 6px 18px rgba(92, 129, 132, 0.08);
		}
		body[data-phone-theme="sea-salt"] {
			--sea-bg: #edf6f5;
			--sea-bg-secondary: #f8fbfa;
			--sea-surface: rgba(255, 255, 255, 0.82);
			--sea-surface-strong: #f7fcfb;
			--sea-border: #d6e5e1;
			--sea-ink: #27484e;
			--sea-muted: #6f8c90;
			--sea-accent: #6f9498;
			--sea-accent-ink: #ffffff;
			--sea-accent-soft: #dceceb;
			--sea-shadow: 0 10px 30px rgba(92, 129, 132, 0.12);
			--sea-topbar-shadow: 0 6px 18px rgba(92, 129, 132, 0.08);
		}
		body[data-phone-theme="sea-salt-dark"] {
			--sea-bg: #131a1a;
			--sea-bg-secondary: #1a2323;
			--sea-surface: rgba(28, 37, 38, 0.92);
			--sea-surface-strong: #202c2d;
			--sea-border: #2b3a3b;
			--sea-ink: #ecf7f5;
			--sea-muted: #9cb4b0;
			--sea-accent: #81b8a9;
			--sea-accent-ink: #131a1a;
			--sea-accent-soft: #203332;
			--sea-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
			--sea-topbar-shadow: 0 10px 22px rgba(0, 0, 0, 0.36);
		}
		body[data-phone-theme="sea-salt-blue"] {
			--sea-bg: #eaf3fb;
			--sea-bg-secondary: #f5f9ff;
			--sea-surface: rgba(255, 255, 255, 0.9);
			--sea-surface-strong: #f8fbff;
			--sea-border: #d5e2f5;
			--sea-ink: #23405f;
			--sea-muted: #64809c;
			--sea-accent: #5f8fcb;
			--sea-accent-ink: #ffffff;
			--sea-accent-soft: #dbe8f8;
			--sea-shadow: 0 10px 30px rgba(92, 126, 168, 0.14);
			--sea-topbar-shadow: 0 6px 18px rgba(92, 126, 168, 0.10);
		}
		body[data-phone-theme="sea-salt-blue-dark"] {
			--sea-bg: #101723;
			--sea-bg-secondary: #172131;
			--sea-surface: rgba(25, 36, 53, 0.94);
			--sea-surface-strong: #20304a;
			--sea-border: #2d4263;
			--sea-ink: #eef5ff;
			--sea-muted: #9cb1cf;
			--sea-accent: #7da8e4;
			--sea-accent-ink: #101723;
			--sea-accent-soft: #1d2d44;
			--sea-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
			--sea-topbar-shadow: 0 10px 22px rgba(0, 0, 0, 0.38);
		}
		body[data-phone-theme="beach-pink-purple"] {
			--sea-bg: #fff1f6;
			--sea-bg-secondary: #f7f1ff;
			--sea-surface: rgba(255, 255, 255, 0.88);
			--sea-surface-strong: #fff8fd;
			--sea-border: #f0d7ea;
			--sea-ink: #5e3b66;
			--sea-muted: #9a6f9f;
			--sea-accent: #bf76bf;
			--sea-accent-ink: #ffffff;
			--sea-accent-soft: #f6d7eb;
			--sea-shadow: 0 12px 30px rgba(173, 111, 166, 0.16);
			--sea-topbar-shadow: 0 6px 18px rgba(173, 111, 166, 0.12);
		}
		body[data-phone-theme="beach-pink-purple-dark"] {
			--sea-bg: #1d1522;
			--sea-bg-secondary: #261b2d;
			--sea-surface: rgba(42, 28, 47, 0.93);
			--sea-surface-strong: #34203a;
			--sea-border: #4c3354;
			--sea-ink: #fff1fb;
			--sea-muted: #d0a7cf;
			--sea-accent: #e28bd8;
			--sea-accent-ink: #1d1522;
			--sea-accent-soft: #34213a;
			--sea-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
			--sea-topbar-shadow: 0 10px 22px rgba(0, 0, 0, 0.38);
		}
		body[data-phone-theme="bw-minimal"] {
			--sea-bg: #efefef;
			--sea-bg-secondary: #f8f8f8;
			--sea-surface: rgba(255, 255, 255, 0.9);
			--sea-surface-strong: #ffffff;
			--sea-border: #d7d7d7;
			--sea-ink: #222222;
			--sea-muted: #666666;
			--sea-accent: #3a3a3a;
			--sea-accent-ink: #ffffff;
			--sea-accent-soft: #e3e3e3;
			--sea-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
			--sea-topbar-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
		}
		body[data-phone-theme="bw-minimal-dark"] {
			--sea-bg: #101010;
			--sea-bg-secondary: #171717;
			--sea-surface: rgba(28, 28, 28, 0.94);
			--sea-surface-strong: #232323;
			--sea-border: #343434;
			--sea-ink: #f5f5f5;
			--sea-muted: #b0b0b0;
			--sea-accent: #d8d8d8;
			--sea-accent-ink: #101010;
			--sea-accent-soft: #242424;
			--sea-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
			--sea-topbar-shadow: 0 10px 22px rgba(0, 0, 0, 0.42);
		}
		body[data-phone-theme="pink-green-ancient"] {
			--sea-bg: #faf3ee;
			--sea-bg-secondary: #f3f7ef;
			--sea-surface: rgba(255, 251, 246, 0.9);
			--sea-surface-strong: #fffaf3;
			--sea-border: #e7d9c9;
			--sea-ink: #5d4a42;
			--sea-muted: #8d7d70;
			--sea-accent: #7ea288;
			--sea-accent-ink: #ffffff;
			--sea-accent-soft: #efe1d2;
			--sea-shadow: 0 10px 28px rgba(126, 162, 136, 0.14);
			--sea-topbar-shadow: 0 6px 18px rgba(126, 162, 136, 0.12);
		}
		body[data-phone-theme="pink-green-ancient-dark"] {
			--sea-bg: #181715;
			--sea-bg-secondary: #21201d;
			--sea-surface: rgba(37, 34, 31, 0.94);
			--sea-surface-strong: #2a2724;
			--sea-border: #443b34;
			--sea-ink: #f7efe5;
			--sea-muted: #c7b8a7;
			--sea-accent: #92b39b;
			--sea-accent-ink: #181715;
			--sea-accent-soft: #312c27;
			--sea-shadow: 0 12px 30px rgba(0, 0, 0, 0.36);
			--sea-topbar-shadow: 0 10px 22px rgba(0, 0, 0, 0.40);
		}

        /* ============================================================ */
        /* 【2. 顶部栏样式】*/
        /* ============================================================ */
        .top-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 44px;
            background: var(--sea-surface);
            border-bottom: 1px solid var(--sea-border);
            display: flex;
            align-items: center;
            padding: 0 15px;
            z-index: 998;
            box-shadow: var(--sea-topbar-shadow);
        }
        #avatar-edit-top { background-color: #000; border-bottom: none; }
        #avatar-edit-top .top-bar-back,
        #avatar-edit-top .top-bar-title,
        #avatar-edit-top .top-bar-right-btn { color: #fff !important; }
        #avatar-edit-top .top-bar-back { display: flex; }
        .top-bar-back {
            width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
            color: var(--sea-ink) !important; font-size: 18px; cursor: pointer; display: none;
        }
        .top-bar-title {
            position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
            font-size: 18px; font-weight: 500; color: var(--sea-ink) !important; max-width: 200px;
            text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .top-bar-right-btn {
            position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
            width: auto; min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
            color: var(--sea-ink) !important; font-size: 16px; cursor: pointer; border: none; background: transparent; outline: none; padding: 0 5px;
        }
        .incoming-chat-overlay-root {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 10020;
            isolation: isolate;
        }
        .incoming-chat-banner {
            position: absolute;
            top: calc(env(safe-area-inset-top, 0px) + 10px);
            left: 12px;
            right: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 20px;
            background: rgba(250, 252, 251, 0.94);
            border: 1px solid rgba(203, 220, 217, 0.96);
            box-shadow: 0 14px 34px rgba(73, 104, 106, 0.18);
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
            opacity: 0;
            pointer-events: none;
            transform: translateY(-18px) scale(0.985);
            transition: opacity 0.22s ease, transform 0.22s ease;
        }
        .incoming-chat-banner.show {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0) scale(1);
        }
        .incoming-chat-banner-avatar {
            width: 46px;
            height: 46px;
            flex: 0 0 46px;
            border-radius: 14px;
            overflow: hidden;
            background: linear-gradient(180deg, rgba(231, 244, 242, 0.98) 0%, rgba(214, 233, 229, 0.96) 100%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6b8b87;
            font-size: 20px;
        }
        .incoming-chat-banner-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .incoming-chat-banner-text {
            min-width: 0;
            flex: 1;
        }
        .incoming-chat-banner-title {
            font-size: 15px;
            font-weight: 600;
            color: #1f2d2d;
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .incoming-chat-banner-body {
            margin-top: 3px;
            font-size: 13px;
            color: #5c6f70;
            line-height: 1.35;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #chat-top .top-bar-back,
        #chat-top .top-bar-right-btn,
        #wechat-contacts-top .top-bar-back,
        #wechat-contacts-top .top-bar-right-btn,
        #me-top .top-bar-back,
        #me-top .top-bar-right-btn,
        #chat-detail-top .top-bar-back,
        #chat-detail-top .top-bar-right-btn,
        #chat-actions-top .top-bar-back,
        #chat-actions-top .top-bar-right-btn,
        #group-setting-top .top-bar-back,
        #group-setting-top .top-bar-right-btn,
        #chat-setting-top .top-bar-back,
        #chat-setting-top .top-bar-right-btn,
        #chat-search-top .top-bar-back,
        #chat-search-top .top-bar-right-btn,
        #moments-setting-top .top-bar-back,
        #moments-setting-top .top-bar-right-btn,
        #post-moment-top .top-bar-back,
        #post-moment-top .top-bar-right-btn,
        #favorites-top .top-bar-back,
        #favorites-top .top-bar-right-btn {
            color: #07c160 !important;
        }
        .top-bar:not(#chat-top):not(#wechat-contacts-top):not(#discover-top):not(#me-top):not(#chat-detail-top):not(#chat-actions-top):not(#group-setting-top):not(#chat-setting-top):not(#chat-search-top):not(#moments-setting-top):not(#post-moment-top):not(#favorites-top):not(#avatar-edit-top):not(#moments-top):not(#task-manager-top) .top-bar-back,
        .top-bar:not(#chat-top):not(#wechat-contacts-top):not(#discover-top):not(#me-top):not(#chat-detail-top):not(#chat-actions-top):not(#group-setting-top):not(#chat-setting-top):not(#chat-search-top):not(#moments-setting-top):not(#post-moment-top):not(#favorites-top):not(#avatar-edit-top):not(#moments-top):not(#task-manager-top) .top-bar-right-btn {
            color: var(--sea-ink) !important;
        }
        .top-bar:not(#chat-top):not(#wechat-contacts-top):not(#discover-top):not(#me-top):not(#chat-detail-top):not(#chat-actions-top):not(#group-setting-top):not(#chat-setting-top):not(#chat-search-top):not(#moments-setting-top):not(#post-moment-top):not(#favorites-top):not(#avatar-edit-top):not(#moments-top) {
            background: var(--sea-surface);
            border-bottom: 1px solid var(--sea-border);
            box-shadow: var(--sea-topbar-shadow);
        }
        #discover-top {
            background: #ededed;
            border-bottom: 1px solid #d9d9d9;
            box-shadow: none;
        }
        #discover-top .top-bar-title {
            color: #111;
            font-weight: 600;
        }
        #forum-do-post-btn {
            color: #111 !important;
        }
        #task-manager-top {
            background: #f2f2f6;
            border-bottom: 1px solid rgba(0,0,0,0.06);
        }
        #task-manager-top .top-bar-back,
        #task-manager-top .top-bar-right-btn,
        #task-manager-top .top-bar-title {
            color: #111 !important;
        }
        #avatar-more-btn { transform: translateY(-50%) rotate(90deg); }

        /* ============================================================ */
        /* 【3. 页面内容容器样式】*/
        /* ============================================================ */
        .page-content {min-height: 100%; padding: 10px; }
        #me-page .page-content { padding-top: 20px; }
        #user-info-page .page-content { padding-top: 15px; }
        #avatar-edit-page .page-content {
            background-color: #000; display: flex; align-items: center; justify-content: center;
            padding: 0 !important; width: 100%; height: 100%; padding-top: 44px !important; box-sizing: border-box;
        }
        #name-edit-page .page-content, #status-edit-page .page-content,
        #gender-edit-page .page-content, #region-edit-page .page-content,
        #mask-edit-page .page-content, #setting-page .page-content { padding: 20px; }
        #setting-page .page-content {
            padding: 18px 16px 96px !important;
            background: linear-gradient(180deg, var(--sea-bg) 0%, var(--sea-bg-secondary) 100%);
        }
        #setting-page .settings-group {
            content-visibility: auto;
            contain-intrinsic-size: 260px;
        }
        #chat-api-setting-page .page-content,
        #social-api-setting-page .page-content,
        #vision-api-setting-page .page-content,
        #voice-api-setting-page .page-content,
        #other-api-setting-page .page-content,
        #memory-setting-page .page-content,
        #weather-setting-page .page-content,
        #active-msg-setting-page .page-content,
        #desktop-layout-page .page-content,
        #desktop-theme-page .page-content,
        #app-manager-page .page-content,
        #cloud-setting-page .page-content,
        #period-tracking-page .page-content,
        #forum-main-page .page-content,
        #forum-manage-page .page-content,
        #forum-board-edit-page .page-content,
        #worldbook-list-page .page-content,
        #worldbook-edit-page .page-content,
        #emoticon-manage-page .page-content,
        #emoticon-add-page .page-content,
        #check-phone-list-page .page-content,
        #check-phone-detail-page .page-content,
        #shopping-page .page-content {
            background: linear-gradient(180deg, var(--sea-bg) 0%, var(--sea-bg-secondary) 100%);
        }
        #discover-page .page-content {
            padding: 12px 0 96px;
            background: #ededed;
        }
        #discover-page .menu-container {
            background: #fff;
            border-radius: 0;
            box-shadow: none;
        }
        #discover-page .menu-btn {
            height: 60px;
            background: #fff;
            border: none;
            border-radius: 0;
            box-shadow: none;
        }
        #discover-page .menu-btn + .menu-btn {
            border-top: 1px solid #ededed;
        }
        #discover-page .menu-btn i.icon {
            color: #07c160;
        }
        #discover-page .menu-btn-text {
            color: #111;
        }
        #discover-page .menu-btn-arrow {
            color: #b7b7b7;
        }
        #moments-page .page-content {
            padding: 0 0 96px !important;
            background: #ffffff;
        }

        #chat-api-setting-page .page-content {
            padding: 20px; display: flex; flex-direction: column;
        }
        #api-settings-form { flex-grow: 1; }
        
        #new-chat-page .page-content { padding: 20px; }
        .form-section { margin-bottom: 25px; }
        .form-label { display: block; font-size: 14px; color: var(--sea-muted, #666); margin-bottom: 8px; }
        .form-input, .form-textarea, .form-select {
            width: 100%; padding: 10px 15px; border: 1px solid var(--sea-border, #ddd);
            border-radius: 4px; font-size: 16px; background-color: var(--sea-surface-strong, #fff); color: var(--sea-ink, #111);
        }
        .form-input::placeholder, .form-textarea::placeholder { color: var(--sea-muted, #999); }
        .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--sea-accent, #111); outline: none; }
        .form-textarea { height: 120px; resize: vertical; }

        /* ============================================================ */
        /* 【4. 输入框和表单样式】*/
        /* ============================================================ */
        .name-input {
            width: 100%; height: 44px; padding: 0 15px; border: 1px solid var(--sea-border, #eee);
            border-radius: 4px; font-size: 17px; outline: none; background-color: var(--sea-surface-strong, #fff); color: var(--sea-ink, #111);
        }
        .name-input:focus { border-color: var(--sea-accent, #111); }
        .mask-input {
            width: 100%; min-height: 200px; max-height: 300px; padding: 15px; border: 1px solid var(--sea-border, #eee);
            border-radius: 4px; font-size: 17px; outline: none; background-color: var(--sea-surface-strong, #fff); color: var(--sea-ink, #111);
            resize: none; overflow-y: auto; line-height: 1.5;
        }
        .mask-input:focus { border-color: var(--sea-accent, #111); }
		.writing-workbench-content {
			width: min(94vw, 720px);
			max-height: min(84vh, 760px);
			background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,249,252,0.98) 100%);
			border-radius: 24px;
			padding: 18px;
			display: flex;
			flex-direction: column;
			gap: 14px;
			border: 1px solid rgba(225,230,238,0.9);
			box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
		}
		.writing-workbench-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
		}
		.writing-workbench-title {
			font-size: 18px;
			font-weight: 700;
			color: #1f2937;
		}
		.writing-workbench-close {
			width: 38px;
			height: 38px;
			border-radius: 12px;
			border: 1px solid rgba(210, 217, 228, 0.96);
			background: rgba(255,255,255,0.92);
			color: #4b5563;
			font-size: 16px;
			cursor: pointer;
		}
		.writing-workbench-subtitle {
			font-size: 12px;
			color: #6b7280;
			line-height: 1.5;
		}
		.writing-workbench-textarea {
			width: 100%;
			min-height: min(52vh, 420px);
			resize: none;
			border-radius: 18px;
			border: 1px solid rgba(214, 220, 230, 0.95);
			padding: 16px 18px;
			font-size: 16px;
			line-height: 1.75;
			background: rgba(255,255,255,0.95);
			color: #1f2937;
			outline: none;
		}
		.writing-workbench-textarea:focus {
			border-color: rgba(17, 24, 39, 0.42);
		}
		.writing-workbench-buttons {
			display: flex;
			gap: 10px;
		}
		.writing-workbench-btn {
			flex: 1;
			height: 44px;
			border-radius: 14px;
			font-size: 15px;
			font-weight: 600;
			cursor: pointer;
		}
		.writing-workbench-btn-cancel {
			background: var(--ios-btn-bg);
			color: #2b3440;
			border: 1px solid rgba(210, 217, 228, 0.96);
		}
		.writing-workbench-btn-save {
			background: linear-gradient(180deg, var(--sea-accent) 0%, color-mix(in srgb, var(--sea-accent) 82%, #000 18%) 100%);
			color: var(--sea-accent-ink);
			border: 1px solid color-mix(in srgb, var(--sea-accent) 78%, #000 22%);
		}
		#writing-workbench-modal.wechat-light .writing-workbench-content {
			background: linear-gradient(180deg, #f7f7f7 0%, #efefef 100%);
			border: 1px solid rgba(0, 0, 0, 0.05);
			box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
		}
		#writing-workbench-modal.wechat-light .writing-workbench-title {
			color: #111;
		}
		#writing-workbench-modal.wechat-light .writing-workbench-subtitle {
			color: #666;
		}
		#writing-workbench-modal.wechat-light .writing-workbench-close,
		#writing-workbench-modal.wechat-light .writing-workbench-btn-cancel {
			background: #ffffff;
			border-color: #d8d8d8;
			color: #222;
			box-shadow: none;
		}
		#writing-workbench-modal.wechat-light .writing-workbench-textarea {
			background: #ffffff;
			border-color: #d9d9d9;
			color: #111;
		}
		#writing-workbench-modal.wechat-light .writing-workbench-btn-save {
			background: linear-gradient(180deg, #22c15e 0%, #14a54a 100%);
			border-color: #0f8e3f;
			color: #fff;
		}
		#writing-workbench-modal.wechat-dark .writing-workbench-content {
			background: linear-gradient(180deg, #17181c 0%, #111214 100%);
			border: 1px solid rgba(255,255,255,0.06);
			box-shadow: 0 24px 48px rgba(0, 0, 0, 0.34);
		}
		#writing-workbench-modal.wechat-dark .writing-workbench-title {
			color: #f5f5f5;
		}
		#writing-workbench-modal.wechat-dark .writing-workbench-subtitle {
			color: rgba(255,255,255,0.56);
		}
		#writing-workbench-modal.wechat-dark .writing-workbench-close,
		#writing-workbench-modal.wechat-dark .writing-workbench-btn-cancel {
			background: #23262c;
			border-color: rgba(255,255,255,0.08);
			color: rgba(255,255,255,0.82);
			box-shadow: none;
		}
		#writing-workbench-modal.wechat-dark .writing-workbench-textarea {
			background: #1a1c20;
			border-color: rgba(255,255,255,0.10);
			color: #f5f5f5;
		}
		#writing-workbench-modal.wechat-dark .writing-workbench-textarea::placeholder {
			color: rgba(255,255,255,0.38);
		}
		#writing-workbench-modal.wechat-dark .writing-workbench-btn-save {
			background: linear-gradient(180deg, #47c97c 0%, #319a5b 100%);
			border-color: rgba(71, 201, 124, 0.42);
			color: #08120d;
		}
        
        .api-setting-group { margin-bottom: 25px; }
        .api-setting-label { display: block; font-size: 14px; color: #666; margin-bottom: 8px; }
        .api-setting-input {
            width: 100%; height: 44px; padding: 0 15px; border: 1px solid var(--sea-border, #ddd);
            border-radius: 4px; font-size: 16px; background-color: var(--sea-surface-strong, #fff); color: var(--sea-ink, #111);
        }
        .api-setting-input::placeholder { color: var(--sea-muted, #999); }
        .api-setting-input:focus { border-color: var(--sea-accent, #111); outline: none; }
        .model-fetch-container { display: flex; align-items: center; gap: 10px; }
       .model-fetch-container select {
			flex-grow: 1; height: 44px; padding: 0 10px; border: 1px solid var(--sea-border, #ddd);
			border-radius: 4px; background-color: var(--sea-surface-strong, #fff); color: var(--sea-ink, #111); font-size: 16px;
			
			/* 新增：防止长文本撑爆布局，超出部分显示省略号 */
			min-width: 0; 
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.model-fetch-container button {
			height: 44px; padding: 0 15px; border: none; border-radius: 10px; background: var(--sea-accent);
			color: var(--sea-accent-ink); font-size: 16px; cursor: pointer; display: flex; align-items: center; gap: 5px;
			
			/* 新增：保证按钮尺寸固定，绝对不会被挤小或挤出去 */
			flex-shrink: 0; 
		}
        .model-fetch-container button:disabled { background-color: #999; cursor: not-allowed; }
        .api-preset-bar {
            display: flex; align-items: center; gap: 10px; padding: 10px;
            background-color: var(--sea-bg-secondary, #f0f0f0); border-radius: 8px; margin-bottom: 20px;
        }
        .api-preset-bar select {
            flex-grow: 1; height: 40px; border: 1px solid #ccc; border-radius: 4px; padding: 0 8px;
        }
        .api-preset-bar button {
            height: 40px; padding: 0 15px; border: 1px solid #111;
            color: #111; background-color: #fff; border-radius: 4px; cursor: pointer;
        }
        .save-preset-btn {
            width: 100%; height: 44px; margin-top: 10px; border-radius: 4px; border: 1px solid var(--sea-border, #111);
            background-color: var(--sea-surface-strong, #fff); color: #111; font-size: 16px; font-weight: 500; cursor: pointer;
        }
        .character-info-card {
            background-color: var(--sea-surface-strong, #fff); border-radius: 8px; padding: 15px;
            display: flex; align-items: center; gap: 15px; border: 1px solid var(--sea-border, #eee);
        }
        .character-avatar-uploader {
            width: 60px; height: 60px; border-radius: 8px; background-color: var(--sea-accent-soft, #e9e9e9);
            border: 2px dashed var(--sea-border, #ccc); cursor: pointer; display: flex; align-items: center;
            justify-content: center; overflow: hidden; flex-shrink: 0;
        }
        .character-avatar-uploader i { font-size: 24px; color: #aaa; }
        .character-avatar-uploader img { width: 100%; height: 100%; object-fit: cover; }
        #character-name-input { 
            font-size: 16px; font-weight: 400; padding: 10px 15px; border: 1px solid var(--sea-border, #ddd);
        }
        #character-name-input:focus {
            border-color: var(--sea-accent, #111); outline: none; box-shadow: none;
        }
        .switch-container {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px; background-color: var(--sea-surface-strong, #fff); border: 1px solid var(--sea-border, #eee); border-radius: 4px; color: var(--sea-ink, inherit);
        }
        .switch { position: relative; display: inline-block; width: 51px; height: 31px; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider {
            position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
            background-color: #e9e9eb; transition: .3s; border-radius: 31px;
        }
        .slider:before {
            position: absolute; content: ""; height: 27px; width: 27px; left: 2px; bottom: 2px;
            background-color: white; transition: .3s; border-radius: 50%;
            box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.16), 0 3px 1px rgba(0,0,0,0.1);
        }
        input:checked + .slider { background-color: var(--sea-accent); }
        input:checked + .slider:before { transform: translateX(20px); }

        /* ============================================================ */
        /* 【5. 底部导航栏样式】*/
        /* ============================================================ */
        .bottom-nav {
            position: fixed; bottom: calc(var(--system-nav-offset, 0px) + env(safe-area-inset-bottom)); left: 0; width: 100%; height: calc(68px + env(safe-area-inset-bottom));
            background-color: #f8f8f8; border-top: 1px solid #eee; display: flex;
            justify-content: space-around; align-items: flex-start; z-index: 999;
            padding: 4px 0 8px;
            transition: bottom 0.22s ease;
        }
        .bottom-nav.hidden { display: none; }
        .nav-item {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            color: #999; font-size: 12px; cursor: pointer; width: 25%; height: 100%;
        }
        .nav-item.active { color: #07c160; }
        .nav-item i { font-size: 23px; margin-bottom: 4px; }
        .nav-item img { width: 26px; height: 26px; margin-bottom: 2px; object-fit: contain; }
        .nav-item.active img { filter: invert(48%) sepia(90%) saturate(1500%) hue-rotate(105deg) brightness(95%) contrast(90%); }
		#main-bottom-nav .nav-item { width: 25%; }
        
        /* 对话图标的未读红点 */
        .nav-item-icon-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .nav-item-unread-dot {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 10px;
            height: 10px;
            background-color: #c6f7d1;
            border-radius: 50%;
            border: 2px solid #f8f8f8;
            display: none;
            z-index: 10;
        }
        .nav-item.has-chat-unread .nav-item-unread-dot {
            display: block;
        }

        /* ============================================================ */
        /* 【6. 按钮样式】*/
        /* ============================================================ */
        .menu-container { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0; }
        .menu-btn, .setting-btn, .user-info-edit-btn {
            display: flex; flex-direction: row; align-items: center; justify-content: space-between;
            height: 60px; background-color: var(--sea-surface); border-radius: 18px; border: 1px solid var(--sea-border);
            cursor: pointer; transition: background-color 0.2s; padding: 0 20px;
            box-shadow: var(--sea-shadow);
        }
        .menu-btn-left { display: flex; align-items: center; }
        .menu-btn:hover, .user-info-card:hover, .user-info-edit-btn:hover, .setting-btn:hover { background-color: var(--sea-accent-soft); }
        .menu-btn i.icon { font-size: 22px; color: var(--sea-accent); margin-right: 20px; width: 28px; text-align: center; }
        .menu-btn-arrow { font-size: 14px; color: #96abaf; }
        .menu-btn-text, .setting-btn-text, .edit-btn-label { font-size: 14px; color: var(--sea-ink); }
        :root {
            --ios-pink: #ff8faf;
            --ios-pink-soft: #fff1f5;
            --ios-pink-border: rgba(255, 143, 175, 0.38);
            --ios-btn-bg: linear-gradient(180deg, rgba(239,248,245,0.98) 0%, rgba(220,238,233,0.98) 100%);
            --ios-btn-shadow: 0 8px 18px rgba(111, 148, 152, 0.16);
        }

        .beautify-fold {
            border: 1px solid var(--sea-border);
            border-radius: 18px;
            background: var(--sea-surface);
            margin-bottom: 16px;
            overflow: hidden;
            box-shadow: var(--sea-shadow);
        }
        .beautify-fold > summary {
            list-style: none;
            cursor: pointer;
            padding: 15px 18px;
            font-size: 15px;
            font-weight: 600;
            color: var(--sea-ink);
            background: linear-gradient(180deg, var(--sea-surface-strong) 0%, rgba(255,255,255,0.96) 100%);
            border-bottom: 1px solid var(--sea-border);
        }
        .beautify-fold > summary::-webkit-details-marker {
            display: none;
        }
        .beautify-fold[open] > summary {
            color: var(--sea-ink);
        }
        .beautify-fold .form-section {
            margin: 0;
            border: none;
            box-shadow: none;
            border-radius: 0;
            padding: 16px 18px;
            background: transparent;
        }
        .selector-list-box {
            flex: 1;
            overflow: auto;
            background: #0f172a;
            color: #dbeafe;
            border-radius: 14px;
            padding: 14px;
            line-height: 1.65;
            font-size: 12px;
            white-space: pre-wrap;
            word-break: break-all;
            margin: 12px 0;
        }

        #me-page .menu-container .menu-btn {
            background: #ffffff;
            border: 1px solid #f1f1f1;
            box-shadow: none;
            border-radius: 16px;
        }
        #me-page .menu-container .menu-btn:hover {
            background: #f8f8f8;
        }

        /* 【个人档案页】适配微信原生配色（白底卡片 + 灰底页面 + 绿 icon） */
        #user-info-page { background: var(--wx-bg); }
        #user-info-page .page-content { background: var(--wx-bg); padding-bottom: 40px; }
        #user-info-page .menu-container .user-info-edit-btn {
            background: #ffffff;
            border: 1px solid #f1f1f1;
            box-shadow: none;
            border-radius: 16px;
        }
        #user-info-page .menu-container .user-info-edit-btn:hover {
            background: #f8f8f8;
        }
        #user-info-page .edit-btn-label { color: #111111; }
        #user-info-page .edit-btn-value { color: #999999; }
        #user-info-page .menu-btn-arrow { color: #c7c7cc; }
        #user-info-page .form-section {
            background: #ffffff;
            border: 1px solid #f1f1f1;
            border-radius: 16px;
            box-shadow: none;
            padding: 16px 18px;
            margin: 12px 0;
        }
        #user-info-page .form-section .wx-ctrl-row label { color: #111111; }
        #user-info-page .form-section .wx-hint { color: #999999; }
        /* 卡片首尾子元素消掉自身外边距，让 padding 决定对称留白 */
        #user-info-page .form-section > *:first-child { margin-top: 0 !important; }
        #user-info-page .form-section > *:last-child { margin-bottom: 0 !important; }
        #user-info-page .form-section .wx-ctrl-row { margin-bottom: 8px; }
        #user-info-page .form-section .wx-ctrl-row:last-child { margin-bottom: 0; }

        /* 【个人档案】顶栏返回箭头改成深色（原 --sea-ink 在浅灰底上看不清） */
        #user-info-top .top-bar-back,
        #user-info-top .top-bar-back i,
        #name-edit-top .top-bar-back,
        #name-edit-top .top-bar-back i,
        #status-edit-top .top-bar-back,
        #status-edit-top .top-bar-back i,
        #gender-edit-top .top-bar-back,
        #gender-edit-top .top-bar-back i,
        #region-edit-top .top-bar-back,
        #region-edit-top .top-bar-back i,
        #mask-edit-top .top-bar-back,
        #mask-edit-top .top-bar-back i {
            color: #111111 !important;
        }

        /* 【个人档案】关闭态开关：微信浅灰轨道 + 白球 */
        #user-info-page .wx-switch-slider {
            background: #e9e9ea;
        }
        #user-info-page .wx-switch input:checked + .wx-switch-slider {
            background: #07c160;
        }

        /* 【个人档案子页】统一微信原生配色（灰底 + 白输入卡片 + 微信绿聚焦） */
        #name-edit-page,
        #status-edit-page,
        #gender-edit-page,
        #region-edit-page,
        #mask-edit-page {
            background: var(--wx-bg);
        }
        #name-edit-page .page-content,
        #status-edit-page .page-content,
        #gender-edit-page .page-content,
        #region-edit-page .page-content,
        #mask-edit-page .page-content {
            background: var(--wx-bg);
            padding: 15px;
        }
        #name-edit-page .name-input,
        #status-edit-page .name-input,
        #gender-edit-page .name-input,
        #region-edit-page .name-input,
        #mask-edit-page .mask-input {
            background: #ffffff;
            border: 1px solid #f1f1f1;
            border-radius: 12px;
            color: #111111;
            box-shadow: none;
            padding: 12px 15px;
        }
        #name-edit-page .name-input::placeholder,
        #status-edit-page .name-input::placeholder,
        #gender-edit-page .name-input::placeholder,
        #region-edit-page .name-input::placeholder,
        #mask-edit-page .mask-input::placeholder {
            color: #b6b6b6;
        }
        #name-edit-page .name-input:focus,
        #status-edit-page .name-input:focus,
        #gender-edit-page .name-input:focus,
        #region-edit-page .name-input:focus,
        #mask-edit-page .mask-input:focus {
            border-color: #07c160;
            outline: none;
        }
        #my-wallet-btn i.icon,
        #my-favorites-btn i.icon,
        #my-emoticon-btn i.icon {
            color: #07c160;
        }
        #my-wallet-btn .menu-btn-text,
        #my-favorites-btn .menu-btn-text,
        #my-emoticon-btn .menu-btn-text {
            color: #111111;
        }
        #my-wallet-btn .menu-btn-arrow,
        #my-favorites-btn .menu-btn-arrow,
        #my-emoticon-btn .menu-btn-arrow {
            color: #b7b7b7;
        }

        .settings-shell {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .settings-hero {
            padding: 22px 22px 20px;
            border-radius: 28px;
            background:
                radial-gradient(circle at top right, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 34%),
                linear-gradient(135deg, var(--sea-accent-soft) 0%, var(--sea-surface-strong) 100%);
            border: 1px solid var(--sea-border);
            box-shadow: var(--sea-shadow);
        }
        .settings-hero-kicker {
            font-size: 12px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--sea-muted);
            margin-bottom: 10px;
        }
        .settings-hero-title {
            font-size: 28px;
            line-height: 1.15;
            font-weight: 700;
            color: var(--sea-ink);
            margin-bottom: 8px;
        }
        .settings-hero-subtitle {
            font-size: 13px;
            line-height: 1.7;
            color: var(--sea-muted);
        }
        .settings-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .settings-group-title {
            padding: 0 4px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: var(--sea-muted);
        }
        .settings-list {
            display: flex;
            flex-direction: column;
            border-radius: 24px;
            overflow: hidden;
            background: linear-gradient(180deg, var(--sea-surface) 0%, var(--sea-surface-strong) 100%);
            border: 1px solid var(--sea-border);
            box-shadow: var(--sea-shadow);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }
        #setting-page .setting-btn {
            position: relative;
            min-height: 70px;
            height: auto;
            padding: 14px 18px 14px 74px;
            border-radius: 0;
            border: none;
            border-bottom: 1px solid rgba(214,229,225,0.9);
            background: transparent;
            box-shadow: none;
        }
        #setting-page .setting-btn:last-child {
            border-bottom: none;
        }
        #setting-page .setting-btn::before {
            content: attr(data-icon);
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            width: 38px;
            height: 38px;
            border-radius: 12px;
            background: linear-gradient(180deg, var(--sea-accent) 0%, var(--tile, var(--sea-accent)) 100%);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 18px rgba(92,129,132,0.18);
        }
        #setting-page .setting-btn:hover {
            background: var(--sea-accent-soft);
        }
        #setting-page .setting-btn-text {
            font-size: 16px;
            font-weight: 600;
            color: var(--sea-ink);
        }
        #setting-page .menu-btn-arrow {
            color: var(--sea-muted);
        }
        #setting-page .settings-danger-btn {
            --tile: linear-gradient(180deg, var(--ios-pink) 0%, #ff79a2 100%);
        }
        #setting-page .settings-danger-btn .setting-btn-text {
            color: var(--ios-pink);
        }
        #setting-page .settings-danger-btn::before {
            box-shadow: 0 8px 18px rgba(255, 143, 175, 0.18);
        }

		.home-screen {
			min-height: 100%;
			padding: 18px 14px calc(96px + env(safe-area-inset-bottom));
			background:
				radial-gradient(1200px 760px at 18% 0%, rgba(255,255,255,0.95) 0%, rgba(232,243,241,0.92) 48%, rgba(221,236,234,0.96) 100%),
				linear-gradient(180deg, #f4fbfa 0%, #e7f2f0 100%);
			background-size: cover;
			background-position: center;
			position: relative;
			overflow: hidden;
		}

		.home-screen::before {
			content: "";
			position: absolute;
			inset: 0;
			background: transparent;
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
			pointer-events: none;
		}

		.home-screen > * { position: relative; z-index: 1; }
		.home-screen {
			--desktop-widget-shell-bg: linear-gradient(180deg, rgba(255,255,255,0.56) 0%, rgba(255,255,255,0.24) 100%);
			--desktop-widget-shell-border: rgba(255,255,255,0.52);
			--desktop-widget-shell-highlight: rgba(255,255,255,0.46);
			--desktop-widget-text: #163047;
			--desktop-widget-muted: rgba(22,48,71,0.68);
			--desktop-widget-kicker: rgba(22,48,71,0.58);
			--desktop-widget-frame-bg: rgba(255,255,255,0.34);
		}

		.home-widget-grid {
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 12px;
			margin-bottom: 18px;
		}

		.home-widget {
			padding: 0;
			background: transparent;
			border: none;
			box-shadow: none;
			color: var(--desktop-widget-text);
			position: relative;
			overflow: visible;
			min-height: 92px;
			display: flex;
			align-items: stretch;
		}

		.home-widget.small { grid-column: span 1; min-height: 92px; }
		.home-widget.medium { grid-column: span 2; min-height: 112px; }
		.home-widget.large { grid-column: span 4; min-height: 136px; }

		.home-widget-shell {
			width: 100%;
			min-height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 10px;
			padding: 14px 16px;
			border-radius: 24px;
			background: var(--desktop-widget-shell-bg);
			border: 1px solid var(--desktop-widget-shell-border);
			box-shadow: inset 0 1px 0 var(--desktop-widget-shell-highlight);
			color: var(--desktop-widget-text);
			position: relative;
			overflow: hidden;
			box-sizing: border-box;
		}

		.home-widget-shell::before {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			height: 1px;
			background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.72) 50%, transparent 100%);
			opacity: 0.78;
			pointer-events: none;
		}

		.home-widget-shell-clock {
			justify-content: flex-end;
			align-items: flex-start;
			padding-top: 16px;
		}

		.home-widget-kicker {
			font-size: 11px;
			line-height: 1;
			letter-spacing: 0.22em;
			text-transform: uppercase;
			color: var(--desktop-widget-kicker);
		}

		.home-widget-clock-value {
			font-size: clamp(30px, 4.2vw, 40px);
			line-height: 0.92;
			font-weight: 700;
			letter-spacing: -0.08em;
			color: var(--desktop-widget-text);
		}

		.home-widget-clock-date {
			font-size: 13px;
			line-height: 1.4;
			color: var(--desktop-widget-muted);
			letter-spacing: 0.03em;
		}

		.home-widget.frame-widget {
			min-height: 136px;
		}

		.home-widget-shell-frame {
			padding: 0;
			background: transparent;
			border: none;
			box-shadow: none;
		}

		.home-widget-shell-frame::before {
			display: none;
		}

		.home-widget-frame-surface {
			width: 100%;
			min-height: 100%;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12px;
			border-radius: 26px;
			background: var(--desktop-widget-frame-bg);
			border: 1px solid var(--desktop-widget-shell-border);
			box-shadow: inset 0 1px 0 var(--desktop-widget-shell-highlight);
			box-sizing: border-box;
			overflow: hidden;
		}

		.home-widget-frame-photo {
			width: 100%;
			height: 100%;
			min-height: 112px;
			border-radius: 20px;
			background-color: rgba(255,255,255,0.22);
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
		}

		.home-widget-frame-placeholder {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 10px;
			width: 100%;
			min-height: 112px;
			border-radius: 20px;
			border: 1px dashed var(--desktop-widget-shell-border);
			color: var(--desktop-widget-muted);
			font-size: 13px;
			letter-spacing: 0.04em;
			background: rgba(255,255,255,0.08);
		}

		.home-widget-frame-placeholder i {
			font-size: 20px;
			opacity: 0.72;
		}

		.home-app-pages {
			display: flex;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			scrollbar-width: none;
			-ms-overflow-style: none;
			gap: 0;
		}

		.home-app-pages::-webkit-scrollbar { display: none; }

		.home-app-page {
			min-width: 100%;
			scroll-snap-align: start;
			padding: 4px 0;
			box-sizing: border-box;
		}

		.home-app-page-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 18px 10px;
		}

		.home-screen.grid-5x7 .home-widget-grid {
			grid-template-columns: repeat(5, minmax(0, 1fr));
		}

		.home-screen.grid-5x7 .home-app-page-grid {
			grid-template-columns: repeat(5, 1fr);
			row-gap: 26px;
			column-gap: 8px;
		}

		.home-app-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			user-select: none;
			-webkit-user-select: none;
			position: relative;
			transition: transform 0.18s ease, box-shadow 0.18s ease;
		}

		.home-desktop-swap-target {
			transform: scale(0.96);
		}

		.home-desktop-swap-target::after {
			content: '';
			position: absolute;
			inset: -6px;
			border-radius: 22px;
			border: 2px solid rgba(111,148,152,0.76);
			box-shadow: 0 0 0 4px rgba(111,148,152,0.12);
			pointer-events: none;
		}

		.home-app-slot-bg {
			width: 56px;
			height: 56px;
			border-radius: 16px;
			border: none;
			background: transparent;
			box-shadow: none;
		}

		.home-screen.desktop-editing .home-app-slot-bg {
			border: 1px dashed rgba(111,148,152,0.42);
			background: rgba(255,255,255,0.22);
		}

		.home-page-dots {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 6px;
			margin: 14px 0 0;
			min-height: 10px;
		}

		.home-page-dot {
			width: 6px;
			height: 6px;
			border-radius: 999px;
			background: rgba(111,148,152,0.22);
			transition: all 0.2s ease;
		}

		.home-page-dot.active {
			width: 18px;
			background: rgba(111,148,152,0.8);
		}

		.home-app-icon {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			user-select: none;
			-webkit-user-select: none;
		}

		.home-app-icon-bg {
			width: 56px;
			height: 56px;
			border-radius: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 16px 26px rgba(110, 146, 149, 0.16);
			border: 1px solid rgba(214,229,225,0.95);
			background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(233,244,242,0.94) 100%);
			overflow: hidden;
		}

		.home-app-icon-bg i {
			font-size: 22px;
			color: var(--sea-accent);
		}

		.home-app-icon-bg img { width: 100%; height: 100%; object-fit: cover; }
		.home-app-icon-label {
			margin-top: 8px;
			font-size: 12px;
			color: var(--sea-ink);
			max-width: 70px;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-shadow: 0 1px 0 rgba(255,255,255,0.72);
		}

		.home-dock {
			position: absolute;
			left: 14px;
			right: 14px;
			bottom: calc(16px + env(safe-area-inset-bottom));
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 8px;
			padding: 5px 10px 7px;
			border-radius: 24px;
			background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(235,245,244,0.84) 100%);
			backdrop-filter: blur(18px);
			-webkit-backdrop-filter: blur(18px);
			box-shadow: 0 18px 36px rgba(110, 146, 149, 0.18);
			border: 1px solid rgba(214,229,225,0.98);
			z-index: 2;
		}

		.home-dock .home-app-icon {
			justify-content: center;
		}

		.home-dock .home-app-icon-label {
			max-width: 56px;
			margin-top: 2px;
		}

		.system-nav-gesture {
			position: fixed;
			left: 50%;
			bottom: calc(4px + env(safe-area-inset-bottom));
			width: 132px;
			height: 20px;
			transform: translateX(-50%);
			border-radius: 999px;
			display: none;
			align-items: flex-end;
			justify-content: center;
			opacity: 0;
			z-index: 1099;
			transition: opacity 0.2s ease;
		}
		.system-nav-gesture::before {
			content: "";
			width: 76px;
			height: 5px;
			border-radius: 999px;
			background: var(--sea-accent);
			box-shadow: 0 2px 8px rgba(110, 146, 149, 0.14);
			opacity: 0.42;
		}
		.system-nav-gesture.active {
			display: flex;
			opacity: 1;
		}

		.system-nav-bar {
			position: fixed;
			left: 0;
			right: 0;
			transform: translateY(calc(100% + 16px));
			bottom: 0;
			height: calc(48px + env(safe-area-inset-bottom));
			padding: 0 10px env(safe-area-inset-bottom);
			border-radius: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 0;
			z-index: 1100;
			background: var(--sea-surface);
			backdrop-filter: blur(18px);
			-webkit-backdrop-filter: blur(18px);
			border-top: 1px solid var(--sea-border);
			box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.12);
			color: var(--sea-ink);
			opacity: 0;
			pointer-events: none;
			transition: transform 0.22s ease, opacity 0.18s ease;
		}

		.system-nav-bar.visible {
			transform: translateY(0);
			opacity: 1;
			pointer-events: auto;
		}

		.system-nav-bar.peek-mode {
			box-shadow: 0 -12px 30px rgba(92, 129, 132, 0.16);
		}
		.system-nav-btn {
			flex: 1;
			height: 48px;
			border: none;
			border-radius: 0;
			background: transparent;
			display: flex;
			align-items: center;
			justify-content: center;
			color: inherit;
		}

		.system-nav-btn:active {
			background: rgba(0,0,0,0.06);
		}

		#home-screen.desktop-theme-sea-blue {
			background:
				radial-gradient(1200px 760px at 18% 0%, rgba(244,248,255,0.96) 0%, rgba(220,234,251,0.94) 48%, rgba(205,223,247,0.97) 100%),
				linear-gradient(180deg, #eef5ff 0%, #dfeafe 100%);
		}

		#home-screen.desktop-theme-sea-blue {
			--desktop-widget-shell-bg: linear-gradient(180deg, rgba(255,255,255,0.54) 0%, rgba(234,242,255,0.26) 100%);
			--desktop-widget-shell-border: rgba(164, 189, 235, 0.88);
			--desktop-widget-shell-highlight: rgba(255,255,255,0.6);
			--desktop-widget-text: #244267;
			--desktop-widget-muted: rgba(36,66,103,0.7);
			--desktop-widget-kicker: rgba(90,127,207,0.76);
			--desktop-widget-frame-bg: rgba(236,243,255,0.52);
		}

		#home-screen.desktop-theme-sea-blue .home-app-icon-bg {
			background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(229,238,252,0.9) 100%);
			border: 1px solid rgba(202, 217, 240, 0.96);
			box-shadow: 0 14px 26px rgba(90, 127, 207, 0.16);
		}

		#home-screen.desktop-theme-sea-blue .home-dock {
			background: linear-gradient(180deg, rgba(255,255,255,0.76) 0%, rgba(224,236,252,0.72) 100%);
			border: 1px solid rgba(202, 217, 240, 0.86);
			box-shadow: 0 20px 40px rgba(90, 127, 207, 0.12);
		}

		#home-screen.desktop-theme-sea-blue .home-page-dot {
			background: rgba(90, 127, 207, 0.22);
		}

		#home-screen.desktop-theme-sea-blue .home-page-dot.active {
			background: #5a7fcf;
		}

		#home-screen.desktop-theme-beach-pink-purple {
			background:
				radial-gradient(1200px 760px at 16% 0%, rgba(255,244,248,0.97) 0%, rgba(255,226,238,0.93) 34%, rgba(229,220,255,0.9) 74%, rgba(202,193,255,0.94) 100%),
				linear-gradient(180deg, #fff3f7 0%, #e2dcff 100%);
		}

		#home-screen.desktop-theme-beach-pink-purple {
			--desktop-widget-shell-bg: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,234,245,0.26) 56%, rgba(240,233,255,0.24) 100%);
			--desktop-widget-shell-border: rgba(232, 188, 222, 0.9);
			--desktop-widget-shell-highlight: rgba(255,255,255,0.62);
			--desktop-widget-text: #6d4f86;
			--desktop-widget-muted: rgba(109,79,134,0.72);
			--desktop-widget-kicker: rgba(139,120,255,0.8);
			--desktop-widget-frame-bg: rgba(255,240,247,0.46);
		}

		#home-screen.desktop-theme-beach-pink-purple .home-app-icon-bg {
			background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,232,243,0.9) 54%, rgba(235,229,255,0.86) 100%);
			border: 1px solid rgba(242, 205, 227, 0.96);
			box-shadow: 0 14px 26px rgba(173, 115, 219, 0.15);
		}

		#home-screen.desktop-theme-beach-pink-purple .home-dock {
			background: linear-gradient(180deg, rgba(255,255,255,0.76) 0%, rgba(255,232,243,0.72) 48%, rgba(233,227,255,0.68) 100%);
			border: 1px solid rgba(242, 205, 227, 0.86);
			box-shadow: 0 20px 40px rgba(173, 115, 219, 0.12);
		}

		#home-screen.desktop-theme-beach-pink-purple .home-page-dot {
			background: rgba(139, 120, 255, 0.24);
		}

		#home-screen.desktop-theme-beach-pink-purple .home-page-dot.active {
			background: #8b78ff;
		}

		#home-screen.desktop-theme-bw {
			background: #fff;
		}

		#home-screen.desktop-theme-bw::before {
			background: transparent;
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}

		#home-screen.desktop-theme-bw {
			--desktop-widget-shell-bg: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(247,247,247,0.92) 100%);
			--desktop-widget-shell-border: rgba(0,0,0,0.88);
			--desktop-widget-shell-highlight: rgba(255,255,255,0.82);
			--desktop-widget-text: #000;
			--desktop-widget-muted: rgba(0,0,0,0.66);
			--desktop-widget-kicker: rgba(0,0,0,0.6);
			--desktop-widget-frame-bg: rgba(255,255,255,0.92);
		}

		#home-screen.desktop-theme-bw .home-app-icon-bg {
			background: #fff;
			border: 1px solid #000;
			box-shadow: none;
		}

		#home-screen.desktop-theme-bw .home-app-icon-bg i {
			color: #000;
		}

		#home-screen.desktop-theme-bw .home-app-icon-bg img {
			filter: grayscale(1) contrast(300%);
		}

		#home-screen.desktop-theme-bw .home-app-icon-label {
			color: #000;
			text-shadow: none;
		}

		#home-screen.desktop-theme-bw .home-dock {
			background: #fff;
			border: 1px solid #000;
			box-shadow: none;
		}

		#home-screen.desktop-theme-bw .home-page-dot {
			background: rgba(0,0,0,0.25);
		}

		#home-screen.desktop-theme-bw .home-page-dot.active {
			background: #000;
		}
		body[data-phone-theme="pink-green-ancient"] #home-screen {
			background:
				radial-gradient(1200px 760px at 16% 0%, rgba(255,250,244,0.98) 0%, rgba(245,233,222,0.94) 40%, rgba(230,239,227,0.96) 100%),
				linear-gradient(180deg, #fbf2ea 0%, #edf5e9 100%);
		}
		body[data-phone-theme="pink-green-ancient"] #home-screen {
			--desktop-widget-shell-bg: linear-gradient(180deg, rgba(255,251,246,0.56) 0%, rgba(242,248,238,0.28) 100%);
			--desktop-widget-shell-border: rgba(218, 201, 182, 0.92);
			--desktop-widget-shell-highlight: rgba(255,255,255,0.66);
			--desktop-widget-text: #6f5a49;
			--desktop-widget-muted: rgba(111,90,73,0.7);
			--desktop-widget-kicker: rgba(126,162,136,0.8);
			--desktop-widget-frame-bg: rgba(250,247,240,0.58);
		}
		body[data-phone-theme="pink-green-ancient"] #home-screen .home-app-icon-bg,
		body[data-phone-theme="pink-green-ancient"] #home-screen .home-dock {
			background: linear-gradient(180deg, rgba(255,253,249,0.92) 0%, rgba(237,245,233,0.86) 100%);
			border-color: rgba(231, 217, 201, 0.96);
			box-shadow: 0 14px 26px rgba(126, 162, 136, 0.14);
		}
		body[data-phone-theme="pink-green-ancient"] #home-screen .home-page-dot {
			background: rgba(126, 162, 136, 0.22);
		}
		body[data-phone-theme="pink-green-ancient"] #home-screen .home-page-dot.active {
			background: #7ea288;
		}
		body[data-phone-theme$="-dark"] #home-screen {
			background:
				radial-gradient(1200px 760px at 18% 0%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 26%, rgba(0,0,0,0) 48%),
				linear-gradient(180deg, var(--sea-bg) 0%, var(--sea-bg-secondary) 100%);
		}
		body[data-phone-theme$="-dark"] #home-screen {
			--desktop-widget-shell-bg: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
			--desktop-widget-shell-border: rgba(255,255,255,0.1);
			--desktop-widget-shell-highlight: rgba(255,255,255,0.12);
			--desktop-widget-text: #ecf4ff;
			--desktop-widget-muted: rgba(236,244,255,0.68);
			--desktop-widget-kicker: rgba(160,193,255,0.82);
			--desktop-widget-frame-bg: rgba(255,255,255,0.05);
		}
		body[data-phone-theme$="-dark"] #home-screen .home-app-icon-bg {
			background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
			border: 1px solid rgba(255,255,255,0.08);
			box-shadow: 0 14px 26px rgba(0,0,0,0.24);
		}
		body[data-phone-theme$="-dark"] #home-screen .home-app-icon-bg i,
		body[data-phone-theme$="-dark"] #home-screen .home-app-icon-label {
			color: var(--sea-ink);
		}
		body[data-phone-theme$="-dark"] #home-screen .home-app-icon-label {
			text-shadow: none;
		}
		body[data-phone-theme$="-dark"] #home-screen .home-dock {
			background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
			border: 1px solid rgba(255,255,255,0.08);
			box-shadow: 0 18px 34px rgba(0,0,0,0.3);
		}
		body[data-phone-theme$="-dark"] #home-screen .home-page-dot {
			background: rgba(255,255,255,0.18);
		}
		body[data-phone-theme$="-dark"] #home-screen .home-page-dot.active {
			background: var(--sea-accent);
		}

		.sortable-ghost {
			opacity: 0.35;
		}

		.sortable-chosen .home-app-icon-bg {
			transform: scale(1.04);
		}

		.desktop-edit-sheet {
			position: fixed;
			inset: 0;
			background: rgba(0,0,0,0.12);
			z-index: 1200;
			display: none;
			align-items: flex-start;
			justify-content: flex-start;
			padding: 70px 0 0 10px;
			box-sizing: border-box;
			pointer-events: none;
		}
		body[data-phone-theme$="-dark"] .desktop-edit-sheet {
			background: rgba(0,0,0,0.32);
		}

		.desktop-edit-sheet.open {
			display: flex;
			pointer-events: none;
		}

		.desktop-edit-fab {
			position: absolute;
			top: 72px;
			left: 10px;
			width: 46px;
			height: 46px;
			border: none;
			border-radius: 999px;
			display: none;
			align-items: center;
			justify-content: center;
			background: rgba(247,252,251,0.96);
			backdrop-filter: blur(16px);
			-webkit-backdrop-filter: blur(16px);
			box-shadow: 0 14px 32px rgba(110, 146, 149, 0.18);
			border: 1px solid rgba(214,229,225,0.96);
			color: var(--sea-ink);
			pointer-events: auto;
			z-index: 2;
		}

		.desktop-edit-panel {
			width: 188px;
			border-radius: 22px;
			padding: 16px 14px;
			background: rgba(247,252,251,0.96);
			backdrop-filter: blur(16px);
			-webkit-backdrop-filter: blur(16px);
			box-shadow: 0 18px 38px rgba(110, 146, 149, 0.18);
			border: 1px solid rgba(214,229,225,0.96);
			pointer-events: none;
			opacity: 0;
			transform: translateX(-8px) scale(0.96);
			transition: opacity 0.18s ease, transform 0.18s ease;
			visibility: hidden;
			margin-top: 56px;
		}

		.desktop-edit-panel.open {
			pointer-events: auto;
			opacity: 1;
			transform: translateX(0) scale(1);
			visibility: visible;
		}

		.desktop-edit-title {
			font-size: 18px;
			font-weight: 600;
			color: var(--sea-ink);
			text-align: center;
		}

		.desktop-edit-subtitle {
			font-size: 12px;
			color: var(--sea-muted);
			text-align: left;
			line-height: 1.5;
			margin: 6px 0 14px;
		}

		.desktop-edit-switch-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			border-radius: 16px;
			padding: 12px 10px;
			background: var(--sea-surface);
			border: 1px solid var(--sea-border);
			margin-bottom: 10px;
		}

		.desktop-edit-switch-text {
			min-width: 0;
			flex: 1;
		}

		.desktop-edit-switch-title {
			font-size: 13px;
			font-weight: 600;
			color: var(--sea-ink);
			line-height: 1.3;
		}

		.desktop-edit-switch-desc {
			font-size: 11px;
			color: var(--sea-muted);
			line-height: 1.4;
			margin-top: 4px;
		}

		.desktop-edit-btn {
			width: 100%;
			min-height: 44px;
			border: none;
			border-radius: 14px;
			background: linear-gradient(135deg, var(--sea-accent) 0%, rgba(255,255,255,0.08) 100%);
			color: var(--sea-accent-ink);
			font-size: 14px;
			margin-top: 10px;
			padding: 10px 12px;
		}

		.desktop-edit-btn-light {
			background: linear-gradient(180deg, var(--sea-surface) 0%, var(--sea-surface-strong) 100%);
			color: var(--sea-ink);
			border: 1px solid var(--sea-border);
		}

		.task-manager-page-content {
			padding: 16px 14px 90px;
			background: linear-gradient(180deg, #ececf1 0%, #e3e4ea 100%);
		}

		.task-manager-summary {
			font-size: 13px;
			color: #666;
			line-height: 1.6;
			padding: 0 6px 12px;
		}

		.task-manager-list {
			display: flex;
			flex-direction: column;
			gap: 0;
			padding-top: 8px;
			padding-bottom: 100px;
			overflow: visible;
		}

		.task-card {
			position: relative;
			border-radius: 24px;
			background: rgba(255,255,255,0.94);
			backdrop-filter: blur(14px);
			-webkit-backdrop-filter: blur(14px);
			box-shadow: 0 14px 38px rgba(0,0,0,0.12);
			border: 1px solid rgba(0,0,0,0.05);
			padding: 16px 16px 14px;
			transform-origin: center top;
			--task-offset-y: 0px;
			--task-swipe-scale: 1;
			--task-swipe-rotate: 0deg;
			--task-swipe-opacity: 1;
			transform: translateY(calc(var(--task-depth, 0) * -18px + var(--task-offset-y))) scale(calc((1 - var(--task-depth, 0) * 0.035) * var(--task-swipe-scale))) rotate(var(--task-swipe-rotate));
			z-index: calc(30 - var(--task-depth, 0));
			opacity: var(--task-swipe-opacity);
			transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
			touch-action: pan-x;
			will-change: transform, opacity;
		}

		.task-card + .task-card {
			margin-top: -92px;
		}

		.task-card[data-task-depth="0"] {
			box-shadow: 0 18px 44px rgba(0,0,0,0.14);
		}

		.task-card[data-task-depth="0"]:active {
			transform: translateY(0) scale(0.99);
		}

		.task-card.swiping {
			transition: none;
		}

		.task-card.closing {
			pointer-events: none;
		}

		.task-card-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
		}

		.task-card-title {
			font-size: 16px;
			font-weight: 600;
			color: #111;
			line-height: 1.4;
		}

		.task-card-subtitle {
			font-size: 12px;
			color: #777;
			line-height: 1.5;
			margin-top: 5px;
		}

		.task-card-preview {
			margin-top: 14px;
			border-radius: 18px;
			background: linear-gradient(180deg, rgba(250,250,252,0.98), rgba(238,238,243,0.96));
			border: 1px solid rgba(0,0,0,0.04);
			min-height: 172px;
			overflow: hidden;
			position: relative;
		}

		.task-card-preview-image {
			display: block;
			width: 100%;
			height: 172px;
			object-fit: cover;
			object-position: top center;
			background: #f1f2f6;
		}

		.task-card-preview-fallback {
			min-height: 172px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 18px;
			font-size: 13px;
			color: #666;
			line-height: 1.7;
			background: linear-gradient(180deg, rgba(250,250,252,0.98), rgba(238,238,243,0.96));
		}

		.task-card-preview-text {
			margin-top: 12px;
			font-size: 13px;
			color: #555;
			line-height: 1.6;
			min-height: 42px;
		}

		.task-card-gesture-hint {
			margin-top: 8px;
			font-size: 12px;
			color: #8a8a93;
			text-align: center;
			letter-spacing: 0.02em;
		}

		.task-card-actions {
			display: flex;
			gap: 10px;
			margin-top: 14px;
		}

		.task-card-btn {
			flex: 1;
			height: 42px;
			border: none;
			border-radius: 14px;
			font-size: 14px;
			font-weight: 600;
			cursor: pointer;
		}

		.task-card-btn.resume {
			background: #1c1c1e;
			color: #fff;
		}

		.task-card-btn.close {
			background: #fff;
			color: #ff3b30;
			border: 1px solid rgba(255,59,48,0.18);
		}

		.task-empty {
			border-radius: 24px;
			padding: 28px 18px;
			background: rgba(255,255,255,0.86);
			border: 1px solid rgba(0,0,0,0.05);
			text-align: center;
			color: #777;
			line-height: 1.8;
			font-size: 14px;
		}

		.task-stack-hint {
			font-size: 12px;
			color: #8a8a93;
			padding: 0 6px 8px;
			line-height: 1.5;
		}

        /* ============================================================ */
        /* 【7. 页面专属样式】*/
        /* ============================================================ */
        .user-info-card {
            display: flex; align-items: center; justify-content: space-between; height: 100px;
            background-color: #f8f8f8; border-radius: 4px; border: 1px solid #eee;
            padding: 0 20px; margin-bottom: 12px; cursor: pointer; transition: background-color 0.2s;
        }
        .user-avatar, .avatar-preview {
            width: 60px; height: 60px; border-radius: 4px;
            background-color: #f2f2f2;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f2f2f2'/%3E%3Ccircle cx='50' cy='40' r='17' fill='%23c2c6cc'/%3E%3Cpath d='M22 82c0-15 12.6-24 28-24s28 9 28 24z' fill='%23c2c6cc'/%3E%3C/svg%3E");
            background-size: cover; background-position: center;
            display: flex; align-items: center; justify-content: center; color: white;
        }
        /* 默认态：白底灰人像由背景呈现，隐藏占位的绿底 fa-user 图标；有真实 img 时图片盖住背景 */
        .user-avatar > .fa-user, .avatar-preview > .fa-user { display: none; }
        .user-avatar { font-size: 24px; margin-right: 50px; }
        .avatar-preview { width: 40px; height: 40px; font-size: 18px; margin-right: 10px; object-fit: cover; }
        .user-text-area { flex: 1; }
        .user-name { font-size: 18px; color: #333; font-weight: 500; margin-bottom: 4px; }
        .user-status { font-size: 14px; color: #999; }
        .edit-btn-label { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .edit-btn-value {
            flex: 1; font-size: 14px; color: #666; text-align: right; padding-right: 10px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .avatar-big-preview {
            aspect-ratio: 1/1; width: 100%;
            background-color: #f2f2f2;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f2f2f2'/%3E%3Ccircle cx='50' cy='40' r='17' fill='%23c2c6cc'/%3E%3Cpath d='M22 82c0-15 12.6-24 28-24s28 9 28 24z' fill='%23c2c6cc'/%3E%3C/svg%3E");
            background-size: cover; background-position: center;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: clamp(40px, 20vw, 120px); object-fit: cover; border-radius: 0;
        }
        /* 默认态：白底灰人像由背景呈现，隐藏占位的绿底 fa-user 图标 */
        .avatar-big-preview > .fa-user { display: none; }
        
        #chat-list-container { display: flex; flex-direction: column; }
		.wechat-login-banner {
			background-color: #ededed;
			padding: 8px 0;
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		}
		.wechat-login-row {
			background-color: transparent;
			padding: 10px 20px;
			font-size: 13px;
			color: #333;
			line-height: 18px;
			border-bottom: 1px solid rgba(0, 0, 0, 0.04);
			user-select: none;
		}
		.wechat-login-row:last-child {
			border-bottom: none;
		}
		.wechat-login-row .wechat-login-sub {
			margin-top: 2px;
			font-size: 12px;
			color: #888;
		}
		.chat-mini-pin-note {
			background-color: #f5f5f5;
			padding: 8px 15px;
			font-size: 12px;
			color: #666;
			line-height: 16px;
			border-bottom: 1px solid #f0f0f0;
			user-select: none;
		}
        .chat-card {
            display: flex; align-items: center; padding: 10px 15px;
            background-color: #fff; border-bottom: 1px solid #f0f0f0;
            cursor: pointer; transition: background-color 0.2s;
        }
        .chat-card:hover { background-color: #f5f5f5; }
        .chat-avatar {
            width: 50px; height: 50px; border-radius: 8px; margin-right: 15px;
            flex-shrink: 0; background-color: #e9e9e9; display: flex;
            align-items: center; justify-content: center; overflow: visible; overflow: hidden; 
        }
        .chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .chat-avatar i { font-size: 24px; color: #aaa; }
        .chat-info { flex-grow: 1; overflow: hidden; }
        .chat-info-top {
            display: flex; justify-content: space-between;
            align-items: center; margin-bottom: 4px;
        }
        .chat-name { font-size: 16px; font-weight: 500; color: #333; }
        .chat-time { font-size: 12px; color: #999; flex-shrink: 0; margin-left: 10px; }
        .chat-last-msg {
            font-size: 14px; color: #888; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis;
        }
		/* ============================================================ */
		/* 分组折叠与拖拽排序样式 */
		/* ============================================================ */
		.chat-group-wrapper {
			background: transparent;
		}

		.chat-group-header {
			font-size: 12px;
			color: #888;
			padding: 12px 15px 6px 15px;
			background-color: transparent;
			font-weight: bold;
			letter-spacing: 1px;
			border-bottom: none;
			display: flex;         /* 新增：Flex布局以排列图标 */
			align-items: center;   /* 新增：垂直居中 */
			cursor: pointer;       /* 新增：手型指针，提示可点击 */
			user-select: none;     /* 新增：防止双击时选中文本 */
		}

		/* 标题文字区域撑开剩余空间 */
		.chat-group-header .group-title {
			flex: 1;
			display: flex;
			align-items: center;
		}
		.chat-group-header .group-title i {
			margin-right: 5px;
		}

		/* 折叠/展开 箭头图标 */
		.chat-group-header .toggle-icon {
			font-size: 14px;
			color: #ccc;
			padding-left: 10px;
			transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		}
		/* 折叠状态下，箭头向右 */
		.chat-group-header.collapsed .toggle-icon {
			transform: rotate(-90deg);
		}

		/* 拖拽手柄 (三道杠) */
		.drag-handle {
			padding: 5px 10px 5px 0;
			cursor: grab;
			font-size: 14px;
			color: #c5c5c5;
		}
		.drag-handle:active {
			cursor: grabbing;
		}

		/* 拖拽时生成的幽灵卡片效果 */
		.sortable-ghost {
			opacity: 0.4;
			background-color: #e9e9e9;
			border-radius: 8px;
		}

		/* 分组内容区 */
		.chat-group-content {
			display: block;
			overflow: hidden;
		}
		.chat-group-content.collapsed {
			display: none; /* 折叠时隐藏内容 */
		}
        /* ============================================================ */
        /* 【8. 弹窗和隐藏元素样式】*/
        /* ============================================================ */
        .modal-mask {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background-color: rgba(0, 0, 0, 0.5); z-index: 1000; display: none;
            align-items: center; justify-content: center;
        }
        .modal-mask.show { display: flex; }
        #upload-modal { align-items: flex-end; }
        .upload-modal-content {
            width: 100%; background-color: #fff; border-radius: 12px 12px 0 0;
            padding: 15px 0; margin-bottom: env(safe-area-inset-bottom);
        }
        .upload-modal-btn {
            height: 50px; line-height: 50px; text-align: center; font-size: 16px;
            color: #2b3440; cursor: pointer; border-bottom: 1px solid rgba(223, 228, 236, 0.9);
            background: var(--ios-btn-bg); box-shadow: var(--ios-btn-shadow); font-weight: 600;
        }
        .upload-modal-btn:last-child { border-bottom: none; margin-top: 10px; color: var(--ios-pink); }
        .center-modal-content {
            width: 90%; max-width: 320px; background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,249,252,0.98) 100%); border-radius: 20px;
            padding: 20px; display: flex; flex-direction: column; gap: 15px; border: 1px solid rgba(225,230,238,0.9); box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
        }
        .center-modal-title { font-size: 18px; font-weight: 500; text-align: center; }
        .center-modal-input {
            width: 100%; height: 42px; border: 1px solid rgba(214, 220, 230, 0.95); border-radius: 14px; padding: 0 12px; font-size: 16px; background: rgba(255,255,255,0.92);
        }
        .center-modal-buttons { display: flex; gap: 10px; }
        .center-modal-buttons button { flex: 1; height: 42px; border-radius: 14px; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: var(--ios-btn-shadow); }
        .modal-btn-primary { background: linear-gradient(180deg, #20242b 0%, #11161d 100%); color: #fff; border: 1px solid rgba(17, 22, 29, 0.95); }
        .modal-btn-secondary { background: var(--ios-btn-bg); color: #2b3440; border: 1px solid rgba(210, 217, 228, 0.96); }
        .modal-btn-primary, .modal-btn-secondary { touch-action: manipulation; }
        #app-alert-modal .modal-btn-primary { background: linear-gradient(180deg, #20242b 0%, #11161d 100%); color: #fff; border: 1px solid rgba(17, 22, 29, 0.95); }
        #delete-confirm-modal .modal-btn-secondary { background: var(--ios-btn-bg); color: #2b3440; border: 1px solid rgba(210, 217, 228, 0.96); }
        #delete-confirm-modal .modal-btn-primary { background: linear-gradient(180deg, var(--ios-pink) 0%, #ff79a2 100%) !important; color: #fff; border: 1px solid var(--ios-pink-border); }
		.warehouse-progress-content {
			gap: 12px;
		}
		.warehouse-progress-message,
		.warehouse-progress-detail {
			white-space: pre-wrap;
			line-height: 1.6;
			font-size: 14px;
			color: #374151;
		}
		.warehouse-progress-bar-wrap {
			display: flex;
			align-items: center;
			gap: 10px;
		}
		.warehouse-progress-bar {
			flex: 1;
			height: 10px;
			border-radius: 999px;
			overflow: hidden;
			background: rgba(226, 232, 240, 0.95);
		}
		.warehouse-progress-fill {
			height: 100%;
			width: 0%;
			border-radius: inherit;
			background: linear-gradient(90deg, #7b92ff 0%, #4fd1c5 100%);
			transition: width 0.2s ease;
		}
		.warehouse-progress-percent {
			min-width: 42px;
			text-align: right;
			font-weight: 700;
			color: #111827;
		}
		.warehouse-progress-meta {
			display: flex;
			justify-content: space-between;
			gap: 12px;
			font-size: 12px;
			color: #6b7280;
		}
		.warehouse-progress-actions .modal-btn-secondary,
		.warehouse-progress-actions .modal-btn-primary {
			flex: 1;
		}
		.desktop-widget-rect-content {
			width: min(92vw, 360px);
			background: #fff;
			border-radius: 18px;
			padding: 18px;
			display: flex;
			flex-direction: column;
			gap: 12px;
			box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
		}
		.desktop-widget-rect-tip,
		.desktop-widget-rect-label {
			font-size: 12px;
			color: #666;
			line-height: 1.5;
			text-align: center;
		}
		.desktop-widget-rect-grid {
			display: grid;
			gap: 6px;
			padding: 12px;
			border-radius: 16px;
			background: linear-gradient(180deg, rgba(245,250,249,0.96) 0%, rgba(233,244,242,0.96) 100%);
			border: 1px solid rgba(214,229,225,0.96);
			touch-action: none;
			user-select: none;
		}
		.desktop-widget-rect-cell {
			aspect-ratio: 1 / 1;
			border: 1px dashed rgba(111,148,152,0.38);
			border-radius: 10px;
			background: rgba(255,255,255,0.72);
			padding: 0;
		}
		.desktop-widget-rect-cell.selected {
			background: rgba(111,148,152,0.22);
			border-style: solid;
			border-color: rgba(111,148,152,0.86);
			box-shadow: inset 0 0 0 1px rgba(111,148,152,0.18);
		}
		.wechat-login-select-section {
			background: #f8f8f8;
			border: 1px solid #eee;
			border-radius: 10px;
			padding: 10px 12px;
		}
		.wechat-login-select-section-title {
			font-size: 12px;
			color: #999;
			margin-bottom: 8px;
		}
		.wechat-login-radio {
			display: flex;
			align-items: center;
			gap: 10px;
			height: 40px;
			border-top: 1px solid #eee;
			font-size: 14px;
			color: #333;
			cursor: pointer;
		}
		.wechat-login-radio:first-of-type {
			border-top: none;
		}
		.wechat-login-radio input[type="radio"] {
			width: 16px;
			height: 16px;
		}
        #preset-list-container {
            max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
        }
        .preset-list-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px; background-color: #f8f8f8; border-radius: 4px;
        }
        .preset-list-item span { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .preset-delete-btn {
            width: 30px; height: 30px; border: none; background: transparent;
            color: #ff3b30; font-size: 18px; cursor: pointer; margin-left: 10px;
        }
        #avatar-upload-file, #avatar-upload-album, #backup-upload-file, #character-avatar-upload-input { display: none; }
    
		/* ============================================================ */
        /* 【9. 对话卡片操作菜单样式】 */
        /* ============================================================ */
        .chat-actions-btn {
            position: absolute;
            right: 5px;
            top: 5px;
            width: 30px;
            height: 30px;
            border: none;
            background: transparent;
            color: #ccc;
            font-size: 16px;
            cursor: pointer;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .chat-actions-btn:hover {
            background-color: #e0e0e0;
            color: #888;
        }
        
        /* 重新调整卡片内边距，为按钮留出空间 */
        .chat-card {
            position: relative; /* 必须设置为相对定位，作为按钮的定位基准 */
            padding-right: 40px; /* 右侧留出空间给按钮 */
        }

		/* ============================================================ */
		/* 【未读消息提示样式】*/
		/* ============================================================ */
		/* 头像上的红色圆点 */
		.chat-avatar-unread {
			position: absolute;
			top: 2px;
			left: 50px;
			width: 18px;
			height: 18px;
			background-color: #ff3b30;
			border-radius: 50%;
			border: 3px solid #fff;
			display: none;
			z-index: 10;
			align-items: center;
			justify-content: center;
			font-size: 10px;
			font-weight: bold;
			color: #fff;
			min-width: 18px;
			line-height: 18px;
		}
		.chat-card.has-unread .chat-avatar-unread {
			display: flex;
		}
	.chat-avatar-unread::after {
		content: attr(data-unread-count);
	}
	/* ============================================================ */
    /* 【10.对话详情页面样式】 */
	/* ============================================================ */

	/* 1. 聊天输入底栏 (固定在底部，替代导航栏) */
		.chat-input-bar {
		position: fixed;
		bottom: 0;
		left: 0; 
		right: 0;
		/* min-height 不需要写死，由内容撑开，但给个默认值 */
		min-height: 50px; 
		background-color: #f1f1f1;
		border-top: none;
		display: flex;
		align-items: center;
		padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
		z-index: 1001;
		gap: 6px;
		transition: transform 0.1s; /* 键盘弹出时平滑过渡 */
}

	/* ============================================================ */

        .chat-bar-group { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
        .chat-bar-center { flex-grow: 1; min-width: 0; }
        .chat-bar-group-left { margin-right: 2px; }
        .chat-bar-group-right { margin-left: 2px; }

        .chat-bar-btn {
            width: 24px; height: 24px; border-radius: 0;
            border: none; background: transparent;
            color: #5b5b5b; font-size: 20px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            padding: 0;
            line-height: 24px;
        }
        .chat-bar-btn:active { background-color: rgba(0, 0, 0, 0.06); }
        #emoticon-toggle-btn,
        #chat-attach-btn {
            color: #5c5c5c;
        }
        #emoticon-toggle-btn i,
        #chat-attach-btn i {
            font-size: 20px;
        }
        .chat-action-btn {
            width: auto;
            min-width: 44px;
            height: 26px;
            border-radius: 8px;
            padding: 0 7px;
            font-size: 13px;
            font-weight: 600;
            line-height: 26px;
            margin-top: -1px;
            transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
        }
        .chat-action-send {
            background: #07c160;
            color: #fff !important;
            box-shadow: 0 4px 12px rgba(7, 193, 96, 0.22);
        }
        .chat-action-receive {
            background: #e7e7e7;
            color: #5f5f5f !important;
        }
        .chat-input-bar.chat-action-armed .chat-action-receive {
            background: #d9f5e6;
            color: #07c160 !important;
            box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.12);
            transform: scale(1.04);
        }

        .chat-bar-input {
            width: 100%;
			/* 初始高度：一行的高度 */
			height: 32px; 
			min-height: 32px;
			/* 最大高度：超过这个高度出现滚动条 (约4-5行) */
			max-height: 120px; 
			border: none;
			border-radius: 10px;
			padding: 6px 10px;
			font-size: 16px; 
			background-color: #fff;
			white-space: pre-wrap;
			overflow-x: hidden;
			overflow-y: auto; /* 内容多了允许内部滚动 */
			resize: none;
			box-sizing: border-box;
			line-height: 20px; /* 设定明确的行高 */
			color: #111;
        }
        .chat-bar-input:focus {
            outline: none;
            box-shadow: inset 0 0 0 1px rgba(7, 193, 96, 0.18);
        }

        /* ============================================================ */
        /* 【11. 白色卡片样式】 */
        /* ============================================================ */
        .chat-menu-dropdown {
            position: absolute;
            top: 50px; right: 10px;
            background-color: #fff; /* 背景改为白色 */
            color: #333; /* 文字改为深色 */
            border-radius: 4px;
            width: 150px;
            display: none;
            box-shadow: 0 0 15px rgba(0,0,0,0.15); /* 添加阴影，让白底更明显 */
            z-index: 2000;
        }
        .chat-menu-dropdown.show { display: block; }
        
        /* 修改上方的小三角箭头颜色 */
        .chat-menu-dropdown::before {
            content: ''; position: absolute; top: -6px; right: 12px;
            width: 0; height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #fff; /* 箭头颜色改为白色 */
        }
        
        .chat-menu-item {
            padding: 12px 15px;
            border-bottom: 1px solid #f5f5f5; /* 分割线颜色变浅 */
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        .chat-menu-item:last-child { border-bottom: none; }
        .chat-menu-item:active { background-color: #f0f0f0; } /* 点击反馈颜色 */

        /* 3. 聊天内容区域调整 */
        #chat-detail-page .page-content {
            /* 底部留出空间给输入框，防止内容被遮挡 */
            padding-bottom: 15px; 
            display: flex; flex-direction: column;
        }
		
		/* ============================================================ */
        /* 【12. 新建对话页 - 多选滚动窗口 & 圆形勾选样式】 */
        /* ============================================================ */
        /* 修改 .scroll-select-box 样式，让它更适合容纳分组标题 */
		.scroll-select-box {
			width: 100%;
			height: 150px; /* 稍微增高一点 */
			border: 1px solid var(--sea-border, #ddd);
			border-radius: 4px;
			background-color: var(--sea-surface-strong, #fff);
			color: var(--sea-ink, inherit);
			overflow-y: auto;
			padding: 5px 0; /* 减少内边距，由内部元素控制 */
		}

		/* 复选框条目样式微调 */
		.checkbox-item {
			display: flex;
			align-items: center;
			cursor: pointer;
			padding: 8px 10px; /* 移到这里控制 */
			border-bottom: 1px solid #f9f9f9;
			margin-bottom: 0; /* 移除原来的 margin */
		}
        
        .checkbox-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            cursor: pointer;
            padding: 8px 0;
            border-bottom: 1px solid #f9f9f9;
        }
        .checkbox-item:last-child { border-bottom: none; }
        
        /* 1. 隐藏原始的方形复选框 */
        .checkbox-item input[type="checkbox"] {
            display: none; 
        }
        
        /* 2. 自定义圆形外框 */
        .custom-check-circle {
            width: 20px; height: 20px;
            border: 2px solid #ccc; /* 未选中时的灰色边框 */
            border-radius: 50%;     /* 变成圆形 */
            margin-right: 12px;
            position: relative;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        
        /* 3. 自定义中间的实心圆点 (默认隐藏) */
        .custom-check-circle::after {
            content: "";
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%) scale(0); /* 缩放到0，即隐藏 */
            width: 10px; height: 10px;
            background-color: #07c160; /* 选中时的绿色实心 */
            border-radius: 50%;
            transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        /* 4. 选中状态：外框变绿 */
        .checkbox-item input[type="checkbox"]:checked + .custom-check-circle {
            border-color: #07c160;
        }
        
        /* 5. 选中状态：中间实心点出现 */
        .checkbox-item input[type="checkbox"]:checked + .custom-check-circle::after {
            transform: translate(-50%, -50%) scale(1);
        }
		
		
		/* ============================================================ */
		/* 【13. 聊天气泡 & 消息流样式 (新增)】 */
		/* ============================================================ */

		/* 消息行容器 */
		.chat-msg-row {
			display: flex;
			width: 100%;
			margin-bottom: 15px;
			align-items: flex-start;
		}

		/* 消息流向区分 */
		.chat-msg-row.left { flex-direction: row; } /* AI 消息 */
		.chat-msg-row.right { flex-direction: row-reverse; } /* 用户消息 */

		/* 头像样式 */
		.msg-avatar {
			width: 40px; height: 40px;
			border-radius: 6px;
			flex-shrink: 0;
			overflow: hidden;
			background-color: #ddd;
		}
		.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
		.msg-avatar i { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; background-color: #ccc; }

		/* 气泡内容包裹层 (包含气泡、时间详情) */
		.msg-content-wrapper {
			max-width: 70%;
			margin: 0 10px;
			display: flex;
			flex-direction: column;
			position: relative;
		}
		.chat-msg-row.left .msg-content-wrapper { align-items: flex-start; }
		.chat-msg-row.right .msg-content-wrapper { align-items: flex-end; }

		/* 气泡本体 */
		.msg-bubble {
			padding: 10px 12px;
			border-radius: 6px;
			font-size: 16px;
			line-height: 1.5;
			color: #333;
			word-wrap: break-word;
			overflow-wrap: break-word; 
			word-break: break-word;
			cursor: pointer; /* 点击显示时间 */
		}

		/* 气泡颜色 */
		.chat-msg-row.left .msg-bubble {
			background-color: #fff;
			border: 1px solid #ededed;
		}
		.chat-msg-row.right .msg-bubble {
			background-color: #95ec69; /* 微信绿 */
			border: 1px solid #86d65e;
			
		}

		/* 详情时间 (默认隐藏，点击气泡显示) */
		.msg-detail-time {
			font-size: 12px;
			color: #b2b2b2;
			margin-top: 4px;
			display: none; /* 默认隐藏 */
			user-select: none;
		}
		.msg-detail-time.show { display: block; }


		/* 居中系统时间戳 (超过5分钟显示) */
		.system-time-stamp {
			text-align: center;
			margin: 20px 0;
		}
		.system-time-stamp span {
			background-color: rgba(0,0,0,0.1);
			color: #fff;
			font-size: 12px;
			padding: 4px 8px;
			border-radius: 4px;
		}
		
		/* ============================================================ */
		/* 14.撤回消息实体化 & 菜单样式 */
		/* ============================================================ */

		/* 1. 撤回消息的行容器 (为了容纳批量复选框，必须由 flex 布局) */
		.chat-msg-row.system-row {
			justify-content: center; /* 默认居中 */
			width: 100%;
			margin-bottom: 15px;
			position: relative;
		}

		/* 2. 批量模式下，系统行需要左对齐以便显示复选框 */
		.batch-mode-active .chat-msg-row.system-row {
			justify-content: flex-start;
		}

		/* 3. 撤回消息的实体胶囊 */
		.system-withdraw-msg {
			background-color: rgba(0, 0, 0, 0.05); /* 浅灰色背景 */
			padding: 4px 10px;
			border-radius: 4px;
			font-size: 12px;
			color: #999;
			cursor: pointer; /* 鼠标变为手型，提示可点击 */
			user-select: none;
			transition: background-color 0.2s;
			position: relative; /* 为菜单定位做基准 */
			display: inline-block;
		}

		.system-withdraw-msg:active {
			background-color: rgba(0, 0, 0, 0.1); /* 点击反馈 */
		}

		/* 4. 系统消息的菜单定位 (居中上方) */
		.chat-msg-row.system-row .bubble-menu {
			left: 50%;
			transform: translateX(-50%);
			transform-origin: bottom center;
			bottom: 100%;
			margin-bottom: 8px;
		}
		/* 菜单直接显示，无动画 */
		.chat-msg-row.system-row .bubble-menu.show { 
			display: grid;
			animation: none;
		}

		/* 5. 系统消息菜单的小三角 (居中) */
		.chat-msg-row.system-row .bubble-menu::after {
			left: 50%;
			margin-left: -6px; /* 居中修正 */
			right: auto;
		}
		/* ============================================================ */
		/* 【15. 气泡悬浮菜单样式 (新版)】 */
		/* ============================================================ */

		/* 确保包裹层相对定位，作为菜单定位的基准 */
		.msg-content-wrapper {
			position: relative; 
			/* 其他样式保持不变... */
		}

		/* ============================================================ */
		/* 【14. 气泡悬浮菜单样式 (修复版)】 */
		/* ============================================================ */

		.msg-content-wrapper {
			position: relative;
			display: flex;
			flex-direction: column;
		}

		/* 黑色小卡片菜单容器 - 基础样式 */
		.bubble-menu {
			position: absolute;
			bottom: 100%; /* 位于气泡上方 */
			background-color: #333;
			border-radius: 10px;
			padding: 4px; /* 内边距容纳栅格 */
			display: none;
			grid-template-columns: repeat(5, minmax(0, 1fr)); /* 每行至多5个 */
			gap: 2px;
			align-items: stretch;
			box-shadow: 0 4px 12px rgba(0,0,0,0.2);
			z-index: 100;
			margin-bottom: 8px;
			width: 300px;
			max-width: calc(100vw - 24px);
			box-sizing: border-box;
		}

		/* 【新增】上方空间不足时翻转到气泡下方 */
		.bubble-menu.menu-below {
			bottom: auto;
			top: 100%;
			margin-bottom: 0;
			margin-top: 8px;
		}

		/* --- 左侧 AI 消息菜单：左对齐 --- */
		.chat-msg-row.left .bubble-menu {
			left: 0;
			transform-origin: bottom left;
		}
		/* 左侧小三角 */
		.chat-msg-row.left .bubble-menu::after {
			content: ''; position: absolute; top: 100%; left: 15px; /* 箭头靠左 */
			border-width: 6px; border-style: solid; border-color: #333 transparent transparent transparent;
		}

		/* --- 右侧 用户 消息菜单：右对齐 --- */
		.chat-msg-row.right .bubble-menu {
			right: 0;
			transform-origin: bottom right;
		}
		/* 右侧小三角 */
		.chat-msg-row.right .bubble-menu::after {
			content: ''; position: absolute; top: 100%; right: 15px; /* 箭头靠右 */
			border-width: 6px; border-style: solid; border-color: #333 transparent transparent transparent;
		}

		/* 菜单显示动画 */
		.bubble-menu.show { display: grid; animation: menuPop 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28); }

		@keyframes menuPop {
			from { opacity: 0; transform: scale(0.8); }
			to { opacity: 1; transform: scale(1); }
		}

		/* 菜单项文字按钮 */
		.menu-option {
			color: #fff; font-size: 12px; line-height: 1.2;
			cursor: pointer; user-select: none; position: relative;
			padding: 9px 4px; min-width: 0;
			display: flex; align-items: center; justify-content: center;
			text-align: center; white-space: nowrap;
			border-radius: 8px;
		}
		.menu-option:active { background-color: #555; }
		/* 长按显示中文名 tooltip */
		.menu-option.byg-show-tip::after {
			content: attr(title); position: absolute; bottom: 100%; left: 50%;
			transform: translateX(-50%); margin-bottom: 4px;
			background: rgba(0,0,0,0.85); color: #fff; font-size: 11px;
			padding: 3px 7px; border-radius: 5px; white-space: nowrap; z-index: 200;
		}
		
		/* 简单的淡入动画 */
		@keyframes fadeIn {
			from { opacity: 0; transform: translateX(-50%) translateY(5px); }
			to { opacity: 1; transform: translateX(-50%) translateY(0); }
		}
		
		/* ============================================================ */
		/* 【16. 编辑弹窗专属样式】 */
		/* ============================================================ */
		#edit-msg-input {
			resize: none; /* 禁止手动拖动大小 */
			font-family: inherit;
			line-height: 1.5;
		}
		/* 确保弹窗层级最高 */
		#edit-msg-modal { z-index: 2000; }

		/* ============================================================ */
		/* 【17. 历史记录加载器样式】 */
		/* ============================================================ */
		.history-loader {
			text-align: center;
			padding: 15px 0;
			cursor: pointer;
			font-size: 12px;
			color: #999;
			user-select: none;
		}
		.history-loader span {
			background-color: rgba(0,0,0,0.05);
			padding: 4px 12px;
			border-radius: 10px;
		}
		.history-loader:active span {
			background-color: rgba(0,0,0,0.1);
		}
		
		/* ============================================================ */
		/* 【18. 下拉加载动画专属样式】 */
		/* ============================================================ */

		/* 消息容器 (用于做位移动画) */
		#chat-message-container {
			transform: translateY(0);
			/* 默认不加 transition，拖动时需要实时跟随；松手时才加 transition */
		}
		#chat-message-container.animating {
			transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		}

		/* 顶部隐藏的加载提示区 */
		.pull-refresh-spinner {
			position: absolute;
			top: -40px; /* 藏在顶部外面 */
			left: 0;
			width: 100%;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			color: #999;
			z-index: 10;
			opacity: 0;
			transition: opacity 0.2s;
		}
		.pull-refresh-spinner.visible { opacity: 1; }
		.pull-refresh-spinner i { margin-right: 6px; }

		/* 旋转动画 */
		.fa-spin-fast { animation: fa-spin 1s infinite linear; }
		
		
		/* ============================================================ */
		/* 【19. 新增功能样式：引用、撤回、预览条】 */
		/* ============================================================ */

		/* 1. 输入框上方的引用预览条 */
		.reply-preview-bar {
		  position: absolute;
		  bottom: 100%; /* 位于输入栏正上方 */
		  left: 0;
		  right: 0;
		  background-color: #f7f7f7;
		  padding: 8px 12px;
		  border-top: 1px solid #e5e5e5;
		  border-bottom: 1px solid #e5e5e5;
		  display: none; /* 默认隐藏 */
		  align-items: center;
		  justify-content: space-between;
		  z-index: 1000;
		  color: #666;
		  font-size: 13px;
		}
		.reply-preview-bar.show { display: flex; }
		.reply-text {
		  overflow: hidden;
		  text-overflow: ellipsis;
		  white-space: nowrap;
		  max-width: 85%;
		  border-left: 3px solid #07c160;
		  padding-left: 8px;
		}
		.reply-close-btn {
		  font-size: 16px;
		  color: #999;
		  padding: 5px;
		  cursor: pointer;
		}

		/* 2. 气泡内的引用卡片 - 合并所有定义，解决样式冲突 */
		.msg-quote-card {
		  display: flex;
		  flex-direction: column;
		  background-color: rgba(0, 0, 0, 0.05); /* 左侧AI气泡浅灰背景 */
		  border-radius: 4px;
		  padding: 6px 10px;
		  margin-bottom: 8px; /* 和正文拉开距离 */
		  border-left: 3px solid #ccc; /* 左侧装饰线（AI气泡） */
		  font-size: 13px;
		  color: #666;
		  line-height: 1.4;
		  user-select: none; /* 防止复制时选中 */
		  cursor: default;
		}
		/* 引用卡片-用户名 */
		.msg-quote-name {
		  font-weight: 600;
		  margin-bottom: 2px;
		  font-size: 12px;
		  opacity: 0.9; /* 微调透明度，名字更清晰 */
		  color: #555;
		}
		/* 引用卡片-内容（最多2行，超出省略） */
		.msg-quote-content {
		  overflow: hidden;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-line-clamp: 2;
		  -webkit-box-orient: vertical;
		}

		/* 右侧用户气泡 - 引用卡片专属样式（增强对比度，贴合原有设计） */
		.chat-msg-row.right .msg-quote-card {
		  background-color: rgba(0, 0, 0, 0.1); 
		  border-left-color: #888; /* 加深装饰线，和右侧气泡匹配 */
		  color: #444; /* 绿色背景下文字更清晰 */
		}
		/* 右侧气泡-引用名字（同步加深，保持视觉统一） */
		.chat-msg-row.right .msg-quote-name {
		  color: #333;
		  opacity: 1;
		}

		/* 3. 撤回消息的系统提示 (复用 system-time-stamp，但稍微调整) */
		.system-withdraw-msg {
		  text-align: center;
		  margin: 10px 0;
		  font-size: 12px;
		  color: #999;
		}
		.system-withdraw-msg span {
		  padding: 2px 5px;
		}
		
		/* ============================================================ */
		
		/* ============================================================ */
		/* 【20. 批量删除模式专属样式】 */
		/* ============================================================ */

		/* 1. 复选框容器 (默认隐藏，宽度为0) */
		.batch-checkbox-col {
			width: 0;
			overflow: hidden;
			opacity: 0;
			transition: all 0.2s ease; /* 添加动画效果 */
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* 2. 激活批量模式时，复选框显示 */
		.batch-mode-active .batch-checkbox-col {
			width: 40px; /* 腾出空间 */
			opacity: 1;
			margin-right: 5px;
		}

		/* 3. 复选框圆圈样式 */
		.batch-circle {
			width: 22px; height: 22px;
			border: 2px solid #c5c5c5;
			border-radius: 50%;
			position: relative;
			background-color: #fff;
			flex-shrink: 0;
		}

		/* 4. 选中状态 (变成绿色实心) */
		.batch-circle.checked {
			background-color: #07c160;
			border-color: #07c160;
		}
		.batch-circle.checked::after {
			content: '';
			position: absolute;
			left: 7px; top: 3px;
			width: 5px; height: 10px;
			border: solid white;
			border-width: 0 2px 2px 0;
			transform: rotate(45deg);
		}

		/* 5. 底部批量操作栏 (固定在底部) */
		.batch-action-bar {
			position: fixed;
			bottom: 0; left: 0; right: 0;
			height: 50px;
			background-color: #f7f7f7;
			border-top: 1px solid #dcdcdc;
			display: none; /* 默认隐藏 */
			align-items: center;
			justify-content: space-between;
			padding: 0 20px;
			padding-bottom: env(safe-area-inset-bottom);
			z-index: 1100; /* 层级要比输入框高 */
		}
		.batch-action-bar.show { display: flex; }

		.batch-btn {
			min-height: 44px;
			padding: 10px 16px;
			font-size: 15px;
			font-weight: 600;
			border-radius: 14px;
			border: 1px solid var(--sea-border);
			background: linear-gradient(180deg, var(--sea-surface) 0%, var(--sea-surface-strong) 100%);
			box-shadow: var(--sea-shadow);
			color: var(--sea-ink);
			cursor: pointer;
			transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
		}
		.batch-btn:hover { transform: translateY(-1px); }
		.batch-btn:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(31, 41, 55, 0.08); }
		.batch-cancel { color: #333; }
		.batch-delete { color: var(--ios-pink); font-weight: 600; }
		.batch-delete:disabled { color: #ccc; }
		#desktop-theme-page .form-section button,
		#setting-page .form-section button {
			min-height: 42px;
			padding: 10px 16px;
			border-radius: 14px;
			font-size: 14px;
			font-weight: 600;
			text-align: center;
		}
		#desktop-theme-page .form-section button i,
		#setting-page .form-section button i {
			margin-right: 4px;
		}
		#desktop-theme-page [id*="clear"],
		#setting-page [id*="delete"],
		#setting-page [id*="clear"] {
			color: var(--ios-pink);
			border-color: var(--ios-pink-border);
			background: linear-gradient(180deg, #fff8fb 0%, var(--ios-pink-soft) 100%);
		}


		/* ============================================================ */
		/* 【21.全局基础样式】-> top-bar 区域修改 */
		/* ============================================================ */

		/* 聊天详情页顶栏，增加高度以容纳两行文字 */
		#chat-detail-top {
			height: 60px; /* 从 44px 增加到 60px */
		}

		/* 标题容器，改为垂直flex布局 */
		#chat-detail-title-container {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 2px; /* 标题和副标题之间的间距 */
		}

		/* 主标题 */
		.top-bar-main-title {
			font-size: 16px;
			font-weight: 500;
			color: #333;
			max-width: 200px;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		/* 副标题 (状态) */
		.top-bar-subtitle {
			font-size: 12px;
			color: #888;
		}

		/* 修正返回按钮和右侧按钮的垂直居中 */
		#chat-detail-top .top-bar-back,
		#chat-detail-top .top-bar-right-btn {
			height: 60px; /* 与顶栏高度一致 */
		}
		
		/* ============================================================ */
		/* 【22. 对话卡片置顶 & 菜单样式 (新增)】 */
		/* ============================================================ */

		/* 1. 置顶对话卡片的特殊背景色 */
		.chat-card.pinned {
			background-color: #f5f5f5;
		}

		/* 2. 确保新菜单使用绝对定位，以便 JS 控制位置 */
		#chat-card-action-menu {
			position: absolute; /* 必须是 absolute */
		}

		/* ============================================================ */
		/* 【新增/确认】AI 撤回内容气泡样式 */
		/* ============================================================ */

		/* 隐藏内容的特殊气泡 */
		.ai-secret-bubble {
			display: none; /* 默认隐藏 */
			margin-top: 8px; /* 距离上方胶囊的间距 */
			padding: 10px 14px;
			background-color: #fff; /* 改为白色背景，更像气泡 */
			border: 1px solid #e0e0e0;
			border-radius: 8px;
			color: #666;
			font-size: 14px;
			max-width: 85%;
			position: relative;
			box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 加一点阴影 */
			animation: fadeIn 0.3s ease;
			word-wrap: break-word;
		}

		.ai-secret-bubble.show {
			display: block;
		}

		/* 简单的淡入动画 */
		@keyframes fadeIn {
			from { opacity: 0; transform: translateY(-5px); }
			to { opacity: 1; transform: translateY(0); }
		}

		/* 记忆设置页 - 长期记忆占位符 */
		.long-term-placeholder {
			background-color: #f9f9f9;
			border: 2px dashed #ddd;
			border-radius: 8px;
			padding: 40px 20px;
			text-align: center;
			color: #aaa;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			transition: all 0.3s;
		}

		.long-term-placeholder:hover {
			border-color: #ccc;
			background-color: #f5f5f5;
		}

		.long-term-placeholder i {
			font-size: 32px;
			margin-bottom: 15px;
			color: #ccc;
		}

		.long-term-placeholder p {
			font-size: 14px;
			margin: 0;
		}
		
		/* ============================================================ */
		/* 【23. 长期记忆编辑页面样式 (新增)】 */
		/* ============================================================ */
		#ltm-editor-container {
			display: flex;
			flex-direction: column;
			gap: 15px;
		}

		.ltm-counter {
			font-size: 14px;
			color: #888;
			padding: 5px;
			background-color: #f5f5f5;
			border-radius: 4px;
			text-align: center;
			border: 1px solid #eee;
		}

		.ltm-item {
			display: grid;
			grid-template-columns: minmax(0, 1fr) 44px;
			gap: 12px;
			padding: 14px;
			border-radius: 18px;
			background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
			border: 1px solid #e6edf5;
			box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
		}

		.ltm-structured-card {
			display: flex;
			flex-direction: column;
			gap: 10px;
			padding: 14px;
			border-radius: 16px;
			background: linear-gradient(180deg, #fefefe 0%, #f4f8ff 100%);
			border: 1px solid #dfe8f5;
		}

		.ltm-structured-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 10px;
			flex-wrap: wrap;
		}

		.ltm-structured-time {
			font-size: 13px;
			font-weight: 600;
			color: #334155;
		}

		.ltm-structured-mood {
			font-size: 12px;
			color: #475569;
			padding: 5px 10px;
			border-radius: 999px;
			background: rgba(103, 80, 164, 0.08);
		}

		.ltm-structured-section {
			display: flex;
			flex-direction: column;
			gap: 6px;
			padding: 10px 12px;
			border-radius: 12px;
			background: #fff;
			border: 1px solid #e9eef5;
		}

		.ltm-structured-section.quote {
			background: linear-gradient(180deg, #fffaf0 0%, #fff6e8 100%);
			border-color: #f6dfb4;
		}

		.ltm-structured-label {
			font-size: 12px;
			font-weight: 600;
			color: #64748b;
			letter-spacing: 0.02em;
		}

		.ltm-structured-value {
			font-size: 14px;
			line-height: 1.7;
			color: #1f2937;
			white-space: pre-wrap;
			word-break: break-word;
		}

		.ltm-editor-wrap {
			grid-column: 1 / 2;
		}

		.ltm-item textarea {
			width: 100%;
			min-height: 80px;
			resize: vertical;
			padding: 10px;
			border: 1px solid #ddd;
			border-radius: 12px;
			font-size: 14px;
			line-height: 1.6;
			background: #fff;
		}

		.ltm-item-actions {
			display: flex;
			flex-direction: column;
			gap: 8px;
			flex-shrink: 0;
			grid-column: 2 / 3;
			grid-row: 1 / span 2;
			align-self: stretch;
		}

		.ltm-action-btn {
			width: 36px;
			height: 36px;
			border: 1px solid #ddd;
			background-color: #fff;
			border-radius: 4px;
			cursor: pointer;
			font-size: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.ltm-action-btn:active {
			background-color: #f0f0f0;
		}

		.ltm-action-btn.delete { color: #ff3b30; }
		.ltm-action-btn.insert { color: #07c160; }

		@media (max-width: 520px) {
			.ltm-item {
				grid-template-columns: minmax(0, 1fr);
			}

			.ltm-item-actions {
				grid-column: 1 / 2;
				grid-row: auto;
				flex-direction: row;
				justify-content: flex-end;
			}
		}
		
		/* ============================================================ */
		/* 【新增】角色心声面板样式 (V2.0 - 卡片下拉菜单样式) */
		/* ============================================================ */

		/* 关键：给心声面板的父容器（顶部栏）添加相对定位，这是面板定位的基准 */
		#chat-detail-top {
			position: relative; 
			overflow: visible; 
		}

		/* 面板主容器 */
		#inner-status-modal {
			position: absolute; /* 改为绝对定位 */
			top: calc(100% + 5px); /* 定位在父容器（顶部栏）下方 5px 的位置 */
			left: 50%; /* 先居中 */
			transform: translateX(-50%); /* 再通过transform精确居中 */
			width: 90%;
			max-width: 300px;
			
			background-color: #ffffff; /* 浅色卡片背景 */
			color: #333; /* 深色文字 */
			border-radius: 8px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 精致的阴影 */
			border: 1px solid #e0e0e0;
			
			z-index: 500;
			padding: 16px;
			box-sizing: border-box;

			/* 默认隐藏，并为动画做准备 */
			opacity: 0;
			transform: translateX(-50%) translateY(-10px) scale(0.95);
			transition: opacity 0.2s ease-out, transform 0.2s ease-out;
			pointer-events: none; /* 隐藏时不可点击 */
		}

		/* 显示时的状态 */
		#inner-status-modal.show {
			opacity: 1;
			transform: translateX(-50%) translateY(0) scale(1);
			pointer-events: auto; /* 显示时可点击 */
		}

		/* 面板内容区域 */
		.status-content {
			display: flex;
			flex-direction: column;
			gap: 14px; /* 调整项目间距 */
		}

		.status-item {
			display: flex;
			align-items: center;
			font-size: 14px;
			flex-wrap: wrap; /* 允许换行 */
		}

		.status-label {
			color: #666; /* 标签文字颜色 */
			margin-right: 8px;
			white-space: nowrap;
			display: flex;
			align-items: center;
		}

		.status-label .fas {
			margin-right: 6px;
			width: 16px;
			text-align: center;
			color: #5a99d4; /* 图标颜色 */
		}

		.status-value {
			color: #111; /* 主要数值文字颜色 */
			font-weight: 500;
		}

		/* 【核心修改】内心OS的便签效果 */
		.os-item {
			flex-direction: column;
			align-items: flex-start;
			background-color: #fffde7; /* 浅黄色背景，像便签纸 */
			padding: 10px;
			border-radius: 4px;
			margin-top: 5px;
			border-left: 3px solid #fdd835; /* 左侧的黄色加深条，模拟便签 */
		}

		.os-item .status-label {
			margin-bottom: 5px;
		}

		.os-item .status-value {
			color: #5d4037; /* 深褐色文字，在黄色背景上更清晰 */
			font-weight: normal;
			line-height: 1.5;
		}


		/* 醋意指数进度条 */
		.jealousy-bar-container {
			flex-grow: 1; /* 占满剩余空间 */
			min-width: 120px; /* 最小宽度 */
			background-color: #eee;
			border-radius: 8px;
			height: 16px;
			position: relative;
			overflow: hidden;
		}

		.jealousy-bar-fill {
			width: 0%; 
			height: 100%;
			background: linear-gradient(90deg, #ff7e5f, #feb47b);
			border-radius: 8px;
			transition: width 0.5s ease-in-out;
		}

		.jealousy-bar-text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 10px;
			color: #fff;
			font-weight: bold;
			text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
		}
		
		/* ============================================================ */
		/* 【最终修复】强制显示心声面板 CSS */
		/* ============================================================ */

		/* 1. 关键修复：解除顶部栏的封印 */
		/* 很多 Top Bar 默认会有 overflow: hidden，这会导致弹出的菜单被切掉 */
		#chat-detail-top {
			position: relative !important;
			overflow: visible !important; 
			z-index: 9999 !important; /* 确保顶部栏浮在所有内容之上 */
		}

		/* 2. 确保面板自身层级最高且不被透明度隐藏 */
		#inner-status-modal {
			/* 定位修正 */
			position: absolute !important;
			top: 100% !important; /* 紧贴底部 */
			left: 50% !important;
			transform: translateX(-50%) translateY(-10px) scale(0.95) !important;
			
			/* 外观修正 */
			width: 90% !important;
			max-width: 320px !important;
			background-color: #ffffff !important;
			box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important; /* 加深阴影便于观察 */
			border: 1px solid #ccc !important;
			z-index: 10000 !important; /* 比顶部栏更高 */
			
			/* 动画初始状态 */
			opacity: 0 !important;
			pointer-events: none !important;
			transition: opacity 0.2s, transform 0.2s !important;
			
			/* 确保显示方式正确 */
			display: block !important; 
		}

	

		/* 4. 修复标题点击手型 */
		#chat-detail-title-container {
			cursor: pointer !important;
			user-select: none; /* 防止双击选中文本 */
		}
		
		/* ============================================================ */
		/* 【核弹级修复】强制心声面板显示 CSS */
		/* ============================================================ */

		#inner-status-modal {
			/* 1. 使用 fixed 定位，脱离文档流，相对于屏幕窗口定位 */
			position: fixed !important;
			
			/* 2. 手动设定距离屏幕顶部的位置 */
			/* 通常顶部栏高度在 50px-60px 左右，这里设为 60px 确保在名字下方 */
			top: 60px !important; 
			
			/* 3. 居中逻辑 */
			left: 50% !important;
			transform: translateX(-50%) scale(0.95) !important; /* 默认稍微缩小 */
			
			/* 4. 外观样式 */
			width: 90% !important;
			max-width: 340px !important;
			background-color: #ffffff !important;
			border-radius: 12px !important;
			box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important; /* 强阴影 */
			border: 1px solid #eee !important;
			
			/* 5. 层级设为最大，保证在所有内容之上 */
			z-index: 2147483647 !important; 
			
			/* 6. 隐藏状态 */
			opacity: 0 !important;
			visibility: hidden !important; /* 确保不占位，不可点 */
			transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
		}

		/* 显示状态 */
		#inner-status-modal.show {
			opacity: 1 !important;
			visibility: visible !important;
			/* 恢复大小并居中 */
			transform: translateX(-50%) scale(1) !important;
			/* 【核心修复】恢复点击拦截，防止点击穿透到背景层！ */
			pointer-events: auto !important; 
		}

		/* 补充：确保顶部栏标题鼠标样式 */
		#chat-detail-title-container {
			cursor: pointer !important;
			/* 给一个按下的反馈效果，确认点击生效 */
			active: opacity 0.7; 
		}
		
		/* ============================================================ */
		/* 【世界书管理页面样式 - 只显示标题版】 */
		/* ============================================================ */

		/* 分类标题 */
		.wb-category-group {
			margin-bottom: 20px;
		}

		.wb-category-name {
			font-size: 14px;
			color: #888;
			padding: 8px 15px;
			font-weight: bold;
			background-color: transparent;
		}

		/* 世界书卡片容器 */
		.wb-card {
			background-color: #fff;
			padding: 0 15px; /* 左右内边距 */
			height: 50px;    /* 固定高度，像通讯录一样 */
			display: flex;
			justify-content: space-between;
			align-items: center;
			cursor: pointer;
			transition: background-color 0.2s;
			/* 只有中间有分割线，利用 border-bottom */
			border-bottom: 1px solid #f0f0f0;
		}

		/* 分组内的第一个和最后一个卡片的圆角处理（可选，视整体风格而定，这里保持直角或微圆角） */
		.wb-category-group .wb-card:first-of-type {
			border-top: 1px solid #eee;
		}
		.wb-category-group .wb-card:last-of-type {
			border-bottom: 1px solid #eee;
		}

		.wb-card:active {
			background-color: #f5f5f5;
		}

		/* 卡片信息区 */
		.wb-card-info {
			flex-grow: 1;
			overflow: hidden;
			/* 垂直居中 */
			display: flex;
			align-items: center;
			height: 100%;
		}

		/* 标题样式 - 只显示标题 */
		.wb-card-title {
			font-size: 16px;
			color: #333;
			font-weight: 500;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		/* 右侧箭头 */
		.wb-card-arrow {
			color: #ccc;
			font-size: 14px;
			margin-left: 10px;
		}
		
		/* ============================================================ */
		/* 【表情管理页面样式】 */
		/* ============================================================ */

		/* 1. 分类标签栏 (横向滚动) */
		.emoticon-tabs {
			display: flex;
			overflow-x: auto;
			background-color: var(--sea-surface-strong, #fff);
			padding: 10px 15px;
			margin: -10px -10px 15px -10px; /* 抵消 page-content 的 padding */
			border-bottom: 1px solid #eee;
			white-space: nowrap;
			-webkit-overflow-scrolling: touch;
		}

		.emoticon-tab-item {
			display: inline-block;
			padding: 6px 16px;
			margin-right: 10px;
			background-color: #f5f5f5;
			border-radius: 20px;
			font-size: 14px;
			color: #666;
			cursor: pointer;
			transition: all 0.2s;
		}

		.emoticon-tab-item.active {
			background-color: #07c160;
			color: #fff;
			font-weight: 500;
		}

		/* 2. 表情网格布局 */
		.emoticon-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr); /* 一行3个 */
			gap: 10px;
		}

		/* 3. 表情卡片 */
		.emoticon-card {
			background-color: #fff;
			border-radius: 8px;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			position: relative;
			box-shadow: 0 1px 3px rgba(0,0,0,0.05);
			cursor: pointer;
		}

		/* 图片区域 (正方形) */
		.emoticon-img-box {
			width: 100%;
			aspect-ratio: 1/1; /* 保持正方形 */
			background-color: #f9f9f9;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
		}

		.emoticon-img-box img {
			width: 100%;
			height: 100%;
			object-fit: cover; /* 填满 */
		}

		/* 描述文字区域 */
		.emoticon-desc {
			font-size: 12px;
			color: #333;
			padding: 6px 4px;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			background-color: #fff;
			border-top: 1px solid #f0f0f0;
		}

		/* 选中状态遮罩 (批量删除用) */
		.emoticon-select-overlay {
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
			background-color: rgba(0,0,0,0.4);
			display: none;
			align-items: center;
			justify-content: center;
			z-index: 10;
		}

		.emoticon-card.selected .emoticon-select-overlay {
			display: flex;
		}

		.select-icon {
			font-size: 24px;
			color: #07c160;
			background: #fff;
			border-radius: 50%;
			width: 30px;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		/* ============================================================ */
		/* 【表情分组管理 & 按钮修复样式】 */
		/* ============================================================ */

		/* 1. 分组管理容器 */
		#emoticon-group-management {
			margin-top: 30px;
			padding-top: 20px;
			border-top: 1px solid #f0f0f0;
		}

		.group-management-title {
			font-size: 14px;
			font-weight: 500;
			color: #888;
			margin-bottom: 15px;
			text-align: center;
		}

		.group-management-actions {
			display: flex;
			gap: 15px;
		}

		/* 2. 重命名和删除按钮样式 */
		.group-management-actions .batch-btn {
			flex: 1; /* 按钮平分宽度 */
			height: 44px;
			border-radius: 8px;
			font-weight: 500;
		}

		.rename-group-btn {
			background-color: #f0f0f0;
			border: 1px solid #ddd;
			color: #333;
		}

		.delete-group-btn {
			background-color: #fff;
			border: 1px solid #ff3b30;
			color: #ff3b30;
		}

		/* 3. 【核心修复】批量管理入口按钮容器 */
		.emoticon-batch-starter {
			margin-top: 20px;
			padding: 0 10px; /* 稍微给点边距 */
		}
		

		/* ============================================================ */
		/* 【强制修复版】表情选取面板样式 */
		/* ============================================================ */
		.emoticon-picker-content {
			height: 300px; /* 表情面板固定高度 */
		}
		/* 1. 外层容器：全屏覆盖，但背景透明 */
		#emoticon-picker-modal {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			
			/* 【关键1】必须比 .chat-input-bar (1001) 低！
			   这样菜单打开时，你依然可以点击输入框，不会被菜单挡住 */
			z-index: 990; 
			
			/* 【关键2】强制背景透明！双重保险 */
			background-color: transparent !important;
			background: none !important;
			
			/* 【关键3】恢复鼠标事件，否则无法监听到“点击空白处关闭” */
			pointer-events: auto;
			
			/* 布局：内容底部对齐 */
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			
			/* 垫高底部：使用JS计算的高度，默认57px */
			padding-bottom:50px;
			
			/* 默认隐藏 */
			visibility: hidden;
			opacity: 0;
			transition: visibility 0s 0.3s, opacity 0.3s;
		}

		/* 显示状态 */
		#emoticon-picker-modal.show,
		#function-panel-modal.show {
			visibility: visible;
			opacity: 1;
			transition: opacity 0.3s;
		}

		/* 2. 内容白色区域：这是实际可见的菜单 */
		.emoticon-picker-content {
			background-color: #f8f8f8; /* 必须有颜色，不然是透明的 */
			width: 100%;
			height: 300;/* 固定高度 */
			
			/* 顶部圆角和阴影 */
			border-radius: 16px 16px 0 0;
			box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
						
			display: flex;
			flex-direction: column;
		}

		/* 内容滑出 */
		#emoticon-picker-modal.show .emoticon-picker-content,
		#function-panel-modal.show .function-panel-content {
			transform: translateY(0);
		}

		/* 3. 网格区域：修复图片乱飞的问题 */
		.emoticon-picker-grid {
			flex: 1;
			overflow-y: auto;
			padding: 10px;
			
			/* 强制网格布局 */
			display: grid;
			/* 自动填充列，最小宽度75px，解决一行只有一个巨大的问题 */
			grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
			gap: 10px;
		}

		/* 4. 卡片样式：修复图片过大 */
		.emoticon-picker-card {
			background: #fff;
			border-radius: 8px;
			overflow: hidden;
			/* 限制卡片高度，防止撑破 */
			height: 100px; 
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-shadow: 0 1px 2px rgba(0,0,0,0.05);
		}

		.emoticon-picker-img-box {
			width: 100%;
			height: 70%; /* 图片占70% */
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 5px;
		}

		.emoticon-picker-img-box img {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}

		.emoticon-picker-desc {
			height: 30%;
			font-size: 10px;
			color: #666;
			display: flex;
			align-items: center;
			justify-content: center;
		}




		/* ============================================================ */
		/* 【24. 表情包气泡专属样式】 */
		/* ============================================================ */

		/* 1. 图片气泡容器：去除背景色和边框 */
		.msg-bubble.image-bubble {
			background-color: transparent !important; /* 强制透明 */
			border: none !important;                  /* 去除边框 */
			padding: 0 !important;                    /* 去除内边距 */
			box-shadow: none !important;              /* 去除阴影（如果有） */
		}

		/* 2. 图片本身样式 */

		.msg-bubble.image-bubble img.msg-image-content {
		max-width: 150px;       /* 限制最大宽度 */
		max-height: 150px;      /* 限制最大高度 */
		border-radius: 8px;     /* 圆角 */
		display: block;         /* 消除底部空隙 */
		cursor: pointer;
		/* 保持透明通道正常显示，无需额外处理 */
		}

		/* 3. 调整点击反馈 (可选) */
		.msg-bubble.image-bubble:active {
			opacity: 0.7;
			transform: scale(0.98);
			transition: transform 0.1s;
		}

		/* 4. 调整气泡菜单在图片上的位置 */
		/* 稍微上移一点，避免挡住图片头部 */
		.chat-msg-row .image-bubble + .bubble-menu {
			bottom: 105%; 
		}

		/* ============================================================ */
		/* 【新增】聊天背景设置样式 */
		/* ============================================================ */

		/* 1. 背景设置容器（适配URL输入+预览） */
		/* 基础设置项布局优化（保证标签和输入框排版协调） */
		.setting-item {
			display: flex;
			align-items: center;
			padding: 12px 15px;
			border-bottom: 1px solid #f0f0f0;
		}

		/* 设置项标签样式（固定宽度，避免挤压输入框） */
		.setting-item-label {
			width: 120px; /* 固定标签宽度，适配中文标签 */
			font-size: 14px;
			color: #333;
			font-weight: 500;
			flex-shrink: 0; /* 防止标签被压缩 */
		}

		/* 设置项内容容器（占满剩余宽度） */
		.setting-item-content {
			flex: 1; /* 占满父容器剩余宽度 */
			padding-left: 10px;
		}

		/* 核心：URL输入框尺寸+样式优化 */
		.setting-input#setting-character-bg-url {
			/* 尺寸优化 */
			width: 100%; /* 占满内容容器宽度 */
			height: 44px; /* 舒适的高度，比默认输入框高一点，提升点击体验 */
			padding: 0 15px; /* 左右内边距，输入文字不贴边 */
			/* 样式优化（美观且符合通用UI规范） */
			border: 1px solid #e5e5e5;
			border-radius: 8px; /* 圆角更柔和 */
			font-size: 14px;
			color: #333;
			outline: none;
			box-sizing: border-box; /* 保证padding不超出宽度 */
			transition: border-color 0.2s;
		}

		/* 输入框聚焦样式（提升交互反馈） */
		.setting-input#setting-character-bg-url:focus {
			border-color: #409eff; /* 常用的蓝色聚焦态，符合用户认知 */
			box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1); /* 轻微外发光，突出聚焦 */
		}

		/* 占位符文字样式优化 */
		.setting-input#setting-character-bg-url::placeholder {
			color: #999; /* 浅灰色，不刺眼 */
			font-size: 13px; /* 比输入文字稍小一点 */
		}
		/* 5. 聊天详情页应用背景时的样式类 */
		/* 当 JS 给 #chat-detail-page 设置 style="background-image:..." 时生效 */
		#chat-detail-page {
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			background-attachment: fixed; /* 背景固定，产生视差效果 */
			transition: background-image 0.3s ease;
		}

		/* 6. 优化：当有背景图时，气泡颜色稍微调整以保证可读性 (可选) */
		/* 你可以根据需要决定是否要给消息容器加一个半透明遮罩 */
		
		/* ============================================================ */
		/* 【新增】聊天信息页面 (微信 Chat Info) 完美复刻样式 */
		/* ============================================================ */
		.chat-info-page {
			background-color: #ededed !important;
			min-height: 100%;
			padding-bottom: 40px;
		}
		.chat-info-group {
			background-color: #fff;
			margin-bottom: 8px;
		}
		.chat-info-group:first-child {
			margin-top: 0;
		}
		.chat-info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16px 20px;
			background-color: #fff;
			font-size: 17px;
			color: #1a1a1a;
			position: relative;
			cursor: pointer;
		}
		.chat-info-item:active {
			background-color: #f0f0f0;
		}
		.chat-info-item:not(:last-child)::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 20px;
			right: 0;
			height: 1px;
			background-color: #e5e5e5;
			transform: scaleY(0.5);
		}
		.chat-info-item .item-text {
			flex: 1;
		}
		.chat-info-item .item-arrow {
			color: #b2b2b2;
			font-size: 14px;
		}
		.chat-info-avatar-grid {
			padding: 16px 20px;
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 15px 15px;
		}
		.chat-info-avatar-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8px;
			cursor: pointer;
		}
		.chat-info-avatar-box {
			width: 60px;
			height: 60px;
			border-radius: 8px;
			background-color: #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
		}
		.chat-info-avatar-box img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.chat-info-avatar-box.add-btn {
			border: 1px dashed #d9d9d9;
			background-color: transparent;
			box-sizing: border-box;
		}
		.chat-info-avatar-name {
			font-size: 12px;
			color: #888;
			width: 100%;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		/* ============================================================ */
		/* 【25. 背景图遮挡修复补丁】 */
		/* ============================================================ */

		/* 1. 强制聊天详情页自身透明，防止遮挡父容器背景 */
		body.chat-bg-active #chat-detail-page {
			background-color: transparent !important;
			background-image: none !important; /* 我们改用 JS 控制父容器背景，所以这里取消自身的背景 */
			min-height: 100% !important; /* 确保高度撑开 */
			height: auto !important;     /* 允许随内容长高 */
		}

		/* 2. 强制内容区域透明 */
		body.chat-bg-active #chat-detail-page .page-content {
			background-color: transparent !important;
		}

		body.chat-bg-active #chat-message-container {
			background-color: transparent !important;
		}

		body.chat-bg-active #main-content-area {
			background-color: transparent !important;
			padding-bottom: 0 !important;
		}

		body.chat-bg-active #chat-message-container {
			padding-bottom: calc(var(--chat-bar-height) + 18px) !important;
		}

		body.chat-detail-active #main-content-area {
			padding-bottom: 0 !important;
			background: #ededed;
		}

		body.chat-detail-active #chat-message-container {
			padding-bottom: calc(var(--chat-bar-height) + env(safe-area-inset-bottom) + 18px) !important;
			background: #ededed;
		}

		/* 3. 确保主容器可以显示背景图，并设置样式 */
		#main-content-area {
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			/* 建议使用 scroll 或去掉此属性。fixed 在部分手机上会导致背景消失 */
			background-attachment: scroll; 
			transition: background-image 0.3s ease;
		}

		/* ============================================================ */
		/* 【26. 语音条气泡样式 (固定高度居中版)】 */
		/* ============================================================ */

		/* 1. 语音气泡基础容器 */
		.msg-bubble.is-voice {
			display: flex;
			align-items: center; /* Flex 垂直居中 */
			justify-content: space-between;
			
			/* 【核心】固定高度 */
			height: 40px !important;
			min-height: 40px !important;
			max-height: 40px !important;
			
			/* 【调整】减小内边距，让图标离边缘更近 */
			padding: 0 10px !important;
			
			cursor: pointer;
			position: relative;
			user-select: none;
			box-sizing: border-box;
			overflow: hidden; /* 防止溢出 */
		}

		/* 2. 声波图标通用样式 */
		.voice-icon {
			font-size: 19px; 
			/* 设定固定尺寸容器，防止旋转后位置跑偏 */
			width: 24px; 
			height: 15px;
			
			display: flex;
			align-items: center;
			justify-content: center;
			
			/* 禁止压缩 */
			flex-shrink: 0;
			
			/* 消除所有 margin，由父容器 gap 控制 */
			margin: 0;
		}

		/* 3. 时长文字 */
		.voice-duration {
			font-size: 15px;
			font-weight: 500;
			/* 让文字高度撑满，确保文字垂直重心稳定 */
			line-height: 40px; 
		}

		/* --- 左侧 (AI) 语音样式 --- */
		.chat-msg-row.left .msg-bubble.is-voice {
			flex-direction: row; 
			justify-content: flex-start;
			color: #333;
		}
		.chat-msg-row.left .msg-bubble.is-voice .voice-icon {
			/* 图标和文字的间距 */
			margin-right: 4px; 
			
			/* 
			   旋转45度
			   不用 translate 微调了，依靠 flex 居中
			*/
			transform: rotate(45deg); 
			color: #333; 
		}

		/* --- 右侧 (用户) 语音样式 --- */
		.chat-msg-row.right .msg-bubble.is-voice {
			flex-direction: row-reverse; /* 反转：文字在左，图标在右 */
			justify-content: flex-start;
			color: #333;
		}
		.chat-msg-row.right .msg-bubble.is-voice .voice-icon {
			/* 图标和文字的间距 */
			margin-left: 4px;
			
			/* 旋转-135度 */
			transform: rotate(-135deg); 
		}

		/* 4. 语音转文字小卡片 (保持不变) */
		.voice-transcription {
			background-color: #fff;
			border-radius: 8px;
			border: 1px solid #e0e0e0;
			box-shadow: 0 2px 6px rgba(0,0,0,0.05);
			font-size: 13px;
			color: #333;
			line-height: 1.5;
			margin-top: 6px;
			padding: 8px 10px;
			display: none; 
			max-height: 120px; 
			overflow-y: auto;  
			word-wrap: break-word;
			min-width: 150px;
			max-width: 260px; 
		}

		.chat-msg-row.right .voice-transcription {
			background-color:  #fff; 
			align-self: flex-end; 
		}

		.voice-transcription.show {
			display: block;
			animation: fadeIn 0.3s ease;
		}
		/* ============================================================ */
		/* 【新增】人生档案页面样式 */
		/* ============================================================ */

		/* 1. “添加”按钮样式 */
		.add-event-btn {
			width: 100%;
			height: 44px;
			border-radius: 8px;
			border: 1px solid #07c160;
			background-color: #fff;
			color: #07c160;
			font-size: 16px;
			font-weight: 500;
			cursor: pointer;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
		}
		.add-event-btn:active {
			background-color: #f0f0f0;
		}

		/* 2. 事件列表容器 */
		#life-events-list {
			display: flex;
			flex-direction: column;
			gap: 12px;
		}

		/* 3. 单个事件条目 */
		.life-event-item {
			display: flex;
			align-items: flex-start;
			gap: 10px;
			background-color: #fff;
			padding: 12px;
			border-radius: 6px;
			border: 1px solid #eee;
		}

		.life-event-item .date {
			font-family: monospace; /* 等宽字体，让日期对齐更好看 */
			font-size: 13px;
			color: #888;
			background-color: #f5f5f5;
			padding: 4px 6px;
			border-radius: 4px;
			white-space: nowrap;
		}

		.life-event-item textarea {
			flex-grow: 1;
			border: none;
			background: transparent;
			padding: 2px;
			font-size: 14px;
			line-height: 1.5;
			resize: none;
			min-height: 40px; /* 最小高度，防止内容太少时塌陷 */
			outline: none;
		}
		.life-event-item textarea:focus {
			background-color: #f9f9f9; /* 聚焦时给个背景提示 */
		}

		.life-event-delete-btn {
			width: 32px;
			height: 32px;
			border: none;
			background: transparent;
			color: #ccc;
			font-size: 16px;
			cursor: pointer;
			flex-shrink: 0;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.life-event-delete-btn:hover {
			background-color: #f5f5f5;
			color: #ff3b30;
		}
		
		/* ============================================================ */
		/* 【适配优化】人生档案弹窗在小屏上的显示 */
		/* ============================================================ */

		/* 确保日期选择器不会超出容器 */
		#add-life-event-date-input {
			width: 100% !important; /* 强制宽度 100% */
			max-width: 100% !important;
			box-sizing: border-box !important; /* 核心：让 padding 不会增加额外宽度 */
			padding: 10px;
			font-size: 14px; /* 稍微缩小字号以适应屏幕 */
			-webkit-appearance: none; /* 清除 iOS 默认外观 */
			appearance: none;
			border: 1px solid #ddd;
			border-radius: 4px;
			background-color: #fff;
			height: 40px; /* 固定高度，防止错位 */
		}

		/* 优化弹窗本身在窄屏上的外边距 */
		.center-modal-content {
			width: 85% !important; /* 给左右留出足够的空隙 */
			max-width: 320px;
			padding: 20px 15px !important; /* 减少水平内边距 */
			box-sizing: border-box;
		}

		/* 确保 textarea 在小屏下也不会出问题 */
		#add-life-event-input {
			width: 100%;
			box-sizing: border-box;
			font-size: 14px;
			resize: none;
		}
		
		/* ============================================================ */
		/* 【新增】图片气泡样式 */
		/* ============================================================ */


		/* 1. 真实图片气泡 (去除背景色和边框) */
		.msg-bubble.is-image {
			background: transparent !important;
			border: none !important;
			padding: 0 !important;
			box-shadow: none !important;
		}
		.msg-image-content {
			max-width: 160px;
			max-height: 200px;
			border-radius: 8px;
			display: block;
			cursor: pointer;
		}

		/* ============================================================ */
		/* 【重写】虚拟图片气泡样式 (固定尺寸版) */
		/* ============================================================ */

		/* 1. 基础状态 (显示图标) */
		.msg-bubble.is-virtual {
			background-color: #ffffff !important;
			border: 1px solid #e0e0e0 !important;
			border-radius: 6px !important;
			padding: 0 !important;
			
			/* 【核心】设定固定尺寸 */
			width: 140px;       
			height: 140px;      
			
			/* 布局与交互 */
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			overflow: hidden; /* 必须隐藏，否则圆角会被内部滚动条破坏 */
			box-shadow: 0 1px 2px rgba(0,0,0,0.05);
			transition: background-color 0.2s ease; /* 只做背景色过渡，不做大小过渡 */
			position: relative;
			box-sizing: border-box; /* 确保 padding 不会撑大盒子 */
		}

		/* 2. 激活状态 (显示文字) */
		.msg-bubble.is-virtual.show-text {
			/* 【核心】强制保持尺寸不变！覆盖掉之前的 auto 设置 */
			width: 140px !important;
			height: 140px !important;
			min-width: unset !important;
			min-height: unset !important;
			max-width: unset !important;
			max-height: unset !important;

			/* 样式微调 */
			background-color: #fff !important; 
			padding: 10px !important; /* 给文字留出边距 */
			
			/* 布局调整：文字从左上角开始排 */
			align-items: flex-start !important;
			justify-content: flex-start !important;
		}

		/* --- 内部元素显示逻辑 --- */

		/* A. 占位符容器 (图标部分) */
		.virtual-placeholder {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			pointer-events: none;
		}

		/* 灰色大图标 */
		.virtual-icon {
			font-size: 32px;
			color: #d0d0d0;
			margin-bottom: 8px;
		}

		/* 灰色小字 */
		.virtual-text {
			font-size: 12px;
			color: #b0b0b0;
		}

		/* B. 描述文字容器 */
		.virtual-desc-content {
			display: none; /* 默认隐藏 */
			width: 100%;
			height: 100%; /* 占满剩余空间 */
			
			font-size: 13px;
			color: #333;
			line-height: 1.5;
			text-align: left;
			white-space: pre-wrap; /* 保留换行 */
			word-wrap: break-word; /* 防止长单词溢出 */
			
			/* 【关键】开启内部滚动 */
			overflow-y: auto; 
			
			/* 隐藏滚动条但保留功能 (Webkit浏览器) */
			scrollbar-width: thin; 
		}

		/* --- 状态切换 --- */

		/* 当父级有 show-text 时，隐藏图标 */
		.msg-bubble.is-virtual.show-text .virtual-placeholder {
			display: none !important;
		}

		/* 当父级有 show-text 时，显示文字 */
		.msg-bubble.is-virtual.show-text .virtual-desc-content {
			display: block !important;
			animation: fadeIn 0.2s ease;
		}

		/* 简单的淡入动画 */
		@keyframes fadeIn {
			from { opacity: 0; }
			to { opacity: 1; }
		}
		
		/* ============================================================ */
		/* 【独立】功能面板样式 (附件菜单) */
		/* ============================================================ */
		
		.function-panel-content{
			background-color: #f8f8f8; /* 必须有颜色，不然是透明的 */
			width: 100%;
			height: auto;
			
			/* 顶部圆角和阴影 */
			border-radius: 16px 16px 0 0;
			box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
			
			display: flex;
			flex-direction: column;
		}


		/* 1. 外层容器：全屏占位，透明，位于输入框之下 */
		#function-panel-modal {
			position: fixed;
			top: 0; 
			left: 0; 
			right: 0; 
			bottom: 0;
			
			/* 必须比输入框(.chat-input-bar z-index:1001)低 */
			z-index: 990;
			
			/* 【强制透明】绝对不要黑色遮罩 */
			background-color: transparent !important;
			background: none !important;
			
			/* 让鼠标穿透透明区域，点到后面的聊天记录 */
			pointer-events: none;
			
			/* 底部对齐布局 */
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			
			/* 【核心位移】底部垫高 = 输入框高度 (JS计算) */
			padding-bottom: 50px;
			
			/* 默认隐藏 */
			visibility: hidden;
			transition: visibility 0s 0.25s;
		}

		/* 显示状态 */
		#function-panel-modal.show {
			visibility: visible;
			transition-delay: 0s;
			/* 显示时恢复对自身的点击检测（用于点击空白关闭） */
			pointer-events: auto;
		}

		/* 2. 内容区域：灰色背景，从底部划出 */
		.function-panel-content {
			/* 必须恢复点击，否则点不了按钮 */
			pointer-events: auto;
			
			width: 100%;
			/* 功能面板背景色 */
			background-color: #f7f7f7; 
			border-top: 1px solid #dcdcdc;
			padding: 20px 20px 30px 20px;
			

			/* 确保盒子模型正确 */
			box-sizing: border-box; 
		}

		/* 内容滑出 */
		#function-panel-modal.show .function-panel-content {
			transform: translateY(0);
		}

		/* 3. 宫格布局 (强制4列) */
		.function-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			row-gap: 20px;
			column-gap: 15px;
		}

		/* 单个功能项样式 (保持你原来的) */
		.func-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			cursor: pointer;
		}
		.func-icon {
			width: 60px;
			height: 60px;
			background-color: #fff;
			border-radius: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 8px;
			border: 1px solid #e5e5e5;
		}
		.func-text {
			font-size: 12px;
			color: #666;
			text-align: center;
		}
		
		/* ---- 【新增】用于修复模型拉取按钮太小的问题 ---- */

		/* 1. 这是包裹下拉框和按钮的容器 */
		.model-select-wrapper {
			display: flex;          /* 使用 Flex 布局，让内部元素水平排列 */
			align-items: center;    /* 垂直居中对齐 */
			width: 100%;
		}

		/* 2. 让下拉框自动伸展，占据所有剩余空间 */
		.model-select-wrapper select {
			flex-grow: 1;
			min-width: 0; 
			
			/* 新增：单行省略号处理 */
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		/* 3. 这是“拉取模型”按钮的样式 */
		.model-select-wrapper .fetch-btn {
			flex-shrink: 0;         /* 禁止按钮被压缩变形 */
			margin-left: 8px;       /* 与左侧的下拉框拉开 8px 的距离 */
			padding: 0 12px;        /* 增加左右内边距，让按钮变得更宽、更协调 */
			height: 38px;           /* 确保和输入框/下拉框高度一致 */
			line-height: 38px;      /* 确保文字垂直居中 */
			white-space: nowrap;    /* 防止按钮上的文字换行 */
			font-size: 14px;        /* 调整字体大小，使其更清晰 */
		}
		
		/* ============================================================ */
		/* 【新增】朋友圈页面专属样式 */
		/* ============================================================ */

		/* 1. 透明顶部栏 */
		#moments-top {
			background-color: transparent;
			border-bottom: none;
			box-shadow: none;
		}
		#moments-top .top-bar-back,
		#moments-top .top-bar-right-btn {
			color: #ffffff !important; /* 白色图标 */
			text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* 加一点阴影防止背景过亮看不清 */
			background: rgba(0, 0, 0, 0.18);
			border-radius: 12px;
			backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
			padding: 0 10px;
		}

		/* 2. 朋友圈头部 (封面) */
		.moments-header {
			position: relative;
			width: 100%;
			height: 320px; /* 封面高度 */
			margin-bottom: 30px; /* 为突出的头像留出空间 */
		}
		#moments-cover-img {
			width: 100%;
			height: 100%;
			background-color: #ccc; /* 默认灰色背景 */
			background-size: cover;
			background-position: center;
		}

		/* 3. 封面上的用户信息 */
		.moments-user-info {
			position: absolute;
			bottom: -25px; /* 关键: 负值让它向下溢出，覆盖在列表上 */
			right: 15px;
			display: flex;
			align-items: center;
		}
		.moments-user-name {
			color: #ffffff;
			font-weight: bold;
			font-size: 16px;
			margin-right: 15px;
			text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
		}
		.moments-user-avatar {
			width: 70px;
			height: 70px;
			border-radius: 8px;
			border: 2px solid #fff;
			background-color: #eee;
			overflow: hidden;
		}
		.moments-user-avatar img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		/* 4. 动态列表容器 */
		.moments-feed {
			padding: 0;
			background: #ffffff;
		}

		/* 5. 单条动态的样式 */
		.moment-post {
			display: flex;
			gap: 12px;
			padding: 15px;
			border-bottom: 1px solid #f0f0f0;
		}
		.post-left .post-avatar {
			width: 42px;
			height: 42px;
			border-radius: 6px;
			overflow: hidden;
		}
		.post-left .post-avatar img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.post-main {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 8px;
		}
		.post-author {
			font-size: 16px;
			font-weight: 500;
			color: #586b95; /* 微信蓝 */
		}
		.post-content {
			font-size: 15px;
			line-height: 1.5;
			word-wrap: break-word;
		}

		/* 6. 动态中的图片网格 */
		.post-images {
			display: grid;
			gap: 6px;
		}
		.post-images.image-count-1 .post-image-item {
			max-width: 200px;
		}
		.post-images.image-count-2, .post-images.image-count-4 {
			grid-template-columns: repeat(2, 1fr);
			max-width: 220px;
		}
		.post-images:not(.image-count-1):not(.image-count-2):not(.image-count-4) {
			grid-template-columns: repeat(3, 1fr);
			max-width: 280px;
		}
		.post-image-item {
			width: 100%;
			aspect-ratio: 1 / 1;
			background-color: #f0f0f0;
			overflow: hidden;
		}
		.post-image-item img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		/* 7. 动态的元数据 (时间、操作按钮) */
		.post-meta {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 5px;
		}
		.post-timestamp {
			font-size: 13px;
			color: #aaa;
		}
		.post-action-btn {
			width: 30px;
			height: 20px;
			background-color: #f7f7f7;
			border-radius: 4px;
			border: 1px solid #eee;
			color: #586b95;
			font-size: 14px;
			letter-spacing: 2px;
			text-align: center;
			line-height: 18px;
			font-weight: bold;
			cursor: pointer;
		}
		
		/* ============================================================ */
		/* 【新增】发布朋友圈页面样式 */
		/* ============================================================ */

		/* 身份预览卡片 */
		.persona-preview-card {
			display: flex;
			align-items: center;
			background-color: #f9f9f9;
			padding: 10px;
			border-radius: 8px;
			margin-top: 10px;
			border: 1px solid #eee;
		}

		.pp-avatar {
			width: 40px;
			height: 40px;
			border-radius: 4px;
			background-color: #ddd;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			margin-right: 12px;
			flex-shrink: 0;
		}
		.pp-avatar img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.pp-avatar i {
			color: #fff;
			font-size: 20px;
		}

		.pp-info {
			flex: 1;
			overflow: hidden;
		}

		.pp-name {
			font-size: 15px;
			font-weight: 500;
			color: #333;
			margin-bottom: 2px;
		}

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

		/* 图片输入框组 */
		.img-input-group {
			margin-bottom: 10px;
			animation: fadeIn 0.3s ease;
		}
		.img-input-group label {
			font-size: 12px;
			color: #888;
			margin-bottom: 4px;
			display: block;
		}
		
		/* ============================================================ */
		/* 【新增】朋友圈虚拟图片样式 */
		/* ============================================================ */

		.moment-virtual-card {
			width: 100%;
			height: 100%;
			background-color: #f2f2f2;
			border: 1px solid #e0e0e0;
			border-radius: 4px; /* 朋友圈通常圆角较小 */
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			overflow: hidden;
			position: relative;
			box-sizing: border-box;
		}

		/* 默认状态：图标 + 提示文字 */
		.mv-placeholder {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			pointer-events: none; /* 让点击穿透到父容器 */
		}

		.mv-icon {
			font-size: 24px;
			color: #ccc;
			margin-bottom: 5px;
		}

		.mv-hint {
			font-size: 12px;
			color: #999;
		}

		/* 内容状态：文字描述 */
		.mv-content {
			display: none; /* 默认隐藏 */
			width: 100%;
			height: 100%;
			padding: 8px;
			font-size: 13px;
			color: #333;
			line-height: 1.4;
			text-align: left; /* 朋友圈文字通常左对齐 */
			white-space: pre-wrap;
			word-wrap: break-word;
			overflow-y: auto; /* 内容多时允许滚动 */
			background-color: #fff;
		}

		/* --- 状态切换 --- */
		/* 当添加了 show-text 类名时 */
		.moment-virtual-card.show-text {
			background-color: #fff;
			border-color: #ccc;
		}

		.moment-virtual-card.show-text .mv-placeholder {
			display: none;
		}

		.moment-virtual-card.show-text .mv-content {
			display: block;
			animation: fadeIn 0.2s ease;
		}
		
		/* ============================================================ */
		/* 【新增】朋友圈交互样式 (点赞/评论/删除) */
		/* ============================================================ */

		/* 1. 操作栏容器 (定位基准) */
		.post-meta {
			position: relative; /* 关键：让弹窗相对于这个容器定位 */
		}

		/* 2. 黑色弹窗菜单 (默认隐藏) */
		.moment-action-menu {
			position: absolute;
			right: 40px; /* 在按钮左侧 */
			top: -8px;   /* 垂直居中微调 */
			background-color: #4c4c4c;
			border-radius: 4px;
			height: 36px;
			display: flex;
			align-items: center;
			padding: 0;
			
			/* 动画效果：从右向左展开 */
			width: 0;
			opacity: 0;
			overflow: hidden;
			transition: width 0.2s ease, opacity 0.2s ease;
		}

		.moment-action-menu.show {
			width: 190px; /* 展开后的宽度，根据按钮数量调整 */
			opacity: 1;
		}

		/* 菜单项按钮 */
		.moment-menu-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 14px;
			cursor: pointer;
			white-space: nowrap;
			height: 100%;
		}
		.moment-menu-item:active {
			background-color: #3b3b3b;
		}
		.moment-menu-item i {
			margin-right: 5px;
		}
		/* 分割线 */
		.moment-menu-line {
			width: 1px;
			height: 20px;
			background-color: #3b3b3b;
		}

		/* 3. 点赞评论展示区域 */
		.moment-interactions {
			background-color: #f7f7f7;
			margin-top: 10px;
			border-radius: 4px;
			font-size: 14px;
			position: relative;
		}

		/* 上方小三角 */
		.moment-interactions::before {
			content: '';
			position: absolute;
			top: -6px;
			left: 15px;
			width: 0;
			height: 0;
			border-left: 6px solid transparent;
			border-right: 6px solid transparent;
			border-bottom: 6px solid #f7f7f7;
		}

		/* 点赞列表 */
		.moment-likes {
			padding: 5px 10px;
			color: #586b95; /* 微信蓝 */
			line-height: 1.5;
			border-bottom: 1px solid #eee;
		}
		.moment-likes
		
		/* ============================================================ */
		/* 【新增】朋友圈高级样式 (V2.0) */
		/* ============================================================ */

		/* 1. 蓝色昵称 (微信蓝) */
		.moment-user-blue {
			color: #576b95;
			font-weight: 500;
			cursor: pointer;
			text-decoration: none;
		}
		.moment-user-blue:active {
			color: #3d4c6e; /* 点击变深色 */
			background-color: #ccc; /* 点击背景变色 */
		}

		/* 2. 爱心样式 */
		/* 实心红心 */
		.fa-heart.liked {
			color: #ff4d4f !important; /* 强制红色 */
			font-weight: 900 !important; /* 实心 */
		}
		/* 空心灰心 (默认) */
		.fa-heart.unliked {
			color: #fff; /* 在黑色菜单里是白色 */
			font-weight: 400; /* 空心 */
		}
		/* 列表前面的心 */
		.moment-likes i {
			color: #576b95; /* 默认蓝色 */
			margin-right: 5px;
		}
		/* 如果当前用户点赞了，列表前面的心也变红 */
		.moment-likes i.liked-icon {
			color: #ff4d4f;
		}

		/* 3. 评论条目交互 */
		.moment-comment-item {
			cursor: pointer; /* 提示可点击回复 */
		}
		.moment-comment-item:active {
			background-color: #e5e5e5; /* 点击反馈 */
		}
		
		/* 刷新提示条样式优化 */
		#moments-refresh-loader {
			height: 0;
			overflow: hidden;
			background: #f1f1f1;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			color: #666;
			transition: height 0.3s ease;
			width: 100%; /* 确保宽度 */
		}
		
		/* ============================================================ */
		/* 【新增】自定义美化页面专属样式 */
		/* ============================================================ */

		/* 代码输入框样式：等宽字体，深色背景可选（这里保持浅色但用等宽） */
		.code-input {
			font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace;
			font-size: 13px;
			line-height: 1.5;
			white-space: pre;
			background-color: var(--sea-bg-secondary, #fcfcfc);
			color: var(--sea-ink, #333);
			border: 1px solid var(--sea-border, #ddd);
		}

		.code-input:focus {
			background-color: var(--sea-surface-strong, #fff);
			border-color: var(--sea-accent);
			box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
		}

		/* 预览图容器微调 */
		#global-bg-uploader {
			position: relative;
			border: 2px dashed #ddd;
			background-color: #fafafa;
			transition: all 0.2s;
		}

		#global-bg-uploader:active {
			background-color: #f0f0f0;
			border-color: #ccc;
		}
		
		/* 自定义样式注入的样式标签优先级 */
		#custom-user-style {
			display: none; /* 这是一个 style 标签，不需要显示 */
		}

		/* 确保上传组件的图片预览正确显示 */
		#global-bg-uploader {
			position: relative;
			overflow: hidden;
			background-size: cover;
			background-position: center;
		}
		
		/* ============================================================ */
		/* 【27. 收藏页面样式 (新增)】 */
		/* ============================================================ */

		/* 收藏卡片容器 */
		.fav-card {
			background-color: #fff;
			padding: 15px;
			margin-bottom: 12px;
			border-radius: 8px;
			border: 1px solid #eee;
			display: flex;
			flex-direction: column;
			gap: 10px;
			position: relative;
			transition: background-color 0.2s;
		}

		/* 顶部信息栏：头像、名字、时间 */
		.fav-header {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.fav-avatar {
			width: 36px;
			height: 36px;
			border-radius: 4px;
			overflow: hidden;
			flex-shrink: 0;
			background-color: #eee;
		}
		.fav-avatar img { width: 100%; height: 100%; object-fit: cover; }
		.fav-avatar i { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #aaa; }

		.fav-info {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.fav-name {
			font-size: 14px;
			font-weight: 500;
			color: #333;
		}

		.fav-time {
			font-size: 12px;
			color: #999;
		}

		/* 内容区域 */
		.fav-content {
			font-size: 15px;
			color: #333;
			line-height: 1.5;
			background-color: #f9f9f9;
			padding: 10px;
			border-radius: 6px;
			word-wrap: break-word;
		}

		/* 语音消息特殊样式 */
		.fav-content.is-voice {
			display: flex;
			align-items: center;
			gap: 8px;
			cursor: pointer;
			background-color: #f0fdf4; /* 淡淡的绿色背景 */
			border: 1px solid #dcfce7;
			color: #166534;
		}
		.fav-content.is-voice:active {
			background-color: #dcfce7;
		}

		/* 图片内容 */
		.fav-content img {
			max-width: 100%;
			border-radius: 4px;
			display: block;
		}

		/* 删除按钮 */
		.fav-delete-btn {
			position: absolute;
			top: 15px;
			right: 15px;
			background: transparent;
			border: none;
			color: #ccc;
			font-size: 14px;
			cursor: pointer;
			padding: 5px;
		}
		.fav-delete-btn:hover {
			color: #ff3b30;
		}

		/* 暗黑模式适配 (如果用了自定义美化) */
		body[style*="background-color: #111"] .fav-card {
			background-color: #191919;
			border-color: #333;
		}
		body[style*="background-color: #111"] .fav-name { color: #ddd; }
		body[style*="background-color: #111"] .fav-content { background-color: #222; color: #ccc; }
		
		/* ============================================================ */
		/* 【28. 视频通话专属样式】 */
		/* ============================================================ */

		/* 1. 视频通话主容器 */
		#video-call-page {
			position: fixed; top: 0; left: 0; width: 100%; height: 100%;
			overflow: hidden; display: none; z-index: 9999 !important; 
		}
		#video-call-page.active { display: block; }

		.call-overlay {
			width: 100%;
			height: 100vh; /* 强制占满视口高度 */
			display: flex;
			flex-direction: column;
			position: relative;
			background-color: #111;
			overflow: hidden; /* 【关键】禁止整个页面出现滚动条 */
		}

		/* 2. 顶部栏 */
		.call-top-bar {
			height: 60px; padding: 0 20px;
			display: flex; align-items: center; justify-content: space-between;
			position: absolute; top: 0; left: 0; right: 0;
			z-index: 10;
			background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
		}
		.call-minimize-btn {
			background: transparent; border: none; color: #fff; font-size: 20px; cursor: pointer;
		}
		.call-timer {
			color: #fff; font-size: 16px; font-weight: 500; letter-spacing: 1px;
		}

		/* 3. 中间内容区 */
		.call-content-area {
			flex: 1; position: relative; width: 100%;
			display: flex; flex-direction: column;
			min-height: 0; overflow: hidden;
		}

		/* 视频背景占位 */
		.video-bg-placeholder {
			position: absolute; top: 0; left: 0; width: 100%; height: 100%;
			background-size: cover; background-position: center;
			opacity: 0.4; /* 调暗背景，让文字更清晰 */
			display: flex; flex-direction: column; align-items: center; justify-content: center;
			color: rgba(255,255,255,0.3); z-index: 0;
		}
		.video-bg-placeholder i { font-size: 40px; margin-bottom: 10px; }

		/* 文本流 (字幕/对话) */
		.call-text-stream {
			position: relative;
			z-index: 1;
			flex: 1; /* 占据剩余空间 */
			
			/* 【核心修复】开启滚动，并限制最小高度为0防止撑开 */
			overflow-y: auto; 
			min-height: 0; 
			
			padding: 70px 20px 20px 20px;
			display: flex;
			flex-direction: column;
			gap: 15px;
			-webkit-overflow-scrolling: touch;
		}

		/* 通话气泡 (半透明字幕风格) */
		.call-bubble {
			padding: 10px 14px;
			border-radius: 12px;
			font-size: 15px;
			line-height: 1.6;
			max-width: 90%;
			word-wrap: break-word;
			color: #fff;
			text-shadow: 0 1px 2px rgba(0,0,0,0.5);		
			white-space: pre-wrap; 
		}
		.call-bubble.ai {
			background-color: rgba(255, 255, 255, 0.15);
			align-self: flex-start;
			border-bottom-left-radius: 2px;
			backdrop-filter: blur(5px);
		}
		.call-bubble.user {
			background-color: rgba(7, 193, 96, 0.6);
			align-self: flex-end;
			border-bottom-right-radius: 2px;
			backdrop-filter: blur(5px);
		}
		.call-sys-msg {
			align-self: center;
			font-size: 12px; color: rgba(255,255,255,0.7);
			background: rgba(0,0,0,0.4); padding: 4px 10px; border-radius: 12px;
		}

		/* 4. 底部操作区 */
		.call-bottom-area {
			padding: 15px;
			/* 背景加深一点，确保看不到底下滚动的文字 */
			background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.8), transparent); 
			display: flex;
			flex-direction: column;
			gap: 15px;
			z-index: 20; /* 保证层级最高 */
			
			/* 【核心修复】禁止被压缩，保证永远显示 */
			flex-shrink: 0; 
			
			/* 适配 iPhone 底部横条 */
			padding-bottom: calc(15px + env(safe-area-inset-bottom));
		}

		.call-input-wrapper {
			display: flex; gap: 10px; align-items: flex-end;
		}
		#call-input-text {
			flex: 1; background: rgba(255,255,255,0.15); border: none;
			border-radius: 8px; padding: 10px; color: #fff; font-size: 14px;
			resize: none; max-height: 100px; backdrop-filter: blur(5px);
		}
		#call-input-text:focus { outline: 1px solid rgba(255,255,255,0.3); }
		#call-input-text::placeholder { color: rgba(255,255,255,0.5); }

		#call-send-btn {
			width: 60px; height: 36px; border-radius: 6px;
			background-color: #07c160; color: #fff; border: none;
			font-size: 14px; margin-bottom: 2px; cursor: pointer;
		}

		.call-action-wrapper {
			display: flex; flex-direction: column; align-items: center; justify-content: center;
		}
		.call-hangup-btn {
			width: 60px; height: 60px; border-radius: 50%;
			background-color: #ff3b30; color: #fff; border: none;
			font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center;
			box-shadow: 0 4px 10px rgba(255, 59, 48, 0.4);
		}
		.call-hangup-btn:active { transform: scale(0.95); }

		/* 5. 悬浮小窗 */
		#mini-call-float {
			position: fixed; top: 100px; right: 0;
			background-color: #07c160; color: #fff;
			padding: 8px 12px 8px 15px;
			border-top-left-radius: 20px; border-bottom-left-radius: 20px;
			box-shadow: 0 2px 10px rgba(0,0,0,0.2);
			display: none; align-items: center; gap: 8px;
			z-index: 3000; cursor: pointer;
			font-size: 14px;
			transition: transform 0.2s;
		}
		#mini-call-float:active { transform: scale(0.95); }

		/* 6. 来电界面 */
		.incoming-call-content {
			display: flex; flex-direction: column; align-items: center;
			color: #fff; width: 100%;
		}
		.incoming-avatar {
			width: 100px; height: 100px; border-radius: 50%;
			background-color: #333; margin-bottom: 20px;
			overflow: hidden; border: 2px solid rgba(255,255,255,0.2);
		}
		.incoming-avatar img { width: 100%; height: 100%; object-fit: cover; }
		.incoming-name { font-size: 24px; font-weight: bold; margin-bottom: 10px; }
		.incoming-type { font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 60px; }

		.incoming-actions {
			display: flex; gap: 60px; width: 100%; justify-content: center;
		}
		.action-btn-group {
			display: flex; flex-direction: column; align-items: center; gap: 10px;
		}
		.action-btn-group button {
			width: 64px; height: 64px; border-radius: 50%; border: none;
			font-size: 24px; color: #fff; cursor: pointer;
		}
		.hangup-btn { background-color: #ff3b30; }
		.answer-btn { background-color: #07c160; animation: pulse 1.5s infinite; }

		@keyframes pulse {
			0% { box-shadow: 0 0 0 0 rgba(7, 193, 96, 0.7); }
			70% { box-shadow: 0 0 0 15px rgba(7, 193, 96, 0); }
			100% { box-shadow: 0 0 0 0 rgba(7, 193, 96, 0); }
		}

		/* 7. 通话记录列表样式 */
		.call-log-bubble {
			margin-bottom: 10px; padding: 10px; border-radius: 6px;
			font-size: 13px; line-height: 1.5;
		}
		.call-log-bubble.user { background: #e9e9e9; color: #333; }
		.call-log-bubble.ai { background: #fff; border: 1px solid #ddd; color: #333; }
		.call-log-timestamp { font-size: 10px; color: #999; margin-bottom: 4px; display: block; }
		
		/* ============================================================ */
		/* 【修复补丁】视频通话顶部栏 & 悬浮窗增强 */
		/* ============================================================ */

		/* 1. 顶部栏 (容器) */
		.call-top-bar {
			position: absolute; 
			top: 0; 
			left: 0; 
			right: 0;
			height: 80px; /* 增加高度 */
			padding: 0 20px;
			/* 适配手机顶部刘海 */
			padding-top: env(safe-area-inset-top); 
			
			display: flex; 
			align-items: center; 
			justify-content: space-between; /* 两端对齐：左边缩小，中间时间 */
			
			z-index: 100; /* 保证在视频层之上 */
			
			/* 加深渐变背景，确保白字能看清 */
			background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
			pointer-events: none; /* 让点击穿透空白区域 */
		}

		/* 2. 缩小按钮 (左上角) */
		.call-minimize-btn {
			background: rgba(255, 255, 255, 0.2); /* 半透明背景按钮 */
			border: 1px solid rgba(255, 255, 255, 0.3);
			width: 40px;
			height: 40px;
			border-radius: 50%; /* 圆形 */
			color: #fff; 
			font-size: 18px; 
			cursor: pointer;
			pointer-events: auto; /* 恢复点击 */
			
			display: flex;
			align-items: center;
			justify-content: center;
			backdrop-filter: blur(4px);
			transition: background 0.2s;
		}
		.call-minimize-btn:active {
			background: rgba(255, 255, 255, 0.4);
		}

		/* 3. 通话时长 (顶部中间) */
		.call-timer {
			color: #fff; 
			font-size: 18px; 
			font-weight: 600; 
			font-family: monospace; /* 等宽字体，数字不跳动 */
			letter-spacing: 1px;
			text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* 文字阴影 */
			
			/* 绝对居中定位 */
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: calc(20px + env(safe-area-inset-top)); /* 稍微靠下一点 */
		}

		/* 4. 悬浮小窗 (修复层级问题) */
		#mini-call-float {
			position: fixed; 
			top: 120px; 
			right: 0;
			
			background-color: #2ba245; /* 微信绿 */
			color: #fff;
			padding: 10px 15px 10px 20px;
			border-top-left-radius: 25px; 
			border-bottom-left-radius: 25px;
			box-shadow: 0 4px 15px rgba(0,0,0,0.3);
			border: 1px solid rgba(255,255,255,0.2);
			border-right: none;
			
			display: none; /* JS控制显示 */
			align-items: center; 
			gap: 10px;
			
			z-index: 10002; /* 【关键】必须比所有页面和弹窗都高 */
			cursor: pointer;
			font-size: 14px;
			font-weight: 500;
			transition: transform 0.2s, opacity 0.2s;
		}

		#mini-call-float i {
			animation: blink 2s infinite; /* 图标闪烁表示通话中 */
		}

		@keyframes blink {
			0% { opacity: 1; }
			50% { opacity: 0.5; }
			100% { opacity: 1; }
		}
		
		/* --- 视频通话气泡菜单 (横向版) --- */
		.v-bubble-menu {
			position: absolute;
			/* 让菜单在气泡正下方居中 */
			top: 100%; 
			left: 50%;
			transform: translateX(-50%); 
			
			background: rgba(40, 40, 40, 0.95); /*以此加深背景*/
			border: 1px solid rgba(255, 255, 255, 0.2);
			border-radius: 50px; /* 改成圆角胶囊状 */
			padding: 0 5px;      /* 左右留点空隙 */
			display: none;       /* 默认隐藏 */
			flex-direction: row; /* 【关键】横向排列 */
			align-items: center; /* 垂直居中 */
			z-index: 100;
			min-width: auto;     /* 宽度自适应 */
			white-space: nowrap; /* 不换行 */
			backdrop-filter: blur(8px);
			box-shadow: 0 4px 15px rgba(0,0,0,0.6);
			margin-top: 8px; /* 稍微离气泡远一点 */
		}

		.v-bubble-menu.show {
			display: flex;
		}

		.v-menu-item {
			padding: 8px 16px; /* 增加点击区域 */
			color: #fff;
			font-size: 13px;
			font-weight: 500;
			cursor: pointer;
			text-align: center;
			border-right: 1px solid rgba(255, 255, 255, 0.15); /* 右侧分割线 */
		}

		/* 最后一个菜单项不要分割线 */
		.v-menu-item:last-child {
			border-right: none;
		}

		.v-menu-item:hover {
			background: rgba(255, 255, 255, 0.1);
		}

		.v-menu-item.delete {
			color: #ff4757; /* 删除按钮标红 */
		}
		/* 视频通话编辑弹窗样式 */
		#video-edit-modal {
			z-index: 10005 !important; /* 必须比视频页面(9999)和悬浮窗更高 */
			background: rgba(0, 0, 0, 0.7); /* 深色遮罩 */
		}

		/* 确保文本框获得焦点时边框变色 */
		#video-edit-input:focus {
			outline: none;
			border-color: #07c160 !important;
		}
		
		/* ============================================================ */
		/* 【修复】来电界面层级补丁 */
		/* ============================================================ */

		#incoming-call-modal {
			position: fixed !important;
			top: 0 !important;
			left: 0 !important;
			width: 100vw !important;
			height: 100vh !important;
			/* 必须高于输入栏(1001)和心声面板(10000) */
			z-index: 20000 !important; 
			background-color: #111 !important; /* 强制纯色背景，不透明 */
			display: none; /* 默认隐藏 */
			align-items: center;
			justify-content: center;
		}

		#incoming-call-modal.show {
			display: flex !important; /* 显示时使用 flex 居中内容 */
		}

		/* 确保内部容器不会被压扁 */
		.incoming-call-content {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-top: env(safe-area-inset-top);
			padding-bottom: env(safe-area-inset-bottom);
		}

		/* 调整头像大小，让它在全屏下更协调 */
		.incoming-avatar {
			width: 120px !important;
			height: 120px !important;
			margin-bottom: 30px !important;
			box-shadow: 0 0 20px rgba(255,255,255,0.1);
		}
		
		/* ============================================================ */
		/* 【新增】底部导航栏防遮挡占位符 */
		/* ============================================================ */
		.bottom-nav-spacer {
			width: 100%;
			/* 高度 = 导航栏高度 + 底部安全区 + 这里的 10px 缓冲 */
			height: 60px;
			flex-shrink: 0; /* 防止在 flex 布局中被压缩 */
			background: transparent; /* 透明 */
			pointer-events: none; /* 不阻挡点击 */
			display: block;
		}
		
		/* ============================================================ */
		/* 【29. 修复通话记录弹窗层级】 */
		/* ============================================================ */

		/* 修复：将通用弹窗层级从 1000 提升到 2000 */
		/* 原因：输入栏 z-index 是 1001，如果不提升，通话记录列表会被输入栏遮挡 */
		.modal-mask {
			z-index: 2000 !important;
		}
		#delete-confirm-modal { z-index: 10040 !important; }
		#app-alert-modal { z-index: 10041 !important; }
		#app-input-modal { z-index: 10042 !important; }
		#warehouse-progress-modal { z-index: 10043 !important; }
		#warehouse-overlay { z-index: 10030 !important; }

		/* 确保通话记录列表在小屏下也能完整显示，不被键盘顶飞 */
		#call-history-list {
			max-height: 60vh; /* 限制最大高度 */
			overflow-y: auto; /* 允许内部滚动 */
			-webkit-overflow-scrolling: touch;
		}
		
		/* ============================================================ */
		/* 【新增】模拟文件气泡样式 (类似虚拟图片，支持三段点击) */
		/* ============================================================ */
		.msg-bubble.is-file {
			background-color: #ffffff !important;
			border: 1px solid #e0e0e0 !important;
			border-radius: 6px !important;
			padding: 0 !important;
			
			width: 220px; 
			height: 80px; 
			
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			overflow: hidden;
			box-shadow: 0 1px 2px rgba(0,0,0,0.05);
			transition: background-color 0.2s ease;
			position: relative;
			box-sizing: border-box;
		}

		/* 激活状态 (显示描述文字) */
		.msg-bubble.is-file.show-text {
			width: 220px !important;
			height: 160px !important; 
			background-color: #fff !important; 
			padding: 10px !important; 
			align-items: flex-start !important;
			justify-content: flex-start !important;
		}

		.file-placeholder {
			display: flex;
			flex-direction: row; 
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100%;
			padding: 12px 15px;
			pointer-events: none;
			box-sizing: border-box;
		}

		.file-info-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			overflow: hidden;
			margin-right: 10px;
		}

		.file-name-text {
			font-size: 14px;
			color: #333;
			font-weight: 500;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-bottom: 4px;
		}

		.file-size-text {
			font-size: 11px;
			color: #999;
		}

		.file-icon-box {
			width: 44px;
			height: 44px;
			background-color: #f5f5f5;
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}

		.file-icon {
			font-size: 26px;
		}

		/* 状态切换复用逻辑 */
		.msg-bubble.is-file.show-text .file-placeholder {
			display: none !important;
		}

		.msg-bubble.is-file.show-text .virtual-desc-content {
			display: block !important;
			animation: fadeIn 0.2s ease;
		}

		/* 深色模式兼容补丁 (由于StyleManager可能使用了!important，这里直接加上深色兼容) */
		body[style*="background-color: #111"] .msg-bubble.is-file,
		body[style*="background-color: rgb(17, 17, 17)"] .msg-bubble.is-file {
			background-color: #2c2c2c !important;
			border-color: #444 !important;
		}
		body[style*="background-color: #111"] .file-name-text { color: #e0e0e0; }
		body[style*="background-color: #111"] .file-icon-box { background-color: #3a3a3a; }
		
		/* ============================================================ */
		/* 【钱包与支付系统样式】 */
		/* ============================================================ */
		
		/* 钱包头部区域：微信绿色沉浸式风格 */
		.wallet-header {
			position: relative;
			background: #07c160; /* 微信绿 */
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			/* 适配刘海屏，增加舒适的上下留白 */
			padding-top: calc(50px + env(safe-area-inset-top));
			padding-bottom: 50px;
			color: #fff;
		}

		/* 返回按钮 */
		.wallet-back-btn {
			position: absolute;
			top: max(15px, env(safe-area-inset-top));
			left: 15px;
			font-size: 20px;
			color: #fff;
			cursor: pointer;
			z-index: 10;
			padding: 5px;
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* 钱包大图标 */
		.wallet-icon {
			font-size: 45px;
			margin-bottom: 15px;
			color: #fff;
		}

		/* 余额标题文字 */
		.wallet-balance-title {
			font-size: 15px;
			opacity: 0.9;
			margin-bottom: 10px;
		}

		/* 余额数字大字号 */
		.wallet-balance-amount {
			font-size: 42px;
			font-weight: bold;
			color: #fff;
		}

		/* 交易明细区：圆角浮动在绿色背景上方 */
		.transaction-section {
			background-color: var(--sea-surface-strong, #fff);
			min-height: calc(100vh - 220px);
			border-top-left-radius: 16px;
			border-top-right-radius: 16px;
			margin-top: -20px; /* 向上浮动，盖住一点绿色背景 */
			position: relative;
			z-index: 2;
			padding-bottom: 20px;
		}

		/* 列表小标题 */
		.transaction-title {
			padding: 20px 20px 10px 20px;
			font-size: 15px;
			font-weight: bold;
			color: #333;
			border-bottom: 1px solid #f0f0f0;
		}

		/* 单条交易明细 */
		.transaction-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px 20px;
			border-bottom: 1px solid #f9f9f9;
		}

		.trans-left { display: flex; flex-direction: column; gap: 6px; }
		.trans-desc { font-size: 16px; color: #333; font-weight: 500; }
		.trans-time { font-size: 13px; color: #999; }
		.trans-right { font-size: 20px; font-weight: bold; }
		
		/* 进账橙色突出，支出黑色 */
		.trans-right.positive { color: #fa9d3b; }
		.trans-right.negative { color: #333; }

		/* 支付气泡 (转账/红包) - 保持不变 */
		.msg-bubble.is-payment {
			background-color: #fa9d3b !important; /* 橙色基调 */
			border: none !important;
			border-radius: 6px !important;
			padding: 0 !important;
			width: 220px;
			height: 95px !important;
			display: flex;
			flex-direction: column;
			cursor: pointer;
			overflow: hidden;
			box-shadow: 0 1px 3px rgba(0,0,0,0.1);
		}
		.msg-bubble.is-payment.redpacket {
			background-color: #f0614d !important; /* 红包颜色 */
		}
		.msg-bubble.is-payment.accepted, 
		.msg-bubble.is-payment.rejected {
			opacity: 0.6;
		}

		.payment-placeholder {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 100%;
			padding: 12px 15px;
			box-sizing: border-box;
		}
		.payment-icon-box {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			border: 1px solid rgba(255,255,255,0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			color: #fff;
			margin-right: 12px;
			flex-shrink: 0;
		}
		.payment-info-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			overflow: hidden;
			color: #fff;
		}
		.payment-amount-text {
			font-size: 15px;
			font-weight: 500;
			margin-bottom: 2px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.payment-desc-text {
			font-size: 12px;
			opacity: 0.8;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.payment-footer {
			height: 20px;
			background-color: rgba(255,255,255,0.9);
			font-size: 10px;
			color: #999;
			padding: 0 15px;
			line-height: 20px;
		}
		
		/* ============================================================ */
		/* 修复：红包和转账气泡高度不足导致裁切 */
		/* ============================================================ */
		.msg-bubble.is-payment {
			height: 95px !important; /* 原来是 80px，增加到 95px 确保文字显示完整 */
		}

		/* ============================================================ */
		/* 微信风格：红包弹窗 UI */
		/* ============================================================ */
		.rp-modal-content {
			width: 280px; 
			height: 400px; 
			background-color: #d13d2e; 
			border-radius: 12px;
			position: relative; 
			overflow: hidden; 
			display: flex; 
			flex-direction: column; 
			align-items: center; 
			color: #fce2b2;
			box-shadow: 0 10px 30px rgba(0,0,0,0.3);
		}
		.rp-close-btn { 
			position: absolute; top: 15px; left: 15px; color: #fce2b2; font-size: 20px; cursor: pointer; z-index: 10; opacity: 0.8; 
		}
		.rp-top-bg { 
			position: absolute; top: 0; left: -20%; width: 140%; height: 130px; background-color: #df4a3b; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; z-index: 1; 
		}
		.rp-avatar { 
			width: 54px; height: 54px; border-radius: 4px; border: 2px solid #fff; background: #eee; position: relative; z-index: 2; margin-top: 100px; overflow:hidden; color:#333; display:flex; align-items:center; justify-content:center; 
		}
		.rp-sender-name { position: relative; z-index: 2; font-size: 16px; margin-top: 10px; font-weight: 500; }
		.rp-desc { position: relative; z-index: 2; font-size: 20px; margin-top: 25px; width: 80%; text-align: center; }
		.rp-open-btn { 
			width: 90px; height: 90px; background-color: #ebd09b; border-radius: 50%; color: #333; font-size: 36px; font-weight: bold; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 40px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 2; 
		}
		.rp-open-btn:active { transform: scale(0.95); background-color: #dfc38f; }

		/* ============================================================ */
		/* 微信风格：转账弹窗 UI */
		/* ============================================================ */
		.tf-modal-content { 
			width: 280px; background-color: #fff; border-radius: 12px; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
		}
		.tf-icon { font-size: 56px; color: #07c160; margin-bottom: 15px; }
		.tf-title { font-size: 16px; color: #333; margin-bottom: 5px; }
		.tf-amount { font-size: 36px; font-weight: bold; color: #333; margin-bottom: 10px; }
		.tf-desc { font-size: 14px; color: #999; margin-bottom: 30px; text-align: center; }
		.tf-actions { display: flex; width: 100%; gap: 15px; }
		.tf-actions button { flex: 1; height: 44px; border-radius: 6px; font-size: 16px; border: none; cursor: pointer; font-weight:500; }
		.tf-btn-reject { background-color: #f5f5f5; color: #666; }
		.tf-btn-accept { background-color: #07c160; color: #fff; }
		
		/* ============================================================ */
		/* 【新增】红包拆开后的详情页 UI 和动画 */
		/* ============================================================ */

		/* 红包“開”字旋转动画 */
		@keyframes spinOpen {
			0% { transform: rotateY(0deg); }
			100% { transform: rotateY(360deg); }
		}
		.spin-anim {
			animation: spinOpen 0.6s linear infinite;
			pointer-events: none; /* 旋转时禁止再次点击 */
		}

		/* 拆开后的详情卡片 */
		.rp-opened-content {
			width: 280px; 
			height: 420px; 
			background-color: #fff; 
			border-radius: 12px;
			position: relative; 
			overflow: hidden; 
			display: flex; 
			flex-direction: column; 
			box-shadow: 0 10px 30px rgba(0,0,0,0.3);
		}
		.rp-opened-top {
			background-color: #df4a3b;
			height: 180px; 
			border-bottom-left-radius: 30px;
			border-bottom-right-radius: 30px;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #fce2b2;
			position: relative;
		}
		.rp-opened-close {
			position: absolute; top: 15px; left: 15px; font-size: 20px; color: #fce2b2; cursor: pointer; z-index: 10; padding: 5px;
		}
		.rp-opened-avatar {
			width: 54px; height: 54px; border-radius: 4px; background: #fff; border: 2px solid #fff;
			position: absolute; bottom: -27px; /* 压在线上 */
			display: flex; align-items: center; justify-content: center; overflow: hidden;
		}
		.rp-opened-avatar img { width: 100%; height: 100%; object-fit: cover; }
		.rp-opened-name { font-size: 16px; margin-top: 40px; font-weight: 500; }
		.rp-opened-desc { font-size: 14px; margin-top: 10px; opacity: 0.8; width: 80%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
		.rp-opened-amount-box { margin-top: 60px; text-align: center; color: #d13d2e; display: flex; align-items: baseline; justify-content: center;}
		.rp-opened-amount-box .num { font-size: 46px; font-weight: bold; line-height: 1;}
		.rp-opened-amount-box .yuan { font-size: 14px; margin-left: 4px; font-weight: 500;}
		.rp-opened-footer { text-align: center; font-size: 12px; color: #999; margin-top: auto; margin-bottom: 20px;}

		/* 修正红包文字显示超出问题 */
		.payment-amount-text {
			font-size: 15px;
			font-weight: 500;
			margin-bottom: 2px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		/* ============================================================ */
		/* 【群聊专属样式】 */
		/* ============================================================ */

		/* 群聊消息发送者名字 (显示在气泡上方) */
		.chat-msg-name {
			font-size: 11px;
			color: #999;
			margin-bottom: 2px;
			margin-left: 2px;
			display: none; /* 默认隐藏，私聊不显示 */
		}

		/* 群聊模式下显示名字 */
		.is-group-chat .chat-msg-name {
			display: block;
		}

		/* 调整头像和内容的对齐，防止名字把气泡顶歪 */
		.is-group-chat .msg-content-wrapper {
			margin-top: -5px; /* 微调对齐 */
		}

		/* NPC 标签样式 (在成员列表中) */
		.npc-tag {
			font-size: 10px;
			background-color: #eee;
			color: #666;
			padding: 1px 4px;
			border-radius: 3px;
			margin-left: 5px;
		}
		/* ============================================================ */
		/* 【新增】聊天记录搜索页面样式 */
		/* ============================================================ */

		/* 搜索框容器 */
		.search-bar-container {
			display: flex;
			align-items: center;
			background: #fff;
			padding: 10px 15px;
			border-radius: 6px;
			margin-bottom: 15px;
			border: 1px solid #ddd;
			box-shadow: 0 1px 3px rgba(0,0,0,0.02);
		}

		.search-bar-container input {
			flex: 1;
			border: none;
			outline: none;
			background: transparent;
			font-size: 15px;
			color: #333;
		}

		/* 搜索结果列表项 */
		.search-result-item {
			display: flex;
			padding: 15px 10px;
			background: #fff;
			border-bottom: 1px solid #f0f0f0;
			cursor: pointer;
			transition: background-color 0.2s;
		}

		.search-result-item:active {
			background-color: #f5f5f5;
		}

		.search-result-avatar {
			width: 40px;
			height: 40px;
			border-radius: 6px;
			overflow: hidden;
			margin-right: 12px;
			flex-shrink: 0;
			background: #eee;
		}

		.search-result-avatar img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.search-result-avatar i { 
			width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #aaa; 
		}

		.search-result-content {
			flex: 1;
			overflow: hidden;
		}

		.search-result-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 6px;
			align-items: center;
		}

		.search-result-name {
			font-size: 14px;
			font-weight: 500;
			color: #333;
		}

		.search-result-time {
			font-size: 12px;
			color: #999;
		}

		.search-result-text {
			font-size: 14px;
			color: #666;
			display: -webkit-box;
			-webkit-line-clamp: 2; /* 最多显示两行 */
			-webkit-box-orient: vertical;
			overflow: hidden;
			line-height: 1.4;
		}

		/* 匹配的关键字高亮 */
		.highlight-text {
			color: #07c160;
			font-weight: bold;
		}

		/* 跳转上下文后的气泡闪烁动画 */
		@keyframes msgHighlightAnim {
			0% { background-color: rgba(7, 193, 96, 0.4); transform: scale(1.02); }
			50% { background-color: rgba(7, 193, 96, 0.2); transform: scale(1); }
			100% { background-color: initial; }
		}

		.msg-highlight-anim .msg-bubble {
			animation: msgHighlightAnim 1.5s ease-out forwards;
		}

		/* 暗黑模式适配 */
		body[style*="background-color: #111"] .search-bar-container { background: #2c2c2c; border-color: #444; }
		body[style*="background-color: #111"] .search-bar-container input { color: #fff; }
		body[style*="background-color: #111"] .search-result-item { background: #111; border-color: #2a2a2a; }
		body[style*="background-color: #111"] .search-result-name { color: #e0e0e0; }
		body[style*="background-color: #111"] .search-result-text { color: #aaa; }
		/* ============================================================ */
		/* 【购物/外卖页面专属样式】 */
		/* ============================================================ */
		.shopping-tabs {
			display: flex;
			background: var(--sea-surface-strong, #fff);
			border-bottom: 1px solid var(--sea-border, #eee);
		}
		.shop-tab {
			flex: 1;
			text-align: center;
			padding: 12px 0;
			font-size: 15px;
			color: #666;
			cursor: pointer;
			position: relative;
		}
		.shop-tab.active {
			color: #07c160;
			font-weight: bold;
		}
		.shop-tab.active::after {
			content: '';
			position: absolute;
			bottom: 0; left: 50%;
			transform: translateX(-50%);
			width: 40px; height: 3px;
			background: #07c160;
			border-radius: 3px 3px 0 0;
		}

		.shopping-control-panel {
			background: var(--sea-surface-strong, #fff);
			padding: 15px;
			margin-bottom: 10px;
		}
		.shop-search-row input {
			width: 100%;
			height: 40px;
			background: #f5f5f5;
			border: none;
			border-radius: 20px;
			padding: 0 15px;
			font-size: 14px;
			outline: none;
			margin-bottom: 15px;
		}
		.shop-filter-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 10px;
		}
		.shop-price-inputs {
			display: flex;
			align-items: center;
			gap: 5px;
			flex: 1;
		}
		.shop-price-inputs input {
			width: 45%;
			height: 32px;
			border: 1px solid #ddd;
			border-radius: 4px;
			text-align: center;
			font-size: 13px;
			outline: none;
		}
		#shop-generate-btn {
			background: #fa9d3b;
			color: #fff;
			border: none;
			height: 32px;
			padding: 0 15px;
			border-radius: 16px;
			font-size: 13px;
			cursor: pointer;
			white-space: nowrap;
		}
		#shop-generate-btn:active { background: #e08c35; }
		#shop-generate-btn:disabled { background: #ccc; }

		.shopping-result-container {
			padding: 10px;
			display: flex;
			flex-direction: column;
			gap: 12px;
			padding-bottom: 80px; /* 防底部导航遮挡 */
		}

		.shop-empty-state {
			text-align: center;
			padding: 50px 0;
			color: #bbb;
		}
		.shop-empty-state i { font-size: 40px; margin-bottom: 10px; }

		.shop-card {
			background: #fff;
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 2px 8px rgba(0,0,0,0.04);
			display: flex;
			flex-direction: column;
		}
		.shop-card-img {
			width: 100%;
			height: 140px;
			background: #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999;
			font-size: 12px;
			padding: 10px;
			text-align: center;
		}
		.shop-card-body { padding: 12px; }
		.shop-card-title {
			font-size: 15px;
			font-weight: bold;
			color: #333;
			margin-bottom: 4px;
		}
		.shop-card-desc {
			font-size: 12px;
			color: #888;
			margin-bottom: 8px;
			line-height: 1.4;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}
		.shop-card-price {
			font-size: 18px;
			color: #ff4d4f;
			font-weight: bold;
			margin-bottom: 10px;
		}
		.shop-card-price::before { content: '¥'; font-size: 12px; margin-right: 2px; }

		.shop-card-comments {
			background: #f9f9f9;
			border-radius: 6px;
			padding: 8px;
			font-size: 12px;
		}
		.shop-comment-item {
			margin-bottom: 4px;
			line-height: 1.4;
		}
		.shop-comment-item:last-child { margin-bottom: 0; }
		.shop-comment-user { color: #576b95; font-weight: bold; margin-right: 4px; }
		/* ============================================================ */
		/* 【外卖卡片系统及礼物清单样式】 */
		/* ============================================================ */

		/* 1. 外卖卡片容器 */
		#delivery-cards-container {
			position: fixed;
			top: 60px; /* 位于聊天顶栏之下 */
			left: 0;
			width: 100%;
			z-index: 990; /* 层级低于弹窗，高于聊天记录 */
			display: flex;
			flex-direction: column;
			gap: 8px;
			padding: 10px 15px;
			pointer-events: none; /* 让点击穿透空白区域 */
		}

		/* 2. 单个外卖卡片 */
		.delivery-card {
			pointer-events: auto; /* 恢复卡片自身的点击 */
			background: rgba(255, 255, 255, 0.95);
			backdrop-filter: blur(10px);
			border: 1px solid #07c160;
			border-left: 4px solid #07c160;
			border-radius: 8px;
			padding: 10px 12px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0 4px 12px rgba(0,0,0,0.08);			
		}
		/* 超时状态 */
		.delivery-card.overdue {
			border-color: #fa9d3b;
			border-left-color: #fa9d3b;
		}
		/* 送达状态 */
		.delivery-card.arrived {
			border-color: #ccc;
			border-left-color: #999;
			background: rgba(245, 245, 245, 0.95);
		}

		.delivery-info {
			display: flex;
			flex-direction: column;
			gap: 4px;
		}
		.delivery-title {
			font-size: 14px;
			font-weight: bold;
			color: #333;
		}
		.delivery-status {
			font-size: 12px;
			color: #07c160;
			font-family: monospace; /* 倒计时等宽 */
		}
		.delivery-card.overdue .delivery-status { color: #fa9d3b; }
		.delivery-card.arrived .delivery-status { color: #999; }

		/* 关闭(签收)按钮 */
		.delivery-close-btn {
			background: transparent;
			border: none;
			color: #999;
			font-size: 20px;
			cursor: pointer;
			padding: 5px;
			display: none; /* 默认隐藏 */
		}
		/* 只有送达后才显示关闭按钮 */
		.delivery-card.arrived .delivery-close-btn {
			display: block;
		}
		.delivery-close-btn:active { color: #333; }

		@keyframes slideInDown {
			from { transform: translateY(-20px); opacity: 0; }
			to { transform: translateY(0); opacity: 1; }
		}

		/* 3. 礼物清单卡片样式 (复用一些现有样式) */
		.gift-list-item {
			background-color: #fff;
			border: 1px solid #eee;
			border-radius: 8px;
			padding: 15px;
			display: flex;
			flex-direction: column;
			position: relative;
		}
		.gift-list-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 8px;
			font-size: 12px;
			color: #999;
		}
		.gift-list-name {
			font-size: 16px;
			font-weight: bold;
			color: #333;
			margin-bottom: 6px;
		}
		.gift-list-desc {
			font-size: 13px;
			color: #666;
			line-height: 1.4;
		}
		.gift-delete-btn {
			position: absolute;
			top: 15px; right: 15px;
			color: #ff3b30;
			background: none; border: none;
			font-size: 16px; cursor: pointer;
		}

		/* 4. 购物卡片上的购买按钮 */
		.shop-buy-btn {
			margin-top: 10px;
			width: 100%;
			height: 32px;
			background-color: #fa9d3b;
			color: #fff;
			border: none;
			border-radius: 4px;
			font-size: 13px;
			cursor: pointer;
		}
		.shop-buy-btn:active { background-color: #e08c35; }
		.msg-bubble.is-order-card {
			background-color: transparent !important;
			border: 1px solid #e0e0e0 !important;
			padding: 0 !important;
			width: 240px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		}
		
		/* 修复礼物清单页面顶部被遮挡 */
		#gift-list-page .page-content {
			padding-top: 60px !important;
			padding-bottom: 20px;
		}
		
		/* ============================================================ */
		/* 【新增】论坛专属样式 */
		/* ============================================================ */

		/* 1. 顶部 Tab 栏 (固定在内容区上方) */
		.forum-tabs-wrapper {
			position: absolute;
			top: 0; left: 0; right: 0;
			height: 44px;
			background-color: var(--sea-surface-strong, #fff);
			border-bottom: 1px solid var(--sea-border, #eee);
			display: flex;
			align-items: center;
			z-index: 10;
		}

		.forum-tabs-scroll {
			flex: 1;
			display: flex;
			overflow-x: auto;
			height: 100%;
			scrollbar-width: none; /* Firefox */
		}
		.forum-tabs-scroll::-webkit-scrollbar { display: none; }

		.forum-tab {
			padding: 0 15px;
			height: 100%;
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #666;
			white-space: nowrap;
			cursor: pointer;
			position: relative;
		}
		.forum-tab.active {
			color: #07c160;
			font-weight: bold;
		}
		.forum-tab.active::after {
			content: '';
			position: absolute; bottom: 0; left: 20%; width: 60%;
			height: 3px; background-color: #07c160; border-radius: 3px 3px 0 0;
		}

		.forum-tabs-actions {
			display: flex;
			align-items: center;
			padding: 0 10px;
			background: var(--sea-surface-strong, #fff);
			box-shadow: -2px 0 5px rgba(0,0,0,0.05);
		}
		.forum-tabs-actions button {
			width: 30px; height: 30px;
			border: none; background: transparent;
			color: #666; font-size: 16px;
			cursor: pointer; display: flex; align-items: center; justify-content: center;
		}
		.forum-tabs-actions button:active { color: #07c160; }

		/* 2. 帖子列表卡片 */
		.forum-post-card {
			background: var(--sea-surface-strong, #fff);
			border-radius: 8px;
			padding: 15px;
			margin-bottom: 12px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.03);
			position: relative;
			cursor: pointer;
		}
		.forum-post-card:active { background-color: #f9f9f9; }

		.fpc-title {
			font-size: 16px; font-weight: bold; color: #333;
			margin-bottom: 8px; line-height: 1.4;
			display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
		}
		.fpc-content-preview {
			font-size: 14px; color: #666; margin-bottom: 10px;
			display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
		}
		.fpc-footer {
			display: flex; justify-content: space-between; align-items: center;
		}
		.fpc-author {
			display: flex; align-items: center; gap: 8px; font-size: 12px; color: #888;
		}
		.fpc-author img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
		.fpc-time { font-size: 12px; color: #aaa; }

		.fpc-delete-btn {
			position: absolute; top: 10px; right: 10px;
			color: #ccc; background: none; border: none; font-size: 14px; padding: 5px; cursor: pointer;
		}
		.fpc-delete-btn:active { color: #ff3b30; }

		/* 3. 帖子详情页 */
		.forum-detail-main {
			background: #fff; padding: 20px 15px; margin: -10px -10px 10px -10px;
			border-bottom: 1px solid #eee;
		}
		.fd-title { font-size: 20px; font-weight: bold; color: #333; margin-bottom: 15px; line-height: 1.4; }
		.fd-author-box { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
		.fd-author-box img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
		.fd-author-info { display: flex; flex-direction: column; }
		.fd-author-name { font-size: 14px; font-weight: 500; color: #333; }
		.fd-author-time { font-size: 12px; color: #999; }
		.fd-content { font-size: 16px; color: #444; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; }

		/* 评论区 */
		.forum-reply-header { font-size: 14px; font-weight: bold; color: #666; margin: 15px 5px; border-left: 3px solid #07c160; padding-left: 8px; }
		.forum-reply-item {
			background: #fff; padding: 15px; border-radius: 8px; margin-bottom: 10px;
			display: flex; gap: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.02);
		}
		.fri-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #eee; }
		.fri-avatar img { width: 100%; height: 100%; object-fit: cover; }
		.fri-main { flex: 1; }
		.fri-name { font-size: 13px; font-weight: 500; color: #576b95; margin-bottom: 4px; }
		.fri-content { font-size: 15px; color: #333; line-height: 1.5; white-space: pre-wrap; }
		.fri-time { font-size: 11px; color: #aaa; margin-top: 6px; }

		/* 暗黑模式兼容 */
		body[style*="background-color: #111"] .forum-tabs-wrapper { background-color: #191919; border-color: #2a2a2a; }
		body[style*="background-color: #111"] .forum-tabs-actions { background-color: #191919; }
		body[style*="background-color: #111"] .forum-post-card,
		body[style*="background-color: #111"] .forum-detail-main,
		body[style*="background-color: #111"] .forum-reply-item { background-color: #1a1a1a; border-color: #2a2a2a; }
		body[style*="background-color: #111"] .fpc-title, body[style*="background-color: #111"] .fd-title { color: #e0e0e0; }
		body[style*="background-color: #111"] .fd-content, body[style*="background-color: #111"] .fri-content { color: #ccc; }
		/* ============================================================ */
		/* 【新增】论坛用户发帖与回复扩展样式 */
		/* ============================================================ */

		/* 论坛版块操作栏 (面具 + 发帖) */
		.forum-board-action-bar {
			display: flex;
			gap: 10px;
			padding: 10px 15px;
			background: #fff;
			border-bottom: 1px solid #f0f0f0;
		}
		.forum-board-action-bar button {
			flex: 1;
			height: 36px;
			border-radius: 18px;
			border: none;
			font-size: 14px;
			font-weight: 500;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 5px;
		}
		.btn-mask {
			background-color: #f0f0f0;
			color: #555;
		}
		.btn-mask:active { background-color: #e5e5e5; }
		.btn-post {
			background-color: #e8f4fd;
			color: #576b95;
		}
		.btn-post:active { background-color: #d1e9fa; }

		/* 评论卡片内部操作区 (回复 & 删除) */
		.fri-actions {
			display: flex;
			justify-content: flex-end;
			gap: 15px;
			margin-top: 8px;
		}
		.fri-action-btn {
			background: none;
			border: none;
			font-size: 12px;
			color: #999;
			cursor: pointer;
		}
		.fri-action-btn:hover { color: #576b95; }
		.fri-action-btn.delete:hover { color: #ff3b30; }

		/* 暗黑模式兼容 */
		body[style*="background-color: #111"] .forum-board-action-bar { background: #191919; border-color: #2a2a2a; }
		body[style*="background-color: #111"] .btn-mask { background: #333; color: #ccc; }
		body[style*="background-color: #111"] .btn-post { background: #223040; color: #8299c2; }
		/* 论坛 @ 角色列表样式 */
		.forum-at-item {
			display: flex;
			align-items: center;
			padding: 10px;
			border-bottom: 1px solid #f5f5f5;
			cursor: pointer;
			transition: background-color 0.2s;
		}
		.forum-at-item:active {
			background-color: #f0f0f0;
		}
		.forum-at-avatar {
			width: 36px;
			height: 36px;
			border-radius: 4px;
			margin-right: 12px;
			object-fit: cover;
			background-color: #eee;
		}
		.forum-at-name {
			font-size: 15px;
			color: #333;
			font-weight: 500;
		}
		
		/* ============================================================ */
		/* 【补充】论坛输入底栏专属样式 (分离后的独立样式) */
		/* ============================================================ */
		.forum-input-bar {
			position: fixed;
			bottom: 0; 
			left: 0; 
			right: 0;
			min-height: 52px; height: auto; 
			background-color: var(--sea-bg-secondary, #f7f7f7);
			border-top: 1px solid #dcdcdc;
			display: flex;
			align-items: flex-end; 
			padding: 8px 10px;
			z-index: 1001;
			gap: 10px;
			/* 适配底部安全区(如 iPhone 的底部黑条) */
			padding-bottom: calc(8px + env(safe-area-inset-bottom));
		}

		.forum-bar-group { 
			display: flex; 
			align-items: center; 
			flex-shrink: 0; 
		}

		.forum-bar-center { 
			flex-grow: 1; 
		}

		.forum-bar-btn {
			border: none; 
			background: transparent;
			display: flex; 
			align-items: center; 
			justify-content: center;
			cursor: pointer;
		}

		.forum-bar-input {
			width: 100%;
			border: 1px solid var(--sea-border, #ddd); 
			background-color: var(--sea-surface-strong, #fff); color: var(--sea-ink, #111);
			outline: none;
			box-sizing: border-box;
			font-size: 15px;
		}

		.forum-bar-input:focus { 
			border-color: #07c160; 
		}

		.forum-send-btn:active { 
			opacity: 0.8; 
		}

		/* 适配原生暗黑模式 (如果在未加载自定义样式前) */
		body[style*="background-color: #111"] .forum-input-bar {
			background-color: #191919 !important;
			border-top: 1px solid #2a2a2a !important;
		}
		body[style*="background-color: #111"] .forum-bar-input {
			background-color: #2c2c2c !important;
			border-color: #444 !important;
			color: #e0e0e0 !important;
		}
		/* 修复论坛发送按钮太扁的问题，并美化文字排版 */
		.forum-send-btn {
			height: 36px !important;       /* 强制高度为36px，和左边的输入框完美平齐 */
			width: 65px !important;        /* 稍微加宽一点点（覆盖你HTML里的60px） */
			font-weight: 500;              /* 文字稍微加粗，更有质感 */
			letter-spacing: 2px;           /* 增加字间距，让“发送”两个字不要挤在一起 */
			text-indent: 2px;              /* 配合字间距，让文字在视觉上绝对居中 */
			box-shadow: 0 2px 6px rgba(7, 193, 96, 0.2); /* 顺手加个极其轻微的绿色阴影，更有按压感 */
		}
		
		/* ============================================================ */
		/* 【新增】手账日记专属样式 (高度还原图样) */
		/* ============================================================ */

		/* 日记外层画板 (背景为纸张白) */
		.diary-wrapper {
			background-color: #ffffff;
			border-radius: 8px;
			padding: 20px;
			box-shadow: 0 5px 15px rgba(0,0,0,0.05);
			position: relative;
			overflow: hidden;
			color: #2b2b2b;
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
		}

		/* 顶部信息区 */
		.diary-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin-bottom: 10px;
		}
		.diary-top-avatar {
			width: 44px;
			height: 44px;
			border-radius: 50%;
			background-color: #f2f2f6;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			border: 1px solid #dbe2ec;
			flex-shrink: 0;
		}
		.diary-top-avatar img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.diary-top-avatar i {
			font-size: 24px;
			color: #ccc;
		}

		.diary-date-area {
			display: flex;
			align-items: flex-end;
			gap: 8px;
			color: #2a3c5a;
		}

		.diary-day {
			font-size: 42px;
			font-weight: 300;
			line-height: 0.8;
		}

		.diary-date-info {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			font-size: 12px;
			font-weight: bold;
		}

		/* 蓝色圆点分割线 (已修复 html2canvas 不显示的问题) */
		.diary-dots-line {
			height: 6px;
			/* 弃用 html2canvas 无法解析的 radial-gradient，改为原生的 SVG 背景 */
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Ccircle cx='3' cy='3' r='2' fill='%234a5c7b'/%3E%3C/svg%3E");
			background-size: 12px 6px;
			background-repeat: repeat-x;
			margin-bottom: 15px;
			opacity: 0.7;
		}

		/* 主体布局 */
		.diary-body {
			display: flex;
			gap: 15px;
		}

		/* 左侧栏：小方块集合 */
		.diary-left-col {
			flex: 0 0 45%; /* 左侧占45% */
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		.diary-box {
			background-color: #f8f9fc;
			border: 1px solid #dbe2ec;
			border-radius: 6px;
			padding: 8px;
			display: flex;
			flex-direction: column;
		}

		.diary-box-title {
			font-size: 11px;
			font-weight: bold;
			color: #1a1a1a;
			margin-bottom: 6px;
			display: flex;
			align-items: center;
			gap: 4px;
		}

		.diary-box-content {
			font-size: 11px;
			color: #555;
			line-height: 1.5;
			white-space: pre-wrap;
			word-wrap: break-word;
			flex-grow: 1;
		}

		/* 右侧栏：时间线正文 */
		.diary-right-col {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 15px;
		}

		.timeline-block {
			display: flex;
			flex-direction: column;
		}

		/* --- 替换这一段：右列时间分隔栏 (拉长为一整行) --- */
		.timeline-time {
			font-size: 14px;
			font-weight: bold;
			color: #1a1a1a;
			background-color: #f1f4f9;
			padding: 2px 10px;
			border-radius: 12px;
			/* 【关键修改】让它占满宽度，而不是收缩 */
			width: 100%; 
			box-sizing: border-box;
			margin-bottom: 8px;
		}

		.timeline-content {
			font-size: 13px;
			color: #444;
			line-height: 1.8;
			padding-left: 5px;
			white-space: pre-wrap;
			word-wrap: break-word;
		}

		/* 底部品牌标记 */
		.diary-footer-brand {
			text-align: right;
			font-size: 9px;
			color: #aaa;
			font-weight: bold;
			margin-top: 20px;
			border-top: 1px solid #eee;
			padding-top: 8px;
		}

		/* 日记列表卡片样式 */
		.diary-char-card {
			display: flex;
			align-items: center;
			background: #fff;
			padding: 15px;
			border-radius: 8px;
			margin-bottom: 12px;
			box-shadow: 0 1px 5px rgba(0,0,0,0.05);
			cursor: pointer;
		}
		.diary-char-card:active { background: #f9f9f9; }
		.d-char-avatar { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; margin-right: 15px; background: #eee; }
		.d-char-avatar img { width: 100%; height: 100%; object-fit: cover; }
		.d-char-info { flex: 1; }
		.d-char-name { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 4px; }
		.d-char-desc { font-size: 12px; color: #999; }
		/* ============================================================ */
		/* 【心动遇见 (婚介APP伪装) 专属样式】 */
		/* ============================================================ */

		/* 页面通用背景 */
		.meet-page-bg {
			background-color: #fff4f6;
			padding: 20px;
			display: flex;
			flex-direction: column;
			min-height: 100%;
			box-sizing: border-box;
		}

		/* 头部设计 */
		.meet-header {
			text-align: center;
			padding: 10px 0 20px 0;
		}
		.meet-header-icon {
			color: #ff4d4f;
			font-size: 40px;
			text-shadow: 0 4px 10px rgba(255, 77, 79, 0.3);
		}
		.meet-header-title {
			margin-top: 10px;
			color: #ff4d4f;
			font-size: 20px;
			font-weight: bold;
		}
		.meet-header-subtitle {
			color: #888;
			font-size: 12px;
			margin-top: 5px;
		}

		/* 表单卡片项 */
		.meet-form-card {
			background: #fff;
			border: 1px solid #ffe5e5;
			border-radius: 12px;
			padding: 15px;
			margin-bottom: 15px;
		}
		.meet-form-label {
			color: #333;
			font-weight: bold;
			display: block;
			margin-bottom: 10px;
		}
		.meet-input {
			background-color: #fdfdfd !important;
		}

		/* 渐变主按钮 (生成/寻觅) */
		.meet-btn-primary {
			width: 100%;
			background: linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%);
			color: #fff;
			font-weight: bold;
			height: 50px;
			border-radius: 25px;
			margin-top: 10px;
			border: none;
			box-shadow: 0 4px 15px rgba(255, 117, 140, 0.4);
			font-size: 16px;
			cursor: pointer;
		}
		.meet-btn-primary:active {
			transform: scale(0.98);
		}

		/* 匹配结果展示卡片 */
		.meet-result-card {
			background: #fff;
			border-radius: 16px;
			padding: 20px;
			box-shadow: 0 4px 20px rgba(255, 77, 79, 0.15);
			margin-top: 40px; /* 留出头像溢出的空间 */
			text-align: center;
			position: relative;
		}
		.meet-result-avatar {
			width: 80px;
			height: 80px;
			background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
			border-radius: 50%;
			margin: -60px auto 10px auto;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 35px;
			border: 4px solid #fff;
			box-shadow: 0 4px 10px rgba(255, 154, 158, 0.4);
		}
		.meet-result-name {
			color: #333;
			font-size: 22px;
			margin-bottom: 5px;
			font-weight: bold;
		}
		.meet-result-tag {
			font-size: 12px;
			color: #ff4d4f;
			margin-bottom: 20px;
			font-weight: bold;
		}
		.meet-result-brief {
			text-align: left;
			background: #fdfdfd;
			border: 1px dashed #ffccc7;
			border-radius: 8px;
			padding: 15px;
			font-size: 14px;
			color: #555;
			line-height: 1.6;
		}

		/* 结果页按钮组 */
		.meet-result-actions {
			margin-top: 30px;
			display: flex;
			flex-direction: column;
			gap: 15px;
		}
		/* 接受按钮 (绿色) */
		.meet-btn-accept {
			width: 100%;
			background: linear-gradient(135deg, #07c160 0%, #0abf5b 100%);
			color: #fff;
			font-weight: bold;
			height: 50px;
			border-radius: 25px;
			border: none;
			box-shadow: 0 4px 15px rgba(7, 193, 96, 0.3);
			font-size: 16px;
			cursor: pointer;
		}
		.meet-btn-accept:active {
			transform: scale(0.98);
		}
		/* 重新生成按钮 (线框) */
		.meet-btn-outline {
			width: 100%;
			background-color: #fff;
			color: #ff4d4f;
			border: 1px solid #ff4d4f;
			font-weight: bold;
			height: 50px;
			border-radius: 25px;
			font-size: 16px;
			cursor: pointer;
		}
		.meet-btn-outline:active {
			background-color: #fff4f6;
		}
		/* ============================================================ */
		/* 主动消息设置 - 独立角色卡片样式 */
		/* ============================================================ */
		.active-msg-char-card {
			border: 1px solid #eee;
			background: #fff;
			border-radius: 8px;
			margin-bottom: 10px;
			padding: 10px;
			transition: all 0.3s ease;
		}

		/* 开启状态下的卡片样式 */
		.active-msg-char-card.enabled {
			border-color: #c3e8ca;
			background: #f6ffed;
		}

		.am-card-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 0;
			transition: margin-bottom 0.3s ease;
		}

		/* 开启状态下给标题下方留出间距，展示配置项 */
		.active-msg-char-card.enabled .am-card-header {
			margin-bottom: 10px;
		}

		.am-card-header-left {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.am-card-header-left span {
			font-weight: bold;
			color: #333;
		}

		.am-card-switch {
			transform: scale(0.8);
			margin: 0;
			transform-origin: right center;
		}

		.am-card-configs {
			display: none; /* 默认隐藏 */
			gap: 10px;
			background: #fff;
			padding: 10px;
			border-radius: 6px;
			border: 1px solid #eee;
		}

		/* 开启状态下显示配置项 */
		.active-msg-char-card.enabled .am-card-configs {
			display: flex;
		}

		.am-config-item {
			flex: 1;
		}

		.am-config-label {
			font-size: 11px;
			color: #888;
			display: block;
			margin-bottom: 4px;
		}

		.am-config-input {
			font-size: 13px;
			padding: 6px;
			background: #fdfdfd;
		}

	/* ============================================================ */
	/* 【桌面端响应式适配】全尺寸覆盖 (768px ~ 4K+) */
	/* 根因：body/root 为 fixed 布局，内容被 padding 推出视口导致右侧黑屏。 */
	/* 策略：对 fixed 容器用 left/right 替代 padding，对非 fixed 容器加 max-width 居中。 */
	/* ============================================================ */

	/* ---- 平板横屏 / 小桌面 768px - 1023px ---- */
	@media (min-width: 768px) {
		body { min-width: 768px; }

		#main-content-area {
			max-width: 480px;
			left: calc(50% - 240px) !important;
			right: auto !important;
			width: 480px !important;
			transform: none;
		}

		.content-area {
			left: calc(50% - 240px);
			right: auto;
			width: 480px;
		}

		.top-bar {
			max-width: 480px;
			left: calc(50% - 240px);
			width: 480px;
			right: auto;
		}

		.page-content {
			max-width: 100%;
		}

		#chat-page .page-content,
		#wechat-contacts-page .page-content {
			padding-left: 0;
			padding-right: 0;
		}

		.settings-page-content,
		#check-phone-detail-page {
			max-width: 480px;
			margin-left: auto;
			margin-right: auto;
		}

		#forum-posts-container,
		#forum-post-detail-container,
		#diary-list-container,
		#worldbook-list-container,
		#their-day-list-container,
		#cyber-fortune-list-container,
		#game-coop-list-container {
			max-width: 480px;
			margin-left: auto;
			margin-right: auto;
		}
	}

	/* ---- 标准桌面 1024px - 1279px ---- */
	@media (min-width: 1024px) {
		body { min-width: 1024px; }

		#main-content-area {
			max-width: 560px;
			left: calc(50% - 280px) !important;
			right: auto !important;
			width: 560px !important;
			transform: none;
		}

		.content-area {
			left: calc(50% - 280px);
			right: auto;
			width: 560px;
		}

		.top-bar {
			max-width: 560px;
			left: calc(50% - 280px);
			width: 560px;
			right: auto;
		}

		.settings-page-content,
		#check-phone-detail-page {
			max-width: 560px;
			margin-left: auto;
			margin-right: auto;
		}

		#forum-posts-container,
		#forum-post-detail-container,
		#diary-list-container,
		#worldbook-list-container,
		#their-day-list-container,
		#cyber-fortune-list-container,
		#game-coop-list-container {
			max-width: 560px;
			margin-left: auto;
			margin-right: auto;
		}
	}

	/* ---- 中桌面 1280px - 1439px ---- */
	@media (min-width: 1280px) {
		body { min-width: 1280px; }

		#main-content-area {
			max-width: 700px;
			left: calc(50% - 350px) !important;
			right: auto !important;
			width: 700px !important;
			transform: none;
		}

		.content-area {
			left: calc(50% - 350px);
			right: auto;
			width: 700px;
		}

		.top-bar {
			max-width: 700px;
			left: calc(50% - 350px);
			width: 700px;
			right: auto;
		}

		.settings-page-content,
		#check-phone-detail-page {
			max-width: 700px;
			margin-left: auto;
			margin-right: auto;
		}

		#forum-posts-container,
		#forum-post-detail-container,
		#diary-list-container,
		#worldbook-list-container,
		#their-day-list-container,
		#cyber-fortune-list-container,
		#game-coop-list-container,
		#chat-message-container,
		#wechat-contacts-page .page-content {
			max-width: 700px;
			margin-left: auto;
			margin-right: auto;
		}
	}

	/* ---- 大桌面 1440px - 1919px ---- */
	@media (min-width: 1440px) {
		body { min-width: 1440px; }

		#main-content-area {
			max-width: 780px;
			left: calc(50% - 390px) !important;
			right: auto !important;
			width: 780px !important;
			transform: none;
		}

		.content-area {
			left: calc(50% - 390px);
			right: auto;
			width: 780px;
		}

		.top-bar {
			max-width: 780px;
			left: calc(50% - 390px);
			width: 780px;
			right: auto;
		}

		.settings-page-content,
		#check-phone-detail-page {
			max-width: 780px;
			margin-left: auto;
			margin-right: auto;
		}

		#forum-posts-container,
		#forum-post-detail-container,
		#diary-list-container,
		#worldbook-list-container,
		#their-day-list-container,
		#cyber-fortune-list-container,
		#game-coop-list-container,
		#chat-message-container,
		#wechat-contacts-page .page-content {
			max-width: 780px;
			margin-left: auto;
			margin-right: auto;
		}
	}

	/* ---- 超大桌面 1920px+ ---- */
	@media (min-width: 1920px) {
		body { min-width: 1920px; }

		#main-content-area {
			max-width: 860px;
			left: calc(50% - 430px) !important;
			right: auto !important;
			width: 860px !important;
			transform: none;
		}

		.content-area {
			left: calc(50% - 430px);
			right: auto;
			width: 860px;
		}

		.top-bar {
			max-width: 860px;
			left: calc(50% - 430px);
			width: 860px;
			right: auto;
		}

		.settings-page-content,
		#check-phone-detail-page {
			max-width: 860px;
			margin-left: auto;
			margin-right: auto;
		}

		#forum-posts-container,
		#forum-post-detail-container,
		#diary-list-container,
		#worldbook-list-container,
		#their-day-list-container,
		#cyber-fortune-list-container,
		#game-coop-list-container,
		#chat-message-container,
		#wechat-contacts-page .page-content {
			max-width: 860px;
			margin-left: auto;
			margin-right: auto;
		}
	}


		/* ============================================================ */
		/* 【新增】气泡菜单扩展：翻译标签 / 隐藏占位 / 截图 / 思考链 / OOC / 语言选择 */
		/* ============================================================ */
		.byg-hidden-ph { color: #999; font-style: italic; }

		.translate-tag {
			position: relative; margin-top: 10px; margin-left: 8px;
			padding: 6px 10px; background: #f2f2f2; border-radius: 8px;
			font-size: 13px; color: #333; max-width: 80%;
			display: inline-flex; align-items: flex-start; gap: 6px;
			border-left: 2px solid #07c160;
		}
		.translate-tag::before {
			content: ''; position: absolute; left: -8px; top: -8px;
			width: 8px; height: 16px; border-left: 1px solid #bbb; border-bottom: 1px solid #bbb;
			border-bottom-left-radius: 6px;
		}
		.translate-tag .tt-label {
			flex: none; font-size: 10px; color: #fff; background: #07c160;
			padding: 1px 5px; border-radius: 4px; line-height: 16px;
		}
		.translate-tag .tt-text { white-space: pre-wrap; word-break: break-word; }
		.translate-tag .tt-play {
			flex: none; align-self: center; border: none; background: transparent;
			color: #07c160; cursor: pointer; padding: 2px 4px; font-size: 14px; line-height: 1;
		}
		.translate-tag .tt-play.tt-playing { color: #e8590c; animation: ttPulse 0.9s infinite; }
		@keyframes ttPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

		/* 截图选择模式 */
		#chat-message-container.byg-shot-mode .chat-msg-row { cursor: pointer; }
		.chat-msg-row.byg-shot-selected { background: rgba(7,193,96,0.12); border-radius: 8px; }
		.byg-shot-bar {
			position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000;
			height: 54px; background: #f7f7f7; border-top: 1px solid #ddd;
			display: flex; align-items: center; justify-content: space-between;
			padding: 0 18px; padding-bottom: env(safe-area-inset-bottom);
		}
		.byg-shot-bar button { border: none; border-radius: 6px; padding: 8px 16px; font-size: 14px; }
		.byg-shot-bar .byg-shot-cancel { background: #e5e5e5; color: #333; }
		.byg-shot-bar .byg-shot-ok { background: #07c160; color: #fff; }

		/* 语言选择弹窗 */
		.byg-lang-mask {
			position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,0.4);
			display: flex; align-items: center; justify-content: center;
		}
		.byg-lang-box { width: 82%; max-width: 340px; background: #fff; border-radius: 14px; padding: 16px; }
		.byg-lang-title { font-size: 15px; font-weight: 600; text-align: center; margin-bottom: 12px; }
		.byg-lang-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
		.byg-lang-item { text-align: center; padding: 10px 0; background: #f2f2f2; border-radius: 8px; font-size: 13px; }
		.byg-lang-item:active { background: #07c160; color: #fff; }
		.byg-lang-cancel { text-align: center; margin-top: 12px; padding: 10px; color: #888; font-size: 14px; }

		/* 思考链面板 */
		.byg-reasoning-mask {
			position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,0.5);
			display: flex; align-items: center; justify-content: center;
		}
		.byg-reasoning-box { width: 88%; max-width: 400px; max-height: 78vh; background: #fff; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; }
		.byg-reasoning-head { display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 600; margin-bottom: 8px; }
		.byg-reasoning-head i { color: #999; padding: 4px; cursor: pointer; }
		.byg-reasoning-model { font-size: 12px; color: #07c160; background: #f0faf3; border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; word-break: break-all; }
		.byg-reasoning-text { flex: 1; min-height: 180px; resize: none; border: 1px solid #e5e5e5; border-radius: 8px; padding: 10px; font-size: 13px; line-height: 1.6; font-family: inherit; }
		.byg-reasoning-btns { display: flex; gap: 8px; margin-top: 10px; }
		.byg-reasoning-btns button { flex: 1; border: none; border-radius: 8px; padding: 10px 0; font-size: 14px; background: #f2f2f2; color: #333; }
		.byg-reasoning-btns #byg-reasoning-apply { background: #07c160; color: #fff; }

		/* OOC 提示条 */
		.byg-ooc-bar {
			position: fixed; left: 0; right: 0;
			top: calc(60px + env(safe-area-inset-top, 0px)); bottom: auto; height: auto; min-height: 0;
			z-index: 900;
			display: flex; align-items: center; justify-content: space-between; gap: 10px;
			background: rgba(255,204,0,0.97); border-bottom: 1px solid #ffd8a8; color: #5a4500;
			font-size: 12px; padding: 7px 14px;
			box-shadow: 0 2px 6px rgba(0,0,0,0.12);
			box-sizing: border-box;
		}
		.byg-ooc-bar button { border: none; background: #e8590c; color: #fff; border-radius: 6px; padding: 5px 12px; font-size: 12px; flex: none; }

/* 【修复】强制所有输入框/文本域可选中、可粘贴（修复实体手机 WebView 里密钥框无法粘贴问题） */
/* byg-force-input-selectable */
input, textarea, [contenteditable="true"] {
	-webkit-user-select: text !important;
	user-select: text !important;
	-webkit-touch-callout: default !important;
}

/* === THEME FOLLOW PATCH (phone theme) === */
/* 让非微信App的通用表单/控件跟随小手机主题变色（微信App页面用独立选择器，不受影响） */
.setting-input {
	background-color: var(--sea-surface-strong, #fff);
	color: var(--sea-ink, #111);
	border-color: var(--sea-border, #ddd);
}
.setting-input::placeholder { color: var(--sea-muted, #999); }
.warehouse-ios-scroll { background-color: var(--sea-bg, #f2f2f7); }
.warehouse-ios-group { background-color: var(--sea-surface-strong, #fff); }
.warehouse-ios-row { background-color: var(--sea-surface-strong, #fff); color: var(--sea-ink, #111); }
.shop-search-row input,
#shop-keyword-input, #shop-min-price, #shop-max-price {
	background-color: var(--sea-bg-secondary, #f5f5f5) !important;
	color: var(--sea-ink, #111);
}
.task-manager-clear-fab { background-color: var(--sea-surface-strong, #f0f0f0); color: var(--sea-ink, #111); }


/* ============================================================ */
/* 微信美化：静态气泡自定义 折叠区 + 控件（跟随手机主题变量） */
/* ============================================================ */
.wx-fold {
	border: 1px solid var(--sea-border, #e5e5e5);
	border-radius: 12px;
	margin-bottom: 12px;
	overflow: hidden;
	background: var(--sea-surface-strong, #fff);
}
.wx-fold-summary {
	list-style: none;
	cursor: pointer;
	padding: 13px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	font-weight: 600;
	color: var(--sea-ink, #111);
	background: var(--sea-surface-strong, #fff);
	user-select: none;
}
.wx-fold-summary::-webkit-details-marker { display: none; }
.wx-fold-caret { transition: transform .2s ease; color: var(--sea-muted, #999); font-size: 12px; }
.wx-fold[open] .wx-fold-caret { transform: rotate(180deg); }
.wx-fold-body {
	padding: 4px 14px 16px;
	border-top: 1px solid var(--sea-border, #eee);
	background: var(--sea-bg-secondary, #fafafa);
}
.wx-ctrl-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
}
.wx-ctrl-row label { font-size: 13px; color: var(--sea-ink, #333); margin: 0; }
.wx-ctrl-val { font-size: 12px; color: var(--sea-accent, #07c160); }
.wx-hint { font-size: 11px; color: var(--sea-muted, #aaa); margin-top: 2px; }
.wx-range { width: 100%; accent-color: var(--sea-accent, #07c160); }
.wx-color { width: 44px; height: 30px; border: 1px solid var(--sea-border, #ddd); border-radius: 8px; background: none; padding: 2px; }
/* iOS 分段控件（头像形状） */
.wx-seg {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}
.wx-seg-btn {
	flex: 1;
	padding: 9px 0;
	border-radius: 10px;
	border: 1px solid var(--sea-border, #ddd);
	background: var(--sea-surface-strong, #fff);
	color: var(--sea-ink, #333);
	font-size: 13px;
	cursor: pointer;
	transition: all .15s ease;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.wx-seg-btn.active {
	background: #07c160;
	border-color: #07c160;
	color: #fff;
	box-shadow: 0 2px 6px rgba(7,193,96,0.3);
}
/* 开关（头像框启用） */
.wx-switch { position: relative; display: inline-block; width: 46px; height: 26px; }
.wx-switch input { opacity: 0; width: 0; height: 0; }
.wx-switch-slider {
	position: absolute; inset: 0; cursor: pointer;
	background: var(--sea-border, #ccc); border-radius: 26px; transition: .2s;
}
.wx-switch-slider::before {
	content: ''; position: absolute; height: 22px; width: 22px; left: 2px; top: 2px;
	background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.wx-switch input:checked + .wx-switch-slider { background: #07c160; }
.wx-switch input:checked + .wx-switch-slider::before { transform: translateX(20px); }

/* ============================================================ */
/* 微信风格 iOS 底部动作面板（导出/导入等） */
/* ============================================================ */
.wx-actionsheet-mask {
	position: fixed; inset: 0; z-index: 100000;
	background: rgba(0,0,0,0.4);
	display: flex; align-items: flex-end; justify-content: center;
	opacity: 0; transition: opacity .2s ease;
}
.wx-actionsheet-mask.show { opacity: 1; }
.wx-actionsheet {
	width: 100%; max-width: 460px;
	padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
	transform: translateY(100%);
	transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.wx-actionsheet-mask.show .wx-actionsheet { transform: translateY(0); }
.wx-as-card {
	background: var(--sea-surface-strong, #fff);
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 8px;
}
.wx-as-title {
	text-align: center; font-size: 13px; color: var(--sea-muted, #888);
	padding: 14px 16px 10px; line-height: 1.4;
}
.wx-as-btn {
	display: block; width: 100%; border: none; background: transparent;
	padding: 15px 16px; font-size: 17px; color: var(--sea-ink, #111);
	cursor: pointer; text-align: center;
	border-top: 1px solid var(--sea-border, #ececec);
	transition: background .12s ease;
}
.wx-as-btn:first-child { border-top: none; }
.wx-as-btn:active { background: var(--sea-accent-soft, #f2f2f2); }
.wx-as-btn.primary { color: #07c160; font-weight: 600; }
.wx-as-btn.danger { color: #fa5151; }
.wx-as-cancel {
	display: block; width: 100%; border: none;
	background: var(--sea-surface-strong, #fff);
	border-radius: 14px; padding: 15px 16px; font-size: 17px; font-weight: 600;
	color: var(--sea-ink, #111); cursor: pointer;
}

/* 微信页面内容深浅色适配 */
.wx-page-content {
    background: var(--wx-theme-bg) !important;
    min-height: 100vh;
    padding: 16px 0;
}

.wx-setting-page,
.wx-mask-manage-page,
.wx-mask-edit-page,
#my-works-page {
    background: var(--wx-theme-bg) !important;
}

/* 微信设置项组 */
.wx-setting-group {
    background: var(--wx-theme-item-bg);
    margin: 0 0 16px 0;
    border-top: 1px solid var(--wx-theme-border);
    border-bottom: 1px solid var(--wx-theme-border);
}

.wx-setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--wx-theme-border);
    cursor: pointer;
    transition: background 0.2s;
}

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

.wx-setting-item:active {
    background: var(--wx-theme-item-active);
}

.wx-setting-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wx-setting-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.wx-setting-label {
    font-size: 16px;
    color: var(--wx-theme-text);
}

.wx-setting-arrow {
    font-size: 14px;
    color: var(--wx-theme-text-secondary);
}

/* 微信多用户面具管理页 */
.wx-mask-current-section {
    padding: 16px;
}

.wx-mask-current-label {
    font-size: 13px;
    color: var(--wx-theme-text-secondary);
    margin-bottom: 12px;
    padding-left: 4px;
}

.wx-mask-current-card {
    background: var(--wx-theme-item-bg);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--wx-theme-border);
    cursor: pointer;
    transition: background 0.2s;
}

.wx-mask-current-card:active {
    background: var(--wx-theme-item-active);
}

.wx-mask-current-avatar {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #dfe3e8 url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23dfe3e8'/%3E%3Ccircle cx='50' cy='38' r='20' fill='%23a7b0ba'/%3E%3Cpath d='M18 92c0-20 14-32 32-32s32 12 32 32z' fill='%23a7b0ba'/%3E%3C/svg%3E") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 24px;
    flex-shrink: 0;
    overflow: hidden;
}

.wx-mask-current-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wx-mask-current-info {
    flex: 1;
    min-width: 0;
}

.wx-mask-current-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--wx-theme-text);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wx-mask-current-desc {
    font-size: 14px;
    color: var(--wx-theme-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wx-mask-current-arrow {
    font-size: 14px;
    color: var(--wx-theme-text-secondary);
}

.wx-mask-list-section {
    padding: 0 16px 16px;
}

.wx-mask-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.wx-mask-list-label {
    font-size: 13px;
    color: var(--wx-theme-text-secondary);
}

.wx-mask-add-btn {
    background: #07c160;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.2s;
}

.wx-mask-add-btn:active {
    opacity: 0.7;
}

.wx-mask-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wx-mask-list-item {
    background: var(--wx-theme-item-bg);
    border: 1px solid var(--wx-theme-border);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.wx-mask-list-item:active {
    background: var(--wx-theme-item-active);
}

.wx-mask-list-item.active {
    border-color: #07c160;
    background: rgba(7, 193, 96, 0.05);
}

.wx-mask-list-avatar {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
}

.wx-mask-list-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wx-mask-list-info {
    flex: 1;
    min-width: 0;
}

.wx-mask-list-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--wx-theme-text);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wx-mask-list-username {
    font-size: 13px;
    color: var(--wx-theme-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wx-mask-list-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--wx-theme-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
}

.wx-mask-list-item.active .wx-mask-list-check {
    background: #07c160;
    border-color: #07c160;
}

/* 微信面具编辑页 */
.wx-mask-edit-section {
    padding: 16px;
    border-bottom: 1px solid var(--wx-theme-border);
}

.wx-mask-edit-avatar-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
}

.wx-mask-edit-avatar {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    background: #dfe3e8 url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23dfe3e8'/%3E%3Ccircle cx='50' cy='38' r='20' fill='%23a7b0ba'/%3E%3Cpath d='M18 92c0-20 14-32 32-32s32 12 32 32z' fill='%23a7b0ba'/%3E%3C/svg%3E") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 40px;
    overflow: hidden;
}

.wx-mask-edit-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wx-mask-avatar-upload-btn {
    background: #07c160;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s;
}

.wx-mask-avatar-upload-btn:active {
    opacity: 0.7;
}

.wx-mask-edit-label {
    display: block;
    font-size: 14px;
    color: var(--wx-theme-text-secondary);
    margin-bottom: 8px;
}

.wx-mask-edit-input,
.wx-mask-edit-textarea,
.wx-mask-edit-select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--wx-theme-border);
    border-radius: 8px;
    font-size: 16px;
    background: var(--wx-theme-item-bg);
    color: var(--wx-theme-text);
    box-sizing: border-box;
}

.wx-mask-edit-input:focus,
.wx-mask-edit-textarea:focus,
.wx-mask-edit-select:focus {
    outline: none;
    border-color: #07c160;
}

.wx-mask-edit-textarea {
    resize: vertical;
    font-family: inherit;
}

/* 头像框设置 */
.wx-mask-frame-preview {
    width: 120px;
    height: 120px;
    margin: 16px auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wx-mask-frame-avatar-inner {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #dfe3e8 url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23dfe3e8'/%3E%3Ccircle cx='50' cy='38' r='20' fill='%23a7b0ba'/%3E%3Cpath d='M18 92c0-20 14-32 32-32s32 12 32 32z' fill='%23a7b0ba'/%3E%3C/svg%3E") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 32px;
    overflow: hidden;
}

.wx-mask-frame-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.wx-mask-frame-upload-btn,
.wx-mask-frame-align-btn {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--wx-theme-border);
    border-radius: 8px;
    background: var(--wx-theme-item-bg);
    color: var(--wx-theme-text);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    transition: background 0.2s;
}

.wx-mask-frame-upload-btn:active,
.wx-mask-frame-align-btn:active {
    background: var(--wx-theme-item-active);
}

.wx-mask-frame-preset {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.wx-frame-preset-btn {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--wx-theme-border);
    border-radius: 8px;
    background: var(--wx-theme-item-bg);
    color: var(--wx-theme-text);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.wx-frame-preset-btn.active {
    border-color: #07c160;
    background: rgba(7, 193, 96, 0.1);
    color: #07c160;
}

.wx-mask-frame-summary {
    margin-top: 12px;
    padding: 12px;
    background: var(--wx-theme-item-active);
    border-radius: 8px;
    font-size: 13px;
    color: var(--wx-theme-text-secondary);
    line-height: 1.5;
}

.wx-mask-delete-btn {
    width: 100%;
    padding: 14px;
    background: transparent;
    border: 1px solid #ff3b30;
    border-radius: 8px;
    color: #ff3b30;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.wx-mask-delete-btn:active {
    background: rgba(255, 59, 48, 0.1);
}


/* ============================================================ */
/* WeChat App Full Style System - Unified 2026                  */
/* ============================================================ */

/* --- Top Bars (all WeChat pages) --- */
#chat-top, #wechat-contacts-top, #discover-top, #me-top,
#my-works-top, #wx-setting-top, #wx-mask-manage-top, #wx-mask-edit-top,
#chat-detail-top, #chat-actions-top, #chat-setting-top, #group-setting-top,
#chat-search-top, #favorites-top, #user-info-top, #avatar-edit-top,
#name-edit-top, #status-edit-top, #gender-edit-top, #region-edit-top,
#mask-edit-top, #life-events-top, #ltm-top, #user-masks-top, #edit-user-mask-top {
    background: var(--wx-topbar) !important;
    border-bottom: 0.5px solid var(--wx-sep) !important;
    box-shadow: none !important;
}
#chat-top .top-bar-title, #wechat-contacts-top .top-bar-title,
#discover-top .top-bar-title, #me-top .top-bar-title,
#my-works-top .top-bar-title, #wx-setting-top .top-bar-title,
#wx-mask-manage-top .top-bar-title, #wx-mask-edit-top .top-bar-title,
#chat-detail-top .top-bar-title {
    color: var(--wx-topbar-text) !important;
    font-weight: 600 !important;
}
#chat-top .top-bar-back i, #wechat-contacts-top .top-bar-back i,
#discover-top .top-bar-back i, #me-top .top-bar-back i,
#my-works-top .top-bar-back i, #wx-setting-top .top-bar-back i,
#wx-mask-manage-top .top-bar-back i, #wx-mask-edit-top .top-bar-back i,
#chat-detail-top .top-bar-back i {
    color: var(--wx-brand) !important;
}
#my-works-top .top-bar-right-btn,
#wx-setting-top .top-bar-right-btn,
#wx-mask-manage-top .top-bar-right-btn,
#wx-mask-edit-top .top-bar-right-btn {
    color: var(--wx-brand) !important;
}

/* --- WeChat Setting Page --- */
.wx-page-content {
    background: var(--wx-bg) !important;
    min-height: 100vh;
    padding: 12px 0 80px;
}
#wx-setting-page, #wx-mask-manage-page, #wx-mask-edit-page {
    background: var(--wx-bg) !important;
}

.wx-setting-group {
    background: var(--wx-card);
    border-top: 0.5px solid var(--wx-sep);
    border-bottom: 0.5px solid var(--wx-sep);
    margin-bottom: 20px;
}
.wx-setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 0.5px solid var(--wx-sep-light);
    cursor: pointer;
    background: var(--wx-card);
    transition: background 0.12s;
}
.wx-setting-item:last-child { border-bottom: none; }
.wx-setting-item:active { background: var(--wx-active); }
.wx-setting-item-left { display: flex; align-items: center; gap: 14px; }
.wx-setting-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    flex-shrink: 0;
}
/* 2026 微信官方线性图标：透明底、直接显示 SVG（与「我」页 me-wx-icon-line 同风格） */
.wx-setting-icon.wx-setting-icon-line {
	background: transparent !important;
	width: 30px;
	height: 30px;
	border-radius: 0;
	color: inherit;
}
.wx-setting-icon.wx-setting-icon-line svg {
	width: 26px;
	height: 26px;
	display: block;
}

.wx-setting-label { font-size: 16px; color: var(--wx-text); }
.wx-setting-value { font-size: 14px; color: var(--wx-text-sub); margin-right: 8px; }
.wx-setting-arrow { font-size: 13px; color: var(--wx-text-hint); }

/* --- Multi-Mask Management Page --- */
.wx-mask-manage-page {
    background: var(--wx-bg);
    min-height: 100vh;
    padding: 12px 0 80px;
}
.wx-mask-current-section { padding: 16px; }
.wx-mask-section-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--wx-text-sub);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
    padding: 0 4px;
}
.wx-mask-current-card {
    background: var(--wx-card);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--wx-shadow-sm);
    transition: background 0.12s;
    position: relative;
}
.wx-mask-current-card:active { background: var(--wx-card-hover); }
.wx-mask-current-avatar {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6e6eff 0%, #a855f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    flex-shrink: 0;
    overflow: hidden;
}
.wx-mask-current-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-mask-current-info { flex: 1; margin-left: 14px; min-width: 0; }
.wx-mask-current-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--wx-text);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wx-mask-current-desc {
    font-size: 13px;
    color: var(--wx-text-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wx-mask-current-badge {
    background: var(--wx-brand);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    flex-shrink: 0;
}
.wx-mask-current-arrow { font-size: 13px; color: var(--wx-text-hint); margin-left: 12px; flex-shrink: 0; }

.wx-mask-list-section { padding: 0 16px 16px; }
.wx-mask-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.wx-mask-add-btn {
    background: var(--wx-brand);
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 7px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.15s;
}
.wx-mask-add-btn:active { opacity: 0.7; }

.wx-mask-list-item {
    background: var(--wx-card);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    cursor: pointer;
    box-shadow: var(--wx-shadow-sm);
    transition: background 0.12s;
    position: relative;
}
.wx-mask-list-item:active { background: var(--wx-card-hover); }
.wx-mask-list-item.active {
    border: 1.5px solid var(--wx-brand);
}
.wx-mask-list-avatar {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, #6e6eff 0%, #a855f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
}
.wx-mask-list-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-mask-list-info { flex: 1; margin-left: 12px; min-width: 0; }
.wx-mask-list-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--wx-text);
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wx-mask-list-username {
    font-size: 13px;
    color: var(--wx-text-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wx-mask-list-check { font-size: 18px; color: var(--wx-brand); margin-left: 10px; flex-shrink: 0; }
.wx-mask-list-delete {
    font-size: 16px;
    color: var(--wx-red);
    margin-left: 10px;
    flex-shrink: 0;
    padding: 4px;
}

/* --- Mask Edit Page --- */
.wx-mask-edit-page { background: var(--wx-bg); min-height: 100vh; padding: 12px 0 80px; }
.wx-mask-edit-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px 16px;
}
.wx-mask-edit-avatar {
    width: 80px;
    height: 80px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6e6eff 0%, #a855f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 36px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    box-shadow: var(--wx-shadow-md);
    flex-shrink: 0;
}
.wx-mask-edit-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-mask-edit-avatar-hint {
    font-size: 12px;
    color: var(--wx-brand);
    margin-top: 8px;
    text-align: center;
}

.wx-mask-edit-section {
    background: var(--wx-card);
    border-top: 0.5px solid var(--wx-sep);
    border-bottom: 0.5px solid var(--wx-sep);
    margin-bottom: 16px;
    padding: 0;
}
.wx-mask-edit-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--wx-text-sub);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 14px 16px 8px;
}
.wx-mask-input-row {
    display: flex;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 0.5px solid var(--wx-sep-light);
    background: var(--wx-card);
}
.wx-mask-input-row:last-child { border-bottom: none; }
.wx-mask-input-label {
    font-size: 15px;
    color: var(--wx-text);
    width: 72px;
    flex-shrink: 0;
}
.wx-mask-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--wx-text);
    font-size: 15px;
    outline: none;
    text-align: right;
    caret-color: var(--wx-brand);
}
.wx-mask-input::placeholder { color: var(--wx-text-hint); }
.wx-mask-textarea {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--wx-text);
    font-size: 14px;
    outline: none;
    resize: none;
    padding: 0;
    min-height: 80px;
    caret-color: var(--wx-brand);
    box-sizing: border-box;
}
.wx-mask-textarea::placeholder { color: var(--wx-text-hint); }

.wx-mask-save-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 16px 16px 8px;
    padding: 14px;
    background: var(--wx-brand);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.15s;
}
.wx-mask-save-btn:active { opacity: 0.75; }

.wx-mask-delete-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 0 16px 16px;
    padding: 14px;
    background: transparent;
    color: var(--wx-red);
    border: 1px solid var(--wx-red);
    border-radius: 8px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.12s;
}
.wx-mask-delete-btn:active { background: rgba(255,59,48,0.08); }

/* Avatar Frame Section in Mask Edit */
.wx-mask-frame-section {
    background: var(--wx-card);
    border-top: 0.5px solid var(--wx-sep);
    border-bottom: 0.5px solid var(--wx-sep);
    margin-bottom: 16px;
    padding: 14px 16px;
}
.wx-mask-frame-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--wx-text-sub);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 12px;
}
.wx-mask-frame-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.wx-mask-frame-item {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid transparent;
    overflow: hidden;
    position: relative;
    transition: border-color 0.15s;
}
.wx-mask-frame-item.selected { border-color: var(--wx-brand); }
.wx-mask-frame-item img { width: 100%; height: 100%; object-fit: cover; }
.wx-mask-frame-none {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px dashed var(--wx-sep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--wx-text-sub);
    text-align: center;
    line-height: 1.3;
    transition: border-color 0.15s;
}
.wx-mask-frame-none.selected { border-color: var(--wx-brand); color: var(--wx-brand); }

/* --- Works / Gallery Page --- */
#my-works-page { background: var(--wx-bg) !important; }
#my-works-page .page-content { background: var(--wx-bg) !important; padding-bottom: 80px; }

#works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--wx-sep);
}
.work-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
    background: var(--wx-card);
}
.work-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-item.selected::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(7,193,96,0.25);
    border: 2.5px solid var(--wx-brand);
    pointer-events: none;
}
.work-item-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--wx-brand);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 2;
}
.work-item.selected .work-item-check { display: flex; }

#works-empty-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 32px;
    color: var(--wx-text-sub);
    font-size: 15px;
    gap: 12px;
    text-align: center;
}
#works-empty-hint i { font-size: 48px; color: var(--wx-text-hint); }

#works-selection-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--wx-topbar);
    border-top: 0.5px solid var(--wx-sep);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    display: flex;
    gap: 8px;
    z-index: 200;
}
.works-action-btn {
    flex: 1;
    padding: 11px 0;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.works-action-btn:active { opacity: 0.7; }
.works-action-btn--green { background: var(--wx-brand); color: #fff; }
.works-action-btn--red { background: var(--wx-red); color: #fff; }
.works-action-btn--gray { background: var(--wx-card); color: var(--wx-text); border: 0.5px solid var(--wx-sep); }
.works-action-btn--orange { background: var(--wx-orange); color: #fff; }

/* --- WeChat Contacts Page --- */
#wechat-contacts-page { background: var(--wx-bg); }
#wechat-contacts-page .page-content { background: var(--wx-bg); }

/* --- WeChat common scrollbar suppression --- */
#me-page ::-webkit-scrollbar,
#wx-setting-page ::-webkit-scrollbar,
#wx-mask-manage-page ::-webkit-scrollbar,
#wx-mask-edit-page ::-webkit-scrollbar,
#my-works-page ::-webkit-scrollbar { display: none; }


/* 2026 微信朋友圈线性图标（发现页） */
.menu-btn .discover-moments-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-right: 12px;
	flex-shrink: 0;
}
.menu-btn .discover-moments-icon svg { width: 22px; height: 22px; display:block; }

/* BYG-WX-BEAUTIFY-SKIN */
/* 🔒【微信美化页面 · 微信皮肤】把 #custom-style-page 及顶栏 #custom-style-top 从小手机海盐风
   改为微信风格，仅在该页作用域内覆盖 form-section / form-label / form-input / form-textarea /
   batch-btn / code-input 等外壳类，严格挂在 #custom-style-page 下，不污染其它页面。 */
#custom-style-top {
	background: var(--wx-topbar) !important;
	border-bottom: 0.5px solid var(--wx-sep) !important;
	box-shadow: none !important;
}
#custom-style-top .top-bar-title { color: var(--wx-topbar-text) !important; font-weight: 600 !important; }
#custom-style-top .top-bar-back i { color: var(--wx-brand) !important; }
#custom-style-top .top-bar-right-btn,
#custom-style-top #custom-style-save-btn { color: var(--wx-brand) !important; background: transparent !important; }

#custom-style-page { background: var(--wx-bg) !important; }
#custom-style-page .page-content { background: var(--wx-bg) !important; padding: 12px 0 80px; }

/* 分组卡片：卡片式 form-section */
#custom-style-page .form-section {
	background: var(--wx-card) !important;
	margin: 0 12px 12px !important;
	padding: 14px 16px !important;
	border-radius: 12px !important;
	border-top: 0.5px solid var(--wx-sep);
	border-bottom: 0.5px solid var(--wx-sep);
	box-shadow: var(--wx-shadow-sm);
}
#custom-style-page .form-section:first-of-type { margin-top: 12px !important; }

/* 标签与副文本 */
#custom-style-page .form-label {
	color: var(--wx-text) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	margin-bottom: 8px !important;
}
#custom-style-page hr { border-top-color: var(--wx-sep) !important; opacity: 0.7; }

/* 输入框 / 文本域 / 下拉 */
#custom-style-page .form-input,
#custom-style-page .form-textarea,
#custom-style-page select.form-input {
	background: var(--wx-input-bg) !important;
	color: var(--wx-text) !important;
	border: 1px solid var(--wx-sep) !important;
	border-radius: 8px !important;
	padding: 10px 12px !important;
	font-size: 14px !important;
	box-shadow: none !important;
}
#custom-style-page .form-input::placeholder,
#custom-style-page .form-textarea::placeholder { color: var(--wx-text-hint) !important; }
#custom-style-page .form-input:focus,
#custom-style-page .form-textarea:focus {
	border-color: var(--wx-brand) !important;
	box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.12) !important;
	background: var(--wx-card) !important;
}

/* 代码输入框：微信配色 + 等宽 */
#custom-style-page .code-input {
	background: var(--wx-input-bg) !important;
	color: var(--wx-text) !important;
	border-color: var(--wx-sep) !important;
}
#custom-style-page .code-input:focus {
	background: var(--wx-card) !important;
	border-color: var(--wx-brand) !important;
	box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.12) !important;
}

/* 按钮：微信风（默认扁平 + 品牌绿主按钮） */
#custom-style-page .batch-btn {
	background: var(--wx-input-bg) !important;
	color: var(--wx-text) !important;
	border: 1px solid var(--wx-sep) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	min-height: 40px !important;
	font-weight: 500 !important;
	transition: background 0.15s ease !important;
}
#custom-style-page .batch-btn:hover,
#custom-style-page .batch-btn:active { transform: none !important; background: var(--wx-active) !important; }
#custom-style-page #save-style-preset-btn {
	background: var(--wx-brand) !important;
	color: #fff !important;
	border-color: var(--wx-brand) !important;
}
#custom-style-page #save-style-preset-btn:hover,
#custom-style-page #save-style-preset-btn:active { background: var(--wx-brand-hover) !important; }

/* 危险按钮 */
#custom-style-page #reset-style-btn {
	background: transparent !important;
	color: var(--wx-red) !important;
	border-color: var(--wx-red) !important;
}
#custom-style-page #clear-global-bg-btn,
#custom-style-page #clear-font-btn { color: var(--wx-red) !important; }

/* 折叠面板（对方/己方气泡设置）：卡片风格 */
#custom-style-page .wx-fold {
	background: var(--wx-card);
	border: 1px solid var(--wx-sep);
	border-radius: 10px;
	margin-bottom: 10px;
	overflow: hidden;
}
#custom-style-page .wx-fold-summary {
	padding: 12px 14px;
	color: var(--wx-text);
	background: var(--wx-card);
	cursor: pointer;
	list-style: none;
	display: flex; align-items: center; justify-content: space-between;
}
#custom-style-page .wx-fold[open] .wx-fold-summary { border-bottom: 0.5px solid var(--wx-sep); }
#custom-style-page .wx-fold-body { padding: 12px 14px; background: var(--wx-card); }
#custom-style-page .wx-hint { color: var(--wx-text-sub); font-size: 12px; }
#custom-style-page .wx-ctrl-val { color: var(--wx-text-sub); font-size: 13px; }

/* 副说明文字（内联深色下的浅灰改为微信副文本色） */
#custom-style-page div[style*="color: #888"],
#custom-style-page div[style*="color:#888"],
#custom-style-page div[style*="color: #999"],
#custom-style-page div[style*="color:#999"],
#custom-style-page span[style*="color: #888"],
#custom-style-page span[style*="color:#888"],
#custom-style-page span[style*="color: #999"],
#custom-style-page span[style*="color:#999"] {
	color: var(--wx-text-sub) !important;
}

/* ─── 全局隐藏滚动条 ─── */
::-webkit-scrollbar { display: none !important; }
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }

/* ============================================================
   角色忙里偷闲标签：忙碌状态下偷偷回的消息，气泡上方挂个小标
   ============================================================ */
.byg-sneaky-tag {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-bottom: 3px;
	padding: 1px 7px;
	font-size: 10px;
	line-height: 16px;
	color: #b07a2e;
	background: rgba(255, 196, 87, 0.18);
	border: 1px solid rgba(255, 196, 87, 0.45);
	border-radius: 8px;
	white-space: nowrap;
	user-select: none;
}
.chat-msg-row.left .byg-sneaky-tag { align-self: flex-start; }
.chat-msg-row.right .byg-sneaky-tag { align-self: flex-end; }
.byg-sneaky-tag i { font-size: 9px; opacity: .85; }

/* 忙完才回：等待时长标，配色比偷闲标冷一些，区分两种情形 */
.byg-sneaky-tag.byg-delayed-tag {
	color: #5b7fa6;
	background: rgba(91, 127, 166, 0.12);
	border-color: rgba(91, 127, 166, 0.35);
}

/* 聊天列表：这个角色有一条回复正压在队列里没发 */
.byg-pending-chip {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: 5px;
	padding: 0 6px;
	font-size: 10px;
	line-height: 15px;
	color: #9a8354;
	background: rgba(255, 196, 87, 0.16);
	border-radius: 7px;
	vertical-align: middle;
	white-space: nowrap;
	flex: none;
}
.byg-pending-chip i { font-size: 8px; opacity: .8; }

/* ============================================================
   旁白模式：线下聊天里 () 内的描写统一走这个容器
   ============================================================ */
.byg-narration {
	display: block;
	margin: 2px 0 6px;
	padding: 7px 10px 7px 12px;
	border-left: 2px solid rgba(140, 120, 90, 0.45);
	border-radius: 4px;
	background: rgba(140, 120, 90, 0.07);
	color: #6b5c46;
	font-size: 14px;
	line-height: 1.75;
	font-style: italic;
	letter-spacing: 0;
	white-space: pre-wrap;
	word-break: break-word;
}
.byg-narration:last-child { margin-bottom: 0; }
.byg-narration + .byg-narration { margin-top: -2px; }

/* 绿气泡里的旁白：底色压深一点，免得和微信绿糊成一片 */
.chat-msg-row.right .byg-narration {
	border-left-color: rgba(58, 92, 42, 0.42);
	background: rgba(58, 92, 42, 0.10);
	color: #3f5733;
}

/* 旁白里的对白：默认放大、倾斜、单下划线，用户可在设置里改 */
.byg-narration-speech {
	display: inline;
	font-style: normal;
	color: #43382a;
}
.chat-msg-row.right .byg-narration-speech { color: #24371c; }
.byg-narration-speech em,
.byg-narration-speech i { font-style: italic; }
.byg-narration-speech strong,
.byg-narration-speech b { font-weight: 700; }
.byg-narration-speech u { text-decoration: underline; }
/* 双下划线：重点或重读音 */
.byg-narration-speech .byg-uu {
	text-decoration: underline double;
	text-underline-offset: 2px;
}

/* 功能面板里旁白按钮的开启态 */
#btn-func-narrator.byg-func-on .func-icon {
	background-color: rgba(140, 120, 90, 0.22) !important;
}
#btn-func-narrator.byg-func-on .func-icon i { color: #8a7550 !important; }
#btn-func-narrator.byg-func-on .func-text { color: #8a7550; font-weight: 600; }

/* ============================================================
   旁白 / 线下样式设置弹窗
   全程走 --wx-* 主题变量，换主题（含深色）时自动跟随，
   不再写死任何白底黑字，避免深色主题下糊成一片。
   ============================================================ */
.byg-narr-modal {
	background: var(--wx-card, #fff);
	color: var(--wx-text, #333);
	padding: 16px;
	max-height: 82vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.byg-narr-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--wx-text, #333);
	margin-bottom: 4px;
}
.byg-narr-scroll-container .byg-narr-title { display: none; }
.byg-narr-hint {
	font-size: 12px;
	color: var(--wx-text-sub, #999);
	margin-bottom: 10px;
	line-height: 1.6;
}
/* 分区大标题 */
.byg-narr-sec {
	margin: 14px 0 6px;
	padding-top: 10px;
	border-top: 1px solid var(--wx-sep, #e5e5e5);
	font-size: 14px;
	font-weight: 600;
	color: var(--wx-text, #333);
}
.byg-narr-sec:first-of-type { border-top: none; padding-top: 0; }
/* 分区小标题 */
.byg-narr-sub {
	font-size: 13px;
	font-weight: 600;
	color: var(--wx-brand, #8a7550);
	margin: 10px 0 2px;
}
.byg-narr-setting-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--wx-sep-light, #f0f0f0);
	font-size: 14px;
	color: var(--wx-text, #333);
}
.byg-narr-setting-row:last-child { border-bottom: none; }
.byg-narr-setting-row select,
.byg-narr-setting-row input[type="number"],
.byg-narr-setting-row input[type="text"] {
	flex: none;
	width: 120px;
	padding: 5px 8px;
	font-size: 13px;
	border: 1px solid var(--wx-sep, #ddd);
	border-radius: 6px;
	background: var(--wx-input-bg, #fff);
	color: var(--wx-text, #333);
}
/* 取色器：压成一枚小色块，别让浏览器默认样式撑破行高 */
.byg-narr-setting-row input[type="color"] {
	flex: none;
	width: 52px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--wx-sep, #ddd);
	border-radius: 6px;
	background: var(--wx-input-bg, #fff);
	cursor: pointer;
}
/* 线下界面风格：三档卡片 */
.byg-ofs-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 4px;
}
.byg-ofs-card {
	padding: 9px 8px;
	border: 1px solid var(--wx-sep, #e5e5e5);
	border-radius: 8px;
	background: var(--wx-input-bg, #fafafa);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.byg-ofs-card.on {
	border-color: var(--wx-brand, #8a7550);
	background: color-mix(in srgb, var(--wx-brand, #8a7550) 12%, transparent);
}
.byg-ofs-card-t {
	font-size: 13px;
	font-weight: 600;
	color: var(--wx-text, #333);
	margin-bottom: 2px;
}
.byg-ofs-card.on .byg-ofs-card-t { color: var(--wx-brand, #8a7550); }
.byg-ofs-card-d {
	font-size: 11px;
	color: var(--wx-text-sub, #999);
	line-height: 1.45;
}
.byg-ofs-panel { margin-top: 4px; }
.byg-narr-preview {
	margin-top: 10px;
	padding: 10px;
	border: 1px dashed var(--wx-sep, #ddd);
	border-radius: 8px;
	background: var(--wx-input-bg, #fafafa);
}
.byg-narr-preview-label {
	margin-bottom: 6px;
	font-size: 12px;
	color: var(--wx-text-sub, #999);
}
/* 底部三枚按钮 */
.byg-narr-btns {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}
.byg-narr-btn {
	flex: 1;
	padding: 10px;
	border: 1px solid var(--wx-sep, #ddd);
	background: var(--wx-card, #fff);
	color: var(--wx-text-sub, #666);
	border-radius: 8px;
	font-size: 14px;
	cursor: pointer;
}
.byg-narr-btn.primary {
	border: none;
	background: var(--wx-brand, #8a7550);
	color: #fff;
}

/* ============================================================
   旁白容器实际使用的类名（与 bygNarratorHtml 输出严格对齐）
   ============================================================ */
.byg-narrator {
	display: block;
	text-align: left;
	white-space: normal;
	letter-spacing: 0;
}
.byg-narrator .byg-nr-line {
	display: block;
	margin: 2px 0 6px;
	padding: 6px 10px 6px 10px;
	border-left: 2px solid rgba(140, 120, 90, 0.45);
	border-radius: 4px;
	background: rgba(140, 120, 90, 0.07);
	color: #6b5c46;
	line-height: 1.75;
	white-space: pre-wrap;
	word-break: break-word;
}
.byg-narrator .byg-nr-line.i { font-style: italic; }
.byg-narrator .byg-nr-dash {
	margin-right: 4px;
	opacity: .7;
	font-style: normal;
}
.byg-narrator .byg-nr-speech {
	display: block;
	margin: 4px 0 6px;
	color: #43382a;
	line-height: 1.7;
	white-space: pre-wrap;
	word-break: break-word;
}
.byg-narrator .byg-nr-speech.i { font-style: italic; }
.byg-narrator .byg-nr-speech.b { font-weight: 700; }
.byg-narrator .byg-nr-speech.u {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.byg-narrator > :last-child { margin-bottom: 0; }
/* 单/双下划线强调：__单__ 与 ___双___ */
.byg-narrator .byg-nr-em1 {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.byg-narrator .byg-nr-em2 {
	text-decoration: underline double;
	text-underline-offset: 3px;
}
/* 绿气泡（自己发的）里配色压深，别和微信绿糊在一起 */
.chat-msg-row.right .byg-narrator .byg-nr-line {
	border-left-color: rgba(58, 92, 42, 0.42);
	background: rgba(58, 92, 42, 0.10);
	color: #3f5733;
}
.chat-msg-row.right .byg-narrator .byg-nr-speech { color: #24371c; }
/* 旁白气泡本体：去掉普通气泡的挤压感，给排版留白 */
.chat-bubble.has-narrator {
	padding: 8px 10px;
	line-height: 1.6;
}
/* 线上模式：旁白按钮仍在，但压成置灰态 */
#btn-func-narrator.byg-func-disabled { opacity: .42; }
#btn-func-narrator.byg-func-disabled .func-text { color: #999; }

/* ============================================================ */
/* 【线下界面风格 · 便签传纸条】                                  */
/*   课桌木纹底 + 便利贴纸片，气泡本体整体透明，便签自己就是气泡。 */
/*   作用域全靠 body.byg-ofs-sticky-mode，线上模式碰不到这里。      */
/* ============================================================ */
body.byg-ofs-sticky-mode #chat-detail-page,
body.byg-ofs-sticky-mode #chat-detail-page .page-content,
body.byg-ofs-sticky-mode #chat-message-container {
	background-image:
		repeating-linear-gradient(90deg, rgba(88, 54, 30, 0.10) 0 2px, rgba(88, 54, 30, 0) 2px 7px),
		repeating-linear-gradient(90deg, rgba(255, 236, 210, 0.06) 0 1px, rgba(255, 236, 210, 0) 1px 23px),
		linear-gradient(176deg, #a9743f 0%, #96632f 38%, #8a5a2a 70%, #7d4f24 100%) !important;
	background-size: auto, auto, cover !important;
	background-attachment: local, local, fixed !important;
	color: #3a2a18 !important;
}
/* 课桌上压一层柔光，免得木色板得发死 */
body.byg-ofs-sticky-mode #chat-message-container {
	box-shadow: inset 0 90px 140px -70px rgba(255, 231, 196, 0.30);
}

/* 气泡壳彻底隐形：便签才是可见的那一层 */
body.byg-ofs-sticky-mode #chat-message-container .msg-bubble {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	max-width: none;
}
/* 同一条消息里叠了多张纸条时留点缝，看得出是两张 */
body.byg-ofs-sticky-mode .byg-sticky-note + .byg-sticky-note { margin-top: 9px; }

/* 便利贴纸片本体 */
body.byg-ofs-sticky-mode .byg-sticky-note {
	position: relative;
	background: var(--byg-ofs-peer, #ffffff);
	color: #34302a;
	font-size: 15.5px;
	line-height: 1.85;
	padding: 14px 15px 16px;
	max-width: 100%;
	border-radius: 2px;
	box-shadow:
		0 1px 1px rgba(60, 32, 12, 0.24),
		0 8px 16px -8px rgba(50, 26, 8, 0.42);
	/* 撕口似的轻微不规则，别做成规规矩矩的卡片 */
	transform: rotate(-0.5deg);
}
body.byg-ofs-sticky-mode .chat-msg-row.right .byg-sticky-note {
	background: var(--byg-ofs-self, #fff9c4);
	transform: rotate(0.55deg);
}
/* 纸片上沿一道半透明胶带 */
body.byg-ofs-sticky-mode .byg-sticky-note::before {
	content: '';
	position: absolute;
	top: -7px;
	left: 50%;
	width: 58px;
	height: 16px;
	transform: translateX(-50%) rotate(-1.6deg);
	background: rgba(255, 255, 255, 0.42);
	border-left: 1px solid rgba(255, 255, 255, 0.55);
	border-right: 1px solid rgba(150, 130, 90, 0.16);
	box-shadow: 0 1px 2px rgba(70, 45, 15, 0.14);
	pointer-events: none;
}
/* 右下角翻起来的纸角 */
body.byg-ofs-sticky-mode .byg-sticky-note::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 17px;
	height: 17px;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, rgba(120, 92, 50, 0.16) 50%, rgba(90, 66, 32, 0.30) 100%);
	pointer-events: none;
}
/* 便签里的旁白分层：去掉左侧竖线那套聊天味，改成手写批注感 */
body.byg-ofs-sticky-mode .byg-sticky-note .byg-narrator .byg-nr-line,
body.byg-ofs-sticky-mode .chat-msg-row.right .byg-sticky-note .byg-narrator .byg-nr-line {
	background: transparent;
	border-left: none;
	padding-left: 0;
	color: #7c6a51;
}
body.byg-ofs-sticky-mode .byg-sticky-note .byg-narrator .byg-nr-speech,
body.byg-ofs-sticky-mode .chat-msg-row.right .byg-sticky-note .byg-narrator .byg-nr-speech {
	color: #2f2a22;
}

/* 图片/语音/文件/红包这些卡片消息保留自己的样子，只把纸感托底补上 */
body.byg-ofs-sticky-mode #chat-message-container .msg-bubble.is-image,
body.byg-ofs-sticky-mode #chat-message-container .msg-bubble.is-voice,
body.byg-ofs-sticky-mode #chat-message-container .msg-bubble.is-file,
body.byg-ofs-sticky-mode #chat-message-container .msg-bubble.is-virtual,
body.byg-ofs-sticky-mode #chat-message-container .msg-bubble.is-payment,
body.byg-ofs-sticky-mode #chat-message-container .msg-bubble.is-order-card {
	padding: 10px 12px !important;
	background: var(--byg-ofs-peer, #fff) !important;
	box-shadow: 0 1px 1px rgba(60, 32, 12, 0.22), 0 8px 16px -8px rgba(50, 26, 8, 0.40) !important;
}
body.byg-ofs-sticky-mode #chat-message-container .chat-msg-row.right .msg-bubble.is-image,
body.byg-ofs-sticky-mode #chat-message-container .chat-msg-row.right .msg-bubble.is-voice,
body.byg-ofs-sticky-mode #chat-message-container .chat-msg-row.right .msg-bubble.is-file,
body.byg-ofs-sticky-mode #chat-message-container .chat-msg-row.right .msg-bubble.is-virtual,
body.byg-ofs-sticky-mode #chat-message-container .chat-msg-row.right .msg-bubble.is-payment {
	background: var(--byg-ofs-self, #fff9c4) !important;
}
/* 表情包不该被套上纸片底 */
body.byg-ofs-sticky-mode #chat-message-container .msg-bubble.is-emoticon {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* 时间戳、名字这些辅助文字换成能压在木色上的配色 */
body.byg-ofs-sticky-mode #chat-message-container .system-time-stamp span {
	background: rgba(52, 30, 12, 0.34);
	color: #f6e6cf;
}
body.byg-ofs-sticky-mode #chat-message-container .msg-detail-time,
body.byg-ofs-sticky-mode #chat-message-container .chat-msg-name {
	color: #f2ddc0 !important;
	text-shadow: 0 1px 2px rgba(40, 22, 6, 0.45);
}

/* --- 三个独立隐藏开关 --- */
body.byg-ofs-hide-avatar #chat-message-container .msg-avatar { display: none !important; }
body.byg-ofs-hide-topbar #chat-detail-top { display: none !important; }
/* 顶栏藏了以后内容区要顶上去，不然白留 44px */
body.byg-ofs-hide-topbar #main-content-area { top: 0 !important; }
body.byg-ofs-hide-inputbar #chat-input-bar { display: none !important; }

/* --- 隐藏输入栏后的小铅笔 --- */
#byg-sticky-pencil {
	position: fixed;
	right: 16px;
	bottom: calc(20px + env(safe-area-inset-bottom));
	width: 46px;
	height: 46px;
	border: none;
	border-radius: 50%;
	background: linear-gradient(158deg, #fff6cf 0%, #f4dd93 100%);
	color: #6a4a1c;
	font-size: 18px;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1002;
	box-shadow: 0 3px 10px rgba(46, 24, 6, 0.34), 0 10px 22px -10px rgba(46, 24, 6, 0.46);
	transition: transform .16s ease, box-shadow .16s ease;
}
#byg-sticky-pencil:active {
	transform: scale(0.93);
	box-shadow: 0 2px 6px rgba(46, 24, 6, 0.34);
}
/* 只有"便签模式 + 输入栏已隐藏"时铅笔才出现 */
body.byg-ofs-sticky-mode.byg-ofs-hide-inputbar #byg-sticky-pencil { display: flex; }
/* 铅笔点开的那一刻，输入栏临时回来，铅笔让位 */
body.byg-ofs-hide-inputbar.byg-sticky-input-open #chat-input-bar { display: flex !important; }
body.byg-ofs-sticky-mode.byg-ofs-hide-inputbar.byg-sticky-input-open #byg-sticky-pencil { display: none; }

/* 便签模式下的输入栏也换成纸面质感，别突然冒出一条微信灰 */
body.byg-ofs-sticky-mode #chat-input-bar {
	background-color: rgba(120, 76, 36, 0.94) !important;
}
body.byg-ofs-sticky-mode #chat-input-bar .chat-bar-input {
	background: #fffdf2 !important;
	color: #3a2f20 !important;
}
body.byg-ofs-sticky-mode #chat-input-bar .chat-bar-btn { color: #fbeed6 !important; }

/* ============================================================ */
/* 【线下界面风格 · 小说阅读】                                    */
/*   整屏变成一本电子书：书页底色、正文段落排版、状态栏、选项区。  */
/*   气泡壳同样隐形，文字直接落在书页上，不再有左右分列的聊天感。  */
/*   作用域 body.byg-ofs-novel-mode，线上模式完全不受影响。         */
/* ============================================================ */
body.byg-ofs-novel-mode #chat-detail-page,
body.byg-ofs-novel-mode #chat-detail-page .page-content,
body.byg-ofs-novel-mode #chat-message-container {
	background: var(--byg-ofs-novel-bg, #f5efe3) !important;
	background-image: none !important;
	color: var(--byg-ofs-novel-ink, #33302b) !important;
}
/* 书页留白：阅读器不该像聊天那样贴边 */
body.byg-ofs-novel-mode #chat-message-container {
	padding-left: 20px !important;
	padding-right: 20px !important;
	font-family: var(--byg-ofs-novel-font, inherit);
}

/* 消息行摊平成正文段落：不分左右、不留头像位 */
body.byg-ofs-novel-mode #chat-message-container .chat-msg-row {
	display: block !important;
	width: 100% !important;
	margin: 0 0 2px !important;
}
body.byg-ofs-novel-mode #chat-message-container .msg-avatar,
body.byg-ofs-novel-mode #chat-message-container .msg-detail-time,
body.byg-ofs-novel-mode #chat-message-container .batch-checkbox-col {
	display: none !important;
}
body.byg-ofs-novel-mode #chat-message-container .msg-content-wrapper {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	align-items: stretch !important;
}
/* 气泡壳隐形，正文直接落在纸上 */
body.byg-ofs-novel-mode #chat-message-container .msg-bubble {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	color: var(--byg-ofs-novel-ink, #33302b) !important;
	font-size: calc(16px * var(--byg-ofs-novel-scale, 100) / 100) !important;
	line-height: 1.95 !important;
	cursor: default;
}
/* 正文段落：首行缩进两格，是小说该有的样子 */
body.byg-ofs-novel-mode #chat-message-container .msg-bubble > .byg-novel-para {
	margin: 0 0 0.9em;
	text-indent: 2em;
	text-align: justify;
}
body.byg-ofs-novel-mode #chat-message-container .msg-bubble > .byg-novel-para:last-child { margin-bottom: 0; }
/* 旁白分层在阅读器里换一套气质：描写是叙述文，台词带引号另起 */
body.byg-ofs-novel-mode #chat-message-container .byg-narrator .byg-nr-line,
body.byg-ofs-novel-mode #chat-message-container .chat-msg-row.right .byg-narrator .byg-nr-line {
	background: transparent !important;
	border-left: none !important;
	padding-left: 0 !important;
	color: var(--byg-ofs-novel-ink, #33302b) !important;
	text-indent: 2em;
	margin-bottom: 0.65em;
}
body.byg-ofs-novel-mode #chat-message-container .byg-narrator .byg-nr-speech,
body.byg-ofs-novel-mode #chat-message-container .chat-msg-row.right .byg-narrator .byg-nr-speech {
	color: var(--byg-ofs-novel-ink, #33302b) !important;
	text-indent: 2em;
	margin-bottom: 0.65em;
}
/* 说话人抬头：阅读器里需要知道这句是谁说的 */
body.byg-ofs-novel-mode #chat-message-container .byg-novel-who {
	display: block;
	font-size: 0.82em;
	letter-spacing: 0.08em;
	color: color-mix(in srgb, var(--byg-ofs-novel-ink, #33302b) 52%, transparent);
	margin-bottom: 0.25em;
	text-indent: 0;
}
/* 时间戳在阅读器里做成章节分隔线 */
body.byg-ofs-novel-mode #chat-message-container .system-time-stamp {
	margin: 18px 0 14px;
}
body.byg-ofs-novel-mode #chat-message-container .system-time-stamp span {
	background: transparent !important;
	color: color-mix(in srgb, var(--byg-ofs-novel-ink, #33302b) 45%, transparent) !important;
	font-size: 12px;
	letter-spacing: 0.14em;
}
/* 图片、语音这些非文本消息在阅读器里收成窄插图 */
body.byg-ofs-novel-mode #chat-message-container .msg-bubble.is-image,
body.byg-ofs-novel-mode #chat-message-container .msg-bubble.is-emoticon,
body.byg-ofs-novel-mode #chat-message-container .msg-bubble.is-voice,
body.byg-ofs-novel-mode #chat-message-container .msg-bubble.is-file,
body.byg-ofs-novel-mode #chat-message-container .msg-bubble.is-virtual,
body.byg-ofs-novel-mode #chat-message-container .msg-bubble.is-payment {
	width: auto !important;
	max-width: 72% !important;
	margin: 6px auto 14px !important;
}
/* 阅读器里的输入栏跟着书页配色，不要突然一条微信灰 */
body.byg-ofs-novel-mode #chat-input-bar {
	background-color: color-mix(in srgb, var(--byg-ofs-novel-bg, #f5efe3) 88%, #000 12%) !important;
}
body.byg-ofs-novel-mode #chat-input-bar .chat-bar-input {
	background: color-mix(in srgb, var(--byg-ofs-novel-bg, #f5efe3) 96%, #fff 4%) !important;
	color: var(--byg-ofs-novel-ink, #33302b) !important;
	font-family: var(--byg-ofs-novel-font, inherit);
}

/* --- 文游状态栏：阅读器顶部那条常驻信息条 --- */
#byg-novel-hud {
	position: fixed;
	left: 0;
	right: 0;
	top: 44px;
	z-index: 900;
	display: none;
	padding: 7px 14px;
	background: color-mix(in srgb, var(--byg-ofs-novel-bg, #f5efe3) 92%, #000 8%);
	border-bottom: 1px solid color-mix(in srgb, var(--byg-ofs-novel-ink, #33302b) 14%, transparent);
	color: var(--byg-ofs-novel-ink, #33302b);
	font-size: 12px;
	line-height: 1.6;
	font-family: var(--byg-ofs-novel-font, inherit);
	box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.35);
}
body.byg-ofs-novel-mode.byg-novel-hud-on #byg-novel-hud { display: block; }
body.byg-ofs-novel-mode.byg-ofs-hide-topbar #byg-novel-hud { top: 0; }
#byg-novel-hud .byg-hud-title {
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-bottom: 3px;
}
#byg-novel-hud .byg-hud-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
}
#byg-novel-hud .byg-hud-stat {
	display: inline-flex;
	gap: 4px;
	align-items: baseline;
}
#byg-novel-hud .byg-hud-k {
	opacity: 0.62;
}
#byg-novel-hud .byg-hud-v { font-weight: 600; }

/* --- 文游选项区：橙光式 A/B/C 选择 --- */
.byg-novel-choices {
	margin: 4px 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.byg-novel-choice {
	display: block;
	width: 100%;
	text-align: left;
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, var(--byg-ofs-novel-ink, #33302b) 22%, transparent);
	border-radius: 3px;
	background: color-mix(in srgb, var(--byg-ofs-novel-bg, #f5efe3) 94%, #fff 6%);
	color: var(--byg-ofs-novel-ink, #33302b);
	font-size: calc(14.5px * var(--byg-ofs-novel-scale, 100) / 100);
	line-height: 1.7;
	font-family: var(--byg-ofs-novel-font, inherit);
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
.byg-novel-choice:active {
	transform: scale(0.985);
	background: color-mix(in srgb, var(--byg-ofs-novel-ink, #33302b) 8%, transparent);
}
.byg-novel-choice .byg-choice-key {
	font-weight: 700;
	margin-right: 8px;
	letter-spacing: 0.06em;
}
.byg-novel-choice.picked {
	border-color: color-mix(in srgb, var(--byg-ofs-novel-ink, #33302b) 52%, transparent);
	background: color-mix(in srgb, var(--byg-ofs-novel-ink, #33302b) 10%, transparent);
}
.byg-novel-choice[disabled] { opacity: 0.55; cursor: default; }
/* 系统条：文游里的规则提示、判定结果 */
.byg-novel-sys {
	margin: 6px 0 14px;
	padding: 9px 12px;
	border-left: 3px solid color-mix(in srgb, var(--byg-ofs-novel-ink, #33302b) 40%, transparent);
	background: color-mix(in srgb, var(--byg-ofs-novel-ink, #33302b) 6%, transparent);
	color: color-mix(in srgb, var(--byg-ofs-novel-ink, #33302b) 82%, transparent);
	font-size: calc(13px * var(--byg-ofs-novel-scale, 100) / 100);
	line-height: 1.75;
	letter-spacing: 0.02em;
	text-indent: 0 !important;
}
.byg-novel-sys .byg-sys-tag {
	font-weight: 700;
	margin-right: 6px;
	opacity: 0.7;
}

/* --- 故事书创建弹窗：继承主题变量 --- */
.byg-book-modal {
	max-height: 82vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.byg-book-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--wx-text, #333);
	margin-bottom: 4px;
}
.byg-book-hint {
	font-size: 12px;
	color: var(--wx-text-sub, #999);
	line-height: 1.6;
	margin-bottom: 12px;
}
.byg-book-field { margin-bottom: 11px; }
.byg-book-label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wx-text, #333);
	margin-bottom: 5px;
}
.byg-book-label .byg-book-req { color: #e15b4c; margin-left: 3px; }
.byg-book-field input[type="text"],
.byg-book-field textarea,
.byg-book-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 10px;
	border: 1px solid var(--wx-sep, #e0e0e0);
	border-radius: 8px;
	background: var(--wx-input-bg, #fff);
	color: var(--wx-text, #333);
	font-size: 13.5px;
	line-height: 1.6;
	font-family: inherit;
}
.byg-book-field textarea { min-height: 76px; resize: vertical; }
.byg-book-field input:focus,
.byg-book-field textarea:focus,
.byg-book-field select:focus {
	outline: none;
	border-color: var(--wx-brand, #8a7550);
}
.byg-book-tip {
	font-size: 11px;
	color: var(--wx-text-sub, #9a9a9a);
	line-height: 1.55;
	margin-top: 4px;
}
/* 故事书列表：已有存档 */
.byg-book-list { margin: 6px 0 10px; }
.byg-book-item {
	padding: 10px 12px;
	border: 1px solid var(--wx-sep, #e5e5e5);
	border-radius: 8px;
	background: var(--wx-input-bg, #fafafa);
	margin-bottom: 8px;
	cursor: pointer;
}
.byg-book-item.on {
	border-color: var(--wx-brand, #8a7550);
	background: color-mix(in srgb, var(--wx-brand, #8a7550) 10%, transparent);
}
.byg-book-item-t {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wx-text, #333);
	margin-bottom: 3px;
}
.byg-book-item-d {
	font-size: 11.5px;
	color: var(--wx-text-sub, #999);
	line-height: 1.55;
}
/* 白月光手机账户：独立账户中心视觉层 */
#byg-account-page .byg-account-profile-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; }
#byg-account-page .byg-account-avatar { display: flex; flex: 0 0 58px; width: 58px; height: 58px; align-items: center; justify-content: center; overflow: hidden; border: 2px solid rgba(255,255,255,0.9); border-radius: 18px; background: linear-gradient(145deg, #6f9da0, #a6c6c4); color: #fff; font-size: 22px; box-shadow: 0 8px 18px rgba(71,127,132,0.18); }
#byg-account-page .byg-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
#byg-account-page .byg-account-profile-copy { min-width: 0; }
#byg-account-page .byg-account-profile-copy .settings-hero-kicker { margin-bottom: 5px; }
#byg-account-page .byg-account-profile-copy .settings-hero-title { overflow: hidden; margin-bottom: 3px; font-size: 21px; white-space: nowrap; text-overflow: ellipsis; }
#byg-account-page .byg-account-profile-copy .settings-hero-subtitle { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#byg-account-page .settings-shell { gap: 14px; }
#byg-account-page .byg-account-hero { position: relative; overflow: hidden; padding: 22px 20px 18px; background: linear-gradient(135deg, #e6f4f1 0%, #f7fbfa 62%, #edf3fb 100%); }
#byg-account-page .byg-account-hero::after { content: ''; position: absolute; right: -30px; bottom: -45px; width: 150px; height: 150px; border: 1px solid rgba(91,139,143,0.18); border-radius: 50%; box-shadow: 0 0 0 16px rgba(91,139,143,0.05), 0 0 0 32px rgba(91,139,143,0.035); }
#byg-account-page .settings-hero-title { font-size: 25px; }
#byg-account-page .byg-account-primary { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-top: 17px; padding: 11px 15px; border: 0; border-radius: 13px; background: #477f84; color: #fff; font: inherit; font-size: 14px; font-weight: 700; box-shadow: 0 8px 18px rgba(71,127,132,0.22); }
#byg-account-page .byg-account-primary:active { transform: translateY(1px); }
#byg-account-page .byg-account-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#byg-account-page .byg-account-metric { min-width: 0; padding: 12px 10px; border: 1px solid var(--sea-border); border-radius: 15px; background: rgba(255,255,255,0.72); box-shadow: 0 5px 14px rgba(76,113,116,0.06); }
#byg-account-page .byg-account-metric span { display: block; overflow: hidden; color: var(--sea-muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
#byg-account-page .byg-account-metric strong { display: block; margin-top: 7px; overflow: hidden; color: var(--sea-ink); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
#byg-account-page .byg-account-list .setting-btn { min-height: 62px; }
#byg-account-page .byg-account-list .setting-btn-text { font-size: 14px; line-height: 1.4; }
@media (max-width: 350px) { #byg-account-page .byg-account-metrics { gap: 5px; } #byg-account-page .byg-account-metric { padding-left: 7px; padding-right: 7px; } }
.byg-account-modal { display: none; position: fixed; inset: 0; z-index: 500; align-items: flex-end; justify-content: center; }
.byg-account-modal.is-open { display: flex; }
.byg-account-modal-backdrop { position: absolute; inset: 0; background: rgba(20,42,45,0.28); backdrop-filter: blur(3px); }
.byg-account-dialog { position: relative; width: min(100% - 28px, 390px); margin-bottom: 18px; padding: 22px 18px 17px; border: 1px solid rgba(122,163,164,0.24); border-radius: 24px; background: #fafdfe; box-shadow: 0 18px 45px rgba(30,70,72,0.22); }
.byg-account-dialog-close { position: absolute; top: 13px; right: 13px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #edf4f4; color: #65878a; }
.byg-account-dialog-kicker { color: #75999b; font-size: 10px; letter-spacing: .18em; }
.byg-account-dialog h2 { margin: 7px 0 5px; color: #214e53; font-size: 21px; }
.byg-account-dialog p { margin: 0 35px 16px 0; color: #6d878a; font-size: 12px; line-height: 1.6; }
.byg-account-mode-switch { display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 12px; background: #edf5f4; }
.byg-account-mode-switch button { flex: 1; padding: 8px; border: 0; border-radius: 9px; background: transparent; color: #729092; font: inherit; font-size: 13px; }
.byg-account-mode-switch button.active { background: #fff; color: #367277; font-weight: 700; box-shadow: 0 3px 8px rgba(71,127,132,.1); }
.byg-account-field { display: block; margin: 10px 0; color: #5e7b7e; font-size: 12px; font-weight: 600; }
.byg-account-field input { display: block; box-sizing: border-box; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid #d6e5e3; border-radius: 11px; outline: 0; background: #fff; color: #24484d; font: inherit; }
.byg-account-field input:focus { border-color: #6ba4a4; box-shadow: 0 0 0 3px rgba(107,164,164,.12); }
.byg-account-error { min-height: 18px; margin: 5px 0; color: #c35d67; font-size: 12px; line-height: 1.5; }
.byg-account-verify-note { margin: 8px 0 10px; padding: 9px 10px; border: 1px solid #cce5dc; border-radius: 10px; background: #effaf5; color: #397b68; font-size: 11px; line-height: 1.6; }
.byg-account-submit { width: 100%; padding: 12px; border: 0; border-radius: 12px; background: #477f84; color: #fff; font: inherit; font-size: 14px; font-weight: 700; }
.byg-account-submit:disabled { opacity: .55; }
.byg-account-forgot { display: block; width: 100%; margin-top: 8px; border: 0; background: transparent; color: #5b8c8d; font: inherit; font-size: 11px; }
.byg-account-verify-actions { display: flex; gap: 8px; margin-top: 9px; }
.byg-account-verify-actions button { flex: 1; padding: 8px 5px; border: 1px solid #cfe2df; border-radius: 10px; background: #f3faf8; color: #4d8580; font: inherit; font-size: 11px; }
.byg-account-verify-actions button:disabled { opacity: .55; }
.byg-account-dialog-foot { margin-top: 12px; color: #91a5a6; font-size: 10px; line-height: 1.5; text-align: center; }